From 554e46993028881b8e0196aa485c4c14ddbe8492 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Sun, 12 Apr 2026 12:27:57 +0100
Subject: [PATCH] add like ubtton

---
 app/content/page.tsx | 154 +++++++++++++++++++++++++++++++------------
 1 file changed, 111 insertions(+), 43 deletions(-)

diff --git a/app/content/page.tsx b/app/content/page.tsx
index 29eca83..d90f5fc 100644
--- a/app/content/page.tsx
+++ b/app/content/page.tsx
@@ -8,6 +8,7 @@ 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';
 
 export default function NewsArticlePage() {
   // Estado para controlar o play do vídeo customizado
@@ -212,58 +213,121 @@ export default function NewsArticlePage() {
           </article>
 
           {/* --- SIDEBAR REFINADA --- */}
-  {/* --- SIDEBAR REFINADA COM SOCIAL SHARE --- */}
+
+          {/* --- 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. 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-O futucenter gap-2">
-                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#25D366] text-white transition-all hover:opacity-90 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-[#007AFF] text-white transition-all hover:opacity-90 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-black text-white transition-all hover:opacity-80 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-[#F2F2F7] text-[#8E8E93] transition-all hover:bg-[#E5E5EA] active:scale-95">
-                      <Link2 size={20} />
-                    </div>
-                    <span className="text-[10px] font-medium text-neutral-500">Link</span>
-                  </button>
-                </div>
+              {/* 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>
+
+                {/* 3. Plugin Footer */}
+                <div className="border-t border-neutral-100 pt-3">
+                  <p className="flex items-center gap-1.5 text-[10px] font-medium text-neutral-400">
+
+                    <SiFacebook size={16} />
+                    Facebook Page Plugin
+                  </p>
+                </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">
-                <div className="h-[15px] flex items-center">
-                  <img src="/unitel-logo.png" alt="Unitel logo" className="h-full w-auto" />
-                </div>
-                  <span className="text-[10px] font-bold text-neutral-400 uppercase">Pub</span>
+                  <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">
@@ -292,6 +356,10 @@ export default function NewsArticlePage() {
                 </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">