mohanki/titan3d_react_node_sqllite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete redesign of the Titan3D homepage with new assets
Build and Deploy / build-and-push (push) Failing after 52s
Details

Browse Source
This commit is contained in:
AI Bot
2026-09-01 15:05:54 +05:30
parent 032456cbd3
commit 643902e73c
7 changed files with 214 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/Models.tsx
-83
View File
@@ -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>
);
}
src/components/home/Overlay.tsx
-119
View File
@@ -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>
</>
);
}
src/components/home/Scene.tsx
-42
View File
@@ -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>
</>
);
}