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,38 +146,43 @@ 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={[
-            {
-              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"
-        />
+        <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">
         <TextSplitAbout
           title="A Platform Built for Every Stakeholder"
           description={[
-            "AmbuGo isn't just an ambulance booking app—it's an ecosystem. We connect patients seeking urgent care, drivers building stable livelihoods, fleet owners optimizing operations, and hospitals coordinating incoming emergencies in real-time. Our platform eliminates the friction, uncertainty, and delays that plague emergency medical transportation across India.",            "With upfront pricing, live GPS tracking, and instant driver-hospital communication, every stakeholder gains clarity, speed, and reliability. Founded on the principle that quality emergency care should be accessible, transparent, and equitable, AmbuGo is reshaping emergency medical transport one ride at a time."
-          ]}
+            "AmbuGo isn't just an ambulance booking app—it's an ecosystem. We connect patients seeking urgent care, drivers building stable livelihoods, fleet owners optimizing operations, and hospitals coordinating incoming emergencies in real-time. Our platform eliminates the friction, uncertainty, and delays that plague emergency medical transportation across India.",            "With upfront pricing, live GPS tracking, and instant driver-hospital communication, every stakeholder gains clarity, speed, and reliability. Founded on the principle that quality emergency care should be accessible, transparent, and equitable, AmbuGo is reshaping emergency medical transport one ride at a time."]}
           buttons={[
             { text: "Learn Our Story", href: "#" },
           ]}