From 8a274e06236cfd49bac88a409da39962ad8c452b Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Thu, 9 Apr 2026 12:02:14 +0100
Subject: [PATCH] change card

---
 app/components/cultura.tsx           |  39 ++++---
 app/components/tvone-promo-strip.tsx |   6 -
 app/components/video-galary.tsx      | 168 ++++++++++++++++++++++++++-
 3 files changed, 188 insertions(+), 25 deletions(-)

diff --git a/app/components/cultura.tsx b/app/components/cultura.tsx
index 0a0d1e0..23007eb 100644
--- a/app/components/cultura.tsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/app/components/tvone-promo-strip.tsx b/app/components/tvone-promo-strip.tsx
index cf0974e..b2e33e9 100644
--- a/app/components/tvone-promo-strip.tsx
+++ b/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>
   );
 }
diff --git a/app/components/video-galary.tsx b/app/components/video-galary.tsx
index 2d8695a..4e27ad3 100644
--- a/app/components/video-galary.tsx
+++ b/app/components/video-galary.tsx
@@ -80,7 +80,28 @@ 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>
+      {/* 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 +166,149 @@ 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",
+    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",
+    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",
+    img: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?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>
+      </div>
+
+      {/* Grid de 3 colunas para estilo Premium/Apple */}
+      <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/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity" />
+                
+                <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">
+                    "{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">
+              <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
+                {item.category}
+              </span>
+              
+              <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">
+                <div className="h-1 w-1 rounded-full bg-blue-600/40" />
+                <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