bender/cbee2b8c-cb2e-4484-ab76-0525c6276bd6
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-10 02:33:01 +00:00
parent fac660fa2d
commit e7c4e4bd0e
1 changed files with 122 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/app/page.tsx
View File

@@ -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">