348 lines
25 KiB
TypeScript
348 lines
25 KiB
TypeScript
|
import { FormEvent } from 'react';
|
||
|
|
import { Search, Menu, Clock, ChefHat, Heart, Star, TrendingUp, Mail, Instagram, Bookmark, User, Share2, Globe } from 'lucide-react';
|
||
|
|
|
||
|
|
const DICT: Record<string, any> = {
|
||
|
|
pt: {
|
||
|
|
back: 'Voltar ao Início',
|
||
|
|
search: 'Ex: Bolo de Chocolate',
|
||
|
|
trending: 'BOMBANDO NA SEMANA',
|
||
|
|
sidebarAd: 'Sponsor MREC',
|
||
|
|
newsletterTitle: 'Assine e Receba!',
|
||
|
|
newsletterDesc: 'As 10 melhores receitas semanais.',
|
||
|
|
subscribeBtn: 'Quero Receber',
|
||
|
|
latest: 'NOVIDADES E DICAS',
|
||
|
|
popularWidget: 'TOP 5 HOJE',
|
||
|
|
readTime: 'MIN',
|
||
|
|
articles: [
|
||
|
|
{ id: '1', title: 'Bolo de Cenoura de Liquidificador Perfeito', excerpt: 'Aquela receita que nunca falha, com uma cobertura de chocolate que fica durinha e crocante. O favorito absoluto das tardes chuvosas no Brasil inteiro.', category: 'Bolos', time: '40', rating: '4.9', reviews: 1240 },
|
||
|
|
{ id: '2', title: 'Strogonoff de Frango Rápido e Cremoso', excerpt: 'O clássico almoço de domingo pronto em 20 minutos usando ingredientes da geladeira.', category: 'Prato Principal', time: '20', rating: '4.8', reviews: 856 },
|
||
|
|
{ id: '3', title: 'Pão de Queijo Mineiro Original', excerpt: 'Feito com polvilho azedo e muito queijo. Esqueça as massas prontas de saquinho hoje.', category: 'Salgados', time: '30', rating: '4.9', reviews: 2100 },
|
||
|
|
{ id: '4', title: 'Fricassê de Frango de Forno', excerpt: 'Uma travessa de puro conforto. Creme de milho sedoso com requeijão e muita batata.', category: 'Aves', time: '35', rating: '4.7', reviews: 432 },
|
||
|
|
{ id: '5', title: 'Pudim de Leite Condensado sem Furinhos', excerpt: 'O segredo da temperatura do forno e da calda de caramelo que não amarga.', category: 'Sobremesas', time: '60', rating: '5.0', reviews: 3405 },
|
||
|
|
{ id: '6', title: 'Torta de Frango de Liquidificador', excerpt: 'Massa super fofinha que derrete na boca com recheio bem molhadinho.', category: 'Tortas', time: '45', rating: '4.6', reviews: 670 },
|
||
|
|
{ id: '7', title: 'Escondidinho de Carne Seca com Mandioca', excerpt: 'Purê aveludado contrastando carne seca desfiada e queijo gratinado.', category: 'Carnes', time: '50', rating: '4.9', reviews: 920 },
|
||
|
|
{ id: '8', title: 'Mousse de Maracujá com 3 Ingredientes', excerpt: 'A sobremesa salvação dos preguiçosos. Feita usando suco concentrado.', category: 'Doces Fáceis', time: '10', rating: '4.5', reviews: 320 }
|
||
|
|
]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function PopularTheme({ posts = [], activeView = 'home', currentArticle, children }: { posts?: any[], activeView?: 'home' | 'article', currentArticle?: any, children?: React.ReactNode }) {
|
||
|
|
const lang = 'pt';
|
||
|
|
const ui = DICT[lang] || DICT['pt'];
|
||
|
|
|
||
|
|
// Mapeia posts reais do Supabase (gerados pela IA)
|
||
|
|
const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => {
|
||
|
|
return {
|
||
|
|
id: p.slug || p.id,
|
||
|
|
category: p.category_name || 'RECEITA',
|
||
|
|
title: p.title,
|
||
|
|
excerpt: p.excerpt,
|
||
|
|
time: '15',
|
||
|
|
rating: '4.9',
|
||
|
|
reviews: Math.floor(Math.random() * 2000) + 100,
|
||
|
|
img: p.image || `https://images.unsplash.com/photo-1546069901-ba9599a7e63c?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 || 'RECEITA',
|
||
|
|
time: '15',
|
||
|
|
rating: '4.9',
|
||
|
|
reviews: Math.floor(Math.random() * 2000) + 100,
|
||
|
|
img: currentArticle.image || `https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&q=80&w=800`
|
||
|
|
} : articlesToRender[0];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="popular-portal bg-[#F3F4F6] text-[#1F2937] min-h-screen font-sans">
|
||
|
|
|
||
|
|
{/* Top Banner (Thin Navbar) */}
|
||
|
|
<div className="bg-[#FB923C] text-orange-50 px-4 py-2 flex justify-between items-center text-xs font-bold tracking-wide">
|
||
|
|
<div className="flex items-center gap-6">
|
||
|
|
<span className="hidden sm:flex items-center gap-2 cursor-pointer hover:text-white transition-colors"><Instagram className="w-4 h-4"/> Instagram</span>
|
||
|
|
<span className="hidden sm:flex items-center gap-2 cursor-pointer hover:text-white transition-colors"><Share2 className="w-4 h-4"/> Redes Sociais</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex gap-6">
|
||
|
|
<a href="/login" className="hover:text-white transition-colors flex items-center gap-1"><User className="w-3 h-3"/> Mande Sua Receita</a>
|
||
|
|
<a href="/faq" className="hover:text-white transition-colors">Ajuda</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Main Massive Header */}
|
||
|
|
<header className="bg-white shadow-md sticky top-0 z-50">
|
||
|
|
<div className="max-w-[1240px] mx-auto px-4 sm:px-6 lg:px-8 h-[90px] flex items-center justify-between gap-8">
|
||
|
|
|
||
|
|
{/* Logo Space */}
|
||
|
|
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
||
|
|
<div className="w-14 h-14 bg-gradient-to-br from-[#F97316] to-[#EA580C] rounded-xl flex items-center justify-center shadow-inner group-hover:-translate-y-1 transition-transform">
|
||
|
|
<ChefHat className="w-8 h-8 text-white"/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-3xl font-black text-[#1F2937] tracking-tighter leading-none">Delícia<span className="text-[#EA580C]">Fácil</span></span>
|
||
|
|
<span className="text-[10px] font-bold text-gray-400 tracking-widest uppercase">Portal de Receitas</span>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
{/* Search Bar - Thick & Central */}
|
||
|
|
<form className="hidden lg:flex flex-1 max-w-2xl relative" action="/search">
|
||
|
|
<input name="q" type="text" placeholder={ui.search} className="w-full bg-[#F3F4F6] border-2 border-transparent px-6 py-4 rounded-full text-base font-medium outline-none focus:bg-white focus:border-[#FB923C] focus:ring-4 focus:ring-orange-100 transition-all placeholder:text-gray-400 shadow-inner" />
|
||
|
|
<button type="submit" className="absolute right-2 top-1/2 -translate-y-1/2 bg-[#EA580C] text-white p-3 rounded-full hover:bg-[#C2410C] transition-colors shadow-md">
|
||
|
|
<Search className="w-5 h-5"/>
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{/* Profile & Saves */}
|
||
|
|
<nav className="flex items-center gap-6 text-sm font-bold text-gray-600">
|
||
|
|
<a href="/saved" className="hidden sm:flex flex-col items-center gap-1 hover:text-[#EA580C] transition-colors">
|
||
|
|
<Bookmark className="w-6 h-6"/> <span className="text-[10px] uppercase">Salvos</span>
|
||
|
|
</a>
|
||
|
|
<button className="lg:hidden w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-gray-800 hover:bg-orange-100 hover:text-orange-600 transition-colors">
|
||
|
|
<Menu className="w-6 h-6"/>
|
||
|
|
</button>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
{activeView === 'home' ? (
|
||
|
|
<main className="max-w-[1240px] mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||
|
|
|
||
|
|
{/* Main Top Ad Unit (Leaderboard 970x90 or 970x250) */}
|
||
|
|
<div className="w-full bg-white h-[120px] rounded-2xl mb-10 flex flex-col items-center justify-center border-2 border-dashed border-gray-200 cursor-pointer overflow-hidden relative shadow-sm">
|
||
|
|
<span className="text-[10px] font-black uppercase text-gray-300 absolute top-2 right-4 tracking-widest">{ui.sidebarAd} // SUPER BANNER</span>
|
||
|
|
<h3 className="text-xl font-black text-gray-400 text-center px-4">ESPAÇO PUBLICITÁRIO - GELADEIRAS COM 50% OFF</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Master 70/30 Grid */}
|
||
|
|
<div className="grid lg:grid-cols-12 gap-8 lg:gap-12">
|
||
|
|
|
||
|
|
{/* LEFT COLUMN: 70% (The Content Beast) */}
|
||
|
|
<div className="lg:col-span-8 flex flex-col gap-10">
|
||
|
|
|
||
|
|
{/* Hero Feature 1 & 2 */}
|
||
|
|
<div className="flex items-center gap-3 border-b-4 border-gray-200 pb-2">
|
||
|
|
<TrendingUp className="w-8 h-8 text-[#EA580C]" />
|
||
|
|
<h2 className="text-3xl font-black text-gray-800 uppercase tracking-tighter">{ui.trending}</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid md:grid-cols-2 gap-6">
|
||
|
|
{articlesToRender.slice(0, 2).map((art: any, idx: number) => (
|
||
|
|
<a href={`/${art.id}`} key={art.id + idx} className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl border border-gray-100 cursor-pointer group flex flex-col transition-all duration-300">
|
||
|
|
{/* Rigid Aspect Ratio Box */}
|
||
|
|
<div className="w-full aspect-[4/3] relative overflow-hidden bg-gray-100">
|
||
|
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={art.title}/>
|
||
|
|
<div className="absolute top-4 left-4 bg-[#EA580C] text-white text-[10px] font-black uppercase px-3 py-1.5 rounded-full shadow-lg tracking-widest">
|
||
|
|
{art.category}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="p-6 flex flex-col flex-1">
|
||
|
|
<h3 className="text-2xl font-black text-gray-800 leading-tight mb-3 group-hover:text-[#EA580C] transition-colors">{art.title}</h3>
|
||
|
|
<div className="flex items-center justify-between text-xs font-bold text-gray-500 mt-auto pt-4 border-t border-gray-100">
|
||
|
|
<div className="flex items-center gap-1.5 bg-orange-50 text-orange-700 px-3 py-1.5 rounded-lg"><Clock className="w-4 h-4"/> {art.time} {ui.readTime}</div>
|
||
|
|
<div className="flex items-center gap-1 text-yellow-500"><Star className="w-4 h-4 fill-current"/> {art.rating} ({art.reviews})</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Latest Recipes Dense List */}
|
||
|
|
<div className="flex items-center gap-3 border-b-4 border-gray-200 pb-2 mt-8">
|
||
|
|
<h2 className="text-3xl font-black text-gray-800 uppercase tracking-tighter">{ui.latest}</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-6">
|
||
|
|
{articlesToRender.slice(2).map((art: any, i: number) => (
|
||
|
|
<a href={`/${art.id}`} key={art.id + i} className="flex flex-col sm:flex-row gap-6 bg-white p-4 sm:p-5 rounded-3xl shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 cursor-pointer group">
|
||
|
|
{/* Thumbnail container strict sizing */}
|
||
|
|
<div className="w-full sm:w-[260px] aspect-video sm:aspect-square rounded-2xl overflow-hidden shrink-0 relative bg-gray-100">
|
||
|
|
<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="flex-1 flex flex-col justify-center py-2 sm:pr-4">
|
||
|
|
<span className="text-[#EA580C] text-[10px] font-black uppercase tracking-widest mb-3 bg-orange-50 w-fit px-3 py-1 rounded-full">{art.category}</span>
|
||
|
|
<h3 className="text-2xl font-black text-gray-800 leading-tight mb-4 group-hover:text-[#EA580C] transition-colors">{art.title}</h3>
|
||
|
|
<p className="text-gray-500 text-sm font-medium mb-6 line-clamp-2">{art.excerpt}</p>
|
||
|
|
<div className="flex flex-wrap items-center gap-4 text-xs font-bold text-gray-500 mt-auto">
|
||
|
|
<span className="flex items-center gap-1 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-100"><Clock className="w-4 h-4 text-gray-400"/> {art.time} {ui.readTime}</span>
|
||
|
|
<span className="flex items-center gap-1"><Star className="w-4 h-4 fill-yellow-400 text-yellow-400"/> {art.rating}</span>
|
||
|
|
<span className="flex items-center gap-1"><Heart className="w-4 h-4 text-gray-300 group-hover:text-red-500 transition-colors"/> Favoritar</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Inline MREC Ad Mobile/Desktop */}
|
||
|
|
<div className="w-full h-[250px] bg-white rounded-3xl flex items-center justify-center border-2 border-dashed border-gray-200 mt-8 relative cursor-pointer shadow-sm">
|
||
|
|
<span className="text-[10px] font-black uppercase text-gray-300 block absolute top-2 right-4 tracking-widest">{ui.sidebarAd} // MREC IN-FEED</span>
|
||
|
|
<h3 className="text-xl font-black text-gray-300">PUBLICIDADE</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Solid Pagination Block */}
|
||
|
|
<div className="flex justify-center mt-6 mb-10">
|
||
|
|
<button className="bg-white border-2 border-[#EA580C] text-[#EA580C] font-black tracking-widest px-10 py-4 text-sm rounded-full shadow-lg hover:bg-[#EA580C] hover:text-white transition-all transform hover:-translate-y-1 uppercase">Mais Receitas</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* RIGHT SIDEBAR: 30% (The Money Maker) */}
|
||
|
|
<aside className="lg:col-span-4 flex flex-col gap-10">
|
||
|
|
|
||
|
|
{/* 1. Newsletter Box Extreme Contrast */}
|
||
|
|
<div className="bg-[#EA580C] p-8 sm:p-10 rounded-3xl text-center text-white relative overflow-hidden shadow-xl border-4 border-white">
|
||
|
|
<div className="absolute -top-10 -right-10 opacity-10 blur-sm"><ChefHat className="w-40 h-40"/></div>
|
||
|
|
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-6 backdrop-blur relative z-10"><Mail className="w-8 h-8" /></div>
|
||
|
|
<h3 className="text-3xl font-black mb-3 relative z-10 tracking-tight">{ui.newsletterTitle}</h3>
|
||
|
|
<p className="text-sm text-orange-100 mb-8 relative z-10 font-bold">{ui.newsletterDesc}</p>
|
||
|
|
<form className="flex flex-col gap-4 relative z-10">
|
||
|
|
<input type="email" required placeholder="Seu melhor e-mail" className="w-full px-5 py-4 rounded-xl text-gray-800 text-sm outline-none font-bold text-center shadow-inner"/>
|
||
|
|
<button type="submit" className="w-full bg-[#1F2937] text-white font-black px-5 py-4 rounded-xl shadow-lg hover:bg-black transition-colors uppercase tracking-widest text-sm">{ui.subscribeBtn}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 2. Banner Lateral Direita (Skyscraper 300x600) */}
|
||
|
|
<div className="w-full h-[600px] bg-white rounded-3xl flex flex-col items-center justify-center border-2 border-dashed border-gray-200 relative cursor-pointer shadow-sm group">
|
||
|
|
<span className="text-[9px] font-black uppercase text-gray-300 absolute top-2 right-4 tracking-widest">{ui.sidebarAd} // 300x600</span>
|
||
|
|
<h3 className="text-2xl font-black text-gray-400 text-center px-4 mb-6">PANELAS GOURMET<br/>OFERTA 300X600.</h3>
|
||
|
|
<button className="bg-blue-600 text-white font-bold px-8 py-3 text-xs rounded-full uppercase tracking-widest">VISITAR SITE</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 3. Mais Acessadas Widget with Ranking Style */}
|
||
|
|
<div className="bg-white p-8 rounded-3xl shadow-sm border border-gray-100 sticky top-28">
|
||
|
|
<div className="flex items-center gap-3 border-b-2 border-gray-100 pb-4 mb-6">
|
||
|
|
<Star className="w-6 h-6 text-[#EA580C]" />
|
||
|
|
<h3 className="font-black text-gray-800 uppercase tracking-tighter text-2xl">{ui.popularWidget}</h3>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col gap-8">
|
||
|
|
{articlesToRender.slice(4, 9).map((art: any, i: number) => {
|
||
|
|
if (!art) return null;
|
||
|
|
return (
|
||
|
|
<a href={`/${art.id}`} key={art.id + i} className="flex items-center gap-5 group cursor-pointer">
|
||
|
|
<div className="w-12 h-12 rounded-2xl bg-orange-50 border border-orange-100 font-black text-2xl text-[#EA580C] flex items-center justify-center shrink-0 shadow-sm">{i+1}</div>
|
||
|
|
<div className="w-20 h-20 rounded-xl overflow-hidden shrink-0 border border-gray-100">
|
||
|
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" alt={art.title} />
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col justify-center">
|
||
|
|
<h4 className="font-bold text-gray-800 leading-tight group-hover:text-[#EA580C] transition-colors text-sm line-clamp-2 mb-2">{art.title}</h4>
|
||
|
|
<div className="flex items-center gap-1 text-[10px] font-black text-gray-400 uppercase tracking-widest">
|
||
|
|
<Clock className="w-3 h-3"/> {art.time} {ui.readTime}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
)})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
) : (
|
||
|
|
/* --- ARTICLE VIEW --- */
|
||
|
|
<article className="max-w-[1000px] mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||
|
|
|
||
|
|
<div className="bg-white rounded-[3rem] shadow-sm border border-gray-100 overflow-hidden mb-16">
|
||
|
|
<div className="p-8 sm:p-12 text-center">
|
||
|
|
<a href="/" className="flex items-center justify-center gap-2 text-xs font-black uppercase text-gray-400 hover:text-[#EA580C] mb-10 transition-colors mx-auto w-fit bg-gray-50 px-4 py-2 rounded-full border border-gray-200">
|
||
|
|
← {ui.back}
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<span className="bg-[#EA580C] text-white px-4 py-1.5 rounded-md text-[10px] font-black uppercase tracking-widest mb-6 inline-block shadow-md">
|
||
|
|
{displayArticle.category}
|
||
|
|
</span>
|
||
|
|
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-black text-gray-800 leading-[1.05] mb-8 tracking-tighter">
|
||
|
|
{displayArticle.title}
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
{/* Author Box Horizontal & Rating stats */}
|
||
|
|
<div className="flex flex-wrap items-center justify-center gap-4 sm:gap-8 text-sm font-bold text-gray-600 bg-gray-50 p-4 rounded-2xl w-fit mx-auto border border-gray-100">
|
||
|
|
<div className="flex items-center gap-2 pr-4 border-r border-gray-300">
|
||
|
|
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=100&h=100&q=80" className="w-10 h-10 rounded-full border-2 border-white shadow-sm" alt="Author"/>
|
||
|
|
<span>Por <span className="text-[#EA580C]">Luiza</span></span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-1 pr-4 border-r border-gray-300"><Clock className="w-5 h-5 text-gray-400"/> {displayArticle.time} {ui.readTime}</div>
|
||
|
|
<div className="flex items-center gap-1"><Star className="w-5 h-5 fill-yellow-400 text-yellow-400"/> {displayArticle.rating} ({displayArticle.reviews})</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex justify-center gap-4 mt-8">
|
||
|
|
<button className="flex items-center gap-2 bg-[#1877F2] text-white font-bold text-xs uppercase tracking-widest px-6 py-3 rounded-xl shadow-md hover:bg-blue-700 transition">
|
||
|
|
<Share2 className="w-4 h-4"/> Compartilhar
|
||
|
|
</button>
|
||
|
|
<button className="flex items-center gap-2 bg-gray-100 text-gray-700 font-bold text-xs uppercase tracking-widest px-6 py-3 rounded-xl shadow-sm border border-gray-200 hover:bg-gray-200 transition">
|
||
|
|
<Bookmark className="w-4 h-4"/> Salvar / Imprimir
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="w-full aspect-video sm:aspect-[21/9] bg-gray-100 relative">
|
||
|
|
<img src={displayArticle.img} className="w-full h-full object-cover" alt={displayArticle.title} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid lg:grid-cols-12 gap-12">
|
||
|
|
|
||
|
|
{/* CONTENT LEFT (70%) */}
|
||
|
|
<div className="lg:col-span-8">
|
||
|
|
<div className="bg-white rounded-[2rem] p-8 sm:p-12 shadow-sm border border-gray-100 prose prose-lg prose-orange max-w-none text-gray-700 font-medium leading-relaxed prose-headings:font-black prose-headings:text-gray-800 prose-headings:tracking-tighter prose-a:text-[#EA580C] marker:text-[#EA580C] prose-img:rounded-3xl prose-img:shadow-md">
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* SIDEBAR RIGHT (30%) */}
|
||
|
|
<div className="lg:col-span-4 flex flex-col gap-10">
|
||
|
|
{/* Half-Page Ad Sticky */}
|
||
|
|
<div className="w-full h-[600px] bg-white rounded-3xl flex flex-col items-center justify-center border-2 border-dashed border-gray-200 relative cursor-pointer sticky top-24 shadow-sm">
|
||
|
|
<span className="text-[10px] font-black uppercase text-gray-300 absolute top-4 right-4 tracking-widest">{ui.sidebarAd} // 300x600</span>
|
||
|
|
<ChefHat className="w-20 h-20 text-gray-200 mb-6"/>
|
||
|
|
<h3 className="text-2xl font-black text-gray-300 text-center px-4 tracking-tighter uppercase">OFERTA DE<br/>LIQUIDIFICADORES.</h3>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Massive Chunky Corporate Footer */}
|
||
|
|
<footer className="mt-20 border-t-[8px] border-[#EA580C] bg-white pt-20 pb-10">
|
||
|
|
<div className="max-w-[1240px] mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-12 text-center md:text-left mb-16 border-b border-gray-100 pb-16">
|
||
|
|
<div className="md:col-span-2 flex flex-col items-center md:items-start">
|
||
|
|
<div className="flex items-center gap-3 mb-6">
|
||
|
|
<div className="w-12 h-12 bg-gradient-to-br from-[#F97316] to-[#EA580C] rounded-xl flex items-center justify-center shadow-inner">
|
||
|
|
<ChefHat className="w-6 h-6 text-white"/>
|
||
|
|
</div>
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-2xl font-black text-[#1F2937] tracking-tighter leading-none">Delícia<span className="text-[#EA580C]">Fácil</span></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-500 font-medium text-sm max-w-md">O portal de engenharia JNews simulado reescrevendo o livro de regras de densidade comercial no Brasil. Maior controle de padding, cantos massivos e contraste laranja gritante.</p>
|
||
|
|
<div className="flex gap-4 mt-8">
|
||
|
|
<a href="#" className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-[#EA580C] hover:text-white transition-colors"><Instagram className="w-5 h-5"/></a>
|
||
|
|
<a href="#" className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-[#EA580C] hover:text-white transition-colors"><Globe className="w-5 h-5"/></a>
|
||
|
|
<a href="#" className="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-[#EA580C] hover:text-white transition-colors"><Share2 className="w-5 h-5"/></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 className="font-black text-gray-800 uppercase tracking-widest text-sm mb-6">Explore</h4>
|
||
|
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||
|
|
<li><a href="/" className="hover:text-[#EA580C] transition-colors">Início</a></li>
|
||
|
|
<li><a href="/search" className="hover:text-[#EA580C] transition-colors">Receitas</a></li>
|
||
|
|
<li><a href="/login" className="hover:text-[#EA580C] transition-colors">Minha Conta</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h4 className="font-black text-gray-800 uppercase tracking-widest text-sm mb-6">Políticas</h4>
|
||
|
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||
|
|
<li><a href="/privacy" className="hover:text-[#EA580C] transition-colors">Privacidade</a></li>
|
||
|
|
<li><a href="/terms" className="hover:text-[#EA580C] transition-colors">Termos de Uso</a></li>
|
||
|
|
<li><a href="/contact" className="hover:text-[#EA580C] transition-colors">Contato</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center font-bold text-gray-400 text-xs tracking-widest uppercase">
|
||
|
|
© {new Date().getFullYear()} Delícia Fácil LLC. Todos os direitos reservados.
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|