add scroll

app/components/cultura.tsx

@@ -105,12 +105,27 @@ const destaques = [
 export function TvoneDestaquesCultura() {
   return (
     <section className="mx-auto w-full max-w-[1200px] px-4 pb-16">
-      <div className="mb-8 flex items-end justify-between">
-          <h2 className="text-3xl font-bold tracking-tight text-neutral-900">Cultura</h2>
-          {/* Optional secondary link style for iOS */}
-          <Link href="/cultura" className="hidden text-sm font-medium text-blue-600 hover:underline md:block">
-              Explorar tudo
-          </Link>
+      {/* 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">
+          Cultura
+        </h2>
+        
+        <Link 
+          href="/negocios" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
+        >
+          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-6 sm:grid-cols-2 lg:grid-cols-4">
@@ -149,18 +164,6 @@ export function TvoneDestaquesCultura() {
         ))}
       </div>
 
-      {/* iOS STYLE "SEE MORE" BUTTON */}
-      <div className="mt-10 flex justify-center">
-          <Link 
-              href="/cultura" 
-              className="inline-flex items-center justify-center rounded-full bg-neutral-100 px-8 py-3 text-sm font-semibold text-neutral-900 transition-all hover:bg-neutral-200 active:scale-95"
-          >
-              Ver mais notícias de Cultura
-              <svg className="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M9 5l7 7-7 7" />
-              </svg>
-          </Link>
-      </div>
     </section>
   );
 }

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.",
@@ -135,10 +139,28 @@ 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">
-        Destaques
-      </h2>
+    <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">
+        <h2 className="text-3xl font-bold tracking-tight text-neutral-900 md:text-4xl">
+          Famosos
+        </h2>
+        
+        <Link 
+          href="/negocios" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
+        >
+          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-5 sm:grid-cols-2 lg:grid-cols-4">
         {destaques.map((item) => (
           <article
@@ -160,11 +182,11 @@ export function TvoneDestaques() {
                 <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">
+                {/* <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> */}
               </div>
 
               {/* TEXT CONTENT (Simplified) */}
@@ -187,23 +209,38 @@ export function TvoneDestaques() {
 
 export function TvoneMainColumns() {
   return (
-    <section className="mx-auto w-full max-w-[1200px] px-4 pb-16">
-      {/* SECTION HEADER */}
-      <div className="mb-10 flex items-end justify-between border-b border-neutral-100 pb-5">
-        <h2 className="text-3xl font-extrabold tracking-tight text-neutral-900">Notícias Recentes</h2>
-        <Link href="#" className="text-sm font-bold text-blue-600 hover:opacity-70 transition">
-          Ver Histórico
+    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
+      {/* 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="/noticias" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
+        >
+          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>
 
-      {/* 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="" 
@@ -211,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>
@@ -233,34 +275,23 @@ 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>
-
-      {/* LOAD MORE - CLEAN iOS BUTTON */}
-      <div className="mt-16 flex justify-center">
-        <button className="flex items-center gap-3 rounded-2xl bg-neutral-100 px-12 py-4 text-sm font-bold text-neutral-900 transition hover:bg-neutral-200 active:scale-95">
-          Mais notícias recentes
-          <svg className="h-4 w-4 text-neutral-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-      </div>
     </section>
   );
 }
 
 export function TvoneAdBanner() {
   return (
-    <section className="mx-auto w-full max-w-[1200px] px-4 pb-10">
+    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
       <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-[#0a4d8c] via-[#1e6fb8] to-[#e85c2a] px-6 py-8 text-white md:flex md:items-center md:justify-between md:py-10">
         <div className="max-w-lg">
           <p className="text-[11px] font-semibold uppercase tracking-widest text-white/90">BAI Directo</p>
@@ -292,17 +323,24 @@ export function TvoneFooter() {
           <div className="lg:col-span-5">
             <p className="text-[12px] font-semibold leading-[1.33337] tracking-[0.01em] text-[#1d1d1f]">Sobre a TV ONE</p>
             <div className="mt-3 border-t border-[#d2d2d7] pt-3">
-              <p className="mb-1 text-[21px] font-semibold leading-[1.14286] tracking-tight text-[#1d1d1f]">tvone</p>
+              
+              <div className="relative h-7 w-7 sm:h-8 sm:w-8 md:h-10 md:w-10">
+              <Image
+                src="/logo.png" // put your image in /public
+                alt="tvone logo"
+                fill
+                className="rounded-full object-cover"
+              />
+            </div>
+              
             </div>
             <div className="mt-4 space-y-3 text-[12px] leading-[1.33337] text-[#6e6e73]">
               <p className="text-pretty">
-                A TV ONE é um portal angolano dedicado à informação e ao entretenimento, com a missão de informar,
-                educar e envolver o público angolano e todos os interessados nos mais variados temas da atualidade.
+                Com uma abordagem moderna, dinâmica e sempre atual, a TV ONE destaca-se pela oferta de conteúdos diversificados e relevantes, que abrangem áreas como cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e desporto.
               </p>
               <p className="text-pretty">
-                Com uma abordagem dinâmica e atual, a TV ONE oferece conteúdos diversificados que abrangem áreas como
-                cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e
-                desporto, proporcionando uma experiência completa e envolvente para os seus leitores e espectadores.
+              Com uma abordagem moderna, dinâmica e sempre atual, a TV ONE destaca-se pela oferta de conteúdos diversificados e relevantes, que abrangem áreas como cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e desporto.
+                Mais do que informar, o portal proporciona uma experiência completa, envolvente e interativa, conectando os seus leitores e espectadores às principais tendências e acontecimentos do momento.
               </p>
             </div>
           </div>
@@ -348,9 +386,21 @@ export function TvoneFooter() {
 
         <div className="mt-8 border-t border-[#d2d2d7] pt-6">
           <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <p className="text-[12px] leading-[1.33337] text-[#6e6e73]">
-              Copyright © {new Date().getFullYear()} TV ONE. Todos os direitos reservados.
-            </p>
+            
+            <div className="flex items-center gap-2 text-[12px] leading-[1.33337] text-[#6e6e73]">
+              <span>
+                Copyright © {new Date().getFullYear()}
+              </span>
+
+              <img
+                src="/logo.png"
+                alt="tvone logo"
+                className="h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 rounded-full object-cover"
+              />
+
+              <span>Todos os direitos reservados.</span>
+            </div>
+
             <p className="text-[12px] text-[#6e6e73]">Angola</p>
           </div>
         </div>

app/components/tvone-hero.tsx

@@ -36,7 +36,7 @@ export function TvoneHero() {
   const slide = slides[active]!;
 
   return (
-    <section className="mx-auto w-full max-w-[1200px] px-4 py-6">
+    <section className="mx-auto w-full max-w-[1200px] px-4 py-6 pb-20 pt-12">
       <div className="relative overflow-hidden  shadow-[0_12px_40px_rgba(0,0,0,0.12)] rounded-[24px] ">
         <div className="relative aspect-[21/9] min-h-[280px] w-full md:aspect-[2.4/1] rounded-xl">
           <Image

app/components/tvone-promo-strip.tsx

@@ -37,12 +37,6 @@ function PromoStripSingleSlide({ photo, onRatioLoad }: SlideProps) {
         }}
       />
       
-      {/* Label Interna - Estilo Premium/iOS */}
-      <div className="absolute bottom-6 left-6 z-10 md:bottom-10 md:left-10">
-        <span className=" bg-black/40 backdrop-blur-xl px-4 py-2 text-[10px] font-bold uppercase tracking-[0.2em] text-white border border-white/10 shadow-2xl">
-          Destaque
-        </span>
-      </div>
     </div>
   );
 }

app/components/video-galary.tsx

@@ -1,5 +1,8 @@
+"use client"; // Necessário para animações no Next.js App Router
+
 import Image from "next/image";
 import Link from "next/link";
+import { motion } from "framer-motion";
 
 const recentes = [
     {
@@ -78,9 +81,30 @@ const recentes = [
 
 export function TvoneMainColumns1() {
   return (
-    <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 ">
-    <section>
-        <h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Vídeos Mais Recentes</h2>
+    <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">
+          Vídeos Recentes
+        </h2>
+        
+        <Link 
+          href="/negocios" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
+        >
+          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="mx-auto flex w-full max-w-[1200px] flex-col gap-10">
     
 
@@ -145,4 +169,311 @@ function AppleIcon({ className }: { className?: string }) {
       <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
     </svg>
   );
+}
+
+const entrevistas = [
+  {
+    guest: "CEO da Unitel",
+    title: "O futuro do 5G em Angola e a expansão da conectividade rural",
+    img: "https://images.unsplash.com/photo-1560250097-0b93528c311a?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    guest: "Sandra Rodrigues",
+    title: "Como a inteligência artificial está a mudar o jornalismo digital",
+    img: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    guest: "Fundador da Startup X",
+    title: "O desafio de escalar uma fintech no mercado africano atual",
+    img: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=800&auto=format&fit=crop",
+  },
+];
+
+
+const negocios = [
+  {
+    category: "Investimento",
+    title: "Banca nacional regista crescimento de 15% no crédito à produção",
+    description: "Novas medidas de estímulo económico impulsionam o setor agrícola e industrial neste trimestre.",
+    readTime: "5",
+    publishDate: "08 ABR 2026",
+    img: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    category: "Tecnologia",
+    title: "Hub tecnológico em Luanda atrai investidores estrangeiros",
+    description: "Empresas de capital de risco olham para o ecossistema de startups angolano com novo otimismo.",
+    readTime: "4",
+    publishDate: "08 ABR 2026",
+    img: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?q=80&w=800&auto=format&fit=crop",
+  },
+  {
+    category: "Mercados",
+    title: "Preço das commodities: O impacto direto na inflação local",
+    description: "Análise profunda sobre como a volatilidade externa está a moldar os preços no consumidor final.",
+    readTime: "7",
+    publishDate: "08 ABR 2026",
+    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",
+  },
+  {
+    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">
+      {/* 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 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">
+            <Link href="#" className="block">
+              <div className="relative aspect-[4/5] overflow-hidden rounded-[28px] bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-2xl group-hover:shadow-neutral-300">
+                <Image
+                  src={item.img}
+                  alt={item.title}
+                  fill
+                  className="object-cover transition duration-700 group-hover:scale-105"
+                />
+                <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-[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>
+              </div>
+            </Link>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function TvoneNegocios() {
+  return (
+    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20">
+      {/* 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">
+          Negócios
+        </h2>
+        
+        <Link 
+          href="/negocios" 
+          className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC] transition-colors hover:text-[#004499]"
+        >
+          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">
+        {negocios.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>
+  );
+}
+
+export function TvoneEscolhaEditor() {
+  return (
+    <section className="mx-auto w-full max-w-[1200px] px-4 pb-20 overflow-hidden">
+      {/* HEADER */}
+      <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">
+          Escolha do Editor
+        </h2>
+        <Link href="/escolhas" className="group flex items-center gap-1 text-sm font-semibold text-[#0066CC]">
+          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 d="M9 5l7 7-7 7" />
+          </svg>
+        </Link>
+      </div>
+
+      {/* CONTAINER COM ANIMACÃO "WHILE IN VIEW" */}
+      <motion.div 
+        initial={{ x: 80, opacity: 0 }}
+        whileInView={{ x: 0, opacity: 1 }} // Dispara quando entra na viewport
+        viewport={{ once: true, margin: "-100px" }} // Executa uma vez, 100px antes de chegar no centro
+        transition={{ 
+          type: "spring", 
+          stiffness: 200, // Aumentado de 50 para 200 (muito mais rápido)
+          damping: 25,    // Mantém o controle para não balançar demais
+          mass: 0.5       // Reduzimos a massa para o objeto parecer mais leve
+        }}
+        className="no-scrollbar flex flex-col gap-10 md:flex-row md:overflow-x-auto md:snap-x md:snap-mandatory md:gap-8 md:pb-6"
+      >
+        {editorChoice.slice(0, 6).map((item, index) => (
+          <article 
+            key={index} 
+            className={`group flex flex-col gap-5 md:min-w-[31%] md:snap-start 
+              ${index >= 3 ? 'hidden md:flex' : 'flex'}`}
+          >
+            <Link href="#" className="block">
+              <div className="relative aspect-video overflow-hidden rounded-[24px] bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-xl">
+                <Image
+                  src={item.img}
+                  alt={item.title}
+                  fill
+                  className="object-cover transition-transform duration-700 group-hover:scale-105"
+                />
+              </div>
+              
+              <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.category}</span>
+                  <span className="h-1 w-1 rounded-full bg-neutral-300" />
+                  <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 group-hover:text-[#0066CC] transition-colors">
+                  {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>
+            </Link>
+          </article>
+        ))}
+      </motion.div>
+    </section>
+  );
 }

app/page.tsx

@@ -8,7 +8,7 @@ import {
   TvoneFooter,
   TvoneMainColumns,
 } from "./components/tvone-content";
-import { TvoneMainColumns1 } from "./components/video-galary";
+import { TvoneEntrevistas, TvoneEscolhaEditor, TvoneMainColumns1, TvoneNegocios } from "./components/video-galary";
 import { TvoneDestaquesCultura } from "./components/cultura";
 
 export default function Home() {
@@ -21,9 +21,13 @@ export default function Home() {
       <TvoneDestaques />
       <TvoneAdBanner />
       <TvoneMainColumns />
+      <TvoneNegocios />
+      <TvoneEscolhaEditor />
       
       <TvoneMainColumns1 />
       <TvoneDestaquesCultura />
+      <TvoneEntrevistas />
+    
       <TvoneAdBanner />
       <TvoneFooter />
     </div>

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "framer-motion": "^12.38.0",
     "next": "16.2.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      framer-motion:
+        specifier: ^12.38.0
+        version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next:
         specifier: 16.2.1
         version: 16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1130,6 +1133,20 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  framer-motion@12.38.0:
+    resolution: {integrity: sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -1521,6 +1538,12 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  motion-dom@12.38.0:
+    resolution: {integrity: sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA==}
+
+  motion-utils@12.36.0:
+    resolution: {integrity: sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -3140,6 +3163,15 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  framer-motion@12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      motion-dom: 12.38.0
+      motion-utils: 12.36.0
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
   function-bind@1.1.2: {}
 
   function.prototype.name@1.1.8:
@@ -3506,6 +3538,12 @@ snapshots:
 
   minimist@1.2.8: {}
 
+  motion-dom@12.38.0:
+    dependencies:
+      motion-utils: 12.36.0
+
+  motion-utils@12.36.0: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}