From e7c4e4bd0e600cacd4cce84ef51561eea67dcb19 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Tue, 10 Mar 2026 02:33:01 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 146 +++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 122 insertions(+), 24 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c9b55f0..5f8f443 100644
--- a/src/app/page.tsx
+++ b/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">