From 3aab9adaea577b8c39a48fd8f9f760edde959782 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Thu, 9 Apr 2026 13:37:49 +0100
Subject: [PATCH] add date

---
 app/components/tvone-content.tsx | 55 ++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/app/components/tvone-content.tsx b/app/components/tvone-content.tsx
index e0aeed1..d42a028 100644
--- a/app/components/tvone-content.tsx
+++ b/app/components/tvone-content.tsx
@@ -79,6 +79,7 @@ const destaques = [
 const recentes = [
   {
     cat: "EM FOCO",
+    readTime: "6",
     catBg: "bg-pink-100 text-pink-700",
     title: "Governo anuncia medidas para apoiar famílias e pequenas empresas.",
     excerpt: "Pacote inclui linhas de crédito e simplificação de procedimentos.",
@@ -88,6 +89,7 @@ const recentes = [
   },
   {
     cat: "ECONOMIA",
+    readTime: "6",
     catBg: "bg-amber-100 text-amber-800",
     title: "Inflação desce pelo terceiro mês consecutivo, segundo dados preliminares.",
     excerpt: "Analistas mantêm cautela face ao cenário internacional.",
@@ -97,6 +99,7 @@ const recentes = [
   },
   {
     cat: "CULTURA",
+    readTime: "6",
     catBg: "bg-violet-100 text-violet-800",
     title: "Museu inaugura exposição com obras inéditas de artistas locais.",
     excerpt: "Visitas guiadas e programa educativo arrancam no próximo fim de semana.",
@@ -106,6 +109,7 @@ const recentes = [
   },
   {
     cat: "SAÚDE",
+    readTime: "6",
     catBg: "bg-emerald-100 text-emerald-800",
     title: "Campanha de vacinação alarga faixas etárias em todo o país.",
     excerpt: "Autoridades de saúde reforçam importância da adesão às janelas recomendadas.",
@@ -206,14 +210,14 @@ export function TvoneDestaques() {
 export function TvoneMainColumns() {
   return (
     <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
-      {/* SECTION HEADER */}
+      {/* SECTION HEADER UNIFICADO */}
       <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
         <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
           Destaques
         </h2>
         
         <Link 
-          href="/negocios" 
+          href="/noticias" 
           className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
         >
           Ver tudo
@@ -229,14 +233,14 @@ export function TvoneMainColumns() {
         </Link>
       </div>
 
-      {/* TWO COLUMN GRID OF HORIZONTAL CARDS */}
-      <div className="grid gap-x-10 gap-y-12 md:grid-cols-2">
+      {/* GRID DE CARDS HORIZONTAIS */}
+      <div className="grid gap-x-12 gap-y-12 md:grid-cols-2">
         {recentes.map((item) => (
           <article key={item.title} className="group cursor-pointer">
-            <Link href="#" className="flex flex-row items-start gap-5">
+            <Link href="#" className="flex flex-row items-start gap-6">
               
-              {/* 1. IMAGE SIDE (Fixed width on desktop) */}
-              <div className="relative aspect-[16/9] w-32 shrink-0 overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-lg sm:w-44 md:w-48 lg:w-56">
+              {/* 1. LADO DA IMAGEM (Limpo e Minimalista) */}
+              <div className="relative aspect-[4/3] w-32 shrink-0 overflow-hidden rounded-[20px] bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-xl sm:w-44 md:w-48 lg:w-52">
                 <Image 
                   src={item.img} 
                   alt="" 
@@ -244,20 +248,25 @@ export function TvoneMainColumns() {
                   className="object-cover transition duration-700 group-hover:scale-110" 
                   sizes="(max-width: 768px) 128px, 224px" 
                 />
-                
-                {/* THE INTERNAL LABEL (Bottom Left) */}
-                <div className="absolute bottom-2 left-2 z-10">
-                  <span className="rounded-lg bg-black/60 px-2 py-1 text-[9px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
-                    {item.cat}
-                  </span>
-                </div>
-                
-                {/* Subtle gradient for label contrast */}
-                <div className="absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-black/40 to-transparent opacity-60" />
               </div>
 
-              {/* 2. TEXT SIDE (Fills remaining space) */}
-              <div className="flex flex-1 flex-col">
+              {/* 2. LADO DO TEXTO (Categoria externa ao topo) */}
+              <div className="flex flex-1 flex-col pt-1">
+                {/* CATEGORIA E DATA LADO A LADO */}
+                <div className="flex items-center gap-2 mb-2">
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-[#0066CC]">
+                    {item.cat}
+                  </span>
+                  <span className="h-1 w-1 rounded-full bg-neutral-300" />
+                  <span className="text-[10px] font-semibold text-neutral-400 uppercase tracking-tight">
+                    {item.date}
+                  </span>
+                  <span className="h-1 w-1 rounded-full bg-neutral-300" />
+                  <span className="text-[10px] font-bold uppercase text-neutral-400">
+                    {item.readTime} min
+                </span>
+                </div>
+
                 <h3 className="line-clamp-2 text-base font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] sm:text-lg lg:text-xl">
                   {item.title}
                 </h3>
@@ -266,18 +275,16 @@ export function TvoneMainColumns() {
                   {item.excerpt}
                 </p>
 
-                <div className="mt-auto pt-3 flex items-center gap-2 text-[11px] font-semibold text-neutral-400">
+                {/* AUTOR / BYLINE */}
+                {/* <div className="mt-4 flex items-center gap-2 text-[10px] font-bold text-neutral-400 uppercase tracking-tighter">
                   <span className="text-neutral-900">{item.byline}</span>
-                  <span className="h-0.5 w-0.5 rounded-full bg-neutral-300" />
-                  <span>{item.date}</span>
-                </div>
+                </div> */}
               </div>
 
             </Link>
           </article>
         ))}
       </div>
-
     </section>
   );
 }