feat: replace heavy 3d models with parallax product images

src/components/home/Overlay.tsx

@@ -1,4 +1,4 @@
-import { Scroll, Image } from '@react-three/drei';
+import { Scroll, Image, Float } from '@react-three/drei';
 import { useAuthStore } from '../../store/authStore';
 import { Box, Layers, Zap, Globe, Sparkles } from 'lucide-react';
 
@@ -9,9 +9,20 @@ export function Overlay() {
     <>
       {/* 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_hero.png" scale={[16, 10]} position={[0, 0, -8]} transparent opacity={0.2} />
-        <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} />
+        {/* 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 */}
@@ -31,51 +42,51 @@ export function Overlay() {
 
         {/* 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/30 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50">
+          <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>
+              <span className="text-sm font-medium">Premium Care Collection</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">
-              Build The Future in 3D.
+              CavinKare.
             </h1>
             <p className="text-xl md:text-2xl text-zinc-300 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.
+              Experience the fusion of natural purity and luxurious care. Explore our exclusive range of hair and skin wellness products.
             </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
+              Explore Products
             </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/30 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-end">
+          <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">
-              Unleash Unprecedented <span className="text-blue-400">Power</span>.
+              Goodness of <span className="text-green-400">Herbs</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">Real-time Rendering</h3>
+                  <h3 className="text-2xl font-bold mb-2">Meera Hairwash</h3>
-                  <p className="text-zinc-300">Experience photorealistic materials and lighting instantly.</p>
+                  <p className="text-zinc-300">Tradition passed down through generations for strong, healthy hair.</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">
+                <div className="w-16 h-16 rounded-full bg-green-500/20 border border-green-500/30 flex items-center justify-center shrink-0">
-                  <Layers className="text-blue-400" size={32} />
+                  <Layers className="text-green-400" 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">AI Asset Generation</h3>
+                  <h3 className="text-2xl font-bold mb-2">Natural Ingredients</h3>
-                  <p className="text-zinc-300">Turn text prompts into high-fidelity 3D models in seconds.</p>
+                  <p className="text-zinc-300">Shikakai, Reetha, and Amla extracts for natural nourishment.</p>
                 </div>
-                <div className="w-16 h-16 rounded-full bg-purple-500/20 border border-purple-500/30 flex items-center justify-center shrink-0">
+                <div className="w-16 h-16 rounded-full bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center shrink-0">
-                  <Zap className="text-purple-400" size={32} />
+                  <Zap className="text-emerald-400" size={32} />
                 </div>
               </div>
             </div>
@@ -86,19 +97,19 @@ export function Overlay() {
         <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/30 backdrop-blur-xl border border-white/10 shadow-2xl shadow-black/50 flex flex-col items-center">
+          <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-emerald-400 mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(52,211,153,0.5)]" />
+            <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 Deploy?
+              Sip The Joy.
             </h2>
             <p className="text-2xl text-zinc-300 max-w-2xl mb-12">
-              Join elite creators building the next generation of spatial computing experiences.
+              Delicious Cavin's milkshakes enriched with the goodness of pure milk.
             </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"
             >
-              Create Your Workspace
+              Order Now
             </button>
           </div>
         </section>

src/components/home/Scene.tsx

@@ -2,7 +2,6 @@ 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);
@@ -28,9 +27,6 @@ export function Scene() {
 
       {/* 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" />