194 lines
14 KiB
TypeScript
194 lines
14 KiB
TypeScript
|
import { Search, TrendingUp, BarChart3, Zap, Mail, Instagram, Globe, Share2, Bookmark, User, Clock, ChevronRight } from 'lucide-react';
|
||
|
|
|
||
|
|
export default function AuthorityTheme({ 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 || 'ANALYSIS',
|
||
|
|
title: p.title,
|
||
|
|
excerpt: p.excerpt,
|
||
|
|
author: p.author_name || 'Alex Rivera',
|
||
|
|
time: '8 min',
|
||
|
|
img: p.image || `https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800&random=${i}`,
|
||
|
|
content: p.content,
|
||
|
|
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR')
|
||
|
|
})) : [
|
||
|
|
{ id: '1', title: 'The New Era of SEO: Google AI Redefined', excerpt: 'It is no longer about keywords. It is about entity, authority, and real user experience.', category: 'ANALYSIS', author: 'Alex Rivera', time: '5 min', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800' },
|
||
|
|
{ id: '2', title: 'SaaS SEO: The Growth Guide', excerpt: 'How to scale your SaaS organic traffic from zero to 100k.', category: 'CASE STUDY', author: 'Mariana Costa', time: '8 min', 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 || 'REPORT',
|
||
|
|
author: currentArticle.author_name || 'SEO Team',
|
||
|
|
img: currentArticle.image || `https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800`
|
||
|
|
} : articlesToRender[0];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-[#fcfcfc] text-[#111] min-h-screen font-sans selection:bg-[#0046FF] selection:text-white">
|
||
|
|
|
||
|
|
{/* Premium Navigation */}
|
||
|
|
<nav className="sticky top-0 bg-white/80 backdrop-blur-xl z-50 border-b border-gray-100">
|
||
|
|
<div className="max-w-[1400px] mx-auto px-6 h-20 flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-12">
|
||
|
|
<a href="/" className="flex items-center gap-2">
|
||
|
|
<div className="w-10 h-10 bg-black rounded-[12px] flex items-center justify-center -rotate-6 shadow-xl shadow-black/20">
|
||
|
|
<BarChart3 className="w-6 h-6 text-white" />
|
||
|
|
</div>
|
||
|
|
<span className="text-xl font-black uppercase tracking-tighter italic">SEO<span className="text-[#0046FF]">AUTHORITY</span></span>
|
||
|
|
</a>
|
||
|
|
<div className="hidden lg:flex items-center gap-8">
|
||
|
|
{['Algorithms', 'Case Studies', 'E-commerce', 'AI'].map(cat => (
|
||
|
|
<a key={cat} href={`/category/${cat.toLowerCase()}`} className="text-[11px] font-black uppercase tracking-widest text-gray-400 hover:text-[#0046FF] transition-colors">{cat}</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-6">
|
||
|
|
<button className="text-gray-400 hover:text-black transition-colors"><Search className="w-5 h-5"/></button>
|
||
|
|
<button className="bg-black text-white px-6 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hover:bg-[#0046FF] transition-all shadow-lg">Elite Login</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
{activeView === 'home' ? (
|
||
|
|
<main className="max-w-[1400px] mx-auto px-6 py-12">
|
||
|
|
{/* Hero Grid */}
|
||
|
|
<div className="grid lg:grid-cols-4 gap-8 mb-20">
|
||
|
|
<div className="lg:col-span-3 group relative">
|
||
|
|
<a href={`/${articlesToRender[0].id}`} className="relative block aspect-[16/8] rounded-[2rem] overflow-hidden shadow-2xl bg-black">
|
||
|
|
<img src={articlesToRender[0].img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000 opacity-80" alt="Main"/>
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent p-12 flex flex-col justify-end">
|
||
|
|
<span className="bg-[#0046FF] text-white text-[10px] font-black px-4 py-1.5 rounded-full w-fit mb-6 shadow-xl">{articlesToRender[0].category}</span>
|
||
|
|
<h1 className="text-4xl md:text-6xl font-black text-white leading-[1.1] tracking-tight mb-6 max-w-4xl">{articlesToRender[0].title}</h1>
|
||
|
|
<p className="text-gray-300 text-lg font-medium max-w-2xl line-clamp-2">{articlesToRender[0].excerpt}</p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div className="hidden lg:flex flex-col gap-8">
|
||
|
|
<div className="bg-[#0046FF] rounded-[2rem] p-8 text-white flex flex-col justify-between h-full shadow-2xl relative overflow-hidden group">
|
||
|
|
<div className="relative z-10">
|
||
|
|
<h3 className="text-2xl font-black italic mb-4 leading-tight text-white">Next-Gen SEO Metrics</h3>
|
||
|
|
<p className="text-blue-100 text-sm font-medium">Optimize for Google SGE now.</p>
|
||
|
|
</div>
|
||
|
|
<button className="relative z-10 bg-white text-[#0046FF] w-full py-4 rounded-2xl font-black text-xs uppercase tracking-widest hover:bg-black hover:text-white transition-all">Download Report</button>
|
||
|
|
<Zap className="absolute -bottom-10 -right-4 w-40 h-40 text-blue-400/20 rotate-12" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content Grid */}
|
||
|
|
<div className="grid lg:grid-cols-12 gap-12">
|
||
|
|
<div className="lg:col-span-8">
|
||
|
|
<div className="flex items-center justify-between mb-10 pb-4 border-b border-gray-100">
|
||
|
|
<h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-400 flex items-center gap-2">
|
||
|
|
<TrendingUp className="w-4 h-4 text-[#0046FF]"/> TRENDING NOW
|
||
|
|
</h2>
|
||
|
|
<a href="/category/all" className="text-xs font-bold text-[#0046FF] uppercase tracking-widest">View All</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-12">
|
||
|
|
{articlesToRender.slice(0, 5).map((art, idx) => (
|
||
|
|
<a href={`/${art.id}`} key={art.id + idx} className="grid md:grid-cols-5 gap-8 group">
|
||
|
|
<div className="md:col-span-2 aspect-[4/3] rounded-3xl overflow-hidden shadow-lg border border-gray-100 bg-gray-50">
|
||
|
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={art.title}/>
|
||
|
|
</div>
|
||
|
|
<div className="md:col-span-3 flex flex-col justify-center">
|
||
|
|
<div className="flex items-center gap-3 mb-4">
|
||
|
|
<span className="text-[10px] font-black text-[#0046FF] uppercase tracking-widest">{art.category}</span>
|
||
|
|
<span className="text-[10px] font-bold text-gray-300">• 8 min read</span>
|
||
|
|
</div>
|
||
|
|
<h3 className="text-2xl font-black mb-4 group-hover:text-[#0046FF] transition-colors leading-tight">{art.title}</h3>
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-6 h-6 rounded-full bg-gray-900" />
|
||
|
|
<span className="text-[11px] font-bold text-gray-500 uppercase">{art.author}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside className="lg:col-span-4 h-fit sticky top-32">
|
||
|
|
<div className="bg-white rounded-[2.5rem] p-10 border border-gray-100 shadow-xl relative overflow-hidden group">
|
||
|
|
<Mail className="w-12 h-12 text-[#1a1a1a] mb-6" />
|
||
|
|
<h3 className="text-2xl font-black mb-4 leading-tight text-black">Get The SEO Report</h3>
|
||
|
|
<p className="text-gray-500 text-sm font-medium mb-8 leading-relaxed">Join 50k+ strategists and receive weekly market intelligence.</p>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<input type="email" placeholder="Email Address..." className="w-full bg-gray-50 border border-gray-100 rounded-2xl p-4 text-sm outline-none focus:border-[#0046FF] transition-colors font-medium text-black" />
|
||
|
|
<button className="w-full bg-black text-white font-black text-[11px] uppercase tracking-widest py-4 rounded-2xl hover:bg-[#0046FF] transition-all shadow-xl">Subscribe Free</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
) : (
|
||
|
|
/* --- ARTICLE VIEW --- */
|
||
|
|
<article className="pb-40">
|
||
|
|
<div className="max-w-[900px] mx-auto px-6 pt-20">
|
||
|
|
<div className="flex flex-col items-center text-center">
|
||
|
|
<span className="bg-[#0046FF]/10 text-[#0046FF] text-[10px] font-black px-4 py-1.5 rounded-full mb-8 tracking-widest uppercase">{displayArticle.category} // 2026</span>
|
||
|
|
<h1 className="text-4xl md:text-6xl lg:text-7xl font-black tracking-tighter leading-[1.05] mb-10 text-center text-black">{displayArticle.title}</h1>
|
||
|
|
<div className="flex items-center gap-4 mb-16">
|
||
|
|
<div className="w-12 h-12 rounded-full bg-black flex items-center justify-center text-white font-bold uppercase">{displayArticle.author.slice(0, 2)}</div>
|
||
|
|
<div className="text-left">
|
||
|
|
<p className="text-sm font-black uppercase tracking-widest text-black">{displayArticle.author}</p>
|
||
|
|
<p className="text-xs font-bold text-gray-300 uppercase tracking-widest">Published {displayArticle.date}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="aspect-[16/9] rounded-[3rem] overflow-hidden shadow-3xl shadow-black/20 mb-16 bg-gray-900">
|
||
|
|
<img src={displayArticle.img} className="w-full h-full object-cover" alt="Article"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="max-w-[700px] mx-auto prose prose-xl prose-p:text-gray-600 prose-p:font-medium prose-headings:font-black prose-headings:tracking-tighter prose-a:text-[#0046FF] prose-strong:text-black">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Premium Footer */}
|
||
|
|
<footer className="bg-black text-white pt-32 pb-20 px-6 overflow-hidden relative">
|
||
|
|
<div className="max-w-[1400px] mx-auto relative z-10">
|
||
|
|
<div className="grid md:grid-cols-4 gap-20 mb-20">
|
||
|
|
<div className="md:col-span-2">
|
||
|
|
<div className="flex items-center gap-2 mb-8">
|
||
|
|
<BarChart3 className="w-8 h-8 text-[#0046FF]" />
|
||
|
|
<span className="text-2xl font-black uppercase tracking-tighter italic">SEO<span className="text-[#0046FF]">AUTHORITY</span></span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400 text-lg font-medium max-w-sm leading-relaxed mb-10">A plataforma definitiva para quem joga o jogo do SEO em nível elite. Inovação, análise e performance.</p>
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<button className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-[#0046FF] transition-all"><Instagram className="w-5 h-5"/></button>
|
||
|
|
<button className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-[#0046FF] transition-all"><Globe className="w-5 h-5"/></button>
|
||
|
|
<button className="w-12 h-12 rounded-2xl bg-white/5 flex items-center justify-center hover:bg-[#0046FF] transition-all"><Share2 className="w-5 h-5"/></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h5 className="text-[10px] font-black uppercase tracking-[0.2em] text-[#0046FF] mb-10">Explorar</h5>
|
||
|
|
<ul className="space-y-4 text-sm font-bold text-gray-400">
|
||
|
|
<li><a href="/privacy" className="hover:text-white transition-colors">Privacidade</a></li>
|
||
|
|
<li><a href="/terms" className="hover:text-white transition-colors">Termos</a></li>
|
||
|
|
<li><a href="/cookies" className="hover:text-white transition-colors">Cookies</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h5 className="text-[10px] font-black uppercase tracking-[0.2em] text-[#0046FF] mb-10">Infraestrutura</h5>
|
||
|
|
<ul className="space-y-4 text-sm font-bold text-gray-400">
|
||
|
|
<li><a href="/contact" className="hover:text-white transition-colors">Contato</a></li>
|
||
|
|
<li><a href="/search" className="hover:text-white transition-colors">Busca</a></li>
|
||
|
|
<li><a href="/about" className="hover:text-white transition-colors">Sobre</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="pt-12 border-t border-white/5 text-center">
|
||
|
|
<p className="text-[10px] font-bold text-gray-600 uppercase tracking-widest">© {new Date().getFullYear()} SEO AUTHORITY LABS. ALL SYSTEMS OPERATIONAL.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="absolute top-0 right-0 text-[15rem] font-black text-white/[0.02] -rotate-12 transform translate-x-20 -translate-y-20 select-none pointer-events-none">AUTHORITY</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|