Complete homepage overhaul with parallax and auth modal

2026-07-30 13:41:21 +05:30
parent 1a19f582cb
commit dcc6362ec8
10 changed files with 325 additions and 165 deletions
@@ -0,0 +1,102 @@
+import { Scroll, Image } from '@react-three/drei';
+import { useAuthStore } from '../../store/authStore';
+import { Box, Layers, Zap, Globe, Sparkles } from 'lucide-react';
+
+export function Overlay() {
+  const { openAuthModal } = useAuthStore();
+
+  return (
+    <>
+      {/* 3D Background Images Parallax Layer */}
+      <Scroll>
+        <Image url="/assets/images/bg_hero.png" scale={[16, 10]} position={[0, 0, -5]} transparent opacity={0.6} />
+        <Image url="/assets/images/bg_features.png" scale={[16, 10]} position={[0, -10, -5]} transparent opacity={0.5} />
+        <Image url="/assets/images/bg_cta.png" scale={[16, 10]} position={[0, -20, -5]} transparent opacity={0.6} />
+      </Scroll>
+
+      {/* HTML UI Layer */}
+      <Scroll html style={{ width: '100%', height: '100%' }}>
+        {/* Navigation */}
+        <nav className="fixed top-0 left-0 w-full p-6 flex justify-between items-center z-50 mix-blend-difference text-white">
+          <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>
+          <button 
+            onClick={() => openAuthModal('login')}
+            className="px-6 py-2 bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-full font-medium transition-all"
+          >
+            Sign In
+          </button>
+        </nav>
+
+        {/* Section 1: Hero */}
+        <section className="w-screen h-screen flex flex-col justify-center items-start px-12 md:px-32 text-white">
+          <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-6">
+            <Sparkles size={16} className="text-primary" />
+            <span className="text-sm font-medium">Next-Gen 3D Configurator</span>
+          </div>
+          <h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-6 max-w-4xl bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-500">
+            Build The Future in 3D.
+          </h1>
+          <p className="text-xl md:text-2xl text-zinc-400 max-w-2xl mb-10 font-light">
+            An ultra-premium, AI-driven platform to visualize, construct, and deploy stunning 3D assets directly in your browser.
+          </p>
+          <button 
+            onClick={() => openAuthModal('register')}
+            className="px-8 py-4 bg-primary hover:bg-primary/90 rounded-full font-bold text-lg shadow-[0_0_40px_rgba(var(--primary-rgb),0.5)] hover:scale-105 transition-all"
+          >
+            Start Building Free
+          </button>
+        </section>
+
+        {/* Section 2: Features */}
+        <section className="w-screen h-screen flex flex-col justify-center items-end px-12 md:px-32 text-white text-right">
+          <h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-16 max-w-3xl">
+            Unleash Unprecedented <span className="text-blue-400">Power</span>.
+          </h2>
+          
+          <div className="flex flex-col gap-8 max-w-xl">
+            <div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
+              <div className="text-left">
+                <h3 className="text-2xl font-bold mb-2">Real-time Rendering</h3>
+                <p className="text-zinc-400">Experience photorealistic materials and lighting instantly.</p>
+              </div>
+              <div className="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
+                <Layers className="text-blue-400" size={32} />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md hover:bg-white/10 transition-all">
+              <div className="text-left">
+                <h3 className="text-2xl font-bold mb-2">AI Asset Generation</h3>
+                <p className="text-zinc-400">Turn text prompts into high-fidelity 3D models in seconds.</p>
+              </div>
+              <div className="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0">
+                <Zap className="text-purple-400" size={32} />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 3: Call to Action */}
+        <section className="w-screen h-screen flex flex-col justify-center items-center text-center px-12 text-white relative">
+          <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent pointer-events-none" />
+          
+          <Globe size={64} className="text-emerald-400 mb-8 animate-pulse" />
+          <h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
+            Ready to Deploy?
+          </h2>
+          <p className="text-2xl text-zinc-400 max-w-2xl mb-12">
+            Join elite creators building the next generation of spatial computing experiences.
+          </p>
+          <button 
+            onClick={() => openAuthModal('register')}
+            className="px-10 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105"
+          >
+            Create Your Workspace
+          </button>
+        </section>
+      </Scroll>
+    </>
+  );
+}
@@ -0,0 +1,46 @@
+import { useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import { Environment, Float, Sparkles } from '@react-three/drei';
+import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing';
+import { Models } from './Models';
+
+export function Scene() {
+  const group = useRef<THREE.Group>(null);
+
+  useFrame((state) => {
+    if (group.current) {
+      // Gentle floating animation for the entire scene group
+      group.current.rotation.y = Math.sin(state.clock.elapsedTime * 0.1) * 0.2;
+    }
+  });
+
+  return (
+    <>
+      <color attach="background" args={['#09090b']} />
+      
+      {/* Lighting */}
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} intensity={1.5} color="#8b5cf6" />
+      <directionalLight position={[-10, -10, -5]} intensity={1} color="#3b82f6" />
+      <pointLight position={[0, 0, 0]} intensity={0.5} color="#ffffff" />
+      
+      <Environment preset="city" />
+
+      {/* Main Content */}
+      <group ref={group}>
+        <Float speed={1.5} rotationIntensity={0.5} floatIntensity={0.5}>
+          <Models />
+        </Float>
+        
+        {/* Floating Particles */}
+        <Sparkles count={300} scale={15} size={3} speed={0.4} opacity={0.3} color="#a78bfa" />
+      </group>
+
+      {/* Post Processing for Premium Aesthetic */}
+      <EffectComposer disableNormalPass>
+        <Bloom luminanceThreshold={0.2} mipmapBlur intensity={1.5} radius={0.8} />
+        <Vignette eskil={false} offset={0.1} darkness={1.1} />
+      </EffectComposer>
+    </>
+  );
+}