add galary

add video player
2026-04-18 15:27:52 +00:00 · 2026-04-05 15:48:33 +01:00 · 2026-04-05 14:25:03 +01:00
5 changed files with 191 additions and 61 deletions
@@ -0,0 +1,89 @@
+import Image from "next/image";
+import Link from "next/link";
+
+const destaques = [
+    {
+      cat: "FAMOSOS",
+      catColor: "text-pink-600",
+      title: "Cerimónia reúne estrelas nacionais e internacionais em Lisboa.",
+      date: "24 Mar 2025",
+      // High-quality video-style thumbnail
+      img: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=800&q=80",
+    },
+    {
+      cat: "NEGÓCIOS",
+      catColor: "text-[#0066cc]",
+      title: "Mercados reagem às novas projeções de crescimento para a região.",
+      date: "24 Mar 2025",
+      img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
+    },
+    {
+      cat: "DESPORTO",
+      catColor: "text-emerald-600",
+      title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
+      date: "23 Mar 2025",
+      img: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=800&q=80",
+    },
+    {
+        cat: "NEGÓCIOS",
+        catColor: "text-[#0066cc]",
+        title: "Mercados reagem às novas projeções de crescimento para a região.",
+        date: "24 Mar 2025",
+        img: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80",
+    },
+];
+
+export function TvoneDestaquesCultura() {
+    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">Cultura</h2>
+        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {destaques.map((item, index) => (
+            <article
+              key={index}
+              className="group cursor-pointer bg-white transition"
+            >
+              <Link href="#" className="block">
+                {/* VIDEO CONTAINER */}
+                <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-900 shadow-sm transition-all duration-300 group-hover:shadow-xl group-hover:shadow-neutral-200">
+                  <Image
+                    src={item.img}
+                    alt=""
+                    fill
+                    className="object-cover transition duration-500 group-hover:scale-110 group-hover:opacity-70"
+                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+                  />
+                  
+                  {/* OVERLAY: REPLAY STYLE (iOS/EURO) */}
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30">
+                      <svg className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                      </svg>
+                    </div>
+                    <span className="mt-2 text-[10px] font-bold uppercase tracking-widest text-white">Replay</span>
+                  </div>
+
+                  {/* BOTTOM REPLICA TAG (Optional, Euro Style) */}
+                  <div className="absolute bottom-2 left-2 rounded bg-black/60 px-1.5 py-0.5 text-[9px] font-bold text-white uppercase tracking-tighter">
+                    Replica
+                  </div>
+                </div>
+
+                {/* TEXT CONTENT */}
+                <div className="py-4">
+                  <p className={`mb-1.5 text-[10px] font-bold uppercase tracking-wider ${item.catColor}`}>
+                    {item.cat}
+                  </p>
+                  <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
+                    {item.title}
+                  </h3>
+                  <p className="mt-2 text-[11px] font-medium text-neutral-400">{item.date}</p>
+                </div>
+              </Link>
+            </article>
+          ))}
+        </div>
+      </section>
+    );
+}
@@ -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>
@@ -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
          />
@@ -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>
+
  );
 }

@@ -9,6 +9,7 @@ import {
  TvoneMainColumns,
 } from "./components/tvone-content";
 import { TvoneMainColumns1 } from "./components/video-galary";
+import { TvoneDestaquesCultura } from "./components/cultura";

 export default function Home() {
  return (
@@ -22,6 +23,7 @@ export default function Home() {
      <TvoneMainColumns />
      
      <TvoneMainColumns1 />
+      <TvoneDestaquesCultura />
      <TvoneAdBanner />
      <TvoneFooter />
    </div>
Author	SHA1	Message	Date
peter	9996f1051c	add galary continuous-integration/drone/push Build is passing Details	2026-04-05 15:48:33 +01:00
peter	6bce9ada4f	add video player	2026-04-05 14:25:03 +01:00