Initial commit
This commit is contained in:
commit
c7ca4bfc5b
57 changed files with 14505 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/
|
||||||
1
.npmrc
Normal file
1
.npmrc
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
legacy-peer-deps=true
|
||||||
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()]
|
||||||
|
});
|
||||||
6948
package-lock.json
generated
Normal file
6948
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
32
package.json
Normal file
32
package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
{
|
||||||
|
"name": "autoblog-template-astro-recipe",
|
||||||
|
"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",
|
||||||
|
"lucide-react": "^0.473.0",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"tailwind-merge": "^2.6.0",
|
||||||
|
"motion": "^12.0.0",
|
||||||
|
"framer-motion": "^12.0.0"
|
||||||
|
},
|
||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
352
src/components/themes/DarkChefTheme.tsx
Normal file
352
src/components/themes/DarkChefTheme.tsx
Normal file
|
|
@ -0,0 +1,352 @@
|
||||||
|
import { useState, FormEvent } from 'react';
|
||||||
|
import { Search, Play, Tv, ChevronRight, User, Star, Clock, ChefHat, PlayCircle } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../../lib/i18n';
|
||||||
|
|
||||||
|
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' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
back: 'Back to Channel',
|
||||||
|
tvShows: 'TV SHOWS',
|
||||||
|
chefs: 'TOP CHEFS',
|
||||||
|
latest: 'HOT NEW RELEASES',
|
||||||
|
sidebarAd: 'NETWORK AD',
|
||||||
|
readTime: 'MIN',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Gordon\'s Space Burger', excerpt: 'How to make a Wagyu blend with smoked ribs explode without crumbling on the cast iron.', category: 'Grill', 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: 'Supreme Southern Mac & Cheese', excerpt: 'English cheddar melted inside butter-loaded béchamel with cracked pepper.', category: 'Mains', 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: 'Backyard Smoked Ribs', excerpt: 'Wood nihilism. Texas offset smoker, orange wood and 12 hours of cold smoke.', category: 'BBQ', 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: 'Street Tacos Al Pastor', excerpt: 'Real red adobo and pineapple torched on brutal naked flames.', category: 'Street', 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: 'Thick Creamy Funghi Risotto', excerpt: 'You have to beat the rice. Extreme starch release for true creaminess.', category: 'Italy', 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: 'Nashville Hot Chicken', excerpt: 'Blazing. Insanely crunchy. The triple breaded chicken that stains fingers.', 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: 'High-Society Truffled Guacamole', excerpt: 'Lemon, jalapeños, rock salt, finished with white truffle oil.', category: 'Apps', 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: 'Rustic American Apple Pie', excerpt: 'Thick crust that never floods your oven with boiling cinnamon liquid.', category: 'Dessert', time: '60', rating: '4.8', reviews: 440, img: 'https://images.unsplash.com/photo-1568571780765-9b280aaae01d?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
back: 'Volver al Canal',
|
||||||
|
tvShows: 'SHOWS DE TV',
|
||||||
|
chefs: 'TOP CHEFS',
|
||||||
|
latest: 'ÚLTIMOS LANZAMIENTOS',
|
||||||
|
sidebarAd: 'ANUNCIO DE RED',
|
||||||
|
readTime: 'MIN',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'La Hamburguesa Espacial de Gordon', excerpt: 'Cómo hacer que el blend de Wagyu no se desarme en la parrilla caliente.', category: 'Grill', 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 del Sur', excerpt: 'Queso cheddar inglés derretido en béchamel con pimienta golpeada.', category: 'Principales', 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: 'Costilla Ahumada de Patio', excerpt: 'Nihilismo a leña. Solo un ahumador de Texas tipo offset y 12 horas de humo loco.', category: 'BBQ', 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 de la Calle', excerpt: 'El adobo rojo brillante y la piña rostizada a puro fuego violento.', category: 'Calle', 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: 'Risotto de Funghi súper cremoso', excerpt: 'Golpea el arroz. Liberación química brutal para crema extrema.', category: 'Italia', 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: 'Pollo Frito estilo Nashville', excerpt: 'Extremadamente ardiente. Empanado triple crujiente que rompe moldes.', category: 'Confort', 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 Lujo', excerpt: 'Jalapeños y sal de roca fina ahogándose en aceite de trufa blanca.', category: 'Entradas', 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: 'Tarta de Manzana Gringa', excerpt: 'Corteza gruesa que captura todo el jugo de la manzana hirviendo.', category: 'Postres', 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() {
|
||||||
|
const { lang } = useLanguage();
|
||||||
|
const ui = (typeof DICT !== "undefined" ? DICT : {})?.[lang] || DICT['pt'];
|
||||||
|
const [activeView, setActiveView] = useState<'home' | 'article'>('home');
|
||||||
|
|
||||||
|
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, type: string) => {
|
||||||
|
e.preventDefault();
|
||||||
|
window.alert(`[Media Network Action] ${type}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const safeArticle = (typeof currentArticle !== 'undefined' ? currentArticle : null) || (typeof posts !== 'undefined' ? posts?.[0] : null) || (typeof activeArticle !== 'undefined' ? activeArticle : null) || {
|
||||||
|
id: 'fallback',
|
||||||
|
tag: 'SYSTEM',
|
||||||
|
title: 'Security Event',
|
||||||
|
excerpt: 'Static page content.',
|
||||||
|
date: '00:00:00',
|
||||||
|
author: 'SYSTEM',
|
||||||
|
sev: 'LOW',
|
||||||
|
content: ''
|
||||||
|
};
|
||||||
|
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">
|
||||||
|
<div className="flex items-center gap-6 cursor-pointer" onClick={() => setActiveView('home')}>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden lg:flex gap-8 text-[13px] font-black uppercase tracking-widest text-gray-300">
|
||||||
|
<a href="#" className="hover:text-red-500 transition-colors">Receitas</a>
|
||||||
|
<a href="#" className="hover:text-red-500 transition-colors">Chefs & Hosts</a>
|
||||||
|
<a href="#" 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" onClick={(e) => handleSimulatedAction(e, 'TV Search')}/>
|
||||||
|
<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 */}
|
||||||
|
<section 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" onClick={() => setActiveView('article')}>
|
||||||
|
<img src="https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=2000" className="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:scale-105 group-hover:opacity-80 transition-all duration-1000"/>
|
||||||
|
<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">Reis do <br/><span className="text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-orange-500">Churrasco</span> Americano.</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">{ui.articles[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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<span className="font-bold uppercase text-xs tracking-widest text-gray-500 hover:text-black cursor-pointer hidden sm:block">Ver Episódios Completos →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
|
||||||
|
{[ui.articles[0], ui.articles[1], ui.articles[3], ui.articles[5]].map((art: any) => (
|
||||||
|
<article key={art.id} className="cursor-pointer group relative flex flex-col h-full" onClick={() => setActiveView('article')}>
|
||||||
|
<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"/>
|
||||||
|
<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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</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" onClick={(e) => handleSimulatedAction(e, 'Sponsor MREC Corporate')}>
|
||||||
|
<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">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">
|
||||||
|
{[ui.articles[2], ui.articles[4], ui.articles[6], ui.articles[7]].map((art: any, i: number) => (
|
||||||
|
<article key={i} className="flex flex-col sm:flex-row gap-6 items-center group cursor-pointer border-b border-gray-100 pb-10" onClick={() => setActiveView('article')}>
|
||||||
|
<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"/>
|
||||||
|
<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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<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" onClick={(e) => handleSimulatedAction(e, 'Click Vertical Ad')}>
|
||||||
|
<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" onClick={() => setActiveView('home')}>
|
||||||
|
<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"/>
|
||||||
|
<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">
|
||||||
|
<button onClick={() => setActiveView('home')} className="hover:text-black flex items-center gap-1 transition-colors">
|
||||||
|
← {ui.back}
|
||||||
|
</button>
|
||||||
|
<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">{ui.articles[2].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">
|
||||||
|
{ui.articles[2].title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-500 font-medium mb-10 max-w-3xl leading-relaxed">
|
||||||
|
{ui.articles[2].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: {ui.articles[2].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" onClick={(e) => handleSimulatedAction(e, 'Play Video Receita TV')}>
|
||||||
|
<img src={ui.articles[2].img} className="w-full h-full object-cover opacity-80 group-hover:opacity-60 transition-opacity"/>
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<h2 className="text-3xl border-b-4 border-black pb-2 inline-block">Refatoração Media Hub</h2>
|
||||||
|
<p>Nesta atualização removemos o estilo Substack "Leitura Sombria Literária" e aplicamos a arquitetura Media Hub (Clone do Food Network USA). Fontes massivas, tudo em Caps Lock e tipografia agressiva travada em bordas grossas pretas. A receita não é apenas um guia, é um show de TV comercial lotado de prova social.</p>
|
||||||
|
|
||||||
|
{/* Sponsor Block Inline Text */}
|
||||||
|
<div className="my-16 bg-[#111] p-12 rounded-3xl text-white text-center cursor-pointer relative shadow-2xl" onClick={(e) => handleSimulatedAction(e, 'Sponsor Block Inline TV')}>
|
||||||
|
<span className="text-[10px] font-black tracking-[0.2em] uppercase text-gray-500 mb-4 block border border-gray-600 w-fit mx-auto px-4 py-1 rounded-full">{ui.sidebarAd}</span>
|
||||||
|
<h3 className="text-3xl font-black uppercase tracking-tighter mb-4 text-white !mt-0">Compre o defumador do show.</h3>
|
||||||
|
<p className="text-gray-400 font-medium mb-8">Offset puro de 6mm feito inteiramente com chapas grossas do Texas. Nenhuma fumaça vaza.</p>
|
||||||
|
<button className="bg-red-600 text-white px-8 py-4 rounded font-black uppercase tracking-widest text-[11px] hover:bg-white hover:text-black transition-colors">Equipar o Pátio</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 className="text-3xl border-b-4 border-black pb-2 inline-block gap-4">Lista de Ingredientes</h2>
|
||||||
|
<ul className="list-square marker:text-red-600 mt-8 space-y-4 font-bold text-gray-800 bg-gray-50 p-8 rounded-2xl border border-gray-100">
|
||||||
|
<li>1 peça inteira pesada de assado de tira grossa.</li>
|
||||||
|
<li>Sal grosso marinho bruto em escamas</li>
|
||||||
|
<li>Pimenta do reino quebrada rusticamente</li>
|
||||||
|
<li>1 Lenha frutífera densa (cerejeira ou laranjeira)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 className="text-3xl border-b-4 border-black pb-2 mt-16 mb-8 inline-block gap-4">Passo a Passo de Campeões</h2>
|
||||||
|
<p>É inútil ferver a carne, apenas coloque no defumador alimentando a fogueira central a cada 40 minutos para cravar exatamente 115ºC contínuos por incríveis 12 horas.</p>
|
||||||
|
|
||||||
|
</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>
|
||||||
|
<button className="bg-transparent border-2 border-gray-600 text-[10px] font-black text-white uppercase tracking-widest px-6 py-2 rounded-full hover:border-white transition-colors">Aplicativo de Receitas</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-black uppercase tracking-widest text-[#555] mb-6">Programação</h4>
|
||||||
|
<ul className="space-y-4 text-sm font-bold text-gray-300">
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Programação TV Linear</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Assistir no Simulador On-demand</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Grade Fixa</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-black uppercase tracking-widest text-[#555] mb-6">Corporativo</h4>
|
||||||
|
<ul className="space-y-4 text-sm font-bold text-gray-300">
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Marketing e Publicidade</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Estatísticas de Acesso</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Políticas GDPR</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center font-black uppercase tracking-widest text-[10px] text-gray-600">
|
||||||
|
© 2026 Media Hub Portal - Receitas USA Clone. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
359
src/components/themes/EditorialTheme.tsx
Normal file
359
src/components/themes/EditorialTheme.tsx
Normal file
|
|
@ -0,0 +1,359 @@
|
||||||
|
import { useState, FormEvent } from 'react';
|
||||||
|
import { Search, ChevronRight, Clock, Star, Heart, Menu, User, BookOpen } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../../lib/i18n';
|
||||||
|
|
||||||
|
const DICT: Record<string, any> = {
|
||||||
|
pt: {
|
||||||
|
searchPlaceholder: 'Qual ingrediente você tem aí?',
|
||||||
|
heroTitle: 'O que vamos cozinhar hoje?',
|
||||||
|
collections: 'Receitas por Ocasião',
|
||||||
|
latest: 'Novidades na Cozinha',
|
||||||
|
quick: 'Prontas em 20 Minutos',
|
||||||
|
viewAll: 'Ver Todas',
|
||||||
|
adSponsor: 'Apoio Institucional',
|
||||||
|
readTime: 'MIN',
|
||||||
|
categories: ['Bolos', 'Sobremesas', 'Carnes', 'Aves', 'Massas', 'Vegetariano', 'Sopas'],
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Torta de Limão de Geladeira', excerpt: 'A clássica sobremesa em família usando apenas 4 ingredientes. Não precisa ir ao forno.', time: '15', rating: '4.8', reviews: 231, img: 'https://images.unsplash.com/photo-1519869325930-281384150729?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Frango Cremoso Ao Forno', excerpt: 'Peito de frango suculento gratinado com creme de milho caseiro e queijo mussarela.', time: '40', rating: '4.9', reviews: 1042, img: 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Pudim de Leite Moça Perfeito', excerpt: 'O truque da calda que nunca amarga e a temperatura correta para um pudim lisinho.', time: '60', rating: '5.0', reviews: 3400, img: 'https://images.unsplash.com/photo-1542010589005-ee1d8a8dd44c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Bolo Vulcão de Cenoura', excerpt: 'Massa macia e aerada com uma avalanche de brigadeiro gourmet no centro.', time: '50', rating: '4.9', reviews: 890, img: 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Macarrão Ninho de Forno', excerpt: 'Prático e sem sujeira. O macarrão cozinha direto no molho branco cremoso.', time: '35', rating: '4.7', reviews: 512, img: 'https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '6', title: ' Brigadeiro de Microondas', excerpt: 'Para quando bate a vontade no meio da madrugada. Fica no ponto de enrolar.', time: '8', rating: '4.6', reviews: 120, img: 'https://images.unsplash.com/photo-1541783245831-57d6fb0926d3?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '7', title: 'Salpicão Tradicional de Frango', excerpt: 'A mistura perfeita de crocância com maçã e batata palha, envolto em maionese verde.', time: '20', rating: '4.8', reviews: 765, img: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '8', title: 'Mousse de Maracujá Rápido', excerpt: 'Azedinho na medida certa. Bata no liquidificador e deixe gelar.', time: '10', rating: '4.8', reviews: 440, img: 'https://images.unsplash.com/photo-1551024506-0cb98416ca31?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
searchPlaceholder: 'What ingredients do you have?',
|
||||||
|
heroTitle: 'What are we cooking today?',
|
||||||
|
collections: 'Recipes by Occasion',
|
||||||
|
latest: 'Kitchen News',
|
||||||
|
quick: 'Ready in 20 Minutes',
|
||||||
|
viewAll: 'View All',
|
||||||
|
adSponsor: 'Institutional Support',
|
||||||
|
readTime: 'MIN',
|
||||||
|
categories: ['Cakes', 'Desserts', 'Meat', 'Poultry', 'Pasta', 'Vegetarian', 'Soups'],
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'No-Bake Key Lime Pie', excerpt: 'The classic family dessert using only 4 ingredients. No oven needed.', time: '15', rating: '4.8', reviews: 231, img: 'https://images.unsplash.com/photo-1519869325930-281384150729?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Creamy Baked Chicken', excerpt: 'Juicy chicken breast gratinated with homemade corn cream and mozzarella.', time: '40', rating: '4.9', reviews: 1042, img: 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Perfect Sweet Milk Flan', excerpt: 'The trick to non-bitter caramel and perfect oven temps for silky flans.', time: '60', rating: '5.0', reviews: 3400, img: 'https://images.unsplash.com/photo-1542010589005-ee1d8a8dd44c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Volcano Carrot Cake', excerpt: 'Airy cake mass with a massive avalanche of gourmet fudge in the middle.', time: '50', rating: '4.9', reviews: 890, img: 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Oven-Baked Pasta Nests', excerpt: 'No mess. The pasta cooks directly inside the heavy white cream sauce.', time: '35', rating: '4.7', reviews: 512, img: 'https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '6', title: 'Microwave Chocolate Fudge', excerpt: 'For when the crave hits at 2 AM. Perfect consistency quickly.', time: '8', rating: '4.6', reviews: 120, img: 'https://images.unsplash.com/photo-1541783245831-57d6fb0926d3?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '7', title: 'Traditional Chicken Salad', excerpt: 'The perfect crunch of apples and potato sticks enveloped in mayo.', time: '20', rating: '4.8', reviews: 765, img: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '8', title: 'Quick Passion Fruit Mousse', excerpt: 'Perfectly tart. Just blend it and let it rest in the fridge.', time: '10', rating: '4.8', reviews: 440, img: 'https://images.unsplash.com/photo-1551024506-0cb98416ca31?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
searchPlaceholder: '¿Qué ingredientes tienes?',
|
||||||
|
heroTitle: '¿Qué cocinamos hoy?',
|
||||||
|
collections: 'Recetas por Ocasión',
|
||||||
|
latest: 'Novedades',
|
||||||
|
quick: 'Listas en 20 Minutos',
|
||||||
|
viewAll: 'Ver Todas',
|
||||||
|
adSponsor: 'Apoyo Institucional',
|
||||||
|
readTime: 'MIN',
|
||||||
|
categories: ['Pasteles', 'Postres', 'Carnes', 'Pollo', 'Pastas', 'Vegetariano', 'Sopas'],
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Tarta de Limón Fría', excerpt: 'El postre clásico usando solo 4 ingredientes. No requiere horno.', time: '15', rating: '4.8', reviews: 231, img: 'https://images.unsplash.com/photo-1519869325930-281384150729?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Pollo Cremoso al Horno', excerpt: 'Pechuga gratinada con crema de elote y queso derretido.', time: '40', rating: '4.9', reviews: 1042, img: 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Flan de Leche Condensada', excerpt: 'El truco para un caramelo perfecto y flan súper liso.', time: '60', rating: '5.0', reviews: 3400, img: 'https://images.unsplash.com/photo-1542010589005-ee1d8a8dd44c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Pastel Volcán de Zanahoria', excerpt: 'Masa suave con una avalancha de chocolate en el centro.', time: '50', rating: '4.9', reviews: 890, img: 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Pasta de Lazo al Horno', excerpt: 'Sin ensuciar. La pasta se cocina en su propia salsa blanca.', time: '35', rating: '4.7', reviews: 512, img: 'https://images.unsplash.com/photo-1621996346565-e3dbc646d9a9?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '6', title: 'Dulce de Microondas Rápid', excerpt: 'Ideal para los antojos de medianoche.', time: '8', rating: '4.6', reviews: 120, img: 'https://images.unsplash.com/photo-1541783245831-57d6fb0926d3?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '7', title: 'Ensalada de Pollo Crujiente', excerpt: 'Crocante de manzana y papas, envuelto en mayonesa suave.', time: '20', rating: '4.8', reviews: 765, img: 'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '8', title: 'Mousse Rápida de Maracuyá', excerpt: 'El ácido justo. Licuar y enfriar.', time: '10', rating: '4.8', reviews: 440, img: 'https://images.unsplash.com/photo-1551024506-0cb98416ca31?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function EditorialTheme() {
|
||||||
|
const { lang } = useLanguage();
|
||||||
|
const ui = (typeof DICT !== "undefined" ? DICT : {})?.[lang] || DICT['pt'];
|
||||||
|
const [activeView, setActiveView] = useState<'home' | 'article'>('home');
|
||||||
|
|
||||||
|
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
|
||||||
|
e.preventDefault();
|
||||||
|
window.alert(`[Brand Portal Action] ${msg}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const safeArticle = (typeof currentArticle !== 'undefined' ? currentArticle : null) || (typeof posts !== 'undefined' ? posts?.[0] : null) || (typeof activeArticle !== 'undefined' ? activeArticle : null) || {
|
||||||
|
id: 'fallback',
|
||||||
|
tag: 'SYSTEM',
|
||||||
|
title: 'Security Event',
|
||||||
|
excerpt: 'Static page content.',
|
||||||
|
date: '00:00:00',
|
||||||
|
author: 'SYSTEM',
|
||||||
|
sev: 'LOW',
|
||||||
|
content: ''
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="brand-portal bg-[#F8F9FA] text-[#333] min-h-screen font-sans">
|
||||||
|
|
||||||
|
{/* Brand Navbar - Corporate Clean */}
|
||||||
|
<nav className="bg-white border-b border-gray-100 sticky top-0 z-50">
|
||||||
|
<div className="max-w-[1280px] mx-auto px-4 sm:px-8 h-20 flex justify-between items-center">
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 cursor-pointer" onClick={() => setActiveView('home')}>
|
||||||
|
<div className="w-12 h-12 bg-red-600 outline outline-4 outline-red-100 rounded-full flex items-center justify-center">
|
||||||
|
<BookOpen className="w-6 h-6 text-white"/>
|
||||||
|
</div>
|
||||||
|
<span className="text-2xl font-black text-red-600 tracking-tight hidden sm:block">BRAND<span className="text-[#333]">RECIPES</span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden lg:flex items-center gap-8 font-bold text-gray-500">
|
||||||
|
<a href="#" className="hover:text-red-600 transition-colors">Receitas e Cardápios</a>
|
||||||
|
<a href="#" className="hover:text-red-600 transition-colors">Dicas de Culinária</a>
|
||||||
|
<a href="#" className="hover:text-red-600 transition-colors">Produtos</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<button className="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:text-red-600 hover:border-red-600 transition-colors">
|
||||||
|
<User className="w-5 h-5"/>
|
||||||
|
</button>
|
||||||
|
<button className="lg:hidden w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-600">
|
||||||
|
<Menu className="w-5 h-5"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{activeView === 'home' ? (
|
||||||
|
<main className="pb-20">
|
||||||
|
|
||||||
|
{/* Massive Search Hero */}
|
||||||
|
<div className="relative w-full h-[400px] sm:h-[500px]">
|
||||||
|
<img src="https://images.unsplash.com/photo-1556910103-[ReplaceWithRealLater]?auto=format&fit=crop&q=80&w=2000" className="absolute inset-0 w-full h-full object-cover"/>
|
||||||
|
{/* Better food image */}
|
||||||
|
<img src="https://images.unsplash.com/photo-1495521821757-a1efb6729352?auto=format&fit=crop&q=80&w=2000" className="absolute inset-0 w-full h-full object-cover"/>
|
||||||
|
<div className="absolute inset-0 bg-black/40"></div>
|
||||||
|
|
||||||
|
<div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-black text-white mb-8 drop-shadow-lg">{ui.heroTitle}</h1>
|
||||||
|
|
||||||
|
{/* Huge Search Bar */}
|
||||||
|
<form className="w-full max-w-[800px] relative" onSubmit={(e) => handleSimulatedAction(e, 'Pesquisa de Receitas')}>
|
||||||
|
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-gray-400">
|
||||||
|
<Search className="w-6 h-6"/>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder={ui.searchPlaceholder} className="w-full bg-white rounded-full py-5 pl-16 pr-8 text-lg font-medium text-gray-700 shadow-2xl outline-none focus:ring-4 focus:ring-red-600/30 transition-all placeholder:text-gray-400"/>
|
||||||
|
<button type="submit" className="hidden sm:block absolute right-3 top-1/2 -translate-y-1/2 bg-red-600 text-white font-bold uppercase tracking-wider text-sm px-8 py-3 rounded-full hover:bg-red-700 transition-colors">Buscar</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-[1280px] mx-auto px-4 sm:px-8 mt-12">
|
||||||
|
|
||||||
|
{/* Category Pills */}
|
||||||
|
<div className="flex overflow-x-auto gap-4 pb-6 scrollbar-hide">
|
||||||
|
{ui.categories.map((cat: string) => (
|
||||||
|
<button key={cat} className="shrink-0 bg-white border border-gray-200 px-6 py-3 rounded-full text-sm font-bold text-gray-600 hover:border-red-600 hover:text-red-600 transition-colors shadow-sm">{cat}</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* HORIZONTAL CAROUSEL SECTION: LATEST */}
|
||||||
|
<div className="mt-16 mb-20">
|
||||||
|
<div className="flex items-center justify-between mb-8 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Ver Todas Novidades')}>
|
||||||
|
<h2 className="text-3xl font-black text-gray-800 tracking-tight">{ui.latest}</h2>
|
||||||
|
<span className="font-bold text-red-600 hover:underline flex items-center gap-1">{ui.viewAll} <ChevronRight className="w-4 h-4"/></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{[ui.articles[0], ui.articles[1], ui.articles[2], ui.articles[3]].map((art: any) => (
|
||||||
|
<article key={art.id} onClick={() => setActiveView('article')} className="bg-white rounded-[2rem] overflow-hidden shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 cursor-pointer group flex flex-col h-full">
|
||||||
|
{/* Rigid Aspect Ratio for Images to fix messy distribution */}
|
||||||
|
<div className="w-full aspect-square relative overflow-hidden">
|
||||||
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"/>
|
||||||
|
<button className="absolute top-4 right-4 w-10 h-10 bg-white/90 backdrop-blur rounded-full flex items-center justify-center text-gray-400 hover:text-red-500 shadow-sm transition-colors">
|
||||||
|
<Heart className="w-5 h-5"/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 sm:p-8 flex flex-col flex-1">
|
||||||
|
<h3 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-red-600 transition-colors line-clamp-2 leading-tight">{art?.title}</h3>
|
||||||
|
<p className="text-gray-500 text-sm mb-6 line-clamp-2 font-medium flex-1">{art?.excerpt}</p>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||||
|
<span className="flex items-center gap-1.5 text-xs font-bold text-gray-500">
|
||||||
|
<Clock className="w-4 h-4 text-red-600"/> {art.time} {ui.readTime}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1 text-xs font-bold text-gray-600">
|
||||||
|
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400"/> {art.rating}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* MASSIVE SPONSOR BANNER (MREC Style Corporate) */}
|
||||||
|
<div className="w-full rounded-[2rem] bg-gradient-to-r from-red-600 to-red-800 text-white p-8 sm:p-12 mb-20 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden shadow-xl cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Click Leite Moça')}>
|
||||||
|
<div className="absolute right-0 top-0 w-1/2 h-full opacity-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white to-transparent"></div>
|
||||||
|
<div className="relative z-10 md:w-2/3">
|
||||||
|
<span className="text-[10px] font-black uppercase tracking-widest text-red-200 mb-4 block">{ui.adSponsor}</span>
|
||||||
|
<h3 className="text-3xl sm:text-4xl font-black mb-4 leading-tight">O segredo das sobremesas perfeitas mora na lata certa.</h3>
|
||||||
|
<p className="text-red-100 font-medium">Cadastre-se para receber um e-book exclusivo de bolos da vovó.</p>
|
||||||
|
</div>
|
||||||
|
<button className="shrink-0 bg-white text-red-600 font-bold uppercase tracking-widest text-xs px-8 py-4 rounded-full relative z-10 hover:bg-gray-50 transition-colors">Quero meu E-book</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* HORIZONTAL CAROUSEL SECTION: QUICK RECIPES */}
|
||||||
|
<div className="mb-20">
|
||||||
|
<div className="flex items-center justify-between mb-8 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Ver Todas Rápidas')}>
|
||||||
|
<h2 className="text-3xl font-black text-gray-800 tracking-tight">{ui.quick}</h2>
|
||||||
|
<span className="font-bold text-red-600 hover:underline flex items-center gap-1">{ui.viewAll} <ChevronRight className="w-4 h-4"/></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{[ui.articles[4], ui.articles[5], ui.articles[6], ui.articles[7]].map((art: any) => (
|
||||||
|
<article key={art.id} onClick={() => setActiveView('article')} className="bg-white rounded-[2rem] overflow-hidden shadow-sm hover:shadow-xl border border-gray-100 transition-all duration-300 cursor-pointer group flex flex-col h-full">
|
||||||
|
<div className="w-full aspect-video relative overflow-hidden">
|
||||||
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"/>
|
||||||
|
{/* Time badge inside image for quick visually */}
|
||||||
|
<div className="absolute top-4 left-4 bg-red-600 text-white font-black text-xs px-3 py-1 rounded-full shadow-lg">
|
||||||
|
{art.time} {ui.readTime}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-6 flex flex-col flex-1">
|
||||||
|
<h3 className="text-lg font-bold text-gray-800 mb-2 group-hover:text-red-600 transition-colors line-clamp-2 leading-tight">{art?.title}</h3>
|
||||||
|
<p className="text-gray-500 text-sm mb-4 line-clamp-2 font-medium flex-1">{art?.excerpt}</p>
|
||||||
|
|
||||||
|
<div className="pt-3 border-t border-gray-100 flex items-center gap-1 text-xs font-bold text-gray-500">
|
||||||
|
<Star className="w-3 h-3 fill-yellow-400 text-yellow-400"/> {art.rating} ({art.reviews})
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
) : (
|
||||||
|
/* --- ARTICLE VIEW --- */
|
||||||
|
<article className="pb-20">
|
||||||
|
|
||||||
|
{/* Breadcrumbs and Top Actions */}
|
||||||
|
<div className="bg-white border-b border-gray-100 py-4 sticky top-20 z-40">
|
||||||
|
<div className="max-w-[1000px] mx-auto px-4 sm:px-8 flex justify-between items-center text-sm font-bold text-gray-500">
|
||||||
|
<button onClick={() => setActiveView('home')} className="flex items-center gap-1 hover:text-red-600 transition-colors">
|
||||||
|
Home <ChevronRight className="w-4 h-4"/> Receitas
|
||||||
|
</button>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<button className="flex items-center gap-1 hover:text-red-600 transition-colors" onClick={(e) => handleSimulatedAction(e, 'Salvar')}><Heart className="w-4 h-4"/> Salvar</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-[1000px] mx-auto px-4 sm:px-8 mt-12 mb-12 text-center">
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-gray-800 leading-[1.1] mb-6">
|
||||||
|
{ui.articles[0].title}
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg text-gray-500 font-medium max-w-2xl mx-auto mb-8">
|
||||||
|
{ui.articles[0].excerpt} Perfeito para surpreender a família inteira sem sujar muitas panelas na cozinha.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-2 sm:gap-6 text-sm font-bold text-gray-600">
|
||||||
|
<div className="flex items-center gap-1 bg-gray-100 px-4 py-2 rounded-full"><Clock className="w-4 h-4 text-red-600"/> Preparo: {ui.articles[0].time} {ui.readTime}</div>
|
||||||
|
<div className="flex items-center gap-1 bg-gray-100 px-4 py-2 rounded-full"><User className="w-4 h-4 text-red-600"/> Rendimento: 8 Porções</div>
|
||||||
|
<div className="flex items-center gap-1 bg-white border border-gray-200 shadow-sm px-4 py-2 rounded-full">
|
||||||
|
<Star className="w-4 h-4 fill-yellow-400 text-yellow-400"/> {ui.articles[0].rating} ({ui.articles[0].reviews} avaliações)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Master Image */}
|
||||||
|
<div className="max-w-[1000px] mx-auto px-4 sm:px-8 mb-16">
|
||||||
|
<div className="w-full aspect-[21/9] sm:aspect-video rounded-[2rem] sm:rounded-[3rem] overflow-hidden shadow-2xl relative">
|
||||||
|
<img src={ui.articles[0].img} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-[800px] mx-auto px-4 sm:px-8">
|
||||||
|
<div className="prose prose-lg prose-red max-w-none font-sans text-gray-600 leading-relaxed font-medium prose-headings:font-black prose-headings:text-gray-800 prose-li:font-bold prose-li:text-gray-700">
|
||||||
|
|
||||||
|
<h2>Design Focado em Conversão Massiva</h2>
|
||||||
|
<p>Nesta refatoração do Brand Portal ("Nestlé Style"), a organização espacial mudou completamente: bordas extremas (`rounded-[2rem]`), padding generoso dentro e fora dos cards, cores vibrantes (Vermelho Brandeado) combinadas com cinzas muito limpos, e ausência total de "blocos socados" de texto sem respiro.</p>
|
||||||
|
|
||||||
|
<p>As fotos adotaram tamanhos rígidos de Aspect Ratio (`aspect-square` ou `aspect-video`) travados por CSS. Assim, fotos verticais e horizontais não colidem mais desestruturando o grid, e o layout flui como um site moderno corporativo.</p>
|
||||||
|
|
||||||
|
{/* Inline Banner Square MREC */}
|
||||||
|
<div className="my-12 w-full max-w-[300px] mx-auto h-[250px] bg-red-50 border border-red-100 rounded-2xl flex flex-col items-center justify-center text-center p-6 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Click Inline Ad')}>
|
||||||
|
<span className="text-[10px] uppercase font-black text-red-400 tracking-widest mb-3">Publicidade (MREC)</span>
|
||||||
|
<h3 className="font-black text-xl text-red-800 mb-2">Compre online.</h3>
|
||||||
|
<span className="bg-red-600 text-white font-bold text-xs uppercase px-4 py-2 rounded-full">Ofertas do Dia</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Ingredientes Principais</h2>
|
||||||
|
<ul>
|
||||||
|
<li>1 lata de leite moça tradicional</li>
|
||||||
|
<li>1 colher (sopa) grandona de margarina</li>
|
||||||
|
<li>4 xícaras de amor</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Como Preparar Passo-a-passo</h2>
|
||||||
|
<ol className="mt-8 space-y-6">
|
||||||
|
<li className="bg-white border text-base border-gray-200 p-6 rounded-2xl shadow-sm">
|
||||||
|
<strong className="text-red-600 block mb-2">PASSO 1:</strong>
|
||||||
|
Junte todos os ingredientes secos e molhados e jogue num liquidificador de alta potência comercial usando apenas um botão de pulsar.
|
||||||
|
</li>
|
||||||
|
<li className="bg-white border text-base border-gray-200 p-6 rounded-2xl shadow-sm">
|
||||||
|
<strong className="text-red-600 block mb-2">PASSO 2:</strong>
|
||||||
|
Jogue numa travessa funda untada com manteiga em Spray, ligue o fogão pré-aquecido e mantenha longe das crianças pequenas.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Corporate Big Footer */}
|
||||||
|
<footer className="bg-[#1A1A1A] text-white py-16 sm:py-24 font-sans border-t-[10px] border-red-600">
|
||||||
|
<div className="max-w-[1280px] mx-auto px-4 sm:px-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 sm:gap-8">
|
||||||
|
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<span className="text-2xl font-black text-white tracking-tight block mb-6">BRAND<span className="text-red-600">RECIPES</span></span>
|
||||||
|
<p className="text-gray-400 text-sm font-medium leading-relaxed">
|
||||||
|
Um produto licenciado simulado no layout de corporações clássicas de alimentação. Foco absoluto em bordas arredondadas e respiros generosos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-black uppercase tracking-widest text-sm mb-6 text-gray-200">A Empresa</h4>
|
||||||
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">História e Missão</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Sustentabilidade</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Contato Comercial</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="#" className="hover:text-red-500 transition-colors">Privacidade GDPR</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Uso de Cookies</a></li>
|
||||||
|
<li><a href="#" className="hover:text-red-500 transition-colors">Termos de Conteúdo</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h4 className="font-black uppercase tracking-widest text-sm mb-6 text-gray-200">Apoio Nutricional</h4>
|
||||||
|
<div className="bg-white/10 p-6 rounded-2xl border border-white/5">
|
||||||
|
<p className="text-xs text-gray-400 font-bold mb-4">Assine nossos boletins de saúde com endocrinologistas validados.</p>
|
||||||
|
<form className="flex" onSubmit={(e) => handleSimulatedAction(e, 'Newsletter Nutrição')}>
|
||||||
|
<input type="email" placeholder="Seu email..." className="w-full bg-black/50 text-white px-4 py-2 rounded-l-lg text-xs outline-none" required/>
|
||||||
|
<button className="bg-red-600 text-white px-4 text-xs font-bold uppercase rounded-r-lg hover:bg-red-700 transition-colors">OK</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
355
src/components/themes/GourmetTheme.tsx
Normal file
355
src/components/themes/GourmetTheme.tsx
Normal file
|
|
@ -0,0 +1,355 @@
|
||||||
|
import { useState, FormEvent } from 'react';
|
||||||
|
import { Search, Star, MessageCircle, Clock, UtensilsCrossed, ArrowRight, User } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../../lib/i18n';
|
||||||
|
|
||||||
|
const DICT: Record<string, any> = {
|
||||||
|
pt: {
|
||||||
|
back: 'Início',
|
||||||
|
search: 'Buscar receitas aprovadas...',
|
||||||
|
heroTitle: 'Onde as receitas nunca falham',
|
||||||
|
heroDesc: 'Mais de 120.000 avaliações de cozinheiros caseiros como você.',
|
||||||
|
topRated: 'Top Avaliadas da Comunidade',
|
||||||
|
quick: 'Mais Rápidas 20min',
|
||||||
|
readTime: 'MIN',
|
||||||
|
reviews: 'Avaliações',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Torta Rústica de Frango e Ervilhas', excerpt: 'Massa assada com creme no centro.', category: 'Tortas Salgadas', time: '55', rating: '4.9', reviews: '12,402', img: 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Macarrão ao Forno com Queijo e Pimenta', excerpt: 'Carregado de queijo derretido e pimenta quebrada no topo.', category: 'Massas', time: '30', rating: '4.8', reviews: '8,506', img: 'https://images.unsplash.com/photo-1543339947-fde0fbc5b34a?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Carne de Panela Desfiando', excerpt: 'A mistura perfeita pro final de semana com amigos.', category: 'Carnes', time: '60', rating: '5.0', reviews: '21,300', img: 'https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Pudim de Leite Sem Erros', excerpt: 'Não racha. Não enche de furos.', category: 'Sobremesas', time: '40', rating: '4.7', reviews: '4,321', img: 'https://images.unsplash.com/photo-1542010589005-ee1d8a8dd44c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Bolo de Cenoura com Teto de Chocolate', excerpt: 'Massa fofinha imbatível no café da tarde.', category: 'Bolos', time: '45', rating: '5.0', reviews: '34,050', img: 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '6', title: 'Tacos de Frango na Frigideira', excerpt: 'Feitos na hora pro lanche da garotada.', category: 'Lanches Rápidos', time: '15', rating: '4.6', reviews: '6,700', img: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '7', title: 'Lasanha Suprema de Domingo', excerpt: 'A receita centenária cheia de molho vermelho e bechamel.', category: 'Família', time: '90', rating: '4.9', reviews: '9,204', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '8', title: 'Cookies de Chocolate Macios por Dentro', excerpt: 'Crosta super firme e um núcleo mole de ganache intenso.', category: 'Biscoitos', time: '20', rating: '4.5', reviews: '3,200', img: 'https://images.unsplash.com/photo-1499636136210-6f4ee915583e?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
back: 'Home',
|
||||||
|
search: 'Search tested recipes...',
|
||||||
|
heroTitle: 'Where recipes never fail',
|
||||||
|
heroDesc: 'Over 120,000 trusted reviews from home cooks like you.',
|
||||||
|
topRated: 'Top Community Rated',
|
||||||
|
quick: 'Quickest (Under 20m)',
|
||||||
|
readTime: 'MIN',
|
||||||
|
reviews: 'Reviews',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Rustic Chicken Pot Pie', excerpt: 'Baked crust loaded with cream inside.', category: 'Savory Pies', time: '55', rating: '4.9', reviews: '12,402', img: 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Baked Macaroni & Cheese', excerpt: 'Loaded with melted cheddar and black pepper.', category: 'Pasta', time: '30', rating: '4.8', reviews: '8,506', img: 'https://images.unsplash.com/photo-1543339947-fde0fbc5b34a?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Melt-in-your-mouth Pot Roast', excerpt: 'The perfect weekend mixture for friends.', category: 'Beef', time: '60', rating: '5.0', reviews: '21,300', img: 'https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Foolproof Milk Flan', excerpt: 'Does not crack. Silky smooth every time.', category: 'Desserts', time: '40', rating: '4.7', reviews: '4,321', img: 'https://images.unsplash.com/photo-1542010589005-ee1d8a8dd44c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Chocolate Roof Carrot Cake', excerpt: 'Unbeatable fluffy dough for afternoon coffee.', category: 'Cakes', time: '45', rating: '5.0', reviews: '34,050', img: 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '6', title: 'Pan-Seared Chicken Tacos', excerpt: 'Made instantly for kid cravings.', category: 'Quick Bites', time: '15', rating: '4.6', reviews: '6,700', img: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '7', title: 'Supreme Sunday Lasagna', excerpt: 'Centuries old recipe full of red sauce and bechamel.', category: 'Family', time: '90', rating: '4.9', reviews: '9,204', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '8', title: 'Soft Interior Choc-Chip Cookies', excerpt: 'Firm crust, soft intense ganache core.', category: 'Cookies', time: '20', rating: '4.5', reviews: '3,200', img: 'https://images.unsplash.com/photo-1499636136210-6f4ee915583e?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
back: 'Inicio',
|
||||||
|
search: 'Buscar recetas validadas...',
|
||||||
|
heroTitle: 'Donde nunca fallas',
|
||||||
|
heroDesc: 'Más de 120,000 reseñas de cocineros en casa como tú.',
|
||||||
|
topRated: 'Mejor Evaluadas por la Comunidad',
|
||||||
|
quick: 'Súper Rápidas 20min',
|
||||||
|
readTime: 'MIN',
|
||||||
|
reviews: 'Críticas',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Tarta Rústica de Pollo y Chícharos', excerpt: 'Masa asada rellena de pura crema.', category: 'Tartas Saladas', time: '55', rating: '4.9', reviews: '12,402', img: 'https://images.unsplash.com/photo-1604908176997-125f25cc6f3d?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Macarrones Horneados con Queso', excerpt: 'Cargado de queso derretido y pimienta encima.', category: 'Pastas', time: '30', rating: '4.8', reviews: '8,506', img: 'https://images.unsplash.com/photo-1543339947-fde0fbc5b34a?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Asado de Olla que se deshace', excerpt: 'Mezcla perfecta de res para el finde.', category: 'Carnes', time: '60', rating: '5.0', reviews: '21,300', img: 'https://images.unsplash.com/photo-1544025162-81c951b689a7?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Flan de Leche Antifallas', excerpt: 'No se rompe. Nunca se llena de agua extra.', category: 'Postres', time: '40', rating: '4.7', reviews: '4,321', img: 'https://images.unsplash.com/photo-1542010589005-ee1d8a8dd44c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Pastel de Zanahoria con Techo de Cacao', excerpt: 'Masa súper esponjosa para el café de la tarde.', category: 'Pasteles', time: '45', rating: '5.0', reviews: '34,050', img: 'https://images.unsplash.com/photo-1578985545062-69928b1d9587?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '6', title: 'Tacos de Pollo Directo al Sartén', excerpt: 'Hechos en segundos para niños con hambre.', category: 'Rápidos', time: '15', rating: '4.6', reviews: '6,700', img: 'https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '7', title: 'Lasaña Suprema de Domingo', excerpt: 'Receta familiar gigante bañada en rojo.', category: 'Familia', time: '90', rating: '4.9', reviews: '9,204', img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '8', title: 'Galletas Chocochip Centro Blando', excerpt: 'El centro suave nunca se seca.', category: 'Galletas', time: '20', rating: '4.5', reviews: '3,200', img: 'https://images.unsplash.com/photo-1499636136210-6f4ee915583e?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function GourmetTheme() {
|
||||||
|
const { lang } = useLanguage();
|
||||||
|
const ui = (typeof DICT !== "undefined" ? DICT : {})?.[lang] || DICT['pt'];
|
||||||
|
const [activeView, setActiveView] = useState<'home' | 'article'>('home');
|
||||||
|
|
||||||
|
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
|
||||||
|
e.preventDefault();
|
||||||
|
window.alert(`[Community Portal Action] ${msg}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const safeArticle = (typeof currentArticle !== 'undefined' ? currentArticle : null) || (typeof posts !== 'undefined' ? posts?.[0] : null) || (typeof activeArticle !== 'undefined' ? activeArticle : null) || {
|
||||||
|
id: 'fallback',
|
||||||
|
tag: 'SYSTEM',
|
||||||
|
title: 'Security Event',
|
||||||
|
excerpt: 'Static page content.',
|
||||||
|
date: '00:00:00',
|
||||||
|
author: 'SYSTEM',
|
||||||
|
sev: 'LOW',
|
||||||
|
content: ''
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="community-portal bg-[#FCFAFA] text-[#333333] min-h-screen font-sans">
|
||||||
|
|
||||||
|
{/* Community Navbar - Clean Yellow & White */}
|
||||||
|
<nav className="bg-white border-b-4 border-[#FFAE00] shadow-sm sticky top-0 z-50">
|
||||||
|
<div className="max-w-[1300px] mx-auto px-4 sm:px-6 lg:px-8 h-20 flex justify-between items-center">
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 cursor-pointer group" onClick={() => setActiveView('home')}>
|
||||||
|
<div className="w-10 h-10 bg-[#FFAE00] rounded flex items-center justify-center font-black text-white text-2xl group-hover:bg-[#E59C00] transition-colors">
|
||||||
|
C
|
||||||
|
</div>
|
||||||
|
<span className="text-2xl font-black text-[#1A1A1A] tracking-tighter ml-1">COMMUNITY<span className="text-[#FFAE00] font-normal">Oven</span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Top Search Bar Centered */}
|
||||||
|
<form className="hidden lg:flex w-full max-w-xl mx-8 relative" onSubmit={(e) => handleSimulatedAction(e, 'Buscar Comunidade')}>
|
||||||
|
<input type="text" placeholder={ui.search} className="w-full bg-[#FAFAFA] border-2 border-gray-200 px-6 py-3 rounded-full text-base font-medium outline-none focus:border-[#FFAE00] focus:bg-white transition-all shadow-inner" />
|
||||||
|
<button type="submit" className="absolute right-1 top-1 bottom-1 px-5 bg-[#FFAE00] text-white rounded-full hover:bg-[#E59C00] flex items-center justify-center">
|
||||||
|
<Search className="w-5 h-5"/>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<button className="flex items-center gap-2 font-bold text-gray-600 hover:text-[#FFAE00] transition-colors">
|
||||||
|
<User className="w-5 h-5"/> <span className="hidden sm:block">Entrar</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Second Subnav for detailed Links */}
|
||||||
|
<div className="hidden lg:block bg-gray-50 border-b border-gray-200">
|
||||||
|
<div className="max-w-[1300px] mx-auto px-8 py-3 flex text-sm font-bold text-gray-600 gap-8">
|
||||||
|
<a href="#" className="hover:text-[#FFAE00]">Receitas</a>
|
||||||
|
<a href="#" className="hover:text-[#FFAE00]">Carnes & Aves</a>
|
||||||
|
<a href="#" className="hover:text-[#FFAE00]">Sobremesas</a>
|
||||||
|
<a href="#" className="hover:text-[#FFAE00]">Datas Comemorativas</a>
|
||||||
|
<a href="#" className="hover:text-[#FFAE00]">Dicas Rápidas</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{activeView === 'home' ? (
|
||||||
|
<main className="max-w-[1300px] mx-auto px-4 sm:px-6 lg:px-8 py-10 pb-24">
|
||||||
|
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<h1 className="text-4xl sm:text-6xl font-black text-[#1A1A1A] mb-4 tracking-tighter leading-tight">{ui.heroTitle}</h1>
|
||||||
|
<p className="text-xl text-gray-500 font-medium">{ui.heroDesc}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Master Social Grid Structure */}
|
||||||
|
<div className="grid lg:grid-cols-4 gap-8">
|
||||||
|
|
||||||
|
{/* Main Feed Content (Spans 3 cols) */}
|
||||||
|
<div className="lg:col-span-3">
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 border-b-2 border-gray-200 pb-2 mb-8">
|
||||||
|
<h2 className="text-2xl font-black text-[#1A1A1A] uppercase tracking-tighter">{ui.topRated}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dense Array Style Grid (AllRecipes Style usually 4 per row, or 3 per row on 3-col span) */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-12 mb-16">
|
||||||
|
{ui.articles.slice(0, 6).map((art: any, i: number) => (
|
||||||
|
<article key={art.id} onClick={() => setActiveView('article')} className="group cursor-pointer flex flex-col h-full bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 overflow-hidden transition-all duration-300">
|
||||||
|
{/* Thumbnail with rigid aspect ratio square/4x3 */}
|
||||||
|
<div className="w-full aspect-[4/3] bg-gray-100 relative overflow-hidden">
|
||||||
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"/>
|
||||||
|
{/* Overlay category tag */}
|
||||||
|
<div className="absolute top-3 left-3 bg-white/90 backdrop-blur px-3 py-1 text-[10px] uppercase font-black text-gray-600 rounded drop-shadow-sm">{art.category}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-5 flex flex-col flex-1">
|
||||||
|
<h3 className="text-xl font-bold leading-tight mb-2 text-[#1A1A1A] group-hover:text-[#FFAE00] transition-colors">{art?.title}</h3>
|
||||||
|
|
||||||
|
{/* Signature Massive Ratings Block */}
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<div className="flex gap-0.5 text-[#FFAE00]">
|
||||||
|
<Star className="w-4 h-4 fill-current"/><Star className="w-4 h-4 fill-current"/><Star className="w-4 h-4 fill-current"/><Star className="w-4 h-4 fill-current"/><Star className="w-4 h-4 fill-current text-[#FFAE00] opacity-50"/>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-bold text-gray-500 underline decoration-gray-300">{art.reviews} {ui.reviews}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm font-medium text-gray-500 line-clamp-2 mt-auto">{art?.excerpt}</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inline Banner MREC full width in main container */}
|
||||||
|
<div className="w-full bg-[#FFFBF0] border-2 border-dashed border-[#FFAE00]/40 rounded-3xl p-10 flex flex-col items-center justify-center text-center cursor-pointer mb-16 shadow-inner" onClick={(e) => handleSimulatedAction(e, 'MREC Center Banner')}>
|
||||||
|
<span className="text-[10px] font-black tracking-widest uppercase text-gray-400 mb-2">Publicidade da Comunidade</span>
|
||||||
|
<h3 className="text-2xl font-black text-[#1A1A1A]">Massa pronta com Desconto Imediato.</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secondary Bottom Grid section */}
|
||||||
|
<div className="flex items-center gap-3 border-b-2 border-gray-200 pb-2 mb-8">
|
||||||
|
<h2 className="text-2xl font-black text-[#1A1A1A] uppercase tracking-tighter">{ui.quick}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-12">
|
||||||
|
{[ui.articles[6], ui.articles[7]].map((art: any) => (
|
||||||
|
<article key={art.id} onClick={() => setActiveView('article')} className="group cursor-pointer flex flex-row bg-white rounded-2xl shadow-sm hover:shadow-xl border border-gray-100 overflow-hidden transition-all duration-300 items-center">
|
||||||
|
<div className="w-32 sm:w-40 h-full aspect-square bg-gray-100 shrink-0">
|
||||||
|
<img src={art.img} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"/>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 sm:p-5">
|
||||||
|
<span className="text-[10px] text-[#FFAE00] font-black uppercase tracking-widest block mb-1">{art.category}</span>
|
||||||
|
<h3 className="text-lg font-bold leading-tight mb-2 text-[#1A1A1A] group-hover:text-[#FFAE00] transition-colors line-clamp-2">{art?.title}</h3>
|
||||||
|
<div className="flex items-center gap-1 text-xs font-bold text-gray-600 mb-2"><Clock className="w-3 h-3 text-gray-400"/> {art.time} {ui.readTime}</div>
|
||||||
|
<div className="flex items-center gap-1 text-[11px] font-bold text-gray-400"><Star className="w-3 h-3 fill-[#FFAE00] text-[#FFAE00]"/> {art.rating}</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="bg-white border-2 border-gray-200 font-black text-sm uppercase tracking-widest text-[#1A1A1A] px-12 py-4 rounded-full shadow-sm hover:border-[#FFAE00] hover:text-[#FFAE00] transition-all duration-300 mx-auto block">Ver Mais Avaliações</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Sidebar (1 col span) */}
|
||||||
|
<aside className="lg:col-span-1 flex flex-col gap-10">
|
||||||
|
{/* Save Recipes Widget */}
|
||||||
|
<div className="bg-[#FFAE00] text-[#1A1A1A] rounded-3xl p-8 text-center relative overflow-hidden shadow-lg border-4 border-white">
|
||||||
|
<div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm"><UtensilsCrossed className="w-8 h-8 text-[#FFAE00]"/></div>
|
||||||
|
<h3 className="text-2xl font-black tracking-tight mb-2 leading-none">Faça parte. Salve suas receitas.</h3>
|
||||||
|
<p className="text-sm font-bold text-yellow-900 mb-6 mt-4">Monte sua caixa de receitas digitais para sempre.</p>
|
||||||
|
<button className="w-full bg-[#1A1A1A] text-white font-black uppercase text-[10px] tracking-widest py-4 rounded-xl shadow-md hover:bg-black transition-colors" onClick={(e) => handleSimulatedAction(e, 'Criar Conta Gratuita')}>Criar Conta Gratuita</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Skyscraper Banner Ad */}
|
||||||
|
<div className="w-full h-[600px] bg-white rounded-3xl border border-gray-200 shadow-sm flex flex-col items-center justify-center cursor-pointer relative" onClick={(e) => handleSimulatedAction(e, 'Skyscraper Comunidade')}>
|
||||||
|
<span className="absolute top-4 right-4 text-[9px] uppercase font-bold text-gray-400">Patrocínio 300x600</span>
|
||||||
|
<h3 className="text-xl font-black text-gray-300 px-6 text-center">ANÚNCIO DA COMUNIDADE</h3>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
) : (
|
||||||
|
/* --- ARTICLE/RECIPE COMPLETE DATA VIEW --- */
|
||||||
|
<article className="max-w-[1000px] mx-auto px-4 sm:px-6 lg:px-8 py-12 pb-32">
|
||||||
|
|
||||||
|
{/* Breadcrumbs */}
|
||||||
|
<div className="flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-widest mb-10 border-b border-gray-100 pb-4">
|
||||||
|
<button onClick={() => setActiveView('home')} className="hover:text-[#FFAE00] cursor-pointer">{ui.back}</button>
|
||||||
|
<span className="text-gray-300">></span>
|
||||||
|
<span>{ui.articles[0].category}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row gap-10">
|
||||||
|
|
||||||
|
{/* Left Recipe Data Header */}
|
||||||
|
<div className="md:w-1/2 flex flex-col justify-center">
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-black text-[#1A1A1A] tracking-tighter leading-[1.05] mb-6">
|
||||||
|
{ui.articles[0].title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
{/* Giant Star Rating Social Proof */}
|
||||||
|
<div className="flex items-center gap-4 mb-6 cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Ir para as avaliações no footer')}>
|
||||||
|
<div className="flex gap-1 text-[#FFAE00]">
|
||||||
|
<Star className="w-6 h-6 fill-current"/><Star className="w-6 h-6 fill-current"/><Star className="w-6 h-6 fill-current"/><Star className="w-6 h-6 fill-current"/><Star className="w-6 h-6 fill-current"/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-xl font-black text-[#1A1A1A]">{ui.articles[0].rating}</span>
|
||||||
|
<span className="text-[10px] font-bold uppercase text-gray-500 tracking-widest">{ui.articles[0].reviews} {ui.reviews}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-gray-600 font-medium text-lg leading-relaxed mb-8">
|
||||||
|
{ui.articles[0].excerpt} Avaliado por dezenas de milhares de usuários. Se você fizer exatamente assim, não falha nunca na sua cozinha.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-4 text-sm font-bold text-gray-700 bg-gray-50 p-4 rounded-xl border border-gray-200">
|
||||||
|
<div className="flex items-center gap-2"><Clock className="w-5 h-5 text-gray-400"/> Prep: {ui.articles[0].time} {ui.readTime}</div>
|
||||||
|
<div className="flex items-center gap-2 border-l pl-4 border-gray-300">Rendimento: 6 Porções</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Square Hero Image */}
|
||||||
|
<div className="md:w-1/2">
|
||||||
|
<div className="w-full aspect-square rounded-3xl overflow-hidden shadow-xl bg-gray-100">
|
||||||
|
<img src={ui.articles[0].img} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-20 border-t border-gray-200 pt-16 grid md:grid-cols-12 gap-16">
|
||||||
|
<div className="md:col-span-8">
|
||||||
|
|
||||||
|
<div className="prose prose-lg max-w-none text-gray-700 font-medium leading-relaxed prose-headings:font-black prose-headings:text-[#1A1A1A] prose-headings:tracking-tight prose-a:text-[#FFAE00] prose-li:font-bold prose-li:text-gray-800 marker:text-[#FFAE00]">
|
||||||
|
|
||||||
|
<h2>Sobre o Community Portal Clone</h2>
|
||||||
|
<p>Este layout refatora inteiramente o 5º Tema (Gourmet Bento Grid) num portal de receitas de comunidade (padrão <em>AllRecipes</em> ou <em>Food network community</em>). O design é construído primariamente em cima do gatilho de Prova Social: As estrelas de rating são brutais e as listas são extensas em grid infinito.</p>
|
||||||
|
|
||||||
|
{/* Native Banner inside content MREC */}
|
||||||
|
<div className="my-12 p-10 text-center border-2 border-dashed border-gray-200 rounded-3xl bg-white shadow-sm cursor-pointer" onClick={(e) => handleSimulatedAction(e, 'Click Inline Mrec Comunidade')}>
|
||||||
|
<span className="text-[10px] font-black uppercase text-gray-400 mb-2 block tracking-widest">Sponsored MREC</span>
|
||||||
|
<h3 className="font-black text-2xl text-gray-400 mb-2">ANÚNCIO AQUI</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Ingredientes Validado</h2>
|
||||||
|
<ul className="bg-[#FAFAFA] border-2 border-gray-100 p-8 rounded-3xl list-none space-y-4 shadow-sm m-0">
|
||||||
|
<li className="flex items-center gap-4 m-0 border-b border-gray-200 pb-3"><div className="w-4 h-4 border-2 border-[#1A1A1A] rounded bg-white"></div> Um frango inteiro assado no dia anterior</li>
|
||||||
|
<li className="flex items-center gap-4 m-0 border-b border-gray-200 pb-3"><div className="w-4 h-4 border-2 border-[#1A1A1A] rounded bg-white"></div> Muita ervilha seca hidratada lenta</li>
|
||||||
|
<li className="flex items-center gap-4 m-0 border-b border-gray-200 pb-3"><div className="w-4 h-4 border-2 border-[#1A1A1A] rounded bg-white"></div> Creme de leite fresco (jamais gordaço misturado)</li>
|
||||||
|
<li className="flex items-center gap-4 m-0"><div className="w-4 h-4 border-2 border-[#1A1A1A] rounded bg-white"></div> Sal do mar grosso e pimenta negra</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 className="mt-16">Instruções da Comunidade</h2>
|
||||||
|
<p>Estas instruções receberam 12 mil avaliações positivas de correção ao longo do tempo:</p>
|
||||||
|
|
||||||
|
<p><strong>1. Primeira Fase:</strong> Não tente misturar nada ainda. O sabor desenvolve torrando os componentes sozinhos em frigideira pesada de ferro antes de entrar na torta.</p>
|
||||||
|
<p><strong>2. O Forno:</strong> Se você ligou em 200º, a massa vai rachar porque a água da batata vai evaporar brutalmente criando uma fenda. Mantenha em 180º celcius de forma estável, paciência é vital.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-4">
|
||||||
|
{/* Second Sticky Right Ad 300x600 in Article */}
|
||||||
|
<div className="w-full h-[600px] bg-white rounded-3xl border border-gray-200 shadow-sm flex flex-col items-center justify-center cursor-pointer sticky top-24" onClick={(e) => handleSimulatedAction(e, 'Click Skyscraper Article')}>
|
||||||
|
<span className="absolute top-4 right-4 text-[9px] uppercase font-bold text-gray-400">Patrocínio 300x600</span>
|
||||||
|
<h3 className="text-xl font-black text-gray-300 px-6 text-center">FOGÃO PREÇO<br/>ANÚNCIO DA COMUNIDADE</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Chunky Social Proof Footer */}
|
||||||
|
<footer className="bg-white border-t border-gray-100 py-16 mt-10">
|
||||||
|
<div className="max-w-[1300px] mx-auto px-4 sm:px-8 grid md:grid-cols-12 gap-10">
|
||||||
|
<div className="md:col-span-4">
|
||||||
|
<div className="flex items-center gap-2 mb-6">
|
||||||
|
<div className="w-8 h-8 bg-[#FFAE00] rounded flex items-center justify-center font-black text-white text-xl">
|
||||||
|
C
|
||||||
|
</div>
|
||||||
|
<span className="text-xl font-black text-[#1A1A1A] tracking-tighter ml-1">COMMUNITY<span className="text-[#FFAE00] font-normal">Oven</span></span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-500 font-medium text-sm leading-relaxed pr-8">Simulação do maior portal comunitário de receitas, com arquitetura Infinite Grid focado em avaliações com estrelas e listas densas para máxima retenção de publicações.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-4">Sobre Nós</h4>
|
||||||
|
<ul className="space-y-3 text-sm font-bold text-gray-500">
|
||||||
|
<li><a href="#" className="hover:text-[#FFAE00] transition-colors">Sobre a Comunidade</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#FFAE00] transition-colors">Imprensa e News</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#FFAE00] transition-colors">Política Editorial</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-2">
|
||||||
|
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-4">Descubra</h4>
|
||||||
|
<ul className="space-y-3 text-sm font-bold text-gray-500">
|
||||||
|
<li><a href="#" className="hover:text-[#FFAE00] transition-colors">Bolos Natalinos</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#FFAE00] transition-colors">Dicas de Airfryer</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#FFAE00] transition-colors">Vídeos Exclusivos</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:col-span-4 bg-gray-50 p-6 rounded-2xl border border-gray-100">
|
||||||
|
<h4 className="font-black text-[#1A1A1A] uppercase tracking-tighter mb-2">Comunidade na Caixa.</h4>
|
||||||
|
<p className="text-xs font-bold text-gray-500 mb-4">Assine o boletim e receba o top 10 avaliações de terça-feira.</p>
|
||||||
|
<form className="flex" onSubmit={(e) => handleSimulatedAction(e, 'Footer Subscribe')}>
|
||||||
|
<input type="email" placeholder="O seu melhor email..." className="w-full bg-white px-4 py-2 border border-gray-200 border-r-0 rounded-l-lg outline-none text-sm font-medium"/>
|
||||||
|
<button type="submit" className="bg-[#FFAE00] text-white px-4 rounded-r-lg font-black uppercase text-[10px] tracking-widest hover:bg-[#E59C00]">Vai!</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
296
src/components/themes/HealthyTheme.tsx
Normal file
296
src/components/themes/HealthyTheme.tsx
Normal file
|
|
@ -0,0 +1,296 @@
|
||||||
|
import { useState, FormEvent } from 'react';
|
||||||
|
import { Search, ChevronRight, Clock, Star, PlayCircle, BookOpen, UtensilsCrossed, Bookmark } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../../lib/i18n';
|
||||||
|
|
||||||
|
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' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
back: 'Back',
|
||||||
|
collections: 'Our Collections',
|
||||||
|
dinner: 'PRACTICAL DINNER',
|
||||||
|
veggie: 'THE POWER OF VEGGIES',
|
||||||
|
readTime: 'minutes',
|
||||||
|
kitchen: 'In the Kitchen with the Chef',
|
||||||
|
newsletter: 'Receive golden tips',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Avocado Toast with Poached Eggs', excerpt: 'Complex carbs over wild fermented bread. The definitive breakfast.', category: 'Breakfast', time: '12', rating: '4.9', img: 'https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '2', title: 'Wild Acai Bowl with Savory Granola', excerpt: 'Cutting out all heavy syrups. Texture trip avoiding insulin spikes.', category: 'Snacks', time: '8', rating: '4.8', img: 'https://images.unsplash.com/photo-1498837167922-41c373b50626?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '3', title: 'Baked Salmon over Lemon Quinoa', excerpt: 'Your weekly mega dose of omega 3 enveloped in perfect zesty textures.', category: 'Dinner', time: '25', rating: '5.0', img: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Warm Chickpea and Turmeric Salad', excerpt: 'Immune boosting saffron magic resting on vegetable protein bedrock.', category: 'Veggie Protein', time: '30', rating: '4.9', img: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Coconut Milk Chia Overnight Oats', excerpt: 'Good bacteria slowly culturing overnight directly in your fridge while you rest.', category: 'Probiotics', 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: 'Cold-Pressed Green Juice', excerpt: 'Forget centrifugal heat that burns enzymes. Clean pressure only on organic kale.', category: 'Detox', time: '20', rating: '4.9', img: 'https://images.unsplash.com/photo-1610832958506-aa56368176cf?auto=format&fit=crop&q=80&w=800' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
back: 'Volver',
|
||||||
|
collections: 'Nuestras Colecciones',
|
||||||
|
dinner: 'CENA PRÁCTICA',
|
||||||
|
veggie: 'EL PODER VEGETAL',
|
||||||
|
readTime: 'minutos',
|
||||||
|
kitchen: 'En la Cocina',
|
||||||
|
newsletter: 'Recibe tips de oro',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Tosta de Aguacate con Huevo escalfado', excerpt: 'Cabos complejos sobre pan salvaje. Energía para el mejor desayuno.', category: 'Desayuno', 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çai Salvaje con Granola Salada', excerpt: 'Sin jarabes. Textura amazónica cruda sin picos grandes de insulina basal.', category: 'Snacks', 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ón Asado y Quinoa de Limón y Hierbas', excerpt: 'Un torpedo de Omega 3 fresco sobre texturas ultra cítricas absorbentes.', category: 'Cena', time: '25', rating: '5.0', img: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '4', title: 'Ensalada Caliente de Garbanzo y Cúrcuma', excerpt: 'Inmunidad agresiva envuelta en altas fuentes de proteína verde y tallos.', category: 'Proteína Veggie', time: '30', rating: '4.9', img: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&q=80&w=800' },
|
||||||
|
{ id: '5', title: 'Chia Prebiótica Cultivada de Noche', excerpt: 'Bacterias operando lentamente en el vaso mientras duermes en la oscuridad.', category: 'Probió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: 'Jugo Verde de Prensa en Frío', excerpt: 'Las centrifugadoras hierven enzimas. Prensado natural estricto es la clave.', 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() {
|
||||||
|
const { lang } = useLanguage();
|
||||||
|
const ui = (typeof DICT !== "undefined" ? DICT : {})?.[lang] || DICT['pt'];
|
||||||
|
const [activeView, setActiveView] = useState<'home' | 'article'>('home');
|
||||||
|
|
||||||
|
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
|
||||||
|
e.preventDefault();
|
||||||
|
window.alert(`[Clean Portal Action] ${msg}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const safeArticle = (typeof currentArticle !== 'undefined' ? currentArticle : null) || (typeof posts !== 'undefined' ? posts?.[0] : null) || (typeof activeArticle !== 'undefined' ? activeArticle : null) || {
|
||||||
|
id: 'fallback',
|
||||||
|
tag: 'SYSTEM',
|
||||||
|
title: 'Security Event',
|
||||||
|
excerpt: 'Static page content.',
|
||||||
|
date: '00:00:00',
|
||||||
|
author: 'SYSTEM',
|
||||||
|
sev: 'LOW',
|
||||||
|
content: ''
|
||||||
|
};
|
||||||
|
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">
|
||||||
|
<div className="flex items-center gap-3 cursor-pointer" onClick={() => setActiveView('home')}>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Clean Horizontal Links */}
|
||||||
|
<div className="hidden lg:flex gap-8 text-xs font-bold uppercase tracking-[0.15em] text-gray-500">
|
||||||
|
<a href="#" className="hover:text-black transition-colors border-b border-transparent hover:border-black pb-1">Receitas</a>
|
||||||
|
<a href="#" className="hover:text-black transition-colors border-b border-transparent hover:border-black pb-1">Livros</a>
|
||||||
|
<a href="#" className="hover:text-black transition-colors border-b border-transparent hover:border-black pb-1">Séries</a>
|
||||||
|
</div>
|
||||||
|
</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"/>
|
||||||
|
<input type="text" placeholder="Pesquisar..." className="bg-transparent border-none outline-none pl-3 text-sm font-sans w-32 focus:w-48 transition-all"/>
|
||||||
|
</div>
|
||||||
|
<Bookmark className="w-5 h-5 cursor-pointer hover:fill-black transition-all" onClick={(e) => handleSimulatedAction(e, 'Saves')}/>
|
||||||
|
</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 */}
|
||||||
|
<div 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" onClick={() => setActiveView('article')}>
|
||||||
|
<div className="w-full aspect-square lg:aspect-auto lg:h-[600px] relative">
|
||||||
|
{/* Rigid aspect ensures structure */}
|
||||||
|
<img src={ui.articles[2].img} className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000"/>
|
||||||
|
</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">{ui.articles[2].title}</h2>
|
||||||
|
<p className="text-gray-500 font-sans text-lg mb-8">{ui.articles[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: {ui.articles[2].time} min</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
<span className="text-xs font-bold uppercase tracking-widest text-[#94A3B8] cursor-pointer hover:text-black">Ver Tudo →</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
|
||||||
|
{[ui.articles[0], ui.articles[3], ui.articles[5]].map((art: any) => (
|
||||||
|
<article key={art.id} className="cursor-pointer group" onClick={() => setActiveView('article')}>
|
||||||
|
{/* Notice the rigid elegant square aspect ratio */}
|
||||||
|
<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"/>
|
||||||
|
</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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</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" onClick={(e) => handleSimulatedAction(e, 'Parceiro Ad')}>
|
||||||
|
<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">
|
||||||
|
{[ui.articles[1], ui.articles[4]].map((art: any) => (
|
||||||
|
<article key={art.id} className="cursor-pointer group flex flex-col sm:flex-row gap-6 items-center" onClick={() => setActiveView('article')}>
|
||||||
|
{/* Huge rectangle in row */}
|
||||||
|
<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"/>
|
||||||
|
</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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</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">
|
||||||
|
<button onClick={() => setActiveView('home')} className="font-sans text-xs font-bold uppercase tracking-widest text-[#94A3B8] hover:text-black flex items-center gap-2 transition-colors">
|
||||||
|
← {ui.back}
|
||||||
|
</button>
|
||||||
|
</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">{ui.articles[0].category}</span>
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-normal text-black leading-[1.05] tracking-tight mb-8">
|
||||||
|
{ui.articles[0].title}
|
||||||
|
</h1>
|
||||||
|
<p className="font-sans text-lg text-gray-500 font-medium max-w-xl mx-auto mb-10">
|
||||||
|
{ui.articles[0].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"/> {ui.articles[0].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>
|
||||||
|
|
||||||
|
{/* Master Image Massive & Clean */}
|
||||||
|
<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={ui.articles[0].img} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-[700px] mx-auto px-6 sm:px-8">
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<h2>A elegância do Clean Hub</h2>
|
||||||
|
<p>Nesta refatoração do HealthyTheme, derrubamos o layout de alvenaria desordenado (Masonry) porque, embora bonito para designers, ele confunde leitores mais velhos. Usamos o padrão <em>Panelinha/Rita Lobo</em>: Fundos extremamente brancos, tipografia fina (Serifada para manchetes, Sans para corpo) e padding gigantesco entre os blocos (`mb-16`, `gap-y-16`).</p>
|
||||||
|
|
||||||
|
<p>Os <em>Aspect Ratios</em> agora estão blindados no Tailwind (`aspect-square`, `aspect-[4/3]`) ignorando a proporção natural maluca que imagens aleatórias têm. Isso força as linhas da UI a casarem com perfeição comercial.</p>
|
||||||
|
|
||||||
|
{/* Inline MREC Elegant Text Native Ad */}
|
||||||
|
<div className="font-sans my-16 p-10 lg:p-14 bg-[#FAF9F6] border border-gray-200 rounded-3xl text-center cursor-pointer hover:bg-white transition-colors shadow-sm" onClick={(e) => handleSimulatedAction(e, 'Click Publiss')}>
|
||||||
|
<UtensilsCrossed className="w-8 h-8 mx-auto mb-4 text-gray-300"/>
|
||||||
|
<h3 className="text-xl font-normal text-black uppercase tracking-widest mb-4">Louças de Cerâmica Escovada</h3>
|
||||||
|
<p className="text-sm font-medium text-gray-500 mb-6 max-w-xs mx-auto">Empreste o frescor mate à sua mesa de domingo. Oferta de frete grátis.</p>
|
||||||
|
<button className="text-[10px] font-bold uppercase tracking-widest border border-black text-black px-6 py-2 rounded-full hover:bg-black hover:text-white transition-colors">Comprar Coleção</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Ingredientes</h3>
|
||||||
|
<ul>
|
||||||
|
<li>1 Pão de Casca Grossa rústico</li>
|
||||||
|
<li>1/2 Abacate Avocado Hass maduro sem manchas machucadas</li>
|
||||||
|
<li>Sementes de abóbora tostadas</li>
|
||||||
|
<li>2 Ovos orgânicos muito frescos (para a clara não espalhar na água)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h3>O Passo-a-passo definitivo</h3>
|
||||||
|
<p><strong>1. Prepare o berço:</strong> Esmerilhe o abacate, não bata. A textura rústica misturada com flocos de sal retém o caldo do ovo.</p>
|
||||||
|
<p><strong>2. O redemoinho:</strong> Ferva a água com uma tampa de vinagre. Faça o redemoinho vigoroso com a colher e deixe o ovo cair no olho do furacão. Espere exatamente 2 minutos terrestres e retire com escumadeira rasando a superfície.</p>
|
||||||
|
|
||||||
|
</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">Explore</h4>
|
||||||
|
<ul className="space-y-4 text-sm text-gray-300 font-medium">
|
||||||
|
<li><a href="#" className="hover:text-white transition-colors">Dicionário de Sabores</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white transition-colors">Utensílios Fundamentais</a></li>
|
||||||
|
<li><a href="#" className="hover:text-white transition-colors">Nutrição Infantil</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">{ui.newsletter}</h4>
|
||||||
|
<form className="flex border-b border-gray-600 pb-2" onSubmit={(e) => handleSimulatedAction(e, 'Newsletter Singup')}>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
410
src/components/themes/PopularTheme.tsx
Normal file
410
src/components/themes/PopularTheme.tsx
Normal file
|
|
@ -0,0 +1,410 @@
|
||||||
|
import { useState, FormEvent } from 'react';
|
||||||
|
import { Search, Menu, Clock, ChefHat, Heart, Star, TrendingUp, Mail, Bookmark, User, Share2 } from 'lucide-react';
|
||||||
|
import { useLanguage } from '../../lib/i18n';
|
||||||
|
|
||||||
|
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 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
back: 'Back to Home',
|
||||||
|
search: 'Ex: Chocolate Cake',
|
||||||
|
trending: 'TRENDING THIS WEEK',
|
||||||
|
sidebarAd: 'Sponsor MREC',
|
||||||
|
newsletterTitle: 'Subscribe & Get!',
|
||||||
|
newsletterDesc: 'Top 10 recipes delivered weekly.',
|
||||||
|
subscribeBtn: 'Sign Me Up',
|
||||||
|
latest: 'NOVELTIES & TIPS',
|
||||||
|
popularWidget: 'TOP 5 TODAY',
|
||||||
|
readTime: 'MIN',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Perfect Blender Carrot Cake', excerpt: 'That recipe that never fails, topped with a chocolate glaze that cracks perfectly.', category: 'Cakes', time: '40', rating: '4.9', reviews: 1240 },
|
||||||
|
{ id: '2', title: 'Quick & Creamy Chicken Stroganoff', excerpt: 'The classic sunday lunch ready in 20 minutes using basic fridge ingredients.', category: 'Mains', time: '20', rating: '4.8', reviews: 856 },
|
||||||
|
{ id: '3', title: 'Authentic Brazilian Cheese Bread', excerpt: 'Made with sour cassava flour and cured cheese. Forget frozen bags forever.', category: 'Savory', time: '30', rating: '4.9', reviews: 2100 },
|
||||||
|
{ id: '4', title: 'Oven-Baked Chicken Fricassee', excerpt: 'A tray of pure comfort. Silky corn cream, cream cheese and potato sticks gratin.', category: 'Poultry', time: '35', rating: '4.7', reviews: 432 },
|
||||||
|
{ id: '5', title: 'Flawless Condensed Milk Flan', excerpt: 'The secret to proper oven temps and a caramel sauce that never goes bitter.', category: 'Desserts', time: '60', rating: '5.0', reviews: 3405 },
|
||||||
|
{ id: '6', title: 'Blender Chicken Pie', excerpt: 'Super fluffy dough that melts in your mouth with a juicy center. Ideal for snacks.', category: 'Pies', time: '45', rating: '4.6', reviews: 670 },
|
||||||
|
{ id: '7', title: 'Dried Meat Shepherd\'s Pie', excerpt: 'Velvety cassava puree over shredded jerky and torched rennet cheese.', category: 'Meat', time: '50', rating: '4.9', reviews: 920 },
|
||||||
|
{ id: '8', title: '3-Ingredient Passion Fruit Mousse', excerpt: 'The lazy savior dessert. Extremely creamy using concentrated bottled juice.', category: 'Easy Sweets', time: '10', rating: '4.5', reviews: 320 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
back: 'Volver al Inicio',
|
||||||
|
search: 'Ej: Pastel de Chocolate',
|
||||||
|
trending: 'TENDENCIAS LA SEMANA',
|
||||||
|
sidebarAd: 'Sponsor MREC',
|
||||||
|
newsletterTitle: '¡Suscríbete Ahora!',
|
||||||
|
newsletterDesc: 'Las 10 recetas top de la semana.',
|
||||||
|
subscribeBtn: 'Quiero Recibir',
|
||||||
|
latest: 'NOVEDADES Y TIPS',
|
||||||
|
popularWidget: 'TOP 5 HOY',
|
||||||
|
readTime: 'MIN',
|
||||||
|
articles: [
|
||||||
|
{ id: '1', title: 'Pastel de Zanahoria Rápido en Licuadora', excerpt: 'Receta de abuela que no falla, con una cobertura de chocolate crujiente.', category: 'Pasteles', time: '40', rating: '4.9', reviews: 1240 },
|
||||||
|
{ id: '2', title: 'Strogonoff de Pollo Rápido', excerpt: 'El clásico almuerzo dominguero listo en 20 mins con ingredientes básicos.', category: 'Principales', time: '20', rating: '4.8', reviews: 856 },
|
||||||
|
{ id: '3', title: 'Pan de Queso Casero Original', excerpt: 'Hecho con almidón agrio y queso curado. Olvida las bolsas congeladas.', category: 'Aperitivos', time: '30', rating: '4.9', reviews: 2100 },
|
||||||
|
{ id: '4', title: 'Fricasé de Pollo al Horno', excerpt: 'Una bandeja de consuelo. Crema de elote sedosa y papas al hilo.', category: 'Aves', time: '35', rating: '4.7', reviews: 432 },
|
||||||
|
{ id: '5', title: 'Flan de Leche Condensada sin Agujeros', excerpt: 'El secreto de la temperatura y un caramelo que no amarga.', category: 'Postres', time: '60', rating: '5.0', reviews: 3405 },
|
||||||
|
{ id: '6', title: 'Tarta de Pollo en Licuadora', excerpt: 'Masa súper esponjosa y centro jugoso. Ideal para la merienda.', category: 'Tartas', time: '45', rating: '4.6', reviews: 670 },
|
||||||
|
{ id: '7', title: 'Pastel de Yuca y Carne Seca', excerpt: 'Puré aterciopelado contrastando con carne seca desmechada.', category: 'Carnes', time: '50', rating: '4.9', reviews: 920 },
|
||||||
|
{ id: '8', title: 'Mousse de Maracuyá con 3 Ingredientes', excerpt: 'El postre salvador. Hecho con jugo concentrado, súper cremoso.', category: 'Dulces Fáciles', time: '10', rating: '4.5', reviews: 320 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function PopularTheme() {
|
||||||
|
const { lang } = useLanguage();
|
||||||
|
const ui = DICT[lang] || DICT['pt'];
|
||||||
|
const [activeView, setActiveView] = useState<'home' | 'article'>('home');
|
||||||
|
|
||||||
|
const handleSimulatedAction = (e: React.MouseEvent | FormEvent, msg: string) => {
|
||||||
|
e.preventDefault();
|
||||||
|
window.alert(`[Popular Action] ${msg}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
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" onClick={(e) => handleSimulatedAction(e, 'Siga no Insta')}><Share2 className="w-4 h-4"/> Siga-nos</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-6">
|
||||||
|
<a href="#" className="hover:text-white transition-colors flex items-center gap-1" onClick={(e) => handleSimulatedAction(e, 'Enviar')}><User className="w-3 h-3"/> Mande Sua Receita</a>
|
||||||
|
<a href="#" className="hover:text-white transition-colors" onClick={(e) => handleSimulatedAction(e, 'Ajuda')}>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 */}
|
||||||
|
<div className="flex items-center gap-3 cursor-pointer group" onClick={() => setActiveView('home')}>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Bar - Thick & Central */}
|
||||||
|
<div className="hidden lg:flex flex-1 max-w-2xl relative">
|
||||||
|
<input 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 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile & Saves */}
|
||||||
|
<nav className="flex items-center gap-6 text-sm font-bold text-gray-600">
|
||||||
|
<button className="hidden sm:flex flex-col items-center gap-1 hover:text-[#EA580C] transition-colors" onClick={(e) => handleSimulatedAction(e, 'Caixa de Favoritos')}>
|
||||||
|
<Bookmark className="w-6 h-6"/> <span className="text-[10px] uppercase">Salvos</span>
|
||||||
|
</button>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* Categories Thick Bar */}
|
||||||
|
<div className="hidden lg:block bg-gradient-to-r from-gray-50 to-white border-t border-gray-100">
|
||||||
|
<div className="max-w-[1240px] mx-auto px-8 py-4 flex justify-between items-center text-sm font-black text-gray-600 uppercase tracking-wide">
|
||||||
|
{['Bolos e Tortas', 'Carnes', 'Aves', 'Peixes', 'Saladas', 'Sopas', 'Massas', 'Sobremesas'].map(cat => (
|
||||||
|
<a href="#" key={cat} className="hover:text-[#EA580C] border-b-2 border-transparent hover:border-[#EA580C] pb-1 transition-all">{cat}</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</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" onClick={(e) => handleSimulatedAction(e, 'Leaderboard Ad')}>
|
||||||
|
<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">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">
|
||||||
|
{[ui.articles[0], ui.articles[1]].map((art: any) => (
|
||||||
|
<article key={art.id} onClick={() => setActiveView('article')} 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={`https://images.unsplash.com/photo-1548946522-4a313e8972a4?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-700"/>
|
||||||
|
<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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</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">
|
||||||
|
{ui.articles.slice(2).map((art: any, i: number) => (
|
||||||
|
<article key={art.id} onClick={() => setActiveView('article')} 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={`https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=400&random=${i}`} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" />
|
||||||
|
</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>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</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" onClick={(e) => handleSimulatedAction(e, 'Inline Banner Click')}>
|
||||||
|
<span className="text-[10px] font-black uppercase text-gray-300 block absolute top-2 right-4">{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" onSubmit={(e) => handleSimulatedAction(e, 'Newsletter Singup')}>
|
||||||
|
<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" onClick={(e) => handleSimulatedAction(e, 'Click Skyscraper Ad')}>
|
||||||
|
<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">
|
||||||
|
{[ui.articles[4], ui.articles[0], ui.articles[6], ui.articles[2], ui.articles[7]].map((art: any, i: number) => (
|
||||||
|
<div key={i} className="flex items-center gap-5 group cursor-pointer" onClick={() => setActiveView('article')}>
|
||||||
|
<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={`https://images.unsplash.com/photo-1542744173-8e7e53415bb0?auto=format&fit=crop&q=80&w=200&random=${i}w`} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</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">
|
||||||
|
<button onClick={() => setActiveView('home')} 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}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
{ui.articles[0].category}
|
||||||
|
</span>
|
||||||
|
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-black text-gray-800 leading-[1.05] mb-8 tracking-tighter">
|
||||||
|
{ui.articles[0].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" />
|
||||||
|
<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"/> {ui.articles[0].time} {ui.readTime}</div>
|
||||||
|
<div className="flex items-center gap-1"><Star className="w-5 h-5 fill-yellow-400 text-yellow-400"/> {ui.articles[0].rating} ({ui.articles[0].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" onClick={(e) => handleSimulatedAction(e, 'Share FB')}>
|
||||||
|
<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" onClick={(e) => handleSimulatedAction(e, 'Salvar e Imprimir')}>
|
||||||
|
<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="https://images.unsplash.com/photo-1548946522-4a313e8972a4?auto=format&fit=crop&q=80&w=2000" className="w-full h-full object-cover" />
|
||||||
|
</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]">
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-500 font-medium leading-relaxed mb-10 pb-6 border-b border-gray-100">
|
||||||
|
{ui.articles[0].excerpt} Todos os passos validados para fazer bonito no domingão sem drama. Abaixo testamos os métodos para não errar.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>Bordas Arredondadas & Espaçamento Comercial</h2>
|
||||||
|
<p>A arquitetura "TudoGostoso" atualizada exige densidade, mas com respeito pela UI moderna. Removemos os cards blocados apertados, injetamos massivamente bordas `rounded-3xl` e adicionamos um controle brutal de Aspect Ratios nas miniaturas da Home. O resultado é o portal mais rentável possível mantendo uma sensação premium.</p>
|
||||||
|
|
||||||
|
{/* INLINE MREC SPONSOR IN ARTICLE */}
|
||||||
|
<div className="my-12 w-full h-[300px] bg-gray-50 flex flex-col items-center justify-center border-2 border-dashed border-gray-200 relative cursor-pointer rounded-2xl" onClick={(e) => handleSimulatedAction(e, 'Inline Content Banner')}>
|
||||||
|
<span className="text-[10px] font-black uppercase text-gray-300 absolute top-4 right-4 tracking-widest">{ui.sidebarAd} // MREC GRANDE</span>
|
||||||
|
<h3 className="text-2xl font-black text-gray-300">BLOCO DE ANÚNCIO</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Ingredientes</h2>
|
||||||
|
<div className="bg-orange-50 border border-orange-100 rounded-2xl p-6 sm:p-8 my-8">
|
||||||
|
<ul className="list-none space-y-4 m-0 font-bold text-gray-700 p-0">
|
||||||
|
<li className="flex items-center gap-3 border-b border-orange-200/50 pb-4"><div className="w-4 h-4 bg-white border-2 border-[#EA580C] rounded-md shrink-0"></div> 3 cenouras médias (cerca de 250g) descascadas</li>
|
||||||
|
<li className="flex items-center gap-3 border-b border-orange-200/50 pb-4"><div className="w-4 h-4 bg-white border-2 border-[#EA580C] rounded-md shrink-0"></div> 4 ovos inteiros tamanho grande</li>
|
||||||
|
<li className="flex items-center gap-3 border-b border-orange-200/50 pb-4"><div className="w-4 h-4 bg-white border-2 border-[#EA580C] rounded-md shrink-0"></div> 1 xícara (chá) de óleo de girassol</li>
|
||||||
|
<li className="flex items-center gap-3 border-b border-orange-200/50 pb-4"><div className="w-4 h-4 bg-white border-2 border-[#EA580C] rounded-md shrink-0"></div> 2 xícaras (chá) de farinha de trigo sem fermento</li>
|
||||||
|
<li className="flex items-center gap-3"><div className="w-4 h-4 bg-white border-2 border-[#EA580C] rounded-md shrink-0"></div> 1 colher (sopa) bem cheia de fermento químico</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Modo de Preparo: O Truque</h2>
|
||||||
|
<div className="bg-red-50 border-l-4 border-red-500 p-6 rounded-r-2xl my-8">
|
||||||
|
<p className="font-bold text-red-900 m-0 uppercase text-xs tracking-widest mb-2">Atenção Especial:</p>
|
||||||
|
<p className="m-0 text-red-800 text-base">Nunca coloque muita cenoura. O excesso de umidade pesa a massa e seu bolo vai embatumar no meio. Pese na balança ou use cenouras finas, NUNCA grandes e velhas.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ol className="space-y-6 list-decimal list-inside text-lg">
|
||||||
|
<li className="pl-2">No liquidificador, coloque batendo por 5 minutos os líquidos vitais.</li>
|
||||||
|
<li className="pl-2">Em uma tigela gigante, incorpore os secos com um fouet metálico devagar, puxando do fundo.</li>
|
||||||
|
<li className="pl-2">Forno pré-aquecido e forma rigorosamente untada com farinha grossa.</li>
|
||||||
|
</ol>
|
||||||
|
</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" onClick={(e) => handleSimulatedAction(e, 'Click HalfPage Ad Article')}>
|
||||||
|
<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">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>
|
||||||
|
<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">Bolos e Tortas Frios</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#EA580C] transition-colors">Cardápios Infantis</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#EA580C] transition-colors">Sobremesas de Natal</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="font-black text-gray-800 uppercase tracking-widest text-sm mb-6">Privacidade</h4>
|
||||||
|
<ul className="space-y-4 text-sm font-bold text-gray-500">
|
||||||
|
<li><a href="#" className="hover:text-[#EA580C] transition-colors">Termos e GDPR EU</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#EA580C] transition-colors">Proteção de Dados</a></li>
|
||||||
|
<li><a href="#" className="hover:text-[#EA580C] transition-colors">Anuncie no Portal</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center font-bold text-gray-400 text-xs tracking-widest uppercase">
|
||||||
|
© 2026 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
95
src/components/themes/ThemeSwitcher.tsx
Normal file
95
src/components/themes/ThemeSwitcher.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
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 => {
|
||||||
|
let postData = p.data ? { ...p, ...p.data } : { ...p };
|
||||||
|
// Safety for Astro Date objects failing in React
|
||||||
|
if (postData.date && typeof postData.date !== 'string') postData.date = String(postData.date);
|
||||||
|
if (postData.updatedDate && typeof postData.updatedDate !== 'string') postData.updatedDate = String(postData.updatedDate);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...postData,
|
||||||
|
id: p.id || p.slug || postData.id,
|
||||||
|
slug: p.slug || p.id || postData.slug,
|
||||||
|
content: p.body || postData.content
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
let normalizedArticle = currentArticle?.data ? { ...currentArticle, ...currentArticle.data } : currentArticle ? { ...currentArticle } : null;
|
||||||
|
if (normalizedArticle) {
|
||||||
|
if (normalizedArticle.date && typeof normalizedArticle.date !== 'string') normalizedArticle.date = String(normalizedArticle.date);
|
||||||
|
if (normalizedArticle.updatedDate && typeof normalizedArticle.updatedDate !== 'string') normalizedArticle.updatedDate = String(normalizedArticle.updatedDate);
|
||||||
|
normalizedArticle = {
|
||||||
|
...normalizedArticle,
|
||||||
|
id: currentArticle?.id || currentArticle?.slug || normalizedArticle.id,
|
||||||
|
slug: currentArticle?.slug || currentArticle?.id || normalizedArticle.slug,
|
||||||
|
content: currentArticle?.body || normalizedArticle.content
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
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": "Chef Master Recipes",
|
||||||
|
"themeId": "darkchef",
|
||||||
|
"primaryColor": "#E50914",
|
||||||
|
"backgroundColor": "#ffffff",
|
||||||
|
"fontFamily": "Outfit",
|
||||||
|
"layout": "default"
|
||||||
|
}
|
||||||
22
src/content/blog/01-hamburguer-gourmet-picanha.md
Normal file
22
src/content/blog/01-hamburguer-gourmet-picanha.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
---
|
||||||
|
title: "Hambúrguer Gourmet de Picanha"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "O segredo do blend perfeito com picanha e gordura na medida certa para um burger suculento."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1568901346375-23c9450c58cd?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Grelhados"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 800g de picanha moída (com a própria gordura)
|
||||||
|
- Sal grosso e pimenta-do-reino a gosto
|
||||||
|
- 4 pães de brioche
|
||||||
|
- 200g de queijo cheddar inglês
|
||||||
|
- Cebola caramelizada
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Divida a carne em 4 bolas de 200g e molde os discos.
|
||||||
|
2. Aqueça a chapa ou frigideira de ferro até soltar fumaça.
|
||||||
|
3. Tempere a carne apenas na hora de grelhar.
|
||||||
|
4. Grelhe por 4 minutos de cada lado para ponto médio.
|
||||||
|
5. Derreta o queijo e monte no pão selado com manteiga.
|
||||||
21
src/content/blog/02-lasanha-bolonhesa-classica.md
Normal file
21
src/content/blog/02-lasanha-bolonhesa-classica.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
title: "Lasanha à Bolonhesa Clássica"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "Receita tradicional italiana com molho ragu cozido por 4 horas e bechamel cremoso."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Massas"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- Massa de lasanha fresca
|
||||||
|
- 500g de carne moída (músculo ou acém)
|
||||||
|
- 1 lata de tomate pelado
|
||||||
|
- 1 cebola, 1 cenoura e 1 talo de salsão
|
||||||
|
- Molho Bechamel (leite, manteiga e farinha)
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Refogue o mirepoix (cebola, cenoura, salsão) e adicione a carne.
|
||||||
|
2. Junte o tomate e cozinhe em fogo baixo por pelo menos 2 horas.
|
||||||
|
3. Monte camadas de massa, bolonhesa, bechamel e parmesão.
|
||||||
|
4. Leve ao forno a 180°C por 30 minutos até gratinar.
|
||||||
22
src/content/blog/03-salmao-molho-maracuja.md
Normal file
22
src/content/blog/03-salmao-molho-maracuja.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
---
|
||||||
|
title: "Salmão ao Molho de Maracujá"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "A acidez do maracujá contrastando perfeitamente com a gordura do salmão grelhado."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Peixes"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 2 postas de salmão fresco
|
||||||
|
- Polpa de 2 maracujás
|
||||||
|
- 1 colher de mel
|
||||||
|
- Azeite de oliva
|
||||||
|
- Alecrim e sal
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Reduza a polpa do maracujá com o mel em fogo baixo até engrossar.
|
||||||
|
2. Tempere o salmão com sal e alecrim.
|
||||||
|
3. Grelhe o salmão com a pele para baixo primeiro.
|
||||||
|
4. Vire e finalize o cozimento mantendo o centro rosado.
|
||||||
|
5. Sirva com o molho por cima.
|
||||||
22
src/content/blog/04-bolo-cenoura-chocolate.md
Normal file
22
src/content/blog/04-bolo-cenoura-chocolate.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
---
|
||||||
|
title: "Bolo de Cenoura com Cobertura Craquelada"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "O clássico brasileiro com aquela cobertura de chocolate que fica crocante por fora."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1607329382103-60f386926315?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Sobremesas"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 3 cenouras médias
|
||||||
|
- 3 ovos
|
||||||
|
- 1 xícara de óleo
|
||||||
|
- 2 xícaras de açúcar
|
||||||
|
- 2 xícaras de farinha de trigo
|
||||||
|
- 1 colher de fermento
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Bata no liquidificador a cenoura, ovos e óleo.
|
||||||
|
2. Misture os secos em uma tigela e incorpore o líquido.
|
||||||
|
3. Asse por 40 minutos em forno pré-aquecido a 180°C.
|
||||||
|
4. Cubra com calda de chocolate (leite, açúcar, manteiga e cacau) fervida até o ponto.
|
||||||
22
src/content/blog/05-risoto-cogumelos-trufas.md
Normal file
22
src/content/blog/05-risoto-cogumelos-trufas.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
---
|
||||||
|
title: "Risoto de Cogumelos e Trufas"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "Prato sofisticado com arroz arbóreo, mix de cogumelos frescos e finalização com azeite de trufas."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1476124369491-e7addf5db378?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Gourmet"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 200g de arroz arbóreo
|
||||||
|
- 300g de cogumelos (Paris, Shimeji, Shitake)
|
||||||
|
- 1 litro de caldo de legumes quente
|
||||||
|
- 100ml de vinho branco seco
|
||||||
|
- Azeite de trufas brancas
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Refogue os cogumelos em azeite e reserve.
|
||||||
|
2. Toste o arroz, adicione o vinho e deixe evaporar.
|
||||||
|
3. Adicione o caldo aos poucos, mexendo sempre para soltar o amido.
|
||||||
|
4. No final, volte os cogumelos e finalize com manteiga e parmesão.
|
||||||
|
5. Pingue gotas de azeite de trufas antes de servir.
|
||||||
21
src/content/blog/06-tacos-carnitas-mexicano.md
Normal file
21
src/content/blog/06-tacos-carnitas-mexicano.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
title: "Tacos de Carnitas Estilo Mexicano"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "Carne de porco confitada em gordura própria até ficar desmanchando e crocante."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1551504734-5ee1c4a1479b?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Rua"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 1kg de paleta suína em cubos
|
||||||
|
- Suco de 2 laranjas
|
||||||
|
- Banha de porco
|
||||||
|
- Tortilhas de milho
|
||||||
|
- Coentro, cebola roxa e limão
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Cozinhe a carne na banha com o suco de laranja em fogo baixíssimo.
|
||||||
|
2. Quando estiver macia, aumente o fogo para dourar as bordas.
|
||||||
|
3. Desfie levemente.
|
||||||
|
4. Monte os tacos com a carne, cebola, coentro e muito limão.
|
||||||
21
src/content/blog/07-sopa-cebola-francesa.md
Normal file
21
src/content/blog/07-sopa-cebola-francesa.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
title: "Sopa de Cebola Francesa Autêntica"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "Cebolas caramelizadas por horas, caldo de carne rico e queijo Gruyère gratinado."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1547592166-23ac45744acd?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Entradas"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 5 cebolas grandes fatiadas
|
||||||
|
- 50g de manteiga
|
||||||
|
- 1 litro de caldo de carne artesanal
|
||||||
|
- Torradas de baguete
|
||||||
|
- Queijo Gruyère ralado
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Caramelize as cebolas na manteiga em fogo baixo por 40 minutos.
|
||||||
|
2. Adicione o caldo e cozinhe por mais 20 minutos.
|
||||||
|
3. Coloque em bowls individuais, cubra com a torrada e o queijo.
|
||||||
|
4. Leve ao forno para gratinar o queijo até dourar.
|
||||||
21
src/content/blog/08-frango-xadrez-vegetais.md
Normal file
21
src/content/blog/08-frango-xadrez-vegetais.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
title: "Frango Xadrez com Vegetais Crocantes"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "O clássico da culinária chinesa com cubos de frango, amendoim e pimentões coloridos."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1525755662778-989d0524087e?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Asiática"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 500g de peito de frango em cubos
|
||||||
|
- Pimentões verde, vermelho e amarelo
|
||||||
|
- 1 cebola em pétalas
|
||||||
|
- Molho shoyu e amido de milho
|
||||||
|
- Amendoim torrado
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Sele o frango em fogo alto (Wok preferencialmente).
|
||||||
|
2. Adicione os vegetais e refogue rapidamente para manter a crocância.
|
||||||
|
3. Junte o molho de shoyu com amido para engrossar.
|
||||||
|
4. Finalize com amendoim e cebolinha.
|
||||||
21
src/content/blog/09-pizza-margherita-longa-fermentacao.md
Normal file
21
src/content/blog/09-pizza-margherita-longa-fermentacao.md
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
---
|
||||||
|
title: "Pizza Margherita de Longa Fermentação"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "Massa leve e aerada com 48h de maturação, molho de tomate San Marzano e manjericão fresco."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1574071318508-1cdbad80ad38?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Massas"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- Farinha tipo 00
|
||||||
|
- Água gelada, sal e fermento biológico seco
|
||||||
|
- Tomate pelado esmagado
|
||||||
|
- Muçarela de búfala fresca
|
||||||
|
- Manjericão
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Sove a massa e deixe descansar na geladeira por 48 horas.
|
||||||
|
2. Abra o disco manualmente preservando as bordas.
|
||||||
|
3. Espalhe o tomate, coloque a muçarela e as folhas de manjericão.
|
||||||
|
4. Asse em forno o mais quente possível (acima de 350°C).
|
||||||
22
src/content/blog/10-petit-gateau-belga.md
Normal file
22
src/content/blog/10-petit-gateau-belga.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
---
|
||||||
|
title: "Petit Gâteau de Chocolate Belga"
|
||||||
|
date: 2024-05-01
|
||||||
|
excerpt: "Bolinho quente com centro líquido e cremoso, servido com sorvete de baunilha artesanal."
|
||||||
|
author: "Chef Master"
|
||||||
|
image: "https://images.unsplash.com/photo-1624353365286-3f8d62daad51?auto=format&fit=crop&q=80&w=800"
|
||||||
|
category_name: "Sobremesas"
|
||||||
|
---
|
||||||
|
|
||||||
|
## Ingredientes
|
||||||
|
- 200g de chocolate amargo 70%
|
||||||
|
- 200g de manteiga
|
||||||
|
- 4 ovos e 2 gemas
|
||||||
|
- 100g de açúcar
|
||||||
|
- 100g de farinha de trigo
|
||||||
|
|
||||||
|
## Instruções
|
||||||
|
1. Derreta o chocolate com a manteiga em banho-maria.
|
||||||
|
2. Bata os ovos com o açúcar até dobrar de volume.
|
||||||
|
3. Incorpore o chocolate e depois a farinha.
|
||||||
|
4. Asse em forminhas untadas por apenas 8 minutos a 200°C.
|
||||||
|
5. Desenforme com cuidado e sirva quente.
|
||||||
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>
|
||||||
57
src/lib/i18n.ts
Normal file
57
src/lib/i18n.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export type Language = 'pt' | 'en' | 'es';
|
||||||
|
|
||||||
|
const translations: Record<Language, any> = {
|
||||||
|
pt: {
|
||||||
|
nav: { home: 'Início', articles: 'Artigos', contact: 'Contato', language: 'Idioma' },
|
||||||
|
footer: { rights: 'Todos os direitos reservados', builtWith: 'Construído com' }
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
nav: { home: 'Home', articles: 'Articles', contact: 'Contact', language: 'Language' },
|
||||||
|
footer: { rights: 'All rights reserved', builtWith: 'Built with' }
|
||||||
|
},
|
||||||
|
es: {
|
||||||
|
nav: { home: 'Inicio', articles: 'Artículos', contact: 'Contacto', language: 'Idioma' },
|
||||||
|
footer: { rights: 'Todos los derechos reservados', builtWith: 'Construido con' }
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useLanguage() {
|
||||||
|
const [lang, setLangState] = useState<Language>('pt');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const saved = localStorage.getItem('lang');
|
||||||
|
if (saved && translations[saved as Language]) {
|
||||||
|
setLangState(saved as Language);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleLangChange = (e: Event) => {
|
||||||
|
const detail = (e as CustomEvent).detail;
|
||||||
|
if (detail && translations[detail as Language]) {
|
||||||
|
setLangState(detail);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('lang-change', handleLangChange);
|
||||||
|
return () => window.removeEventListener('lang-change', handleLangChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const setLang = (l: Language) => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.setItem('lang', l);
|
||||||
|
}
|
||||||
|
setLangState(l);
|
||||||
|
window.dispatchEvent(new CustomEvent('lang-change', { detail: l }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
lang,
|
||||||
|
setLanguage: setLang,
|
||||||
|
setLang,
|
||||||
|
t: translations[lang] || translations.pt
|
||||||
|
};
|
||||||
|
}
|
||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import { type ClassValue, clsx } from "clsx";
|
||||||
|
import { twMerge } from "tailwind-merge";
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs));
|
||||||
|
}
|
||||||
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