From 104207d909f6257033958475369d3ad06831d9fc Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Sat, 11 Apr 2026 03:15:00 +0100
Subject: [PATCH] improve

---
 app/components/tvone-content.tsx | 41 +++++++++++++++-----------------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/app/components/tvone-content.tsx b/app/components/tvone-content.tsx
index 822e45d..f810faa 100644
--- a/app/components/tvone-content.tsx
+++ b/app/components/tvone-content.tsx
@@ -166,48 +166,45 @@ export function TvoneDestaques() {
         </Link>
       </div>
       <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
-        {destaques.map((item) => (
+        {destaques.map((item, index) => (
           <article
             key={item.title}
             className="group cursor-pointer bg-white transition"
+          >
+          <article
+            key={index}
+            className="group cursor-pointer bg-white transition"
           >
             <Link href="#" className="block">
-              {/* IMAGE 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">
+              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-100 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-500 group-hover:scale-110"
+                  className="object-cover transition duration-500 group-hover:scale-105"
                   sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                 />
-
-                {/* GRADIENT OVERLAY (For readability) */}
-                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-80" />
-
-
-               
               </div>
 
-              {/* TEXT CONTENT (Simplified) */}
-              <div className="mt-5 px-1">
-
-          
-                <div className="flex items-center gap-3">
-                  <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">{item.cat}</span>
+              <div className="py-4">
+                <div className="flex items-center gap-3 pb-2">
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
+                    {item.cat}
+                  </span>
                   <span className="h-1 w-1 rounded-2xl bg-neutral-300" />
-                  <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">{item.date}</span>
+                  {/* Data de Publicação em destaque suave */}
+                  <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">
+                    {item.date}
+                  </span>
                 </div>
-            
-                
-                <h3 className="line-clamp-3 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
+
+                <h3 className="line-clamp-4 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
                   {item.title}
                 </h3>
-      
               </div>
-              
             </Link>
           </article>
+          </article>
         ))}
       </div>
     </section>