peter/tvone
1
0
Fork 0
mirror of https://github.com/PeterMaquiran/tvone.git synced 2026-04-18 15:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

make destaque look good
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-05 16:01:39 +01:00
parent 9996f1051c
commit 9637833e5e
1 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/tvone-content.tsx
+14 -7
View File
@@ -137,26 +137,33 @@ export function TvoneDestaques() {
return (
<section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
<h2 className="mb-6 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Destaques</h2>
<div className="grid gap-5 sm:grid-cols-4 lg:grid-cols-4">
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
{destaques.map((item) => (
<article
key={item.title}
className="group overflow-hidden bg-white transition "
className="group cursor-pointer bg-white transition"
>
<Link href="#" className="block">
<div className="relative aspect-[16/9] w-full overflow-hidden rounded-xl">
{/* VIDEO THUMBNAIL CONTAINER */}
<div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-900 shadow-sm transition-all duration-300 group-hover:shadow-xl group-hover:shadow-neutral-200">
<Image
src={item.img}
alt=""
fill
className="object-cover transition duration-300 group-hover:scale-[1.03]"
className="object-cover transition duration-500 group-hover:scale-110"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
/>
</div>
{/* TEXT CONTENT */}
<div className="py-4">
<p className={`mb-2 text-[11px] font-bold uppercase tracking-wide ${item.catColor}`}>{item.cat}</p>
<h3 className="text-base font-bold leading-snug text-neutral-900 md:text-lg">{item.title}</h3>
<p className="mt-3 text-xs text-neutral-500">{item.date}</p>
<p className={`mb-1.5 text-[10px] font-bold uppercase tracking-wide ${item.catColor}`}>
{item.cat}
</p>
<h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 group-hover:text-[#0066cc] md:text-lg">
{item.title}
</h3>
<p className="mt-2 text-xs text-neutral-500">{item.date}</p>
</div>
</Link>
</article>