mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-18 15:27:52 +00:00
+18
-18
@@ -33,7 +33,7 @@ export default function NewsArticlePage() {
|
||||
|
||||
|
||||
{/* Hero Image (Bordas Apple 32px) */}
|
||||
<div className="relative mt-10 aspect-video w-full overflow-hidden rounded-[32px] bg-neutral-100 shadow-sm border border-black/5">
|
||||
<div className="relative mt-10 aspect-video w-full overflow-hidden rounded-2xl bg-neutral-100 shadow-sm border border-black/5">
|
||||
<Image
|
||||
src="https://images.unsplash.com/photo-1543900694-133f37abaaa5"
|
||||
alt="Adele Live 2016"
|
||||
@@ -99,10 +99,10 @@ export default function NewsArticlePage() {
|
||||
|
||||
{/* Galeria Grid */}
|
||||
<div className="grid grid-cols-2 gap-6 mt-12">
|
||||
<div className="relative aspect-square overflow-hidden rounded-[28px] bg-neutral-100 border border-black/5">
|
||||
<div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 border border-black/5">
|
||||
<Image unoptimized src="https://images.unsplash.com/photo-1493225255756-d9584f8606e9" fill className="object-cover" alt="Concerto Adele 1" />
|
||||
</div>
|
||||
<div className="relative aspect-square overflow-hidden rounded-[28px] bg-neutral-100 border border-black/5">
|
||||
<div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 border border-black/5">
|
||||
<Image unoptimized src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745" fill className="object-cover" alt="Concerto Adele 2" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,7 +111,7 @@ export default function NewsArticlePage() {
|
||||
{/* Autor e Meta Info */}
|
||||
<div className="mt-4 flex items-center justify-between pt-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative h-12 w-12 overflow-hidden rounded-full bg-blue-50 border border-blue-100 flex items-center justify-center">
|
||||
<div className="relative h-12 w-12 overflow-hidden rounded-2xl bg-blue-50 border border-blue-100 flex items-center justify-center">
|
||||
<span className="text-[#0066CC] font-bold text-lg">R</span>
|
||||
</div>
|
||||
<div>
|
||||
@@ -122,13 +122,13 @@ export default function NewsArticlePage() {
|
||||
|
||||
{/* Share Buttons (Estilo Clean Apple) */}
|
||||
{/* <div className="flex items-center gap-2.5">
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-neutral-50 text-neutral-500 transition-all hover:bg-[#25D366] hover:text-white hover:scale-110 active:scale-95">
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-50 text-neutral-500 transition-all hover:bg-[#25D366] hover:text-white hover:scale-110 active:scale-95">
|
||||
<FaWhatsapp size={20} />
|
||||
</button>
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-neutral-50 text-neutral-500 transition-all hover:bg-[#1877F2] hover:text-white hover:scale-110 active:scale-95">
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-50 text-neutral-500 transition-all hover:bg-[#1877F2] hover:text-white hover:scale-110 active:scale-95">
|
||||
<FaFacebookF size={18} />
|
||||
</button>
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-full bg-neutral-50 text-neutral-500 border border-neutral-200 transition-all hover:bg-black hover:text-white hover:scale-110 active:scale-95">
|
||||
<button className="flex h-10 w-10 items-center justify-center rounded-2xl bg-neutral-50 text-neutral-500 border border-neutral-200 transition-all hover:bg-black hover:text-white hover:scale-110 active:scale-95">
|
||||
<FaInstagram size={20} />
|
||||
</button>
|
||||
</div> */}
|
||||
@@ -140,14 +140,14 @@ export default function NewsArticlePage() {
|
||||
<h3 className="text-2xl font-[900] mb-8 flex items-center gap-3 tracking-tight">
|
||||
<MessageCircle size={28} className="text-[#0066CC]"/> Comentários
|
||||
</h3>
|
||||
<div className="rounded-[32px] bg-neutral-50 p-8 border border-neutral-100 transition-all focus-within:border-[#0066CC]/30 focus-within:bg-white focus-within:shadow-xl focus-within:shadow-blue-500/5">
|
||||
<div className="rounded-2xl bg-neutral-50 p-8 border border-neutral-100 transition-all focus-within:border-[#0066CC]/30 focus-within:bg-white focus-within:shadow-xl focus-within:shadow-blue-500/5">
|
||||
<textarea
|
||||
className="w-full bg-transparent outline-none text-lg placeholder:text-neutral-400"
|
||||
placeholder="Partilhe a sua opinião..."
|
||||
rows={4}
|
||||
/>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button className="flex items-center gap-2 rounded-full bg-[#0066CC] px-10 py-3 font-bold text-white transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-blue-500/20">
|
||||
<button className="flex items-center gap-2 rounded-2xl bg-[#0066CC] px-10 py-3 font-bold text-white transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-blue-500/20">
|
||||
Enviar <Send size={18}/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -160,10 +160,10 @@ export default function NewsArticlePage() {
|
||||
<div className="sticky top-10 space-y-10">
|
||||
|
||||
{/* 1. CARD DE VÍDEO TV ONE COM PLAY CUSTOMIZADO */}
|
||||
<div className="rounded-[32px] bg-white p-4 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100">
|
||||
<div className="rounded-2xl bg-white p-4 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100">
|
||||
<h3 className="text-[13px] font-black text-neutral-400 uppercase tracking-[0.1em] mb-4 pl-2">TV One em Destaque</h3>
|
||||
|
||||
<div className="relative aspect-video w-full overflow-hidden rounded-[24px] bg-black shadow-inner border border-black/5 group">
|
||||
<div className="relative aspect-video w-full overflow-hidden rounded-2xl bg-black shadow-inner border border-black/5 group">
|
||||
{!isPlaying ? (
|
||||
<div className="absolute inset-0 z-10 cursor-pointer" onClick={() => setIsPlaying(true)}>
|
||||
<Image
|
||||
@@ -198,11 +198,11 @@ export default function NewsArticlePage() {
|
||||
Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola
|
||||
</p>
|
||||
<div className="mt-4 flex flex-col gap-3">
|
||||
<a href="https://www.youtube.com/watch?v=bfEYtb2O3iI" target="_blank" className="flex w-full items-center justify-center gap-2 rounded-xl bg-[#f5f5f7] py-3 text-[14px] font-bold text-[#0066CC] transition-all hover:bg-[#e8e8ed] active:scale-95">
|
||||
<a href="https://www.youtube.com/watch?v=bfEYtb2O3iI" target="_blank" className="flex w-full items-center justify-center gap-2 rounded-2xl bg-[#f5f5f7] py-3 text-[14px] font-bold text-[#0066CC] transition-all hover:bg-[#e8e8ed] active:scale-95">
|
||||
Assistir no YouTube
|
||||
</a>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-red-500 animate-pulse" />
|
||||
<span className="h-1.5 w-1.5 rounded-2xl bg-red-500 animate-pulse" />
|
||||
<p className="text-[11px] text-neutral-400 font-bold uppercase tracking-wider">TV One Angola</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -210,7 +210,7 @@ export default function NewsArticlePage() {
|
||||
</div>
|
||||
|
||||
{/* 2. BOTÃO CUSTOM iOS PAY */}
|
||||
<div className="rounded-[32px] bg-white p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100">
|
||||
<div className="rounded-2xl bg-white p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100">
|
||||
<p className="text-[13px] font-black text-neutral-400 uppercase tracking-[0.1em] mb-6 text-center">Assinatura Premium</p>
|
||||
<button className="group relative flex w-full items-center justify-center gap-2 overflow-hidden rounded-2xl bg-black py-4 transition-all hover:bg-neutral-800 active:scale-95 shadow-xl shadow-black/10">
|
||||
<svg viewBox="0 0 384 512" className="h-5 w-5 fill-white transition-transform group-hover:scale-110">
|
||||
@@ -225,7 +225,7 @@ export default function NewsArticlePage() {
|
||||
</div>
|
||||
|
||||
{/* 3. CARD DE FEEDBACK */}
|
||||
<div className="rounded-[32px] bg-white p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100 text-center">
|
||||
<div className="rounded-2xl bg-white p-8 shadow-[0_8px_40px_rgba(0,0,0,0.04)] border border-neutral-100 text-center">
|
||||
<h3 className="text-[13px] font-black text-neutral-400 uppercase tracking-[0.1em] mb-6">Feedback</h3>
|
||||
<button className="flex w-full items-center justify-center gap-3 rounded-2xl bg-[#0066CC] py-4.5 text-white font-[800] shadow-xl shadow-blue-500/25 transition-transform hover:scale-[1.02] active:scale-[0.98]">
|
||||
<ThumbsUp size={20} />
|
||||
@@ -234,7 +234,7 @@ export default function NewsArticlePage() {
|
||||
</div>
|
||||
|
||||
{/* 4. BANNERS PATROCINADOS */}
|
||||
<div className="group relative aspect-[3/4] w-full overflow-hidden rounded-[32px] bg-[#1d1d1f] p-10 text-white border border-white/5">
|
||||
<div className="group relative aspect-[3/4] w-full overflow-hidden rounded-2xl bg-[#1d1d1f] p-10 text-white border border-white/5">
|
||||
<div className="relative z-10 h-full flex flex-col justify-between">
|
||||
<span className="text-[11px] font-[900] tracking-[0.2em] opacity-40 uppercase">Patrocinado</span>
|
||||
<div>
|
||||
@@ -242,10 +242,10 @@ export default function NewsArticlePage() {
|
||||
<p className="mt-4 text-sm font-medium opacity-50 leading-relaxed">Simples e rápido. Faça o download na App Store.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -bottom-20 -right-20 h-64 w-64 rounded-full bg-blue-600/30 blur-[80px] transition-opacity group-hover:opacity-50" />
|
||||
<div className="absolute -bottom-20 -right-20 h-64 w-64 rounded-2xl bg-blue-600/30 blur-[80px] transition-opacity group-hover:opacity-50" />
|
||||
</div>
|
||||
|
||||
<div className="w-full rounded-[32px] bg-gradient-to-br from-[#FF6600] to-[#FF9900] p-9 text-white shadow-2xl shadow-orange-500/20 border border-white/10">
|
||||
<div className="w-full rounded-2xl bg-gradient-to-br from-[#FF6600] to-[#FF9900] p-9 text-white shadow-2xl shadow-orange-500/20 border border-white/10">
|
||||
<h4 className="text-[24px] font-[900] leading-tight tracking-tight">Unitel NetCASA 5G</h4>
|
||||
<p className="mt-3 text-[12px] font-black uppercase tracking-wider opacity-90">O futuro chegou ao Namibe!</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user