mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 07:17:52 +00:00
@@ -0,0 +1,524 @@
|
||||
"use client";
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { ThumbsUp, MessageCircle, Send, Share2, LinkIcon, Link2, ChevronRight } from 'lucide-react';
|
||||
import { TvoneAdBanner, TvoneFooter } from '../components/tvone-content';
|
||||
import { TvonePromoStrip } from '../components/tvone-promo-strip';
|
||||
import { TvoneSiteNav } from '../components/tvone-site-nav';
|
||||
import { SiWhatsapp, SiFacebook, SiX } from 'react-icons/si'; // Ícones oficiais de marca
|
||||
import { FiCopy } from 'react-icons/fi'; // Ícone de cópia mais limpo
|
||||
import Link from 'next/link';
|
||||
import { Users } from 'lucide-react';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
export default function NewsArticlePage() {
|
||||
// Estado para controlar o play do vídeo customizado
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
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.",
|
||||
byline: "Por Redação",
|
||||
date: "24 Mar 2025",
|
||||
img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
|
||||
},
|
||||
{
|
||||
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.",
|
||||
byline: "Por Economia",
|
||||
date: "24 Mar 2025",
|
||||
img: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=200&q=80",
|
||||
},
|
||||
{
|
||||
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.",
|
||||
byline: "Por Cultura",
|
||||
date: "23 Mar 2025",
|
||||
img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=200&q=80",
|
||||
},
|
||||
{
|
||||
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.",
|
||||
byline: "Por Saúde",
|
||||
date: "23 Mar 2025",
|
||||
img: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=200&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
const destaques = [
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
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",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white font-sans text-[#1d1d1f] selection:bg-[#0066CC]/20">
|
||||
<TvonePromoStrip />
|
||||
<TvoneSiteNav />
|
||||
|
||||
<main className="mx-auto max-w-[1240px] px-6 py-12">
|
||||
<div className="flex flex-col gap-16 lg:flex-row lg:items-start">
|
||||
|
||||
|
||||
{/* --- COLUNA PRINCIPAL (ARTIGO) --- */}
|
||||
<article className="flex-1 min-w-0">
|
||||
<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">
|
||||
Noticias Recentes
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-2">
|
||||
{destaques.map((item, index) => (
|
||||
<article
|
||||
key={item.id}
|
||||
className="group cursor-pointer bg-white transition"
|
||||
>
|
||||
<Link href="#" className="block">
|
||||
<div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl bg-neutral-100 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-105"
|
||||
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
|
||||
/>
|
||||
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black/10 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/30 backdrop-blur-md border border-white/40">
|
||||
<svg className="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.841z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-4">
|
||||
<h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="mt-1.5 text-xs font-medium text-neutral-500">{item.date}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
{/* --- SIDEBAR REFINADA --- */}
|
||||
|
||||
{/* --- SIDEBAR REFINADA COM SOCIAL SHARE --- */}
|
||||
|
||||
<aside className="w-full lg:w-[340px] flex flex-col justify-center align-center items-center shrink-0">
|
||||
<div className="sticky top-10 space-y-10 max-w-[400px]">
|
||||
|
||||
<div className="bg-white p-5 rounded-xl border border-neutral-100 shadow-[0_2px_15px_rgba(0,0,0,0.03)]">
|
||||
|
||||
{/* 1. Header: Adapted from your Share component */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
{/* Usando Users icon for Community */}
|
||||
<Users size={15} className="text-neutral-400" />
|
||||
<h3 className="text-[11px] font-bold text-neutral-400 uppercase tracking-widest">
|
||||
Community
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* 2. Main Content Area: Simplified from the UI mockup */}
|
||||
<div className="flex flex-col gap-5">
|
||||
|
||||
{/* Column for Brand and Button */}
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
{/* Brand Info */}
|
||||
{/* Brand Info - A highly stylized placeholder that looks 'premium' */}
|
||||
{/* Brand Info - FIXED to use your actual logo image */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 1. Use Next/Image for your official icon */}
|
||||
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl overflow-hidden shadow-inner border border-neutral-100">
|
||||
<Image
|
||||
src="/logo.png" // <-- UPDATE THIS PATH to your square logo
|
||||
alt="TVone Icon Logo"
|
||||
width={48} // Width in pixels (matches h-12/w-12 class)
|
||||
height={48} // Height in pixels
|
||||
className="object-contain" // Ensures the logo doesn't stretch
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2. Brand text matches previous styling */}
|
||||
<div>
|
||||
<p className="text-sm font-bold text-neutral-900 leading-tight">TVone</p>
|
||||
<p className="text-[11px] font-medium text-neutral-500">500k seguidores</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Action Button */}
|
||||
<button className="flex h-11 w-full items-center justify-center gap-2.5 rounded-lg bg-[#1877F2] text-white font-semibold text-sm transition-all hover:bg-[#166fe5] active:scale-95 shadow-sm">
|
||||
|
||||
<SiFacebook size={16} />
|
||||
Gosto da TVone
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 1. SEÇÃO DE SHARE (ESTILO APPLE NEWS) */}
|
||||
{/* <div className="bg-white p-5 rounded-xl border border-neutral-100 shadow-[0_2px_15px_rgba(0,0,0,0.03)]">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Share2 size={15} className="text-neutral-400" />
|
||||
<h3 className="text-[11px] font-bold text-neutral-400 uppercase tracking-widest">
|
||||
Compartilhar
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-3">
|
||||
|
||||
|
||||
<button className="group flex flex-col items-center gap-2">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
|
||||
<SiWhatsapp size={20} />
|
||||
</div>
|
||||
<span className="text-[10px] font-medium text-neutral-500">WhatsApp</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button className="group flex flex-col items-center gap-2">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
|
||||
<SiFacebook size={20} />
|
||||
</div>
|
||||
<span className="text-[10px] font-medium text-neutral-500">Facebook</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button className="group flex flex-col items-center gap-2">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
|
||||
<SiX size={18} />
|
||||
</div>
|
||||
<span className="text-[10px] font-medium text-neutral-500">Twitter</span>
|
||||
</button>
|
||||
|
||||
|
||||
<button className="group flex flex-col items-center gap-2">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-neutral-100 text-neutral-600 transition-all group-hover:bg-neutral-200 active:scale-95">
|
||||
<Link2 size={20} />
|
||||
</div>
|
||||
<span className="text-[10px] font-medium text-neutral-500">Link</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 2. ADVERTORIAL (CEO UNITEL) - REPLACING TV CARD */}
|
||||
<div className="group cursor-pointer">
|
||||
<div className="flex items-center justify-between mb-3 px-1">
|
||||
<span className="text-[10px] font-bold text-neutral-400 uppercase">Publicidade</span>
|
||||
</div>
|
||||
|
||||
<div className="relative aspect-[4/5] w-full overflow-hidden rounded-xl bg-neutral-100 shadow-sm transition-shadow">
|
||||
<Image
|
||||
src="/zap.jpeg" // Substitua pelo path real da imagem do print
|
||||
alt="CEO da Unitel - O futuro do 5G em Angola"
|
||||
fill
|
||||
unoptimized
|
||||
className="object-contain"
|
||||
/>
|
||||
{/* Overlay de gradiente para legibilidade do texto se estiver na imagem */}
|
||||
{/* <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60" /> */}
|
||||
|
||||
{/* <div className="absolute bottom-6 left-6 right-6">
|
||||
<span className="text-[10px] font-bold text-[#007AFF] uppercase tracking-widest">CEO DA UNITEL</span>
|
||||
<h4 className="text-white text-xl font-bold mt-2 leading-tight">
|
||||
"ro do 5G em Angola e a expansão da conectividade rural"
|
||||
</h4>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* <div className="mt-4 px-1">
|
||||
<div className="flex items-center text-[13px] font-bold text-[#007AFF]">
|
||||
Ler entrevista completa <ChevronRight size={14} className="ml-1" />
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-3 px-1">
|
||||
<span className="text-[10px] font-bold text-neutral-400 uppercase">Publicidade</span>
|
||||
</div>
|
||||
|
||||
{/* 3. PREMIUM SUBSCRIPTION - APPLE STYLE */}
|
||||
<div className="bg-black p-7 rounded-xl relative overflow-hidden text-white shadow-xl">
|
||||
<div className="relative z-10">
|
||||
<h4 className="text-[20px] font-bold leading-tight tracking-tight mb-2">
|
||||
Assine o Premium.
|
||||
</h4>
|
||||
<p className="text-[13px] text-[#8E8E93] font-medium mb-6">
|
||||
Acesso ilimitado às notícias e análises exclusivas.
|
||||
</p>
|
||||
|
||||
<button className="flex w-full items-center justify-center gap-2 rounded-xl bg-white py-3 text-black font-bold text-[15px] transition-all hover:bg-neutral-100 active:scale-95">
|
||||
<svg viewBox="0 0 384 512" className="h-4 w-4 fill-black">
|
||||
<path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/>
|
||||
</svg>
|
||||
<span>Pay</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* Sutil glow de fundo */}
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-blue-600/20 blur-[40px]" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="px-1">
|
||||
<div className="flex items-center justify-between mb-4 border-b border-neutral-100 pb-2">
|
||||
<h3 className="text-[13px] font-bold text-black uppercase tracking-tight">Mais Lidas</h3>
|
||||
<span className="text-[11px] font-medium text-neutral-400">Últimas 24h</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ id: "01", title: "Câmbio: Kwanza mantém trajetória de estabilidade frente ao Dólar", cat: "Economia" },
|
||||
{ id: "02", title: "Novas infraestruturas no Porto de Luanda aumentam eficiência", cat: "Logística" },
|
||||
{ id: "03", title: "Selecção Nacional prepara amistoso contra Marrocos", cat: "Desporto" }
|
||||
].map((news) => (
|
||||
<div key={news.id} className="group cursor-pointer flex align-start justify-start gap-4 text-black">
|
||||
<span className="text-2xl font-black text-black group-hover:text-blue transition-colors leading-none">
|
||||
{news.id}
|
||||
</span>
|
||||
<div className="space-y-1 flex flex-col">
|
||||
<span className="text-[10px] font-bold text-blue-600 uppercase tracking-widest">{news.cat}</span>
|
||||
<h4 className="text-[14px] font-bold text-neutral-900 leading-tight group-hover:text-blue-600 transition-colors">
|
||||
{news.title}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="grid gap-x-12 mt-12 gap-y-3 md:grid-cols-1">
|
||||
<div className="flex items-center justify-between mb-2 border-b border-neutral-100 pb-2">
|
||||
<h3 className="text-[13px] font-bold text-black uppercase tracking-tight">Noticias Principais</h3>
|
||||
{/* <span className="text-[11px] font-medium text-neutral-400">Últimas 24h</span> */}
|
||||
</div>
|
||||
|
||||
{recentes.map((item) => (
|
||||
<article key={item.title} className="group cursor-pointer mb-1">
|
||||
<Link href="#" className="flex flex-row items-start gap-6">
|
||||
|
||||
{/* 1. LADO DA IMAGEM (Limpo e Minimalista) */}
|
||||
<div className="relative aspect-[4/3] w-25 shrink-0 overflow-hidden rounded-2xl bg-neutral-100 shadow-sm transition-all duration-500 group-hover:shadow-xl sm:w-25 md:w-25 lg:w-25">
|
||||
<Image
|
||||
src={item.img}
|
||||
alt=""
|
||||
fill
|
||||
className="object-cover transition duration-700 group-hover:scale-110"
|
||||
sizes="(max-width: 60px) 60px, 64px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 2. LADO DO TEXTO (Categoria externa ao topo) */}
|
||||
<div className="flex flex-1 flex-col ">
|
||||
{/* CATEGORIA E DATA LADO A LADO */}
|
||||
<div className="gap-3 mb-2 flex flex-col justify-start items-start">
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-[#0066CC]">
|
||||
{item.cat}
|
||||
</span>
|
||||
{/* <span className="h-1 w-1 rounded-2xl 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-2xl bg-neutral-300" />
|
||||
<span className="text-[10px] font-bold uppercase text-neutral-400">
|
||||
{item.readTime} min
|
||||
</span> */}
|
||||
</div>
|
||||
|
||||
<h3 className="line-clamp-3 text-[14px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc]">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* 2. VIDEO - Minimalist Edge-to-Edge */}
|
||||
<div className="group">
|
||||
<div className="flex items-center justify-between mb-3 px-1">
|
||||
<h3 className="text-[13px] font-bold text-black tracking-tight">TV One Angola</h3>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-[#FF3B30] animate-pulse" />
|
||||
<span className="text-[11px] font-bold text-[#FF3B30] uppercase">Ao Vivo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative aspect-video w-full overflow-hidden rounded-xl bg-black shadow-sm group-hover:shadow-md transition-shadow">
|
||||
{!isPlaying ? (
|
||||
<div className="absolute inset-0 z-10 cursor-pointer" onClick={() => setIsPlaying(true)}>
|
||||
<Image
|
||||
src="https://i.ytimg.com/vi/bfEYtb2O3iI/maxresdefault.jpg"
|
||||
alt="Workshop"
|
||||
fill
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105 opacity-90"
|
||||
/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white transition-all group-hover:bg-white group-hover:text-[#007AFF] group-hover:scale-110">
|
||||
<svg className="h-6 w-6 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8 5v14l11-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<iframe
|
||||
className="absolute inset-0 h-full w-full"
|
||||
src="https://www.youtube.com/embed/bfEYtb2O3iI?autoplay=1"
|
||||
frameBorder="0"
|
||||
allow="autoplay; encrypted-media"
|
||||
allowFullScreen
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3.5 px-1">
|
||||
<h4 className="text-[16px] font-semibold text-black leading-snug tracking-tight group-hover:text-[#007AFF] transition-colors">
|
||||
Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola
|
||||
</h4>
|
||||
<p className="mt-2 text-[12px] text-[#8E8E93] font-medium tracking-tight">Publicado em 24 de Março, 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<TvoneAdBanner />
|
||||
<TvoneFooter />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,6 @@ import Image from "next/image";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
// Definição do tipo para garantir 100% de compatibilidade TS
|
||||
export interface SliderPhoto {
|
||||
src: string;
|
||||
alt: string;
|
||||
@@ -13,13 +12,12 @@ export interface SliderPhoto {
|
||||
|
||||
const ROTATE_MS = 5500;
|
||||
|
||||
// --- 1. COMPONENTE DE SLIDE INDIVIDUAL ---
|
||||
// --- 1. SLIDE COMPONENT ---
|
||||
interface SlideProps {
|
||||
photo: SliderPhoto;
|
||||
onRatioLoad: (src: string, ratio: number) => void;
|
||||
}
|
||||
|
||||
function PromoStripSingleSlide({ photo, onRatioLoad }: SlideProps) {
|
||||
function PromoStripSingleSlide({ photo }: SlideProps) {
|
||||
return (
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
@@ -29,19 +27,12 @@ function PromoStripSingleSlide({ photo, onRatioLoad }: SlideProps) {
|
||||
priority
|
||||
className="object-cover object-center"
|
||||
sizes="100vw"
|
||||
onLoad={(e) => {
|
||||
const target = e.currentTarget;
|
||||
if (target.naturalHeight > 0) {
|
||||
onRatioLoad(photo.src, target.naturalWidth / target.naturalHeight);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- 2. HOOK DE DADOS (Simulação de Fetch) ---
|
||||
// --- 2. DATA HOOK ---
|
||||
function useSliderPhotos(): { photos: SliderPhoto[]; loading: boolean } {
|
||||
const [photos, setPhotos] = useState<SliderPhoto[]>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
@@ -72,14 +63,15 @@ function useSliderPhotos(): { photos: SliderPhoto[]; loading: boolean } {
|
||||
return { photos, loading };
|
||||
}
|
||||
|
||||
// --- 3. COMPONENTE PRINCIPAL (O CARROSSEL) ---
|
||||
// --- 3. MAIN COMPONENT ---
|
||||
export function TvonePromoStrip() {
|
||||
const { photos, loading } = useSliderPhotos();
|
||||
const [index, setIndex] = useState<number>(0);
|
||||
const [ratios, setRatios] = useState<Record<string, number>>({});
|
||||
const [reduceMotion, setReduceMotion] = useState<boolean>(false);
|
||||
|
||||
// Detetar preferência de movimento do sistema (iOS/MacOS/Windows)
|
||||
// Constants for the 4.8:1 ratio
|
||||
const FIXED_RATIO = 4.8 / 1;
|
||||
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const sync = () => setReduceMotion(mq.matches);
|
||||
@@ -88,7 +80,6 @@ export function TvonePromoStrip() {
|
||||
return () => mq.removeEventListener("change", sync);
|
||||
}, []);
|
||||
|
||||
// Lógica de avanço automático
|
||||
const advance = useCallback(() => {
|
||||
if (photos.length <= 1) return;
|
||||
setIndex((i: number) => (i + 1) % photos.length);
|
||||
@@ -100,54 +91,46 @@ export function TvonePromoStrip() {
|
||||
return () => window.clearInterval(id);
|
||||
}, [photos.length, reduceMotion, advance]);
|
||||
|
||||
// Handler para atualizar rácios de imagem
|
||||
const handleRatio = useCallback((src: string, ratio: number) => {
|
||||
setRatios((prev) => (prev[src] === ratio ? prev : { ...prev, [src]: ratio }));
|
||||
}, []);
|
||||
|
||||
// Calcula a proporção do contentor baseado no slide ativo
|
||||
const currentRatio = useMemo<number>(() => {
|
||||
const activePhoto = photos[index];
|
||||
return activePhoto ? (ratios[activePhoto.src] || 16 / 9) : 16 / 9;
|
||||
}, [photos, index, ratios]);
|
||||
|
||||
// Loading state with fixed ratio
|
||||
if (loading && photos.length === 0) {
|
||||
return <div className="aspect-[16/9] w-full animate-pulse bg-neutral-100 dark:bg-neutral-800" />;
|
||||
return (
|
||||
<div
|
||||
className="w-full animate-pulse bg-neutral-100 dark:bg-neutral-800"
|
||||
style={{ aspectRatio: "4.8 / 1" }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (photos.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section
|
||||
className="relative w-full overflow-hidden bg-neutral-100 dark:bg-neutral-900 transition-[aspect-ratio] duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]"
|
||||
style={{ aspectRatio: currentRatio } as CSSProperties}
|
||||
className="relative w-full overflow-hidden bg-neutral-100 dark:bg-neutral-900 transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]"
|
||||
style={{ aspectRatio: "4.8 / 1" }} // Locked to 4.8:1
|
||||
role="region"
|
||||
aria-roledescription="carrossel"
|
||||
>
|
||||
{/* O "ROLO" (A fita flexível) */}
|
||||
{/* THE TRACK */}
|
||||
<div
|
||||
className="flex h-full w-full transition-transform duration-1000 ease-[cubic-bezier(0.32,0.72,0,1)]"
|
||||
style={{ transform: `translateX(-${index * 100}%)` }}
|
||||
>
|
||||
{photos.map((photo: SliderPhoto, i: number) => (
|
||||
<div key={photo.src || i} className="h-full w-full flex-shrink-0">
|
||||
<PromoStripSingleSlide
|
||||
photo={photo}
|
||||
onRatioLoad={handleRatio}
|
||||
/>
|
||||
<PromoStripSingleSlide photo={photo} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* INDICADORES (iOS Dot Style) */}
|
||||
{/* INDICATORS */}
|
||||
{photos.length > 1 && (
|
||||
<div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 gap-2 z-20">
|
||||
<div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2 z-20">
|
||||
{photos.map((_, i: number) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setIndex(i)}
|
||||
className={`h-1.5 transition-all duration-500 ${
|
||||
index === i ? "w-8 bg-white" : "w-1.5 bg-white/30 hover:bg-white/60"
|
||||
className={`h-1 transition-all duration-500 ${
|
||||
index === i ? "w-6 bg-white" : "w-1.5 bg-white/30 hover:bg-white/60"
|
||||
}`}
|
||||
aria-label={`Ir para slide ${i + 1}`}
|
||||
/>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { motion } from "framer-motion";
|
||||
|
||||
const recentes = [
|
||||
{
|
||||
title: "Diddy na XB Label? Gerilson Israel responde após anúncio de nova música em conjunto.",
|
||||
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",
|
||||
@@ -16,7 +16,7 @@ const recentes = [
|
||||
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.",
|
||||
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",
|
||||
@@ -36,7 +36,7 @@ const recentes = [
|
||||
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.",
|
||||
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",
|
||||
@@ -56,7 +56,7 @@ const recentes = [
|
||||
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.",
|
||||
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",
|
||||
|
||||
+2
-1
@@ -15,7 +15,8 @@
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"react-easy-crop": "^5.5.7",
|
||||
"react-icons": "^5.6.0"
|
||||
"react-icons": "^5.6.0",
|
||||
"uuid": "^13.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
|
||||
Generated
+9
@@ -29,6 +29,9 @@ importers:
|
||||
react-icons:
|
||||
specifier: ^5.6.0
|
||||
version: 5.6.0(react@19.2.4)
|
||||
uuid:
|
||||
specifier: ^13.0.0
|
||||
version: 13.0.0
|
||||
devDependencies:
|
||||
'@tailwindcss/postcss':
|
||||
specifier: ^4
|
||||
@@ -1965,6 +1968,10 @@ packages:
|
||||
uri-js@4.4.1:
|
||||
resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
|
||||
|
||||
uuid@13.0.0:
|
||||
resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
|
||||
hasBin: true
|
||||
|
||||
which-boxed-primitive@1.1.1:
|
||||
resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@@ -4099,6 +4106,8 @@ snapshots:
|
||||
dependencies:
|
||||
punycode: 2.3.1
|
||||
|
||||
uuid@13.0.0: {}
|
||||
|
||||
which-boxed-primitive@1.1.1:
|
||||
dependencies:
|
||||
is-bigint: 1.1.0
|
||||
|
||||
Reference in New Issue
Block a user