From 59237b27242396fd178b3234189b03e5469d15b6 Mon Sep 17 00:00:00 2001
From: Peter Maquiran <maquiranpeter29@gmail.com>
Date: Fri, 10 Apr 2026 15:11:03 +0100
Subject: [PATCH] add content page

---
 app/components/tvone-content.tsx |  17 ++-
 app/content/page.tsx             | 197 +++++++++++++++++++++++++++++++
 package.json                     |   1 +
 pnpm-lock.yaml                   |  12 ++
 4 files changed, 218 insertions(+), 9 deletions(-)
 create mode 100644 app/content/page.tsx

diff --git a/app/components/tvone-content.tsx b/app/components/tvone-content.tsx
index d42a028..2548bdb 100644
--- a/app/components/tvone-content.tsx
+++ b/app/components/tvone-content.tsx
@@ -54,21 +54,21 @@ const destaques = [
     img: "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&q=80",
   },
   {
-    cat: "NEGÓCIOS",
+    cat: "FAMOSOS",
     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-1518770660439-4636190af475?w=600&q=80",
   },
   {
-    cat: "DESPORTO",
+    cat: "FAMOSOS",
     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=600&q=80",
   },
   {
-    cat: "DESPORTO",
+    cat: "FAMOSOS",
     catColor: "text-emerald-600",
     title: "Taça: equipa da casa garante lugar nas meias com exibição sólida.",
     date: "23 Mar 2025",
@@ -182,22 +182,22 @@ export function TvoneDestaques() {
                 <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-80" />
 
                 {/* NEW INTERNAL LABEL */}
-                {/* <div className="absolute bottom-3 left-3 z-10">
+                <div className="absolute bottom-3 left-3 z-10">
                   <span className="rounded-lg bg-black/50 px-2 py-1 text-[10px] font-bold uppercase tracking-widest text-white backdrop-blur-md border border-white/10">
                     {item.cat}
                   </span>
-                </div> */}
+                </div>
               </div>
 
               {/* TEXT CONTENT (Simplified) */}
-              <div className="py-4">
+              {/* <div className="py-4">
                 <h3 className="line-clamp-2 text-[15px] font-bold leading-tight text-neutral-900 transition-colors group-hover:text-[#0066cc] md:text-[16px]">
                   {item.title}
                 </h3>
                 <div className="mt-2 flex items-center gap-2">
                    <p className="text-[11px] font-medium text-neutral-400">{item.date}</p>
                 </div>
-              </div>
+              </div> */}
             </Link>
           </article>
         ))}
