peter/tvone
1
0
Fork 0
mirror of https://github.com/PeterMaquiran/tvone.git synced 2026-04-18 15:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add custom play button
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-10 21:12:03 +01:00
parent 5e818f1823
commit 50ef8326dd
2 changed files with 76 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/content/page.tsx
+72 -32
View File
@@ -1,13 +1,15 @@
"use client"; "use client";
import React from 'react'; import React, { useState } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { ThumbsUp, MessageCircle, Send, Share2 } from 'lucide-react'; import { ThumbsUp, MessageCircle, Send, Share2 } from 'lucide-react';
// import { FaWhatsapp, FaFacebookF, FaInstagram } from 'react-icons/fa';
import { TvoneAdBanner, TvoneFooter } from '../components/tvone-content'; import { TvoneAdBanner, TvoneFooter } from '../components/tvone-content';
import { TvonePromoStrip } from '../components/tvone-promo-strip'; import { TvonePromoStrip } from '../components/tvone-promo-strip';
import { TvoneSiteNav } from '../components/tvone-site-nav'; import { TvoneSiteNav } from '../components/tvone-site-nav';
export default function NewsArticlePage() { export default function NewsArticlePage() {
// Estado para controlar o play do vídeo customizado
const [isPlaying, setIsPlaying] = useState(false);
return ( return (
<div className="min-h-screen bg-white font-sans text-[#1d1d1f] selection:bg-[#0066CC]/20"> <div className="min-h-screen bg-white font-sans text-[#1d1d1f] selection:bg-[#0066CC]/20">
<TvonePromoStrip /> <TvonePromoStrip />
@@ -16,6 +18,7 @@ export default function NewsArticlePage() {
<main className="mx-auto max-w-[1240px] px-6 py-12"> <main className="mx-auto max-w-[1240px] px-6 py-12">
<div className="flex flex-col gap-16 lg:flex-row lg:items-start"> <div className="flex flex-col gap-16 lg:flex-row lg:items-start">
{/* --- COLUNA PRINCIPAL (ARTIGO) --- */} {/* --- COLUNA PRINCIPAL (ARTIGO) --- */}
<article className="flex-1 min-w-0"> <article className="flex-1 min-w-0">
<div className="mb-6"> <div className="mb-6">
@@ -152,38 +155,76 @@ export default function NewsArticlePage() {
</section> </section>
</article> </article>
{/* --- SIDEBAR COM VÍDEO TV ONE --- */} {/* --- SIDEBAR REFINADA --- */}
<aside className="w-full lg:w-[340px] shrink-0"> <aside className="w-full lg:w-[340px] shrink-0">
<div className="sticky top-10 space-y-10"> <div className="sticky top-10 space-y-10">
{/* Card de Vídeo Workshop */}
{/* 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-[32px] 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> <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"> <div className="relative aspect-video w-full overflow-hidden rounded-[24px] bg-black shadow-inner border border-black/5 group">
<iframe {!isPlaying ? (
className="absolute inset-0 h-full w-full" <div className="absolute inset-0 z-10 cursor-pointer" onClick={() => setIsPlaying(true)}>
src="https://www.youtube.com/embed/bfEYtb2O3iI" <Image
title="Workshop Acelere a Sua Empresa" src="https://i.ytimg.com/vi/bfEYtb2O3iI/maxresdefault.jpg"
frameBorder="0" alt="Thumbnail TV One"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" fill
allowFullScreen className="object-cover transition-transform duration-700 group-hover:scale-105 opacity-80"
/> />
<div className="absolute inset-0 bg-black/10 transition-opacity group-hover:bg-black/5" />
<div className="absolute inset-0 flex items-center justify-center">
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-white/20 backdrop-blur-xl border border-white/30 text-white shadow-2xl transition-all group-hover:bg-white group-hover:text-[#0066CC] group-hover:scale-110">
<svg className="h-7 w-7 ml-1" 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"
title="TV One Video"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
/>
)}
</div> </div>
<div className="mt-4 px-2 pb-1"> <div className="mt-4 px-2 pb-1">
<p className="text-[15px] font-bold text-black leading-tight"> <p className="text-[15px] font-bold text-black leading-tight">
Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola
</p> </p>
<div className="mt-2 flex items-center gap-2"> <div className="mt-4 flex flex-col gap-3">
<span className="h-1.5 w-1.5 rounded-full bg-red-500 animate-pulse" /> <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">
<p className="text-[12px] text-neutral-400 font-medium uppercase tracking-wider"> Assistir no YouTube
Destaque TV One </a>
</p> <div className="flex items-center gap-2">
<span className="h-1.5 w-1.5 rounded-full bg-red-500 animate-pulse" />
<p className="text-[11px] text-neutral-400 font-bold uppercase tracking-wider">TV One Angola</p>
</div> </div>
</div>
</div> </div>
</div> </div>
{/* Card de Curtidas */} {/* 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">
<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">
<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 className="text-[17px] font-bold tracking-tight text-white">Pay</span>
<div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
</button>
<p className="mt-4 text-[11px] text-center text-neutral-400 font-medium leading-relaxed">
Pagamento seguro via Apple Pay. <br/>Cancele a qualquer momento.
</p>
</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-[32px] 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> <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]"> <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]">
@@ -192,19 +233,18 @@ export default function NewsArticlePage() {
</button> </button>
</div> </div>
{/* Banner BAI (Estilo Dark Glass) */} {/* 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-[32px] bg-[#1d1d1f] p-10 text-white border border-white/5">
<div className="relative z-10 h-full flex flex-col justify-between"> <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> <span className="text-[11px] font-[900] tracking-[0.2em] opacity-40 uppercase">Patrocinado</span>
<div> <div>
<h4 className="text-[28px] font-[900] leading-tight tracking-tight">BAI Directo:<br/>Banca no seu pulso.</h4> <h4 className="text-[28px] font-[900] leading-tight tracking-tight">BAI Directo:<br/>Banca no seu pulso.</h4>
<p className="mt-4 text-sm font-medium opacity-50 leading-relaxed">Simples e rápido. Faça o download na App Store.</p> <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> </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-full bg-blue-600/30 blur-[80px] transition-opacity group-hover:opacity-50" />
</div> </div>
{/* Banner Unitel */}
<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-[32px] 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> <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> <p className="mt-3 text-[12px] font-black uppercase tracking-wider opacity-90">O futuro chegou ao Namibe!</p>
next.config.ts
+4
View File
@@ -9,6 +9,10 @@ const nextConfig: NextConfig = {
hostname: "images.unsplash.com", hostname: "images.unsplash.com",
pathname: "/**", pathname: "/**",
}, },
{
protocol: 'https',
hostname: 'i.ytimg.com', // NOVO: Adicionado para as thumbnails do YouTube
},
], ],
}, },
}; };