193 lines
14 KiB
TypeScript
193 lines
14 KiB
TypeScript
|
import { FormEvent } from 'react';
|
||
|
|
import { Search, ChevronRight, Clock, Star, Heart, Menu, User, BookOpen, ShieldCheck, CheckCircle2, Globe, Share2, Instagram } from 'lucide-react';
|
||
|
|
|
||
|
|
const DICT: Record<string, any> = {
|
||
|
|
pt: {
|
||
|
|
back: 'Voltar ao Guia',
|
||
|
|
exclusive: 'CONTEÚDO EXCLUSIVO',
|
||
|
|
compare: 'COMPARAR CARTÕES',
|
||
|
|
readTime: 'MIN',
|
||
|
|
articles: [
|
||
|
|
{ id: '1', title: 'Melhores Cartões de Crédito com Cashback em 2026', excerpt: 'Analisamos 15 cartões para descobrir qual deles realmente coloca dinheiro de volta no seu bolso em cada compra.', category: 'Cartões', time: '8', rating: '4.9', img: 'https://images.unsplash.com/photo-1556742111-a301076d9d18?auto=format&fit=crop&q=80&w=800' },
|
||
|
|
{ id: '2', title: 'Como Sair do Vermelho: O Guia de 5 Passos', excerpt: 'Dicas práticas para renegociar dívidas e organizar seu orçamento mensal sem sofrimento.', category: 'Educação', time: '12', rating: '4.8', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800' },
|
||
|
|
{ id: '3', title: 'Investindo em CDB: Vale a pena com a taxa SELIC atual?', excerpt: 'Entenda como a variação dos juros afeta seus rendimentos em renda fixa e quando diversificar.', category: 'Investimentos', time: '10', rating: '5.0', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function CardsTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
||
|
|
const lang = 'pt';
|
||
|
|
const ui = DICT[lang] || DICT['pt'];
|
||
|
|
|
||
|
|
const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
|
||
|
|
id: p.slug || p.id,
|
||
|
|
category: p.category_name || 'FINANÇAS',
|
||
|
|
title: p.title,
|
||
|
|
excerpt: p.excerpt,
|
||
|
|
time: '8',
|
||
|
|
rating: '4.9',
|
||
|
|
img: p.image || `https://images.unsplash.com/photo-1556742111-a301076d9d18?auto=format&fit=crop&q=80&w=800&random=${i}`,
|
||
|
|
content: p.content,
|
||
|
|
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR')
|
||
|
|
})) : ui.articles;
|
||
|
|
|
||
|
|
const displayArticle = currentArticle ? {
|
||
|
|
...currentArticle,
|
||
|
|
id: currentArticle.slug || currentArticle.id,
|
||
|
|
category: currentArticle.category_name || 'FINANÇAS',
|
||
|
|
time: '8',
|
||
|
|
rating: '4.9',
|
||
|
|
img: currentArticle.image || `https://images.unsplash.com/photo-1556742111-a301076d9d18?auto=format&fit=crop&q=80&w=800`
|
||
|
|
} : articlesToRender[0];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="finance-portal bg-[#F5F8FA] text-[#0A2540] min-h-screen font-sans selection:bg-[#00CC88] selection:text-white">
|
||
|
|
|
||
|
|
{/* Header - Trust & Professional */}
|
||
|
|
<header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
|
||
|
|
<div className="max-w-[1280px] mx-auto px-6 h-[80px] flex justify-between items-center">
|
||
|
|
<a href="/" className="flex items-center gap-2 cursor-pointer group">
|
||
|
|
<div className="w-10 h-10 bg-[#00CC88] rounded-xl flex items-center justify-center transform -rotate-6 group-hover:rotate-0 transition-transform">
|
||
|
|
<ShieldCheck className="w-6 h-6 text-white"/>
|
||
|
|
</div>
|
||
|
|
<span className="text-2xl font-black text-[#0A2540] tracking-tighter">SMART<span className="text-[#00CC88]">WALLET</span></span>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<nav className="hidden lg:flex gap-10 text-xs font-black uppercase tracking-widest text-gray-500">
|
||
|
|
<a href="/category/cartoes" className="hover:text-[#00CC88] transition-colors">Cartões</a>
|
||
|
|
<a href="/category/investimentos" className="hover:text-[#00CC88] transition-colors">Investimentos</a>
|
||
|
|
<a href="/category/emprestimos" className="hover:text-[#00CC88] transition-colors">Empréstimos</a>
|
||
|
|
<a href="/ferramentas" className="hover:text-[#00CC88] transition-colors">Ferramentas</a>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="flex items-center gap-6">
|
||
|
|
<Search className="w-6 h-6 text-gray-400 cursor-pointer hover:text-[#00CC88] transition-colors" />
|
||
|
|
<button className="bg-[#0A2540] text-white text-[11px] font-black uppercase tracking-widest px-6 py-3 rounded-xl hover:bg-[#00CC88] transition-colors hidden sm:block">Entrar</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{activeView === 'home' ? (
|
||
|
|
<main className="max-w-[1280px] mx-auto px-6 py-12">
|
||
|
|
|
||
|
|
{/* Featured Hero Box */}
|
||
|
|
<a href={`/${articlesToRender[0].id}`} className="bg-white rounded-[3rem] shadow-xl border border-gray-100 overflow-hidden mb-20 flex flex-col lg:flex-row group cursor-pointer block">
|
||
|
|
<div className="lg:w-1/2 relative overflow-hidden">
|
||
|
|
<img src={articlesToRender[0].img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="Hero"/>
|
||
|
|
<div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent"></div>
|
||
|
|
</div>
|
||
|
|
<div className="lg:w-1/2 p-10 sm:p-16 flex flex-col justify-center">
|
||
|
|
<span className="text-[#00CC88] font-black text-[10px] uppercase tracking-widest mb-6 block border border-[#00CC88]/20 w-fit px-3 py-1 rounded-full">{ui.exclusive}</span>
|
||
|
|
<h1 className="text-4xl sm:text-5xl font-black leading-[1.05] tracking-tighter text-[#0A2540] mb-8 group-hover:text-[#00CC88] transition-colors">{articlesToRender[0].title}</h1>
|
||
|
|
<p className="text-lg text-[#425466] font-medium leading-relaxed mb-10">{articlesToRender[0].excerpt}</p>
|
||
|
|
<div className="flex items-center gap-6">
|
||
|
|
<div className="flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-widest"><Clock className="w-4 h-4"/> {articlesToRender[0].time} {ui.readTime}</div>
|
||
|
|
<div className="w-px h-4 bg-gray-200"></div>
|
||
|
|
<div className="flex items-center gap-1 text-xs font-bold text-[#0A2540]"><Star className="w-4 h-4 text-[#00CC88] fill-current"/> {articlesToRender[0].rating}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{/* Info Grid */}
|
||
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||
|
|
{articlesToRender.slice(1, 4).map((art: any, i: number) => (
|
||
|
|
<a href={`/${art.id}`} key={art.id + i} className="bg-white p-8 rounded-[2rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all group cursor-pointer flex flex-col">
|
||
|
|
<div className="w-full aspect-video rounded-2xl overflow-hidden mb-8 relative">
|
||
|
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={art.title}/>
|
||
|
|
</div>
|
||
|
|
<span className="text-[10px] font-black uppercase text-[#00CC88] tracking-widest mb-3 block">{art.category}</span>
|
||
|
|
<h3 className="text-2xl font-black tracking-tight text-[#0A2540] leading-tight mb-6 group-hover:underline decoration-2 underline-offset-4">{art.title}</h3>
|
||
|
|
<div className="mt-auto flex items-center justify-between border-t border-gray-100 pt-6">
|
||
|
|
<div className="flex items-center gap-2 text-[10px] font-bold text-gray-400 uppercase tracking-widest"><Clock className="w-4 h-4"/> {art.time} {ui.readTime}</div>
|
||
|
|
<ChevronRight className="w-5 h-5 text-gray-300 group-hover:text-[#00CC88] group-hover:translate-x-1 transition-all"/>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Trust Banner Ad */}
|
||
|
|
<div className="mt-24 w-full bg-[#0A2540] text-white p-12 sm:p-20 rounded-[3rem] text-center relative overflow-hidden group shadow-2xl">
|
||
|
|
<ShieldCheck className="w-64 h-64 absolute -right-20 -bottom-20 text-white/5 pointer-events-none group-hover:rotate-12 transition-transform duration-1000"/>
|
||
|
|
<span className="text-[10px] font-black uppercase tracking-[0.4em] text-[#00CC88] mb-8 block">Parceiro Certificado SmartWallet</span>
|
||
|
|
<h3 className="text-4xl sm:text-5xl font-black uppercase tracking-tighter mb-6 leading-none">Proteja seu patrimônio digital.</h3>
|
||
|
|
<p className="text-lg text-[#ADBDCC] font-medium max-w-xl mx-auto mb-10 leading-relaxed">Nossa tecnologia de criptografia militar garante que suas simulações de investimento nunca saiam do seu navegador.</p>
|
||
|
|
<button className="bg-[#00CC88] text-[#0A2540] px-12 py-4 text-xs font-black uppercase tracking-widest rounded-xl hover:bg-green-400 transition-colors shadow-lg">Começar Agora</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</main>
|
||
|
|
) : (
|
||
|
|
/* --- ARTICLE VIEW --- */
|
||
|
|
<article className="max-w-[1280px] mx-auto px-6 py-20">
|
||
|
|
<div className="max-w-[800px] mx-auto">
|
||
|
|
<a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#00CC88] hover:text-[#0A2540] transition-colors block mb-12 flex items-center gap-2">
|
||
|
|
← {ui.back}
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<header className="mb-16">
|
||
|
|
<span className="text-xs font-black uppercase tracking-widest text-gray-400 block mb-6">{displayArticle.category}</span>
|
||
|
|
<h1 className="text-5xl sm:text-7xl font-black leading-[1.05] tracking-tighter text-[#0A2540] mb-10">
|
||
|
|
{displayArticle.title}
|
||
|
|
</h1>
|
||
|
|
<div className="flex items-center gap-4 py-8 border-y border-gray-100 text-xs font-black uppercase tracking-widest text-[#425466]">
|
||
|
|
<div className="flex items-center gap-2"><CheckCircle2 className="w-5 h-5 text-[#00CC88]"/> Conteúdo Verificado</div>
|
||
|
|
<div className="ml-auto flex items-center gap-6 hidden sm:flex">
|
||
|
|
<span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {displayArticle.time} {ui.readTime}</span>
|
||
|
|
<span className="flex items-center gap-1 text-[#0A2540]"><Star className="w-4 h-4 text-[#00CC88] fill-current"/> {displayArticle.rating}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="prose prose-lg max-w-none text-[#425466] font-medium leading-[1.8] prose-headings:font-black prose-headings:text-[#0A2540] prose-headings:tracking-tighter prose-a:text-[#00CC88] prose-img:rounded-[2rem] prose-img:shadow-2xl">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Trust Footer */}
|
||
|
|
<footer className="bg-white border-t border-gray-200 pt-24 pb-12 font-sans">
|
||
|
|
<div className="max-w-[1280px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-gray-100 pb-20 mb-12">
|
||
|
|
|
||
|
|
<div className="md:col-span-2">
|
||
|
|
<div className="flex items-center gap-2 mb-6">
|
||
|
|
<div className="w-10 h-10 bg-[#00CC88] rounded-xl flex items-center justify-center transform -rotate-6">
|
||
|
|
<ShieldCheck className="w-6 h-6 text-white"/>
|
||
|
|
</div>
|
||
|
|
<span className="text-2xl font-black text-[#0A2540] tracking-tighter uppercase">SMART<span className="text-[#00CC88]">WALLET</span></span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-500 text-sm font-medium leading-relaxed max-w-sm mb-8">Arquitetura de portal financeiro focada em autoridade e confiança. Design premium inspirado nos maiores portais de investimento do mundo.</p>
|
||
|
|
<div className="flex gap-4">
|
||
|
|
<a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#00CC88] hover:text-white transition-colors border border-gray-100"><Instagram className="w-5 h-5"/></a>
|
||
|
|
<a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#00CC88] hover:text-white transition-colors border border-gray-100"><Globe className="w-5 h-5"/></a>
|
||
|
|
<a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#00CC88] hover:text-white transition-colors border border-gray-100"><Share2 className="w-5 h-5"/></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="font-black text-[#0A2540] uppercase tracking-widest text-xs mb-6">Políticas</h4>
|
||
|
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||
|
|
<li><a href="/privacy" className="hover:text-[#00CC88] transition-colors">Privacidade</a></li>
|
||
|
|
<li><a href="/terms" className="hover:text-[#00CC88] transition-colors">Termos de Uso</a></li>
|
||
|
|
<li><a href="/contact" className="hover:text-[#00CC88] transition-colors">Contato</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h4 className="font-black text-[#0A2540] uppercase tracking-widest text-xs mb-6">Produtos</h4>
|
||
|
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||
|
|
<li><a href="/search" className="hover:text-[#00CC88] transition-colors">Cartões</a></li>
|
||
|
|
<li><a href="/search" className="hover:text-[#00CC88] transition-colors">Investimentos</a></li>
|
||
|
|
<li><a href="/search" className="hover:text-[#00CC88] transition-colors">Simuladores</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-center font-black uppercase tracking-[0.4em] text-[9px] text-gray-400">
|
||
|
|
© {new Date().getFullYear()} SmartWallet Group. Built by Autoblog.
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|