feat: complete redesign of the Titan3D homepage with new assets
Build and Deploy / build-and-push (push) Failing after 52s
Build and Deploy / build-and-push (push) Failing after 52s
This commit is contained in:
AI Bot
+214
-14
@@ -1,20 +1,220 @@
|
||||
import { Canvas } from '@react-three/fiber';
|
||||
import { ScrollControls } from '@react-three/drei';
|
||||
import { Scene } from '../components/home/Scene';
|
||||
import { Overlay } from '../components/home/Overlay';
|
||||
import { Suspense } from 'react';
|
||||
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 } = 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="w-screen h-screen bg-zinc-950 overflow-hidden">
|
||||
<Canvas shadows camera={{ position: [0, 0, 10], fov: 45 }}>
|
||||
<Suspense fallback={null}>
|
||||
<ScrollControls pages={3} damping={0.2}>
|
||||
<Scene />
|
||||
<Overlay />
|
||||
</ScrollControls>
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
<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">
|
||||
<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-col sm:flex-row gap-6">
|
||||
<button
|
||||
onClick={() => openAuthModal('register')}
|
||||
className="group px-8 py-4 bg-primary text-white rounded-full font-bold text-lg flex items-center gap-2 transition-all hover:scale-105 shadow-[0_0_40px_rgba(var(--primary-rgb),0.4)]"
|
||||
>
|
||||
Start Building Free <ArrowRight className="group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
<button className="px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full font-bold text-lg transition-all">
|
||||
Book a Demo
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user