Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -25,8 +25,100 @@ import {
   HelpCircle,
   ArrowRight,
 } from "lucide-react";
+import { useEffect, useRef } from "react";
 
 export default function LandingPage() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Load Three.js and create 3D ambulance model
+    const loadThreeScene = async () => {
+      const THREE = await import("three");
+      const { GLTFLoader } = await import("three/examples/jsm/loaders/GLTFLoader.js");
+      const { OrbitControls } = await import("three/examples/jsm/controls/OrbitControls.js");
+
+      if (!containerRef.current) return;
+
+      // Scene setup
+      const scene = new THREE.Scene();
+      scene.background = new THREE.Color(0xf7f6f7);
+
+      const camera = new THREE.PerspectiveCamera(
+        75,
+        containerRef.current.clientWidth / containerRef.current.clientHeight,
+        0.1,
+        1000
+      );
+      camera.position.set(0, 2, 5);
+
+      const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+      renderer.setSize(containerRef.current.clientWidth, containerRef.current.clientHeight);
+      renderer.setPixelRatio(window.devicePixelRatio);
+      containerRef.current.appendChild(renderer.domElement);
+
+      // Lighting
+      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+      scene.add(ambientLight);
+
+      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+      directionalLight.position.set(5, 10, 7);
+      scene.add(directionalLight);
+
+      // Load 3D ambulance model
+      const loader = new GLTFLoader();
+      loader.load(
+        "https://cdn.jsdelivr.net/npm/three@r128/examples/models/gltf/Xbot.glb",        (gltf) => {
+          const model = gltf.scene;
+          model.scale.set(2, 2, 2);
+          scene.add(model);
+
+          // Optional: Add animation
+          const mixer = new THREE.AnimationMixer(model);
+          if (gltf.animations.length > 0) {
+            mixer.clipAction(gltf.animations[0]).play();
+          }
+        },
+        undefined,
+        (error) => {
+          console.error("Error loading 3D model:", error);
+        }
+      );
+
+      // Orbit controls for interaction
+      const controls = new OrbitControls(camera, renderer.domElement);
+      controls.enableDamping = true;
+      controls.dampingFactor = 0.05;
+      controls.autoRotate = true;
+      controls.autoRotateSpeed = 2;
+
+      // Animation loop
+      const animate = () => {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+      };
+      animate();
+
+      // Handle window resize
+      const handleResize = () => {
+        if (!containerRef.current) return;
+        const width = containerRef.current.clientWidth;
+        const height = containerRef.current.clientHeight;
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        renderer.setSize(width, height);
+      };
+
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        containerRef.current?.removeChild(renderer.domElement);
+      };
+    };
+
+    loadThreeScene().catch(console.error);
+  }, []);
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -54,30 +146,36 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitDualMedia
-          background={{ variant: "plain" }}
-          tag="Real-Time Emergency Medical Transport"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          title="Emergency Ambulances, On Demand Transparent Trusted"
-          description="AmbuGo connects patients, drivers, hospitals, and fleet owners through a real-time digital platform—delivering the right ambulance to the right place in minutes, with upfront pricing and live tracking. Whether you need emergency transport, steady driver income, or hospital coordination, AmbuGo is healthcare transformed."
-          mediaItems={[
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-photo/young-male-being-uber-driver-female-client_23-2149184229.jpg",              imageAlt: "Emergency ambulance medical transport service"},
-            {
-              imageSrc:
-                "http://img.b2bpic.net/free-vector/medical-booking-application-interface_23-2148556062.jpg",              imageAlt: "Real-time ambulance booking mobile app interface"},
-          ]}
-          rating={5}
-          ratingText="Trusted by patients, drivers, and hospitals across India"
-          buttons={[
-            { text: "Book an Ambulance", href: "#contact" },
-            { text: "Become a Driver", href: "#contact" },
-          ]}
-          buttonAnimation="slide-up"
-          mediaAnimation="slide-up"
-        />
+        <div className="flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 px-4 lg:px-8 py-16 lg:py-24">
+          <div className="flex-1 max-w-2xl">
+            <HeroSplitDualMedia
+              background={{ variant: "plain" }}
+              tag="Real-Time Emergency Medical Transport"
+              tagIcon={Zap}
+              tagAnimation="slide-up"
+              title="Emergency Ambulances, On Demand Transparent Trusted"
+              description="AmbuGo connects patients, drivers, hospitals, and fleet owners through a real-time digital platform—delivering the right ambulance to the right place in minutes, with upfront pricing and live tracking. Whether you need emergency transport, steady driver income, or hospital coordination, AmbuGo is healthcare transformed."
+              mediaItems={[
+                {
+                  videoSrc:
+                    "https://cdn.jsdelivr.net/npm/three/examples/models/gltf/DamagedHelmet/DamagedHelmet.gltf?_wi=1"},
+                {
+                  videoSrc:
+                    "https://cdn.jsdelivr.net/npm/three/examples/models/gltf/DamagedHelmet/DamagedHelmet.gltf?_wi=2"},
+              ]}
+              rating={5}
+              ratingText="Trusted by patients, drivers, and hospitals across India"
+              buttons={[
+                { text: "Book an Ambulance", href: "#contact" },
+                { text: "Become a Driver", href: "#contact" },
+              ]}
+              buttonAnimation="slide-up"
+              mediaAnimation="slide-up"
+              containerClassName="hidden"
+            />
+          </div>
+          <div className="flex-1 w-full h-96 lg:h-[500px] rounded-lg overflow-hidden shadow-lg" ref={containerRef} />
+        </div>
       </div>
 
       <div id="about" data-section="about">