286 lines
18 KiB
TypeScript
286 lines
18 KiB
TypeScript
import { Hexagon, Send, Layers, Zap, MessageCircle, BarChart3, ChevronRight, Flame, Share2, Globe, Instagram } from 'lucide-react';
|
|
|
|
const DICT: Record<string, any> = {
|
|
pt: {
|
|
back: '← Voltar ao Hub',
|
|
login: 'Conectar',
|
|
subscribeBtn: 'Inscrever',
|
|
sidebarAd: 'ESPAÇO PATROCINADO',
|
|
popularData: 'DADOS ON-CHAIN',
|
|
trending: 'EM ALTA:',
|
|
picks: 'ESCOLHA DOS EDITORES',
|
|
feedTitle: 'FLUXO DE DADOS PRINCIPAL',
|
|
categoryWeb3: 'WEB 3.0 & DAOS',
|
|
categoryAI: 'IA & COMPUTAÇÃO'
|
|
}
|
|
};
|
|
|
|
export default function NeonTheme({ posts, activeView = 'home', currentArticle, children }: { posts: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
|
const ui = DICT['pt'];
|
|
|
|
const articlesToRender = posts.map(p => ({
|
|
id: p.slug,
|
|
title: p.data.title || p.slug,
|
|
excerpt: p.data.excerpt || 'Resumo do artigo...',
|
|
tag: p.data.category || 'NeuroTech',
|
|
date: p.data.date ? new Date(p.data.date).toLocaleDateString('pt-BR') : 'Hoje'
|
|
}));
|
|
|
|
const displayArticle = currentArticle ? {
|
|
id: currentArticle.slug,
|
|
title: currentArticle.data.title || currentArticle.slug,
|
|
excerpt: currentArticle.data.excerpt || '',
|
|
tag: currentArticle.data.category || 'NeuroTech',
|
|
date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje'
|
|
} : articlesToRender[0];
|
|
|
|
const trendTags = ['Polkadot', 'Stable Diffusion 5', 'AGI timelines', 'Bitcoin $120k', 'Neuralink Trial'];
|
|
|
|
return (
|
|
<div className="neon-scroll-container bg-[#080314] text-white min-h-full font-sans overflow-y-auto selection:bg-pink-500 selection:text-white relative">
|
|
<div className="pointer-events-none fixed inset-0 z-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10" />
|
|
<div className="pointer-events-none fixed top-[-20%] left-[-10%] w-[50%] h-[50%] bg-pink-600 rounded-full blur-[150px] opacity-20 mix-blend-screen" />
|
|
<div className="pointer-events-none fixed top-[20%] right-[-10%] w-[50%] h-[50%] bg-cyan-600 rounded-full blur-[150px] opacity-20 mix-blend-screen" />
|
|
|
|
{/* Ticker / Topbar */}
|
|
<div className="relative z-50 h-10 border-b border-white/10 bg-black/80 flex items-center overflow-hidden whitespace-nowrap">
|
|
<div className="flex animate-[pulse_10s_ease-in-out_infinite] px-6 text-[10px] font-mono font-bold text-cyan-400 uppercase tracking-widest items-center gap-6">
|
|
<span className="text-white opacity-50 px-2 bg-pink-500">{ui.trending}</span>
|
|
{trendTags.map((t, i) => (
|
|
<span key={i} className="hover:text-white transition-colors">// {t}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<header className="sticky top-0 z-40 bg-[#080314]/80 backdrop-blur-xl border-b border-white/10">
|
|
<div className="max-w-[1400px] mx-auto px-6 h-20 flex items-center justify-between">
|
|
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
|
<Hexagon className="w-8 h-8 text-pink-500 group-hover:rotate-90 transition-transform duration-500" />
|
|
<span className="text-3xl font-black tracking-tighter uppercase blur-[0.5px]">NEXUS</span>
|
|
</a>
|
|
|
|
<nav className="hidden lg:flex gap-8 text-xs font-bold uppercase tracking-widest">
|
|
<a href="/" className="text-cyan-400 border-b-2 border-cyan-400 h-[80px] flex items-center drop-shadow-[0_0_8px_rgba(34,211,238,0.8)]">Metaverse</a>
|
|
<a href="/" className="hover:text-pink-400 h-[80px] flex items-center transition-colors">Protocols</a>
|
|
<a href="/login" className="hover:text-pink-400 h-[80px] flex items-center transition-colors">AUTH_NODE</a>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<button className="hidden sm:inline-block border border-cyan-500/50 bg-cyan-500/10 hover:bg-cyan-500/30 text-cyan-400 text-xs font-bold uppercase tracking-widest px-4 py-2 hover:shadow-[0_0_15px_rgba(34,211,238,0.5)] transition-all">
|
|
{ui.login}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{activeView === 'home' ? (
|
|
<main className="relative z-10 max-w-[1400px] mx-auto px-6 py-8">
|
|
|
|
{/* Ad Space Leaderboard */}
|
|
<div className="w-full h-[90px] bg-black/50 border border-pink-500/30 flex items-center justify-center mb-10 overflow-hidden relative group cursor-pointer">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-pink-500/20 to-cyan-500/20 blur-md"></div>
|
|
<span className="relative z-10 text-[10px] uppercase font-bold text-pink-400 tracking-widest">{ui.sidebarAd} // ADS_MATRIX</span>
|
|
</div>
|
|
|
|
{/* Densified Hero */}
|
|
<section className="grid lg:grid-cols-12 gap-6 mb-12">
|
|
|
|
{/* Main Big Article */}
|
|
<article className="lg:col-span-6 relative aspect-square sm:aspect-video lg:aspect-auto group cursor-pointer border border-white/10 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(236,72,153,0.1)]">
|
|
<a href={`/${articlesToRender[0]?.id}`} className="block w-full h-full">
|
|
<img src="https://images.unsplash.com/photo-1614729939124-032f0b56c9ce?auto=format&fit=crop&q=80&w=1200" alt="Space" className="w-full h-full object-cover mix-blend-screen opacity-70 group-hover:scale-105 transition-transform duration-700"/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#080314] via-[#080314]/60 to-transparent flex flex-col justify-end p-8">
|
|
<span className="bg-pink-500 text-white text-[10px] font-black uppercase tracking-widest px-3 py-1 w-fit mb-4">{articlesToRender[0]?.tag}</span>
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-black leading-tight text-white mb-2 group-hover:text-cyan-300 transition-colors">{articlesToRender[0]?.title}</h2>
|
|
<p className="text-cyan-100/60 line-clamp-2 mb-4">{articlesToRender[0]?.excerpt}</p>
|
|
<div className="flex items-center gap-3 text-[10px] uppercase font-bold tracking-widest text-pink-400">
|
|
<Zap className="w-3 h-3"/> <span>{articlesToRender[0]?.date}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
|
|
{/* 2 Smaller Articles Top/Bottom */}
|
|
<div className="lg:col-span-4 flex flex-col gap-6">
|
|
{articlesToRender.slice(1, 3).map((art: any) => (
|
|
<article key={art.id} className="flex-1 relative group cursor-pointer border border-white/10 rounded-xl overflow-hidden bg-black/40 hover:bg-white/5 transition-all">
|
|
<a href={`/${art.id}`} className="block h-full p-6">
|
|
<span className="text-cyan-400 text-[10px] font-black uppercase tracking-widest mb-2 border border-cyan-400/30 w-fit px-2 py-0.5 rounded">{art.tag}</span>
|
|
<h3 className="text-xl font-black leading-tight text-white mb-2 group-hover:text-pink-400 transition-colors">{art.title}</h3>
|
|
<p className="text-white/50 text-xs line-clamp-2">{art.excerpt}</p>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
|
|
{/* Tech Specs / Tokens Widget */}
|
|
<aside className="lg:col-span-2 hidden lg:flex flex-col gap-6">
|
|
<div className="flex-1 bg-black/60 border border-white/10 rounded-xl p-4 flex flex-col">
|
|
<h4 className="text-[10px] text-white/40 uppercase font-black tracking-widest mb-4 border-b border-white/10 pb-2 flex items-center gap-2"><BarChart3 className="w-3 h-3"/> {ui.popularData}</h4>
|
|
<div className="flex flex-col gap-3 flex-1 justify-center">
|
|
<div className="flex justify-between items-center text-xs font-mono">
|
|
<span className="text-white">ETH</span> <span className="text-green-400">+4.2%</span>
|
|
</div>
|
|
<div className="flex justify-between items-center text-xs font-mono">
|
|
<span className="text-white">SOL</span> <span className="text-red-400">-1.8%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
{/* 70/30 Split layout Feed / Sidebar */}
|
|
<div className="grid lg:grid-cols-12 gap-10">
|
|
|
|
{/* MAIN COLUMN (70%) */}
|
|
<div className="lg:col-span-8 flex flex-col gap-16">
|
|
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-6 border-b border-pink-500/30 pb-2">
|
|
<Layers className="w-5 h-5 text-pink-500" />
|
|
<h3 className="text-xl font-black uppercase tracking-tight text-white">{ui.categoryWeb3}</h3>
|
|
</div>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-6">
|
|
{articlesToRender.slice(3, 5).map((art: any) => (
|
|
<article key={art.id} className="group cursor-pointer bg-white/[0.02] border border-white/5 rounded-xl overflow-hidden hover:bg-white/[0.05] hover:border-pink-500/50 transition-all">
|
|
<a href={`/${art.id}`} className="block">
|
|
<div className="h-40 overflow-hidden relative">
|
|
<img src={`https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=600&random=${art.id}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-60 mix-blend-screen" alt={art.title}/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#080314] to-transparent"></div>
|
|
</div>
|
|
<div className="p-6 -mt-8 relative z-10">
|
|
<h4 className="text-lg font-black leading-tight text-white mb-2 group-hover:text-pink-400 transition-colors drop-shadow-md">{art.title}</h4>
|
|
<p className="text-white/40 text-xs mb-4 line-clamp-2">{art.excerpt}</p>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Cyber Banner Inline Ad */}
|
|
<div className="w-full h-[150px] bg-black border border-cyan-500/30 rounded-xl flex items-center justify-center relative overflow-hidden group cursor-pointer">
|
|
<div className="relative z-10 flex flex-col items-center">
|
|
<span className="bg-cyan-500 text-black px-2 text-[9px] font-black uppercase tracking-widest mb-2">{ui.sidebarAd} // 728x90</span>
|
|
<span className="text-cyan-400 blur-[0.5px] font-black tracking-widest text-lg group-hover:blur-none transition-all">HARDWARE_NODE_OFF 50%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-6 border-b border-cyan-500/30 pb-2">
|
|
<Zap className="w-5 h-5 text-cyan-400" />
|
|
<h3 className="text-xl font-black uppercase tracking-tight text-white">{ui.categoryAI}</h3>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
{articlesToRender.slice(5).map((art: any, i: number) => (
|
|
<article key={art.id} className="group cursor-pointer pb-4 border-b border-white/5 last:border-0 items-center hover:bg-white/[0.02] p-2 rounded-lg transition-colors">
|
|
<a href={`/${art.id}`} className="flex gap-6">
|
|
<div className="w-24 h-24 sm:w-32 sm:h-24 rounded-lg overflow-hidden shrink-0 border border-white/10 relative">
|
|
<img src={`https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=400&random=${i}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform opacity-70" alt="Thumb"/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<span className="text-[9px] uppercase tracking-widest text-cyan-400 font-bold mb-1 block">{art.tag}</span>
|
|
<h4 className="text-md sm:text-lg font-black leading-tight text-white group-hover:text-cyan-300 transition-colors">{art.title}</h4>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
{/* CYBER SIDEBAR (30%) */}
|
|
<aside className="lg:col-span-4 flex flex-col gap-8">
|
|
|
|
{/* Popular Widget */}
|
|
<div className="bg-gradient-to-b from-white/[0.05] to-transparent p-6 border border-t-cyan-400 border-x-white/5 border-b-white/5 rounded-xl">
|
|
<h4 className="text-sm font-black uppercase tracking-widest mb-6 text-cyan-400 flex items-center gap-2"><Flame className="w-4 h-4"/> {ui.picks}</h4>
|
|
<div className="flex flex-col gap-6">
|
|
{articlesToRender.slice(0, 3).map((art: any, idx: number) => (
|
|
<a href={`/${art.id}`} key={art.id} className="flex gap-4 group cursor-pointer">
|
|
<div className="w-10 h-10 rounded-full bg-cyan-500/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400 font-black text-lg group-hover:bg-cyan-400 group-hover:text-black transition-colors shrink-0">0{idx+1}</div>
|
|
<div>
|
|
<h5 className="font-bold text-sm leading-tight text-white group-hover:text-cyan-300 transition-colors">{art.title}</h5>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Newsletter Sci-Fi Box */}
|
|
<div className="bg-black/60 border border-pink-500/50 p-6 rounded-xl relative overflow-hidden">
|
|
<Send className="w-8 h-8 text-pink-400 mb-4" />
|
|
<h4 className="text-lg font-black uppercase mb-2">Protocol Sync</h4>
|
|
<form className="flex flex-col gap-3 relative z-10">
|
|
<input type="email" placeholder="jack@grid.net" className="w-full bg-black/80 border border-white/20 rounded-lg px-4 py-3 text-white font-mono text-sm outline-none focus:border-pink-500/50" required/>
|
|
<button type="submit" className="w-full bg-pink-500 hover:bg-pink-400 text-white font-black uppercase text-xs tracking-widest p-3 rounded-lg transition-colors">SYNC</button>
|
|
</form>
|
|
</div>
|
|
|
|
</aside>
|
|
</div>
|
|
</main>
|
|
) : (
|
|
/* --- ARTICLE VIEW --- */
|
|
<article className="relative z-10 bg-[#080314]">
|
|
<div className="max-w-4xl mx-auto px-6 py-12">
|
|
<a href="/" className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-cyan-400 hover:text-white mb-12 transition-colors inline-block">
|
|
{ui.back}
|
|
</a>
|
|
|
|
<header className="mb-12 text-center md:text-left">
|
|
<span className="inline-block px-3 py-1 bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 rounded-lg text-[10px] font-black uppercase tracking-widest mb-6">
|
|
Deep Dive // {displayArticle.tag}
|
|
</span>
|
|
<h1 className="text-4xl md:text-6xl font-black leading-tight mb-6 drop-shadow-[0_0_20px_rgba(34,211,238,0.3)] text-white">
|
|
{displayArticle.title}
|
|
</h1>
|
|
</header>
|
|
|
|
<div className="flex gap-10">
|
|
<div className="hidden lg:block w-[160px] shrink-0">
|
|
<div className="sticky top-32 w-full h-[400px] bg-black/50 border border-pink-500/30 rounded-xl flex items-center justify-center flex-col cursor-pointer">
|
|
<span className="text-pink-500 px-2 text-[9px] font-black uppercase tracking-widest mb-2 writing-vertical-rl">{ui.sidebarAd}</span>
|
|
</div>
|
|
</div>
|
|
<div className="prose prose-invert prose-lg max-w-none flex-1 prose-headings:font-black prose-headings:text-white prose-p:text-violet-100/90 prose-p:leading-relaxed prose-a:text-cyan-400 hover:prose-a:text-pink-400 transition-colors">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
{/* Cyber Footer */}
|
|
<footer className="relative z-10 border-t border-white/10 bg-black/60 mt-10 pt-16 pb-8">
|
|
<div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-12 mb-12 text-left">
|
|
<div className="md:col-span-2">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Hexagon className="w-6 h-6 text-pink-500" />
|
|
<span className="text-2xl font-black tracking-tighter uppercase blur-[0.5px]">NEXUS</span>
|
|
</div>
|
|
<p className="text-white/40 max-w-sm mb-6 text-sm">Emitting protocols since 2026.</p>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-xs uppercase tracking-widest mb-4 text-cyan-400">Legal</h4>
|
|
<ul className="space-y-3 text-sm text-white/50 font-mono">
|
|
<li><a href="/privacy" className="hover:text-pink-400 transition-colors">Privacidade</a></li>
|
|
<li><a href="/terms" className="hover:text-pink-400 transition-colors">Termos</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-xs uppercase tracking-widest mb-4 text-cyan-400">Social</h4>
|
|
<div className="flex gap-4">
|
|
<a href="#" className="hover:text-pink-400 transition-colors"><Globe className="w-5 h-5"/></a>
|
|
<a href="#" className="hover:text-pink-400 transition-colors"><Share2 className="w-5 h-5"/></a>
|
|
<a href="#" className="hover:text-pink-400 transition-colors"><Instagram className="w-5 h-5"/></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|