mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
add video player
This commit is contained in:
@@ -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>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user