222 lines
15 KiB
TypeScript
222 lines
15 KiB
TypeScript
import { FormEvent } from 'react';
|
|
import { Search, Menu, TrendingUp, TrendingDown, ChevronRight, PlayCircle, BarChart3, Briefcase, Globe, Lock, Clock, PieChart, Landmark, Globe2, User, Share2, Instagram } from 'lucide-react';
|
|
|
|
const DICT: Record<string, any> = {
|
|
pt: {
|
|
back: 'Voltar ao Canal',
|
|
latest: 'MERCADOS AGORA',
|
|
vip: 'CONTEÚDO PREMIUM',
|
|
readTime: 'MIN',
|
|
articles: [
|
|
{ id: '1', title: 'A FED Sinaliza Corte Surpresa nas Taxas de Juros', excerpt: 'Mercados globais reagem com otimismo após dados de inflação abaixo do esperado nos EUA.', category: 'Mercados', time: '5', img: 'https://images.unsplash.com/photo-1611974789855-9c2a0a223690?auto=format&fit=crop&q=80&w=800' },
|
|
{ id: '2', title: 'Fusões e Aquisições Atingem Recorde de $2 Trilhões', excerpt: 'Grandes bancos de investimento aceleram processos de IPO em diversos setores da economia.', category: 'Negócios', time: '8', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800' },
|
|
{ id: '3', title: 'O Futuro das Energias Renováveis no Brasil', excerpt: 'Investimentos massivos em hidrogênio verde colocam o país na vanguarda da economia limpa.', category: 'Energia', time: '12', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' }
|
|
]
|
|
}
|
|
};
|
|
|
|
export default function CorporateTheme({ 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 || 'NEGÓCIOS',
|
|
title: p.title,
|
|
excerpt: p.excerpt,
|
|
time: '5',
|
|
rating: '4.9',
|
|
img: p.image || `https://images.unsplash.com/photo-1611974789855-9c2a0a223690?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 || 'NEGÓCIOS',
|
|
time: '5',
|
|
rating: '4.9',
|
|
img: currentArticle.image || `https://images.unsplash.com/photo-1611974789855-9c2a0a223690?auto=format&fit=crop&q=80&w=800`
|
|
} : articlesToRender[0];
|
|
|
|
return (
|
|
<div className="corporate-news bg-[#F8F9FA] text-[#111111] min-h-screen font-serif selection:bg-[#0047AB] selection:text-white">
|
|
|
|
{/* Top Bar - Markets Ticker Style */}
|
|
<div className="bg-[#111] text-white py-2 px-6 overflow-hidden hidden sm:block">
|
|
<div className="max-w-[1400px] mx-auto flex items-center gap-8 animate-marquee whitespace-nowrap text-[10px] font-bold uppercase tracking-widest">
|
|
<span className="flex items-center gap-2">IBOV <span className="text-green-500">+1.25%</span></span>
|
|
<span className="flex items-center gap-2">S&P 500 <span className="text-green-500">+0.85%</span></span>
|
|
<span className="flex items-center gap-2">USD/BRL <span className="text-red-500">-0.45%</span></span>
|
|
<span className="flex items-center gap-2">BTC <span className="text-green-500">+2.15%</span></span>
|
|
<span className="flex items-center gap-2">OIL <span className="text-red-500">-1.10%</span></span>
|
|
<div className="w-px h-3 bg-gray-700"></div>
|
|
<span className="text-gray-400">CORPORATE TERMINAL ACTIVE v4.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Corporate Header */}
|
|
<header className="bg-white border-b-2 border-gray-100 py-6 sticky top-0 z-50 shadow-sm">
|
|
<div className="max-w-[1400px] mx-auto px-6 flex justify-between items-center">
|
|
<div className="flex items-center gap-6">
|
|
<Menu className="w-6 h-6 cursor-pointer lg:hidden"/>
|
|
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
|
<div className="w-10 h-10 bg-[#0047AB] rounded-lg flex items-center justify-center text-white shadow-lg">
|
|
<BarChart3 className="w-6 h-6"/>
|
|
</div>
|
|
<span className="text-2xl font-black tracking-tighter uppercase leading-none hidden sm:block">CORP<span className="text-[#0047AB]">FINANCE</span></span>
|
|
</a>
|
|
</div>
|
|
|
|
<nav className="hidden lg:flex gap-10 text-[11px] font-black uppercase tracking-widest text-gray-500">
|
|
<a href="/category/mercados" className="hover:text-[#0047AB] transition-colors">Mercados</a>
|
|
<a href="/category/negocios" className="hover:text-[#0047AB] transition-colors">Negócios</a>
|
|
<a href="/category/global" className="hover:text-[#0047AB] transition-colors">Global</a>
|
|
<a href="/terminal" className="hover:text-[#0047AB] transition-colors flex items-center gap-2"><Globe2 className="w-4 h-4"/> Terminal</a>
|
|
</nav>
|
|
|
|
<div className="flex items-center gap-6">
|
|
<Search className="w-6 h-6 text-gray-400 cursor-pointer hover:text-[#0047AB] transition-colors" />
|
|
<button className="bg-[#111] text-white text-[10px] font-black uppercase tracking-widest px-6 py-3 rounded hover:bg-[#0047AB] transition-colors">Acesso VIP</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{activeView === 'home' ? (
|
|
<main className="max-w-[1400px] mx-auto px-6 py-12">
|
|
|
|
{/* Main Financial Billboard */}
|
|
<div className="grid lg:grid-cols-12 gap-8 mb-20">
|
|
<a href={`/${articlesToRender[0].id}`} className="lg:col-span-8 group cursor-pointer block">
|
|
<div className="w-full aspect-video rounded-3xl overflow-hidden bg-gray-200 mb-8 relative shadow-2xl">
|
|
<img src={articlesToRender[0].img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="Billboard"/>
|
|
<div className="absolute top-6 left-6 bg-[#0047AB] text-white px-4 py-2 text-xs font-black uppercase tracking-widest shadow-lg">Urgente</div>
|
|
</div>
|
|
<h1 className="text-4xl sm:text-6xl font-black leading-[1.05] tracking-tighter text-[#111] mb-6 group-hover:text-[#0047AB] transition-colors">{articlesToRender[0].title}</h1>
|
|
<p className="text-xl text-gray-500 font-medium leading-relaxed max-w-3xl">{articlesToRender[0].excerpt}</p>
|
|
</a>
|
|
|
|
<div className="lg:col-span-4 flex flex-col gap-8">
|
|
<div className="flex items-center gap-2 border-b-2 border-[#111] pb-4 mb-2">
|
|
<TrendingUp className="w-6 h-6 text-[#0047AB]"/>
|
|
<h2 className="text-2xl font-black uppercase tracking-tighter">Análises do Dia</h2>
|
|
</div>
|
|
{[articlesToRender[1], articlesToRender[2]].map((art: any, i: number) => (
|
|
<a href={`/${art.id}`} key={art.id + i} className="group cursor-pointer border-b border-gray-200 pb-8 last:border-0">
|
|
<span className="text-[10px] font-black uppercase text-[#0047AB] tracking-widest mb-3 block">{art.category}</span>
|
|
<h3 className="text-2xl font-black leading-tight mb-4 group-hover:text-[#0047AB] transition-colors">{art.title}</h3>
|
|
<div className="flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-widest"><Clock className="w-4 h-4"/> {art.time} {ui.readTime}</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Corporate Grid with Dividers */}
|
|
<div className="grid md:grid-cols-3 gap-12 lg:gap-20 border-t-4 border-gray-100 pt-16">
|
|
{articlesToRender.slice(1, 4).map((art: any, i: number) => (
|
|
<a href={`/${art.id}`} key={art.id + i} className="group cursor-pointer flex flex-col">
|
|
<div className="w-full aspect-square rounded-2xl overflow-hidden mb-8 bg-gray-200 shadow-sm">
|
|
<img src={art.img} className="w-full h-full object-cover group-hover:opacity-80 transition-opacity" alt={art.title}/>
|
|
</div>
|
|
<h3 className="text-2xl font-black leading-tight mb-6 group-hover:underline decoration-4 underline-offset-4">{art.title}</h3>
|
|
<p className="text-gray-500 text-sm font-medium mb-6 line-clamp-3 leading-relaxed">{art.excerpt}</p>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-[#0047AB] mt-auto">Ler Análise Completa →</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
{/* Corporate Sponsor Banner */}
|
|
<div className="mt-24 w-full bg-[#111] text-white p-12 sm:p-20 rounded-[3rem] text-center group relative overflow-hidden shadow-2xl">
|
|
<div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=1200')] bg-cover bg-center opacity-10 group-hover:scale-105 transition-transform duration-1000"></div>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.4em] text-gray-500 mb-8 block">B2B Financial Services // SPONSOR</span>
|
|
<h3 className="text-3xl sm:text-4xl font-black uppercase tracking-tighter mb-6 leading-none">Gestão de Risco para Multinacionais.</h3>
|
|
<p className="text-lg text-gray-400 font-medium max-w-xl mx-auto mb-10 leading-relaxed">Conheça as novas diretrizes de compliance global que estão transformando o setor bancário europeu.</p>
|
|
<button className="bg-white text-black px-12 py-4 text-[10px] font-black uppercase tracking-widest rounded hover:bg-[#0047AB] hover:text-white transition-colors relative z-10 shadow-lg">Agendar Consulta</button>
|
|
</div>
|
|
|
|
</main>
|
|
) : (
|
|
/* --- ARTICLE VIEW --- */
|
|
<article className="max-w-[1400px] mx-auto px-6 py-20 bg-white">
|
|
<div className="max-w-[900px] mx-auto">
|
|
<a href="/" className="text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-[#0047AB] transition-colors block mb-12">
|
|
← {ui.back}
|
|
</a>
|
|
|
|
<header className="mb-16">
|
|
<span className="text-xs font-black uppercase tracking-widest text-[#0047AB] block mb-6">{displayArticle.category}</span>
|
|
<h1 className="text-5xl sm:text-7xl font-black leading-[1.05] tracking-tighter text-[#111] mb-10">
|
|
{displayArticle.title}
|
|
</h1>
|
|
<p className="text-2xl text-gray-500 font-medium leading-relaxed italic border-l-4 border-[#0047AB] pl-8 my-10">
|
|
{displayArticle.excerpt}
|
|
</p>
|
|
<div className="flex items-center gap-6 py-8 border-y border-gray-100 text-xs font-black uppercase tracking-widest text-gray-500">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gray-200 rounded-full border border-gray-300"></div>
|
|
<div>
|
|
<span className="block text-[#111]">Por Analista Sênior</span>
|
|
<span className="block text-[8px] opacity-70">Editoria de Mercados Globais</span>
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto flex items-center gap-8 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-2"><Lock className="w-4 h-4"/> Acesso Assinante</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="prose prose-lg max-w-none font-serif text-gray-800 leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-[#111] prose-a:text-[#0047AB] prose-img:rounded-[2rem] prose-img:shadow-2xl">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)}
|
|
|
|
{/* Corporate Professional Footer */}
|
|
<footer className="bg-[#111] text-white pt-24 pb-12 font-serif border-t-[10px] border-[#0047AB]">
|
|
<div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-gray-800 pb-20 mb-12">
|
|
|
|
<div className="md:col-span-2">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<div className="w-10 h-10 bg-[#0047AB] rounded-lg flex items-center justify-center text-white">
|
|
<BarChart3 className="w-6 h-6"/>
|
|
</div>
|
|
<span className="text-2xl font-black tracking-tighter uppercase text-white">CORP<span className="text-gray-500">FINANCE</span></span>
|
|
</div>
|
|
<p className="text-gray-500 text-sm font-medium leading-relaxed max-w-sm mb-8">O portal de notícias para quem decide. Layout corporativo denso, focado em credibilidade e autoridade absoluta em mercados de capitais.</p>
|
|
<div className="flex gap-4">
|
|
<a href="#" className="w-10 h-10 rounded bg-white/5 flex items-center justify-center hover:bg-white hover:text-black transition-colors"><Instagram className="w-5 h-5"/></a>
|
|
<a href="#" className="w-10 h-10 rounded bg-white/5 flex items-center justify-center hover:bg-white hover:text-black transition-colors"><Globe className="w-5 h-5"/></a>
|
|
<a href="#" className="w-10 h-10 rounded bg-white/5 flex items-center justify-center hover:bg-white hover:text-black transition-colors"><Share2 className="w-5 h-5"/></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-black uppercase tracking-widest text-xs mb-8 text-gray-400">Políticas</h4>
|
|
<ul className="space-y-4 text-sm font-bold 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 de Uso</a></li>
|
|
<li><a href="/cookies" className="hover:text-white transition-colors">Uso de Cookies</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 className="font-black uppercase tracking-widest text-xs mb-8 text-gray-400">Canal</h4>
|
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
|
<li><a href="/search" className="hover:text-white transition-colors">Últimas Notícias</a></li>
|
|
<li><a href="/terminal" className="hover:text-white transition-colors">Terminal ao Vivo</a></li>
|
|
<li><a href="/login" className="hover:text-white transition-colors">Assine Já</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="text-center font-black uppercase tracking-[0.4em] text-[9px] text-gray-700">
|
|
© {new Date().getFullYear()} Corporate Finance Media S.A. - Powered by Autoblog.
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|