From 9637833e5e776d8182766726f1b9c098fff7bd59 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Sun, 5 Apr 2026 16:01:39 +0100
Subject: [PATCH] make destaque look good

---
 app/components/tvone-content.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/components/tvone-content.tsx b/app/components/tvone-content.tsx
index 35d45ff..8792522 100644
--- a/app/components/tvone-content.tsx
+++ b/app/components/tvone-content.tsx
@@ -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>