235 lines
12 KiB
TypeScript
235 lines
12 KiB
TypeScript
import { useAuthStore } from '../store/authStore';
|
|
import { Box, Layers, Zap, Globe, Sparkles, Wand2, Image as ImageIcon, BoxSelect, ArrowRight } from 'lucide-react';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function Home() {
|
|
const { openAuthModal, user } = useAuthStore();
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 50);
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-zinc-950 text-white font-sans selection:bg-primary/30">
|
|
|
|
{/* Navbar */}
|
|
<nav className={`fixed top-0 left-0 w-full p-6 flex justify-between items-center z-50 transition-all duration-300 ${scrolled ? 'bg-zinc-950/80 backdrop-blur-xl border-b border-white/5' : 'bg-transparent'}`}>
|
|
<div className="flex items-center gap-2 font-bold text-2xl tracking-tighter">
|
|
<Box className="text-primary" /> Titan<span className="text-primary">3d</span>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
{user ? (
|
|
<button
|
|
onClick={() => window.location.href = '/dashboard'}
|
|
className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.5)]"
|
|
>
|
|
Go to Dashboard
|
|
</button>
|
|
) : (
|
|
<>
|
|
<button
|
|
onClick={() => openAuthModal('login')}
|
|
className="px-6 py-2 hover:text-primary font-medium transition-all"
|
|
>
|
|
Log In
|
|
</button>
|
|
<button
|
|
onClick={() => openAuthModal('register')}
|
|
className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.5)]"
|
|
>
|
|
Sign Up
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative pt-40 pb-20 md:pt-52 md:pb-32 px-6 overflow-hidden">
|
|
{/* Background glow */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/20 rounded-full blur-[120px] opacity-50 pointer-events-none" />
|
|
|
|
<div className="max-w-7xl mx-auto flex flex-col items-center text-center relative z-10">
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8 animate-fade-in-up">
|
|
<Sparkles size={16} className="text-primary" />
|
|
<span className="text-sm font-medium tracking-wide uppercase text-zinc-300">The Future of E-Commerce</span>
|
|
</div>
|
|
|
|
<h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-8">
|
|
Interactive 3D <br />
|
|
<span className="bg-clip-text text-transparent bg-gradient-to-r from-primary via-blue-400 to-purple-500">
|
|
Made Effortless.
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-zinc-400 max-w-3xl mb-12 font-light leading-relaxed">
|
|
Turn flat images into stunning 3D models, edit materials in real-time, and embed a photorealistic product configurator directly into your store.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
{user ? (
|
|
<button onClick={() => window.location.href = '/dashboard'} className="px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full font-semibold text-lg transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(var(--primary-rgb),0.4)] hover:shadow-[0_0_40px_rgba(var(--primary-rgb),0.6)] hover:-translate-y-1">
|
|
Go to Dashboard <ArrowRight size={20} />
|
|
</button>
|
|
) : (
|
|
<button onClick={() => openAuthModal('register')} className="px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full font-semibold text-lg transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(var(--primary-rgb),0.4)] hover:shadow-[0_0_40px_rgba(var(--primary-rgb),0.6)] hover:-translate-y-1">
|
|
Start Creating Free <ArrowRight size={20} />
|
|
</button>
|
|
)}
|
|
<button className="px-8 py-4 bg-white/5 hover:bg-white/10 text-white rounded-full font-semibold text-lg backdrop-blur-md border border-white/10 transition-all hover:-translate-y-1">
|
|
View Examples
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero Image Mockup */}
|
|
<div className="max-w-6xl mx-auto mt-24 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent z-10" />
|
|
<img
|
|
src="/assets/images/3d_rendering_interface.jpg"
|
|
alt="3D Interface Mockup"
|
|
className="w-full rounded-2xl md:rounded-[2.5rem] border border-white/10 shadow-2xl shadow-black"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature 1: AI Generation */}
|
|
<section className="py-24 px-6 bg-zinc-900/30">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16">
|
|
<div className="flex-1 space-y-8">
|
|
<div className="w-16 h-16 rounded-2xl bg-purple-500/20 border border-purple-500/30 flex items-center justify-center">
|
|
<Wand2 className="text-purple-400" size={32} />
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold tracking-tight">
|
|
AI Image-to-3D <br /><span className="text-zinc-400">Powered Generation</span>
|
|
</h2>
|
|
<p className="text-xl text-zinc-400 font-light leading-relaxed">
|
|
Don't have 3D assets? No problem. Upload a simple 2D sketch or product photo, and let our advanced AI reconstruction engine build a fully textured 3D mesh in under a minute.
|
|
</p>
|
|
<ul className="space-y-4">
|
|
{['Meshy & Tripo3D integrations', 'High-poly mesh reconstruction', 'Automatic diffuse mapping'].map((feature, i) => (
|
|
<li key={i} className="flex items-center gap-3 text-zinc-300">
|
|
<div className="w-2 h-2 rounded-full bg-primary" /> {feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex-1">
|
|
<img
|
|
src="/assets/images/ai_generation_demo.jpg"
|
|
alt="AI Generation"
|
|
className="w-full rounded-2xl border border-white/10 shadow-2xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature 2: UV Editor */}
|
|
<section className="py-24 px-6">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row-reverse items-center gap-16">
|
|
<div className="flex-1 space-y-8">
|
|
<div className="w-16 h-16 rounded-2xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center">
|
|
<Layers className="text-blue-400" size={32} />
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold tracking-tight">
|
|
Real-time UV & <br /><span className="text-zinc-400">Material Editor</span>
|
|
</h2>
|
|
<p className="text-xl text-zinc-400 font-light leading-relaxed">
|
|
Achieve photorealistic results instantly. Our web-based PBR (Physically Based Rendering) editor lets you adjust roughness, metalness, and maps on the fly without heavy desktop software.
|
|
</p>
|
|
<div className="grid grid-cols-2 gap-6 pt-4">
|
|
<div className="p-6 rounded-2xl bg-white/5 border border-white/5">
|
|
<ImageIcon className="text-primary mb-4" />
|
|
<h4 className="font-bold text-lg mb-2">Texture Maps</h4>
|
|
<p className="text-sm text-zinc-400">Upload custom normal, roughness, and metalness maps.</p>
|
|
</div>
|
|
<div className="p-6 rounded-2xl bg-white/5 border border-white/5">
|
|
<BoxSelect className="text-primary mb-4" />
|
|
<h4 className="font-bold text-lg mb-2">Live Preview</h4>
|
|
<p className="text-sm text-zinc-400">See material changes instantly under HDRI lighting.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<img
|
|
src="/assets/images/3d_rendering_interface.jpg"
|
|
alt="UV Editor"
|
|
className="w-full rounded-2xl border border-white/10 shadow-2xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature 3: E-Commerce Showcase */}
|
|
<section className="py-24 px-6 bg-zinc-900/30">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16">
|
|
<div className="flex-1 space-y-8">
|
|
<div className="w-16 h-16 rounded-2xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center">
|
|
<Zap className="text-emerald-400" size={32} />
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold tracking-tight">
|
|
Embed Seamlessly <br /><span className="text-zinc-400">Into Your Store</span>
|
|
</h2>
|
|
<p className="text-xl text-zinc-400 font-light leading-relaxed">
|
|
Boost your conversion rates by giving customers the power to configure products in full 3D before buying. Export a simple iframe or React component and drop it directly into Shopify, WooCommerce, or any custom site.
|
|
</p>
|
|
<button className="text-primary font-bold hover:underline flex items-center gap-2">
|
|
View integration docs <ArrowRight size={16} />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-emerald-500/20 to-transparent blur-3xl -z-10 rounded-full" />
|
|
<img
|
|
src="/assets/images/product_list_mockup.jpg"
|
|
alt="Product Showcase"
|
|
className="w-full rounded-2xl border border-white/10 shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="py-32 px-6 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-t from-primary/10 via-transparent to-transparent pointer-events-none" />
|
|
<div className="max-w-4xl mx-auto text-center relative z-10 flex flex-col items-center">
|
|
<Globe size={64} className="text-primary mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(var(--primary-rgb),0.5)]" />
|
|
<h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-6">
|
|
Ready to Transform Your <span className="text-primary">E-Commerce?</span>
|
|
</h2>
|
|
<p className="text-2xl text-zinc-400 mb-12 font-light">
|
|
Join hundreds of forward-thinking brands using Titan 3D today.
|
|
</p>
|
|
<button
|
|
onClick={() => openAuthModal('register')}
|
|
className="px-12 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105 shadow-xl"
|
|
>
|
|
Create Your Free Account
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-white/5 py-12 px-6">
|
|
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
|
|
<div className="flex items-center gap-2 font-bold text-xl tracking-tighter text-zinc-400">
|
|
<Box size={24} /> Titan<span className="text-zinc-600">3d</span>
|
|
</div>
|
|
<div className="text-sm text-zinc-600">
|
|
© {new Date().getFullYear()} Titan 3D Configurator. All rights reserved.
|
|
</div>
|
|
<div className="flex gap-6 text-sm text-zinc-500 font-medium">
|
|
<a href="#" className="hover:text-white transition-colors">Privacy</a>
|
|
<a href="#" className="hover:text-white transition-colors">Terms</a>
|
|
<a href="#" className="hover:text-white transition-colors">Contact</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|