183 lines
13 KiB
TypeScript
183 lines
13 KiB
TypeScript
import { Activity, Zap, TrendingUp, BarChart3, Globe, Share2, Instagram, Search, Menu, Send, ChevronRight, MessageCircle, Bookmark, Volume2, ArrowRight } from 'lucide-react';
|
|
|
|
export default function PulseTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
|
|
|
const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
|
|
id: p.slug || p.id,
|
|
category: p.category_name || 'ALERT',
|
|
title: p.title,
|
|
excerpt: p.excerpt,
|
|
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR'),
|
|
img: p.image || `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200&random=${i}`,
|
|
content: p.content
|
|
})) : [
|
|
{ id: '1', title: 'Google Core Update 04.2026: Live Tracking', category: 'URGENT', img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200' },
|
|
{ id: '2', title: 'Major Indexing Bug in Search Console Detected', category: 'SYSTEM', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' },
|
|
];
|
|
|
|
const displayArticle = currentArticle ? {
|
|
...currentArticle,
|
|
id: currentArticle.slug || currentArticle.id,
|
|
category: currentArticle.category_name || 'UPDATE',
|
|
img: currentArticle.image || `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200`
|
|
} : articlesToRender[0];
|
|
|
|
return (
|
|
<div className="seo-pulse bg-black text-white min-h-screen font-sans selection:bg-[#FF4D00] selection:text-white">
|
|
|
|
{/* High-Octane Header */}
|
|
<nav className="border-b-4 border-white p-6 sticky top-0 z-50 bg-black flex justify-between items-center">
|
|
<div className="flex items-center gap-6">
|
|
<Menu className="w-8 h-8 cursor-pointer hover:text-[#FF4D00] transition-colors" />
|
|
<a href="/" className="text-4xl font-black italic tracking-tighter">SEO<span className="text-[#FF4D00]">PULSE</span></a>
|
|
</div>
|
|
<div className="hidden lg:flex items-center gap-12 text-xs font-black uppercase tracking-widest">
|
|
<a href="/category/alerts" className="text-[#FF4D00]">Live Alerts</a>
|
|
<a href="/category/all" className="hover:text-[#FF4D00] transition-colors">Archive</a>
|
|
<a href="/category/tools" className="hover:text-[#FF4D00] transition-colors">Pulse Tools</a>
|
|
</div>
|
|
<div className="flex items-center gap-6">
|
|
<Search className="w-6 h-6 cursor-pointer hover:text-[#FF4D00]" />
|
|
<button className="bg-white text-black px-6 py-2 text-[10px] font-black uppercase tracking-widest hover:bg-[#FF4D00] hover:text-white transition-all">Emergency Access</button>
|
|
</div>
|
|
</nav>
|
|
|
|
{activeView === 'home' ? (
|
|
<main>
|
|
{/* Section 1: Live HUD Hero */}
|
|
<section className="p-6 md:p-12 border-b-4 border-white grid lg:grid-cols-2">
|
|
<div className="p-8 md:p-16 flex flex-col justify-center border-b-4 lg:border-b-0 lg:border-r-4 border-white">
|
|
<div className="flex items-center gap-4 mb-10">
|
|
<div className="w-4 h-4 rounded-full bg-[#FF4D00] animate-ping"></div>
|
|
<span className="text-xs font-black uppercase tracking-[0.3em] text-[#FF4D00]">System Update Detected</span>
|
|
</div>
|
|
<h1 className="text-5xl md:text-8xl font-black italic tracking-tighter leading-[0.85] mb-12 uppercase italic">
|
|
Fast Data <br/> <span className="text-[#FF4D00]">Deep Insight.</span>
|
|
</h1>
|
|
<p className="text-xl font-bold uppercase leading-tight mb-16 max-w-md border-l-8 border-[#FF4D00] pl-8">O algoritmo do Google mudou há 12 minutos. Você está pronto para o impacto ou vai ficar para trás?</p>
|
|
<a href={`/${articlesToRender[0].id}`} className="bg-white text-black px-12 py-6 text-sm font-black uppercase tracking-[0.2em] hover:bg-[#FF4D00] hover:text-white transition-all w-fit shadow-[10px_10px_0_0_#FF4D00]">
|
|
Get The Report Now
|
|
</a>
|
|
</div>
|
|
<div className="aspect-video lg:aspect-auto relative overflow-hidden bg-zinc-900">
|
|
<img src={articlesToRender[0].img} className="w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 transition-all duration-700" alt="pulse hero"/>
|
|
<div className="absolute top-10 right-10 flex flex-col items-end gap-2">
|
|
<span className="text-[10px] font-black bg-white text-black px-4 py-1 uppercase tracking-widest">Live Feed</span>
|
|
<span className="text-[10px] font-black bg-[#FF4D00] text-white px-4 py-1 uppercase tracking-widest">ID: {articlesToRender[0].id}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Section 2: News Ticker Style Grid */}
|
|
<section className="p-6 md:p-12">
|
|
<div className="flex justify-between items-center mb-16 border-b-4 border-white pb-6">
|
|
<h2 className="text-4xl font-black italic tracking-tighter uppercase">Market Pulse</h2>
|
|
<a href="/category/all" className="text-xs font-black uppercase tracking-widest border-b-2 border-[#FF4D00] pb-1 text-[#FF4D00]">View Full Archive</a>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|
{articlesToRender.map((art, idx) => (
|
|
<a href={`/${art.id}`} key={art.id + idx} className="group border-4 border-white p-8 hover:bg-white hover:text-black transition-all block">
|
|
<div className="flex justify-between items-start mb-10">
|
|
<span className="text-[10px] font-black uppercase tracking-widest bg-[#FF4D00] text-white px-3 py-1">Alert // 2026</span>
|
|
<span className="text-[10px] font-black uppercase tracking-widest opacity-40">{art.date}</span>
|
|
</div>
|
|
<h3 className="text-3xl font-black uppercase tracking-tighter leading-none mb-8 group-hover:italic transition-all">{art.title}</h3>
|
|
<p className="text-sm font-bold uppercase opacity-60 mb-10 group-hover:opacity-100">{art.excerpt}</p>
|
|
<div className="flex items-center gap-4 text-xs font-black uppercase tracking-widest">
|
|
Read Report <ArrowRight className="w-4 h-4 group-hover:translate-x-4 transition-transform" />
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* High-Octane CTA */}
|
|
<section className="bg-[#FF4D00] p-12 md:p-24 text-center">
|
|
<Activity className="w-20 h-20 mx-auto mb-10 stroke-[4px]" />
|
|
<h2 className="text-5xl md:text-8xl font-black italic tracking-tighter mb-10 uppercase leading-none">Stay Decoded.</h2>
|
|
<p className="text-xl font-black uppercase mb-16 max-w-2xl mx-auto">Junte-se à rede de elite. Receba alertas de mudanças de algoritmo em tempo real via SMS e E-mail.</p>
|
|
<div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-6">
|
|
<input type="email" placeholder="YOUR ACCESS EMAIL..." className="flex-1 bg-black text-white border-4 border-white p-6 font-black uppercase placeholder-white/30 outline-none" />
|
|
<button className="bg-white text-black px-12 py-6 font-black uppercase tracking-widest hover:bg-black hover:text-white transition-all">Activate</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
) : (
|
|
/* --- ARTICLE VIEW --- */
|
|
<article className="pb-40">
|
|
<div className="max-w-[1200px] mx-auto px-6 py-20">
|
|
<div className="grid lg:grid-cols-12 gap-16">
|
|
<div className="lg:col-span-1 flex flex-col gap-8 text-[#FF4D00] sticky top-32 h-fit">
|
|
<Share2 className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
|
|
<MessageCircle className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
|
|
<Bookmark className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
|
|
</div>
|
|
<div className="lg:col-span-11">
|
|
<div className="flex items-center gap-4 mb-10">
|
|
<span className="bg-[#FF4D00] text-white text-[10px] font-black px-4 py-1 rounded uppercase tracking-[0.3em]">Verified_Intelligence</span>
|
|
<span className="text-xs font-black uppercase opacity-40">{displayArticle.date}</span>
|
|
</div>
|
|
<h1 className="text-5xl md:text-8xl font-black italic tracking-tighter leading-[0.85] mb-16 uppercase italic text-white">{displayArticle.title}</h1>
|
|
|
|
<div className="aspect-video bg-zinc-900 border-4 border-white mb-20 overflow-hidden">
|
|
<img src={displayArticle.img} className="w-full h-full object-cover" alt="post img"/>
|
|
</div>
|
|
|
|
<div className="prose prose-2xl prose-invert max-w-none prose-p:font-bold prose-p:uppercase prose-p:tracking-tight prose-headings:font-black prose-headings:italic prose-a:text-[#FF4D00] prose-strong:text-[#FF4D00]">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
{/* Pulse Footer */}
|
|
<footer className="border-t-4 border-white py-24 px-6 bg-black text-white">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-20 mb-32">
|
|
<div className="lg:col-span-2">
|
|
<h1 className="text-6xl font-black italic tracking-tighter mb-10">SEO<span className="text-[#FF4D00]">PULSE</span></h1>
|
|
<p className="text-gray-400 text-lg font-black uppercase leading-relaxed max-w-md mb-12">Monitoramento instantâneo do ecossistema de busca. Uma interface de alta voltagem para quem vive de dados e performance.</p>
|
|
<div className="flex gap-8">
|
|
<a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Instagram className="w-6 h-6"/></a>
|
|
<a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Globe className="w-6 h-6"/></a>
|
|
<a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Share2 className="w-6 h-6"/></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-[#FF4D00] text-xs font-black uppercase tracking-[0.4em] mb-10">Legal_Core</h4>
|
|
<ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
|
<li><a href="/privacy" className="hover:text-white transition-colors">Privacidade</a></li>
|
|
<li><a href="/terms" className="hover:text-white transition-colors">Termos_Uso</a></li>
|
|
<li><a href="/cookies" className="hover:text-white transition-colors">Cookies_Protocol</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="text-[#FF4D00] text-xs font-black uppercase tracking-[0.4em] mb-10">Network</h4>
|
|
<ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
|
<li><a href="/contact" className="hover:text-white transition-colors">Suporte_Direto</a></li>
|
|
<li><a href="/search" className="hover:text-white transition-colors">Busca_Global</a></li>
|
|
<li><a href="/about" className="hover:text-white transition-colors">Sobre_Nos</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col md:flex-row justify-between items-center pt-16 border-t-2 border-white/10 text-[10px] font-black uppercase tracking-[0.5em] text-gray-600 text-center md:text-left gap-8">
|
|
<span>© {new Date().getFullYear()} SEO PULSE SYSTEMS. ALL RIGHTS DECODED.</span>
|
|
<div className="flex items-center gap-6">
|
|
<div className="flex items-center gap-2">
|
|
<Activity className="w-3 h-3 text-[#FF4D00]"/>
|
|
<span>Uptime: 99.9%</span>
|
|
</div>
|
|
<span>Version: 4.0.26_X</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|