From 6bce9ada4fd37f89cac5cef487712eeed2aa6969 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Sun, 5 Apr 2026 14:25:03 +0100
Subject: [PATCH] add video player

---
 app/components/tvone-content.tsx |  14 +--
 app/components/tvone-hero.tsx    |   6 +-
 app/components/video-galary.tsx  | 141 ++++++++++++++++++++-----------
 3 files changed, 100 insertions(+), 61 deletions(-)

diff --git a/app/components/tvone-content.tsx b/app/components/tvone-content.tsx
index 8c59559..35d45ff 100644
--- a/app/components/tvone-content.tsx
+++ b/app/components/tvone-content.tsx
@@ -144,7 +144,7 @@ export function TvoneDestaques() {
             className="group overflow-hidden  bg-white transition "
           >
             <Link href="#" className="block">
-              <div className="relative aspect-[16/9] w-full overflow-hidden">
+              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-xl">
                 <Image
                   src={item.img}
                   alt=""
@@ -168,19 +168,19 @@ export function TvoneDestaques() {
 
 export function TvoneMainColumns() {
   return (
-    <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-12 lg:grid-cols-[1fr_340px]">
+    <div className="mx-auto grid w-full max-w-[1200px] gap-10 px-4 pb-10 lg:grid-cols-[1fr_340px]">
       <section>
-        <h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Mais Recentes</h2>
+        <h2 className="mb-7 text-2xl font-bold tracking-tight text-neutral-900 md:text-2xl">Vídeos Recentes</h2>
         <ul className="flex flex-col gap-6">
           {recentes.map((item) => (
-            <li key={item.title}>
-              <Link href="#" className="group flex items-start gap-4 p-1 transition">
-                <div className="relative w-40 md:w-60 shrink-0 aspect-[16/9] bg-red-500">
+            <li key={item.title} className="rounded-xl">
+              <Link href="#" className="group flex items-start gap-4 p-1 transition rounded-xl">
+                <div className="relative w-40 md:w-60  aspect-[16/9]  rounded-xl">
                   <Image 
                     src={item.img} 
                     alt="" 
                     fill 
-                    className="object-cover" 
+                    className="object-cover rounded-xl" 
                     sizes="(max-width: 1200px) 100vw, 1200px" 
                   />
                 </div>
diff --git a/app/components/tvone-hero.tsx b/app/components/tvone-hero.tsx
index 890fe3e..fcaae3c 100644
--- a/app/components/tvone-hero.tsx
+++ b/app/components/tvone-hero.tsx
@@ -37,13 +37,13 @@ export function TvoneHero() {
 
   return (
     <section className="mx-auto w-full max-w-[1200px] px-4 py-6">
-      <div className="relative overflow-hidden  shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
-        <div className="relative aspect-[21/9] min-h-[280px] w-full md:aspect-[2.4/1]">
+      <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
             src={slide.image}
             alt=""
             fill
-            className="object-cover"
+            className="object-cover rounded-xl"
             sizes="(max-width: 1200px) 100vw, 1200px"
             priority
           />
diff --git a/app/components/video-galary.tsx b/app/components/video-galary.tsx
index e5a4bb6..f0eee19 100644
--- a/app/components/video-galary.tsx
+++ b/app/components/video-galary.tsx
@@ -9,7 +9,8 @@ const recentes = [
       catBg: "bg-blue-50 text-blue-600",
       byline: "Por Redação",
       date: "04 Mar 2026",
-      img: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",
+      // Premium Studio Image
+      img: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop",
     },
     {
       title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
@@ -18,7 +19,8 @@ const recentes = [
       catBg: "bg-green-50 text-green-600",
       byline: "Por Economia Viva",
       date: "03 Mar 2026",
-      img: "https://images.unsplash.com/photo-1611974715853-2b8ef9a3d136?w=800&q=80",
+      // Modern Finance/City Image
+      img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
     },
     {
       title: "Museu de Luanda inaugura exposição com obras inéditas de artistas locais.",
@@ -27,10 +29,40 @@ const recentes = [
       catBg: "bg-purple-50 text-purple-600",
       byline: "Por Cultura Mais",
       date: "02 Mar 2026",
-      img: "https://images.unsplash.com/photo-1518998053502-53cc8ef19a7d?w=800&q=80",
+      // Elegant Art Gallery Image
+      img: "https://images.unsplash.com/photo-1507676184212-d03ab07a01bf?q=80&w=800&auto=format&fit=crop",
     },
+    {
+        title: "Diddy na XB Label? Gerilson Israel responde após anúncio de nova música em conjunto.",
+        excerpt: "O artista angolano esclareceu os rumores sobre a sua possível entrada para a editora internacional...",
+        cat: "Música",
+        catBg: "bg-blue-50 text-blue-600",
+        byline: "Por Redação",
+        date: "04 Mar 2026",
+        // Premium Studio Image
+        img: "https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800&auto=format&fit=crop",
+      },
+      {
+        title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
+        excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
+        cat: "Economia",
+        catBg: "bg-green-50 text-green-600",
+        byline: "Por Economia Viva",
+        date: "03 Mar 2026",
+        // Modern Finance/City Image
+        img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
+      },
+      {
+        title: "Inflação desce pelo terceiro mês consecutivo em Angola, segundo dados preliminares.",
+        excerpt: "Os preços dos bens de consumo registaram uma ligeira queda, trazendo alívio para as famílias...",
+        cat: "Economia",
+        catBg: "bg-green-50 text-green-600",
+        byline: "Por Economia Viva",
+        date: "03 Mar 2026",
+        // Modern Finance/City Image
+        img: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?q=80&w=800&auto=format&fit=crop",
+      },
   ];
-  
   const aSeguir = [
     {
       title: "Mercado imobiliário: especialistas explicam tendências para 2026.",
@@ -46,57 +78,64 @@ const recentes = [
 
 export function TvoneMainColumns1() {
   return (
-    <div className="mx-auto flex w-full max-w-[1200px] flex-col gap-10 px-4 pb-12">
-      
-      {/* SECTION: PREMIUM VIDEO GALLERY (Euronews + iOS Style) */}
-      <section className="grid w-full gap-6 lg:grid-cols-[1fr_340px]">
-        {/* Main Player Area */}
-        <div className="group relative aspect-video overflow-hidden rounded-[24px] bg-black shadow-2xl">
-          <Image 
-            src="/path-to-your-main-video-thumb.jpg" 
-            alt="Main Video" 
-            fill 
-            className="object-cover opacity-90 transition-transform duration-700 group-hover:scale-105"
-          />
-          {/* iOS Play Button Overlay */}
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="flex h-20 w-20 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-md transition-transform group-hover:scale-110">
-              <div className="ml-1 h-0 w-0 border-y-[12px] border-l-[20px] border-y-transparent border-l-white" />
+    <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 flex w-full max-w-[1200px] flex-col gap-10 px-4">
+    
+
+            {/* SECTION: PREMIUM VIDEO GALLERY (Euronews + iOS Style) */}
+            <section className="grid w-full gap-6 lg:grid-cols-[1fr_340px]">
+            {/* Main Player Area */}
+            <div className="group relative aspect-video overflow-hidden rounded-[24px] bg-black shadow-2xl">
+                <Image 
+                src="https://images.unsplash.com/photo-1504711434969-e33886168f5c?q=80&w=1200&auto=format&fit=crop" 
+                alt="Main Video" 
+                fill 
+                className="object-cover opacity-90 transition-transform duration-700 group-hover:scale-105"
+                />
+                {/* iOS Play Button Overlay */}
+                <div className="absolute inset-0 flex items-center justify-center">
+                <div className="flex h-20 w-20 items-center justify-center rounded-full border border-white/30 bg-white/20 backdrop-blur-md transition-transform group-hover:scale-110">
+                    <div className="ml-1 h-0 w-0 border-y-[12px] border-l-[20px] border-y-transparent border-l-white" />
+                </div>
+                </div>
+                {/* Video Info Overlay */}
+                <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 p-8">
+                <span className="rounded bg-blue-600 px-2 py-1 text-[10px] font-bold uppercase text-white">Música</span>
+                <h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
+                    Diddy na XB Label? Gerilson Israel responde após anúncio...
+                </h2>
+                </div>
             </div>
-          </div>
-          {/* Video Info Overlay */}
-          <div className="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/80 p-8">
-            <span className="rounded bg-blue-600 px-2 py-1 text-[10px] font-bold uppercase text-white">Música</span>
-            <h2 className="mt-3 text-2xl font-bold text-white md:text-3xl">
-              Diddy na XB Label? Gerilson Israel responde após anúncio...
-            </h2>
-          </div>
+
+            {/* Right Playlist: "Vídeos a Seguir" */}
+            <aside className="flex flex-col rounded-[24px] border border-neutral-200 bg-[#f5f5f7]/50 p-4 backdrop-blur-sm">
+                <h3 className="mb-4 px-2 text-xs font-bold uppercase tracking-widest text-neutral-500">Vídeos a Seguir</h3>
+                <div className="flex flex-col gap-3 overflow-y-auto lg:max-h-[380px]">
+                {recentes.slice(0, 6).map((item) => (
+                    <button key={item.title} className="group flex gap-3 rounded-xl p-2 transition hover:bg-white hover:shadow-sm">
+                    <div className="relative aspect-video w-24 shrink-0 overflow-hidden rounded-lg bg-neutral-200">
+                        <Image src={item.img} alt="" fill className="object-cover" />
+                        <div className="absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[9px] text-white">3:15</div>
+                    </div>
+                    <div className="text-left">
+                        <span className="text-[9px] font-bold uppercase text-blue-600">{item.cat}</span>
+                        <h4 className="line-clamp-2 text-xs font-bold leading-tight text-neutral-900 group-hover:text-blue-600">
+                        {item.title}
+                        </h4>
+                    </div>
+                    </button>
+                ))}
+                </div>
+            </aside>
+            </section>
+
+
         </div>
-
-        {/* Right Playlist: "Vídeos a Seguir" */}
-        <aside className="flex flex-col rounded-[24px] border border-neutral-200 bg-[#f5f5f7]/50 p-4 backdrop-blur-sm">
-          <h3 className="mb-4 px-2 text-xs font-bold uppercase tracking-widest text-neutral-500">Vídeos a Seguir</h3>
-          <div className="flex flex-col gap-3 overflow-y-auto lg:max-h-[380px]">
-            {recentes.slice(0, 4).map((item) => (
-              <button key={item.title} className="group flex gap-3 rounded-xl p-2 transition hover:bg-white hover:shadow-sm">
-                <div className="relative aspect-video w-24 shrink-0 overflow-hidden rounded-lg bg-neutral-200">
-                  <Image src={item.img} alt="" fill className="object-cover" />
-                  <div className="absolute bottom-1 right-1 rounded bg-black/60 px-1 text-[9px] text-white">3:15</div>
-                </div>
-                <div className="text-left">
-                  <span className="text-[9px] font-bold uppercase text-blue-600">{item.cat}</span>
-                  <h4 className="line-clamp-2 text-xs font-bold leading-tight text-neutral-900 group-hover:text-blue-600">
-                    {item.title}
-                  </h4>
-                </div>
-              </button>
-            ))}
-          </div>
-        </aside>
       </section>
-
-
     </div>
+
   );
 }