add custom play button

2026-04-18 15:27:52 +00:00 · 2026-04-10 21:12:03 +01:00
parent 5e818f1823
commit 50ef8326dd
2 changed files with 76 additions and 32 deletions
@@ -1,13 +1,15 @@
 "use client";
-import React from 'react';
+import React, { useState } from 'react';
 import Image from 'next/image';
 import { ThumbsUp, MessageCircle, Send, Share2 } from 'lucide-react';
-// import { FaWhatsapp, FaFacebookF, FaInstagram } from 'react-icons/fa';
 import { TvoneAdBanner, TvoneFooter } from '../components/tvone-content';
 import { TvonePromoStrip } from '../components/tvone-promo-strip';
 import { TvoneSiteNav } from '../components/tvone-site-nav';

 export default function NewsArticlePage() {
+  // Estado para controlar o play do vídeo customizado
+  const [isPlaying, setIsPlaying] = useState(false);
+
  return (
    <div className="min-h-screen bg-white font-sans text-[#1d1d1f] selection:bg-[#0066CC]/20">
      <TvonePromoStrip />
@@ -16,6 +18,7 @@ export default function NewsArticlePage() {
      <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-6">
@@ -152,38 +155,76 @@ export default function NewsArticlePage() {
            </section>
          </article>

-          {/* --- SIDEBAR COM VÍDEO TV ONE --- */}
+          {/* --- SIDEBAR REFINADA --- */}
          <aside className="w-full lg:w-[340px] shrink-0">
            <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">
                <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">
+                  {!isPlaying ? (
+                    <div className="absolute inset-0 z-10 cursor-pointer" onClick={() => setIsPlaying(true)}>
+                      <Image 
+                        src="https://i.ytimg.com/vi/bfEYtb2O3iI/maxresdefault.jpg"
+                        alt="Thumbnail TV One"
+                        fill
+                        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" 
-                    title="Workshop Acelere a Sua Empresa"
+                      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 className="mt-4 px-2 pb-1">
                  <p className="text-[15px] font-bold text-black leading-tight">
                    Workshop “Acelere a Sua Empresa” impulsiona o empreendedorismo em Angola
                  </p>
-                    <div className="mt-2 flex items-center gap-2">
+                  <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">
+                      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" />
-                        <p className="text-[12px] text-neutral-400 font-medium uppercase tracking-wider">
-                            Destaque TV One
-                        </p>
+                      <p className="text-[11px] text-neutral-400 font-bold uppercase tracking-wider">TV One Angola</p>
+                    </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">
                <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]">
@@ -192,7 +233,7 @@ export default function NewsArticlePage() {
                </button>
              </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="relative z-10 h-full flex flex-col justify-between">
                  <span className="text-[11px] font-[900] tracking-[0.2em] opacity-40 uppercase">Patrocinado</span>
@@ -204,7 +245,6 @@ export default function NewsArticlePage() {
                <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>

-              {/* 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">
                <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>
@@ -9,6 +9,10 @@ const nextConfig: NextConfig = {
        hostname: "images.unsplash.com",
        pathname: "/**",
      },
+      {
+        protocol: 'https',
+        hostname: 'i.ytimg.com', // NOVO: Adicionado para as thumbnails do YouTube
+      },
    ],
  },
 };