Initial commit
This commit is contained in:
commit
1daf44809a
55 changed files with 13827 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# build output
|
||||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
# jetbrains setting folder
|
||||
.idea/
|
||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.vscode/launch.json
vendored
Normal file
11
.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
43
README.md
Normal file
43
README.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# Astro Starter Kit: Minimal
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
10
astro.config.mjs
Normal file
10
astro.config.mjs
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import react from '@astrojs/react';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [react(), tailwind()]
|
||||
});
|
||||
6854
package-lock.json
generated
Normal file
6854
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "users-marciobevervanso-downloads-autoblog-2-template-astro-base",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^5.0.4",
|
||||
"@astrojs/tailwind": "^6.0.2",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"astro": "^4.16.14",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"tailwindcss": "^3.4.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.19"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
193
src/components/themes/AuthorityTheme.tsx
Normal file
193
src/components/themes/AuthorityTheme.tsx
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
192
src/components/themes/CardsTheme.tsx
Normal file
192
src/components/themes/CardsTheme.tsx
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
222
src/components/themes/CorporateTheme.tsx
Normal file
222
src/components/themes/CorporateTheme.tsx
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
269
src/components/themes/CryptoTheme.tsx
Normal file
269
src/components/themes/CryptoTheme.tsx
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Search, Menu, TrendingUp, TrendingDown, ChevronRight, Activity, Zap, Box, Hexagon, BarChart2, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar ao Tracker',
|
||||
live: 'DADOS AO VIVO',
|
||||
trending: 'EM ALTA',
|
||||
readTime: 'MIN',
|
||||
articles: [
|
||||
{ id: '1', title: 'Bitcoin Rompe Barreira dos $70k com ETF Spot', excerpt: 'Entrada massiva de capital institucional acelera a escassez on-chain antes do halving.', category: 'Bitcoin', time: '4', img: 'https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Ethereum 2.0: O Impacto do Sharding na Escalabilidade', excerpt: 'Como a nova atualização promete reduzir as taxas de gas em até 90% para usuários finais.', category: 'Ethereum', time: '7', img: 'https://images.unsplash.com/photo-1622737133809-d95047b90223?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'Regulação de Cripto na UE: O que Muda com a MiCA', excerpt: 'As novas diretrizes europeias que podem servir de modelo para o resto do mundo financeiro.', category: 'Regulação', time: '10', img: 'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function CryptoTheme({ 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 || 'CRYPTO',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '4',
|
||||
rating: '4.9',
|
||||
img: p.image || `https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?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 || 'CRYPTO',
|
||||
time: '4',
|
||||
rating: '4.9',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1518544801976-3e159e50e5bb?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
const COIN_DATA = [
|
||||
{ rank: 1, name: 'Bitcoin', symbol: 'BTC', price: '$68,432.12', h24: -1.2, d7: +5.4, cap: '$1,342B', vol: '$42B', color: '#F7931A' },
|
||||
{ rank: 2, name: 'Ethereum', symbol: 'ETH', price: '$3,842.50', h24: +2.1, d7: +1.2, cap: '$462B', vol: '$18B', color: '#627EEA' },
|
||||
{ rank: 3, name: 'Tether', symbol: 'USDT', price: '$1.00', h24: 0.0, d7: 0.0, cap: '$110B', vol: '$65B', color: '#26A17B' },
|
||||
{ rank: 4, name: 'Solana', symbol: 'SOL', price: '$145.22', h24: -4.5, d7: +12.8, cap: '$64B', vol: '$4.2B', color: '#14F195' },
|
||||
{ rank: 5, name: 'BNB', symbol: 'BNB', price: '$588.40', h24: +0.8, d7: -2.3, cap: '$88B', vol: '$1.2B', color: '#F3BA2F' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="crypto-terminal bg-[#0B0E14] text-[#EAECEF] min-h-screen font-sans selection:bg-[#FCD535] selection:text-black">
|
||||
|
||||
{/* Crypto Header - Terminal Style */}
|
||||
<header className="bg-[#181A20] border-b border-[#2B3139] sticky top-0 z-50 shadow-2xl">
|
||||
<div className="max-w-[1440px] mx-auto px-6 h-[72px] flex justify-between items-center">
|
||||
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
||||
<div className="w-8 h-8 bg-[#FCD535] rounded-md flex items-center justify-center text-[#181A20] group-hover:rotate-45 transition-transform">
|
||||
<Hexagon className="w-5 h-5 fill-[#181A20]"/>
|
||||
</div>
|
||||
<span className="text-xl font-black text-[#EAECEF] tracking-tighter uppercase">COIN<span className="text-[#FCD535]">RADAR</span></span>
|
||||
</a>
|
||||
|
||||
<div className="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest text-[#848E9C]">
|
||||
<a href="/category/mercado" className="hover:text-white transition-colors">Mercado</a>
|
||||
<a href="/category/bitcoin" className="hover:text-white transition-colors">Bitcoin</a>
|
||||
<a href="/category/ethereum" className="hover:text-white transition-colors">Ethereum</a>
|
||||
<a href="/swap" className="hover:text-[#FCD535] transition-colors">Swap Beta</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden sm:flex items-center bg-[#2B3139] rounded-lg px-4 py-2 border border-transparent focus-within:border-[#FCD535] transition-all">
|
||||
<Search className="w-4 h-4 text-[#848E9C]"/>
|
||||
<input type="text" placeholder="Buscar ativo..." className="bg-transparent border-none outline-none pl-3 text-[11px] font-bold text-white w-32"/>
|
||||
</div>
|
||||
<button className="bg-[#FCD535] text-[#181A20] text-[10px] font-black uppercase tracking-widest px-6 py-2.5 rounded hover:bg-white transition-colors">Connect</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1440px] mx-auto px-6 py-10 pb-32">
|
||||
|
||||
<div className="grid lg:grid-cols-12 gap-8 mb-12">
|
||||
{/* Main Hero News Area */}
|
||||
<div className="lg:col-span-8 flex flex-col gap-6">
|
||||
<a href={`/${articlesToRender[0].id}`} className="w-full bg-gradient-to-br from-[#181A20] to-[#2B3139] rounded-2xl border border-[#2B3139] p-8 lg:p-12 group cursor-pointer relative overflow-hidden shadow-2xl block">
|
||||
<div className="absolute -right-20 -bottom-20 opacity-5 group-hover:scale-110 transition-transform duration-1000">
|
||||
<Hexagon className="w-96 h-96 text-[#FCD535]"/>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<span className="bg-[#FCD535] text-[#181A20] px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-6 inline-block">{ui.live}</span>
|
||||
<h1 className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tighter mb-8 group-hover:text-[#FCD535] transition-colors">{articlesToRender[0].title}</h1>
|
||||
<p className="text-[#848E9C] text-lg font-medium leading-relaxed max-w-2xl">{articlesToRender[0].excerpt}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
{[articlesToRender[1], articlesToRender[2]].map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="bg-[#181A20] rounded-2xl border border-[#2B3139] p-6 cursor-pointer hover:border-[#FCD535]/50 transition-colors group flex flex-col h-full shadow-lg block">
|
||||
<div className="w-full aspect-video rounded-xl overflow-hidden mb-6 bg-[#0B0E14]">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={art.title}/>
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-white leading-tight mb-4">{art.title}</h3>
|
||||
<div className="mt-auto flex items-center gap-2 text-[10px] font-bold text-[#848E9C] uppercase tracking-widest">
|
||||
<Activity className="w-3 h-3 text-[#0ECB81]"/> {art.category} • {art.time} {ui.readTime}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Live Trending Sidebar */}
|
||||
<div className="lg:col-span-4 flex flex-col gap-8">
|
||||
<div className="bg-[#181A20] rounded-2xl border border-[#2B3139] p-6 shadow-2xl">
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-[#2B3139]">
|
||||
<h2 className="text-white font-black text-lg flex items-center gap-2"><Zap className="w-5 h-5 text-[#FCD535] fill-current"/> {ui.trending}</h2>
|
||||
<button className="text-[10px] font-black text-[#FCD535] uppercase hover:underline">View All</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
{COIN_DATA.map((coin) => (
|
||||
<div key={coin.symbol} className="flex items-center justify-between group cursor-pointer">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center font-black text-sm text-white border border-[#2B3139]" style={{backgroundColor: `${coin.color}20`, borderColor: `${coin.color}40`}}>
|
||||
{coin.symbol[0]}
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-black text-white">{coin.name}</h4>
|
||||
<p className="text-[10px] font-bold text-[#848E9C]">{coin.symbol}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-sm font-black text-white">{coin.price}</div>
|
||||
<div className={`text-[10px] font-bold ${coin.h24 >= 0 ? 'text-[#0ECB81]' : 'text-[#F6465D]'}`}>
|
||||
{coin.h24 >= 0 ? '+' : ''}{coin.h24}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar Banner Ad */}
|
||||
<div className="w-full bg-[#FCD535] rounded-2xl p-8 text-center group cursor-pointer hover:bg-white transition-colors shadow-2xl">
|
||||
<Box className="w-16 h-16 text-[#181A20] mx-auto mb-6 group-hover:scale-110 transition-transform"/>
|
||||
<h3 className="text-2xl font-black text-[#181A20] tracking-tighter uppercase mb-4 leading-none">Cold Wallet Hub.</h3>
|
||||
<p className="text-[#181A20]/70 text-xs font-bold mb-6">Proteja suas chaves privadas com a melhor custódia do mercado.</p>
|
||||
<button className="bg-[#181A20] text-white w-full py-3 rounded-lg font-black uppercase text-[10px] tracking-widest shadow-xl">Comprar Agora</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Crypto Stats Table Row */}
|
||||
<div className="bg-[#181A20] rounded-2xl border border-[#2B3139] shadow-2xl overflow-hidden">
|
||||
<div className="p-6 border-b border-[#2B3139] flex items-center justify-between">
|
||||
<h2 className="text-white font-black text-lg">Top Market Capitalization</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left">
|
||||
<thead className="bg-[#0B0E14]/50 text-[#848E9C] text-[10px] font-black uppercase tracking-widest">
|
||||
<tr>
|
||||
<th className="px-6 py-4">Rank</th>
|
||||
<th className="px-6 py-4">Name</th>
|
||||
<th className="px-6 py-4 text-right">Price</th>
|
||||
<th className="px-6 py-4 text-right">24h %</th>
|
||||
<th className="px-6 py-4 text-right hidden md:table-cell">Market Cap</th>
|
||||
<th className="px-6 py-4 text-right hidden lg:table-cell">Volume (24h)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-[#2B3139]">
|
||||
{COIN_DATA.map((coin) => (
|
||||
<tr key={coin.rank} className="hover:bg-[#2B3139]/30 transition-colors cursor-pointer group">
|
||||
<td className="px-6 py-4 text-[#848E9C] font-bold">{coin.rank}</td>
|
||||
<td className="px-6 py-4 flex items-center gap-3">
|
||||
<span className="font-black text-white">{coin.name}</span>
|
||||
<span className="text-[#848E9C] font-bold">{coin.symbol}</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right font-black text-white">{coin.price}</td>
|
||||
<td className={`px-6 py-4 text-right font-black ${coin.h24 >= 0 ? 'text-[#0ECB81]' : 'text-[#F6465D]'}`}>
|
||||
{coin.h24 >= 0 ? '+' : ''}{coin.h24}%
|
||||
</td>
|
||||
<td className="px-6 py-4 text-right font-bold text-[#B7BDC6] hidden md:table-cell">{coin.cap}</td>
|
||||
<td className="px-6 py-4 text-right font-bold text-[#B7BDC6] hidden lg:table-cell">{coin.vol}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1000px] mx-auto px-6 py-16 pb-32 bg-[#0B0E14]">
|
||||
<div className="max-w-[800px] mx-auto">
|
||||
<a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#848E9C] hover:text-[#FCD535] transition-colors block mb-12">
|
||||
← {ui.back}
|
||||
</a>
|
||||
|
||||
<header className="mb-16">
|
||||
<span className="bg-[#2B3139] text-[#FCD535] px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-6 inline-block border border-[#FCD535]/10">{displayArticle.category}</span>
|
||||
<h1 className="text-4xl sm:text-6xl font-black leading-[1.1] tracking-tighter text-white mb-10 italic">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
<p className="text-xl text-[#848E9C] font-medium leading-relaxed border-l-4 border-[#FCD535] pl-8 my-10">
|
||||
{displayArticle.excerpt} Cobertura on-chain completa por especialistas do terminal Radar.
|
||||
</p>
|
||||
<div className="flex items-center gap-8 py-8 border-y border-[#2B3139] text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
|
||||
<div className="flex items-center gap-2"><Zap className="w-4 h-4 text-[#FCD535]"/> Breaking News</div>
|
||||
<div className="ml-auto flex items-center gap-6 hidden sm:flex">
|
||||
<span className="flex items-center gap-2"><Activity className="w-4 h-4 text-[#0ECB81]"/> Live Feed</span>
|
||||
<span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {displayArticle.time} {ui.readTime}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="prose prose-lg prose-invert max-w-none text-[#B7BDC6] font-medium leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-white prose-a:text-[#FCD535] prose-img:rounded-[2rem] prose-img:border prose-img:border-[#2B3139] prose-blockquote:border-[#FCD535] prose-blockquote:bg-[#181A20]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Crypto Terminal Footer */}
|
||||
<footer className="bg-[#181A20] text-[#EAECEF] pt-24 pb-12 font-sans border-t border-[#2B3139]">
|
||||
<div className="max-w-[1440px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-[#2B3139] 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-[#FCD535] rounded-lg flex items-center justify-center text-[#181A20]">
|
||||
<Hexagon className="w-6 h-6 fill-[#181A20]"/>
|
||||
</div>
|
||||
<span className="text-2xl font-black tracking-tighter uppercase text-white">COIN<span className="text-[#FCD535]">RADAR</span></span>
|
||||
</div>
|
||||
<p className="text-[#848E9C] text-sm font-medium leading-relaxed max-w-sm mb-8">Terminal de dados e inteligência de mercado. Focado em densidade de informação e ferramentas para traders de alta frequência.</p>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-lg bg-[#2B3139] flex items-center justify-center hover:bg-[#FCD535] hover:text-black transition-colors"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-[10px] text-[#444] mb-8">Políticas</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-[#848E9C]">
|
||||
<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="/disclaimer" className="hover:text-white transition-colors">Aviso Legal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-[10px] text-[#444] mb-8">Produtos</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-[#848E9C]">
|
||||
<li><a href="/search" className="hover:text-white transition-colors">Market Cap</a></li>
|
||||
<li><a href="/search" className="hover:text-white transition-colors">Novas Listagens</a></li>
|
||||
<li><a href="/swap" className="hover:text-white transition-colors">Exchange Hub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center font-black uppercase tracking-[0.4em] text-[8px] text-[#2B3139]">
|
||||
© {new Date().getFullYear()} CoinRadar Terminal Hub. Built by Autoblog.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
323
src/components/themes/CyberTheme.tsx
Normal file
323
src/components/themes/CyberTheme.tsx
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Terminal, Crosshair, Code, ShieldAlert, Wifi, Cpu, Eye, LockKeyhole, FolderLock, Database, MapPin, ChevronRight, Share, TriangleAlert, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: '/cd root_dir',
|
||||
heroTitle: 'O ZERO-DAY.LOG',
|
||||
heroDesc: 'Registros restritos distribuídos sobre infosec, darknets e vulnerabilidades catastróficas L0.',
|
||||
btnDecrypt: 'DECRYPT_FILE()',
|
||||
btnTerminal: 'ACCESS_TERM()',
|
||||
feedTitle: 'SYS.LOGS_STREAM',
|
||||
subscribeText: 'Canal de transmissão de exploits prioridade vermelha.',
|
||||
subscribeBtn: 'INIT_HANDSHAKE',
|
||||
sidebarAd: 'S.P.O.N.S.O.R',
|
||||
adDesc: 'VPN DESCENTRALIZADA OFUSCADA',
|
||||
statusMonitor: 'SYS_NODE_MONITOR',
|
||||
articles: [
|
||||
{ id: '1', tag: 'ZERO-DAY', title: 'Exploit encontrado na rede principal Ethereum de custódia', excerpt: 'Nossa equipe documentou um exploit RCE crítico na infraestrutura nativa.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
||||
{ id: '2', tag: 'CRYPTO', title: 'Criptografia Quântica: A quebra absoluta', excerpt: 'Algoritmos de Shor não são mais teóricos. Atualize seus bancos com urgência antes do Q4.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
|
||||
{ id: '3', tag: 'HARDWARE', title: 'Engenharia Reversa no SDK de Drones de Entrega Aérea', excerpt: 'Anatomia do firmware que controla a nova frota autônoma. O bypass é letalmente simples.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
|
||||
{ id: '4', tag: 'WEB3', title: 'Como carteiras frias vazam seeds vitais via voltagem', excerpt: 'Chips tidos como seguros falham sob injeção de pólos extremos térmicos na placa principal.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
|
||||
{ id: '5', tag: 'A.I.', title: 'Envenenamento de LLMs por injeção estocástica reversa', excerpt: 'Hackeando os bancos de treinamento massivos através de padrões de grid em dados de satélite.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
|
||||
{ id: '6', tag: 'MALWARE', title: 'Ransomware trava totalmente malhas ferroviárias do leste', excerpt: 'Eles pediram Monero limpo, mas a chave de desencriptação queimou.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
|
||||
{ id: '7', tag: 'PRIVACY', title: 'O Fim da rede Tor como conhecemos', excerpt: 'Entidades interceptaram tráfego no source e adquiriram 60% dos nodes finais globais.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
||||
{ id: '8', tag: 'NETWORK', title: 'DNS over HTTPS está vazando metadata de proxy', excerpt: 'Você não está invisível. A estrutura central reporta dados indiretos se mal configurada.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' },
|
||||
]
|
||||
},
|
||||
en: {
|
||||
back: '/cd root_dir',
|
||||
heroTitle: 'THE ZERO-DAY.LOG',
|
||||
heroDesc: 'Restricted distributed logs on infosec, darknets, and catastrophic L0 vulnerabilities.',
|
||||
btnDecrypt: 'DECRYPT_FILE()',
|
||||
btnTerminal: 'ACCESS_TERM()',
|
||||
feedTitle: 'SYS.LOGS_STREAM',
|
||||
subscribeText: 'Red priority exploit transmission channel.',
|
||||
subscribeBtn: 'INIT_HANDSHAKE',
|
||||
sidebarAd: 'S.P.O.N.S.O.R',
|
||||
adDesc: 'OBFUSCATED DECENTRALIZED VPN',
|
||||
statusMonitor: 'SYS_NODE_MONITOR',
|
||||
articles: [
|
||||
{ id: '1', tag: 'ZERO-DAY', title: 'Zero-Day Exploit found on core custodial network', excerpt: 'Our analytical team documented a critical RCE exploit within standard core architecture.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
||||
{ id: '2', tag: 'CRYPTO', title: 'Quantum Cryptography: The absolute breakage event', excerpt: 'Shor algorithms dropped theoretical constraints. Patch databases rapidly before Q4 starts.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
|
||||
{ id: '3', tag: 'HARDWARE', title: 'Reverse Engineering autonomous Aerial Drone SDKs', excerpt: 'Firmware anatomy bypass for commercial delivery fleets. The code breach is lethally basic.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
|
||||
{ id: '4', tag: 'WEB3', title: 'How premium cold wallets leak seeds via voltage pinging', excerpt: 'Secure chips fail hard when injected with extreme thermal polls straight onto the mainboard.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
|
||||
{ id: '5', tag: 'A.I.', title: 'Poisoning core LLMs via reverse stochastic injections', excerpt: 'Hacking massive training banks by tricking satellite grid rendering artifacts constantly.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
|
||||
{ id: '6', title: 'Industrial Ransomware entirely halts eastern rail grids', tag: 'MALWARE', excerpt: 'Ransom requested in clean Monero, but the global decryption array burned to ash.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
|
||||
{ id: '7', tag: 'PRIVACY', title: 'The total collapse of the Tor network as known', excerpt: 'Black entities intercepted core traffic routing and purchased 60% of all exit nodes.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
||||
{ id: '8', tag: 'NETWORK', title: 'Your DNS over HTTPS setup is leaking proxy data logs', excerpt: 'Invisibility is broken. Central scaffolding inherently leaks telemetry if left out of bounds.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' }
|
||||
]
|
||||
},
|
||||
es: {
|
||||
back: '/cd root_dir',
|
||||
heroTitle: 'EL ZERO-DAY.LOG',
|
||||
heroDesc: 'Registros distribuidos restringidos sobre infosec y vulnerabilidades catastróficas.',
|
||||
btnDecrypt: 'DESCIFRAR_ARCHIVO()',
|
||||
btnTerminal: 'ACCESO_TERM()',
|
||||
feedTitle: 'FLUJO.SYS_LOGS',
|
||||
subscribeText: 'Canal de distribución de exploits, prioridad roja.',
|
||||
subscribeBtn: 'INICIAR_HANDSHAKE',
|
||||
sidebarAd: 'P.A.T.R.O.C.I.N.A.D.O.R',
|
||||
adDesc: 'VPN DESCENTRALIZADA OFUSCADA',
|
||||
statusMonitor: 'MONITOR_DE_NODOS_SYS',
|
||||
articles: [
|
||||
{ id: '1', tag: 'ZERO-DAY', title: 'Exploit crítico en la red principal de custodia', excerpt: 'El equipo documentó un exploit RCE mortal en la infraestructura estándar nativa.', date: '14:02:00', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
||||
{ id: '2', tag: 'CRYPTO', title: 'Criptografía Cuántica: La ruptura absoluta inminente', excerpt: 'Los algoritmos de Shor ya no son una simple teoría. Se requiere un parcheo inmediato global.', date: '09:15:33', author: 'DrH4ck', sev: 'HIGH' },
|
||||
{ id: '3', tag: 'HARDWARE', title: 'Ingeniería Inversa letal a Drones comerciales', excerpt: 'El bypass de la anatomía del firmware muestra fallas operativas extremas en el SDK.', date: '22:40:11', author: 'R00T_ME', sev: 'MED' },
|
||||
{ id: '4', tag: 'WEB3', title: 'Wallets físicas filtrando frases semilla en tensión alta', excerpt: 'Los micro chips hiper seguros fallaron ante ataques eléctricos violentos a placa madre.', date: '03:10:00', author: 'Ghost', sev: 'CRITICAL' },
|
||||
{ id: '5', tag: 'A.I.', title: 'Corrompiendo LLMs mediante ataques estocásticos', excerpt: 'Dañando bases de datos de entrenamiento vía inyecciones matemáticas satelitales.', date: '11:40:22', author: 'Cipher', sev: 'HIGH' },
|
||||
{ id: '6', tag: 'MALWARE', title: 'Ransomware severo paraliza vías férreas de logística', excerpt: 'Miles de millones pedidos en Monero. La llave maestra de descifrado simplemente se borró.', date: '16:05:00', author: '0xVoid', sev: 'HIGH' },
|
||||
{ id: '7', tag: 'PRIVACY', title: 'El fin inevitable de anonimato total en red Tor', excerpt: 'Entes han adquirido el control total subyacente interceptando todos los nodos finales.', date: '08:32:10', author: 'SysAdmin_01', sev: 'CRITICAL' },
|
||||
{ id: '8', tag: 'NETWORK', title: 'Ajuste de DNS over HTTPS filtra meta datos severos', excerpt: 'No eres invisible en internet. La estructura troncal reporta huellas de IP y tracking.', date: '01:10:05', author: 'R00T_ME', sev: 'LOW' },
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function CyberTheme({ 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) ou usa o Fallback padrão
|
||||
const articlesToRender = posts && posts.length > 0 ? posts.map((p, i) => ({
|
||||
id: p.slug || p.id,
|
||||
tag: 'SYSTEM',
|
||||
title: p.data?.title || p.title,
|
||||
excerpt: p.data?.excerpt || p.excerpt,
|
||||
date: p.data?.date ? new Date(p.data.date).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) : '00:00:00',
|
||||
author: p.data?.author || 'AI_NODE',
|
||||
sev: i % 2 === 0 ? 'CRITICAL' : 'HIGH',
|
||||
content: p.body || p.content
|
||||
})) : ui.articles;
|
||||
|
||||
// Se houver um artigo atual passado por rota dinâmica
|
||||
const article = currentArticle ? {
|
||||
id: currentArticle.slug,
|
||||
tag: 'SYSTEM',
|
||||
title: currentArticle.data?.title,
|
||||
excerpt: currentArticle.data?.excerpt,
|
||||
date: currentArticle.data?.date ? new Date(currentArticle.data.date).toLocaleTimeString('pt-BR') : '00:00:00',
|
||||
author: currentArticle.data?.author || 'AI_NODE',
|
||||
sev: 'CRITICAL'
|
||||
} : null;
|
||||
|
||||
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
|
||||
e.preventDefault();
|
||||
window.alert(`[SYS_PROMPT] ${msg}`);
|
||||
};
|
||||
|
||||
const severityColor = (sev: string) => {
|
||||
switch (sev) {
|
||||
case 'CRITICAL': return 'text-red-500 border-red-500/50 bg-red-500/10';
|
||||
case 'HIGH': return 'text-orange-500 border-orange-500/50 bg-orange-500/10';
|
||||
case 'MED': return 'text-yellow-500 border-yellow-500/50 bg-yellow-500/10';
|
||||
default: return 'text-[#00ff9d] border-[#00ff9d]/50 bg-[#00ff9d]/10';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="cyber-scroll-container bg-[#020202] text-[#00ff9d] min-h-screen font-['Space_Mono'] overflow-hidden flex flex-col selection:bg-[#00ff9d] selection:text-black shadow-[inset_0_0_150px_rgba(0,255,157,0.03)]">
|
||||
|
||||
{/* Triple-Column Application Dashboard Shell */}
|
||||
|
||||
{/* Global Application Header */}
|
||||
<header className="h-14 border-b border-[#00ff9d]/20 bg-[#020202] flex items-center justify-between px-4 z-40 relative">
|
||||
<div className="absolute top-0 right-0 left-0 h-[1px] bg-gradient-to-r from-transparent via-[#00ff9d]/50 to-transparent opacity-50"></div>
|
||||
<a href="/" className="flex items-center gap-4 cursor-pointer">
|
||||
<div className="bg-[#00ff9d] text-black w-8 h-8 flex items-center justify-center font-black">
|
||||
<Terminal className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="font-bold tracking-[0.2em] uppercase hidden sm:block">CYBER_SYS_CORE v9.4</span>
|
||||
</a>
|
||||
<div className="flex items-center gap-6 text-xs text-[#00ff9d]/50 font-bold uppercase tracking-widest">
|
||||
<span className="hidden md:flex items-center gap-2 animate-pulse"><Wifi className="w-3 h-3 text-red-500"/> IP MASKED</span>
|
||||
<span className="hidden md:inline">UPTIME: 99.42%</span>
|
||||
<a href="/login" className="border border-[#00ff9d]/30 hover:bg-[#00ff9d] hover:text-black transition-colors px-4 py-1.5 flex items-center gap-2"><LockKeyhole className="w-3 h-3"/> AUTH</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main 3 Column Flex Layer */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
|
||||
{/* LEFT COLUMN: NAVIGATION TREE (15-20%) hidden on mobile */}
|
||||
<aside className="w-64 border-r border-[#00ff9d]/20 hidden lg:flex flex-col bg-[#050505] overflow-y-auto">
|
||||
<div className="p-4 border-b border-[#00ff9d]/20 font-bold text-[10px] tracking-widest uppercase text-[#00ff9d]/50">
|
||||
SYSTEM_DIRECTORIES
|
||||
</div>
|
||||
<nav className="p-4 flex flex-col gap-1 text-xs">
|
||||
<a href="/" className="flex items-center gap-2 text-white font-bold p-2 bg-[#00ff9d]/10 border border-[#00ff9d]/30 cursor-pointer"><FolderLock className="w-4 h-4 text-[#00ff9d]"/> /root</a>
|
||||
<div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> exploits/</div>
|
||||
<div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> payloads/</div>
|
||||
<div className="ml-6 flex items-center gap-2 text-[#00ff9d]/70 p-2 cursor-pointer hover:bg-white/5" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><span className="text-[#00ff9d]/30 text-xs">|_</span> hardware_schematics/</div>
|
||||
<div className="flex items-center gap-2 text-white font-bold p-2 hover:bg-white/5 cursor-pointer mt-4" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><Database className="w-4 h-4 text-[#00ff9d]"/> /archives_locked</div>
|
||||
<div className="flex items-center gap-2 text-white font-bold p-2 hover:bg-white/5 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Nav Node')}><Code className="w-4 h-4 text-[#00ff9d]"/> /tools_bin</div>
|
||||
</nav>
|
||||
{/* Ad Widget in Tree */}
|
||||
<div className="mt-auto p-4 m-4 border border-red-500/30 bg-red-500/5 cursor-pointer group" onClick={(e) => handleSimulatedAction(e, 'Banner Sponsor Click')}>
|
||||
<span className="text-[10px] text-red-500 font-bold tracking-widest uppercase block mb-2 opacity-50">{ui.sidebarAd} // TXT</span>
|
||||
<h4 className="text-sm font-bold text-red-400 group-hover:text-white transition-colors">{ui.adDesc}</h4>
|
||||
<span className="text-[9px] uppercase tracking-widest text-[#00ff9d]/50 block mt-2">> Run secure.sh</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* CENTER COLUMN: MAIN FEED (60%) scrollable */}
|
||||
<main className="flex-1 bg-[#020202] relative overflow-y-auto w-full custom-cyber-scrollbar">
|
||||
<div className="max-w-[1000px] mx-auto p-4 sm:p-8">
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<>
|
||||
{/* Terminal Header Banner */}
|
||||
<div className="border border-[#00ff9d]/40 bg-[#00ff9d]/5 p-6 sm:p-10 relative overflow-hidden mb-10">
|
||||
<div className="absolute -right-20 -bottom-20 opacity-10"><Terminal className="w-96 h-96"/></div>
|
||||
<span className="bg-[#00ff9d] text-black px-2 py-0.5 text-[10px] font-bold uppercase tracking-widest block w-fit mb-6">GLOBAL_BROADCAST</span>
|
||||
<h1 className="text-3xl sm:text-5xl font-black mb-4 uppercase tracking-tighter text-white drop-shadow-[0_0_10px_rgba(0,255,157,0.5)]">{ui.heroTitle}</h1>
|
||||
<p className="text-[#00ff9d]/70 text-sm max-w-lg mb-8 leading-relaxed relative z-10">{ui.heroDesc}</p>
|
||||
<div className="flex gap-4 relative z-10">
|
||||
<a href={`/${articlesToRender[0]?.id}`} className="bg-[#00ff9d] text-black px-6 py-2.5 font-bold text-[11px] tracking-widest hover:bg-white transition-colors uppercase block">{ui.btnDecrypt}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Dense Log Feed */}
|
||||
<div>
|
||||
<h3 className="text-sm font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-3 border-b border-[#00ff9d]/20 pb-4">
|
||||
<Terminal className="w-5 h-5"/> {ui.feedTitle}
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-col border-l border-[#00ff9d]/20 ml-2">
|
||||
{articlesToRender.map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id} className="block group cursor-pointer">
|
||||
<article className="relative pl-6 sm:pl-10 pb-10 last:pb-0">
|
||||
{/* Timeline Node */}
|
||||
<div className="absolute left-[-5px] top-1 w-[9px] h-[9px] bg-[#020202] border-2 border-[#00ff9d] rounded-full group-hover:bg-[#00ff9d] group-hover:shadow-[0_0_10px_rgba(0,255,157,1)] transition-all"></div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-[10px] uppercase font-bold tracking-widest mb-3">
|
||||
<span className="text-[#00ff9d]/50">{art.date}</span>
|
||||
<span className="text-[#00ff9d]/20">///</span>
|
||||
<span className="text-white bg-[#00ff9d]/20 px-2 py-0.5 border border-[#00ff9d]/30">{art.tag}</span>
|
||||
<span className={`px-2 py-0.5 border ${severityColor(art.sev)}`}>SEV: {art.sev}</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-white mb-2 leading-tight group-hover:text-[#00ff9d] transition-colors">{art.title}</h2>
|
||||
<p className="text-sm text-[#00ff9d]/60 mb-4">{art.excerpt}</p>
|
||||
|
||||
<div className="text-[10px] font-mono opacity-0 group-hover:opacity-100 transition-opacity text-[#00ff9d]">
|
||||
[EXECUTE] grep "full_log" /sys/logs/id_{art.id}
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* Article View inside Center Column */
|
||||
<article>
|
||||
<a href="/" className="mb-10 inline-block text-[10px] font-bold tracking-widest uppercase border border-[#00ff9d]/30 bg-[#00ff9d]/5 px-4 py-2 hover:bg-[#00ff9d] hover:text-black transition-colors">
|
||||
{ui.back}
|
||||
</a>
|
||||
|
||||
<div className="mb-12">
|
||||
<div className="flex flex-wrap gap-4 text-[10px] font-black uppercase tracking-widest mb-4">
|
||||
<span className={`border px-3 py-1 ${severityColor(currentArticle.sev)}`}>SEVERITY: {currentArticle.sev}</span>
|
||||
<span className="border border-[#00ff9d]/30 text-[#00ff9d] bg-[#00ff9d]/5 px-3 py-1">AUTHOR_ID: {currentArticle.author}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-black text-white leading-tight mb-8 drop-shadow-[0_0_15px_rgba(0,255,157,0.3)]">{currentArticle.title}</h1>
|
||||
|
||||
<div className="border-t border-[#00ff9d]/20 py-4 flex justify-between tracking-widest text-[10px] font-mono text-[#00ff9d]/50 uppercase">
|
||||
<span>TIMESTAMP: {currentArticle.date}</span>
|
||||
<span className="flex items-center gap-1 cursor-pointer hover:text-white" onClick={(e) => handleSimulatedAction(e, 'Share log via Onion router')}><Share className="w-3 h-3"/> TRANSMIT VIA ONION</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert prose-lg max-w-none prose-p:text-[#00ff9d]/80 prose-p:font-['Space_Mono'] prose-p:leading-relaxed prose-headings:font-bold prose-headings:text-white prose-headings:uppercase prose-headings:tracking-widest marker:text-[#00ff9d] prose-img:border prose-img:border-[#00ff9d]/30 prose-img:rounded-none">
|
||||
|
||||
<div className="bg-[#00ff9d]/5 border-l-4 border-[#00ff9d] p-6 text-xl text-white font-bold leading-normal mb-10">
|
||||
{currentArticle.excerpt}
|
||||
</div>
|
||||
|
||||
{/* Injecting Ad block into article flow dynamically (always before content) */}
|
||||
<div className="my-10 border border-[#00ff9d]/30 bg-black p-6 flex flex-col items-center justify-center text-center cursor-pointer hover:border-[#00ff9d] transition-colors" onClick={(e) => handleSimulatedAction(e, 'MREC Article Ad')}>
|
||||
<span className="text-[10px] tracking-[0.2em] font-bold text-[#00ff9d]/40 mb-2">{ui.sidebarAd} // MREC SCRIPT</span>
|
||||
<span className="font-mono text-sm border-b border-dashed border-[#00ff9d]/30 pb-1 text-white">SPONSORED_TERMINAL_BLOCK 300x250</span>
|
||||
</div>
|
||||
|
||||
<div className="text-zinc-300 font-mono leading-relaxed space-y-6 prose prose-invert prose-p:text-zinc-300 prose-headings:text-[#00ff9d] prose-a:text-[#00ff9d] prose-strong:text-white prose-code:text-[#00ff9d] max-w-none">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
<footer className="mt-20 pt-10 border-t border-[#00ff9d]/10 pb-20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 text-left mb-10">
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Terminal_Core</h4>
|
||||
<p className="text-zinc-500 text-xs leading-relaxed">Infraestrutura de segurança distribuída para coleta de inteligência em redes abertas.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Legal_Stack</h4>
|
||||
<ul className="text-zinc-500 text-xs space-y-2">
|
||||
<li><a href="/privacy" className="hover:text-[#00ff9d]">PRIVACY_POLICY.MD</a></li>
|
||||
<li><a href="/terms" className="hover:text-[#00ff9d]">TERMS_OF_SERVICE.MD</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-white font-bold mb-4 uppercase text-xs tracking-widest">Node_Status</h4>
|
||||
<div className="flex items-center gap-2 text-[10px] text-green-500 font-bold">
|
||||
<div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
|
||||
ALL_SYSTEMS_OPERATIONAL
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center gap-6 mb-8">
|
||||
<a href="#" className="hover:text-[#00ff9d]"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="hover:text-[#00ff9d]"><Share2 className="w-5 h-5"/></a>
|
||||
<a href="#" className="hover:text-[#00ff9d]"><Instagram className="w-5 h-5"/></a>
|
||||
</div>
|
||||
<div className="text-center font-mono text-[10px] text-[#00ff9d]/40 tracking-widest uppercase">
|
||||
EOF - END OF LOGS TRANSMISSION // {new Date().getFullYear()} // ENCRYPTED_SITE
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* RIGHT COLUMN: STATUS MONITOR & WIDGETS (20-25%) hidden on smaller screens */}
|
||||
<aside className="w-72 xl:w-80 border-l border-[#00ff9d]/20 hidden md:flex flex-col bg-[#050505] overflow-y-auto">
|
||||
|
||||
{/* Status Monitoring Widget */}
|
||||
<div className="p-6 border-b border-[#00ff9d]/20 bg-black relative">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] mb-4 flex items-center gap-2 text-[#00ff9d]"><Eye className="w-4 h-4"/> {ui.statusMonitor}</h3>
|
||||
<div className="flex flex-col gap-3 font-mono text-[10px]">
|
||||
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">MAIN_ROUTER_1</span><span className="text-green-500 font-bold bg-green-500/10 px-2 rounded">OK 11ms</span></div>
|
||||
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">SQL_CLUSTER_A</span><span className="text-green-500 font-bold bg-green-500/10 px-2 rounded">OK 42ms</span></div>
|
||||
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">PROXY_US_EAST</span><span className="text-red-500 font-bold bg-red-500/10 px-2 rounded animate-pulse">ERR DOWN</span></div>
|
||||
<div className="flex justify-between items-center"><span className="text-[#00ff9d]/50">VAULT_ENCRYPT</span><span className="text-yellow-500 font-bold bg-yellow-500/10 px-2 rounded">WARN 2.1s</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Handshake Configurator */}
|
||||
<div className="p-6 border-b border-[#00ff9d]/20 flex flex-col gap-4">
|
||||
<div className="w-10 h-10 border border-[#00ff9d]/40 flex items-center justify-center bg-[#00ff9d]/10 text-[#00ff9d]"><Crosshair className="w-5 h-5"/></div>
|
||||
<h4 className="text-sm font-black uppercase tracking-widest text-white">SYNC DAEMON DB</h4>
|
||||
<p className="text-[10px] text-[#00ff9d]/60 leading-relaxed font-mono">{ui.subscribeText}</p>
|
||||
<form className="flex flex-col gap-2 mt-2" onSubmit={(e) => handleSimulatedAction(e, 'Secure PGP Transmission Init')}>
|
||||
<input type="text" placeholder="pgp_key_or_email..." className="bg-black border border-[#00ff9d]/40 px-3 py-2 text-xs font-mono text-white outline-none focus:border-[#00ff9d] w-full" required/>
|
||||
<button className="bg-[#00ff9d] text-black font-black text-[10px] tracking-widest px-4 py-2 hover:bg-white uppercase w-full">{ui.subscribeBtn}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Ad Banner Vertical Skyscraper Emulator */}
|
||||
<div className="flex-1 p-6 flex items-center justify-center bg-[url('https://www.transparenttextures.com/patterns/black-mamba.png')]">
|
||||
<div className="w-[160px] h-[400px] bg-red-500/10 border border-red-500/30 flex flex-col items-center justify-center cursor-pointer group hover:bg-red-500/20 transition-colors relative" onClick={(e) => handleSimulatedAction(e, 'Skyscraper Ad Click')}>
|
||||
<ShieldAlert className="w-16 h-16 text-red-500 mb-6 opacity-80 group-hover:scale-110 transition-transform"/>
|
||||
<span className="text-red-500 font-black tracking-[0.2em] text-[10px] uppercase writing-vertical-rl rotate-180 mb-6">{ui.sidebarAd} // NETWORK</span>
|
||||
<span className="text-red-400 font-mono text-[9px] bg-red-500/20 px-2 py-1 absolute bottom-4">160x600 px</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
301
src/components/themes/DarkChefTheme.tsx
Normal file
301
src/components/themes/DarkChefTheme.tsx
Normal file
|
|
@ -0,0 +1,301 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Search, Play, Tv, ChevronRight, User, Star, Clock, ChefHat, PlayCircle, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar ao Canal',
|
||||
tvShows: 'PROGRAMAÇÃO DA TV',
|
||||
chefs: 'TOP CHEFS',
|
||||
latest: 'NOVIDADES QUENTES',
|
||||
sidebarAd: 'ANÚNCIO DA TV',
|
||||
readTime: 'MIN',
|
||||
articles: [
|
||||
{ id: '1', title: 'O Hambúrguer Espacial de Gordon', excerpt: 'Como fazer o blend de Wagyu com costela defumada explodir sem esfarelar na grelha de ferro.', category: 'Grelhados', time: '15', rating: '5.0', reviews: 231, img: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Mac and Cheese Supremo do Sul', excerpt: 'Queijo Cheddar inglês derretido em béchamel carregado de manteiga e pimenta quebrada.', category: 'Prato Principal', time: '40', rating: '4.9', reviews: 1042, img: 'https://images.unsplash.com/photo-1543339947-fde0fbc5b34a?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'A Costela Defumada no Pátio Traseiro', excerpt: 'Nihilismo de lenha. Nenhuma panela, apenas um defumador do Texas, madeira de laranjeira e 12 horas de frio e fumaça.', category: 'Churrasco', time: '12h', rating: '5.0', reviews: 3400, img: 'https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '4', title: 'Tacos Al Pastor direto da Rua', excerpt: 'O verdadeiro adobo vermelho vibrante com abacaxi tostado em fogo cruel.', category: 'Rua', time: '50', rating: '4.9', reviews: 890, img: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '5', title: 'Risoto de Funghi Espesso como Creme', excerpt: 'Você precisa bater no arroz. Liberação de amido extrema para o creme verdadeiro.', category: 'Itália', time: '35', rating: '4.7', reviews: 512, img: 'https://images.unsplash.com/photo-1476124369491-e7addf5db378?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '6', title: 'Frango Frito estilo Nashville', excerpt: 'Ardente. Crocante além da conta. O frango empanado três vezes que mancha seus dedos.', category: 'Comfort', time: '45', rating: '4.6', reviews: 120, img: 'https://images.unsplash.com/photo-1626082895617-2c6ad3ed286b?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '7', title: 'Guacamole Trufado de Alta Roda', excerpt: 'Limão, jalapeños, sal bruto e finalização com azeite de trufas brancas.', category: 'Aperitivo', time: '10', rating: '4.8', reviews: 765, img: 'https://images.unsplash.com/photo-1490327319717-b77da3b276b0?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '8', title: 'Torta de Maçã Americana Rústica', excerpt: 'Massa folhada espessa que não vaza calda de canela borbulhante pro forno.', category: 'Sobremesa', time: '60', rating: '4.8', reviews: 440, img: 'https://images.unsplash.com/photo-1568571780765-9b280aaae01d?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function DarkChefTheme({ 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 || 'RECEITA',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '20',
|
||||
rating: '4.9',
|
||||
reviews: Math.floor(Math.random() * 1500) + 100,
|
||||
img: p.image || `https://images.unsplash.com/photo-1544025162-81c951b689a7?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: '20',
|
||||
rating: '4.9',
|
||||
reviews: Math.floor(Math.random() * 1500) + 100,
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="kitchen-network bg-white text-[#111] min-h-screen font-sans selection:bg-[#E50914] selection:text-white">
|
||||
|
||||
{/* Network Navigation Thick & Bold */}
|
||||
<div className="bg-[#111111] text-white">
|
||||
<div className="max-w-[1400px] mx-auto px-6 h-[72px] flex justify-between items-center">
|
||||
<a href="/" className="flex items-center gap-6 cursor-pointer">
|
||||
<div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center font-black text-xl italic tracking-tighter">
|
||||
F<span className="text-white">N</span>
|
||||
</div>
|
||||
<span className="text-2xl font-black uppercase tracking-tighter hidden md:block">FOOD<span className="font-light">NETWORK</span></span>
|
||||
</a>
|
||||
|
||||
<div className="hidden lg:flex gap-8 text-[13px] font-black uppercase tracking-widest text-gray-300">
|
||||
<a href="/search" className="hover:text-red-500 transition-colors">Receitas</a>
|
||||
<a href="/chefs" className="hover:text-red-500 transition-colors">Chefs & Hosts</a>
|
||||
<a href="/schedule" className="hover:text-red-500 transition-colors">Programação TV</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<Search className="w-6 h-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
||||
<button className="bg-red-600 text-white text-[11px] font-black uppercase tracking-widest px-6 py-3 rounded hover:bg-white hover:text-black transition-colors hidden sm:block">Assista Ao Vivo</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main>
|
||||
|
||||
{/* Main Network VOD Billboard - Video Focused */}
|
||||
<a href={`/${articlesToRender[2].id}`} className="bg-black text-white relative w-full lg:aspect-[21/9] aspect-square flex flex-col justify-end p-8 sm:p-20 group cursor-pointer overflow-hidden border-b-[8px] border-black block">
|
||||
<img src={articlesToRender[2].img} className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:scale-105 group-hover:opacity-80 transition-all duration-1000" alt="Billboard"/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#111] via-[#111]/40 to-transparent"></div>
|
||||
|
||||
<div className="relative z-10 max-w-4xl">
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<span className="bg-red-600 text-white font-black text-[10px] uppercase tracking-widest px-3 py-1 rounded">Nova Temporada</span>
|
||||
<span className="text-gray-300 font-bold text-xs uppercase tracking-widest flex items-center gap-1"><Tv className="w-3 h-3 text-red-500"/> Na TV</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-6xl lg:text-8xl font-black uppercase tracking-tighter leading-[0.9] mb-6 drop-shadow-2xl">{articlesToRender[2].title}</h1>
|
||||
<p className="text-gray-300 font-bold text-lg max-w-xl line-clamp-2 md:line-clamp-none mb-10 text-shadow-sm">{articlesToRender[2].excerpt}</p>
|
||||
<button className="flex items-center gap-3 bg-white text-black font-black uppercase tracking-widest text-sm px-8 py-4 rounded-full hover:bg-gray-200 transition-colors">
|
||||
<Play className="w-5 h-5 fill-current"/> Assistir Receita
|
||||
</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="max-w-[1400px] mx-auto px-6 py-16">
|
||||
|
||||
{/* TV Guide/Video Cards Row */}
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b-4 border-black">
|
||||
<h2 className="text-3xl font-black uppercase tracking-tighter flex items-center gap-3"><PlayCircle className="w-8 h-8 text-red-600"/> {ui.latest}</h2>
|
||||
<a href="/episodes" className="font-bold uppercase text-xs tracking-widest text-gray-500 hover:text-black cursor-pointer hidden sm:block">Ver Episódios Completos →</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
|
||||
{articlesToRender.slice(0, 4).map((art: any) => (
|
||||
<a href={`/${art.id}`} key={art.id} className="cursor-pointer group relative flex flex-col h-full">
|
||||
<div className="w-full aspect-[4/3] rounded-xl overflow-hidden bg-gray-100 relative mb-4">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={art.title}/>
|
||||
<div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors flex items-center justify-center">
|
||||
<div className="w-14 h-14 bg-white/20 backdrop-blur rounded-full flex items-center justify-center text-white border-2 border-white/50 group-hover:bg-red-600 group-hover:border-red-600 transition-all opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0">
|
||||
<Play className="w-6 h-6 fill-current ml-1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-2 right-2 bg-black/80 px-2 py-1 rounded text-white text-[10px] font-black tracking-widest font-sans">{art.time} {ui.readTime}</div>
|
||||
</div>
|
||||
<span className="text-[10px] uppercase font-black text-red-600 tracking-widest mb-2 block">{art.category}</span>
|
||||
<h3 className="text-2xl font-black leading-tight mb-2 group-hover:underline decoration-4 underline-offset-2">{art.title}</h3>
|
||||
<div className="flex items-center gap-1 text-xs font-bold text-gray-400 mt-auto"><Star className="w-4 h-4 text-yellow-400 fill-current"/> {art.rating}</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Mega Sponsor Banner Break */}
|
||||
<div className="w-full bg-[#111] text-white p-12 sm:p-20 rounded-3xl mb-24 cursor-pointer relative overflow-hidden group border border-gray-800">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full opacity-30 bg-cover bg-center mix-blend-luminosity" style={{backgroundImage: 'url(https://images.unsplash.com/photo-1594380327318-aecc65f573c7?q=80&w=600)'}}></div>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#111] via-[#111]/80 to-transparent"></div>
|
||||
<div className="relative z-10 max-w-xl">
|
||||
<span className="text-[10px] font-black uppercase text-gray-500 tracking-widest mb-6 block border border-gray-600 w-fit px-3 py-1 rounded-full">{ui.sidebarAd} // NETWORK SPONSOR</span>
|
||||
<h3 className="text-4xl sm:text-5xl font-black uppercase tracking-tighter mb-6 leading-none uppercase">Ferramentas de ferro maciço.</h3>
|
||||
<p className="text-lg text-gray-400 font-medium mb-10">Não brinque com frigideiras antiaderentes se você quer selar um bife perfeito. Chegou a hora de investir no aço.</p>
|
||||
<button className="bg-white text-black text-xs font-black uppercase tracking-widest px-8 py-4 rounded hover:bg-gray-200 transition-colors">Ver Grelhadores</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Large Left Heavy Feed + Chefs Sidebar */}
|
||||
<div className="grid lg:grid-cols-3 gap-12 sm:gap-20">
|
||||
{/* Left Feed */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center justify-between mb-8 pb-4 border-b-4 border-black">
|
||||
<h2 className="text-3xl font-black uppercase tracking-tighter">Receitas Populares</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-10">
|
||||
{articlesToRender.slice(4, 8).map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="flex flex-col sm:flex-row gap-6 items-center group cursor-pointer border-b border-gray-100 pb-10">
|
||||
<div className="w-full sm:w-[280px] aspect-[4/3] rounded-xl overflow-hidden bg-gray-100 shrink-0 relative">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt={art.title}/>
|
||||
<div className="absolute top-2 left-2 bg-white px-2 py-1 text-[10px] font-black uppercase tracking-widest rounded text-red-600 shadow-sm">{art.category}</div>
|
||||
</div>
|
||||
<div className="flex flex-col py-2">
|
||||
<h3 className="text-3xl font-black tracking-tight leading-none mb-4 group-hover:text-red-600 transition-colors">{art.title}</h3>
|
||||
<p className="text-gray-600 font-medium mb-6 line-clamp-2">{art.excerpt}</p>
|
||||
<div className="flex items-center gap-6 mt-auto">
|
||||
<div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest"><Clock className="w-4 h-4"/> {art.time} {ui.readTime}</div>
|
||||
<div className="flex items-center gap-1 text-xs font-bold text-gray-800"><Star className="w-4 h-4 text-yellow-400 fill-current"/> {art.rating} ({art.reviews})</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
|
||||
<button className="w-full bg-[#111] text-white py-5 rounded-xl font-black uppercase tracking-widest text-sm hover:bg-gray-800 transition-colors">Carregar Mais Conteúdo</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - TV Style Sticky Ad + Chef Circles */}
|
||||
<aside className="lg:col-span-1 flex flex-col gap-12">
|
||||
|
||||
{/* Massive Portrait Ad Sticky */}
|
||||
<div className="w-full aspect-[3/4] bg-gray-100 rounded-3xl flex flex-col items-center justify-center p-8 text-center border border-gray-200 cursor-pointer shadow-sm relative overflow-hidden">
|
||||
<span className="text-[10px] font-black uppercase text-gray-400 tracking-widest absolute top-4">{ui.sidebarAd}</span>
|
||||
<ChefHat className="w-24 h-24 text-gray-300 mb-6"/>
|
||||
<h3 className="text-3xl font-black uppercase tracking-tighter text-gray-400">FAQUEIROS TITÂNIO Ouro.</h3>
|
||||
</div>
|
||||
|
||||
{/* Popular Chefs List Widget */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-black uppercase tracking-tighter border-b-4 border-black pb-4 mb-8">Hosts das Estrelas</h3>
|
||||
<div className="flex flex-col gap-6">
|
||||
{[1,2,3].map((val) => (
|
||||
<div key={val} className="flex items-center gap-4 cursor-pointer group">
|
||||
<img src={`https://images.unsplash.com/photo-1577219491135-ce391730fb2c?auto=format&fit=crop&q=80&w=150&h=150&random=${val}`} className="w-16 h-16 rounded-full border-4 border-transparent group-hover:border-red-600 transition-colors object-cover" alt="Chef"/>
|
||||
<div>
|
||||
<h4 className="text-lg font-black uppercase tracking-tighter group-hover:text-red-600 transition-colors">Chef Celebridade {val}</h4>
|
||||
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Apresenta: Fogo Bruto na Grelha</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE/RECIPE VIDEO VIEW --- */
|
||||
<article className="min-h-screen bg-white pb-32">
|
||||
|
||||
<div className="max-w-[1400px] mx-auto px-6 py-6 border-b border-gray-100 flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
<a href="/" className="hover:text-black flex items-center gap-1 transition-colors">
|
||||
← {ui.back}
|
||||
</a>
|
||||
<span>Receita Testada em Estúdio</span>
|
||||
</div>
|
||||
|
||||
<header className="max-w-[900px] mx-auto px-6 mt-16 mb-12 text-center md:text-left">
|
||||
<div className="flex items-center justify-center md:justify-start gap-4 mb-6">
|
||||
<span className="bg-black text-white px-3 py-1 rounded text-[10px] font-black uppercase tracking-widest">{displayArticle.category}</span>
|
||||
<span className="text-red-600 font-bold uppercase tracking-widest text-[10px] flex items-center gap-1"><Star className="w-3 h-3 fill-current"/> Best Seller</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-[0.95] mb-6">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-500 font-medium mb-10 max-w-3xl leading-relaxed">
|
||||
{displayArticle.excerpt} O processo real, em vídeo e fotos gravado simultaneamente na TV.
|
||||
</p>
|
||||
|
||||
{/* Meta Bar */}
|
||||
<div className="flex flex-wrap items-center justify-center md:justify-start gap-6 font-bold text-sm text-gray-800 bg-gray-50 px-6 py-4 rounded-xl border border-gray-100">
|
||||
<div className="flex items-center gap-2"><div className="w-8 h-8 bg-gray-300 rounded-full"></div>Por Chef Famoso</div>
|
||||
<div className="w-px h-6 bg-gray-300"></div>
|
||||
<div className="flex items-center gap-2 text-gray-500"><Clock className="w-4 h-4"/> Prep: {displayArticle.time} {ui.readTime}</div>
|
||||
<div className="w-px h-6 bg-gray-300"></div>
|
||||
<div className="flex items-center gap-1 text-yellow-500"><Star className="w-4 h-4 fill-current"/> 5.0 (3.4k)</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Master Video/Image Billboard in Article */}
|
||||
<div className="max-w-[1200px] mx-auto px-6 mb-20">
|
||||
<div className="w-full aspect-video rounded-3xl overflow-hidden bg-black relative group cursor-pointer shadow-2xl">
|
||||
<img src={displayArticle.img} className="w-full h-full object-cover opacity-80 group-hover:opacity-60 transition-opacity" alt={displayArticle.title}/>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-24 h-24 bg-red-600/90 backdrop-blur rounded-full flex items-center justify-center text-white border-4 border-white group-hover:scale-110 transition-transform shadow-[0_0_50px_rgba(220,38,38,0.5)]">
|
||||
<Play className="w-10 h-10 fill-current ml-2"/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-6 left-6 text-white font-black uppercase border border-white/30 px-3 py-1 rounded backdrop-blur text-xs tracking-widest hidden sm:block">Assista ao Episódio Completo (12:40)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[800px] mx-auto px-6 font-sans">
|
||||
<div className="prose prose-lg prose-red max-w-none text-gray-700 leading-relaxed font-medium prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-black">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Massive TV Network Footer */}
|
||||
<footer className="bg-[#111] text-white pt-24 pb-12 font-sans border-t-[12px] border-black">
|
||||
<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-4 mb-6">
|
||||
<div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center font-black text-xl italic tracking-tighter text-white">
|
||||
F<span>N</span>
|
||||
</div>
|
||||
<span className="text-2xl font-black uppercase tracking-tighter text-white">FOOD<span className="text-gray-400">NETWORK</span></span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm font-medium max-w-sm mb-6">Simulação de mídia avançada. Arquitetura Media Hub para retenção por vídeo e elementos de tipografia agressivos para publicidade patrocinada.</p>
|
||||
<div className="flex gap-4 mb-6">
|
||||
<a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-600 transition-colors"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-[#555] mb-6">Explore</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-gray-300">
|
||||
<li><a href="/" className="hover:text-red-500 transition-colors">Início</a></li>
|
||||
<li><a href="/search" className="hover:text-red-500 transition-colors">Receitas</a></li>
|
||||
<li><a href="/chefs" className="hover:text-red-500 transition-colors">Nossos Chefs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-[#555] mb-6">Políticas</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-gray-300">
|
||||
<li><a href="/privacy" className="hover:text-red-500 transition-colors">Privacidade</a></li>
|
||||
<li><a href="/terms" className="hover:text-red-500 transition-colors">Termos de Uso</a></li>
|
||||
<li><a href="/contact" className="hover:text-red-500 transition-colors">Contato</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center font-black uppercase tracking-widest text-[10px] text-gray-600">
|
||||
© {new Date().getFullYear()} Media Hub Portal - Receitas USA Clone. All rights reserved.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
206
src/components/themes/EditorialTheme.tsx
Normal file
206
src/components/themes/EditorialTheme.tsx
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Search, ChevronRight, Clock, Star, Heart, Menu, User, BookOpen, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar à Edição',
|
||||
magazine: 'REVISTA EDITORIAL',
|
||||
health: 'SAÚDE & BEM-ESTAR',
|
||||
latest: 'ÚLTIMAS DESCOBERTAS',
|
||||
sidebarAd: 'ANÚNCIO EDITORIAL',
|
||||
readTime: 'MIN',
|
||||
articles: [
|
||||
{ id: '1', title: 'A Revolução Silenciosa da Fermentação Natural', excerpt: 'Por que o seu intestino agradece quando você espera 48 horas para assar um pão. A ciência por trás das leveduras selvagens.', category: 'Saúde', time: '12', rating: '4.9', img: 'https://images.unsplash.com/photo-1549931319-a545dcf3bc73?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Açafrão: O Ouro em Pó da Longevidade', excerpt: 'Estudos clínicos mostram como a curcumina pode ser a chave para reduzir a inflamação sistêmica em dietas modernas.', category: 'Nutrição', time: '8', rating: '4.8', img: 'https://images.unsplash.com/photo-1615485290382-441e4d049cb5?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'Vinhos de Altitude: O Terroir Brasileiro', excerpt: 'Visitamos as vinícolas da Serra Catarinense para entender por que o frio extremo está produzindo os melhores brancos do país.', category: 'Lifestyle', time: '15', rating: '5.0', img: 'https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '4', title: 'O Jejum Intermitente e o Cérebro', excerpt: 'Novas pesquisas sugerem que a pausa na ingestão calórica ativa processos de limpeza celular fundamentais para a cognição.', category: 'Ciência', time: '20', rating: '4.9', img: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '5', title: 'Hortas Urbanas em Apartamentos de 30m²', excerpt: 'Guia definitivo de quais temperos sobrevivem à falta de sol direto e como montar seu sistema de irrigação manual.', category: 'Horta', time: '30', rating: '4.7', img: 'https://images.unsplash.com/photo-1523348837708-15d4a09cfac2?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '6', title: 'O Guia do Matcha Grau Cerimonial', excerpt: 'Não é apenas chá verde em pó. Entenda a diferença entre o ingrediente culinário e o elixir dos monges japoneses.', category: 'Bebidas', time: '10', rating: '4.9', img: 'https://images.unsplash.com/photo-1582793988951-9aed5509eb97?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function EditorialTheme({ 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 || 'RECEITA',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '12',
|
||||
rating: '4.9',
|
||||
img: p.image || `https://images.unsplash.com/photo-1549931319-a545dcf3bc73?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: '12',
|
||||
rating: '4.9',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1549931319-a545dcf3bc73?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="editorial-niche bg-[#FAF9F6] text-[#1A1A1A] min-h-screen font-serif selection:bg-red-600 selection:text-white">
|
||||
|
||||
{/* Editorial Header - Centered & Premium */}
|
||||
<header className="border-b border-black py-10">
|
||||
<div className="max-w-[1200px] mx-auto px-6 flex flex-col items-center">
|
||||
<div className="flex items-center gap-10 mb-8 w-full justify-between lg:justify-center">
|
||||
<Menu className="w-6 h-6 lg:hidden cursor-pointer"/>
|
||||
<a href="/" className="flex flex-col items-center group cursor-pointer">
|
||||
<span className="text-5xl sm:text-7xl font-black uppercase tracking-[-0.05em] leading-none mb-2">EDITORIAL</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.5em] text-gray-500 border-t border-gray-300 pt-2 px-8">Culinária & Lifestyle</span>
|
||||
</a>
|
||||
<Search className="w-6 h-6 lg:hidden cursor-pointer"/>
|
||||
</div>
|
||||
|
||||
<nav className="hidden lg:flex gap-12 text-[10px] font-bold uppercase tracking-[0.2em] text-gray-400">
|
||||
<a href="/category/saude" className="hover:text-black transition-colors">Saúde</a>
|
||||
<a href="/category/nutricao" className="hover:text-black transition-colors">Nutrição</a>
|
||||
<a href="/category/vinhos" className="hover:text-black transition-colors">Vinhos</a>
|
||||
<a href="/category/viagens" className="hover:text-black transition-colors">Viagens</a>
|
||||
<a href="/category/receitas" className="hover:text-black transition-colors">Receitas</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1200px] mx-auto px-6 py-16">
|
||||
|
||||
{/* Top Feature Split Layout */}
|
||||
<div className="grid lg:grid-cols-12 gap-12 border-b border-gray-200 pb-20 mb-20">
|
||||
<a href={`/${articlesToRender[0].id}`} className="lg:col-span-8 group cursor-pointer">
|
||||
<div className="w-full aspect-video rounded-3xl overflow-hidden bg-gray-100 mb-8 relative">
|
||||
<img src={articlesToRender[0].img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="Main Feature"/>
|
||||
<div className="absolute top-6 left-6 bg-white px-4 py-2 text-xs font-bold uppercase tracking-widest border border-black shadow-lg">{articlesToRender[0].category}</div>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-6xl font-black leading-[1.05] mb-6 tracking-tighter group-hover:underline decoration-4 underline-offset-8 transition-all">{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-10">
|
||||
<div className="flex items-center gap-2 border-b border-black pb-4 mb-2">
|
||||
<Star className="w-5 h-5 fill-current"/>
|
||||
<h2 className="text-xl font-black uppercase tracking-tighter">Escolha da Editora</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-100 pb-8 last:border-0">
|
||||
<span className="text-[10px] font-bold uppercase text-red-600 tracking-widest mb-3 block">{art.category}</span>
|
||||
<h3 className="text-2xl font-black leading-tight mb-4 group-hover:text-gray-600 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>
|
||||
|
||||
{/* Grid Section with Vertical Separators */}
|
||||
<div className="grid md:grid-cols-3 gap-12 lg:gap-20">
|
||||
{articlesToRender.slice(3, 6).map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="group cursor-pointer">
|
||||
<div className="w-full aspect-square rounded-2xl overflow-hidden mb-6 bg-gray-100 border border-gray-200">
|
||||
<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-4 group-hover:underline decoration-2 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-bold uppercase tracking-[0.2em] text-black border-b border-black pb-1">Leia Mais →</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Editorial Banner Ad Box (Full Width) */}
|
||||
<div className="mt-24 w-full bg-white border border-gray-300 p-12 sm:p-20 text-center rounded-[3rem] cursor-pointer hover:bg-[#F3F4F6] transition-colors group relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-black"></div>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-400 mb-8 block">{ui.sidebarAd} // CLASSIFICADOS</span>
|
||||
<h3 className="text-3xl sm:text-4xl font-black uppercase tracking-tighter mb-6 leading-none">Vinhos de Importação Direta.</h3>
|
||||
<p className="text-lg text-gray-500 font-medium max-w-xl mx-auto mb-10">Nossa curadoria viaja o mundo para trazer rótulos que não chegam às grandes prateleiras. Exclusividade na sua mesa.</p>
|
||||
<button className="bg-black text-white px-10 py-4 text-xs font-bold uppercase tracking-widest rounded-full hover:bg-gray-800 transition-colors">Acessar Clube</button>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1200px] mx-auto px-6 py-20">
|
||||
<div className="max-w-[800px] mx-auto">
|
||||
<a href="/" className="text-[10px] font-bold uppercase tracking-[0.3em] text-gray-400 hover:text-black transition-colors block mb-12">
|
||||
← {ui.back}
|
||||
</a>
|
||||
|
||||
<header className="mb-16">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.3em] text-red-600 block mb-6">{displayArticle.category}</span>
|
||||
<h1 className="text-5xl sm:text-7xl font-black leading-[1.05] tracking-tighter mb-10">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
<p className="text-2xl text-gray-500 font-medium leading-relaxed italic border-l-4 border-black pl-8 my-10">
|
||||
{displayArticle.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 py-8 border-y border-gray-200 text-xs font-bold uppercase tracking-widest text-gray-500">
|
||||
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=150&h=150" className="w-12 h-12 rounded-full border border-gray-300" alt="Editor"/>
|
||||
<div>
|
||||
<span className="block text-black">Por Mariana Albuquerque</span>
|
||||
<span className="block">Editora-Chefe de Gastronomia</span>
|
||||
</div>
|
||||
<div className="ml-auto hidden sm:flex items-center gap-6">
|
||||
<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"><BookOpen className="w-4 h-4"/> Matéria Especial</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="prose prose-lg prose-slate max-w-none font-serif text-gray-800 leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-a:text-red-600 hover:prose-a:underline prose-img:rounded-[2rem] prose-img:shadow-xl">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Elegant Editorial Footer */}
|
||||
<footer className="bg-black text-white pt-24 pb-12 font-serif border-t-[20px] border-[#111]">
|
||||
<div className="max-w-[1200px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-white/10 pb-20 mb-12">
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<span className="text-4xl font-black uppercase tracking-tighter block mb-6">EDITORIAL</span>
|
||||
<p className="text-gray-500 text-sm font-medium leading-relaxed max-w-sm">O futuro da curadoria digital. Layout focado em narrativa, espaços negativos massivos e densidade de informação reduzida para leitura lenta.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-sm mb-6 text-gray-200">Explore</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||||
<li><a href="/" className="hover:text-red-500 transition-colors">Edições Passadas</a></li>
|
||||
<li><a href="/search" className="hover:text-red-500 transition-colors">Arquivo Digital</a></li>
|
||||
<li><a href="/login" className="hover:text-red-500 transition-colors">Assine a Revista</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-sm mb-6 text-gray-200">Políticas</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||||
<li><a href="/privacy" className="hover:text-red-500 transition-colors">Privacidade</a></li>
|
||||
<li><a href="/terms" className="hover:text-red-500 transition-colors">Termos de Uso</a></li>
|
||||
<li><a href="/cookies" className="hover:text-red-500 transition-colors">Uso de Cookies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-sm mb-6 text-gray-200">Social</h4>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-red-600 transition-colors"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-red-600 transition-colors"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-red-600 transition-colors"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center font-bold uppercase tracking-[0.4em] text-[9px] text-gray-700">
|
||||
© {new Date().getFullYear()} Editorial Group S.A. - Powered by Autoblog.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
260
src/components/themes/GourmetTheme.tsx
Normal file
260
src/components/themes/GourmetTheme.tsx
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Search, Star, MessageCircle, Clock, UtensilsCrossed, ArrowRight, User, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar',
|
||||
collections: 'COLEÇÕES DO MÊS',
|
||||
trending: 'TENDÊNCIAS',
|
||||
newsletter: 'RECEBA NOVIDADES',
|
||||
sidebarAd: 'PATROCINADO GOURMET',
|
||||
readTime: 'MIN',
|
||||
articles: [
|
||||
{ id: '1', title: 'Carbonara Romana: O Guia Sem Erros', excerpt: 'Pecorino Romano, Guanciale, Ovos e Pimenta. Esqueça o creme de leite se quiser o respeito da Nonna.', category: 'Massas', time: '15', rating: '5.0', img: 'https://images.unsplash.com/photo-1612874742237-6526221588e3?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Beef Wellington: A Técnica do Chef', excerpt: 'Como selar o filet mignon e garantir que a massa folhada não fique úmida no fundo. O segredo da Duxelles.', category: 'Carnes', time: '90', rating: '4.9', img: 'https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'Macarons de Lavanda e Limão Siciliano', excerpt: 'Dominando o merengue italiano para obter aquela "pizinha" perfeita no pé do doce francês.', category: 'Confeitaria', time: '120', rating: '4.8', img: 'https://images.unsplash.com/photo-1569864358642-9d161970296d?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '4', title: 'Sushi de Omakase na Sua Cozinha', excerpt: 'A temperatura exata do Shari e como tratar o peixe gordo para realçar o umami natural.', category: 'Japão', time: '60', rating: '5.0', img: 'https://images.unsplash.com/photo-1579871494447-9811cf80d66c?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '5', title: 'O Hambúrguer de Dry Aged Definitivo', excerpt: 'O que acontece quando você matura a carne por 45 dias antes de moer? Uma explosão de sabor terroso.', category: 'Grelhados', time: '20', rating: '4.9', img: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '6', title: 'Tiramisù de Pistache e Frutas Vermelhas', excerpt: 'Uma releitura moderna do clássico veneziano. Leve, crocante e visualmente hipnotizante.', category: 'Sobremesas', time: '40', rating: '4.7', img: 'https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function GourmetTheme({ 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 || 'RECEITA',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '25',
|
||||
rating: '4.9',
|
||||
img: p.image || `https://images.unsplash.com/photo-1612874742237-6526221588e3?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: '25',
|
||||
rating: '4.9',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1612874742237-6526221588e3?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="gourmet-hub bg-[#FFFFFF] text-[#1A1A1A] min-h-screen font-sans selection:bg-[#FFAE00] selection:text-white">
|
||||
|
||||
{/* Top Utility Bar */}
|
||||
<nav className="bg-[#1A1A1A] text-white py-3 px-6 text-[10px] font-bold uppercase tracking-widest hidden sm:flex justify-between items-center">
|
||||
<div className="flex gap-8">
|
||||
<a href="/category/lifestyle" className="hover:text-[#FFAE00] transition-colors">Lifestyle</a>
|
||||
<a href="/category/vinhos" className="hover:text-[#FFAE00] transition-colors">Vinhos</a>
|
||||
<a href="/category/restaurantes" className="hover:text-[#FFAE00] transition-colors">Restaurantes</a>
|
||||
</div>
|
||||
<div className="flex gap-6 items-center">
|
||||
<span className="text-gray-500">Gourmet Portal v2.0</span>
|
||||
<div className="w-px h-3 bg-gray-700"></div>
|
||||
<a href="/login" className="flex items-center gap-2 hover:text-[#FFAE00]"><User className="w-3 h-3"/> Conta Premium</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Main Elegant Header */}
|
||||
<header className="border-b border-gray-100 sticky top-0 bg-white/80 backdrop-blur-md z-50">
|
||||
<div className="max-w-[1280px] mx-auto px-6 h-[100px] flex items-center justify-between">
|
||||
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
||||
<div className="w-12 h-12 bg-[#FFAE00] rounded-full flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
|
||||
<UtensilsCrossed className="w-6 h-6"/>
|
||||
</div>
|
||||
<span className="text-3xl font-black tracking-tighter uppercase leading-none">GOURMET<span className="text-[#FFAE00]">HUB</span></span>
|
||||
</a>
|
||||
|
||||
<div className="hidden lg:flex gap-10 text-xs font-black uppercase tracking-tighter text-[#1A1A1A]">
|
||||
<a href="/search" className="hover:text-[#FFAE00] transition-colors">Receitas</a>
|
||||
<a href="/books" className="hover:text-[#FFAE00] transition-colors">Livros</a>
|
||||
<a href="/courses" className="hover:text-[#FFAE00] transition-colors">Cursos Online</a>
|
||||
<a href="/newsletter" className="hover:text-[#FFAE00] transition-colors">Assinar</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden md:flex items-center bg-gray-50 border border-gray-100 rounded-full px-4 py-2 focus-within:border-[#FFAE00] transition-colors shadow-inner">
|
||||
<Search className="w-4 h-4 text-gray-400"/>
|
||||
<input type="text" placeholder="Buscar..." className="bg-transparent border-none outline-none pl-3 text-xs font-bold w-32 focus:w-48 transition-all"/>
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-gray-900 text-white flex items-center justify-center cursor-pointer lg:hidden">
|
||||
<Search className="w-5 h-5"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1280px] mx-auto px-6 py-12">
|
||||
|
||||
{/* Hero Bento Layout Grid */}
|
||||
<div className="grid lg:grid-cols-12 lg:grid-rows-2 gap-8 mb-20 h-auto lg:h-[700px]">
|
||||
{/* Main Big Feature */}
|
||||
<a href={`/${articlesToRender[0].id}`} className="lg:col-span-7 lg:row-span-2 group relative overflow-hidden rounded-[2.5rem] bg-gray-100 cursor-pointer shadow-xl block">
|
||||
<img src={articlesToRender[0].img} className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="Hero"/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
|
||||
<div className="absolute bottom-10 left-10 right-10 text-white">
|
||||
<span className="bg-[#FFAE00] text-black px-4 py-1 rounded text-[10px] font-black uppercase tracking-widest mb-4 inline-block">{articlesToRender[0].category}</span>
|
||||
<h1 className="text-4xl sm:text-5xl font-black tracking-tighter leading-none mb-6 group-hover:underline decoration-4 underline-offset-8 transition-all">{articlesToRender[0].title}</h1>
|
||||
<div className="flex items-center gap-6 text-xs font-bold uppercase tracking-widest text-white/70">
|
||||
<span className="flex items-center gap-2"><Clock className="w-4 h-4"/> {articlesToRender[0].time} {ui.readTime}</span>
|
||||
<span className="flex items-center gap-1 text-[#FFAE00]"><Star className="w-4 h-4 fill-current"/> {articlesToRender[0].rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Secondary Features */}
|
||||
{[articlesToRender[1], articlesToRender[2]].map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="lg:col-span-5 group relative overflow-hidden rounded-[2rem] bg-gray-100 cursor-pointer shadow-lg block">
|
||||
<img src={art.img} className="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="Feature"/>
|
||||
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
|
||||
<div className="absolute bottom-8 left-8 right-8 text-white">
|
||||
<span className="text-[9px] font-black uppercase tracking-widest text-[#FFAE00] mb-2 block">{art.category}</span>
|
||||
<h3 className="text-2xl font-black tracking-tight leading-none mb-2">{art.title}</h3>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Section: Latest Feed + Side Ad */}
|
||||
<div className="grid lg:grid-cols-3 gap-16">
|
||||
<div className="lg:col-span-2">
|
||||
<div className="flex items-center justify-between mb-10 pb-4 border-b-2 border-black">
|
||||
<h2 className="text-3xl font-black uppercase tracking-tighter">{ui.collections}</h2>
|
||||
<ArrowRight className="w-6 h-6 text-gray-300"/>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-x-10 gap-y-16">
|
||||
{articlesToRender.slice(3, 7).map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="group cursor-pointer">
|
||||
<div className="w-full aspect-[4/3] rounded-3xl overflow-hidden mb-6 bg-gray-100 shadow-sm border border-gray-100 relative">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={art.title}/>
|
||||
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur w-10 h-10 rounded-full flex items-center justify-center text-[#1A1A1A] shadow-lg group-hover:bg-[#FFAE00] group-hover:text-white transition-colors">
|
||||
<MessageCircle className="w-4 h-4"/>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-3 block">{art.category}</span>
|
||||
<h3 className="text-2xl font-black leading-tight mb-4 group-hover:text-[#FFAE00] 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 items-center gap-1 text-xs font-bold text-gray-400"><Clock className="w-4 h-4"/> {art.time} {ui.readTime}</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="lg:col-span-1">
|
||||
{/* Side Ad Widget - Premium Style */}
|
||||
<div className="w-full bg-[#F3F4F6] rounded-[2.5rem] p-10 text-center border border-gray-200 cursor-pointer hover:bg-white transition-all shadow-sm sticky top-32">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-gray-400 mb-8 block">{ui.sidebarAd} // ADSENSE</span>
|
||||
<div className="w-20 h-20 bg-white rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-lg text-[#FFAE00]">
|
||||
<UtensilsCrossed className="w-10 h-10"/>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black tracking-tighter uppercase mb-4">Masterclass de Panificação.</h3>
|
||||
<p className="text-gray-500 font-medium text-sm mb-10 leading-relaxed px-4">Aprenda os segredos da fermentação natural com quem entende do assunto. Vagas limitadas para assinantes PRO.</p>
|
||||
<button className="w-full bg-[#1A1A1A] text-white py-4 rounded-2xl font-black uppercase tracking-widest text-xs hover:bg-[#FFAE00] transition-colors shadow-lg">Quero Participar</button>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="pb-32">
|
||||
<div className="max-w-[1280px] mx-auto px-6 py-6 border-b border-gray-100 flex items-center justify-between text-[10px] font-black uppercase tracking-[0.2em] text-gray-400">
|
||||
<a href="/" className="hover:text-black flex items-center gap-2 transition-colors">
|
||||
← {ui.back}
|
||||
</a>
|
||||
<span className="text-[#FFAE00]">GourmetHub Premium Content</span>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[900px] mx-auto px-6 mt-20 mb-16 text-center">
|
||||
<span className="bg-gray-100 text-gray-800 px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest mb-8 inline-block shadow-sm">
|
||||
{displayArticle.category}
|
||||
</span>
|
||||
<h1 className="text-5xl sm:text-7xl lg:text-8xl font-black text-[#1A1A1A] leading-[0.95] mb-10 tracking-tighter italic">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
<p className="text-xl sm:text-2xl text-gray-500 font-medium leading-relaxed max-w-2xl mx-auto border-t border-gray-100 pt-10">
|
||||
{displayArticle.excerpt} Receita masterclass exclusiva para o nosso portal Hub.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1280px] mx-auto px-6 mb-20">
|
||||
<div className="w-full aspect-video rounded-[3rem] overflow-hidden bg-gray-100 shadow-2xl">
|
||||
<img src={displayArticle.img} className="w-full h-full object-cover" alt={displayArticle.title} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[800px] mx-auto px-6">
|
||||
<div className="prose prose-lg prose-orange max-w-none text-gray-800 leading-relaxed font-medium prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-[#1A1A1A] prose-img:rounded-[2rem] prose-a:text-[#FFAE00] prose-blockquote:border-[#FFAE00] prose-blockquote:bg-gray-50 prose-blockquote:p-8 prose-blockquote:rounded-3xl prose-blockquote:not-italic prose-blockquote:font-black prose-blockquote:text-2xl">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Gourmet Chunky Footer */}
|
||||
<footer className="bg-[#FFFFFF] border-t-8 border-[#1A1A1A] pt-24 pb-12 font-sans">
|
||||
<div className="max-w-[1280px] mx-auto px-6 grid md:grid-cols-12 gap-16 border-b border-gray-100 pb-20 mb-12">
|
||||
|
||||
<div className="md:col-span-4">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-10 h-10 bg-[#FFAE00] rounded-full flex items-center justify-center text-white">
|
||||
<UtensilsCrossed className="w-5 h-5"/>
|
||||
</div>
|
||||
<span className="text-2xl font-black tracking-tighter uppercase text-[#1A1A1A]">GOURMET<span className="text-[#FFAE00]">HUB</span></span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm font-medium leading-relaxed max-w-sm mb-8">Arquitetura de portal de nicho com foco em estética minimalista mas densidade funcional de SaaS. Perfeito para grandes portais de receitas.</p>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-4">Explore</h4>
|
||||
<ul className="space-y-3 text-sm font-bold text-gray-500">
|
||||
<li><a href="/" className="hover:text-[#FFAE00] transition-colors">Início</a></li>
|
||||
<li><a href="/search" className="hover:text-[#FFAE00] transition-colors">Receitas</a></li>
|
||||
<li><a href="/login" className="hover:text-[#FFAE00] transition-colors">Minha Conta</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-4">Políticas</h4>
|
||||
<ul className="space-y-3 text-sm font-bold text-gray-500">
|
||||
<li><a href="/privacy" className="hover:text-[#FFAE00] transition-colors">Privacidade</a></li>
|
||||
<li><a href="/terms" className="hover:text-[#FFAE00] transition-colors">Termos de Uso</a></li>
|
||||
<li><a href="/cookies" className="hover:text-[#FFAE00] transition-colors">Cookies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-4">Social</h4>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#FFAE00] 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-[#FFAE00] 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-[#FFAE00] hover:text-white transition-colors border border-gray-100"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-4 bg-gray-50 p-6 rounded-2xl border border-gray-100 lg:hidden xl:block">
|
||||
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-2">Edição de Bolso</h4>
|
||||
<p className="text-xs text-gray-400 font-bold mb-4">Assine e receba a versão digital otimizada para tablets semanalmente.</p>
|
||||
<form className="flex">
|
||||
<input type="email" placeholder="Seu email..." className="flex-1 bg-white border border-gray-200 px-4 py-2 rounded-l-lg text-xs outline-none" required/>
|
||||
<button className="bg-[#1A1A1A] text-white px-4 py-2 rounded-r-lg text-xs font-black uppercase tracking-widest hover:bg-[#FFAE00] transition-colors">OK</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center font-black uppercase tracking-widest text-[9px] text-gray-400">
|
||||
© {new Date().getFullYear()} Gourmet Hub Premium Network. Built by Autoblog SaaS.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
237
src/components/themes/HealthyTheme.tsx
Normal file
237
src/components/themes/HealthyTheme.tsx
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Search, ChevronRight, Clock, Star, PlayCircle, BookOpen, UtensilsCrossed, Bookmark, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar',
|
||||
collections: 'Nossas Coleções',
|
||||
dinner: 'JANTAR PRÁTICO',
|
||||
veggie: 'O PODER DOS VEGETAIS',
|
||||
readTime: 'minutos',
|
||||
kitchen: 'Na Cozinha com o Chef',
|
||||
newsletter: 'Receba dicas de ouro',
|
||||
articles: [
|
||||
{ id: '1', title: 'Avocado Toast com Ovos Escalfados', excerpt: 'Carboidratos complexos sobre pão de fermentação natural. O café da manhã definitivo.', category: 'Café', time: '12', rating: '4.9', img: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Bowl de Açaí Selvagem com Granola Salgada', excerpt: 'Cortando o xarope. Uma viagem pela textura pura amazônica sem pico glicêmico.', category: 'Lanches', time: '8', rating: '4.8', img: 'https://images.unsplash.com/photo-1498837167922-41c373b50626?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'Salmão Assado e Quinoa de Limão Siciliano', excerpt: 'A mega dose de ômega 3 semanal envelopada numa textura cítrica perfeita.', category: 'Jantar', time: '25', rating: '5.0', img: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '4', title: 'Salada Morna de Grão de Bico e Cúrcuma Roxa', excerpt: 'A força imunológica da cúrcuma em uma base rica em proteínas vegetais.', category: 'Proteína Vegetal', time: '30', rating: '4.9', img: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '5', title: 'Overnight Oats de Chia e Leite de Coco', excerpt: 'Probióticos fermentando durante a noite na sua geladeira enquanto você dorme.', category: 'Prebióticos', time: '8 h', rating: '4.7', img: 'https://images.unsplash.com/photo-1511690656952-34342bb7c2f2?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '6', title: 'Suco Verde Prensado a Frio Perfeito', excerpt: 'Esqueça as centrífugas que queimam as enzimas. Apenas pressão mecânica sobre couve orgânica.', category: 'Detox', time: '20', rating: '4.9', img: 'https://images.unsplash.com/photo-1610832958506-aa56368176cf?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function HealthyTheme({ 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 || 'RECEITA',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '12',
|
||||
rating: '4.9',
|
||||
img: p.image || `https://images.unsplash.com/photo-1490645935967-10de6ba17061?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: '12',
|
||||
rating: '4.9',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="clean-portal bg-[#FAF9F6] text-[#333333] min-h-screen font-serif selection:bg-[#E2E8F0] selection:text-black">
|
||||
|
||||
{/* Minimalist Top Nav */}
|
||||
<nav className="bg-[#FAF9F6] border-b border-[#E2E8F0] py-6 sticky top-0 z-50">
|
||||
<div className="max-w-[1200px] mx-auto px-6 sm:px-8 flex items-center justify-between">
|
||||
<div className="flex items-center gap-10">
|
||||
<a href="/" className="flex items-center gap-3 cursor-pointer">
|
||||
<div className="w-10 h-10 border-2 border-black rounded-full flex items-center justify-center">
|
||||
<UtensilsCrossed className="w-5 h-5 text-black"/>
|
||||
</div>
|
||||
<span className="text-2xl font-black text-black tracking-tight uppercase">PANELINHA<span className="text-gray-400 font-light">CLONE</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 text-gray-800 relative">
|
||||
<div className="hidden sm:flex items-center border border-gray-300 rounded-full px-4 py-1.5 focus-within:border-black transition-colors">
|
||||
<Search className="w-4 h-4 text-gray-400"/>
|
||||
<form action="/search">
|
||||
<input name="q" type="text" placeholder="Pesquisar..." className="bg-transparent border-none outline-none pl-3 text-sm font-sans w-32 focus:w-48 transition-all"/>
|
||||
</form>
|
||||
</div>
|
||||
<a href="/saved"><Bookmark className="w-5 h-5 cursor-pointer hover:fill-black transition-all"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="pb-32">
|
||||
|
||||
<div className="max-w-[1200px] mx-auto px-6 sm:px-8">
|
||||
|
||||
{/* Simple Text Header (Aesthetic White Space) */}
|
||||
<div className="py-20 text-center max-w-3xl mx-auto">
|
||||
<span className="block text-[#94A3B8] text-xs font-bold uppercase tracking-[0.2em] mb-4">Atualizado Hoje</span>
|
||||
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-normal text-black leading-[1.1] tracking-tight">Comida de Verdade.</h1>
|
||||
<p className="mt-6 text-lg text-gray-500 font-sans font-medium">Esqueça o Pinterest sujo. Refatoramos o layout pra parecer a cozinha elegante de uma chef premiada. Sem blocos espremidos.</p>
|
||||
</div>
|
||||
|
||||
{/* Single MASSIVE Featured Image Split Layout */}
|
||||
<a href={`/${articlesToRender[2].id}`} className="grid lg:grid-cols-2 gap-0 overflow-hidden rounded-3xl border border-gray-200 cursor-pointer shadow-sm group bg-white mb-24 block">
|
||||
<div className="w-full aspect-square lg:aspect-auto lg:h-[600px] relative">
|
||||
<img src={articlesToRender[2].img} className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="Featured"/>
|
||||
</div>
|
||||
<div className="p-10 sm:p-16 xl:p-24 flex flex-col justify-center">
|
||||
<span className="text-xs font-bold uppercase tracking-[0.2em] text-[#94A3B8] mb-4">{ui.collections}</span>
|
||||
<h2 className="text-4xl sm:text-5xl leading-tight font-normal text-black mb-6 group-hover:underline decoration-1 underline-offset-4">{articlesToRender[2].title}</h2>
|
||||
<p className="text-gray-500 font-sans text-lg mb-8">{articlesToRender[2].excerpt}</p>
|
||||
<span className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-black/60 border border-black/10 w-fit px-4 py-2 rounded-full"><Clock className="w-3 h-3"/> Preparo: {articlesToRender[2].time} min</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{/* Minimalist Grid Sections */}
|
||||
<div className="mb-16">
|
||||
<div className="flex items-center justify-between mb-10 pb-4 border-b border-gray-200">
|
||||
<h3 className="text-2xl font-normal text-black uppercase tracking-widest">{ui.veggie}</h3>
|
||||
<a href="/category/vegetais" className="text-xs font-bold uppercase tracking-widest text-[#94A3B8] cursor-pointer hover:text-black">Ver Tudo →</a>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
|
||||
{[articlesToRender[0], articlesToRender[3] || articlesToRender[0], articlesToRender[5] || articlesToRender[1]].map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="cursor-pointer group">
|
||||
<div className="w-full aspect-square overflow-hidden rounded-xl mb-6 bg-gray-100 relative">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:opacity-90 transition-opacity duration-500" alt={art.title}/>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#94A3B8] mb-2 block">{art.category}</span>
|
||||
<h4 className="text-xl sm:text-2xl font-normal text-black leading-snug mb-3 group-hover:text-gray-500 transition-colors">{art.title}</h4>
|
||||
<div className="flex items-center gap-2 font-sans text-xs text-gray-500 font-medium">
|
||||
<Clock className="w-3 h-3"/> {art.time} min
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Elegant Horizontal Banner Ad MREC substitution */}
|
||||
<div className="w-full bg-[#E2E8F0]/30 rounded-3xl p-10 sm:p-20 text-center border border-gray-200 my-24 cursor-pointer hover:bg-[#E2E8F0]/50 transition-colors">
|
||||
<span className="text-[9px] font-bold uppercase tracking-[0.2em] text-gray-400 mb-6 block">Apoio Cultural</span>
|
||||
<h3 className="text-3xl sm:text-4xl font-normal text-black mb-4">Facas Santoku Hand-Forged.</h3>
|
||||
<p className="font-sans text-gray-500 max-w-lg mx-auto mb-8">Porque cozinhar de verdade começa com ferramentas que respeitam o alimento que você comprou na feira.</p>
|
||||
<button className="text-xs font-bold uppercase tracking-widest bg-black text-white px-8 py-3 rounded-full hover:bg-gray-800 transition-colors">Visitar Loja</button>
|
||||
</div>
|
||||
|
||||
{/* Another Collection Row */}
|
||||
<div className="mb-20">
|
||||
<div className="flex items-center justify-between mb-10 pb-4 border-b border-gray-200">
|
||||
<h3 className="text-2xl font-normal text-black uppercase tracking-widest">COLEÇÃO ESTÚDIO</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-12">
|
||||
{[articlesToRender[1] || articlesToRender[0], articlesToRender[4] || articlesToRender[0]].map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="cursor-pointer group flex flex-col sm:flex-row gap-6 items-center">
|
||||
<div className="w-full sm:w-[250px] aspect-[4/3] overflow-hidden rounded-xl bg-gray-100 shrink-0">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={art.title}/>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#94A3B8] mb-2 block">{art.category}</span>
|
||||
<h4 className="text-2xl font-normal text-black leading-tight mb-4 group-hover:underline decoration-1 underline-offset-4">{art.title}</h4>
|
||||
<p className="font-sans text-gray-500 text-sm mb-4 line-clamp-2">{art.excerpt}</p>
|
||||
<span className="text-xs font-sans font-bold text-gray-400">{art.time} min de paciência</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="pb-32 bg-white">
|
||||
|
||||
<div className="max-w-[1200px] mx-auto px-6 sm:px-8 py-6">
|
||||
<a href="/" className="font-sans text-xs font-bold uppercase tracking-widest text-[#94A3B8] hover:text-black flex items-center gap-2 transition-colors">
|
||||
← {ui.back}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[800px] mx-auto px-6 sm:px-8 mt-10 mb-16 text-center">
|
||||
<span className="text-[10px] uppercase font-bold tracking-[0.3em] text-gray-400 block mb-6">{displayArticle.category}</span>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-normal text-black leading-[1.05] tracking-tight mb-8">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
<p className="font-sans text-lg text-gray-500 font-medium max-w-xl mx-auto mb-10">
|
||||
{displayArticle.excerpt} Receita testada à exaustão na nossa cozinha estúdio focando em distribuição visual elegante.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-8 font-sans text-xs font-bold uppercase tracking-widest text-black/60 border-t border-b border-gray-100 py-4">
|
||||
<div className="flex items-center gap-2"><Clock className="w-4 h-4 opacity-50"/> {displayArticle.time} {ui.readTime}</div>
|
||||
<div className="w-1 h-1 bg-gray-300 rounded-full"></div>
|
||||
<div className="flex items-center gap-2">Rendimento: 2 Porções</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1200px] mx-auto mb-20 px-6 sm:px-8">
|
||||
<div className="w-full aspect-[21/9] sm:aspect-video rounded-3xl overflow-hidden bg-gray-100">
|
||||
<img src={displayArticle.img} className="w-full h-full object-cover" alt={displayArticle.title} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[700px] mx-auto px-6">
|
||||
<div className="prose prose-lg prose-slate max-w-none font-serif text-gray-700 leading-relaxed prose-headings:font-normal prose-headings:text-black prose-headings:tracking-tight prose-a:text-black prose-a:border-b prose-a:border-black/30 hover:prose-a:border-black prose-a:no-underline marker:text-black">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Extreme Minimalist Elegant Footer */}
|
||||
<footer className="bg-black text-white font-sans py-24">
|
||||
<div className="max-w-[1200px] mx-auto px-6 sm:px-8 grid md:grid-cols-12 gap-16">
|
||||
<div className="md:col-span-5">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-10 h-10 border-2 border-white rounded-full flex items-center justify-center">
|
||||
<UtensilsCrossed className="w-5 h-5 text-white"/>
|
||||
</div>
|
||||
<span className="text-2xl font-black text-white tracking-tight uppercase">PANELINHA<span className="text-gray-500 font-light">CLONE</span></span>
|
||||
</div>
|
||||
<p className="text-gray-400 text-sm font-medium leading-relaxed max-w-sm">Culinária testada sem frescuras. Fotografia crua, layout espaçoso, foco extremo no alimento como combustível e união de mesa.</p>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-3">
|
||||
<h4 className="font-bold text-[10px] uppercase tracking-[0.2em] text-gray-500 mb-6">Políticas</h4>
|
||||
<ul className="space-y-4 text-sm text-gray-300 font-medium">
|
||||
<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">Cookies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-4">
|
||||
<h4 className="font-bold text-[10px] uppercase tracking-[0.2em] text-gray-500 mb-6">Social</h4>
|
||||
<div className="flex gap-6 mb-8">
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="text-gray-400 hover:text-white transition-colors"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
<h4 className="font-bold text-[10px] uppercase tracking-[0.2em] text-gray-500 mb-6">{ui.newsletter}</h4>
|
||||
<form className="flex border-b border-gray-600 pb-2">
|
||||
<input type="email" placeholder="Para onde mandamos as listas?" className="w-full bg-transparent border-none text-white outline-none placeholder:text-gray-600 text-sm font-medium" required/>
|
||||
<button type="submit" className="text-white text-[10px] font-bold uppercase tracking-widest hover:text-gray-400">Assinar</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
328
src/components/themes/HypeTheme.tsx
Normal file
328
src/components/themes/HypeTheme.tsx
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { ShoppingCart, ArrowRight, Menu, X, Plus, Info, Zap, Globe, Share2, Instagram, ChevronRight, TrendingUp, Heart, ShoppingBag } from 'lucide-react';
|
||||
|
||||
export default function HypeTheme({ posts, categories }: { posts?: any[], categories?: any[] }) {
|
||||
const handleSimulatedAction = (e: React.MouseEvent | React.FormEvent, msg: string) => {
|
||||
e.preventDefault();
|
||||
window.alert(`[SaaS Preview] Ação simulada: ${msg}\n\nEsta funcionalidade estará ativa após a publicação do seu ecommerce.`);
|
||||
};
|
||||
const [view, setView] = useState<'home' | 'product'>('home');
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
const [timeLeft, setTimeLeft] = useState({ h: 23, m: 59, s: 59 });
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTimeLeft(prev => {
|
||||
if (prev.s > 0) return { ...prev, s: prev.s - 1 };
|
||||
if (prev.m > 0) return { h: prev.h, m: prev.m - 1, s: 59 };
|
||||
if (prev.h > 0) return { h: prev.h - 1, m: 59, s: 59 };
|
||||
return prev;
|
||||
});
|
||||
}, 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [view]);
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: "OSMIUM PUFFER JACKET", price: "$380.00", image: "https://images.unsplash.com/photo-1551028719-00167b16eac5?auto=format&fit=crop&q=80&w=1200" },
|
||||
{ id: 2, name: "TACTICAL CARGO PANTS", price: "$145.00", image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 3, name: "HEAVYWEIGHT HOODIE", price: "$120.00", image: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 4, name: "COMBAT BOOTS HT-1", price: "$290.00", image: "https://images.unsplash.com/photo-1608256246200-53e635b5b65f?auto=format&fit=crop&q=80&w=800" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-white text-black font-['Inter',sans-serif] selection:bg-[#ff0000] selection:text-white">
|
||||
|
||||
{/* Dynamic Marquee Bar */}
|
||||
<div className="bg-[#ff0000] text-white text-[10px] font-black uppercase tracking-[0.3em] py-3 px-4 border-b-4 border-black overflow-hidden flex whitespace-nowrap">
|
||||
<div className="flex gap-20 items-center animate-[marquee_20s_linear_infinite]">
|
||||
{[1,2,3,4].map(i => (
|
||||
<div key={i} className="flex gap-20 items-center">
|
||||
<span>⚡ NEXT DROP IN: {String(timeLeft.h).padStart(2,'0')}:{String(timeLeft.m).padStart(2,'0')}:{String(timeLeft.s).padStart(2,'0')}</span>
|
||||
<span>NO RESTOCKS. NO REFUNDS. ALL SALES FINAL.</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Brutalist Navigation */}
|
||||
<nav className="border-b-4 border-black sticky top-0 z-50 bg-white">
|
||||
<div className="max-w-[1800px] mx-auto px-6 h-20 md:h-24 flex items-center justify-between">
|
||||
<div className="flex items-center gap-8">
|
||||
<button className="w-12 h-12 md:w-16 md:h-16 border-4 border-black flex items-center justify-center hover:bg-black hover:text-white transition-all shadow-[4px_4px_0_0_black] active:translate-x-1 active:translate-y-1 active:shadow-none">
|
||||
<Menu className="w-6 h-6 md:w-8 md:h-8" />
|
||||
</button>
|
||||
<a href="/" onClick={(e) => {e.preventDefault(); setView('home');}} className="text-4xl md:text-6xl font-black italic tracking-tighter leading-none hover:skew-x-[-10deg] transition-transform uppercase">
|
||||
HYPE<span className="text-[#ff0000]">BEAST</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="hidden lg:flex items-center gap-12 text-[11px] font-black uppercase tracking-[0.2em]">
|
||||
<a href="#" className="hover:text-[#ff0000] transition-colors">Drops</a>
|
||||
<a href="#" className="hover:text-[#ff0000] transition-colors">Archive</a>
|
||||
<a href="#" className="hover:text-[#ff0000] transition-colors">Manifesto</a>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setCartOpen(true)} className="bg-black text-white px-6 md:px-10 py-3 md:py-4 font-black uppercase tracking-widest text-[10px] md:text-xs hover:bg-[#ff0000] transition-colors flex items-center gap-3">
|
||||
CART <span className="bg-white text-black px-2 py-0.5 rounded-full text-[10px]">1</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{view === 'home' ? (
|
||||
<main>
|
||||
{/* Section 1: Split Hero */}
|
||||
<section className="grid lg:grid-cols-2 border-b-4 border-black">
|
||||
<div className="p-10 md:p-24 flex flex-col justify-center bg-[#f0f0f0] border-b-4 lg:border-b-0 lg:border-r-4 border-black relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 p-10 opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
<TrendingUp className="w-64 h-64 text-black" />
|
||||
</div>
|
||||
<span className="text-[#ff0000] text-xs font-black uppercase tracking-[0.4em] mb-10 flex items-center gap-4">
|
||||
<Zap className="w-5 h-5 animate-pulse" /> Drop_ID: 04.26_X
|
||||
</span>
|
||||
<h1 className="text-6xl md:text-[10rem] font-black uppercase tracking-tighter leading-[0.8] mb-12 italic">
|
||||
{products[0].name.split(' ')[0]} <br/> <span className="text-white bg-black px-4 inline-block -rotate-2">{products[0].name.split(' ').slice(1).join(' ')}</span>
|
||||
</h1>
|
||||
<p className="text-lg md:text-xl font-bold uppercase leading-tight mb-16 max-w-md border-l-8 border-[#ff0000] pl-8">
|
||||
Blindagem térmica de alta performance para o caos urbano. Resistência extrema. Edição absoluta.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-6">
|
||||
<button onClick={() => setView('product')} className="bg-[#ff0000] text-white border-4 border-black px-12 py-6 font-black uppercase tracking-widest text-sm shadow-[8px_8px_0_0_black] hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all inline-flex items-center justify-center gap-4">
|
||||
GET_ACCESS <ArrowRight className="w-6 h-6" />
|
||||
</button>
|
||||
<button className="bg-white text-black border-4 border-black px-12 py-6 font-black uppercase tracking-widest text-sm hover:bg-black hover:text-white transition-colors">
|
||||
LOOKBOOK
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative aspect-square lg:aspect-auto bg-black group overflow-hidden">
|
||||
<img src={products[0].image} className="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 group-hover:scale-110 transition-all duration-1000" alt="hero"/>
|
||||
<div className="absolute bottom-10 left-10 text-white font-black text-6xl italic tracking-tighter opacity-20 group-hover:opacity-50 transition-opacity">
|
||||
CORE_COLLECTION
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Product Grid */}
|
||||
<section className="bg-white">
|
||||
<div className="p-10 border-b-4 border-black flex justify-between items-center">
|
||||
<h2 className="text-4xl md:text-6xl font-black italic tracking-tighter uppercase">LATEST_DROPS</h2>
|
||||
<button className="text-xs font-black uppercase tracking-widest border-b-4 border-[#ff0000] pb-1">View Archive</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||
{products.map((p, idx) => (
|
||||
<div key={p.id} className={`group cursor-pointer border-black flex flex-col ${idx % 3 !== 2 ? 'lg:border-r-4' : ''} border-b-4`} onClick={() => setView('product')}>
|
||||
<div className="aspect-[4/5] bg-gray-100 relative overflow-hidden border-b-4 border-black">
|
||||
<img src={p.image} className="w-full h-full object-cover grayscale group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700" alt="product"/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black text-white p-4 font-black text-[10px] uppercase tracking-widest translate-y-full group-hover:translate-y-0 transition-transform">
|
||||
Authorized_Asset // Protocol_Verified
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 flex flex-col flex-1 bg-white group-hover:bg-black transition-colors group-hover:text-white">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-[#ff0000]">Drop_0{idx+1}</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-widest opacity-40">2026_COLLECTION</span>
|
||||
</div>
|
||||
<h3 className="text-3xl font-black uppercase tracking-tighter mb-8 group-hover:italic transition-all">{p.name}</h3>
|
||||
<div className="mt-auto flex justify-between items-center pt-8 border-t border-black/10 group-hover:border-white/20">
|
||||
<span className="text-2xl font-black">{p.price}</span>
|
||||
<ArrowRight className="w-8 h-8 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: High Intensity CTA */}
|
||||
<section className="bg-[#ff0000] p-10 md:p-32 text-center text-white border-b-4 border-black relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: `radial-gradient(circle, black 1px, transparent 1px)`, backgroundSize: '20px 20px' }}></div>
|
||||
<h2 className="text-6xl md:text-9xl font-black italic tracking-tighter mb-12 uppercase italic relative z-10">THE_SYSTEM_IS_LIVE</h2>
|
||||
<p className="text-xl md:text-2xl font-black uppercase tracking-widest mb-16 max-w-2xl mx-auto relative z-10">Junte-se à rede de elite. Receba alertas via SMS 15 minutos antes de cada drop. Sem spam. Apenas hardware.</p>
|
||||
<div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-6 relative z-10">
|
||||
<input type="email" placeholder="ENTER_EMAIL_FOR_ACCESS" className="flex-1 bg-white text-black border-4 border-black p-6 font-black uppercase placeholder-black/30 outline-none focus:shadow-[10px_10px_0_0_black] transition-all" />
|
||||
<button className="bg-black text-white px-12 py-6 font-black uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-all shadow-[10px_10px_0_0_white]">
|
||||
AUTHORIZE
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- PRODUCT DETAIL VIEW --- */
|
||||
<main>
|
||||
<div className="max-w-[1800px] mx-auto grid lg:grid-cols-2 border-b-4 border-black mb-40">
|
||||
<div className="border-b-4 lg:border-b-0 lg:border-r-4 border-black bg-[#f0f0f0] p-6 md:p-12">
|
||||
<div className="sticky top-32">
|
||||
<div className="aspect-[4/5] border-4 border-black bg-white relative overflow-hidden shadow-[20px_20px_0_0_black]">
|
||||
<img src={products[0].image} className="w-full h-full object-cover" alt="product detail" />
|
||||
<div className="absolute top-6 left-6 bg-black text-white px-4 py-2 text-xs font-black uppercase tracking-widest italic">
|
||||
Featured_Asset
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-4 mt-12">
|
||||
{[1,2,3,4].map(i => (
|
||||
<div key={i} className="aspect-square border-4 border-black bg-white hover:border-[#ff0000] cursor-pointer transition-colors p-2">
|
||||
<img src={products[0].image} className="w-full h-full object-cover opacity-50 hover:opacity-100" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-10 md:p-24 flex flex-col">
|
||||
<div className="mb-12">
|
||||
<span className="text-[#ff0000] text-xs font-black uppercase tracking-[0.4em] mb-6 block uppercase">Asset_Code: OS_PUFF_V4</span>
|
||||
<h1 className="text-5xl md:text-8xl font-black uppercase tracking-tighter leading-[0.8] mb-10 italic">{products[0].name}</h1>
|
||||
<div className="text-4xl font-black bg-black text-white w-fit px-8 py-4 italic">{products[0].price}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 mb-20 border-l-8 border-[#ff0000] pl-10">
|
||||
<h3 className="text-xs font-black uppercase tracking-[0.4em] text-black/40">DROP_MANIFESTO</h3>
|
||||
<p className="text-2xl font-black uppercase text-black leading-tight italic">
|
||||
Projetado para resistir ao vácuo urbano. Casca exterior em nylon ripstop 100% à prova d'água com preenchimento sintético de alta densidade. Hardware de metal pesado e branding minimalista de alto contraste.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-8 text-[10px] font-black uppercase tracking-widest text-black/30">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-black">Material Matrix</span>
|
||||
<span>RIPSTOP // SYNTH_DOWN</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-black">Temp_Rating</span>
|
||||
<span>-20°C // ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-20">
|
||||
<div className="space-y-6">
|
||||
<span className="text-xs font-black uppercase tracking-widest text-black/40">Select_Size</span>
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{['S', 'M', 'L', 'XL'].map(s => (
|
||||
<button key={s} className="border-4 border-black py-4 font-black text-xl hover:bg-black hover:text-white transition-all active:bg-[#ff0000]">{s}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setCartOpen(true)} className="w-full bg-[#ff0000] text-white border-4 border-black py-8 text-3xl font-black uppercase italic tracking-tighter shadow-[12px_12px_0_0_black] hover:translate-x-2 hover:translate-y-2 hover:shadow-none transition-all flex justify-center items-center gap-6">
|
||||
ACQUIRE_ASSET <ShoppingCart className="w-10 h-10" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Similar Assets */}
|
||||
{view === 'product' && (
|
||||
<div className="max-w-[1800px] mx-auto p-10 md:p-24 border-b-4 border-black">
|
||||
<h2 className="text-4xl md:text-6xl font-black italic tracking-tighter uppercase mb-20">SIMILAR_ASSETS // PROTOCOL</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{products.slice(1).map((p) => (
|
||||
<div key={p.id} className="group cursor-pointer border-4 border-black p-6 hover:bg-black hover:text-white transition-all" onClick={() => setView('product')}>
|
||||
<div className="aspect-[4/5] bg-gray-100 border-4 border-black relative overflow-hidden mb-8">
|
||||
<img src={p.image} className="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all" alt="product"/>
|
||||
</div>
|
||||
<h3 className="text-2xl font-black uppercase italic mb-4">{p.name}</h3>
|
||||
<span className="text-xl font-black text-[#ff0000]">{p.price}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Massive Brutalist Footer */}
|
||||
<footer className="border-t-4 border-black bg-black text-white py-32 px-10">
|
||||
<div className="max-w-[1800px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-24 mb-40">
|
||||
<div className="lg:col-span-2">
|
||||
<h2 className="text-6xl md:text-9xl font-black italic tracking-tighter mb-12 uppercase italic">HYPE<span className="text-[#ff0000]">BEAST</span></h2>
|
||||
<p className="text-2xl font-black uppercase tracking-tight text-white/40 leading-none max-w-xl">ESTABELECENDO O PROTOCOLO DE ESTILO URBANO DESDE 2026. SEM DESCULPAS. SEM RETROCESSOS.</p>
|
||||
<div className="flex gap-10 mt-20">
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Instagram')} className="w-16 h-16 border-4 border-white/20 flex items-center justify-center hover:bg-[#ff0000] hover:border-[#ff0000] transition-all"><Instagram className="w-8 h-8"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Site')} className="w-16 h-16 border-4 border-white/20 flex items-center justify-center hover:bg-[#ff0000] hover:border-[#ff0000] transition-all"><Globe className="w-8 h-8"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Share')} className="w-16 h-16 border-4 border-white/20 flex items-center justify-center hover:bg-[#ff0000] hover:border-[#ff0000] transition-all"><Share2 className="w-8 h-8"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#ff0000] text-sm font-black uppercase tracking-[0.4em] mb-12 border-b-4 border-white/10 pb-4 inline-block">POLICIES_CORE</h4>
|
||||
<ul className="space-y-8 text-xs font-black uppercase tracking-widest text-white/40">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Privacidade')} className="hover:text-white transition-colors flex items-center gap-4">PRIVACIDADE_DATA <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Termos')} className="hover:text-white transition-colors flex items-center gap-4">TERMOS_SERVICO <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Cookies')} className="hover:text-white transition-colors flex items-center gap-4">COOKIE_PROTOCOL <ArrowRight className="w-4 h-4"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#ff0000] text-sm font-black uppercase tracking-[0.4em] mb-12 border-b-4 border-white/10 pb-4 inline-block">NETWORK_ACCESS</h4>
|
||||
<ul className="space-y-8 text-xs font-black uppercase tracking-widest text-white/40">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Suporte')} className="hover:text-white transition-colors flex items-center gap-4">TERMINAL_SUPPORT <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'FAQ')} className="hover:text-white transition-colors flex items-center gap-4">KNOWLEDGE_BASE <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Envios')} className="hover:text-white transition-colors flex items-center gap-4">GLOBAL_LOGISTICS <ArrowRight className="w-4 h-4"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-20 border-t-4 border-white/5 flex flex-col md:flex-row justify-between items-center gap-10 text-[10px] font-black uppercase tracking-[0.8em] text-white/20 text-center">
|
||||
<span>© {new Date().getFullYear()} HYPEBEAST_OPERATIONS. DECODED BY AUTOBLOG.</span>
|
||||
<div className="flex items-center gap-10">
|
||||
<span>STATUS: FULL_SYNC</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
|
||||
<span>SYSTEM_ONLINE</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Brutalist Cart Sidebar */}
|
||||
{cartOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
<div className="absolute inset-0 bg-[#ff0000]/10 backdrop-blur-sm cursor-pointer" onClick={() => setCartOpen(false)}></div>
|
||||
<div className="w-full max-w-2xl bg-white border-l-8 border-black h-full flex flex-col relative z-[110] shadow-[-30px_0_0_0_#ff0000]">
|
||||
<div className="p-10 border-b-8 border-black bg-black text-white flex justify-between items-center">
|
||||
<h2 className="text-4xl font-black italic tracking-tighter uppercase">BUFFER_01</h2>
|
||||
<button onClick={() => setCartOpen(false)} className="hover:text-[#ff0000] transition-all"><X className="w-12 h-12"/></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-10 bg-[#f0f0f0]">
|
||||
<div className="flex gap-8 p-6 bg-white border-8 border-black shadow-[15px_15px_0_0_#ff0000]">
|
||||
<div className="w-32 h-44 bg-gray-100 border-4 border-black shrink-0 relative overflow-hidden">
|
||||
<img src={products[0].image} className="w-full h-full object-cover grayscale contrast-125" alt="item"/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<h3 className="text-2xl font-black uppercase tracking-tighter leading-none mb-4">{products[0].name}</h3>
|
||||
<p className="text-[10px] font-black uppercase text-black/30">Protocol: OS_PUFF_V4 | Size: M</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-end border-t-4 border-black/5 pt-6 mt-6">
|
||||
<div className="flex items-center border-4 border-black font-black text-xl">
|
||||
<button className="px-5 py-2 hover:bg-black hover:text-white transition-colors">-</button>
|
||||
<span className="px-5 py-2 border-x-4 border-black">01</span>
|
||||
<button className="px-5 py-2 hover:bg-black hover:text-white transition-colors">+</button>
|
||||
</div>
|
||||
<p className="text-3xl font-black italic tracking-tighter">{products[0].price}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-10 border-t-8 border-black bg-white">
|
||||
<div className="flex justify-between items-center mb-10 text-4xl font-black italic tracking-tighter uppercase p-6 bg-black text-white">
|
||||
<span>TOTAL_VAL</span>
|
||||
<span>{products[0].price}</span>
|
||||
</div>
|
||||
<button className="w-full bg-[#ff0000] text-white border-8 border-black py-8 text-4xl font-black uppercase italic tracking-tighter shadow-[15px_15px_0_0_black] hover:translate-x-3 hover:translate-y-3 hover:shadow-none transition-all flex justify-center items-center gap-6">
|
||||
CHECKOUT_SYNC <ArrowRight className="w-10 h-10" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
206
src/components/themes/LinearTheme.tsx
Normal file
206
src/components/themes/LinearTheme.tsx
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
import { ArrowLeft, ArrowRight, Search, Send, ArrowUpRight, ShieldCheck, Cpu, FolderLock, LockKeyhole, Wifi, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar ao Arquivo',
|
||||
search: 'Buscar no manifesto...',
|
||||
heroTitle: 'ENGINEERING',
|
||||
heroAccent: 'AT SCALE.',
|
||||
heroDesc: 'Linear Tech Blog. Onde detalhamos a arquitetura do produto mais rápido construído nos últimos dez anos.',
|
||||
subTitle: 'INSIGHTS DA PRODUÇÃO',
|
||||
subDesc: 'Acesso VIP aos changelogs ocultos.',
|
||||
subBtn: 'Confirmar',
|
||||
popularPosts: 'HOTFIXES',
|
||||
readTime: 'MIN LECTURE',
|
||||
sidebarAd: 'APRESENTADO POR AWS LATAM',
|
||||
companyQuote: '"Nosso roadmap ignora requests verbais. Construímos focados na métrica de frames-per-second da interface."'
|
||||
}
|
||||
};
|
||||
|
||||
export default function LinearTheme({ 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 || 'ARQUITETURA',
|
||||
time: p.data.readTime || '10',
|
||||
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 || 'ARQUITETURA',
|
||||
time: currentArticle.data.readTime || '10',
|
||||
date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje'
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="linear-scroll-container bg-[#080808] text-[#EEEEEE] min-h-screen font-sans selection:bg-white selection:text-black flex flex-col uppercase tracking-wide">
|
||||
|
||||
{/* Utility Header Top */}
|
||||
<div className="h-10 border-b border-white/[0.08] bg-[#000000] flex items-center justify-between px-6 sticky top-0 z-50 backdrop-blur-2xl">
|
||||
<div className="flex gap-4">
|
||||
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse mt-1.5 hidden sm:block"></span>
|
||||
<span className="text-[9px] font-bold tracking-[0.2em] text-white/50">{ui.sidebarAd}</span>
|
||||
</div>
|
||||
<nav className="flex items-center gap-6 text-[9px] font-black tracking-[0.1em] text-white/50">
|
||||
<a href="/" className="hover:text-white">COMPANY</a>
|
||||
<a href="/login" className="hover:text-white px-3 py-1 border border-white/20 rounded-full">AUTH_NODE</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<div className="flex-1 flex flex-col lg:flex-row relative">
|
||||
|
||||
{/* LEFT HALF (Sticky 50%) */}
|
||||
<div className="w-full lg:w-[45%] xl:w-[40%] bg-gradient-to-b from-[#111111] to-[#050505] lg:fixed lg:h-[calc(100vh-40px)] border-r border-white/[0.08] flex flex-col justify-between p-10 lg:p-16 z-10 overflow-y-auto">
|
||||
|
||||
{/* Header Left */}
|
||||
<div>
|
||||
<a href="/" className="flex items-center gap-4 cursor-pointer mb-16">
|
||||
<div className="w-10 h-10 border-2 border-white/20 rounded-xl flex items-center justify-center font-serif text-xl font-bold bg-white/5">L</div>
|
||||
</a>
|
||||
|
||||
<h1 className="text-5xl xl:text-6xl font-medium tracking-tight leading-[1.1] text-white mb-6 lowercase font-serif italic pr-4">
|
||||
<span className="not-italic uppercase font-sans font-medium">{ui.heroTitle}</span><br/> {ui.heroAccent}
|
||||
</h1>
|
||||
|
||||
<p className="text-sm font-light text-[#888888] leading-relaxed max-w-sm mb-12 normal-case tracking-normal">
|
||||
{ui.heroDesc} {ui.companyQuote}
|
||||
</p>
|
||||
|
||||
<div className="w-full max-w-sm">
|
||||
<span className="text-[10px] font-bold tracking-[0.2em] text-white/40 mb-3 block flex items-center gap-2"><Send className="w-3 h-3"/> {ui.subTitle}</span>
|
||||
<form className="flex gap-2">
|
||||
<input type="email" required placeholder="name@domain.com" className="w-full bg-black/40 border-b-2 border-white/20 focus:border-white px-2 py-3 text-sm normal-case outline-none transition-colors" />
|
||||
<button type="submit" className="border-2 border-white px-4 text-[10px] font-black tracking-widest hover:bg-white hover:text-black transition-colors">{ui.subBtn}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mega Mockup Sponsor Ad Block */}
|
||||
<div className="mt-16 lg:mt-auto pt-10 border-t border-white/[0.08] cursor-pointer group">
|
||||
<span className="text-[9px] font-bold tracking-[0.2em] text-white/40 mb-4 block">{ui.sidebarAd} // MREC SPONSOR</span>
|
||||
<div className="bg-[#111111] border border-white/10 rounded-2xl p-6 relative overflow-hidden group-hover:border-white/30 transition-colors">
|
||||
<div className="absolute -right-10 -top-10 opacity-20 group-hover:opacity-40 transition-opacity"><Cpu className="w-40 h-40" /></div>
|
||||
<h4 className="text-lg font-medium mb-2 relative z-10">AWS Startup Scaling Credit.</h4>
|
||||
<p className="text-xs text-[#888888] normal-case tracking-normal mb-6 max-w-[200px] relative z-10">Get credits for fast-growing B2B infrastructure.</p>
|
||||
<div className="flex items-center text-[10px] tracking-widest font-bold text-white relative z-10">APPLY NOW <ArrowRight className="w-3 h-3 ml-2 group-hover:translate-x-1 transition-transform" /></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* RIGHT HALF (Scrollable 55%) */}
|
||||
<div className="w-full lg:w-[55%] xl:w-[60%] lg:ml-auto min-h-screen bg-[#080808] p-6 sm:p-10 lg:p-16 flex flex-col gap-10">
|
||||
|
||||
{/* Search Top Right */}
|
||||
<div className="flex justify-end mb-4">
|
||||
<div className="flex items-center gap-3 bg-white/5 border border-white/10 px-4 py-3 rounded-full text-xs text-[#888888] font-medium tracking-normal normal-case w-full sm:w-64 cursor-text">
|
||||
<Search className="w-4 h-4" /> {ui.search}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feed List Grid */}
|
||||
<div className="flex flex-col gap-6">
|
||||
{articlesToRender.map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id} className="block group">
|
||||
<article className="bg-white/[0.02] hover:bg-white/[0.04] border border-white/[0.05] hover:border-white/20 p-8 sm:p-10 rounded-3xl transition-all duration-300 relative overflow-hidden">
|
||||
{/* Visual Hover effect */}
|
||||
<div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-white/[0.03] to-transparent translate-x-32 group-hover:translate-x-0 transition-transform duration-500"></div>
|
||||
|
||||
<div className="flex items-center gap-3 text-[10px] font-bold tracking-[0.2em] text-[#888888] mb-6">
|
||||
<span className="text-white bg-white/10 px-3 py-1 rounded-full">{art.tag}</span>
|
||||
<span>•</span>
|
||||
<span>{art.date}</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl sm:text-3xl font-medium tracking-tight leading-[1.1] mb-4 text-[#EEEEEE] group-hover:text-white normal-case">{art.title}</h2>
|
||||
<p className="text-[#888888] text-sm leading-relaxed normal-case tracking-normal max-w-xl group-hover:text-[#a0a0a0] transition-colors">{art.excerpt}</p>
|
||||
|
||||
<div className="mt-8 flex items-center justify-between border-t border-white/5 pt-6 text-[10px] font-bold tracking-widest text-[#555555]">
|
||||
<span className="flex items-center gap-2"><ArrowUpRight className="w-4 h-4" /> LEIA MAIS</span>
|
||||
<span>{art.time} {ui.readTime}</span>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer embedded in right pane */}
|
||||
<footer className="mt-10 border-t border-white/10 pt-10 text-center normal-case tracking-normal text-[#555555] text-xs pb-10">
|
||||
<div className="flex justify-center gap-6 mb-6">
|
||||
<a href="#" className="hover:text-white transition-colors"><Globe className="w-4 h-4"/></a>
|
||||
<a href="#" className="hover:text-white transition-colors"><Share2 className="w-4 h-4"/></a>
|
||||
<a href="#" className="hover:text-white transition-colors"><Instagram className="w-4 h-4"/></a>
|
||||
</div>
|
||||
<div className="flex justify-center gap-8 mb-6 uppercase font-black tracking-widest text-[9px]">
|
||||
<a href="/privacy" className="hover:text-white transition-colors">PRIVACY</a>
|
||||
<a href="/terms" className="hover:text-white transition-colors">TERMS</a>
|
||||
</div>
|
||||
© {new Date().getFullYear()} Linear Design Log. Published in global edge.
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<div className="flex-1 flex flex-col lg:flex-row min-h-screen">
|
||||
|
||||
{/* Left Hero Split Content */}
|
||||
<div className="w-full lg:w-[45%] xl:w-[40%] bg-[#0f0f0f] lg:fixed lg:h-[calc(100vh-40px)] border-r border-white/[0.08] flex flex-col p-10 lg:p-16 z-10 relative overflow-hidden">
|
||||
{/* Huge background gradient inside left panel */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#222] via-[#0f0f0f] to-[#000] opacity-50 pointer-events-none"></div>
|
||||
|
||||
<div className="relative z-10 h-full flex flex-col">
|
||||
<a href="/" className="mb-12 text-[10px] font-black tracking-[0.2em] text-[#888888] hover:text-white transition-colors flex items-center gap-2 w-fit border border-white/10 px-4 py-2 rounded-full bg-black/50 backdrop-blur-sm">
|
||||
<ArrowLeft className="w-4 h-4" /> {ui.back}
|
||||
</a>
|
||||
|
||||
<div className="mt-auto pb-10">
|
||||
<div className="flex items-center gap-3 text-[10px] font-bold tracking-[0.2em] text-white mb-6">
|
||||
<span className="bg-white text-black px-3 py-1 rounded-full">{displayArticle.tag}</span>
|
||||
<span className="text-[#888888]">{displayArticle.time} {ui.readTime}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl lg:text-5xl font-medium tracking-tight leading-[1.05] text-white lowercase font-serif italic mb-6">
|
||||
<span className="not-italic uppercase font-sans font-medium">{displayArticle.title}</span>
|
||||
</h1>
|
||||
<p className="text-lg text-[#888888] normal-case tracking-normal leading-relaxed max-w-sm">
|
||||
{displayArticle.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Scrollable Content Split */}
|
||||
<div className="w-full lg:w-[55%] xl:w-[60%] lg:ml-auto min-h-screen bg-[#050505] p-10 lg:p-24 relative">
|
||||
<div className="max-w-[700px] mx-auto">
|
||||
|
||||
<div className="flex items-center gap-6 pb-12 border-b border-white/10 mb-16">
|
||||
<div className="w-12 h-12 bg-white/10 rounded-full border border-white/20"></div>
|
||||
<div className="normal-case tracking-normal">
|
||||
<h4 className="text-sm font-bold text-white mb-1">Architect Team</h4>
|
||||
<p className="text-xs text-[#555555]">{displayArticle.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert prose-lg md:prose-xl max-w-none font-serif text-[#a0a0a0] leading-relaxed tracking-normal normal-case prose-headings:font-sans prose-headings:uppercase prose-headings:tracking-wider prose-headings:text-sm prose-headings:font-bold prose-headings:text-white">
|
||||
{children}
|
||||
</div>
|
||||
|
||||
<div className="mt-32 border-t border-white/10 py-12 flex justify-between items-center text-[10px] font-black tracking-[0.2em] text-[#888888]">
|
||||
<a href="/"><ArrowLeft className="inline w-3 h-3 mr-2"/> VOLTAR PARA HOME</a>
|
||||
<a href="/">SISTEMAS OK <Wifi className="inline w-3 h-3 ml-2"/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
317
src/components/themes/LuxeTheme.tsx
Normal file
317
src/components/themes/LuxeTheme.tsx
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { ShoppingBag, ArrowRight, Menu, X, Globe, Share2, Instagram, Star, ChevronLeft, ChevronRight, Heart, Search, ShieldCheck } from 'lucide-react';
|
||||
|
||||
export default function LuxeTheme({ posts, categories }: { posts?: any[], categories?: any[] }) {
|
||||
const handleSimulatedAction = (e: React.MouseEvent | React.FormEvent, msg: string) => {
|
||||
e.preventDefault();
|
||||
window.alert(`[SaaS Preview] Ação simulada: ${msg}\n\nEsta funcionalidade estará ativa após a publicação da sua loja de luxo.`);
|
||||
};
|
||||
const [view, setView] = useState<'home' | 'product'>('home');
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
const [activeSlide, setActiveSlide] = useState(0);
|
||||
|
||||
const heroSlides = [
|
||||
{ title: "Essential Radiance", subtitle: "SS26 Collection", img: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&q=80&w=1800" },
|
||||
{ title: "Timeless Grace", subtitle: "Atelier Series", img: "https://images.unsplash.com/photo-1445205170230-053b83016050?auto=format&fit=crop&q=80&w=1800" }
|
||||
];
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: "Silk Crepe Evening Dress", price: "$1,250", category: "Dresses", img: "https://images.unsplash.com/photo-1539109132381-31512579f555?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 2, name: "Italian Leather Clutch", price: "$890", category: "Accessories", img: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 3, name: "Cashmere Wrap Coat", price: "$2,100", category: "Outerwear", img: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 4, name: "Diamond Stud Earrings", price: "$4,500", category: "Jewelry", img: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?auto=format&fit=crop&q=80&w=800" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [view]);
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-[#FAF9F6] text-[#1A1A1A] font-['Playfair_Display',serif] selection:bg-[#C5A059] selection:text-white">
|
||||
|
||||
{/* Luxury Announcement Bar */}
|
||||
<div className="bg-[#1A1A1A] text-[#C5A059] text-[10px] font-medium uppercase tracking-[0.4em] py-3 text-center border-b border-[#C5A059]/20">
|
||||
Complimentary Global Shipping on Orders Above $2,000
|
||||
</div>
|
||||
|
||||
{/* Elegant Navigation */}
|
||||
<nav className="sticky top-0 z-50 bg-[#FAF9F6]/80 backdrop-blur-xl border-b border-[#1A1A1A]/5">
|
||||
<div className="max-w-[1600px] mx-auto px-10 h-28 flex items-center justify-between">
|
||||
<div className="flex items-center gap-12">
|
||||
<button className="text-[#1A1A1A] hover:text-[#C5A059] transition-colors"><Menu className="w-7 h-7" /></button>
|
||||
<nav className="hidden lg:flex gap-10 text-[11px] font-medium uppercase tracking-[0.3em] font-sans">
|
||||
<a href="#" className="hover:text-[#C5A059] transition-colors">Collection</a>
|
||||
<a href="#" className="hover:text-[#C5A059] transition-colors">Heritage</a>
|
||||
<a href="#" className="hover:text-[#C5A059] transition-colors">World of Luxe</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<a href="/" onClick={(e) => {e.preventDefault(); setView('home');}} className="text-4xl md:text-5xl font-light tracking-[0.3em] uppercase absolute left-1/2 -translate-x-1/2">
|
||||
LUXE
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-10">
|
||||
<button className="text-[#1A1A1A] hover:text-[#C5A059] transition-colors"><Search className="w-6 h-6"/></button>
|
||||
<button onClick={() => setCartOpen(true)} className="flex items-center gap-3 text-[11px] font-medium uppercase tracking-[0.2em] font-sans group">
|
||||
<ShoppingBag className="w-6 h-6 group-hover:text-[#C5A059] transition-colors" />
|
||||
<span className="hidden md:block">Bag (0)</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{view === 'home' ? (
|
||||
<main>
|
||||
{/* Section 1: Cinematic Hero */}
|
||||
<section className="relative h-[90vh] overflow-hidden bg-black flex items-center justify-center">
|
||||
<img src={heroSlides[activeSlide].img} className="absolute inset-0 w-full h-full object-cover opacity-60 animate-[scale-slow_20s_ease-in-out_infinite]" alt="hero"/>
|
||||
<div className="relative z-10 text-center text-white max-w-4xl px-6">
|
||||
<span className="text-[12px] uppercase tracking-[0.6em] mb-8 block animate-[fade-in-up_1s_ease-out]">{heroSlides[activeSlide].subtitle}</span>
|
||||
<h1 className="text-6xl md:text-[8rem] font-light italic mb-12 animate-[fade-in-up_1.2s_ease-out]">{heroSlides[activeSlide].title}</h1>
|
||||
<button onClick={() => setView('product')} className="bg-white text-[#1A1A1A] px-16 py-6 text-[11px] font-bold uppercase tracking-[0.4em] hover:bg-[#C5A059] hover:text-white transition-all duration-500 animate-[fade-in-up_1.4s_ease-out]">
|
||||
Discover Now
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Slide Controls */}
|
||||
<div className="absolute bottom-16 left-1/2 -translate-x-1/2 flex items-center gap-12 text-white">
|
||||
<button onClick={() => setActiveSlide(0)} className={`w-3 h-3 rounded-full border border-white transition-all ${activeSlide === 0 ? 'bg-[#C5A059] border-[#C5A059] w-12' : ''}`}></button>
|
||||
<button onClick={() => setActiveSlide(1)} className={`w-3 h-3 rounded-full border border-white transition-all ${activeSlide === 1 ? 'bg-[#C5A059] border-[#C5A059] w-12' : ''}`}></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Curated Selection */}
|
||||
<section className="py-40 px-10 max-w-[1600px] mx-auto">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-24 border-b border-[#1A1A1A]/10 pb-12">
|
||||
<div>
|
||||
<span className="text-[11px] uppercase tracking-[0.4em] text-[#C5A059] mb-4 block">The Selection</span>
|
||||
<h2 className="text-5xl md:text-7xl font-light italic">Timeless Pieces</h2>
|
||||
</div>
|
||||
<button className="text-[11px] font-bold uppercase tracking-[0.3em] font-sans hover:text-[#C5A059] transition-colors flex items-center gap-4">View All Collections <ArrowRight className="w-5 h-5"/></button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16">
|
||||
{products.map((p, idx) => (
|
||||
<div key={p.id} className="group cursor-pointer" onClick={() => setView('product')}>
|
||||
<div className="aspect-[3/4] bg-white relative overflow-hidden mb-8">
|
||||
<img src={p.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="product"/>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
|
||||
<button className="absolute bottom-0 left-0 right-0 bg-[#1A1A1A] text-white py-6 text-[10px] font-bold uppercase tracking-[0.3em] translate-y-full group-hover:translate-y-0 transition-transform duration-500 font-sans">
|
||||
Add to Bag
|
||||
</button>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<span className="text-[10px] uppercase tracking-[0.3em] text-[#C5A059] mb-3 block font-sans">{p.category}</span>
|
||||
<h3 className="text-xl italic mb-3 group-hover:text-[#C5A059] transition-colors">{p.name}</h3>
|
||||
<span className="text-lg font-sans font-light tracking-widest">{p.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Heritage Block */}
|
||||
<section className="bg-[#1A1A1A] text-white py-40 px-10">
|
||||
<div className="max-w-[1200px] mx-auto grid lg:grid-cols-2 gap-32 items-center">
|
||||
<div className="relative aspect-[4/5] overflow-hidden">
|
||||
<img src="https://images.unsplash.com/photo-1549497538-301288c966df?auto=format&fit=crop&q=80&w=1200" className="w-full h-full object-cover grayscale opacity-80" alt="heritage"/>
|
||||
<div className="absolute inset-0 border-[40px] border-[#1A1A1A]"></div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center">
|
||||
<span className="text-[11px] uppercase tracking-[0.6em] text-[#C5A059] mb-10 block">Since 1924</span>
|
||||
<h2 className="text-5xl md:text-7xl font-light italic mb-12 leading-tight">Craftsmanship <br/> Reimagined</h2>
|
||||
<p className="text-xl font-light text-white/50 leading-relaxed mb-16 italic">
|
||||
"Every stitch tells a story of dedication. We don't just create fashion; we craft artifacts of beauty that withstand the test of time."
|
||||
</p>
|
||||
<button className="border border-[#C5A059] text-[#C5A059] px-12 py-5 text-[11px] font-bold uppercase tracking-[0.4em] hover:bg-[#C5A059] hover:text-white transition-all w-fit">
|
||||
Our Heritage
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 4: Exclusive Newsletter */}
|
||||
<section className="py-40 text-center px-6">
|
||||
<span className="text-[11px] uppercase tracking-[0.4em] text-[#C5A059] mb-8 block">Private Circle</span>
|
||||
<h2 className="text-4xl md:text-6xl font-light italic mb-12">Invitations & Early Access</h2>
|
||||
<p className="text-lg font-light italic text-[#1A1A1A]/40 mb-16 max-w-xl mx-auto">Subscribe to receive exclusive collection updates and private boutique invitations.</p>
|
||||
<div className="max-w-2xl mx-auto border-b-2 border-[#1A1A1A] pb-4 flex items-center">
|
||||
<input type="email" placeholder="YOUR EMAIL ADDRESS" className="flex-1 bg-transparent py-4 text-sm font-sans tracking-widest outline-none placeholder:text-[#1A1A1A]/20" />
|
||||
<button className="text-[11px] font-bold uppercase tracking-[0.3em] font-sans hover:text-[#C5A059] transition-colors">Join Now</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- PRODUCT VIEW --- */
|
||||
<main className="max-w-[1600px] mx-auto px-10 py-32">
|
||||
<div className="grid lg:grid-cols-12 gap-24 mb-40">
|
||||
<div className="lg:col-span-7 grid grid-cols-2 gap-8">
|
||||
<div className="col-span-2 aspect-square bg-white relative overflow-hidden group">
|
||||
<img src={products[0].img} className="w-full h-full object-cover" alt="product main"/>
|
||||
</div>
|
||||
<div className="aspect-[3/4] bg-white overflow-hidden"><img src={products[0].img} className="w-full h-full object-cover opacity-70" alt="detail 1"/></div>
|
||||
<div className="aspect-[3/4] bg-white overflow-hidden"><img src={products[0].img} className="w-full h-full object-cover opacity-70" alt="detail 2"/></div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-5 flex flex-col justify-center">
|
||||
<div className="mb-16">
|
||||
<span className="text-[11px] uppercase tracking-[0.4em] text-[#C5A059] mb-6 block">The Atelier Collection</span>
|
||||
<h1 className="text-5xl md:text-7xl font-light italic mb-10 leading-tight">{products[0].name}</h1>
|
||||
<div className="text-3xl font-sans font-light tracking-widest text-[#1A1A1A]">{products[0].price}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 mb-20 border-t border-[#1A1A1A]/10 pt-16">
|
||||
<div className="flex flex-col gap-6">
|
||||
<span className="text-[11px] uppercase tracking-[0.4em] font-sans font-bold">Size Selector</span>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
{['FR 36', 'FR 38', 'FR 40', 'FR 42'].map(s => (
|
||||
<button key={s} className="px-8 py-4 border border-[#1A1A1A]/10 text-[11px] font-medium uppercase tracking-widest hover:border-[#1A1A1A] transition-all font-sans">{s}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<span className="text-[11px] uppercase tracking-[0.4em] font-sans font-bold block">The Atelier Story</span>
|
||||
<p className="text-xl font-light italic leading-relaxed text-[#1A1A1A]/60">
|
||||
A masterpiece of modern tailoring. Crafted from the finest Italian silk crepe, this evening gown features a subtle draped neckline and a silhouette that celebrates the feminine form with absolute grace. Designed in our Paris atelier, every piece represents over 40 hours of hand-finished craftsmanship.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-10 text-[10px] uppercase tracking-[0.2em] font-sans font-bold text-[#1A1A1A]/40 border-y border-[#1A1A1A]/5 py-10">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[#C5A059]">Composition</span>
|
||||
<span>100% Italian Silk</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[#C5A059]">Care</span>
|
||||
<span>Dry Clean Only</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setCartOpen(true)} className="w-full bg-[#1A1A1A] text-white py-8 text-[11px] font-bold uppercase tracking-[0.5em] hover:bg-[#C5A059] transition-all duration-500 font-sans shadow-xl">
|
||||
Add to Bag
|
||||
</button>
|
||||
|
||||
<div className="mt-16 flex items-center gap-10 text-[10px] uppercase tracking-[0.2em] font-sans font-bold text-[#1A1A1A]/40">
|
||||
<span className="flex items-center gap-2"><ShieldCheck className="w-4 h-4"/> Authenticity Guaranteed</span>
|
||||
<span className="flex items-center gap-2"><Globe className="w-4 h-4"/> White Glove Delivery</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Related Boutique */}
|
||||
<div className="border-t border-[#1A1A1A]/10 pt-40">
|
||||
<div className="text-center mb-24">
|
||||
<span className="text-[11px] uppercase tracking-[0.4em] text-[#C5A059] mb-4 block">Boutique Recommendation</span>
|
||||
<h2 className="text-5xl font-light italic">You May Also Admire</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16">
|
||||
{products.slice(1).map((p) => (
|
||||
<div key={p.id} className="group cursor-pointer text-center" onClick={() => setView('product')}>
|
||||
<div className="aspect-[3/4] bg-white relative overflow-hidden mb-8">
|
||||
<img src={p.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt="product"/>
|
||||
</div>
|
||||
<h3 className="text-xl italic mb-3 group-hover:text-[#C5A059] transition-colors">{p.name}</h3>
|
||||
<span className="text-lg font-sans font-light tracking-widest">{p.price}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Luxury Footer */}
|
||||
<footer className="bg-[#1A1A1A] text-white py-32 px-10">
|
||||
<div className="max-w-[1600px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-24 mb-32">
|
||||
<div className="lg:col-span-1">
|
||||
<h2 className="text-5xl font-light tracking-[0.3em] uppercase mb-12">LUXE</h2>
|
||||
<p className="text-lg italic font-light text-white/40 leading-relaxed mb-12">Defining the pinnacle of modern luxury. Excellence is not a standard; it is our foundation.</p>
|
||||
<div className="flex gap-8">
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Instagram')} className="text-white/40 hover:text-[#C5A059] transition-colors"><Instagram className="w-6 h-6"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Site')} className="text-white/40 hover:text-[#C5A059] transition-colors"><Globe className="w-6 h-6"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Share')} className="text-white/40 hover:text-[#C5A059] transition-colors"><Share2 className="w-6 h-6"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#C5A059] text-[11px] uppercase tracking-[0.4em] mb-12 font-sans font-bold">Boutique Services</h4>
|
||||
<ul className="space-y-6 text-[10px] uppercase tracking-[0.3em] font-sans text-white/50">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Privacidade')} className="hover:text-white transition-colors">Privacy Concierge</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Termos')} className="hover:text-white transition-colors">Terms of Atelier</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Cookies')} className="hover:text-white transition-colors">Digital Cookies</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#C5A059] text-[11px] uppercase tracking-[0.4em] mb-12 font-sans font-bold">Client Care</h4>
|
||||
<ul className="space-y-6 text-[10px] uppercase tracking-[0.3em] font-sans text-white/50">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Suporte')} className="hover:text-white transition-colors">Personal Assistant</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Shipping')} className="hover:text-white transition-colors">Global Logistics</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Returns')} className="hover:text-white transition-colors">Returns & Refinement</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#C5A059] text-[11px] uppercase tracking-[0.4em] mb-12 font-sans font-bold">Connect</h4>
|
||||
<ul className="space-y-6 text-[10px] uppercase tracking-[0.3em] font-sans text-white/50">
|
||||
<li><a href="#" className="hover:text-white transition-colors">Store Locator</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Appointments</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">Newsletter</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-20 border-t border-white/5 flex flex-col md:flex-row justify-between items-center text-[9px] uppercase tracking-[0.5em] text-white/20">
|
||||
<span>© {new Date().getFullYear()} LUXE ATELIER INTERNATIONAL. ALL RIGHTS RESERVED.</span>
|
||||
<div className="flex gap-10">
|
||||
<span>SSL ENCRYPTED SECURE CHANNEL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Minimal Luxury Bag */}
|
||||
{cartOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
<div className="absolute inset-0 bg-[#FAF9F6]/20 backdrop-blur-md cursor-pointer" onClick={() => setCartOpen(false)}></div>
|
||||
<div className="w-full max-w-xl bg-[#FAF9F6] h-full flex flex-col relative z-[110] shadow-[-50px_0_100px_rgba(0,0,0,0.05)] border-l border-[#1A1A1A]/10">
|
||||
<div className="p-12 border-b border-[#1A1A1A]/5 flex justify-between items-center bg-white">
|
||||
<h2 className="text-3xl italic font-light tracking-[0.1em]">Your Shopping Bag</h2>
|
||||
<button onClick={() => setCartOpen(false)} className="hover:text-[#C5A059] transition-all"><X className="w-8 h-8"/></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-12 space-y-12">
|
||||
<div className="flex gap-10">
|
||||
<div className="w-32 h-44 bg-white shrink-0 overflow-hidden shadow-sm">
|
||||
<img src={products[0].img} className="w-full h-full object-cover" alt="item"/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<h3 className="text-2xl italic mb-3">{products[0].name}</h3>
|
||||
<p className="text-[10px] uppercase tracking-[0.2em] text-[#1A1A1A]/40 font-sans font-bold">Ref: 24.AX.01 | Size: FR 38</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-end pt-8">
|
||||
<span className="text-xl font-sans font-light">{products[0].price}</span>
|
||||
<button className="text-[10px] uppercase tracking-[0.3em] text-[#ff4400] font-sans font-bold border-b border-transparent hover:border-[#ff4400] transition-all">Remove Piece</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-12 border-t border-[#1A1A1A]/5 bg-white">
|
||||
<div className="flex justify-between items-center mb-12 text-2xl italic">
|
||||
<span>Estimated Total</span>
|
||||
<span className="font-sans font-light tracking-widest">{products[0].price}</span>
|
||||
</div>
|
||||
<button className="w-full bg-[#1A1A1A] text-white py-8 text-[11px] font-bold uppercase tracking-[0.5em] hover:bg-[#C5A059] transition-all duration-500 font-sans shadow-2xl">
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
309
src/components/themes/MagazineTheme.tsx
Normal file
309
src/components/themes/MagazineTheme.tsx
Normal file
|
|
@ -0,0 +1,309 @@
|
|||
import { Menu, Search, Flame, Mail, ChevronRight, PlayCircle, Share2, Globe, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: '← Voltar à Capa',
|
||||
sections: 'SEÇÕES',
|
||||
subscribe: 'Assinar',
|
||||
live: 'AO VIVO: APPLE REVELA NOVA LINHA DE MACBOOKS M5',
|
||||
trending: 'Em Alta',
|
||||
latestNews: 'Feed Global',
|
||||
sidebarAd: 'ANÚNCIO',
|
||||
stayConnected: 'Siga-nos',
|
||||
popular: 'Populares',
|
||||
reviewsCategory: 'REVIEWS E HARDWARE',
|
||||
softwareCategory: 'SISTEMAS & IA',
|
||||
loadMore: 'Carregar Mais',
|
||||
subscribeBtn: 'Inscrever-se',
|
||||
newsletterTitle: 'Newsletter Oficial',
|
||||
breakingNews: {
|
||||
category: 'Exclusivo'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default function MagazineTheme({ 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...',
|
||||
category: p.data.category || 'Tech',
|
||||
author: p.data.author || 'Redação',
|
||||
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 || '',
|
||||
category: currentArticle.data.category || 'Tech',
|
||||
author: currentArticle.data.author || 'Redação',
|
||||
date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje'
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="magazine-scroll-container bg-[#f5f5f5] text-gray-900 min-h-full font-sans overflow-y-auto selection:bg-orange-500 selection:text-white pb-32">
|
||||
|
||||
{/* Top Banner Alert */}
|
||||
<div className="bg-black text-white text-xs font-bold uppercase tracking-widest px-6 py-2 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 cursor-pointer text-orange-500 hover:text-white transition-colors">
|
||||
<Flame className="w-4 h-4" /> <span className="hidden sm:inline">{ui.live}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-[10px]">
|
||||
<span>{new Date().toLocaleDateString()}</span>
|
||||
<div className="hidden sm:flex gap-3">
|
||||
<Globe className="w-3 h-3 hover:text-blue-500 cursor-pointer"/>
|
||||
<Share2 className="w-3 h-3 hover:text-blue-400 cursor-pointer"/>
|
||||
<Mail className="w-3 h-3 hover:text-red-500 cursor-pointer"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b-2 border-gray-200 sticky top-0 z-40 shadow-sm">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
{/* Logo Row */}
|
||||
<div className="h-24 px-6 flex items-center justify-between">
|
||||
<button className="flex items-center gap-2 font-black uppercase text-xs hover:text-orange-600 transition-colors">
|
||||
<Menu className="w-6 h-6" /> <span className="hidden sm:block">{ui.sections}</span>
|
||||
</button>
|
||||
|
||||
<a href="/" className="text-4xl md:text-5xl font-black tracking-tighter uppercase cursor-pointer flex flex-col items-center">
|
||||
<div>THE<span className="text-orange-600">WIRED</span>MAG</div>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="hover:text-orange-600 transition-colors"><Search className="w-6 h-6" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Row */}
|
||||
<nav className="h-14 px-6 flex items-center justify-center gap-8 text-xs font-black uppercase tracking-widest overflow-x-auto whitespace-nowrap bg-gray-50 border-t border-gray-200">
|
||||
<a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Tecnologia</a>
|
||||
<a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Reviews</a>
|
||||
<a href="/" className="hover:text-orange-600 border-b-2 border-transparent hover:border-orange-600 h-full flex items-center">Games</a>
|
||||
<a href="/login" className="text-gray-500 hover:text-black flex items-center gap-1"><PlayCircle className="w-4 h-4"/> AUTH_PORTAL</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1400px] mx-auto px-6 py-8">
|
||||
|
||||
{/* Ad Space Top Leaderboard */}
|
||||
<div className="w-full max-w-[970px] h-[90px] bg-gray-200 mx-auto mb-10 flex flex-col items-center justify-center border border-gray-300 text-gray-400 group cursor-pointer">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest mb-1">{ui.sidebarAd} 970x90</span>
|
||||
<span className="text-xs group-hover:text-blue-500 font-bold uppercase">Publicidade Premium</span>
|
||||
</div>
|
||||
|
||||
{/* JNews Style Masonry Bento Hero */}
|
||||
<section className="grid lg:grid-cols-4 lg:grid-rows-2 gap-4 mb-14 h-auto lg:h-[600px]">
|
||||
|
||||
{/* Huge Left Panel */}
|
||||
<article className="lg:col-span-2 lg:row-span-2 relative group overflow-hidden cursor-pointer">
|
||||
<a href={`/${articlesToRender[0]?.id}`} className="block w-full h-full">
|
||||
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt="Chip"/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent flex flex-col justify-end p-8">
|
||||
<div className="mb-2"><span className="bg-orange-600 text-white text-[10px] font-black uppercase tracking-widest px-2 py-1">{ui.breakingNews.category}</span></div>
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-black text-white leading-tight mt-2 drop-shadow-lg group-hover:text-orange-500 transition-colors">{articlesToRender[0]?.title}</h2>
|
||||
<div className="mt-4 flex items-center gap-3 text-xs font-bold text-gray-300 uppercase tracking-widest">
|
||||
<span>Por {articlesToRender[0]?.author}</span> <span>|</span> <span>{articlesToRender[0]?.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
{/* Small Right Panels */}
|
||||
{articlesToRender.slice(1, 5).map((itm: any, idx: number) => (
|
||||
<article key={itm.id} className="relative group overflow-hidden cursor-pointer h-[250px] lg:h-auto">
|
||||
<a href={`/${itm.id}`} className="block w-full h-full">
|
||||
<img src={`https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=400&random=${idx}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt={itm.title} />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent flex flex-col justify-end p-4 lg:p-6">
|
||||
<div className="mb-2"><span className="bg-black/60 backdrop-blur-sm border border-white/20 text-white text-[9px] font-black uppercase tracking-widest px-2 py-0.5">{itm.category}</span></div>
|
||||
<h3 className="text-lg lg:text-xl font-bold text-white leading-tight drop-shadow-md group-hover:text-orange-500 transition-colors">{itm.title}</h3>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
{/* 70/30 Layout: Main Content + Sidebar */}
|
||||
<div className="grid lg:grid-cols-12 gap-10">
|
||||
|
||||
{/* LEFT MAIN CONTENT (70%) */}
|
||||
<div className="lg:col-span-8 flex flex-col gap-12">
|
||||
|
||||
<section>
|
||||
<div className="flex items-center justify-between border-b-2 border-black pb-2 mb-6">
|
||||
<h3 className="text-2xl font-black uppercase">{ui.latestNews}</h3>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-6">
|
||||
{articlesToRender.slice(5).map((post: any) => (
|
||||
<article key={post.id} className="group cursor-pointer border-b border-gray-200 pb-6 last:border-0">
|
||||
<a href={`/${post.id}`} className="flex flex-col sm:flex-row gap-6">
|
||||
<div className="sm:w-64 h-40 shrink-0 overflow-hidden relative">
|
||||
<img src={`https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=400&random=${post.id}`} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt={post.title}/>
|
||||
<span className="absolute top-2 left-2 bg-orange-600 text-white text-[9px] font-black uppercase px-2 py-0.5">{post.category}</span>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center flex-1">
|
||||
<h4 className="text-2xl font-bold leading-tight mb-3 group-hover:text-orange-600 transition-colors">{post.title}</h4>
|
||||
<p className="text-gray-500 text-sm mb-3">{post.excerpt}</p>
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
|
||||
{post.date}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Inline Banner Main Ad */}
|
||||
<div className="w-full h-[150px] bg-gray-200 flex flex-col items-center justify-center border border-gray-300 text-gray-400 my-4 cursor-pointer">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest mb-1">{ui.sidebarAd} 728x90</span>
|
||||
</div>
|
||||
|
||||
{/* Category Block 2 (Grid View) */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between border-b-2 border-black pb-2 mb-6">
|
||||
<h3 className="text-2xl font-black uppercase">{ui.reviewsCategory}</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-8">
|
||||
<article className="group cursor-pointer">
|
||||
<a href="/" className="block">
|
||||
<div className="w-full h-48 overflow-hidden mb-4"><img src="https://images.unsplash.com/photo-1605379399642-870262d3d051?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover group-hover:scale-105 transition-transform" /></div>
|
||||
<span className="text-orange-600 text-[10px] font-black uppercase tracking-widest block mb-2">Editor's Choice</span>
|
||||
<h4 className="text-xl font-bold leading-tight group-hover:text-orange-600">Review: Novo Hardware B2B</h4>
|
||||
</a>
|
||||
</article>
|
||||
<article className="group cursor-pointer">
|
||||
<a href="/" className="block">
|
||||
<div className="w-full h-48 overflow-hidden mb-4"><img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=600" className="w-full h-full object-cover group-hover:scale-105 transition-transform" /></div>
|
||||
<span className="text-blue-600 text-[10px] font-black uppercase tracking-widest block mb-2">Display</span>
|
||||
<h4 className="text-xl font-bold leading-tight group-hover:text-blue-600">Testamos os Novos Monitores 8K</h4>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{/* RIGHT SIDEBAR (30%) */}
|
||||
<aside className="lg:col-span-4 flex flex-col gap-10">
|
||||
|
||||
{/* Stay Connected Widget */}
|
||||
<div className="bg-white p-6 border border-gray-200 shadow-sm">
|
||||
<h4 className="text-lg font-black uppercase text-center mb-6 relative">
|
||||
<span className="bg-white px-4 relative z-10">{ui.stayConnected}</span>
|
||||
<div className="absolute top-1/2 left-0 w-full h-px bg-gray-200 z-0"></div>
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-[#1877F2]/10 text-[#1877F2] p-4 text-center cursor-pointer hover:bg-[#1877F2] hover:text-white transition-colors flex flex-col items-center gap-2">
|
||||
<Globe className="w-6 h-6" /> <span className="font-bold text-sm">240.5k</span>
|
||||
</div>
|
||||
<div className="bg-[#1DA1F2]/10 text-[#1DA1F2] p-4 text-center cursor-pointer hover:bg-[#1DA1F2] hover:text-white transition-colors flex flex-col items-center gap-2">
|
||||
<Share2 className="w-6 h-6" /> <span className="font-bold text-sm">82.1k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Popular Widget */}
|
||||
<div className="bg-white p-6 border border-gray-200 shadow-sm relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-orange-600"></div>
|
||||
<h4 className="text-xl font-black uppercase mb-6 flex items-center gap-2">
|
||||
<Flame className="w-5 h-5 text-orange-600"/> {ui.popular}
|
||||
</h4>
|
||||
<div className="flex flex-col gap-5">
|
||||
{articlesToRender.slice(0, 5).map((art, num) => (
|
||||
<a href={`/${art.id}`} key={art.id} className="flex gap-4 items-center group">
|
||||
<div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 font-black text-xl group-hover:bg-orange-600 group-hover:text-white transition-colors shrink-0">{num+1}</div>
|
||||
<h5 className="font-bold text-sm leading-tight group-hover:text-orange-600 transition-colors">{art.title}</h5>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Widget */}
|
||||
<div className="relative bg-black text-white p-6 border-b-4 border-orange-600 text-center">
|
||||
<Mail className="w-10 h-10 text-orange-500 mx-auto mb-4" />
|
||||
<h4 className="text-xl font-black uppercase mb-2">{ui.newsletterTitle}</h4>
|
||||
<form className="flex flex-col gap-2">
|
||||
<input type="email" placeholder="Email" className="w-full text-black px-4 py-3 font-bold outline-none text-center" required />
|
||||
<button type="submit" className="w-full bg-orange-600 hover:bg-orange-500 text-white font-black uppercase py-3 transition-colors">{ui.subscribeBtn}</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="bg-[#f5f5f5]">
|
||||
<div className="max-w-4xl mx-auto px-6 py-12 bg-white shadow-lg my-12 border-t-8 border-black">
|
||||
<a href="/" className="mb-8 text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-orange-600 inline-block">
|
||||
{ui.back}
|
||||
</a>
|
||||
|
||||
<div className="text-center mb-10">
|
||||
<span className="bg-black text-white px-3 py-1 text-xs font-black uppercase tracking-widest">{displayArticle.category}</span>
|
||||
<h1 className="text-4xl md:text-6xl font-black tracking-tight leading-[1.05] mt-6 mb-6">{displayArticle.title}</h1>
|
||||
<p className="text-xl md:text-2xl text-gray-600 font-medium leading-relaxed max-w-3xl mx-auto">{displayArticle.excerpt}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center gap-6 py-4 border-y border-gray-200 mb-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full"></div>
|
||||
<div className="text-left font-sans">
|
||||
<span className="block font-bold text-sm">Escrito por {displayArticle.author}</span>
|
||||
<span className="block text-xs uppercase text-gray-500">{displayArticle.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-10">
|
||||
<div className="hidden lg:block w-[160px] shrink-0">
|
||||
<div className="sticky top-32 w-full h-[400px] bg-gray-100 flex items-center justify-center border border-gray-200 text-gray-400 font-bold text-xs uppercase writing-vertical-rl text-center">
|
||||
{ui.sidebarAd} 160x600
|
||||
</div>
|
||||
</div>
|
||||
<div className="prose prose-lg max-w-none flex-1 prose-headings:font-black prose-a:text-orange-600 hover:prose-a:underline prose-p:text-gray-800">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Footer Mega */}
|
||||
<footer className="bg-black text-white pt-20 pb-10">
|
||||
<div className="max-w-[1400px] mx-auto px-6 grid md:grid-cols-4 gap-12 border-b border-gray-800 pb-16 mb-8 text-left">
|
||||
<div className="md:col-span-2">
|
||||
<div className="text-3xl font-black tracking-tighter uppercase mb-6">
|
||||
THE<span className="text-orange-600">WIRED</span>MAG
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6 max-w-sm">A maior plataforma global para jornalismo de tecnologia independente.</p>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Globe className="w-4 h-4"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Share2 className="w-4 h-4"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-orange-600 transition-colors"><Instagram className="w-4 h-4"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-black text-sm uppercase tracking-widest mb-6">Legal</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-gray-400">
|
||||
<li><a href="/privacy" className="hover:text-orange-500">Privacidade</a></li>
|
||||
<li><a href="/terms" className="hover:text-orange-500">Termos de Uso</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-[1400px] mx-auto px-6 text-center text-xs font-bold text-gray-600 uppercase tracking-widest">
|
||||
© {new Date().getFullYear()} THE WIRED MAG
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
214
src/components/themes/MetricTheme.tsx
Normal file
214
src/components/themes/MetricTheme.tsx
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
import { Search, TrendingUp, BarChart3, Zap, Globe, Share2, Instagram, Layout, Database, Activity, Target, Menu, ArrowUpRight, ArrowDownRight, Info, Download, BarChart2, PieChart, LineChart, Table } from 'lucide-react';
|
||||
|
||||
export default function MetricTheme({ 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 || 'DATA',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
author: p.author_name || 'Data Analyst',
|
||||
img: p.image || `https://images.unsplash.com/photo-1551288049-bebda4e38f71?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: 'Q1 2026 Search Market Share Report', category: 'BENCHMARK', author: 'Data Team', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Global CTR Patterns by Niche', category: 'ANALYSIS', author: 'Alex Rivera', 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 || 'METRIC',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="metric-seo bg-[#f8f9fa] text-[#1a1a1a] min-h-screen font-sans selection:bg-[#0061ff] selection:text-white">
|
||||
|
||||
{/* HUD Header */}
|
||||
<nav className="bg-white border-b border-gray-200 px-6 py-4 sticky top-0 z-50 flex items-center justify-between shadow-sm">
|
||||
<div className="flex items-center gap-8">
|
||||
<a href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-[#0061ff] rounded flex items-center justify-center">
|
||||
<BarChart2 className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h1 className="text-lg font-bold tracking-tight">METRIC<span className="text-[#0061ff]">SEO</span></h1>
|
||||
</a>
|
||||
<div className="hidden md:flex items-center gap-6 text-sm font-semibold text-gray-500">
|
||||
<a href="/category/benchmarks" className="hover:text-black">Benchmarks</a>
|
||||
<a href="/category/reports" className="hover:text-black">Reports</a>
|
||||
<a href="/category/data" className="hover:text-black">Raw Data</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden sm:flex items-center gap-2 bg-gray-100 px-4 py-2 rounded-lg border border-gray-200">
|
||||
<Search className="w-4 h-4 text-gray-400" />
|
||||
<input type="text" placeholder="Search data..." className="bg-transparent text-sm outline-none w-40" />
|
||||
</div>
|
||||
<button className="bg-[#0061ff] text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm hover:bg-[#0052d9] transition-all">New Report</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="p-6 max-w-[1400px] mx-auto">
|
||||
{/* Summary Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
|
||||
{[
|
||||
{ label: 'Global Search Vol', val: '42.8B', change: '+12%', up: true, icon: Activity },
|
||||
{ label: 'Avg CPC (Tech)', val: '$4.12', change: '-3%', up: false, icon: Target },
|
||||
{ label: 'Mobile Share', val: '78.4%', change: '+5%', up: true, icon: Layout },
|
||||
{ label: 'Index Speed', val: '0.4s', change: '-15%', up: true, icon: Zap }
|
||||
].map((card, i) => (
|
||||
<div key={i} className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="p-2 bg-blue-50 rounded-lg text-[#0061ff]">
|
||||
<card.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<span className={`text-xs font-bold px-2 py-1 rounded flex items-center gap-1 ${card.up ? 'bg-green-50 text-green-600' : 'bg-red-50 text-red-600'}`}>
|
||||
{card.up ? <ArrowUpRight className="w-3 h-3"/> : <ArrowDownRight className="w-3 h-3"/>}
|
||||
{card.change}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">{card.label}</h3>
|
||||
<p className="text-2xl font-black">{card.val}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main Data View */}
|
||||
<div className="grid lg:grid-cols-3 gap-8">
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
<div className="bg-white p-8 rounded-xl border border-gray-200 shadow-sm">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h2 className="text-xl font-bold flex items-center gap-2"><BarChart3 className="w-5 h-5 text-[#0061ff]"/> Latest Intelligence</h2>
|
||||
<div className="flex gap-2">
|
||||
<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Filter className="w-4 h-4 text-gray-400" /></button>
|
||||
<button className="p-2 hover:bg-gray-100 rounded-lg transition-colors"><Download className="w-4 h-4 text-gray-400" /></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{articlesToRender.map((art, idx) => (
|
||||
<a href={`/${art.id}`} key={art.id + idx} className="flex flex-col md:flex-row gap-6 p-4 hover:bg-gray-50 rounded-xl transition-all border border-transparent hover:border-gray-100 group">
|
||||
<div className="w-full md:w-48 aspect-video rounded-lg overflow-hidden bg-gray-100">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" alt="post"/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-[10px] font-black text-[#0061ff] bg-blue-50 px-2 py-0.5 rounded uppercase">{art.category}</span>
|
||||
<span className="text-[10px] font-bold text-gray-300">• {art.date}</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-bold mb-2 group-hover:text-[#0061ff] transition-colors">{art.title}</h3>
|
||||
<p className="text-sm text-gray-500 line-clamp-2">{art.excerpt}</p>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside className="space-y-8">
|
||||
<div className="bg-gray-900 text-white p-8 rounded-xl shadow-xl relative overflow-hidden">
|
||||
<div className="relative z-10">
|
||||
<h3 className="text-lg font-bold mb-4">Metric Pro Access</h3>
|
||||
<p className="text-sm text-gray-400 mb-6 leading-relaxed">Unlock advanced real-time SERP monitoring and AI competitor analysis tools.</p>
|
||||
<button className="w-full bg-[#0061ff] py-3 rounded-lg font-bold text-sm hover:bg-white hover:text-black transition-all">Upgrade Account</button>
|
||||
</div>
|
||||
<Activity className="absolute -bottom-10 -right-10 w-40 h-40 opacity-10" />
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-xl border border-gray-200 shadow-sm">
|
||||
<h3 className="text-sm font-bold uppercase tracking-widest text-gray-400 mb-6">Real-time Pulse</h3>
|
||||
<div className="space-y-6">
|
||||
{[1,2,3].map(i => (
|
||||
<div key={i} className="flex items-center gap-4 border-b border-gray-50 pb-4 last:border-0">
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
|
||||
<div>
|
||||
<p className="text-xs font-bold leading-tight">Google Core Update detected in BR region.</p>
|
||||
<span className="text-[10px] text-gray-400 uppercase font-black">2 mins ago</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1000px] mx-auto p-6 py-20">
|
||||
<div className="bg-white rounded-3xl border border-gray-200 shadow-xl overflow-hidden">
|
||||
<div className="p-8 md:p-16 border-b border-gray-100">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<span className="bg-[#0061ff]/10 text-[#0061ff] text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest">{displayArticle.category}</span>
|
||||
<span className="text-gray-300 text-xs font-bold uppercase">{displayArticle.date}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-black tracking-tight leading-tight mb-8 text-black">{displayArticle.title}</h1>
|
||||
<div className="flex items-center gap-6 text-sm font-semibold text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="w-4 h-4 text-[#0061ff]" />
|
||||
<span>{displayArticle.author}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-4 h-4 text-green-500" />
|
||||
<span>Verified Data Source</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 md:p-16">
|
||||
<div className="prose prose-lg max-w-none prose-slate prose-headings:font-black prose-a:text-[#0061ff] prose-strong:text-black">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Corporate Footer */}
|
||||
<footer className="bg-white border-t border-gray-200 pt-20 pb-12 px-6">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-16 mb-20">
|
||||
<div className="md:col-span-2">
|
||||
<div className="flex items-center gap-2 mb-8">
|
||||
<div className="w-8 h-8 bg-[#0061ff] rounded flex items-center justify-center">
|
||||
<BarChart2 className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight text-black">METRIC<span className="text-[#0061ff]">SEO</span></span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm leading-relaxed max-w-sm mb-10 font-medium">Laboratório de dados de SEO e marketing digital. Focado em precisão métrica, análise preditiva e benchmarks globais.</p>
|
||||
<div className="flex gap-6">
|
||||
<button className="text-gray-400 hover:text-[#0061ff] transition-colors"><Instagram className="w-5 h-5"/></button>
|
||||
<button className="text-gray-400 hover:text-[#0061ff] transition-colors"><Globe className="w-5 h-5"/></button>
|
||||
<button className="text-gray-400 hover:text-[#0061ff] transition-colors"><Share2 className="w-5 h-5"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-black text-[10px] font-black uppercase tracking-[0.2em] mb-8">Data Protocols</h4>
|
||||
<ul className="space-y-4 text-xs font-bold text-gray-500">
|
||||
<li><a href="/privacy" className="hover:text-black transition-colors">Data Privacy</a></li>
|
||||
<li><a href="/terms" className="hover:text-black transition-colors">System Terms</a></li>
|
||||
<li><a href="/cookies" className="hover:text-black transition-colors">Cookie Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-black text-[10px] font-black uppercase tracking-[0.2em] mb-8">Access Lab</h4>
|
||||
<ul className="space-y-4 text-xs font-bold text-gray-500">
|
||||
<li><a href="/contact" className="hover:text-black transition-colors">API Support</a></li>
|
||||
<li><a href="/search" className="hover:text-black transition-colors">Data Search</a></li>
|
||||
<li><a href="/about" className="hover:text-black transition-colors">Our Metrics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center pt-12 border-t border-gray-100 text-[9px] font-bold uppercase tracking-[0.4em] text-gray-400">
|
||||
© {new Date().getFullYear()} Metric SEO Labs International. All Rights Reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
293
src/components/themes/MinimalTheme.tsx
Normal file
293
src/components/themes/MinimalTheme.tsx
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { ShoppingBag, ArrowRight, Menu, X, Globe, Share2, Instagram, Search, ChevronRight, Apple, CreditCard, Box, Zap, Heart } from 'lucide-react';
|
||||
|
||||
export default function MinimalTheme({ posts, categories }: { posts?: any[], categories?: any[] }) {
|
||||
const handleSimulatedAction = (e: React.MouseEvent | React.FormEvent, msg: string) => {
|
||||
e.preventDefault();
|
||||
window.alert(`[SaaS Preview] Ação simulada: ${msg}\n\nEsta funcionalidade estará ativa após a publicação da sua loja minimalista.`);
|
||||
};
|
||||
const [view, setView] = useState<'home' | 'product'>('home');
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setScrolled(window.scrollY > 50);
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [view]);
|
||||
|
||||
const featured = {
|
||||
name: "Sonic One Headphones",
|
||||
price: "$349",
|
||||
desc: "Pure silence. Pure sound. The new standard in wireless audio.",
|
||||
img: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=1200"
|
||||
};
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: "Minimalist Watch v2", price: "$199", img: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 2, name: "Smart Speaker Aura", price: "$129", img: "https://images.unsplash.com/photo-1589492477829-5e65395b66cc?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 3, name: "Leather Laptop Sleeve", price: "$89", img: "https://images.unsplash.com/photo-1544333346-64e4fe18274b?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 4, name: "Aluminum Desk Lamp", price: "$159", img: "https://images.unsplash.com/photo-1534073828943-f801091bb18c?auto=format&fit=crop&q=80&w=800" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-[#fbfbfb] text-[#1d1d1f] font-['-apple-system','BlinkMacSystemFont','Segoe_UI',Roboto,sans-serif] selection:bg-[#0066cc] selection:text-white">
|
||||
|
||||
{/* Super-Clean Header */}
|
||||
<nav className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${scrolled ? 'bg-white/80 backdrop-blur-xl border-b border-black/5 py-4' : 'bg-transparent py-8'}`}>
|
||||
<div className="max-w-[1400px] mx-auto px-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-12">
|
||||
<a href="/" onClick={(e) => {e.preventDefault(); setView('home');}} className="text-2xl font-bold tracking-tight hover:opacity-70 transition-opacity">
|
||||
MINIMAL
|
||||
</a>
|
||||
<div className="hidden lg:flex items-center gap-8 text-[12px] font-medium text-black/60">
|
||||
<a href="#" className="hover:text-black transition-colors">Products</a>
|
||||
<a href="#" className="hover:text-black transition-colors">Store</a>
|
||||
<a href="#" className="hover:text-black transition-colors">About</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<Search className="w-5 h-5 opacity-60 hover:opacity-100 cursor-pointer transition-opacity" />
|
||||
<button onClick={() => setCartOpen(true)} className="relative group">
|
||||
<ShoppingBag className="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" />
|
||||
<span className="absolute -top-2 -right-2 bg-[#0066cc] text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-bold">1</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{view === 'home' ? (
|
||||
<main>
|
||||
{/* Section 1: Pure Hero */}
|
||||
<section className="pt-40 pb-20 px-6 text-center">
|
||||
<div className="max-w-4xl mx-auto mb-20 animate-[fade-in-up_1s_ease-out]">
|
||||
<h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8">{featured.name}</h1>
|
||||
<p className="text-xl md:text-2xl text-black/50 font-medium mb-12 max-w-2xl mx-auto">{featured.desc}</p>
|
||||
<div className="flex justify-center gap-8 items-center">
|
||||
<button onClick={() => setView('product')} className="bg-[#0066cc] text-white px-10 py-4 rounded-full font-bold text-sm hover:bg-[#0077ee] transition-all shadow-xl shadow-blue-500/20">Buy Now</button>
|
||||
<a href="#" className="text-[#0066cc] font-bold text-sm hover:underline flex items-center gap-2">Learn more <ChevronRight className="w-4 h-4"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-6xl mx-auto rounded-[3rem] overflow-hidden bg-white shadow-2xl animate-[fade-in-up_1.2s_ease-out]">
|
||||
<img src={featured.img} className="w-full h-full object-cover" alt="hero"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Product Mosaic */}
|
||||
<section className="py-40 px-6 bg-white">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{products.map((p, idx) => (
|
||||
<div key={p.id} className="group cursor-pointer bg-[#f5f5f7] rounded-[2.5rem] p-12 hover:bg-white hover:shadow-2xl transition-all duration-500 text-center flex flex-col items-center" onClick={() => setView('product')}>
|
||||
<h3 className="text-4xl font-bold mb-4">{p.name}</h3>
|
||||
<p className="text-lg text-black/50 mb-10">Starting from {p.price}</p>
|
||||
<div className="w-full aspect-square overflow-hidden mb-10">
|
||||
<img src={p.img} className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-700" alt="product"/>
|
||||
</div>
|
||||
<button className="text-[#0066cc] font-bold text-sm hover:underline flex items-center gap-2">View details <ChevronRight className="w-4 h-4"/></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Feature Highlight */}
|
||||
<section className="py-40 px-6 text-center">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Zap className="w-16 h-16 text-[#0066cc] mx-auto mb-10" />
|
||||
<h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-12">Seamless Integration.</h2>
|
||||
<p className="text-xl md:text-2xl text-black/50 max-w-2xl mx-auto mb-20 leading-relaxed">Designed to work perfectly together. Connect your world with a single touch. Experience the future of minimalist technology.</p>
|
||||
<div className="grid md:grid-cols-3 gap-12 text-left">
|
||||
<div className="p-10 bg-white rounded-[2rem] shadow-sm">
|
||||
<CreditCard className="w-10 h-10 mb-6 text-black/40" />
|
||||
<h4 className="font-bold text-xl mb-4">Secure Checkout</h4>
|
||||
<p className="text-sm text-black/50 leading-relaxed">Your data is always encrypted and protected by the latest security standards.</p>
|
||||
</div>
|
||||
<div className="p-10 bg-white rounded-[2rem] shadow-sm">
|
||||
<Box className="w-10 h-10 mb-6 text-black/40" />
|
||||
<h4 className="font-bold text-xl mb-4">Express Shipping</h4>
|
||||
<p className="text-sm text-black/50 leading-relaxed">Global delivery within 48 hours for all premium members.</p>
|
||||
</div>
|
||||
<div className="p-10 bg-white rounded-[2rem] shadow-sm">
|
||||
<Heart className="w-10 h-10 mb-6 text-black/40" />
|
||||
<h4 className="font-bold text-xl mb-4">Lifetime Support</h4>
|
||||
<p className="text-sm text-black/50 leading-relaxed">Our experts are available 24/7 to help you with anything you need.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- PRODUCT VIEW --- */
|
||||
<main className="max-w-[1400px] mx-auto px-6 py-40">
|
||||
<div className="grid lg:grid-cols-2 gap-20 items-center mb-40">
|
||||
<div className="bg-white rounded-[3rem] p-20 shadow-2xl">
|
||||
<img src={products[0].img} className="w-full h-full object-contain" alt="product detail" />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="mb-12">
|
||||
<span className="text-[#0066cc] font-bold text-sm uppercase tracking-widest mb-6 block">New Arrival</span>
|
||||
<h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-10 leading-none">{products[0].name}</h1>
|
||||
<p className="text-2xl text-black/50 font-medium mb-12">The perfect balance of form and function. Designed with premium materials and advanced audio technology.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 mb-16 border-t border-black/5 pt-12">
|
||||
<div className="space-y-6">
|
||||
<span className="text-[12px] font-bold uppercase tracking-widest text-black/30 block">Design Ethos</span>
|
||||
<p className="text-xl text-black/60 leading-relaxed">
|
||||
Nosso compromisso com o minimalismo vai além da estética. É sobre remover o desnecessário para destacar o essencial. Cada curva e cada material foram escolhidos para proporcionar uma experiência tátil e visual sublime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 py-8 border-y border-black/5 text-[11px] font-bold uppercase tracking-widest text-black/40">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-black">Battery Life</span>
|
||||
<span>Up to 40 Hours</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-black">Connectivity</span>
|
||||
<span>Bluetooth 5.3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-10 mb-16 pb-12">
|
||||
<div className="text-4xl font-bold">{products[0].price}</div>
|
||||
<div className="h-10 w-px bg-black/10"></div>
|
||||
<div className="flex gap-4">
|
||||
<button className="w-8 h-8 rounded-full bg-black ring-2 ring-offset-2 ring-black"></button>
|
||||
<button className="w-8 h-8 rounded-full bg-gray-200"></button>
|
||||
<button className="w-8 h-8 rounded-full bg-white border border-black/10"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setCartOpen(true)} className="w-full bg-[#0066cc] text-white py-6 rounded-full font-bold text-lg hover:bg-[#0077ee] transition-all shadow-2xl shadow-blue-500/30">
|
||||
Add to Cart
|
||||
</button>
|
||||
|
||||
<div className="mt-12 flex gap-8 text-[12px] font-bold text-black/40 uppercase tracking-widest">
|
||||
<span>Free Shipping</span>
|
||||
<span>2-Year Warranty</span>
|
||||
<span>Easy Returns</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Complete the Set */}
|
||||
<div className="border-t border-black/5 pt-40">
|
||||
<h2 className="text-4xl font-bold tracking-tight mb-20 text-center">Complete the Set</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||
{products.slice(1).map((p) => (
|
||||
<div key={p.id} className="group cursor-pointer flex flex-col items-center text-center" onClick={() => setView('product')}>
|
||||
<div className="aspect-square w-full bg-[#f5f5f7] rounded-[2rem] p-8 mb-8 group-hover:bg-white group-hover:shadow-xl transition-all duration-500">
|
||||
<img src={p.img} className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-700" alt="product"/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">{p.name}</h3>
|
||||
<span className="text-sm text-black/40 font-bold">{p.price}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Clean Minimal Footer */}
|
||||
<footer className="bg-[#f5f5f7] py-32 px-6">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-20 mb-32 border-b border-black/5 pb-32">
|
||||
<div className="md:col-span-1">
|
||||
<h2 className="text-2xl font-bold tracking-tight mb-10">MINIMAL</h2>
|
||||
<p className="text-sm text-black/50 leading-relaxed mb-10">Crafting the essentials of the modern digital life with a focus on simplicity, quality, and performance.</p>
|
||||
<div className="flex gap-6">
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Instagram')} className="text-black/40 hover:text-[#0066cc] transition-colors"><Instagram className="w-5 h-5"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Site')} className="text-black/40 hover:text-[#0066cc] transition-colors"><Globe className="w-5 h-5"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Share')} className="text-black/40 hover:text-[#0066cc] transition-colors"><Share2 className="w-5 h-5"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[12px] font-bold uppercase tracking-widest mb-10">Services</h4>
|
||||
<ul className="space-y-6 text-sm text-black/50">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Privacidade')} className="hover:text-[#0066cc] transition-colors">Privacy Policy</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Termos')} className="hover:text-[#0066cc] transition-colors">Terms of Service</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Cookies')} className="hover:text-[#0066cc] transition-colors">Cookie Settings</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[12px] font-bold uppercase tracking-widest mb-10">Support</h4>
|
||||
<ul className="space-y-6 text-sm text-black/50">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Suporte')} className="hover:text-[#0066cc] transition-colors">Help Center</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Shipping')} className="hover:text-[#0066cc] transition-colors">Shipping Info</a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Returns')} className="hover:text-[#0066cc] transition-colors">Returns & Refills</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[12px] font-bold uppercase tracking-widest mb-10">Company</h4>
|
||||
<ul className="space-y-6 text-sm text-black/50">
|
||||
<li><a href="#" className="hover:text-[#0066cc] transition-colors">Our Story</a></li>
|
||||
<li><a href="#" className="hover:text-[#0066cc] transition-colors">Careers</a></li>
|
||||
<li><a href="#" className="hover:text-[#0066cc] transition-colors">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-center text-[10px] font-bold text-black/30 uppercase tracking-widest gap-8">
|
||||
<span>© {new Date().getFullYear()} MINIMAL DESIGN CO. ALL RIGHTS RESERVED.</span>
|
||||
<div className="flex gap-10">
|
||||
<span>UNITED STATES / ENGLISH</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Glassmorphic Cart */}
|
||||
{cartOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
<div className="absolute inset-0 bg-black/5 backdrop-blur-md cursor-pointer" onClick={() => setCartOpen(false)}></div>
|
||||
<div className="w-full max-w-xl bg-white/90 backdrop-blur-2xl h-full flex flex-col relative z-[110] shadow-2xl border-l border-black/5">
|
||||
<div className="p-12 border-b border-black/5 flex justify-between items-center">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Shopping Cart</h2>
|
||||
<button onClick={() => setCartOpen(false)} className="hover:opacity-50 transition-all"><X className="w-8 h-8"/></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-12 space-y-12">
|
||||
<div className="flex gap-10">
|
||||
<div className="w-32 h-32 bg-[#f5f5f7] rounded-3xl shrink-0 p-4">
|
||||
<img src={products[0].img} className="w-full h-full object-contain" alt="item"/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">{products[0].name}</h3>
|
||||
<p className="text-sm text-black/40 mt-1 font-medium">Space Black | 1 Unit</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-end pt-8">
|
||||
<span className="text-xl font-bold">{products[0].price}</span>
|
||||
<button className="text-[12px] font-bold text-[#0066cc] hover:underline">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-12 border-t border-black/5 bg-white">
|
||||
<div className="flex justify-between items-center mb-12 text-2xl font-bold">
|
||||
<span>Subtotal</span>
|
||||
<span>{products[0].price}</span>
|
||||
</div>
|
||||
<button className="w-full bg-[#0066cc] text-white py-6 rounded-full font-bold text-lg hover:bg-[#0077ee] transition-all shadow-2xl shadow-blue-500/30">
|
||||
Check Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
286
src/components/themes/NeonTheme.tsx
Normal file
286
src/components/themes/NeonTheme.tsx
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
315
src/components/themes/NexusTheme.tsx
Normal file
315
src/components/themes/NexusTheme.tsx
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { ShoppingCart, ArrowRight, Zap, Shield, Cpu, ChevronRight, Menu, X, Globe, Share2, Instagram, Terminal, ArrowUpRight, ShieldAlert, Fingerprint, Activity, Server, Search, ShoppingBag } from 'lucide-react';
|
||||
|
||||
export default function NexusTheme({ posts, categories }: { posts?: any[], categories?: any[] }) {
|
||||
const handleSimulatedAction = (e: React.MouseEvent | React.FormEvent, msg: string) => {
|
||||
e.preventDefault();
|
||||
window.alert(`[SaaS Preview] Ação simulada: ${msg}\n\nEsta funcionalidade estará ativa após a publicação da sua loja tecnológica.`);
|
||||
};
|
||||
const [view, setView] = useState<'home' | 'product'>('home');
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: 'Neural Link Headset v4', price: '2,999.00 CRED', specs: 'Latency: 0.05ms • BW: 50Tbps', image: 'https://images.unsplash.com/photo-1535223289827-42f1e9919769?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: 2, name: 'Cyberdeck Mk. IX', price: '1,850.00 CRED', specs: 'RAM: 512TB • CPU: Quantum-7', image: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: 3, name: 'Haptic Exoskeleton', price: '7,500.00 CRED', specs: 'Resolution: 1M tactile points', image: 'https://images.unsplash.com/photo-1616423640778-28d1b53229bd?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: 4, name: 'Optic Implant X-Ray', price: '2,200.00 CRED', specs: 'Zoom: 1000x • Thermal: Gen 5', image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [view]);
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-[#050505] text-[#00f0ff] font-['Space_Mono',monospace] selection:bg-[#00f0ff] selection:text-black">
|
||||
|
||||
{/* Matrix Grid Background */}
|
||||
<div className="fixed inset-0 pointer-events-none opacity-10 z-0" style={{ backgroundImage: `linear-gradient(rgba(0, 240, 255, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.15) 1px, transparent 1px)`, backgroundSize: '40px 40px' }}></div>
|
||||
<div className="fixed inset-0 bg-[radial-gradient(ellipse_at_center,transparent_0%,#000_100%)] pointer-events-none z-0"></div>
|
||||
|
||||
{/* Neural Header */}
|
||||
<header className="px-10 py-6 border-b border-[#00f0ff]/20 bg-black/80 backdrop-blur-xl sticky top-0 z-50">
|
||||
<div className="max-w-[1800px] mx-auto flex items-center justify-between">
|
||||
<div className="flex items-center gap-12">
|
||||
<a href="/" onClick={(e) => {e.preventDefault(); setView('home');}} className="flex items-center gap-4 group">
|
||||
<div className="w-12 h-12 bg-[#00f0ff]/10 border-2 border-[#00f0ff] flex items-center justify-center group-hover:bg-[#00f0ff] group-hover:text-black transition-all shadow-[0_0_20px_rgba(0,240,255,0.4)]">
|
||||
<Cpu className="w-6 h-6 animate-pulse" />
|
||||
</div>
|
||||
<div className="flex flex-col leading-none">
|
||||
<span className="text-3xl font-black tracking-widest">NEXUS</span>
|
||||
<span className="text-[9px] tracking-[0.4em] text-[#888] font-bold">OPERATIONS_SYSTEM_V4</span>
|
||||
</div>
|
||||
</a>
|
||||
<nav className="hidden lg:flex gap-12 text-[11px] font-bold uppercase tracking-[0.3em]">
|
||||
<a href="#" className="hover:text-white transition-colors">Neural_Hardware</a>
|
||||
<a href="#" className="hover:text-white transition-colors">Data_Nodes</a>
|
||||
<a href="#" className="hover:text-white transition-colors">Protocol_Tools</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-10">
|
||||
<div className="hidden md:flex items-center gap-4 bg-white/5 border border-white/10 px-4 py-2 rounded">
|
||||
<Activity className="w-4 h-4 text-green-500" />
|
||||
<span className="text-[10px] font-bold text-gray-500">SYSTEM_STABLE // 99.9%</span>
|
||||
</div>
|
||||
<button onClick={() => setCartOpen(true)} className="bg-[#00f0ff] text-black px-8 py-3 text-xs font-black uppercase tracking-widest hover:bg-white transition-all shadow-[0_0_30px_rgba(0,240,255,0.3)] flex items-center gap-3">
|
||||
<Terminal className="w-4 h-4" /> [ BUFFER: 01 ]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{view === 'home' ? (
|
||||
<main className="relative z-10">
|
||||
{/* Section 1: Cyber Hero */}
|
||||
<section className="py-40 px-10 max-w-[1800px] mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-24 items-center bg-[#0a0a0a] border-2 border-[#00f0ff]/30 p-12 md:p-24 relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 p-20 opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
<Server className="w-96 h-96" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-10">
|
||||
<Zap className="w-6 h-6 text-[#ff00f0] animate-pulse" />
|
||||
<span className="text-xs font-black uppercase tracking-[0.5em] text-[#ff00f0]">Emergency_Override_Active</span>
|
||||
</div>
|
||||
<h1 className="text-7xl md:text-[9rem] font-black uppercase tracking-tighter leading-none mb-12 text-white italic">
|
||||
EVOLVE <br/> <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00f0ff] to-[#ff00f0]">SYSTEM.</span>
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-[#888] font-bold leading-tight mb-16 max-w-xl border-l-8 border-[#00f0ff] pl-8">
|
||||
Ultrapasse os limites biológicos com interfaces neurais de latência zero. Sincronização absoluta com a rede global.
|
||||
</p>
|
||||
<button onClick={() => setView('product')} className="bg-[#00f0ff] text-black px-16 py-6 text-sm font-black uppercase tracking-[0.3em] hover:bg-white transition-all shadow-[0_0_50px_rgba(0,240,255,0.4)] flex items-center gap-6">
|
||||
INITIALIZE_INSTALL <ArrowRight className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="relative aspect-square border-4 border-[#00f0ff]/20 p-4 bg-black overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#00f0ff]/20 to-transparent z-10"></div>
|
||||
<div className="absolute inset-0 border-t-2 border-[#00f0ff]/50 w-full animate-[scan_4s_linear_infinite] z-20"></div>
|
||||
<img src={products[0].image} className="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-1000" alt="hero"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Component Grid */}
|
||||
<section className="py-40 px-10 max-w-[1800px] mx-auto">
|
||||
<div className="flex justify-between items-end mb-24 border-b-2 border-[#00f0ff]/20 pb-12">
|
||||
<div>
|
||||
<span className="text-xs font-black uppercase tracking-[0.5em] text-[#888] mb-6 block">Hardware_Modules</span>
|
||||
<h2 className="text-5xl md:text-7xl font-black italic tracking-tighter">LATEST_ASSETS</h2>
|
||||
</div>
|
||||
<button className="text-xs font-black uppercase tracking-widest text-[#00f0ff] hover:text-white transition-colors border-2 border-[#00f0ff] px-10 py-4">Global_Search</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{products.map((p, idx) => (
|
||||
<div key={p.id} className="group border-2 border-[#00f0ff]/10 p-8 bg-[#0a0a0a] hover:border-[#00f0ff] hover:shadow-[0_0_40px_rgba(0,240,255,0.2)] transition-all cursor-pointer flex flex-col h-full" onClick={() => setView('product')}>
|
||||
<div className="aspect-square bg-black border border-[#00f0ff]/20 relative overflow-hidden mb-8">
|
||||
<img src={p.image} className="w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 group-hover:opacity-100 group-hover:scale-110 transition-all duration-700" alt="product"/>
|
||||
<div className="absolute top-4 right-4 bg-black/80 text-[#00f0ff] text-[8px] font-black px-2 py-1 border border-[#00f0ff]/50 uppercase tracking-widest">Live_Feed</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-black uppercase mb-4 text-white group-hover:text-[#00f0ff] transition-colors">{p.name}</h3>
|
||||
<p className="text-[10px] text-[#888] font-bold mb-8 uppercase tracking-widest">{p.specs}</p>
|
||||
<div className="mt-auto pt-8 border-t border-[#00f0ff]/10 flex justify-between items-center font-black">
|
||||
<span className="text-2xl">{p.price}</span>
|
||||
<ArrowUpRight className="w-6 h-6 opacity-40 group-hover:opacity-100 group-hover:translate-x-1 group-hover:-translate-y-1 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Tech Security Protocol */}
|
||||
<section className="bg-[#00f0ff] p-10 md:p-32 text-center text-black border-y-4 border-black relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: `linear-gradient(rgba(0,0,0,1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,1) 1px, transparent 1px)`, backgroundSize: '30px 30px' }}></div>
|
||||
<Fingerprint className="w-24 h-24 mx-auto mb-10 stroke-[3px]" />
|
||||
<h2 className="text-6xl md:text-9xl font-black italic tracking-tighter mb-12 uppercase italic relative z-10">SECURE_SYNC</h2>
|
||||
<p className="text-xl md:text-2xl font-black uppercase tracking-widest mb-16 max-w-3xl mx-auto relative z-10">Conecte sua consciência ao fluxo global. Obtenha acesso antecipado a módulos experimentais e hardwares proibidos.</p>
|
||||
<div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-6 relative z-10">
|
||||
<input type="email" placeholder="ENTER_CRYPTO_CHANNEL" className="flex-1 bg-black text-[#00f0ff] border-4 border-black p-6 font-black uppercase placeholder-[#00f0ff]/20 outline-none focus:bg-[#00c0cc] focus:text-black transition-all" />
|
||||
<button className="bg-white text-black px-16 py-6 font-black uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-all shadow-[12px_12px_0_0_black]">
|
||||
CONNECT
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- PRODUCT VIEW --- */
|
||||
<main className="max-w-[1800px] mx-auto px-10 py-32">
|
||||
<div className="grid lg:grid-cols-2 gap-32 mb-40">
|
||||
<div className="sticky top-40 h-fit">
|
||||
<div className="aspect-square bg-[#0a0a0a] border-4 border-[#00f0ff] relative overflow-hidden shadow-[0_0_60px_rgba(0,240,255,0.2)] group">
|
||||
<div className="absolute inset-0 border-t-4 border-[#00f0ff]/30 w-full animate-[scan_5s_linear_infinite] z-20"></div>
|
||||
<img src={products[0].image} className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000" alt="product detail" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-6 mt-12">
|
||||
{[1,2,3,4].map(i => (
|
||||
<div key={i} className="aspect-square bg-black border-2 border-[#00f0ff]/20 hover:border-[#00f0ff] transition-all p-2 cursor-pointer">
|
||||
<img src={products[0].image} className="w-full h-full object-cover opacity-30 hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col py-10">
|
||||
<div className="mb-16">
|
||||
<span className="text-[#ff00f0] text-xs font-black uppercase tracking-[0.6em] mb-10 flex items-center gap-4">
|
||||
<ShieldAlert className="w-5 h-5" /> NODE_CLASSIFIED // LVL_09
|
||||
</span>
|
||||
<h1 className="text-6xl md:text-9xl font-black uppercase tracking-tighter leading-none mb-12 italic text-white">{products[0].name}</h1>
|
||||
<div className="text-5xl font-black bg-[#00f0ff] text-black w-fit px-10 py-6 italic shadow-[0_0_30px_rgba(0,240,255,0.4)]">{products[0].price}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 mb-20 border-l-8 border-[#00f0ff] pl-12 py-4">
|
||||
<h3 className="text-[#ff00f0] text-sm font-black uppercase tracking-[0.4em]">SYSTEM_DESCRIPTION</h3>
|
||||
<p className="text-2xl font-bold uppercase text-[#888] leading-tight italic">
|
||||
Interface cortical direta projetada para maximizar taxas de upload de dados. Apresenta blindagem de malha de titânio e loops de resfriamento redundantes. A instalação deve ser realizada por especialistas certificados em nanobiônica.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-8 text-[10px] font-black uppercase tracking-widest text-[#444]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[#00f0ff]">Latency_Rate</span>
|
||||
<span>0.0005 MS</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[#00f0ff]">Bandwidth</span>
|
||||
<span>1.2 PB/S</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-16 mb-24">
|
||||
<div className="space-y-8">
|
||||
<span className="text-xs font-black uppercase tracking-widest text-[#888]">Protocol_Type</span>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{['NEURAL_V1', 'QUANT_V2', 'SYN_V3', 'RAW_V4'].map(s => (
|
||||
<button key={s} className="border-2 border-[#00f0ff]/30 py-4 font-black text-xs hover:bg-[#00f0ff] hover:text-black transition-all">{s}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<span className="text-xs font-black uppercase tracking-widest text-[#888]">Cortex_Sync</span>
|
||||
<div className="flex gap-6">
|
||||
<button className="w-16 h-16 bg-[#00f0ff] border-2 border-white shadow-[0_0_20px_rgba(0,240,255,0.5)]"></button>
|
||||
<button className="w-16 h-16 bg-[#ff00f0] border-2 border-black"></button>
|
||||
<button className="w-16 h-16 bg-black border-2 border-[#00f0ff]"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setCartOpen(true)} className="w-full bg-[#00f0ff] text-black py-10 text-4xl font-black uppercase italic tracking-tighter shadow-[0_0_50px_rgba(0,240,255,0.3)] hover:bg-white transition-all flex justify-center items-center gap-8">
|
||||
INITIALIZE_TRANSFER <ShoppingBag className="w-10 h-10" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Related Assets */}
|
||||
<div className="border-t-2 border-[#00f0ff]/20 pt-32">
|
||||
<h2 className="text-4xl md:text-6xl font-black italic tracking-tighter uppercase mb-20">NEURAL_LINKED_ASSETS</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{products.slice(1).map((p) => (
|
||||
<div key={p.id} className="group border-2 border-[#00f0ff]/10 p-8 bg-[#0a0a0a] hover:border-[#00f0ff] transition-all cursor-pointer" onClick={() => setView('product')}>
|
||||
<div className="aspect-square bg-black border border-[#00f0ff]/20 relative overflow-hidden mb-8">
|
||||
<img src={p.image} className="w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700" alt="product"/>
|
||||
</div>
|
||||
<h3 className="text-xl font-black uppercase mb-4 text-white group-hover:text-[#00f0ff] transition-colors">{p.name}</h3>
|
||||
<div className="flex justify-between items-center font-black">
|
||||
<span className="text-lg">{p.price}</span>
|
||||
<ArrowUpRight className="w-5 h-5 opacity-40 group-hover:opacity-100 transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Cyberpunk Footer */}
|
||||
<footer className="border-t-2 border-[#00f0ff]/20 bg-black py-40 px-10">
|
||||
<div className="max-w-[1800px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-24 mb-40">
|
||||
<div className="lg:col-span-2">
|
||||
<h2 className="text-6xl md:text-[8rem] font-black italic tracking-tighter mb-12 uppercase italic text-white">NEXUS<span className="text-[#00f0ff]">CORE</span></h2>
|
||||
<p className="text-2xl font-black uppercase tracking-tight text-[#888] leading-none max-w-xl italic">A INTERFACE DEFINITIVA PARA A EVOLUÇÃO DA CONSCIÊNCIA DIGITAL. SEJA MAIS QUE HUMANO.</p>
|
||||
<div className="flex gap-10 mt-20">
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Instagram')} className="w-16 h-16 border-2 border-[#00f0ff]/20 flex items-center justify-center hover:bg-[#00f0ff] hover:text-black transition-all shadow-[0_0_20px_rgba(0,240,255,0.1)]"><Instagram className="w-8 h-8"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Site')} className="w-16 h-16 border-2 border-[#00f0ff]/20 flex items-center justify-center hover:bg-[#00f0ff] hover:text-black transition-all shadow-[0_0_20px_rgba(0,240,255,0.1)]"><Globe className="w-8 h-8"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Share')} className="w-16 h-16 border-2 border-[#00f0ff]/20 flex items-center justify-center hover:bg-[#00f0ff] hover:text-black transition-all shadow-[0_0_20px_rgba(0,240,255,0.1)]"><Share2 className="w-8 h-8"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#ff00f0] text-sm font-black uppercase tracking-[0.5em] mb-12 border-b-2 border-white/5 pb-6 inline-block font-mono">PROTOCOL_LAWS</h4>
|
||||
<ul className="space-y-8 text-xs font-black uppercase tracking-widest text-[#666]">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Privacidade')} className="hover:text-[#00f0ff] transition-colors flex items-center gap-4">PRIVACY_ENCRYPTION <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Termos')} className="hover:text-[#00f0ff] transition-colors flex items-center gap-4">TERMS_SLA <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Cookies')} className="hover:text-[#00f0ff] transition-colors flex items-center gap-4">COOKIE_VAULT <ArrowRight className="w-4 h-4"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#ff00f0] text-sm font-black uppercase tracking-[0.5em] mb-12 border-b-2 border-white/5 pb-6 inline-block font-mono">NEURAL_SUPPORT</h4>
|
||||
<ul className="space-y-8 text-xs font-black uppercase tracking-widest text-[#666]">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Suporte')} className="hover:text-[#00f0ff] transition-colors flex items-center gap-4">TERMINAL_HELP <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Shipping')} className="hover:text-[#00f0ff] transition-colors flex items-center gap-4">DATA_LOGISTICS <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Returns')} className="hover:text-[#00f0ff] transition-colors flex items-center gap-4">DEBUG_RETURNS <ArrowRight className="w-4 h-4"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-20 border-t-2 border-white/5 flex flex-col md:flex-row justify-between items-center gap-12 text-[9px] font-black uppercase tracking-[0.8em] text-[#333] text-center">
|
||||
<span>© {new Date().getFullYear()} NEXUS_CORE_INT. DECODED BY AUTOBLOG.</span>
|
||||
<div className="flex items-center gap-10">
|
||||
<span>ENCRYPTION: AES-256-GCM</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-cyan-500 animate-pulse shadow-[0_0_10px_rgba(0,240,255,0.8)]"></div>
|
||||
<span className="text-cyan-500/50">SECURE_CHANNEL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Neural Buffer Sidebar */}
|
||||
{cartOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
<div className="absolute inset-0 bg-[#00f0ff]/5 backdrop-blur-sm cursor-pointer" onClick={() => setCartOpen(false)}></div>
|
||||
<div className="w-full max-w-2xl bg-black border-l-4 border-[#00f0ff] h-full flex flex-col relative z-[110] shadow-[-40px_0_100px_rgba(0,240,255,0.1)]">
|
||||
<div className="p-12 border-b-2 border-[#00f0ff]/20 bg-[#00f0ff]/5 flex justify-between items-center">
|
||||
<h2 className="text-4xl font-black italic tracking-tighter uppercase text-white">BUFFER_STREAM</h2>
|
||||
<button onClick={() => setCartOpen(false)} className="text-[#00f0ff] hover:text-white transition-all"><X className="w-12 h-12"/></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-12 space-y-12 bg-[#050505]">
|
||||
<div className="flex gap-10 p-8 bg-black border-2 border-[#00f0ff]/20 shadow-[10px_10px_0_0_rgba(0,240,255,0.1)]">
|
||||
<div className="w-32 h-44 bg-gray-900 border-2 border-[#00f0ff]/40 shrink-0 relative overflow-hidden">
|
||||
<img src={products[0].image} className="w-full h-full object-cover grayscale contrast-150" alt="item"/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<h3 className="text-3xl font-black uppercase tracking-tighter leading-none mb-6 text-white">{products[0].name}</h3>
|
||||
<p className="text-[10px] font-black uppercase text-[#444] tracking-widest">Protocol: NL_HD_V4 | Node: 01</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-end pt-10 border-t border-[#00f0ff]/10">
|
||||
<p className="text-3xl font-black italic tracking-tighter text-[#00f0ff]">{products[0].price}</p>
|
||||
<button className="text-[10px] font-black uppercase tracking-widest text-red-500 hover:text-white transition-all">TERMINATE_ASSET</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-12 border-t-2 border-[#00f0ff]/20 bg-black">
|
||||
<div className="flex justify-between items-center mb-12 text-3xl font-black italic tracking-tighter uppercase p-8 border-2 border-[#00f0ff] text-white shadow-[inset_0_0_20px_rgba(0,240,255,0.1)]">
|
||||
<span>STREAM_VAL</span>
|
||||
<span className="text-[#00f0ff]">2,999.00 CRED</span>
|
||||
</div>
|
||||
<button className="w-full bg-[#00f0ff] text-black py-10 text-4xl font-black uppercase italic tracking-tighter shadow-[0_0_40px_rgba(0,240,255,0.4)] hover:bg-white transition-all flex justify-center items-center gap-8">
|
||||
EXECUTE_PAYMENT <ArrowRight className="w-12 h-12" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
347
src/components/themes/PopularTheme.tsx
Normal file
347
src/components/themes/PopularTheme.tsx
Normal file
|
|
@ -0,0 +1,347 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
183
src/components/themes/PulseTheme.tsx
Normal file
183
src/components/themes/PulseTheme.tsx
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
import { Activity, Zap, TrendingUp, BarChart3, Globe, Share2, Instagram, Search, Menu, Send, ChevronRight, MessageCircle, Bookmark, Volume2, ArrowRight } from 'lucide-react';
|
||||
|
||||
export default function PulseTheme({ 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 || 'ALERT',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR'),
|
||||
img: p.image || `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200&random=${i}`,
|
||||
content: p.content
|
||||
})) : [
|
||||
{ id: '1', title: 'Google Core Update 04.2026: Live Tracking', category: 'URGENT', img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200' },
|
||||
{ id: '2', title: 'Major Indexing Bug in Search Console Detected', category: 'SYSTEM', 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 || 'UPDATE',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=1200`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="seo-pulse bg-black text-white min-h-screen font-sans selection:bg-[#FF4D00] selection:text-white">
|
||||
|
||||
{/* High-Octane Header */}
|
||||
<nav className="border-b-4 border-white p-6 sticky top-0 z-50 bg-black flex justify-between items-center">
|
||||
<div className="flex items-center gap-6">
|
||||
<Menu className="w-8 h-8 cursor-pointer hover:text-[#FF4D00] transition-colors" />
|
||||
<a href="/" className="text-4xl font-black italic tracking-tighter">SEO<span className="text-[#FF4D00]">PULSE</span></a>
|
||||
</div>
|
||||
<div className="hidden lg:flex items-center gap-12 text-xs font-black uppercase tracking-widest">
|
||||
<a href="/category/alerts" className="text-[#FF4D00]">Live Alerts</a>
|
||||
<a href="/category/all" className="hover:text-[#FF4D00] transition-colors">Archive</a>
|
||||
<a href="/category/tools" className="hover:text-[#FF4D00] transition-colors">Pulse Tools</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Search className="w-6 h-6 cursor-pointer hover:text-[#FF4D00]" />
|
||||
<button className="bg-white text-black px-6 py-2 text-[10px] font-black uppercase tracking-widest hover:bg-[#FF4D00] hover:text-white transition-all">Emergency Access</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main>
|
||||
{/* Section 1: Live HUD Hero */}
|
||||
<section className="p-6 md:p-12 border-b-4 border-white grid lg:grid-cols-2">
|
||||
<div className="p-8 md:p-16 flex flex-col justify-center border-b-4 lg:border-b-0 lg:border-r-4 border-white">
|
||||
<div className="flex items-center gap-4 mb-10">
|
||||
<div className="w-4 h-4 rounded-full bg-[#FF4D00] animate-ping"></div>
|
||||
<span className="text-xs font-black uppercase tracking-[0.3em] text-[#FF4D00]">System Update Detected</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-8xl font-black italic tracking-tighter leading-[0.85] mb-12 uppercase italic">
|
||||
Fast Data <br/> <span className="text-[#FF4D00]">Deep Insight.</span>
|
||||
</h1>
|
||||
<p className="text-xl font-bold uppercase leading-tight mb-16 max-w-md border-l-8 border-[#FF4D00] pl-8">O algoritmo do Google mudou há 12 minutos. Você está pronto para o impacto ou vai ficar para trás?</p>
|
||||
<a href={`/${articlesToRender[0].id}`} className="bg-white text-black px-12 py-6 text-sm font-black uppercase tracking-[0.2em] hover:bg-[#FF4D00] hover:text-white transition-all w-fit shadow-[10px_10px_0_0_#FF4D00]">
|
||||
Get The Report Now
|
||||
</a>
|
||||
</div>
|
||||
<div className="aspect-video lg:aspect-auto relative overflow-hidden bg-zinc-900">
|
||||
<img src={articlesToRender[0].img} className="w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 transition-all duration-700" alt="pulse hero"/>
|
||||
<div className="absolute top-10 right-10 flex flex-col items-end gap-2">
|
||||
<span className="text-[10px] font-black bg-white text-black px-4 py-1 uppercase tracking-widest">Live Feed</span>
|
||||
<span className="text-[10px] font-black bg-[#FF4D00] text-white px-4 py-1 uppercase tracking-widest">ID: {articlesToRender[0].id}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: News Ticker Style Grid */}
|
||||
<section className="p-6 md:p-12">
|
||||
<div className="flex justify-between items-center mb-16 border-b-4 border-white pb-6">
|
||||
<h2 className="text-4xl font-black italic tracking-tighter uppercase">Market Pulse</h2>
|
||||
<a href="/category/all" className="text-xs font-black uppercase tracking-widest border-b-2 border-[#FF4D00] pb-1 text-[#FF4D00]">View Full Archive</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
{articlesToRender.map((art, idx) => (
|
||||
<a href={`/${art.id}`} key={art.id + idx} className="group border-4 border-white p-8 hover:bg-white hover:text-black transition-all block">
|
||||
<div className="flex justify-between items-start mb-10">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest bg-[#FF4D00] text-white px-3 py-1">Alert // 2026</span>
|
||||
<span className="text-[10px] font-black uppercase tracking-widest opacity-40">{art.date}</span>
|
||||
</div>
|
||||
<h3 className="text-3xl font-black uppercase tracking-tighter leading-none mb-8 group-hover:italic transition-all">{art.title}</h3>
|
||||
<p className="text-sm font-bold uppercase opacity-60 mb-10 group-hover:opacity-100">{art.excerpt}</p>
|
||||
<div className="flex items-center gap-4 text-xs font-black uppercase tracking-widest">
|
||||
Read Report <ArrowRight className="w-4 h-4 group-hover:translate-x-4 transition-transform" />
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* High-Octane CTA */}
|
||||
<section className="bg-[#FF4D00] p-12 md:p-24 text-center">
|
||||
<Activity className="w-20 h-20 mx-auto mb-10 stroke-[4px]" />
|
||||
<h2 className="text-5xl md:text-8xl font-black italic tracking-tighter mb-10 uppercase leading-none">Stay Decoded.</h2>
|
||||
<p className="text-xl font-black uppercase mb-16 max-w-2xl mx-auto">Junte-se à rede de elite. Receba alertas de mudanças de algoritmo em tempo real via SMS e E-mail.</p>
|
||||
<div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-6">
|
||||
<input type="email" placeholder="YOUR ACCESS EMAIL..." className="flex-1 bg-black text-white border-4 border-white p-6 font-black uppercase placeholder-white/30 outline-none" />
|
||||
<button className="bg-white text-black px-12 py-6 font-black uppercase tracking-widest hover:bg-black hover:text-white transition-all">Activate</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="pb-40">
|
||||
<div className="max-w-[1200px] mx-auto px-6 py-20">
|
||||
<div className="grid lg:grid-cols-12 gap-16">
|
||||
<div className="lg:col-span-1 flex flex-col gap-8 text-[#FF4D00] sticky top-32 h-fit">
|
||||
<Share2 className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
|
||||
<MessageCircle className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
|
||||
<Bookmark className="w-8 h-8 cursor-pointer hover:scale-110 transition-transform" />
|
||||
</div>
|
||||
<div className="lg:col-span-11">
|
||||
<div className="flex items-center gap-4 mb-10">
|
||||
<span className="bg-[#FF4D00] text-white text-[10px] font-black px-4 py-1 rounded uppercase tracking-[0.3em]">Verified_Intelligence</span>
|
||||
<span className="text-xs font-black uppercase opacity-40">{displayArticle.date}</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-8xl font-black italic tracking-tighter leading-[0.85] mb-16 uppercase italic text-white">{displayArticle.title}</h1>
|
||||
|
||||
<div className="aspect-video bg-zinc-900 border-4 border-white mb-20 overflow-hidden">
|
||||
<img src={displayArticle.img} className="w-full h-full object-cover" alt="post img"/>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-2xl prose-invert max-w-none prose-p:font-bold prose-p:uppercase prose-p:tracking-tight prose-headings:font-black prose-headings:italic prose-a:text-[#FF4D00] prose-strong:text-[#FF4D00]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Pulse Footer */}
|
||||
<footer className="border-t-4 border-white py-24 px-6 bg-black text-white">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-20 mb-32">
|
||||
<div className="lg:col-span-2">
|
||||
<h1 className="text-6xl font-black italic tracking-tighter mb-10">SEO<span className="text-[#FF4D00]">PULSE</span></h1>
|
||||
<p className="text-gray-400 text-lg font-black uppercase leading-relaxed max-w-md mb-12">Monitoramento instantâneo do ecossistema de busca. Uma interface de alta voltagem para quem vive de dados e performance.</p>
|
||||
<div className="flex gap-8">
|
||||
<a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Instagram className="w-6 h-6"/></a>
|
||||
<a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Globe className="w-6 h-6"/></a>
|
||||
<a href="#" className="w-14 h-14 border-4 border-white flex items-center justify-center hover:bg-[#FF4D00] transition-all"><Share2 className="w-6 h-6"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#FF4D00] text-xs font-black uppercase tracking-[0.4em] mb-10">Legal_Core</h4>
|
||||
<ul className="space-y-6 text-[10px] font-black uppercase tracking-widest 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_Uso</a></li>
|
||||
<li><a href="/cookies" className="hover:text-white transition-colors">Cookies_Protocol</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#FF4D00] text-xs font-black uppercase tracking-[0.4em] mb-10">Network</h4>
|
||||
<ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
<li><a href="/contact" className="hover:text-white transition-colors">Suporte_Direto</a></li>
|
||||
<li><a href="/search" className="hover:text-white transition-colors">Busca_Global</a></li>
|
||||
<li><a href="/about" className="hover:text-white transition-colors">Sobre_Nos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-center pt-16 border-t-2 border-white/10 text-[10px] font-black uppercase tracking-[0.5em] text-gray-600 text-center md:text-left gap-8">
|
||||
<span>© {new Date().getFullYear()} SEO PULSE SYSTEMS. ALL RIGHTS DECODED.</span>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Activity className="w-3 h-3 text-[#FF4D00]"/>
|
||||
<span>Uptime: 99.9%</span>
|
||||
</div>
|
||||
<span>Version: 4.0.26_X</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
118
src/components/themes/SeoMinimalTheme.tsx
Normal file
118
src/components/themes/SeoMinimalTheme.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import { Mail, ArrowRight, Instagram, Globe, Share2, Search, Zap } from 'lucide-react';
|
||||
|
||||
export default function SeoMinimalTheme({ 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 || 'INSIGHT',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR'),
|
||||
img: p.image || `https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&q=80&w=800&random=${i}`,
|
||||
content: p.content
|
||||
})) : [
|
||||
{ id: '1', title: 'The Silent Evolution of Content Trust', category: 'THOUGHTS', img: 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Why Simple Wins in Search', category: 'UX', img: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?auto=format&fit=crop&q=80&w=800' },
|
||||
];
|
||||
|
||||
const displayArticle = currentArticle ? {
|
||||
...currentArticle,
|
||||
id: currentArticle.slug || currentArticle.id,
|
||||
category: currentArticle.category_name || 'ARTICLE',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1481627834876-b7833e8f5570?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="seo-minimal bg-white text-black min-h-screen font-serif selection:bg-black selection:text-white">
|
||||
|
||||
{/* Pure Navigation */}
|
||||
<nav className="max-w-[1200px] mx-auto px-6 py-12 flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div className="flex-1 flex justify-start">
|
||||
<Search className="w-5 h-5 text-zinc-300 hover:text-black cursor-pointer transition-colors" />
|
||||
</div>
|
||||
<div className="flex-1 text-center">
|
||||
<a href="/" className="text-4xl font-serif tracking-tighter italic block">Pure<span className="font-light italic text-[#888]">SEO</span></a>
|
||||
<span className="text-[10px] uppercase tracking-[0.4em] text-zinc-300 font-bold font-sans">Less but better</span>
|
||||
</div>
|
||||
<div className="flex-1 flex justify-end gap-10 text-[10px] font-bold tracking-widest uppercase font-sans text-zinc-400">
|
||||
<a href="/category/all" className="hover:text-black transition-colors">Archive</a>
|
||||
<a href="/about" className="hover:text-black transition-colors">About</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1000px] mx-auto px-6 py-20">
|
||||
{/* Pure Grid */}
|
||||
<div className="space-y-40">
|
||||
{articlesToRender.slice(0, 3).map((art, idx) => (
|
||||
<a href={`/${art.id}`} key={art.id + idx} className="group block text-center max-w-2xl mx-auto">
|
||||
<div className="aspect-[16/10] overflow-hidden mb-12 bg-zinc-50 rounded-lg">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000 opacity-90 group-hover:opacity-100" alt="post"/>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.5em] text-[#888] mb-6 block font-sans">{art.category} // {art.date}</span>
|
||||
<h2 className="text-4xl md:text-5xl font-serif italic mb-8 group-hover:underline underline-offset-8">{art.title}</h2>
|
||||
<p className="text-xl text-zinc-500 leading-relaxed font-light mb-10">{art.excerpt}</p>
|
||||
<div className="inline-flex items-center gap-3 text-xs font-bold uppercase tracking-widest font-sans group-hover:gap-6 transition-all">
|
||||
Continue Reading <ArrowRight className="w-4 h-4" />
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Minimal Subscription */}
|
||||
<div className="mt-60 py-40 border-t border-zinc-100 text-center">
|
||||
<Zap className="w-8 h-8 mx-auto mb-10 text-zinc-200" />
|
||||
<h4 className="text-4xl font-serif italic mb-12">Subscribe to the Pure Letter.</h4>
|
||||
<div className="max-w-xl mx-auto flex gap-4">
|
||||
<input type="email" placeholder="Your email..." className="flex-1 bg-zinc-50 border-none px-8 py-5 rounded-full text-sm font-light outline-none font-sans text-black" />
|
||||
<button className="bg-black text-white px-10 py-5 rounded-full text-xs font-bold tracking-widest uppercase hover:bg-zinc-800 transition-all font-sans">Join</button>
|
||||
</div>
|
||||
<p className="mt-8 text-[10px] uppercase tracking-widest text-zinc-300 font-bold font-sans">Weekly insights. Zero noise.</p>
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[800px] mx-auto px-6 py-20 pb-40">
|
||||
<div className="text-center mb-20">
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.5em] text-[#888] mb-8 block font-sans">{displayArticle.category} // {displayArticle.date}</span>
|
||||
<h1 className="text-5xl md:text-7xl font-serif italic mb-10 tracking-tighter text-black">{displayArticle.title}</h1>
|
||||
<span className="text-xs font-light text-zinc-400 font-sans italic tracking-widest">Est. Reading: 12 minutes</span>
|
||||
</div>
|
||||
|
||||
<div className="aspect-[16/10] overflow-hidden mb-20 rounded-lg bg-zinc-50">
|
||||
<img src={displayArticle.img} className="w-full h-full object-cover" alt="Article"/>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-2xl prose-zinc prose-p:font-light prose-headings:font-serif prose-headings:italic prose-a:text-black prose-p:text-zinc-600 prose-p:leading-relaxed">
|
||||
{children}
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Pure Footer */}
|
||||
<footer className="py-32 border-t border-zinc-50 text-center bg-[#fafafa]">
|
||||
<div className="max-w-[1200px] mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-10 mb-20">
|
||||
<div className="flex gap-12 text-[10px] font-bold uppercase tracking-widest text-zinc-400 font-sans">
|
||||
<a href="/privacy" className="hover:text-black transition-colors">Privacidade</a>
|
||||
<a href="/terms" className="hover:text-black transition-colors">Termos</a>
|
||||
<a href="/cookies" className="hover:text-black transition-colors">Cookies</a>
|
||||
</div>
|
||||
|
||||
<a href="/" className="text-2xl font-serif tracking-tighter italic">Pure<span className="font-light italic text-[#888]">SEO</span></a>
|
||||
|
||||
<div className="flex gap-8">
|
||||
<a href="#" className="text-zinc-300 hover:text-black transition-colors"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="text-zinc-300 hover:text-black transition-colors"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="text-zinc-300 hover:text-black transition-colors"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-[10px] font-bold tracking-[0.8em] text-zinc-300 uppercase italic font-sans">Pure Authority // Less but Better.</p>
|
||||
<div className="mt-12 text-[8px] font-bold uppercase tracking-[0.2em] text-zinc-200 font-sans">
|
||||
© {new Date().getFullYear()} Pure SEO Lab. Built by Autoblog Minimal AI.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
157
src/components/themes/SeoNexusTheme.tsx
Normal file
157
src/components/themes/SeoNexusTheme.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
import { Terminal, Cpu, Share2, Globe, Instagram, Zap, Shield, Search, Target, BarChart, ChevronRight } from 'lucide-react';
|
||||
|
||||
export default function SeoNexusTheme({ 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 || 'NEURAL',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR'),
|
||||
img: p.image || `https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=1200&random=${i}`,
|
||||
content: p.content
|
||||
})) : [
|
||||
{ id: '1', title: 'Neural Ranking: The Core Paradigm Shift', category: 'ALGORITHMS', img: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=1200' },
|
||||
{ id: '2', title: 'Vector Space Optimization Guide', category: 'DATA', img: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800' },
|
||||
];
|
||||
|
||||
const displayArticle = currentArticle ? {
|
||||
...currentArticle,
|
||||
id: currentArticle.slug || currentArticle.id,
|
||||
category: currentArticle.category_name || 'NODE',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&q=80&w=1200`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="seo-nexus bg-[#02040a] text-[#8b949e] min-h-screen font-mono selection:bg-blue-500 selection:text-white">
|
||||
|
||||
{/* HUD Navigation */}
|
||||
<nav className="border-b border-blue-500/20 bg-[#02040a]/80 backdrop-blur-md sticky top-0 z-50">
|
||||
<div className="max-w-[1400px] mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-8 h-8 bg-blue-500/10 border border-blue-500/30 flex items-center justify-center rounded">
|
||||
<Terminal className="w-4 h-4 text-blue-500" />
|
||||
</div>
|
||||
<a href="/" className="text-xl font-black tracking-widest text-white uppercase">NEXUS<span className="text-blue-500">SEO</span></a>
|
||||
</div>
|
||||
<div className="hidden lg:flex items-center gap-8 text-[10px] font-bold tracking-[0.3em] uppercase">
|
||||
<a href="/category/algorithms" className="hover:text-blue-500 transition-colors">Algorithms</a>
|
||||
<a href="/category/neural" className="hover:text-blue-500 transition-colors">Neural Link</a>
|
||||
<a href="/category/ranking" className="hover:text-blue-500 transition-colors">Ranking</a>
|
||||
</div>
|
||||
<button className="border border-blue-500/30 text-blue-500 px-6 py-2 rounded-full text-[10px] font-black tracking-widest hover:bg-blue-500 hover:text-white transition-all uppercase">Sync Data</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1400px] mx-auto px-6 py-20">
|
||||
{/* Cyberpunk Hero */}
|
||||
<section className="grid lg:grid-cols-2 gap-20 items-center mb-40 border border-blue-500/10 p-12 rounded-2xl bg-blue-500/[0.02] relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
||||
<Cpu className="w-64 h-64 text-blue-500" />
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Zap className="w-5 h-5 text-blue-500 animate-pulse" />
|
||||
<span className="text-xs font-black text-blue-500 uppercase tracking-[0.4em]">Real-time Analysis</span>
|
||||
</div>
|
||||
<h1 className="text-5xl md:text-8xl font-black uppercase tracking-tighter mb-10 leading-none text-white">Neural <br/> <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-600">Ranking.</span></h1>
|
||||
<p className="text-xl text-[#8b949e] leading-relaxed mb-12 max-w-lg border-l-2 border-blue-500/30 pl-8 uppercase font-bold text-sm">A nova fronteira do SEO não será buscada, será antecipada por vetores de intenção latente.</p>
|
||||
<a href={`/${articlesToRender[0].id}`} className="inline-flex items-center gap-4 bg-blue-500 text-white px-12 py-5 text-xs font-black uppercase tracking-[0.2em] hover:bg-white hover:text-black transition-all shadow-2xl shadow-blue-500/20">
|
||||
Access Node <ArrowRight className="w-5 h-5" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative aspect-video rounded-xl overflow-hidden border border-blue-500/20 bg-black">
|
||||
<img src={articlesToRender[0].img} className="w-full h-full object-cover opacity-60 group-hover:opacity-100 group-hover:scale-105 transition-all duration-1000" alt="hero"/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-blue-500/20 to-transparent"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Data Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{articlesToRender.map((art, idx) => (
|
||||
<a href={`/${art.id}`} key={art.id + idx} className="group border border-blue-500/10 p-6 rounded-xl hover:border-blue-500/50 transition-all bg-[#0d1117] flex flex-col h-full block">
|
||||
<div className="aspect-video bg-black rounded-lg overflow-hidden mb-6 relative border border-white/5">
|
||||
<img src={art.img} className="w-full h-full object-cover opacity-50 group-hover:opacity-100 transition-opacity" alt="post"/>
|
||||
<div className="absolute bottom-3 left-3 bg-blue-500 text-white px-2 py-0.5 text-[8px] font-black uppercase rounded">Live_Feed</div>
|
||||
</div>
|
||||
<span className="text-[10px] font-black text-blue-500 uppercase tracking-widest mb-4">{art.category} // {art.date}</span>
|
||||
<h3 className="text-xl font-black uppercase text-white mb-6 group-hover:text-blue-400 transition-colors leading-tight">{art.title}</h3>
|
||||
<div className="mt-auto pt-6 border-t border-white/5 flex justify-between items-center text-[10px] font-black uppercase tracking-widest text-gray-600 group-hover:text-white transition-colors">
|
||||
<span>Ref_0{idx+1}</span>
|
||||
<div className="flex items-center gap-2">Protocol_Access <ChevronRight className="w-3 h-3" /></div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1000px] mx-auto px-6 py-20 pb-40">
|
||||
<div className="border border-blue-500/20 rounded-2xl bg-[#0d1117] overflow-hidden shadow-2xl">
|
||||
<div className="p-8 md:p-16 border-b border-blue-500/10">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<Shield className="w-5 h-5 text-blue-500" />
|
||||
<span className="text-xs font-black text-blue-500 uppercase tracking-[0.4em]">Node_ID: {displayArticle.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-7xl font-black uppercase tracking-tighter mb-8 text-white leading-none">{displayArticle.title}</h1>
|
||||
<div className="flex items-center gap-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
|
||||
<span className="flex items-center gap-2"><Target className="w-4 h-4 text-blue-500" /> Source: Official_Labs</span>
|
||||
<span className="flex items-center gap-2"><Activity className="w-4 h-4 text-green-500" /> Status: Verified</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8 md:p-16">
|
||||
<div className="prose prose-invert prose-lg max-w-none prose-blue prose-headings:font-black prose-headings:uppercase prose-p:text-[#8b949e] prose-strong:text-white prose-pre:bg-black prose-pre:border prose-pre:border-blue-500/20">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Nexus Footer */}
|
||||
<footer className="border-t border-blue-500/20 py-32 px-6 bg-[#010204]">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-20 mb-32">
|
||||
<div className="md:col-span-2">
|
||||
<a href="/" className="text-3xl font-black tracking-widest text-white uppercase mb-10 block">NEXUS<span className="text-blue-500">SEO</span></a>
|
||||
<p className="text-gray-500 text-sm font-bold leading-relaxed max-w-sm mb-12 uppercase">Hub tecnológico de SEO e inteligência algorítmica. Uma interface focada em performance, dados brutos e autoridade técnica absoluta.</p>
|
||||
<div className="flex gap-6">
|
||||
<a href="#" className="w-12 h-12 border border-blue-500/20 flex items-center justify-center rounded-lg hover:bg-blue-500 hover:text-white transition-all"><Instagram className="w-6 h-6"/></a>
|
||||
<a href="#" className="w-12 h-12 border border-blue-500/20 flex items-center justify-center rounded-lg hover:bg-blue-500 hover:text-white transition-all"><Globe className="w-6 h-6"/></a>
|
||||
<a href="#" className="text-gray-500 hover:text-blue-500 transition-colors"><Share2 className="w-6 h-6"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-blue-500 text-[10px] font-black uppercase tracking-[0.3em] mb-10">Protocols</h4>
|
||||
<ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-600">
|
||||
<li><a href="/privacy" className="hover:text-blue-500 transition-colors">Privacidade_Data</a></li>
|
||||
<li><a href="/terms" className="hover:text-blue-500 transition-colors">Termos_SLA</a></li>
|
||||
<li><a href="/cookies" className="hover:text-blue-500 transition-colors">Cookie_Vault</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-blue-500 text-[10px] font-black uppercase tracking-[0.3em] mb-10">Access</h4>
|
||||
<ul className="space-y-6 text-[10px] font-black uppercase tracking-widest text-gray-600">
|
||||
<li><a href="/contact" className="hover:text-blue-500 transition-colors">Terminal_Support</a></li>
|
||||
<li><a href="/search" className="hover:text-blue-500 transition-colors">Global_Search</a></li>
|
||||
<li><a href="/about" className="hover:text-blue-500 transition-colors">Project_Nexus</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row justify-between items-center pt-16 border-t border-blue-500/10 text-[8px] font-black uppercase tracking-[0.5em] text-gray-800">
|
||||
<span>© {new Date().getFullYear()} NEXUS_CORE_SYSTEM. DECODED BY AUTOBLOG.</span>
|
||||
<div className="flex items-center gap-6">
|
||||
<span>ENCRYPTION: AES-256</span>
|
||||
<span>STATUS: SECURE_CHANNEL</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
216
src/components/themes/SeoTheme.tsx
Normal file
216
src/components/themes/SeoTheme.tsx
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
import { Search, Menu, TrendingUp, ChevronRight, Mail, User, Clock, Share2, Globe, Instagram, Bookmark, ArrowRight, Facebook, Twitter, Linkedin } from 'lucide-react';
|
||||
|
||||
export default function SeoTheme({ 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 || 'SEO',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
author: p.author_name || 'Robert Marketing',
|
||||
date: new Date(p.created_at || Date.now()).toLocaleDateString('pt-BR'),
|
||||
readTime: '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
|
||||
})) : [
|
||||
{ id: '1', title: 'Dominating Google Algorithm in 2026: The Ultimate Guide', category: 'SEO', excerpt: 'Discover the new Core Web Vitals metrics and how AI is changing content discovery.', author: 'Robert Marketing', date: 'Apr 25, 2026', readTime: '8 min', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: '10 Link Building Strategies That Actually Work', category: 'MARKETING', excerpt: "Link building isn't dead, it just evolved. Learn how to get real authority.", author: 'Ann Silva', date: 'Apr 24, 2026', readTime: '12 min', img: 'https://images.unsplash.com/photo-1557838923-2985c11822a6?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 || 'Marketing Pro',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="seo-portal bg-white text-[#333] min-h-screen font-sans selection:bg-[#FC8E41] selection:text-white">
|
||||
|
||||
{/* Header JNews SEO Style */}
|
||||
<header className="border-b border-gray-100 sticky top-0 bg-white/95 backdrop-blur-md z-50">
|
||||
<div className="max-w-[1240px] mx-auto px-4 lg:px-6 h-20 flex items-center justify-between">
|
||||
<div className="flex items-center gap-8">
|
||||
<a href="/" className="text-3xl font-black tracking-tighter text-black uppercase">
|
||||
SEO<span className="text-[#FC8E41]">PORTAL</span>
|
||||
</a>
|
||||
<nav className="hidden lg:flex items-center gap-6 text-[13px] font-bold uppercase tracking-wide text-gray-600">
|
||||
{['SEO', 'Marketing', 'Social Media', 'E-commerce', 'Tech'].map(cat => (
|
||||
<a key={cat} href={`/category/${cat.toLowerCase()}`} className="hover:text-[#FC8E41] transition-colors">{cat}</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="p-2 text-gray-500 hover:text-black transition-colors"><Search className="w-5 h-5" /></button>
|
||||
<button className="bg-[#FC8E41] text-white px-6 py-2.5 rounded-full font-bold text-[12px] uppercase tracking-widest hover:bg-[#E67E30] transition-all shadow-lg shadow-[#FC8E41]/20">
|
||||
Subscribe
|
||||
</button>
|
||||
<button className="lg:hidden p-2 text-gray-800"><Menu className="w-6 h-6" /></button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1240px] mx-auto px-4 lg:px-6 py-10">
|
||||
|
||||
{/* Featured Post (Hero) */}
|
||||
<section className="relative w-full aspect-[21/9] rounded-2xl overflow-hidden mb-12 shadow-2xl group">
|
||||
<a href={`/${articlesToRender[0].id}`} className="block w-full h-full">
|
||||
<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-t from-black/80 via-black/20 to-transparent flex flex-col justify-end p-8 sm:p-12">
|
||||
<span className="bg-[#FC8E41] text-white text-[10px] font-black px-4 py-1.5 rounded-full w-fit mb-4 uppercase tracking-[0.2em]">
|
||||
{articlesToRender[0].category}
|
||||
</span>
|
||||
<h2 className="text-3xl sm:text-5xl font-black text-white leading-[1.1] mb-6 max-w-4xl group-hover:text-[#FC8E41] transition-colors">
|
||||
{articlesToRender[0].title}
|
||||
</h2>
|
||||
<div className="flex items-center gap-6 text-white/70 text-[11px] font-bold uppercase tracking-widest">
|
||||
<span className="flex items-center gap-2"><User className="w-3.5 h-3.5 text-[#FC8E41]"/> {articlesToRender[0].author}</span>
|
||||
<span className="flex items-center gap-2"><Clock className="w-3.5 h-3.5"/> 8 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-12">
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-[2]">
|
||||
<h3 className="text-xl font-black uppercase tracking-tighter border-b-2 border-black pb-3 mb-8 flex items-center gap-3 text-black">
|
||||
<TrendingUp className="w-5 h-5 text-[#FC8E41]" />
|
||||
LATEST INSIGHTS
|
||||
</h3>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-8">
|
||||
{articlesToRender.slice(0, 6).map((art, idx) => (
|
||||
<a href={`/${art.id}`} key={art.id + idx} className="group block">
|
||||
<article>
|
||||
<div className="aspect-[16/10] overflow-hidden rounded-xl mb-5 shadow-md bg-gray-100">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" alt="thumb"/>
|
||||
</div>
|
||||
<span className="text-[#FC8E41] font-black text-[9px] uppercase tracking-widest mb-2 block">{art.category}</span>
|
||||
<h4 className="text-xl font-bold leading-snug group-hover:text-[#FC8E41] transition-colors mb-3 text-black">
|
||||
{art.title}
|
||||
</h4>
|
||||
<p className="text-gray-500 text-sm leading-relaxed line-clamp-2 mb-4">
|
||||
{art.excerpt}
|
||||
</p>
|
||||
<div className="flex items-center justify-between text-[10px] font-black text-gray-400 uppercase tracking-widest border-t border-gray-100 pt-4">
|
||||
<span>{art.date}</span>
|
||||
<div className="flex items-center gap-1 group-hover:text-[#FC8E41] transition-colors">
|
||||
READ MORE <ChevronRight className="w-3 h-3" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar JNews Style */}
|
||||
<aside className="flex-1 flex flex-col gap-10">
|
||||
<div className="bg-[#1A1A1A] rounded-2xl p-8 text-center flex flex-col items-center">
|
||||
<div className="w-16 h-16 bg-[#FC8E41] rounded-full flex items-center justify-center mb-6 shadow-xl shadow-[#FC8E41]/20">
|
||||
<Mail className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h4 className="text-white text-xl font-black uppercase mb-3">SEO Newsletter</h4>
|
||||
<p className="text-gray-400 text-xs leading-relaxed mb-6">Get the best SEO and Digital Marketing tips straight to your inbox weekly.</p>
|
||||
<div className="w-full flex flex-col gap-3">
|
||||
<input type="email" placeholder="Email Address" className="w-full bg-white/10 border border-white/20 rounded-full px-5 py-3 text-white text-sm outline-none focus:border-[#FC8E41] transition-all" />
|
||||
<button className="bg-[#FC8E41] text-white w-full rounded-full py-3 font-black text-[11px] uppercase tracking-widest hover:brightness-110 transition-all">Join Now</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-2xl p-8 border border-gray-100">
|
||||
<h4 className="text-sm font-black uppercase tracking-widest text-black mb-6 border-b-2 border-[#FC8E41] pb-2 w-fit">Quick Tools</h4>
|
||||
<ul className="space-y-4">
|
||||
{['SERP Checker', 'Keyword Lab', 'Site Auditor', 'AI Writer'].map(tool => (
|
||||
<li key={tool}>
|
||||
<a href="#" className="text-xs font-bold text-gray-600 hover:text-[#FC8E41] flex items-center justify-between uppercase">
|
||||
{tool} <ArrowRight className="w-3 h-3" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1240px] mx-auto px-4 lg:px-6 py-12 pb-40">
|
||||
<div className="max-w-[800px] mx-auto">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="bg-[#FC8E41] text-white text-[10px] font-black px-4 py-1.5 rounded-full uppercase tracking-widest">
|
||||
{displayArticle.category}
|
||||
</span>
|
||||
<span className="text-gray-400 text-[10px] font-black uppercase tracking-widest">{displayArticle.date}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-black text-black leading-tight mb-8">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center justify-between border-y border-gray-100 py-6 mb-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 bg-gray-900 rounded-full flex items-center justify-center border-2 border-[#FC8E41] text-white font-black text-xs">SEO</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-black uppercase text-black">{displayArticle.author}</span>
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Expert Columnist</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="p-2.5 bg-gray-50 rounded-full text-gray-400 hover:text-[#FC8E41] transition-colors"><Bookmark className="w-4 h-4"/></button>
|
||||
<button className="p-2.5 bg-gray-50 rounded-full text-gray-400 hover:text-[#FC8E41] transition-colors"><Share2 className="w-4 h-4"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl overflow-hidden mb-12 shadow-xl bg-gray-100">
|
||||
<img src={displayArticle.img} className="w-full aspect-video object-cover" alt="Article"/>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-lg prose-slate max-w-none prose-headings:font-black prose-headings:uppercase prose-p:text-gray-600 prose-p:leading-relaxed prose-strong:text-black">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Footer JNews Style */}
|
||||
<footer className="bg-white border-t border-gray-100 pt-20 pb-10">
|
||||
<div className="max-w-[1240px] mx-auto px-4 lg:px-6">
|
||||
<div className="grid md:grid-cols-3 gap-16 mb-16">
|
||||
<div>
|
||||
<div className="text-2xl font-black tracking-tighter text-black uppercase mb-6">
|
||||
SEO<span className="text-[#FC8E41]">PORTAL</span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm leading-relaxed">O destino número um para profissionais de marketing que buscam performance, autoridade e as últimas tendências em algoritmos de busca.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-black uppercase tracking-widest mb-8 text-black border-b border-gray-100 pb-3">Company</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-xs font-bold text-gray-600 uppercase">
|
||||
<a href="/privacy" className="hover:text-[#FC8E41] transition-colors">Privacidade</a>
|
||||
<a href="/terms" className="hover:text-[#FC8E41] transition-colors">Termos</a>
|
||||
<a href="/cookies" className="hover:text-[#FC8E41] transition-colors">Cookies</a>
|
||||
<a href="/ethics" className="hover:text-[#FC8E41] transition-colors">Ética</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xs font-black uppercase tracking-widest mb-8 text-black border-b border-gray-100 pb-3">Social Connection</h4>
|
||||
<div className="flex gap-4 mb-8">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center hover:bg-[#FC8E41] hover:text-white transition-all"><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-[#FC8E41] hover:text-white transition-all"><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-[#FC8E41] hover:text-white transition-all"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
<p className="text-gray-400 text-[10px] font-black uppercase tracking-widest italic">Join the movement.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center text-[10px] font-bold text-gray-400 uppercase tracking-widest border-t border-gray-50 pt-10">
|
||||
© {new Date().getFullYear()} SEO Portal. Designed for Excellence. Built by Autoblog.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
194
src/components/themes/StartupTheme.tsx
Normal file
194
src/components/themes/StartupTheme.tsx
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
import { ArrowRight, Mail, Building2, Sparkles, FolderLock, Terminal, Wifi, LockKeyhole, Share, Eye, Crosshair, Globe, Share2, Instagram } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar à Home',
|
||||
login: 'Entrar',
|
||||
heroTag: 'SÉRIE A: O GUIA DE SOBREVIVÊNCIA',
|
||||
heroTitle1: 'Insights profundos para',
|
||||
heroTitle2: 'fundadores.',
|
||||
heroDesc: 'Textos longos e densos sobre produto, código e vendas B2B para quem recusa atalhos.',
|
||||
btnRead: 'Ler o último play',
|
||||
trusted: 'MODELOS MENTAIS APLICADOS POR',
|
||||
latestInsights: 'Últimas Teses',
|
||||
sidebarAd: 'APRESENTADO POR',
|
||||
author: 'Por Sarah Chin',
|
||||
newsletterTitle: 'O Playbook Privado',
|
||||
newsletterDesc: 'Um email semanal. Modelos validados da trincheira.',
|
||||
subscribeBtn: 'Receber Playbook'
|
||||
}
|
||||
};
|
||||
|
||||
export default function StartupTheme({ 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...',
|
||||
category: p.data.category || 'Tech',
|
||||
readTime: p.data.readTime || '5 min',
|
||||
date: p.data.date ? new Date(p.data.date).toLocaleDateString('pt-BR') : 'Hoje',
|
||||
author: p.data.author || 'Redação'
|
||||
}));
|
||||
|
||||
const displayArticle = currentArticle ? {
|
||||
id: currentArticle.slug,
|
||||
title: currentArticle.data.title || currentArticle.slug,
|
||||
excerpt: currentArticle.data.excerpt || '',
|
||||
category: currentArticle.data.category || 'Tech',
|
||||
readTime: currentArticle.data.readTime || '5 min',
|
||||
date: currentArticle.data.date ? new Date(currentArticle.data.date).toLocaleDateString('pt-BR') : 'Hoje',
|
||||
author: currentArticle.data.author || 'Redação'
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="startup-scroll-container bg-[#F9F9FB] text-[#222222] min-h-full font-serif overflow-y-auto selection:bg-[#F25F4C] selection:text-white">
|
||||
{/* Header Centered Minimal */}
|
||||
<header className="bg-white/90 backdrop-blur-md border-b border-gray-100 sticky top-0 z-40">
|
||||
<div className="max-w-[900px] mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
||||
<span className="font-['Inter'] text-xl font-black tracking-tighter text-[#1C1F2B]">ScaleUp<span className="text-[#F25F4C]">.</span></span>
|
||||
</a>
|
||||
|
||||
<nav className="hidden sm:flex items-center gap-6 text-[11px] font-['Inter'] font-black text-gray-500 uppercase tracking-widest">
|
||||
<a href="/" className="text-[#F25F4C]">Ensaios</a>
|
||||
<a href="/login" className="hover:text-gray-900 transition-colors">{ui.login}</a>
|
||||
</nav>
|
||||
|
||||
<a href="#newsletter" className="px-5 py-2.5 bg-[#1C1F2B] text-white font-['Inter'] font-black text-[10px] uppercase tracking-widest rounded hover:bg-[#F25F4C] transition-colors">Subscribe</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[900px] mx-auto">
|
||||
{/* Substack Style Hero */}
|
||||
<section className="py-20 lg:py-32 px-6 flex flex-col items-center text-center relative">
|
||||
<div className="w-16 h-16 rounded-full overflow-hidden border-4 border-white shadow-xl mx-auto mb-6">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=200&h=200&q=80" alt="Sarah" className="w-full h-full object-cover"/>
|
||||
</div>
|
||||
<p className="font-['Inter'] text-[10px] font-black uppercase text-[#F25F4C] tracking-[0.2em] mb-4 bg-[#F25F4C]/10 px-4 py-1.5 rounded-full">{ui.author}</p>
|
||||
<h1 className="text-5xl lg:text-7xl font-bold tracking-tight text-[#1C1F2B] mb-8 leading-[1.1]">
|
||||
{ui.heroTitle1} <span className="text-gray-400 italic block mt-1">{ui.heroTitle2}</span>
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 max-w-2xl leading-relaxed mb-10 font-medium">
|
||||
{ui.heroDesc}
|
||||
</p>
|
||||
<div className="w-full max-w-md mx-auto" id="newsletter">
|
||||
<form className="flex flex-col sm:flex-row gap-3">
|
||||
<input type="email" placeholder="ceo@company.com" className="flex-1 bg-white border border-gray-200 px-5 py-4 font-['Inter'] rounded-lg shadow-sm focus:border-[#F25F4C] outline-none transition-colors" required/>
|
||||
<button type="submit" className="bg-[#F25F4C] text-white px-8 py-4 font-['Inter'] font-black uppercase tracking-widest text-[11px] rounded-lg hover:bg-[#1C1F2B] transition-colors shadow-lg shadow-[#F25F4C]/30">{ui.subscribeBtn}</button>
|
||||
</form>
|
||||
<span className="block mt-4 text-[10px] uppercase tracking-widest text-gray-400 font-['Inter'] font-bold">12,049 Founders Recebem</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Social Proof */}
|
||||
<div className="border-y border-gray-200 bg-white py-10 px-6 text-center">
|
||||
<span className="font-['Inter'] font-black text-[10px] uppercase text-gray-400 tracking-widest block mb-6">{ui.trusted}</span>
|
||||
<div className="flex flex-wrap justify-center gap-8 md:gap-16 opacity-30 grayscale font-['Inter'] font-black text-xl tracking-tighter">
|
||||
<span>AcmeCorp</span> <span>Globex</span> <span>Notion</span> <span>Stripe</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="px-6 py-20 bg-white">
|
||||
<h3 className="font-['Inter'] text-xl font-bold text-[#1C1F2B] mb-12 border-b-2 border-gray-100 pb-4 inline-block">{ui.latestInsights}</h3>
|
||||
|
||||
<div className="max-w-3xl mx-auto flex flex-col gap-16 relative">
|
||||
{articlesToRender.map((art: any, i: number) => (
|
||||
<article key={art.id} className="group block border-b border-gray-100 pb-16 last:border-0">
|
||||
<a href={`/${art.id}`} className="block">
|
||||
{i === 0 && (
|
||||
<img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=900" className="w-full aspect-[2/1] object-cover rounded-2xl mb-8 group-hover:opacity-90 transition-opacity shadow-lg"/>
|
||||
)}
|
||||
<div className="flex items-center gap-4 mb-4 font-['Inter']">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-[#F25F4C]">{art.category}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-300"></span>
|
||||
<span className="text-xs text-gray-400 font-medium">{art.readTime} read</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-[#1C1F2B] leading-[1.15] mb-5 group-hover:text-[#F25F4C] transition-colors">{art.title}</h2>
|
||||
<p className="text-xl text-gray-600 leading-relaxed font-medium mb-6">{art.excerpt}</p>
|
||||
<span className="font-['Inter'] text-[11px] font-black uppercase tracking-widest text-[#F25F4C] group-hover:underline underline-offset-4">Read Full Essay →</span>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
|
||||
{/* Native Horizontal Substack-style Ad */}
|
||||
<div className="p-10 bg-[#1C1F2B] rounded-2xl flex flex-col justify-center items-center text-center shadow-2xl relative overflow-hidden">
|
||||
<span className="font-['Inter'] text-[9px] font-black uppercase tracking-widest text-gray-400 mb-6 bg-white/10 px-3 py-1 rounded-full">{ui.sidebarAd}</span>
|
||||
<Building2 className="w-12 h-12 text-[#F25F4C] mb-6"/>
|
||||
<h4 className="text-2xl font-bold text-white mb-4">Ajudando Scale-Ups globais contratarem talentos A-Player.</h4>
|
||||
<button className="px-6 py-3 bg-[#F25F4C] text-white font-['Inter'] font-black text-[11px] uppercase tracking-widest rounded transition-transform hover:-translate-y-1">Ver Planos Empresa</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Epic Footer Sub Box */}
|
||||
<section className="bg-[#F9F9FB] py-32 px-6 border-t border-gray-200 mt-20 text-center">
|
||||
<Mail className="w-16 h-16 text-[#F25F4C] mx-auto mb-8"/>
|
||||
<h2 className="text-4xl sm:text-5xl font-bold text-[#1C1F2B] mb-6 leading-tight max-w-2xl mx-auto">Quer insights privados?</h2>
|
||||
<p className="text-xl text-gray-500 mb-10 max-w-xl mx-auto font-medium">Junte-se a rede secreta de investidores.</p>
|
||||
<form className="max-w-md mx-auto flex flex-col gap-3">
|
||||
<input type="email" placeholder="Seu melhor email..." className="bg-white border border-gray-200 px-5 py-4 font-['Inter'] rounded-xl shadow focus:border-[#F25F4C] outline-none text-center" required/>
|
||||
<button type="submit" className="bg-[#1C1F2B] text-white px-8 py-4 font-['Inter'] font-black uppercase tracking-widest text-[11px] rounded-xl hover:bg-[#F25F4C] transition-colors shadow-xl">Cadastrar Gratuitamente</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="bg-white min-h-screen">
|
||||
<div className="max-w-[760px] mx-auto px-6 py-20">
|
||||
<a href="/" className="mb-12 font-['Inter'] font-black uppercase tracking-[0.2em] text-[10px] text-gray-400 hover:text-[#F25F4C] flex items-center gap-2 transition-colors">
|
||||
<ArrowRight className="w-4 h-4 rotate-180" /> {ui.back}
|
||||
</a>
|
||||
|
||||
<header className="mb-14 text-center">
|
||||
<span className="font-['Inter'] text-[10px] font-black uppercase tracking-[0.2em] text-[#F25F4C] mb-6 block">{displayArticle.category}</span>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-[#1C1F2B] leading-[1.1] mb-8">{displayArticle.title}</h1>
|
||||
<div className="flex items-center justify-center gap-4 text-sm font-['Inter'] font-medium text-gray-500 pb-10 border-b border-gray-100">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=100&h=100&q=80" alt="Sarah" className="w-10 h-10 rounded-full" />
|
||||
<span>{displayArticle.author}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-gray-300"></span>
|
||||
<span>{displayArticle.readTime} read</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="prose prose-lg md:prose-xl prose-slate max-w-none font-serif text-gray-700 leading-relaxed marker:text-[#F25F4C] prose-a:text-[#F25F4C] prose-a:font-bold prose-headings:font-sans prose-headings:font-bold prose-headings:text-[#1C1F2B] prose-headings:tracking-tight">
|
||||
<div className="bg-gray-50 border-l-4 border-[#F25F4C] p-8 my-10 italic text-xl text-gray-800">
|
||||
{displayArticle.excerpt}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* Footer Article Author Box */}
|
||||
<div className="mt-20 pt-16 border-t font-['Inter'] border-gray-200 flex flex-col md:flex-row items-center gap-8 text-center md:text-left bg-gray-50 p-10 rounded-3xl">
|
||||
<img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=200&h=200&q=80" className="w-24 h-24 rounded-full shadow-lg"/>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-[#1C1F2B] mb-2">{displayArticle.author}</h3>
|
||||
<p className="text-gray-500 font-medium mb-6">Expert em tecnologia e estratégia de crescimento.</p>
|
||||
<a href="#newsletter" className="bg-[#1C1F2B] text-white px-5 py-2.5 font-black uppercase text-[10px] tracking-widest rounded hover:bg-[#F25F4C] transition-colors inline-block">Assinar Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Minimal Footer */}
|
||||
<footer className="font-['Inter'] text-center py-16 border-t border-gray-200 bg-white">
|
||||
<div className="max-w-[900px] mx-auto px-6">
|
||||
<span className="text-2xl font-black text-[#1C1F2B] mb-4 block">ScaleUp<span className="text-[#F25F4C]">.</span></span>
|
||||
<p className="text-xs font-bold text-gray-400 uppercase tracking-widest mb-8">© {new Date().getFullYear()} ScaleUp Media Inc.</p>
|
||||
<div className="flex justify-center gap-6 mb-8">
|
||||
<a href="#" className="text-gray-400 hover:text-[#F25F4C]"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="text-gray-400 hover:text-[#F25F4C]"><Share2 className="w-5 h-5"/></a>
|
||||
<a href="#" className="text-gray-400 hover:text-[#F25F4C]"><Instagram className="w-5 h-5"/></a>
|
||||
</div>
|
||||
<div className="flex justify-center gap-6 text-sm font-medium text-gray-500">
|
||||
<a href="/privacy" className="hover:text-[#F25F4C]">Privacidade</a>
|
||||
<a href="/terms" className="hover:text-[#F25F4C]">Termos</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
179
src/components/themes/SubstackTheme.tsx
Normal file
179
src/components/themes/SubstackTheme.tsx
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Search, ChevronRight, Mail, Bell, Bookmark, ArrowRight, User, Globe, Share2, Instagram, Lock } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar ao Arquivo',
|
||||
newsletter: 'ASSINE A NEWSLETTER',
|
||||
premium: 'CONTEÚDO PARA ASSINANTES',
|
||||
readTime: 'MIN',
|
||||
articles: [
|
||||
{ id: '1', title: 'O Fim da Era do Dinheiro Fácil', excerpt: 'Como a subida dos juros globais está drenando a liquidez das startups e o que esperar para o próximo biênio.', category: 'Macroeconomia', time: '12', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Inteligência Artificial: Produtividade ou Bolha?', excerpt: 'Uma análise profunda sobre o retorno real do investimento em ferramentas de IA nas grandes corporações.', category: 'Tecnologia', time: '15', img: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'O Renascimento das Commodities no Brasil', excerpt: 'Por que o minério e a soja continuam sendo os pilares da balança comercial brasileira mesmo em tempos de crise.', category: 'Brasil', time: '10', img: 'https://images.unsplash.com/photo-1542223175-75bc9dd5b6cb?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function SubstackTheme({ 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 || 'REPORT',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '12',
|
||||
rating: '4.9',
|
||||
img: p.image || `https://images.unsplash.com/photo-1554224155-6726b3ff858f?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 || 'REPORT',
|
||||
time: '12',
|
||||
rating: '4.9',
|
||||
img: currentArticle.image || `https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800`
|
||||
} : articlesToRender[0];
|
||||
|
||||
return (
|
||||
<div className="newsletter-hub bg-[#FFFDF9] text-[#1A1A1A] min-h-screen font-serif selection:bg-[#E25324] selection:text-white">
|
||||
|
||||
{/* Newsletter Minimalist Header */}
|
||||
<header className="bg-white border-b border-[#EADDD5] py-8 sticky top-0 z-50">
|
||||
<div className="max-w-[1000px] mx-auto px-6 flex justify-between items-center">
|
||||
<a href="/" className="flex flex-col group cursor-pointer">
|
||||
<span className="text-3xl font-black text-[#E25324] uppercase tracking-tighter leading-none mb-1">V.H. REPORT</span>
|
||||
<span className="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-400">Finance & Macro Strategy</span>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-8 text-[11px] font-bold uppercase tracking-widest text-gray-500">
|
||||
<a href="/archive" className="hover:text-[#E25324] transition-colors hidden sm:block">Arquivo</a>
|
||||
<a href="/about" className="hover:text-[#E25324] transition-colors hidden sm:block">Sobre</a>
|
||||
<div className="flex items-center gap-4">
|
||||
<button className="bg-[#E25324] text-white px-6 py-2.5 rounded-full hover:bg-black transition-colors shadow-md">Assinar</button>
|
||||
<button className="text-[#1A1A1A] hover:opacity-70 transition-opacity"><User className="w-5 h-5"/></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1000px] mx-auto px-6 py-16">
|
||||
|
||||
{/* Main Hero Signup Box */}
|
||||
<div className="text-center mb-24 py-16 border-b border-[#EADDD5]">
|
||||
<h1 className="text-5xl sm:text-7xl font-black tracking-tighter leading-[0.95] mb-8 text-[#1A1A1A]">Informação que <br/>vale dinheiro.</h1>
|
||||
<p className="text-xl text-gray-500 font-medium max-w-xl mx-auto mb-10 leading-relaxed">Relatórios profundos sobre macroeconomia e estratégia financeira, direto na sua caixa de entrada semanalmente.</p>
|
||||
<form className="max-w-md mx-auto flex gap-2">
|
||||
<input type="email" placeholder="Seu e-mail profissional..." className="flex-1 bg-white border-2 border-[#EADDD5] rounded-xl px-6 py-4 outline-none focus:border-[#E25324] transition-colors text-lg shadow-inner" required />
|
||||
<button type="submit" className="bg-[#E25324] text-white px-8 py-4 rounded-xl font-black uppercase tracking-widest text-xs hover:bg-black transition-colors shadow-lg">Inscrever</button>
|
||||
</form>
|
||||
<p className="mt-6 text-[10px] font-bold uppercase tracking-widest text-gray-400">Junte-se a +45.000 investidores sêniores.</p>
|
||||
</div>
|
||||
|
||||
{/* Feed Layout */}
|
||||
<div className="flex flex-col gap-20">
|
||||
{articlesToRender.map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="group cursor-pointer block border-b border-[#EADDD5] pb-20 last:border-0">
|
||||
<div className="flex flex-col md:flex-row gap-12">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<span className="text-[10px] font-black uppercase text-[#E25324] tracking-widest bg-[#FFF5F0] px-3 py-1 rounded-full">{art.category}</span>
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{art.date}</span>
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-5xl font-black tracking-tighter leading-tight text-[#1A1A1A] mb-6 group-hover:text-[#E25324] transition-colors">{art.title}</h2>
|
||||
<p className="text-xl text-gray-500 font-medium leading-relaxed mb-8 line-clamp-3">{art.excerpt}</p>
|
||||
<div className="flex items-center gap-6">
|
||||
<span 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} de leitura</span>
|
||||
<div className="flex items-center gap-4 text-gray-300">
|
||||
<Bookmark className="w-5 h-5 hover:text-black transition-colors cursor-pointer"/>
|
||||
<Share2 className="w-5 h-5 hover:text-black transition-colors cursor-pointer"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full md:w-[350px] aspect-square rounded-2xl overflow-hidden bg-[#FFF5F0] relative shrink-0">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000" alt={art.title}/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom Call to Action */}
|
||||
<div className="mt-24 bg-[#1A1A1A] text-white p-12 sm:p-20 rounded-[3rem] text-center shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-[#E25324]/20 to-transparent pointer-events-none"></div>
|
||||
<h3 className="text-4xl sm:text-5xl font-black tracking-tighter uppercase mb-6 leading-none">{ui.newsletter}</h3>
|
||||
<p className="text-lg text-gray-400 font-medium mb-10 max-w-lg mx-auto">Relatórios premium exclusivos para assinantes. Analises que os grandes portais não publicam.</p>
|
||||
<button className="bg-[#E25324] text-white px-12 py-4 rounded-xl font-black uppercase tracking-widest text-xs hover:bg-white hover:text-black transition-all shadow-lg">Versão Pro Assinante</button>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1000px] mx-auto px-6 py-20 pb-32">
|
||||
<div className="max-w-[700px] mx-auto">
|
||||
<a href="/" className="text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-[#E25324] transition-colors block mb-16 flex items-center gap-2">
|
||||
← {ui.back}
|
||||
</a>
|
||||
|
||||
<header className="mb-16">
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<span className="text-[10px] font-black uppercase text-[#E25324] tracking-widest border-l-2 border-[#E25324] pl-3">{displayArticle.category}</span>
|
||||
<div className="w-px h-3 bg-gray-200"></div>
|
||||
<span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{displayArticle.date}</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl sm:text-7xl font-black leading-[0.95] tracking-tighter text-[#1A1A1A] mb-12">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center gap-4 py-8 border-t border-[#EADDD5] text-xs font-bold text-gray-500">
|
||||
<div className="w-12 h-12 bg-[#EADDD5] rounded-full border-2 border-white shadow-sm flex items-center justify-center text-[#E25324]">
|
||||
<User className="w-6 h-6"/>
|
||||
</div>
|
||||
<div>
|
||||
<span className="block text-[#1A1A1A]">V.H. Estrategista</span>
|
||||
<span className="block italic opacity-70">Autor Principal</span>
|
||||
</div>
|
||||
<div className="ml-auto hidden sm:flex items-center gap-6">
|
||||
<span className="flex items-center gap-2 uppercase tracking-widest text-[10px] font-black"><Lock className="w-4 h-4 text-[#E25324]"/> {ui.premium}</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="prose prose-lg max-w-none font-serif text-[#1A1A1A] leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-a:text-[#E25324] prose-img:rounded-3xl prose-img:shadow-xl prose-blockquote:border-[#E25324] prose-blockquote:bg-[#FFF5F0]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Substack Minimal Footer */}
|
||||
<footer className="bg-[#FAF7F2] border-t border-[#EADDD5] pt-24 pb-12 font-sans">
|
||||
<div className="max-w-[1000px] mx-auto px-6 text-center border-b border-[#EADDD5] pb-20 mb-12">
|
||||
<span className="text-3xl font-black text-[#E25324] uppercase tracking-tighter block mb-6">V.H. REPORT</span>
|
||||
<p className="text-gray-500 text-sm font-medium leading-relaxed max-w-md mx-auto mb-10">O formato de newsletter de nicho para monetização direta. Layout focado em legibilidade máxima e retenção de e-mail.</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-[#E25324] hover:text-white transition-all shadow-sm border border-[#EADDD5]"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-[#E25324] hover:text-white transition-all shadow-sm border border-[#EADDD5]"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-full bg-white flex items-center justify-center hover:bg-[#E25324] hover:text-white transition-all shadow-sm border border-[#EADDD5]"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-[1000px] mx-auto px-6 flex flex-col sm:flex-row justify-between items-center gap-6 text-[10px] font-black uppercase tracking-widest text-gray-400">
|
||||
<div className="flex gap-10">
|
||||
<a href="/privacy" className="hover:text-[#E25324] transition-colors">Privacidade</a>
|
||||
<a href="/terms" className="hover:text-[#E25324] transition-colors">Termos</a>
|
||||
<a href="/archive" className="hover:text-[#E25324] transition-colors">Arquivo</a>
|
||||
</div>
|
||||
<span>© {new Date().getFullYear()} V.H. Strategic Media. Built by Autoblog.</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
346
src/components/themes/TerraTheme.tsx
Normal file
346
src/components/themes/TerraTheme.tsx
Normal file
|
|
@ -0,0 +1,346 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { ShoppingBag, ArrowRight, Menu, X, Globe, Share2, Instagram, Search, Leaf, ShieldCheck, Truck, RefreshCcw, Heart, ChevronRight } from 'lucide-react';
|
||||
|
||||
export default function TerraTheme({ posts, categories }: { posts?: any[], categories?: any[] }) {
|
||||
const handleSimulatedAction = (e: React.MouseEvent | React.FormEvent, msg: string) => {
|
||||
e.preventDefault();
|
||||
window.alert(`[SaaS Preview] Ação simulada: ${msg}\n\nEsta funcionalidade estará ativa após a publicação da sua loja sustentável.`);
|
||||
};
|
||||
|
||||
const [view, setView] = useState<'home' | 'product'>('home');
|
||||
const [cartOpen, setCartOpen] = useState(false);
|
||||
|
||||
const products = [
|
||||
{ id: 1, name: "Organic Cotton T-Shirt", price: "$45.00", category: "Apparel", img: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 2, name: "Bamboo Fiber Bedding", price: "$120.00", category: "Home", img: "https://images.unsplash.com/photo-1522771739844-6a9f6d5f14af?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 3, name: "Recycled Glass Vase", price: "$35.00", category: "Decor", img: "https://images.unsplash.com/photo-1581783898377-1c85bf937427?auto=format&fit=crop&q=80&w=800" },
|
||||
{ id: 4, name: "Natural Cork Wallet", price: "$55.00", category: "Accessories", img: "https://images.unsplash.com/photo-1627123424574-724758594e93?auto=format&fit=crop&q=80&w=800" },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0);
|
||||
}, [view]);
|
||||
|
||||
return (
|
||||
<div className="min-h-full bg-[#FCF9F2] text-[#3D3D3D] font-['Outfit',sans-serif] selection:bg-[#4A5D4E] selection:text-white">
|
||||
|
||||
{/* Earth-Friendly Banner */}
|
||||
<div className="bg-[#4A5D4E] text-white text-[11px] font-medium uppercase tracking-[0.2em] py-3 text-center">
|
||||
1% of every purchase goes to reforestation projects worldwide 🌿
|
||||
</div>
|
||||
|
||||
{/* Organic Navigation */}
|
||||
<nav className="sticky top-0 z-50 bg-[#FCF9F2]/90 backdrop-blur-md border-b border-[#4A5D4E]/10">
|
||||
<div className="max-w-[1400px] mx-auto px-6 md:px-12 h-24 flex items-center justify-between">
|
||||
<div className="flex items-center gap-10">
|
||||
<button className="text-[#3D3D3D] hover:text-[#4A5D4E] transition-colors"><Menu className="w-6 h-6" /></button>
|
||||
<nav className="hidden lg:flex gap-8 text-[12px] font-bold uppercase tracking-widest">
|
||||
<a href="#" className="hover:text-[#4A5D4E] transition-colors">Shop All</a>
|
||||
<a href="#" className="hover:text-[#4A5D4E] transition-colors">Our Ethics</a>
|
||||
<a href="#" className="hover:text-[#4A5D4E] transition-colors">Materials</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<a href="/" onClick={(e) => {e.preventDefault(); setView('home');}} className="flex items-center gap-3 group">
|
||||
<div className="w-10 h-10 bg-[#4A5D4E] rounded-full flex items-center justify-center text-white group-hover:rotate-12 transition-transform">
|
||||
<Leaf className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="text-3xl font-black tracking-tighter uppercase">TERRA</span>
|
||||
</a>
|
||||
|
||||
<div className="flex items-center gap-8">
|
||||
<Search className="w-5 h-5 opacity-40 hover:opacity-100 cursor-pointer transition-opacity" />
|
||||
<button onClick={() => setCartOpen(true)} className="flex items-center gap-3 group">
|
||||
<ShoppingBag className="w-6 h-6 group-hover:text-[#4A5D4E] transition-colors" />
|
||||
<span className="hidden md:block text-sm font-bold uppercase tracking-widest">Cart (0)</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{view === 'home' ? (
|
||||
<main>
|
||||
{/* Section 1: Soft Hero */}
|
||||
<section className="relative h-[80vh] flex items-center px-6 md:px-24">
|
||||
<div className="max-w-3xl relative z-10 animate-[fade-in-up_1s_ease-out]">
|
||||
<span className="bg-[#4A5D4E]/10 text-[#4A5D4E] px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest mb-8 inline-block italic">Honest & Sustainable</span>
|
||||
<h1 className="text-6xl md:text-[7rem] font-black uppercase tracking-tighter leading-[0.9] mb-12 text-[#2D3A2F]">
|
||||
Nature's <br/> <span className="text-[#4A5D4E] italic">Masterpiece.</span>
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl font-medium leading-relaxed mb-16 text-[#3D3D3D]/60 italic">
|
||||
Descubra uma curadoria de produtos essenciais feitos para durar gerações, não apenas temporadas.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-6">
|
||||
<button onClick={() => setView('product')} className="bg-[#4A5D4E] text-white px-12 py-6 rounded-full font-bold uppercase tracking-widest text-sm hover:bg-[#3A4A3E] transition-all shadow-xl shadow-[#4A5D4E]/20 flex items-center justify-center gap-4">
|
||||
Explore Shop <ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="bg-white text-[#4A5D4E] border-2 border-[#4A5D4E] px-12 py-6 rounded-full font-bold uppercase tracking-widest text-sm hover:bg-[#4A5D4E] hover:text-white transition-all">
|
||||
Our Story
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute right-0 top-0 bottom-0 w-1/2 hidden lg:block overflow-hidden rounded-l-[10rem]">
|
||||
<img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=1200" className="w-full h-full object-cover opacity-80" alt="hero"/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 2: Values */}
|
||||
<section className="py-32 px-6 bg-white border-y border-[#4A5D4E]/10">
|
||||
<div className="max-w-[1400px] mx-auto grid md:grid-cols-4 gap-12">
|
||||
{[
|
||||
{ icon: <Leaf />, title: "Sustainable", desc: "100% biodegradable materials" },
|
||||
{ icon: <ShieldCheck />, title: "Ethical", desc: "Fair trade certified factories" },
|
||||
{ icon: <Truck />, title: "Carbon Neutral", desc: "Eco-friendly shipping always" },
|
||||
{ icon: <RefreshCcw />, title: "Circular", desc: "Designed for recycling" }
|
||||
].map((v, i) => (
|
||||
<div key={i} className="text-center p-8 rounded-3xl hover:bg-[#FCF9F2] transition-colors">
|
||||
<div className="w-16 h-16 bg-[#4A5D4E]/10 rounded-full flex items-center justify-center text-[#4A5D4E] mx-auto mb-6">
|
||||
{v.icon}
|
||||
</div>
|
||||
<h4 className="font-black uppercase tracking-widest text-sm mb-3">{v.title}</h4>
|
||||
<p className="text-sm text-[#3D3D3D]/50 font-medium italic">{v.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 3: Product Grid */}
|
||||
<section className="py-40 px-6 max-w-[1400px] mx-auto">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-24 border-b-2 border-[#4A5D4E]/10 pb-12">
|
||||
<div>
|
||||
<span className="text-xs font-black uppercase tracking-[0.4em] text-[#4A5D4E] mb-4 block italic">Seasonal Collection</span>
|
||||
<h2 className="text-5xl md:text-7xl font-black uppercase tracking-tighter text-[#2D3A2F]">Earth's Finest</h2>
|
||||
</div>
|
||||
<button className="text-sm font-bold uppercase tracking-widest border-b-2 border-[#4A5D4E] pb-2 hover:text-[#4A5D4E] transition-colors">View All</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{products.map((p, idx) => (
|
||||
<div key={p.id} className="group cursor-pointer" onClick={() => setView('product')}>
|
||||
<div className="aspect-square bg-[#FCF9F2] rounded-[3rem] relative overflow-hidden mb-8 border border-[#4A5D4E]/5 shadow-sm group-hover:shadow-2xl transition-all duration-700">
|
||||
<img src={p.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" alt="product"/>
|
||||
<button className="absolute top-6 right-6 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg text-[#3D3D3D]/40 hover:text-[#ff4444] transition-colors">
|
||||
<Heart className="w-6 h-6" />
|
||||
</button>
|
||||
<div className="absolute bottom-6 left-6 right-6">
|
||||
<button className="w-full bg-[#4A5D4E] text-white py-4 rounded-2xl font-bold uppercase tracking-widest text-xs translate-y-20 group-hover:translate-y-0 transition-transform duration-500 shadow-xl shadow-[#4A5D4E]/30">
|
||||
Quick Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-[#4A5D4E] mb-2 block">{p.category}</span>
|
||||
<h3 className="text-xl font-bold mb-3 group-hover:text-[#4A5D4E] transition-colors">{p.name}</h3>
|
||||
<span className="text-lg font-black text-[#2D3A2F]">{p.price}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Section 4: Visual CTA */}
|
||||
<section className="px-6 mb-40">
|
||||
<div className="max-w-[1400px] mx-auto bg-[#2D3A2F] rounded-[4rem] p-10 md:p-32 text-center text-[#FCF9F2] relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10" style={{ backgroundImage: `url('https://www.transparenttextures.com/patterns/natural-paper.png')` }}></div>
|
||||
<h2 className="text-5xl md:text-8xl font-black uppercase tracking-tighter mb-10 italic relative z-10">Rooted in <br/> Purpose.</h2>
|
||||
<p className="text-xl md:text-2xl font-medium mb-16 max-w-2xl mx-auto italic relative z-10 text-[#FCF9F2]/60">Junte-se à nossa comunidade e receba insights sobre vida sustentável e acesso antecipado às nossas colheitas limitadas.</p>
|
||||
<div className="max-w-2xl mx-auto flex flex-col md:flex-row gap-6 relative z-10">
|
||||
<input type="email" placeholder="YOUR EMAIL ADDRESS" className="flex-1 bg-[#FCF9F2]/10 border-2 border-[#FCF9F2]/20 rounded-full px-10 py-6 text-white font-medium placeholder:text-white/20 outline-none focus:border-[#FCF9F2]/50 transition-all" />
|
||||
<button className="bg-[#FCF9F2] text-[#2D3A2F] px-12 py-6 rounded-full font-black uppercase tracking-widest hover:bg-white transition-all shadow-2xl">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
) : (
|
||||
/* --- PRODUCT VIEW --- */
|
||||
<main className="max-w-[1400px] mx-auto px-6 py-40">
|
||||
<div className="grid lg:grid-cols-2 gap-24 items-center mb-40">
|
||||
<div className="space-y-10">
|
||||
<div className="aspect-square bg-white rounded-[4rem] overflow-hidden shadow-2xl border border-[#4A5D4E]/10 p-10">
|
||||
<img src={products[0].img} className="w-full h-full object-contain" alt="product detail" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
{[1,2,3,4].map(i => (
|
||||
<div key={i} className="aspect-square bg-white rounded-3xl border border-[#4A5D4E]/10 overflow-hidden cursor-pointer p-4 hover:border-[#4A5D4E] transition-all">
|
||||
<img src={products[0].img} className="w-full h-full object-contain opacity-50" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<div className="mb-16">
|
||||
<span className="text-[#4A5D4E] text-xs font-black uppercase tracking-[0.5em] mb-6 block italic flex items-center gap-2">
|
||||
<Leaf className="w-4 h-4" /> Conscious Choice
|
||||
</span>
|
||||
<h1 className="text-5xl md:text-[6rem] font-black uppercase tracking-tighter leading-[0.9] mb-10 text-[#2D3A2F]">{products[0].name}</h1>
|
||||
<div className="text-4xl font-black text-[#4A5D4E] flex items-center gap-6 italic">
|
||||
{products[0].price}
|
||||
<span className="text-sm font-medium text-[#3D3D3D]/40 uppercase tracking-[0.2em] not-italic">Tax included</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 mb-20 border-l-4 border-[#4A5D4E]/20 pl-10 py-4">
|
||||
<div className="space-y-6">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest opacity-40 block">Ethical Origin</span>
|
||||
<p className="text-2xl font-medium italic text-[#3D3D3D]/60 leading-relaxed">
|
||||
Feito à mão com fibras de algodão orgânico certificadas. Cada peça é tingida com pigmentos naturais, resultando em tons únicos e terrosos que respeitam a integridade do nosso planeta. Nosso processo economiza mais de 2.000 litros de água em comparação à produção convencional.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-10 py-8 border-y border-[#4A5D4E]/10 text-[10px] font-black uppercase tracking-widest text-[#4A5D4E]">
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="opacity-40">Impact Score</span>
|
||||
<span>A+ Sustainability</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="opacity-40">Materials</span>
|
||||
<span>100% Organic Cotton</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-10 pt-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest opacity-40">Color_Path</span>
|
||||
<div className="flex gap-4">
|
||||
<button className="w-10 h-10 rounded-full bg-[#E5D5C5] ring-2 ring-offset-2 ring-[#E5D5C5]"></button>
|
||||
<button className="w-10 h-10 rounded-full bg-[#4A5D4E]"></button>
|
||||
<button className="w-10 h-10 rounded-full bg-[#3D3D3D]"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest opacity-40">Size_Spec</span>
|
||||
<div className="flex gap-4">
|
||||
{['S', 'M', 'L', 'XL'].map(s => (
|
||||
<button key={s} className="px-6 py-2 border border-[#3D3D3D]/10 rounded-xl font-black text-sm hover:border-[#4A5D4E] transition-all">{s}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => setCartOpen(true)} className="w-full bg-[#4A5D4E] text-white py-8 rounded-[2rem] text-xl font-black uppercase tracking-widest hover:bg-[#3A4A3E] transition-all shadow-2xl shadow-[#4A5D4E]/30 flex justify-center items-center gap-6">
|
||||
Add to Collection <ShoppingBag className="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section: Earth-Friendly Alternatives */}
|
||||
<div className="border-t-2 border-[#4A5D4E]/10 pt-40">
|
||||
<h2 className="text-4xl md:text-6xl font-black italic tracking-tighter uppercase mb-20 text-[#2D3A2F]">Earth-Friendly Alternatives</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{products.slice(1).map((p) => (
|
||||
<div key={p.id} className="group cursor-pointer" onClick={() => setView('product')}>
|
||||
<div className="aspect-square bg-white rounded-[3rem] relative overflow-hidden mb-8 border border-[#4A5D4E]/5 shadow-sm group-hover:shadow-2xl transition-all duration-700">
|
||||
<img src={p.img} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000" alt="product"/>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-3 group-hover:text-[#4A5D4E] transition-colors">{p.name}</h3>
|
||||
<span className="text-lg font-black text-[#2D3A2F]">{p.price}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)}
|
||||
|
||||
{/* Earthy Footer */}
|
||||
<footer className="bg-[#2D3A2F] text-[#FCF9F2] py-40 px-10">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-24 mb-40">
|
||||
<div className="lg:col-span-1">
|
||||
<div className="flex items-center gap-3 mb-10">
|
||||
<div className="w-12 h-12 bg-[#FCF9F2] rounded-full flex items-center justify-center text-[#2D3A2F]">
|
||||
<Leaf className="w-6 h-6" />
|
||||
</div>
|
||||
<span className="text-4xl font-black tracking-tighter uppercase italic">TERRA</span>
|
||||
</div>
|
||||
<p className="text-xl italic font-medium text-[#FCF9F2]/40 leading-relaxed mb-12">Building a future where commerce and conservation walk hand in hand.</p>
|
||||
<div className="flex gap-8">
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Instagram')} className="text-[#FCF9F2]/40 hover:text-white transition-colors"><Instagram className="w-6 h-6"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Site')} className="text-[#FCF9F2]/40 hover:text-white transition-colors"><Globe className="w-6 h-6"/></button>
|
||||
<button onClick={(e) => handleSimulatedAction(e, 'Share')} className="text-[#FCF9F2]/40 hover:text-white transition-colors"><Share2 className="w-6 h-6"/></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#4A5D4E] text-xs font-black uppercase tracking-[0.5em] mb-12 bg-[#FCF9F2] w-fit px-4 py-1 rounded-full">ETHICS_LOG</h4>
|
||||
<ul className="space-y-8 text-[11px] font-bold uppercase tracking-widest text-[#FCF9F2]/40">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Privacidade')} className="hover:text-white transition-colors flex items-center gap-4">DATA_ROOTS <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Termos')} className="hover:text-white transition-colors flex items-center gap-4">SERVICE_GROUND <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Cookies')} className="hover:text-white transition-colors flex items-center gap-4">DIGITAL_SEED <ArrowRight className="w-4 h-4"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#4A5D4E] text-xs font-black uppercase tracking-[0.5em] mb-12 bg-[#FCF9F2] w-fit px-4 py-1 rounded-full">COMMUNITY</h4>
|
||||
<ul className="space-y-8 text-[11px] font-bold uppercase tracking-widest text-[#FCF9F2]/40">
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Suporte')} className="hover:text-white transition-colors flex items-center gap-4">CONCIERGE_CARE <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Shipping')} className="hover:text-white transition-colors flex items-center gap-4">WIND_SHIPPING <ArrowRight className="w-4 h-4"/></a></li>
|
||||
<li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Returns')} className="hover:text-white transition-colors flex items-center gap-4">CYCLE_RETURNS <ArrowRight className="w-4 h-4"/></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-[#4A5D4E] text-xs font-black uppercase tracking-[0.5em] mb-12 bg-[#FCF9F2] w-fit px-4 py-1 rounded-full">ESTATE</h4>
|
||||
<ul className="space-y-8 text-[11px] font-bold uppercase tracking-widest text-[#FCF9F2]/40">
|
||||
<li><a href="#" className="hover:text-white transition-colors">THE_FARM</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">LAB_STORIES</a></li>
|
||||
<li><a href="#" className="hover:text-white transition-colors">REPORTS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-20 border-t border-[#FCF9F2]/5 flex flex-col md:flex-row justify-between items-center text-[10px] font-black uppercase tracking-[0.6em] text-[#FCF9F2]/20">
|
||||
<span>© {new Date().getFullYear()} TERRA COLLECTIVE LTD. PROTECT THE FLOW.</span>
|
||||
<div className="flex gap-10">
|
||||
<span>CLIMATE POSITIVE OPERATIONS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Sustainable Cart Sidebar */}
|
||||
{cartOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex justify-end">
|
||||
<div className="absolute inset-0 bg-[#2D3A2F]/20 backdrop-blur-md cursor-pointer" onClick={() => setCartOpen(false)}></div>
|
||||
<div className="w-full max-w-2xl bg-[#FCF9F2] h-full flex flex-col relative z-[110] shadow-2xl border-l border-[#4A5D4E]/10">
|
||||
<div className="p-12 border-b-2 border-[#4A5D4E]/10 bg-white flex justify-between items-center">
|
||||
<h2 className="text-4xl font-black uppercase tracking-tighter text-[#2D3A2F]">Your Selection</h2>
|
||||
<button onClick={() => setCartOpen(false)} className="text-[#4A5D4E] hover:rotate-90 transition-all"><X className="w-10 h-10"/></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-12 space-y-12">
|
||||
<div className="flex gap-10 p-8 bg-white rounded-[3rem] border border-[#4A5D4E]/5 shadow-sm">
|
||||
<div className="w-32 h-44 bg-[#FCF9F2] rounded-3xl shrink-0 p-4">
|
||||
<img src={products[0].img} className="w-full h-full object-contain mix-blend-multiply" alt="item"/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col justify-between py-2">
|
||||
<div>
|
||||
<h3 className="text-3xl font-black uppercase tracking-tighter text-[#2D3A2F] mb-4">{products[0].name}</h3>
|
||||
<p className="text-[10px] font-black uppercase tracking-widest text-[#3D3D3D]/30">Origin: Brazil | Size: M</p>
|
||||
</div>
|
||||
<div className="flex justify-between items-end pt-10">
|
||||
<span className="text-2xl font-black text-[#4A5D4E] italic">{products[0].price}</span>
|
||||
<button className="text-[10px] font-black uppercase tracking-widest text-red-500 hover:underline">Remove Asset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-12 border-t-2 border-[#4A5D4E]/10 bg-white">
|
||||
<div className="flex justify-between items-center mb-12 text-3xl font-black uppercase tracking-tighter text-[#2D3A2F] italic">
|
||||
<span>Subtotal_Value</span>
|
||||
<span>{products[0].price}</span>
|
||||
</div>
|
||||
<button className="w-full bg-[#4A5D4E] text-white py-10 rounded-[3rem] text-2xl font-black uppercase tracking-widest hover:bg-[#3A4A3E] transition-all shadow-2xl shadow-[#4A5D4E]/30">
|
||||
Proceed to Checkout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
90
src/components/themes/ThemeSwitcher.tsx
Normal file
90
src/components/themes/ThemeSwitcher.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import CyberTheme from './CyberTheme';
|
||||
import StartupTheme from './StartupTheme';
|
||||
import LinearTheme from './LinearTheme';
|
||||
import MagazineTheme from './MagazineTheme';
|
||||
import NeonTheme from './NeonTheme';
|
||||
import PopularTheme from './PopularTheme';
|
||||
import DarkChefTheme from './DarkChefTheme';
|
||||
import EditorialTheme from './EditorialTheme';
|
||||
import GourmetTheme from './GourmetTheme';
|
||||
import HealthyTheme from './HealthyTheme';
|
||||
import CardsTheme from './CardsTheme';
|
||||
import CorporateTheme from './CorporateTheme';
|
||||
import CryptoTheme from './CryptoTheme';
|
||||
import SubstackTheme from './SubstackTheme';
|
||||
import TradingTheme from './TradingTheme';
|
||||
import HypeTheme from './HypeTheme';
|
||||
import LuxeTheme from './LuxeTheme';
|
||||
import MinimalTheme from './MinimalTheme';
|
||||
import NexusTheme from './NexusTheme';
|
||||
import TerraTheme from './TerraTheme';
|
||||
import AuthorityTheme from './AuthorityTheme';
|
||||
import MetricTheme from './MetricTheme';
|
||||
import SeoMinimalTheme from './SeoMinimalTheme';
|
||||
import SeoNexusTheme from './SeoNexusTheme';
|
||||
import PulseTheme from './PulseTheme';
|
||||
import SeoPortalTheme from './SeoTheme';
|
||||
|
||||
interface ThemeSwitcherProps {
|
||||
themeId: string;
|
||||
posts: any[];
|
||||
activeView?: 'home' | 'article';
|
||||
currentArticle?: any;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const themeMap: Record<string, any> = {
|
||||
'cyber': CyberTheme,
|
||||
'startup': StartupTheme,
|
||||
'linear': LinearTheme,
|
||||
'magazine': MagazineTheme,
|
||||
'neon': NeonTheme,
|
||||
'popular': PopularTheme,
|
||||
'darkchef': DarkChefTheme,
|
||||
'editorial': EditorialTheme,
|
||||
'gourmet': GourmetTheme,
|
||||
'healthy': HealthyTheme,
|
||||
'cards': CardsTheme,
|
||||
'corporate': CorporateTheme,
|
||||
'crypto': CryptoTheme,
|
||||
'substack': SubstackTheme,
|
||||
'trading': TradingTheme,
|
||||
'hype': HypeTheme,
|
||||
'luxe': LuxeTheme,
|
||||
'minimal': MinimalTheme,
|
||||
'nexus': NexusTheme,
|
||||
'terra': TerraTheme,
|
||||
'authority': AuthorityTheme,
|
||||
'metric': MetricTheme,
|
||||
'seo-minimal': SeoMinimalTheme,
|
||||
'seo-nexus': SeoNexusTheme,
|
||||
'pulse': PulseTheme,
|
||||
'seo-portal': SeoPortalTheme,
|
||||
};
|
||||
|
||||
export default function ThemeSwitcher({ themeId, posts, currentArticle, ...props }: ThemeSwitcherProps) {
|
||||
// Normalize posts from Astro collection (data property)
|
||||
const normalizedPosts = posts?.map(p => {
|
||||
if (p.data) {
|
||||
return {
|
||||
...p,
|
||||
...p.data,
|
||||
id: p.id || p.slug,
|
||||
slug: p.slug || p.id,
|
||||
content: p.body
|
||||
};
|
||||
}
|
||||
return p;
|
||||
});
|
||||
|
||||
const normalizedArticle = currentArticle?.data ? {
|
||||
...currentArticle,
|
||||
...currentArticle.data,
|
||||
id: currentArticle.id || currentArticle.slug,
|
||||
slug: currentArticle.slug || currentArticle.id,
|
||||
content: currentArticle.body
|
||||
} : currentArticle;
|
||||
|
||||
const SelectedTheme = themeMap[themeId] || CyberTheme;
|
||||
return <SelectedTheme posts={normalizedPosts} currentArticle={normalizedArticle} {...props} />;
|
||||
}
|
||||
230
src/components/themes/TradingTheme.tsx
Normal file
230
src/components/themes/TradingTheme.tsx
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
import { FormEvent } from 'react';
|
||||
import { Settings, BarChart2, TrendingUp, TrendingDown, Clock, Crosshair, ChevronDown, ListFilter, PlayCircle, Minimize2, ExternalLink, Share2, Instagram, Globe } from 'lucide-react';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: 'Voltar ao Gráfico',
|
||||
signals: 'SINAIS AO VIVO',
|
||||
education: 'FORMAÇÃO TRADER',
|
||||
readTime: 'MIN',
|
||||
articles: [
|
||||
{ id: '1', title: 'Price Action: Rompimento de Suporte no Par EUR/USD', excerpt: 'Análise técnica detalhada sobre o comportamento do par após a divulgação dos dados de emprego.', category: 'Forex', time: '8', img: 'https://images.unsplash.com/photo-1611974789855-9c2a0a223690?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '2', title: 'Psicologia do Trader: Como Lidar com o Drawdown', excerpt: 'Estratégias mentais para manter a disciplina operacional durante sequências de perdas inevitáveis.', category: 'Mindset', time: '15', img: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&q=80&w=800' },
|
||||
{ id: '3', title: 'Guia de Indicadores: RSI vs MACD', excerpt: 'Entenda qual indicador de momentum se adapta melhor ao seu estilo de operacional (Scalp vs Swing).', category: 'Técnico', time: '10', img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function TradingTheme({ 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 || 'SIGNAL',
|
||||
title: p.title,
|
||||
excerpt: p.excerpt,
|
||||
time: '8',
|
||||
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 || 'SIGNAL',
|
||||
time: '8',
|
||||
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="trading-terminal bg-[#131722] text-[#D1D4DC] min-h-screen font-sans selection:bg-[#2962FF] selection:text-white">
|
||||
|
||||
{/* Trading Header - Dark & Technical */}
|
||||
<header className="bg-[#1E222D] border-b border-[#2B3139] sticky top-0 z-50">
|
||||
<div className="max-w-[1440px] mx-auto px-6 h-[60px] flex justify-between items-center">
|
||||
<a href="/" className="flex items-center gap-3 cursor-pointer group">
|
||||
<div className="w-8 h-8 bg-[#2962FF] rounded flex items-center justify-center text-white shadow-[0_0_15px_rgba(41,98,255,0.4)]">
|
||||
<BarChart2 className="w-5 h-5"/>
|
||||
</div>
|
||||
<span className="text-lg font-black text-white tracking-tighter uppercase">PRO<span className="text-[#2962FF]">TRADE</span></span>
|
||||
</a>
|
||||
|
||||
<nav className="hidden lg:flex gap-8 text-[11px] font-black uppercase tracking-widest text-[#848E9C]">
|
||||
<a href="/category/analise" className="hover:text-white transition-colors">Análise Técnica</a>
|
||||
<a href="/category/sinais" className="hover:text-white transition-colors text-[#2962FF]">Sinais VIP</a>
|
||||
<a href="/category/mentoria" className="hover:text-white transition-colors">Mentoria</a>
|
||||
<a href="/terminal" className="hover:text-white transition-colors flex items-center gap-2 border border-[#2B3139] px-3 py-1 rounded">Gráficos</a>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="hidden md:flex items-center bg-[#131722] rounded border border-[#2B3139] px-3 py-1.5 focus-within:border-[#2962FF] transition-all">
|
||||
<Search className="w-4 h-4 text-[#848E9C]"/>
|
||||
<input type="text" placeholder="Ativo ou Script..." className="bg-transparent border-none outline-none pl-3 text-[11px] font-bold text-white w-24 focus:w-40 transition-all"/>
|
||||
</div>
|
||||
<button className="bg-[#2962FF] text-white text-[10px] font-black uppercase tracking-widest px-6 py-2 rounded hover:bg-[#1E222D] transition-all shadow-lg shadow-[#2962FF]/20">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{activeView === 'home' ? (
|
||||
<main className="max-w-[1440px] mx-auto px-6 py-8 pb-32">
|
||||
|
||||
<div className="grid lg:grid-cols-12 gap-6 mb-8">
|
||||
{/* Main Chart/News Hero Area */}
|
||||
<div className="lg:col-span-9 flex flex-col gap-6">
|
||||
<a href={`/${articlesToRender[0].id}`} className="w-full bg-[#1E222D] rounded-xl border border-[#2B3139] p-8 lg:p-12 group cursor-pointer relative overflow-hidden block">
|
||||
<div className="absolute right-0 top-0 w-1/2 h-full opacity-10 pointer-events-none">
|
||||
<TrendingUp className="w-full h-full text-[#089981]"/>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<span className="text-[#2962FF] font-black text-[10px] uppercase tracking-widest mb-6 block flex items-center gap-2"><div className="w-2 h-2 bg-[#2962FF] rounded-full animate-pulse"></div>{ui.signals}</span>
|
||||
<h1 className="text-4xl sm:text-6xl font-black text-white leading-[1.1] tracking-tighter mb-8 group-hover:text-[#2962FF] transition-colors">{articlesToRender[0].title}</h1>
|
||||
<p className="text-[#848E9C] text-lg font-medium leading-relaxed max-w-2xl mb-10">{articlesToRender[0].excerpt}</p>
|
||||
<div className="flex items-center gap-6 text-[11px] font-black uppercase tracking-widest text-white/50">
|
||||
<span className="flex items-center gap-2"><Clock className="w-4 h-4"/> Publicado agora</span>
|
||||
<span className="flex items-center gap-2"><ListFilter className="w-4 h-4"/> Alta Probabilidade</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
{[articlesToRender[1], articlesToRender[2]].map((art: any, i: number) => (
|
||||
<a href={`/${art.id}`} key={art.id + i} className="bg-[#1E222D] rounded-xl border border-[#2B3139] p-6 cursor-pointer hover:border-[#2962FF]/50 transition-colors group flex flex-col h-full block">
|
||||
<div className="w-full aspect-video rounded-lg overflow-hidden mb-6 bg-[#131722] relative">
|
||||
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-60" alt={art.title}/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#131722] via-transparent to-transparent"></div>
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-white leading-tight mb-4">{art.title}</h3>
|
||||
<div className="mt-auto flex items-center justify-between text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
|
||||
<span className="flex items-center gap-2"><PlayCircle className="w-4 h-4 text-[#2962FF]"/> {art.category}</span>
|
||||
<span>{art.time} {ui.readTime}</span>
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Live Orderbook / Watchlist Sidebar */}
|
||||
<div className="lg:col-span-3 flex flex-col gap-6">
|
||||
<div className="bg-[#1E222D] rounded-xl border border-[#2B3139] p-5 shadow-xl h-fit">
|
||||
<div className="flex items-center justify-between mb-6 pb-3 border-b border-[#2B3139]">
|
||||
<h2 className="text-white font-black text-xs uppercase tracking-widest flex items-center gap-2"><Settings className="w-4 h-4 text-[#848E9C]"/> Watchlist</h2>
|
||||
<button className="text-[10px] font-black text-[#2962FF] uppercase">Edit</button>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
{[
|
||||
{ sym: 'EURUSD', price: '1.08420', chg: '+0.05%', color: '#089981' },
|
||||
{ sym: 'GBPUSD', price: '1.26540', chg: '-0.12%', color: '#F23645' },
|
||||
{ sym: 'USDJPY', price: '151.240', chg: '+0.34%', color: '#089981' },
|
||||
{ sym: 'XAUUSD', price: '2,175.40', chg: '-0.02%', color: '#F23645' },
|
||||
{ sym: 'US30', price: '39,475.0', chg: '+0.15%', color: '#089981' },
|
||||
].map((item) => (
|
||||
<div key={item.sym} className="flex items-center justify-between text-[11px] font-bold group cursor-pointer hover:bg-[#2B3139] p-2 rounded transition-colors">
|
||||
<span className="text-white group-hover:text-[#2962FF]">{item.sym}</span>
|
||||
<div className="text-right">
|
||||
<div className="text-white">{item.price}</div>
|
||||
<div style={{color: item.color}}>{item.chg}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Broker Affiliate Banner */}
|
||||
<div className="w-full bg-[#2962FF] rounded-xl p-8 text-center group cursor-pointer hover:bg-white transition-all shadow-2xl relative overflow-hidden">
|
||||
<div className="absolute inset-0 bg-[#2962FF] group-hover:opacity-0 transition-opacity"></div>
|
||||
<div className="relative z-10">
|
||||
<Crosshair className="w-12 h-12 text-white group-hover:text-[#2962FF] mx-auto mb-6 group-hover:scale-110 transition-transform"/>
|
||||
<h3 className="text-2xl font-black text-white group-hover:text-[#2962FF] tracking-tighter uppercase mb-4 leading-none italic">Conta ECN Real.</h3>
|
||||
<p className="text-white/70 group-hover:text-[#848E9C] text-[10px] font-bold mb-6">Spreads a partir de 0.0 pips. Execução STP imediata.</p>
|
||||
<button className="bg-white text-[#2962FF] group-hover:bg-[#1E222D] group-hover:text-white w-full py-3 rounded font-black uppercase text-[10px] tracking-widest shadow-xl">Abrir Conta</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
) : (
|
||||
/* --- ARTICLE VIEW --- */
|
||||
<article className="max-w-[1200px] mx-auto px-6 py-12 pb-32">
|
||||
<div className="max-w-[800px] mx-auto">
|
||||
<a href="/" className="text-[10px] font-black uppercase tracking-widest text-[#848E9C] hover:text-[#2962FF] transition-colors block mb-12 flex items-center gap-2">
|
||||
← {ui.back}
|
||||
</a>
|
||||
|
||||
<header className="mb-16">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="bg-[#2962FF] text-white px-3 py-1 rounded text-[9px] font-black uppercase tracking-widest">{displayArticle.category}</span>
|
||||
<span className="text-[#089981] font-black text-[9px] uppercase tracking-widest flex items-center gap-1"><div className="w-1.5 h-1.5 bg-[#089981] rounded-full"></div> LIVE SIGNAL</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-6xl font-black leading-[1.1] tracking-tighter text-white mb-10 italic">
|
||||
{displayArticle.title}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center gap-6 py-6 border-y border-[#2B3139] text-[10px] font-black uppercase tracking-widest text-[#848E9C]">
|
||||
<div className="flex items-center gap-2"><Minimize2 className="w-4 h-4 text-[#2962FF]"/> Full Screen Analysis</div>
|
||||
<div className="ml-auto hidden sm:flex items-center gap-8">
|
||||
<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 text-white"><ExternalLink className="w-4 h-4"/> Ver no TradingView</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="prose prose-lg prose-invert max-w-none text-[#D1D4DC] font-medium leading-[1.8] prose-headings:font-black prose-headings:uppercase prose-headings:tracking-tighter prose-headings:text-white prose-a:text-[#2962FF] prose-img:rounded-xl prose-img:border prose-img:border-[#2B3139] prose-blockquote:border-[#2962FF] prose-blockquote:bg-[#1E222D]">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Trading Professional Footer */}
|
||||
<footer className="bg-[#1E222D] text-[#848E9C] pt-20 pb-12 font-sans border-t border-[#2B3139]">
|
||||
<div className="max-w-[1440px] mx-auto px-6 grid md:grid-cols-4 gap-16 border-b border-[#2B3139] pb-20 mb-12">
|
||||
|
||||
<div className="md:col-span-2">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="w-8 h-8 bg-[#2962FF] rounded flex items-center justify-center text-white">
|
||||
<BarChart2 className="w-5 h-5"/>
|
||||
</div>
|
||||
<span className="text-xl font-black tracking-tighter uppercase text-white">PRO<span className="text-[#2962FF]">TRADE</span></span>
|
||||
</div>
|
||||
<p className="text-[#848E9C] text-sm font-medium leading-relaxed max-w-sm mb-8">Terminal analítico para traders profissionais. Focado em análise técnica pura e sinais operacionais de alta fidelidade.</p>
|
||||
<div className="flex gap-4">
|
||||
<a href="#" className="w-10 h-10 rounded-lg bg-[#131722] flex items-center justify-center hover:bg-[#2962FF] hover:text-white transition-all border border-[#2B3139]"><Instagram className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-lg bg-[#131722] flex items-center justify-center hover:bg-[#2962FF] hover:text-white transition-all border border-[#2B3139]"><Globe className="w-5 h-5"/></a>
|
||||
<a href="#" className="w-10 h-10 rounded-lg bg-[#131722] flex items-center justify-center hover:bg-[#2962FF] hover:text-white transition-all border border-[#2B3139]"><Share2 className="w-5 h-5"/></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-[10px] text-white mb-8">Políticas</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-[#848E9C]">
|
||||
<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="/disclaimer" className="hover:text-white transition-colors">Disclaimer Financeiro</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-black uppercase tracking-widest text-[10px] text-white mb-8">Terminal</h4>
|
||||
<ul className="space-y-4 text-sm font-bold text-[#848E9C]">
|
||||
<li><a href="/terminal" className="hover:text-white transition-colors">Gráficos Ativos</a></li>
|
||||
<li><a href="/search" className="hover:text-white transition-colors">Sinais do Dia</a></li>
|
||||
<li><a href="/login" className="hover:text-white transition-colors">Painel VIP</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="text-center font-black uppercase tracking-[0.4em] text-[8px] text-[#2B3139]">
|
||||
© {new Date().getFullYear()} ProTrade Global Markets. Built by Autoblog Hub.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
8
src/config/site-config.json
Normal file
8
src/config/site-config.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"siteName": "TechInsider Pro",
|
||||
"themeId": "cyber",
|
||||
"primaryColor": "#00f0ff",
|
||||
"backgroundColor": "#050505",
|
||||
"fontFamily": "Space Mono",
|
||||
"layout": "default"
|
||||
}
|
||||
10
src/content/blog/01-ai-future-2030.md
Normal file
10
src/content/blog/01-ai-future-2030.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "O Futuro da Inteligência Artificial em 2030"
|
||||
date: 2024-05-01
|
||||
excerpt: "Como a AGI pode transformar radicalmente a economia global na próxima década."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "IA"
|
||||
---
|
||||
|
||||
A Inteligência Artificial Geral (AGI) não é mais apenas ficção científica. Especialistas preveem que até 2030, sistemas autônomos poderão realizar qualquer tarefa intelectual humana.
|
||||
10
src/content/blog/02-quantum-computing-breakthrough.md
Normal file
10
src/content/blog/02-quantum-computing-breakthrough.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Computação Quântica: O Fim da Criptografia Atual?"
|
||||
date: 2024-05-01
|
||||
excerpt: "Novos avanços em processadores quânticos colocam em risco os sistemas de segurança RSA."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1635070041078-e363dbe005cb?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Quantum"
|
||||
---
|
||||
|
||||
Com a chegada da supremacia quântica, a criptografia que protege nossos bancos e comunicações precisará evoluir para algoritmos pós-quânticos.
|
||||
10
src/content/blog/03-rust-vs-go-2024.md
Normal file
10
src/content/blog/03-rust-vs-go-2024.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Rust vs Go em 2024: Qual escolher para o seu Backend?"
|
||||
date: 2024-05-01
|
||||
excerpt: "Uma análise profunda sobre performance, segurança de memória e velocidade de desenvolvimento."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Dev"
|
||||
---
|
||||
|
||||
Rust oferece segurança de memória sem garbage collector, enquanto Go foca na simplicidade e concorrência. Escolha Rust para sistemas críticos e Go para microsserviços rápidos.
|
||||
10
src/content/blog/04-spacex-starship-mars.md
Normal file
10
src/content/blog/04-spacex-starship-mars.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Starship: O Veículo que nos Levará a Marte"
|
||||
date: 2024-05-01
|
||||
excerpt: "O progresso dos testes da SpaceX e o cronograma para a primeira missão tripulada ao planeta vermelho."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1517976487492-5750f3195933?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Espaço"
|
||||
---
|
||||
|
||||
A reutilização total do Starship é a chave para tornar a vida multiplanetária financeiramente viável.
|
||||
10
src/content/blog/05-web3-decentralized-web.md
Normal file
10
src/content/blog/05-web3-decentralized-web.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Web3: A Internet Descentralizada é Inevitável?"
|
||||
date: 2024-05-01
|
||||
excerpt: "Como a blockchain está devolvendo a soberania dos dados aos usuários finais."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1639762681485-074b7f938ba0?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Web3"
|
||||
---
|
||||
|
||||
Protocolos descentralizados permitem que a internet funcione sem intermediários gigantes, garantindo mais privacidade e liberdade.
|
||||
10
src/content/blog/06-cybersecurity-zero-trust.md
Normal file
10
src/content/blog/06-cybersecurity-zero-trust.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Arquitetura Zero Trust: Nunca Confie, Sempre Verifique"
|
||||
date: 2024-05-01
|
||||
excerpt: "Por que o modelo de segurança de perímetro está morto e o que deve substituí-lo."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Segurança"
|
||||
---
|
||||
|
||||
No modelo Zero Trust, cada acesso é verificado continuamente, independentemente de onde o usuário esteja conectado.
|
||||
10
src/content/blog/07-green-tech-renewable-energy.md
Normal file
10
src/content/blog/07-green-tech-renewable-energy.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Green Tech: Inovações que Estão Salvando o Planeta"
|
||||
date: 2024-05-01
|
||||
excerpt: "Baterias de estado sólido e captura de carbono direto do ar como tendências para 2025."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Sustentabilidade"
|
||||
---
|
||||
|
||||
A tecnologia é nossa maior aliada contra as mudanças climáticas. Novas baterias prometem o dobro da autonomia para carros elétricos.
|
||||
10
src/content/blog/08-ar-vr-spatial-computing.md
Normal file
10
src/content/blog/08-ar-vr-spatial-computing.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Computação Espacial: Além do Vision Pro"
|
||||
date: 2024-05-01
|
||||
excerpt: "O impacto da realidade aumentada no trabalho remoto e no entretenimento doméstico."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1622979135225-d2ba269cf1ac?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Hardware"
|
||||
---
|
||||
|
||||
Interfaces espaciais mudarão a forma como interagimos com o mundo digital, eliminando a barreira das telas planas.
|
||||
10
src/content/blog/09-blockchain-beyond-crypto.md
Normal file
10
src/content/blog/09-blockchain-beyond-crypto.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Blockchain Além das Criptomoedas"
|
||||
date: 2024-05-01
|
||||
excerpt: "Aplicações em logística, saúde e votação eletrônica segura."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1644088379091-d574269d422f?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "Blockchain"
|
||||
---
|
||||
|
||||
A imutabilidade dos registros em blockchain garante transparência total em cadeias de suprimentos complexas.
|
||||
10
src/content/blog/10-biohacking-longevity.md
Normal file
10
src/content/blog/10-biohacking-longevity.md
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Biohacking e a Busca pela Longevidade"
|
||||
date: 2024-05-01
|
||||
excerpt: "Terapias genéticas e monitoramento contínuo de biomarcadores para viver até os 120 anos."
|
||||
author: "Tech Insider"
|
||||
image: "https://images.unsplash.com/photo-1532187875605-1ef6c7a69470?auto=format&fit=crop&q=80&w=800"
|
||||
category_name: "BioTech"
|
||||
---
|
||||
|
||||
A medicina personalizada, baseada no sequenciamento genético, permite prevenir doenças décadas antes dos primeiros sintomas.
|
||||
26
src/content/blog/test-article.md
Normal file
26
src/content/blog/test-article.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
title: "A Revolução do GitOps na Criação de Sites"
|
||||
date: 2026-04-30
|
||||
excerpt: "Descubra como arquiteturas descentralizadas baseadas em GitOps e Astro estão mudando o jogo da web estática."
|
||||
author: "Autoblog AI"
|
||||
---
|
||||
|
||||
# Bem-vindo ao seu novo Blog Astro
|
||||
|
||||
Este é um artigo gerado para testes do nosso motor **GitOps**.
|
||||
Na arquitetura real, a Inteligência Artificial fará commits diários de arquivos Markdown exatamente como este.
|
||||
|
||||
## Por que Astro?
|
||||
|
||||
Astro é um framework web construído para velocidade. Ele retira 100% do JavaScript desnecessário da página, entregando HTML estático puro.
|
||||
Isso resulta em notas 100/100 no Google PageSpeed Insights, o que é fundamental para ranqueamento (SEO).
|
||||
|
||||
### Imagens injetadas pela IA
|
||||
|
||||
A IA do Gemini vai injetar links absolutos do Supabase Storage diretamente no meio do texto, e eles renderizarão perfeitamente:
|
||||
|
||||
|
||||
|
||||
## Componentes React no Astro
|
||||
|
||||
Nós mantemos toda a beleza dos componentes React atuais (`PopularTheme`, `CorporateTheme`), mas usamos o Astro para convertê-los em arquivos super rápidos no momento da compilação pelo Coolify.
|
||||
18
src/content/config.ts
Normal file
18
src/content/config.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { defineCollection, z } from 'astro:content';
|
||||
|
||||
const blogCollection = defineCollection({
|
||||
type: 'content',
|
||||
// Opcionalmente podemos validar frontmatter, mas como nossa IA injeta as vezes markdown puro
|
||||
// com as imagens inline, a validação de schema pode ser flexível.
|
||||
schema: z.object({
|
||||
title: z.string().optional(),
|
||||
date: z.date().optional(),
|
||||
excerpt: z.string().optional(),
|
||||
author: z.string().optional(),
|
||||
image: z.string().optional()
|
||||
}).catchall(z.any()), // Aceita qualquer frontmatter adicional gerado pela IA
|
||||
});
|
||||
|
||||
export const collections = {
|
||||
'blog': blogCollection,
|
||||
};
|
||||
51
src/layouts/Layout.astro
Normal file
51
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
import config from '../config/site-config.json';
|
||||
import '../styles/global.css';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
||||
// Helper para converter Hex para HSL/RGB se necessário,
|
||||
// mas para o nosso uso as CSS variables aceitam Hex perfeitamente na raiz.
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
{/* Google Fonts baseadas na configuração */}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900&family=Fira+Code:wght@300..700&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Merriweather:wght@300..900&family=Outfit:wght@100..900&family=Playfair+Display:wght@400..900&family=Poppins:wght@100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&family=Work+Sans:wght@100..900&display=swap" rel="stylesheet">
|
||||
|
||||
<title>{title} | {config.siteName}</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global define:vars={{
|
||||
primaryColor: config.primaryColor,
|
||||
backgroundColor: config.backgroundColor,
|
||||
fontFamily: `"${config.fontFamily}", sans-serif`
|
||||
}}>
|
||||
:root {
|
||||
--primary: var(--primaryColor);
|
||||
--background: var(--backgroundColor);
|
||||
--font-family: var(--fontFamily);
|
||||
}
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
background: var(--background);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
29
src/pages/[slug].astro
Normal file
29
src/pages/[slug].astro
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
import { getCollection } from 'astro:content';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import ThemeSwitcher from '../components/themes/ThemeSwitcher';
|
||||
import siteConfig from '../config/site-config.json';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
return posts.map(post => ({
|
||||
params: { slug: post.slug },
|
||||
props: { post, allPosts: posts },
|
||||
}));
|
||||
}
|
||||
|
||||
const { post, allPosts } = Astro.props;
|
||||
const { Content } = await post.render();
|
||||
---
|
||||
|
||||
<Layout title={post.data.title}>
|
||||
<ThemeSwitcher
|
||||
themeId={siteConfig.themeId}
|
||||
posts={allPosts}
|
||||
currentArticle={post}
|
||||
activeView="article"
|
||||
client:load
|
||||
>
|
||||
<Content />
|
||||
</ThemeSwitcher>
|
||||
</Layout>
|
||||
18
src/pages/index.astro
Normal file
18
src/pages/index.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import ThemeSwitcher from '../components/themes/ThemeSwitcher';
|
||||
import { getCollection } from 'astro:content';
|
||||
import siteConfig from '../config/site-config.json';
|
||||
|
||||
const posts = await getCollection('blog');
|
||||
const sortedPosts = posts.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime());
|
||||
---
|
||||
|
||||
<Layout title={siteConfig.siteName}>
|
||||
<ThemeSwitcher
|
||||
themeId={siteConfig.themeId}
|
||||
posts={sortedPosts}
|
||||
activeView="home"
|
||||
client:load
|
||||
/>
|
||||
</Layout>
|
||||
28
src/styles/global.css
Normal file
28
src/styles/global.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply bg-background text-white antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for a premium feel */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
}
|
||||
22
tailwind.config.mjs
Normal file
22
tailwind.config.mjs
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
|
||||
'../src/templates/**/*.{js,jsx,ts,tsx}', // Temporary: to read classes from autoblog-2 components during dev
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: 'var(--primary)',
|
||||
background: 'var(--background)',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['var(--font-family)', 'sans-serif'],
|
||||
mono: ['Space Mono', 'monospace'],
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
}
|
||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue