294 lines
18 KiB
TypeScript
294 lines
18 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|