Update src/app/page.tsx

src/app/page.tsx

@@ -11,6 +11,124 @@ import TestimonialCardFifteen from '@/components/sections/testimonial/Testimonia
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Award, Crown, Gem, Shield, Sparkles, Star, Wind, Zap } from 'lucide-react';
+import { useEffect, useRef } from 'react';
+
+const ProductFloat3D = ({ id, name, price }) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    
+    const container = containerRef.current;
+    if (!container) return;
+
+    // Create 3D animated cream element with floating motion
+    const canvas = document.createElement('canvas');
+    canvas.width = container.clientWidth || 400;
+    canvas.height = container.clientHeight || 400;
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    container.appendChild(canvas);
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    let animationFrameId;
+    let time = 0;
+
+    const render = () => {
+      time += 0.01;
+      
+      // Clear canvas with gradient
+      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
+      gradient.addColorStop(0, '#1a1a2e');
+      gradient.addColorStop(1, '#16213e');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Draw floating sphere (cream product)
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const radius = 80;
+      
+      // Floating motion
+      const floatX = Math.sin(time * 0.5) * 20;
+      const floatY = Math.cos(time * 0.4) * 25;
+      
+      // Draw main sphere with 3D effect
+      const sphereGradient = ctx.createRadialGradient(
+        centerX + floatX - 30,
+        centerY + floatY - 30,
+        0,
+        centerX + floatX,
+        centerY + floatY,
+        radius
+      );
+      sphereGradient.addColorStop(0, '#f5e6d3');
+      sphereGradient.addColorStop(0.5, '#e8d4b8');
+      sphereGradient.addColorStop(1, '#d4b89a');
+      
+      ctx.fillStyle = sphereGradient;
+      ctx.beginPath();
+      ctx.arc(centerX + floatX, centerY + floatY, radius, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Add shine/highlight
+      const shineGradient = ctx.createRadialGradient(
+        centerX + floatX - 35,
+        centerY + floatY - 35,
+        0,
+        centerX + floatX,
+        centerY + floatY,
+        radius
+      );
+      shineGradient.addColorStop(0, 'rgba(255, 255, 255, 0.6)');
+      shineGradient.addColorStop(0.5, 'rgba(255, 255, 255, 0.1)');
+      shineGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+      
+      ctx.fillStyle = shineGradient;
+      ctx.beginPath();
+      ctx.arc(centerX + floatX, centerY + floatY, radius * 0.6, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Rotating particles around sphere
+      const particleCount = 12;
+      for (let i = 0; i < particleCount; i++) {
+        const angle = (i / particleCount) * Math.PI * 2 + time * 0.3;
+        const distance = radius + 50;
+        const px = centerX + floatX + Math.cos(angle) * distance;
+        const py = centerY + floatY + Math.sin(angle) * distance;
+        
+        const particleSize = 3 + Math.sin(time + i) * 2;
+        ctx.fillStyle = `rgba(212, 175, 55, ${0.5 + Math.sin(time + i) * 0.3})`;
+        ctx.beginPath();
+        ctx.arc(px, py, particleSize, 0, Math.PI * 2);
+        ctx.fill();
+      }
+
+      // Pulsing glow effect
+      const glowIntensity = 0.3 + Math.sin(time * 0.5) * 0.2;
+      ctx.strokeStyle = `rgba(212, 175, 55, ${glowIntensity})`;
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.arc(centerX + floatX, centerY + floatY, radius + 10, 0, Math.PI * 2);
+      ctx.stroke();
+
+      animationFrameId = requestAnimationFrame(render);
+    };
+
+    render();
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+      canvas.remove();
+    };
+  }, []);
+
+  return (
+    <div ref={containerRef} className="w-full h-full bg-gradient-to-b from-slate-900 to-slate-950 rounded-lg overflow-hidden" />
+  );
+};
 
 export default function LandingPage() {
   return (
@@ -103,6 +221,31 @@ export default function LandingPage() {
         />
       </div>
 
+      <div className="relative py-20 px-6 bg-gradient-to-b from-slate-900 to-slate-950">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#d4af37] to-[#f5e6d3] mb-4">Interactive 3D Cream Collections</h2>
+            <p className="text-lg text-gray-300 max-w-2xl mx-auto">Experience our luxury cream products with interactive 3D animations and floating motion effects</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="h-96 rounded-xl overflow-hidden shadow-2xl">
+              <ProductFloat3D id="cream-1" name="Premium Luxury Cream" price="$245,000" />
+            </div>
+            <div className="h-96 rounded-xl overflow-hidden shadow-2xl">
+              <ProductFloat3D id="cream-2" name="Exclusive Gold Cream" price="$189,500" />
+            </div>
+            <div className="h-96 rounded-xl overflow-hidden shadow-2xl">
+              <ProductFloat3D id="cream-3" name="Elite Pearl Cream" price="$267,800" />
+            </div>
+          </div>
+          <div className="text-center mt-12">
+            <a href="https://preview.webild.dev" target="_blank" rel="noopener noreferrer" className="inline-block px-8 py-3 bg-gradient-to-r from-[#d4af37] to-[#c9a961] text-slate-900 font-semibold rounded-full hover:shadow-lg transition-shadow">
+              View Full Preview →
+            </a>
+          </div>
+        </div>
+      </div>
+
       <div id="about" data-section="about">
         <TextAbout
           tag="Heritage & Excellence"