From f6bea75cc4c8dfb1b6918fbc32eef7fb388fb3b1 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Mon, 6 Apr 2026 14:43:30 +0100
Subject: [PATCH] add label to destaque

---
 app/components/tvone-content.tsx | 27 +++++++++++++++++++--------
 app/components/tvone-hero.tsx    |  2 +-
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/components/tvone-content.tsx b/app/components/tvone-content.tsx
index d9b53c9..f9c8b13 100644
--- a/app/components/tvone-content.tsx
+++ b/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>
diff --git a/app/components/tvone-hero.tsx b/app/components/tvone-hero.tsx
index fcaae3c..00d9937 100644
--- a/app/components/tvone-hero.tsx
+++ b/app/components/tvone-hero.tsx
@@ -49,7 +49,7 @@ export function TvoneHero() {
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent" />
           <div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10">
-            <span className="mb-2 inline-flex w-fit  bg-[#7c3aed] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">
+            <span className="mb-2 inline-flex w-fit  px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide bg-blue-600 text-white">
               {slide.tag}
             </span>
             <h1 className="max-w-3xl text-balance text-2xl font-bold leading-tight text-white md:text-3xl lg:text-4xl">