diff --git a/public/assets/images/3d_rendering_interface.jpg b/public/assets/images/3d_rendering_interface.jpg new file mode 100644 index 0000000..e783f3c Binary files /dev/null and b/public/assets/images/3d_rendering_interface.jpg differ diff --git a/public/assets/images/ai_generation_demo.jpg b/public/assets/images/ai_generation_demo.jpg new file mode 100644 index 0000000..4dfa123 Binary files /dev/null and b/public/assets/images/ai_generation_demo.jpg differ diff --git a/public/assets/images/product_list_mockup.jpg b/public/assets/images/product_list_mockup.jpg new file mode 100644 index 0000000..84b7348 Binary files /dev/null and b/public/assets/images/product_list_mockup.jpg differ diff --git a/src/components/home/Models.tsx b/src/components/home/Models.tsx deleted file mode 100644 index 8be62c8..0000000 --- a/src/components/home/Models.tsx +++ /dev/null @@ -1,83 +0,0 @@ -import { useRef, useMemo } from 'react'; -import { useFrame } from '@react-three/fiber'; -import { useScroll, useFBX } from '@react-three/drei'; -import * as THREE from 'three'; - -export function Models() { - const scroll = useScroll(); - - // Load the actual FBX models from the public folder - const heroFBX = useFBX('/3dmodels/MANUAL/Cavins/GEE_TIN.fbx'); - const featureFBX = useFBX('/3dmodels/MANUAL/MAA_Bottle/MAA_Bottle.fbx'); - const ctaFBX = useFBX('/3dmodels/MANUAL/Fairever/Carton.fbx'); - - // Clone them so we don't mutate the cached originals - const heroModel = useMemo(() => heroFBX.clone(), [heroFBX]); - const featureModel = useMemo(() => featureFBX.clone(), [featureFBX]); - const ctaModel = useMemo(() => ctaFBX.clone(), [ctaFBX]); - - const heroRef = useRef(null); - const featureRef = useRef(null); - const ctaRef = useRef(null); - - useFrame((state, delta) => { - const offset = scroll.offset; // 0 to 1 - - if (heroRef.current) { - heroRef.current.rotation.y += delta * 0.3; - // Fade out and move left as we scroll down - heroRef.current.position.y = THREE.MathUtils.lerp(0, 10, offset * 3); - heroRef.current.position.x = THREE.MathUtils.lerp(3, -5, offset * 3); - - // GEE_TIN increased by 300% (0.05 -> 0.15) - const scaleBase = 0.15; - heroRef.current.scale.setScalar(THREE.MathUtils.lerp(scaleBase, 0, offset * 3)); - } - - if (featureRef.current) { - featureRef.current.rotation.y += delta * 0.4; - - const featureProgress = Math.max(0, Math.min(1, (offset - 0.2) * 2)); - featureRef.current.position.y = THREE.MathUtils.lerp(-10, 0, featureProgress); - featureRef.current.position.x = THREE.MathUtils.lerp(-5, -2, featureProgress); - - // MAA_Bottle increased by 300% (0.05 -> 0.15) - const scaleBase = 0.15; - if (offset > 0.6) { - const exitProgress = (offset - 0.6) * 3; - featureRef.current.position.y = THREE.MathUtils.lerp(0, 10, exitProgress); - featureRef.current.scale.setScalar(THREE.MathUtils.lerp(scaleBase, 0, exitProgress)); - } else { - featureRef.current.scale.setScalar(scaleBase); - } - } - - if (ctaRef.current) { - ctaRef.current.rotation.y -= delta * 0.3; - - const ctaProgress = Math.max(0, Math.min(1, (offset - 0.6) * 3)); - ctaRef.current.position.y = THREE.MathUtils.lerp(-10, -1, ctaProgress); - ctaRef.current.position.x = THREE.MathUtils.lerp(5, 2, ctaProgress); - - // Carton decreased by 70% (0.05 -> 0.015) - const scaleBase = 0.015; - ctaRef.current.scale.setScalar(scaleBase); - } - }); - - return ( - - - - - - - - - - - - - - ); -} diff --git a/src/components/home/Overlay.tsx b/src/components/home/Overlay.tsx deleted file mode 100644 index f8a5b57..0000000 --- a/src/components/home/Overlay.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { Scroll, Image, Float } 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 */} - - - - {/* Parallax Floating Products */} - - - - - - - - - - - - - - {/* HTML UI Layer */} - - {/* Navigation */} - - - {/* Section 1: Hero */} -
-
-
- - Next-Gen 3D Configurator -
-

- Titan 3D. -

-

- Bring your products to life with interactive 3D visualization. Empower your customers to configure, customize, and explore in real-time. -

- -
-
- - {/* Section 2: Features */} -
-
-

- Stunning Visuals. -

- -
-
-
-

Photorealistic Rendering

-

Experience uncompromised visual quality with advanced PBR materials and real-time lighting.

-
-
- -
-
- -
-
-

Seamless Integration

-

Embed the 3D configurator directly into your e-commerce platform with a single line of code.

-
-
- -
-
-
-
-
- - {/* Section 3: Call to Action */} -
-
- -
- -

- Ready to Transform? -

-

- Join hundreds of brands using Titan 3D to boost engagement and drive conversions. -

- -
-
- - - ); -} diff --git a/src/components/home/Scene.tsx b/src/components/home/Scene.tsx deleted file mode 100644 index a95a9e4..0000000 --- a/src/components/home/Scene.tsx +++ /dev/null @@ -1,42 +0,0 @@ -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'; - -export function Scene() { - const group = useRef(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 ( - <> - - - {/* Lighting */} - - - - - - - - {/* Main Content */} - - - {/* Floating Particles */} - - - - {/* Post Processing for Premium Aesthetic */} - - - - - - ); -} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 92d9c13..3ede93b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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 ( -
- - - - - - - - +
+ + {/* Navbar */} + + + {/* Hero Section */} +
+ {/* Background glow */} +
+ +
+
+ + The Future of E-Commerce +
+ +

+ Interactive 3D
+ + Made Effortless. + +

+ +

+ Turn flat images into stunning 3D models, edit materials in real-time, and embed a photorealistic product configurator directly into your store. +

+ +
+ + +
+
+ + {/* Hero Image Mockup */} +
+
+ 3D Interface Mockup +
+
+ + {/* Feature 1: AI Generation */} +
+
+
+
+ +
+

+ AI Image-to-3D
Powered Generation +

+

+ 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. +

+
    + {['Meshy & Tripo3D integrations', 'High-poly mesh reconstruction', 'Automatic diffuse mapping'].map((feature, i) => ( +
  • +
    {feature} +
    • + ))} +
+
+
+ AI Generation +
+
+
+ + {/* Feature 2: UV Editor */} +
+
+
+
+ +
+

+ Real-time UV &
Material Editor +

+

+ 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. +

+
+
+ +

Texture Maps

+

Upload custom normal, roughness, and metalness maps.

+
+
+ +

Live Preview

+

See material changes instantly under HDRI lighting.

+
+
+
+
+ UV Editor +
+
+
+ + {/* Feature 3: E-Commerce Showcase */} +
+
+
+
+ +
+

+ Embed Seamlessly
Into Your Store +

+

+ 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. +

+ +
+
+
+ Product Showcase +
+
+
+ + {/* CTA Section */} +
+
+
+ +

+ Ready to Transform Your E-Commerce? +

+

+ Join hundreds of forward-thinking brands using Titan 3D today. +

+ +
+
+ + {/* Footer */} +
); }