@@ -336,10 +336,9 @@ export function TvoneFooter() {
             </div>
             <div className="mt-4 space-y-3 text-[12px] leading-[1.33337] text-[#6e6e73]">
               <p className="text-pretty">
-                Com uma abordagem moderna, dinâmica e sempre atual, a TV ONE destaca-se pela oferta de conteúdos diversificados e relevantes, que abrangem áreas como cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e desporto.
+                Com uma abordagem moderna, dinâmica e sempre atual, a TV ONE destaca-se pela oferta de conteúdos diversificados e relevantes, que abrangem áreas como cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e desporto. 
               </p>
               <p className="text-pretty">
-              Com uma abordagem moderna, dinâmica e sempre atual, a TV ONE destaca-se pela oferta de conteúdos diversificados e relevantes, que abrangem áreas como cultura, turismo, moda, celebridades, entretenimento, atualidade, lifestyle, conteúdos virais e desporto.
                 Mais do que informar, o portal proporciona uma experiência completa, envolvente e interativa, conectando os seus leitores e espectadores às principais tendências e acontecimentos do momento.
               </p>
             </div>
diff --git a/app/content/page.tsx b/app/content/page.tsx
new file mode 100644
index 0000000..fef37c9
--- /dev/null
+++ b/app/content/page.tsx
@@ -0,0 +1,197 @@
+"use client";
+import React 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() {
+  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-6">
+              <span className="rounded-md bg-blue-600 px-2.5 py-1 text-[11px] font-[900] uppercase tracking-wider text-white">
+                Música
+              </span>
+            </div>
+
+            <h1 className="Text-3xl font-bold tracking-tight text-neutral-900 text-2xl md:text-4xl">
+              Adele: A Turnê Mundial que Redefiniu a Indústria Musical em 2016.
+            </h1>
+
+            
+            {/* 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">
+              <Image
+                src="https://images.unsplash.com/photo-1543900694-133f37abaaa5"
+                alt="Adele Live 2016"
+                fill
+                className="object-cover transition-transform duration-700 hover:scale-105"
+                priority
+              />
+            </div>
+
+            {/* Corpo do Conteúdo */}
+            <div className="mt-12 space-y-8 text-[20px] leading-[1.6] text-[#333] lg:text-[21px]">
+              <p className="text-1xl md:text-2xl font-bold leading-snug text-black lg:tracking-tight">
+                A turnê de Adele em 2016 foi o ápice de sua carreira, uma celebração de puro talento e conexão emocional que parou o mundo.
+              </p>
+              
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+              <p>
+                A turnê mundial redefiniu um império de mais de $160 milhões, com passagens por arenas esgotadas em quase cem cidades. 
+                Diferente de outros shows da época, Adele apostou no minimalismo: apenas ela e sua voz impecável.
+              </p>
+
+
+              {/* 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">
+                   <Image 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">
+                   <Image src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745" fill className="object-cover" alt="Concerto Adele 2" />
+                </div>
+              </div>
+            </div>
+
+            {/* 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">
+                  <span className="text-[#0066CC] font-bold text-lg">R</span>
+                </div>
+                <div>
+                  <p className="text-[15px] font-bold text-black">Por <span className="text-[#0066CC]">Redação</span></p>
+                  <p className="text-[13px] text-neutral-400 font-medium">12 de Junho, 2016 | 09:30 UTC</p>
+                </div>
+              </div>
+
+              {/* 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">
+                  <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">
+                  <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">
+                  <FaInstagram size={20} />
+                </button>
+              </div> */}
+            </div>
+
+
+            {/* Seção de Comentários */}
+            <section className="mt-24 border-t border-neutral-100 pt-16">
+               <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">
+                 <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">
+                    Enviar <Send size={18}/>
+                   </button>
+                 </div>
+               </div>
+            </section>
+          </article>
+
+          {/* --- SIDEBAR REFINADA --- */}
+          <aside className="w-full lg:w-[340px] shrink-0">
+            <div className="sticky top-10 space-y-10">
+              
+              {/* Card de Curtidas */}
+              <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]">
+                  <ThumbsUp size={20} />
+                  Curtidas
+                </button>
+              </div>
+
+              {/* Banner BAI (Estilo Dark Glass) */}
+              <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>
+                    <div>
+                      <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>
+                    </div>
+                 </div>
+                 {/* Gradiente de fundo sutil */}
+                 <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 (Gradiente Vivo) */}
+              <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>
+              </div>
+
+            </div>
+          </aside>
+
+        </div>
+      </main>
+
+      <TvoneAdBanner />
+      <TvoneFooter />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 26e21e7..2947413 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "framer-motion": "^12.38.0",
+    "lucide-react": "^1.8.0",
     "next": "16.2.1",
     "react": "19.2.4",
     "react-dom": "19.2.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80764f8..293bc7d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       framer-motion:
         specifier: ^12.38.0
         version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      lucide-react:
+        specifier: ^1.8.0
+        version: 1.8.0(react@19.2.4)
       next:
         specifier: 16.2.1
         version: 16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -1513,6 +1516,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.8.0:
+    resolution: {integrity: sha512-WuvlsjngSk7TnTBJ1hsCy3ql9V9VOdcPkd3PKcSmM34vJD8KG6molxz7m7zbYFgICwsanQWmJ13JlYs4Zp7Arw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -3515,6 +3523,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.8.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5