From cbddf00e20c8c45be4e5217d81a2340bd42c7609 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Thu, 9 Apr 2026 13:20:10 +0100
Subject: [PATCH] add spacing

---
 app/components/video-galary.tsx | 142 +++++++++++++++++++++++++++++---
 1 file changed, 132 insertions(+), 10 deletions(-)

diff --git a/app/components/video-galary.tsx b/app/components/video-galary.tsx
index 4e27ad3..13ce2b3 100644
--- a/app/components/video-galary.tsx
+++ b/app/components/video-galary.tsx
@@ -78,8 +78,8 @@ const recentes = [
 
 export function TvoneMainColumns1() {
   return (
-    <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 ">
-    <section>
+    <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-20 ">
+      <section>
       {/* Cabeçalho Minimalista com Link Azul */}
       <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">
@@ -210,16 +210,64 @@ const negocios = [
     img: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?q=80&w=800&auto=format&fit=crop",
   },
 ];
-
+const editorChoice = [
+  {
+    category: "Exclusivo",
+    title: "O renascimento da arquitetura moderna em Luanda: Equilíbrio entre história e inovação",
+    description: "Um olhar detalhado sobre como os novos projetos urbanos estão a redefinir a linha do horizonte da capital.",
+    readTime: "8",
+    publishDate: "09 ABR 2026", // Data fixa para artigos de fundo
+    img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    category: "Cultura",
+    title: "Documentário premiado explora as raízes rítmicas do interior de Angola",
+    description: "A jornada cinematográfica que capturou sons ancestrais antes que desaparecessem no tempo.",
+    readTime: "6",
+    publishDate: "Há 3 horas", // Tempo relativo para notícias quentes
+    img: "https://images.unsplash.com/photo-1516280440614-37939bbacd81?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    category: "Estilo de Vida",
+    title: "Gastronomia sustentável: O novo movimento que está a conquistar os chefs locais",
+    description: "Como a utilização de produtos sazonais e produtores regionais está a mudar o menu dos melhores restaurantes.",
+    readTime: "5",
+    publishDate: "08 ABR 2026",
+    img: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop",
+  },
+];
 export function TvoneEntrevistas() {
   return (
     <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
-      <div className="mb-8">
-        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">Entrevistas</h2>
-        <p className="mt-2 text-neutral-500">Conversas exclusivas com quem move o mercado e a cultura.</p>
+      {/* Cabeçalho com Título, Descrição e Link Azul */}
+      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
+        <div className="max-w-[600px]">
+          <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
+            Entrevistas
+          </h2>
+          <p className="mt-2 text-sm md:text-base text-neutral-500 leading-relaxed">
+            Conversas exclusivas com as personalidades que movem o mercado, a tecnologia e a cultura em Angola.
+          </p>
+        </div>
+        
+        <Link 
+          href="/entrevistas" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499] whitespace-nowrap mb-1"
+        >
+          Ver tudo
+          <svg 
+            className="h-4 w-4 transition-transform group-hover:translate-x-0.5" 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            stroke="currentColor"
+            strokeWidth={2.5}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
       </div>
 
-      {/* Grid de 3 colunas para estilo Premium/Apple */}
+      {/* Grid de Cards */}
       <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
         {entrevistas.map((item, index) => (
           <article key={index} className="group cursor-pointer">
@@ -231,11 +279,13 @@ export function TvoneEntrevistas() {
                   fill
                   className="object-cover transition duration-700 group-hover:scale-105"
                 />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity" />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/95 via-black/20 to-transparent opacity-90 transition-opacity duration-500 group-hover:opacity-100" />
                 
                 <div className="absolute bottom-0 p-8">
-                  <span className="text-xs font-bold uppercase tracking-widest text-blue-400">{item.guest}</span>
-                  <h3 className="mt-2 text-xl font-bold leading-tight text-white md:text-2xl">
+                  <span className="text-[10px] font-bold uppercase tracking-[0.15em] text-blue-400">
+                    {item.guest}
+                  </span>
+                  <h3 className="mt-3 text-xl font-bold leading-tight text-white md:text-2xl">
                     "{item.title}"
                   </h3>
                 </div>
@@ -311,4 +361,76 @@ export function TvoneNegocios() {
       </div>
     </section>
   );
+}
+
+export function TvoneEscolhaEditor() {
+  return (
+    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
+      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-6">
+        <div className="max-w-[600px]">
+          <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
+            Escolha do Editor
+          </h2>
+          <p className="mt-2 text-sm md:text-base text-neutral-500 leading-relaxed">
+            Curadoria exclusiva das histórias mais impactantes do dia, selecionadas pela nossa redação.
+          </p>
+        </div>
+        
+        <Link 
+          href="/escolhas" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499] whitespace-nowrap mb-1"
+        >
+          Ver tudo
+          <svg className="h-4 w-4 transition-transform group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+      </div>
+
+      <div className="grid gap-10 lg:grid-cols-3">
+        {editorChoice.map((item, index) => (
+          <article key={index} className="group flex flex-col gap-5">
+            <div className="relative aspect-video overflow-hidden rounded-[24px] bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-md">
+              <Image
+                src={item.img}
+                alt=""
+                fill
+                className="object-cover transition-transform duration-700 group-hover:scale-105"
+              />
+            </div>
+            
+            <div className="px-1">
+              <div className="flex items-center gap-3">
+                <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
+                  {item.category}
+                </span>
+                <span className="h-1 w-1 rounded-full bg-neutral-300" />
+                {/* Data de Publicação em destaque suave */}
+                <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">
+                  {item.publishDate}
+                </span>
+              </div>
+              
+              <h3 className="mt-3 text-xl font-bold leading-snug text-neutral-900 transition-colors group-hover:text-[#0066CC]">
+                {item.title}
+              </h3>
+              
+              <p className="mt-3 line-clamp-2 text-sm leading-relaxed text-neutral-500">
+                {item.description}
+              </p>
+              
+              <div className="mt-5 flex items-center gap-2 border-t border-neutral-50 pt-4">
+                <svg className="h-3.5 w-3.5 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                <span className="text-[10px] font-bold uppercase text-neutral-400">
+                    {item.readTime} min de leitura
+                </span>
+              </div>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
 }
\ No newline at end of file