add label to destaque

app/components/tvone-content.tsx

@@ -136,7 +136,9 @@ const aSeguir = [
 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>
+      <h2 className="mb-6 text-2xl font-bold tracking-tight text-neutral-900">
+        Destaques
+      </h2>
       <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
         {destaques.map((item) => (
           <article
@@ -144,7 +146,7 @@ export function TvoneDestaques() {
             className="group cursor-pointer bg-white transition"
           >
             <Link href="#" className="block">
-              {/* VIDEO THUMBNAIL CONTAINER */}
+              {/* 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">
                 <Image
                   src={item.img}
@@ -153,17 +155,26 @@ export function TvoneDestaques() {
                   className="object-cover transition duration-500 group-hover:scale-110"
                   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" />
+
+                {/* NEW INTERNAL LABEL */}
+                <div className="absolute bottom-3 left-3 z-10">
+                  <span className="rounded-lg bg-black/50 px-2 py-1 text-[10px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
+                    {item.cat}
+                  </span>
+                </div>
               </div>
 
-              {/* TEXT CONTENT */}
+              {/* TEXT CONTENT (Simplified) */}
               <div className="py-4">
-                <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">
+                <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
                   {item.title}
                 </h3>
-                <p className="mt-2 text-xs text-neutral-500">{item.date}</p>
+                <div className="mt-2 flex items-center gap-2">
+                   <p className="text-[11px] font-medium text-neutral-400">{item.date}</p>
+                </div>
               </div>
             </Link>
           </article>