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
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 859 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
@@ -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<THREE.Group>(null);
|
|
||||||
const featureRef = useRef<THREE.Group>(null);
|
|
||||||
const ctaRef = useRef<THREE.Group>(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 (
|
|
||||||
<group>
|
|
||||||
<group ref={heroRef} position={[3, 0, -2]}>
|
|
||||||
<primitive object={heroModel} />
|
|
||||||
</group>
|
|
||||||
|
|
||||||
<group ref={featureRef} position={[-5, -10, -3]}>
|
|
||||||
<primitive object={featureModel} />
|
|
||||||
</group>
|
|
||||||
|
|
||||||
<group ref={ctaRef} position={[5, -10, -2]}>
|
|
||||||
<primitive object={ctaModel} />
|
|
||||||
</group>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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 */}
|
|
||||||
<Scroll>
|
|
||||||
<Image url="/assets/images/bg_hero.png" scale={[16, 10]} position={[0, 0, -8]} transparent opacity={0.2} />
|
|
||||||
|
|
||||||
{/* Parallax Floating Products */}
|
|
||||||
<Float speed={2} rotationIntensity={0.2} floatIntensity={0.5}>
|
|
||||||
<Image url="/assets/images/cavinkare_shampoo.jpg" scale={[4.5, 4.5]} position={[3, 0, -2]} />
|
|
||||||
</Float>
|
|
||||||
|
|
||||||
<Float speed={2} rotationIntensity={0.2} floatIntensity={0.5}>
|
|
||||||
<Image url="/assets/images/meera_herbal.jpg" scale={[4.5, 4.5]} position={[-3, -9.5, -2]} />
|
|
||||||
</Float>
|
|
||||||
|
|
||||||
<Float speed={2} rotationIntensity={0.2} floatIntensity={0.5}>
|
|
||||||
<Image url="/assets/images/cavins_milkshake.jpg" scale={[4.5, 4.5]} position={[3, -19.5, -2]} />
|
|
||||||
</Float>
|
|
||||||
</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="max-w-4xl p-10 rounded-[2.5rem] bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50">
|
|
||||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/20 backdrop-blur-md mb-8">
|
|
||||||
<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 bg-clip-text text-transparent bg-gradient-to-r from-white via-zinc-200 to-zinc-500">
|
|
||||||
Titan 3D.
|
|
||||||
</h1>
|
|
||||||
<p className="text-xl md:text-2xl text-zinc-300 max-w-2xl mb-10 font-light">
|
|
||||||
Bring your products to life with interactive 3D visualization. Empower your customers to configure, customize, and explore in real-time.
|
|
||||||
</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 Configuring
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</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">
|
|
||||||
<div className="p-10 rounded-[2.5rem] bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-end">
|
|
||||||
<h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-12 max-w-3xl">
|
|
||||||
Stunning <span className="text-primary">Visuals</span>.
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="flex flex-col gap-6 max-w-xl">
|
|
||||||
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md hover:bg-white/15 transition-all cursor-default">
|
|
||||||
<div className="text-left">
|
|
||||||
<h3 className="text-2xl font-bold mb-2">Photorealistic Rendering</h3>
|
|
||||||
<p className="text-zinc-300">Experience uncompromised visual quality with advanced PBR materials and real-time lighting.</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-16 h-16 rounded-full bg-primary/20 border border-primary/30 flex items-center justify-center shrink-0">
|
|
||||||
<Layers className="text-primary" size={32} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-end gap-6 p-6 rounded-2xl bg-white/10 border border-white/20 backdrop-blur-md hover:bg-white/15 transition-all cursor-default">
|
|
||||||
<div className="text-left">
|
|
||||||
<h3 className="text-2xl font-bold mb-2">Seamless Integration</h3>
|
|
||||||
<p className="text-zinc-300">Embed the 3D configurator directly into your e-commerce platform with a single line of code.</p>
|
|
||||||
</div>
|
|
||||||
<div className="w-16 h-16 rounded-full bg-blue-500/20 border border-blue-500/30 flex items-center justify-center shrink-0">
|
|
||||||
<Zap className="text-blue-400" size={32} />
|
|
||||||
</div>
|
|
||||||
</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" />
|
|
||||||
|
|
||||||
<div className="relative z-10 p-16 rounded-[3rem] bg-black/40 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-center">
|
|
||||||
<Globe size={64} className="text-blue-400 mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(96,165,250,0.5)]" />
|
|
||||||
<h2 className="text-6xl md:text-8xl font-bold tracking-tighter mb-6">
|
|
||||||
Ready to Transform?
|
|
||||||
</h2>
|
|
||||||
<p className="text-2xl text-zinc-300 max-w-2xl mb-12">
|
|
||||||
Join hundreds of brands using Titan 3D to boost engagement and drive conversions.
|
|
||||||
</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 shadow-xl"
|
|
||||||
>
|
|
||||||
Book a Demo
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Scroll>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -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<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}>
|
|
||||||
|
|
||||||
{/* 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>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
+214
-14
@@ -1,20 +1,220 @@
|
|||||||
import { Canvas } from '@react-three/fiber';
|
import { useAuthStore } from '../store/authStore';
|
||||||
import { ScrollControls } from '@react-three/drei';
|
import { Box, Layers, Zap, Globe, Sparkles, Wand2, Image as ImageIcon, BoxSelect, ArrowRight } from 'lucide-react';
|
||||||
import { Scene } from '../components/home/Scene';
|
import { useEffect, useState } from 'react';
|
||||||
import { Overlay } from '../components/home/Overlay';
|
|
||||||
import { Suspense } from 'react';
|
|
||||||
|
|
||||||
export default function Home() {
|
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 (
|
return (
|
||||||
<div className="w-screen h-screen bg-zinc-950 overflow-hidden">
|
<div className="min-h-screen bg-zinc-950 text-white font-sans selection:bg-primary/30">
|
||||||
<Canvas shadows camera={{ position: [0, 0, 10], fov: 45 }}>
|
|
||||||
<Suspense fallback={null}>
|
{/* Navbar */}
|
||||||
<ScrollControls pages={3} damping={0.2}>
|
<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'}`}>
|
||||||
<Scene />
|
<div className="flex items-center gap-2 font-bold text-2xl tracking-tighter">
|
||||||
<Overlay />
|
<Box className="text-primary" /> Titan<span className="text-primary">3d</span>
|
||||||
</ScrollControls>
|
</div>
|
||||||
</Suspense>
|
<div className="flex gap-4">
|
||||||
</Canvas>
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user