+
diff --git a/src/components/home/OperationalPlan.tsx b/src/components/home/OperationalPlan.tsx
deleted file mode 100644
index b63c262..0000000
--- a/src/components/home/OperationalPlan.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { SectionHeader } from '@/components/ui/SectionHeader'
-import { GlassCard } from '@/components/ui/GlassCard'
-import { Badge } from '@/components/ui/Badge'
-import { fadeUp, staggerContainer, viewportConfig } from '@/lib/animations'
-
-type RoadmapStep = {
- phase: string
- title: string
- desc: string
- metrics: string[]
- icon: string
- status: 'completed' | 'current' | 'upcoming'
-}
-
-const ROADMAP: RoadmapStep[] = [
- {
- phase: 'Phase 01',
- title: 'Society Geofencing',
- desc: 'Cooperative societies sign partnership agreements. Geofences are digitally matching with strict boundary lines.',
- metrics: ['99.8% Geofence Accuracy', 'Escrow Account Mappings', 'Resident Onboarding'],
- icon: '🗺️',
- status: 'completed',
- },
- {
- phase: 'Phase 02',
- title: 'Merchant Integration',
- desc: 'Onboarding nearby grocery shops, premium restaurants, pharmacies, and trusted home service professionals.',
- metrics: ['Catalog Editor Sync', 'Fast Merchant Approvals', 'API Device Activation'],
- icon: '🏪',
- status: 'current',
- },
- {
- phase: 'Phase 03',
- title: 'Fleet Calibration',
- desc: 'Activating Nearle Gear delivery riders. Dispatch rules are optimized with real-time navigation tools.',
- metrics: ['Optimal Path Training', 'Equipment Issuance', 'Payout System Verified'],
- icon: '🛵',
- status: 'upcoming',
- },
- {
- phase: 'Phase 04',
- title: 'Go-Live society Launch',
- desc: 'Platform soft launch within the geofenced society limits accompanied by exclusive society discounts.',
- metrics: ['Society Launch Event', 'Support Centers Active', '12-Minute Deliveries'],
- icon: '🔮',
- status: 'upcoming',
- },
-]
-
-export function OperationalPlan() {
- const [activeStep, setActiveStep] = useState
(1) // Default to active step (Phase 02)
-
- return (
-
- {/* Decorative vectors */}
-
-
-
-
- Our Operational
-
- Launch Roadmap
-
-
- }
- sub="Watch how Nearle systematically activates cooperative societies and curates merchant networks."
- align="center"
- className="mb-16 sm:mb-20"
- />
-
-
- {/* Timeline side controls (5 cols) */}
-
- {ROADMAP.map((step, idx) => {
- const isActive = activeStep === idx
- return (
-
setActiveStep(idx)}
- className={`text-left p-5 rounded-2xl border transition-all duration-300 focus:outline-none flex items-center justify-between ${
- isActive
- ? 'bg-purple-deep text-white border-purple-deep shadow-nearle-md'
- : 'bg-white border-nearle-border hover:border-purple-primary text-nearle-dark'
- }`}
- >
-
-
{step.icon}
-
-
- {step.phase}
-
-
- {step.title}
-
-
-
- Completed
-
- )}
- {step.status === 'current' && (
-
- Active
-
- )}
-
- )
- })}
-
-
- {/* Timeline detail container (7 cols) */}
-
-
-
-
-
-
- Active Operational phase
-
-
- {ROADMAP[activeStep]!.title}
-
-
- {ROADMAP[activeStep]!.desc}
-
-
-
- Key Deliverables & Metrics
-
-
-
- {ROADMAP[activeStep]!.metrics.map((metric) => (
-
-
- {metric}
-
-
- ))}
-
-
-
- * Launch timings subject to merchant onboarding rate and society density geofencing tests.
-
-
-
-
-
-
-
- {displayed}
-
- )
-}
-
-function DetailsCard({ activeNode, activeIndex }: { activeNode: Node; activeIndex: number }) {
- const [rotate, setRotate] = useState({ x: 0, y: 0 })
- const [shine, setShine] = useState({ x: 0, y: 0, opacity: 0 })
-
- function handleMouseMove(e: React.MouseEvent) {
- const el = e.currentTarget
- const r = el.getBoundingClientRect()
- const x = e.clientX - r.left
- const y = e.clientY - r.top
-
- // Smooth angle calculations (tilt range -6 to 6 deg)
- const rx = -((y / r.height) - 0.5) * 12
- const ry = ((x / r.width) - 0.5) * 12
-
- setRotate({ x: rx, y: ry })
- setShine({ x, y, opacity: 0.15 })
- }
-
- function handleMouseLeave() {
- setRotate({ x: 0, y: 0 })
- setShine({ x: 0, y: 0, opacity: 0 })
- }
-
- return (
-
- {/* Light shine overlay */}
-
-
-
-
- Step 0{activeIndex + 1} of 06
-
-
- {activeNode.metric}
-
-
-
-
- {activeNode.title}
-
-
-
- {activeNode.desc}
-
-
-
-
-
- )
-}
-
-export function OrderLifecycle() {
- const [active, setActive] = useState(0)
- const [prevActive, setPrevActive] = useState(0)
- const [tilt, setTilt] = useState(0)
-
- useEffect(() => {
- const id = setInterval(() => {
- setActive((a) => (a + 1) % NODES.length)
- }, 4500)
- return () => clearInterval(id)
- }, [])
-
- useEffect(() => {
- if (active > prevActive) {
- setTilt(12) // Lean forward
- const t = setTimeout(() => setTilt(0), 650)
- return () => clearTimeout(t)
- } else if (active < prevActive) {
- setTilt(-12) // Lean backward
- const t = setTimeout(() => setTilt(0), 650)
- return () => clearTimeout(t)
- }
- }, [active, prevActive])
-
- // Track previous step to identify travel direction
- useEffect(() => {
- setPrevActive(active)
- }, [active])
-
- return (
-
-
-
-
-
-
-
- {/* Animated 3D/gliding road track for desktop views */}
-
-
-
-
-
-
- {/* Ground Road Track */}
-
-
- {/* Gliding scooter rider on road */}
-
-
-
- {active === 0 && '📱'}
- {active === 1 && '🏪'}
- {active === 2 && '📦'}
- {active === 3 && '💳'}
- {active === 4 && '🛵'}
- {active === 5 && '🛵'}
-
-
-
-
-
-
- {NODES.map((node, i) => (
- {
- setPrevActive(active)
- setActive(i)
- }}
- >
-
-
- {node.icon}
-
- {i === active && (
- <>
-
-
- Step 0{i + 1}
-
-
- {node.title}
-
-
- ))}
-
-
-
-
-
-
- {/* Decorative Blob */}
-
-
-
-
- Powering Cooperative
-
- Living at Scale
-
-
- }
- sub="Our growing network makes sure that residents get access to everything they need quickly and reliably."
- align="center"
- className="mb-16 sm:mb-20"
- />
-
-
- {STATS.map((stat) => (
-
-
-
-
{stat.icon}
-
- {stat.value}
-
-
- {stat.label}
-
-
- {stat.desc}
-
-
-
- ))}
-
-
-
Your Neighbourhood, Your World.
-
diff --git a/src/components/three/CityRider3D.tsx b/src/components/three/CityRider3D.tsx
deleted file mode 100644
index d0ab5a7..0000000
--- a/src/components/three/CityRider3D.tsx
+++ /dev/null
@@ -1,1245 +0,0 @@
-'use client'
-
-import { useMemo, useRef, useEffect, useState, forwardRef } from 'react'
-import { Canvas, useFrame, useThree } from '@react-three/fiber'
-import * as THREE from 'three'
-
-const DEEP = '#683285'
-const PRIMARY = '#A467B7'
-const LAVENDER = '#E0CDEB'
-const BUILDING_LIGHT = '#C8CBD2'
-const BUILDING_MID = '#A8ACB4'
-const WINDOW_DARK = '#4B5563'
-const SIDEWALK = '#F1F2F4'
-const ROAD = '#10131C'
-const GRID_LINE = '#FFFFFF'
-const SKY = '#EEF0F4'
-const AWNING = '#DC2626'
-
-const BACKGROUND_SCROLL_SPEED = 4.0
-
-function Windows({ size, glow = false }: { size: [number, number, number]; glow?: boolean }) {
- const cols = 3
- const rows = Math.max(3, Math.floor(size[1] * 0.55))
- const items: Array<{ x: number; y: number }> = []
- for (let r = 0; r < rows; r++) {
- for (let c = 0; c < cols; c++) {
- items.push({
- x: (c - (cols - 1) / 2) * (size[2] * 0.22),
- y: (r - (rows - 1) / 2) * (size[1] * 0.22) + 0.4,
- })
- }
- }
-
- return (
-
- {/* Front/Right Face Windows */}
-
- {items.map((p, i) => (
-
- {/* Realistic Window Frame */}
-
-
- {/* Glowing glass plane */}
-
-
-
- ))}
-
- {/* Back/Left Face Windows */}
-
- {items.map((p, i) => (
-
-
-
-
-
-
- ))}
-
-
- )
-}
-
-function Skyscraper({
- position,
- size,
- color = "#1E293B",
-}: {
- position: [number, number, number]
- size: [number, number, number]
- color?: string
-}) {
- const colWidth = 0.16
-
- const billboardTexture = useMemo(() => {
- if (typeof window === 'undefined') return null
- const canvas = document.createElement('canvas')
- canvas.width = 128
- canvas.height = 256
- const ctx = canvas.getContext('2d')
- if (ctx) {
- // Dark cyber background
- ctx.fillStyle = '#0F172A'
- ctx.fillRect(0, 0, 128, 256)
- // Neon glow border
- ctx.strokeStyle = '#A78BFA'
- ctx.lineWidth = 8
- ctx.strokeRect(4, 4, 120, 248)
- // Text "NEARLE"
- ctx.fillStyle = '#FFFFFF'
- ctx.font = 'bold 24px sans-serif'
- ctx.textAlign = 'center'
- ctx.textBaseline = 'middle'
- ctx.fillText('NEARLE', 64, 50)
-
- // Neon graphics
- ctx.strokeStyle = '#F472B6'
- ctx.lineWidth = 4
- ctx.strokeRect(39, 90, 50, 50)
- ctx.beginPath()
- ctx.arc(64, 90, 15, Math.PI, 0)
- ctx.stroke()
-
- ctx.fillStyle = '#10B981'
- ctx.font = 'bold 20px sans-serif'
- ctx.fillText('LIVE', 64, 180)
- ctx.fillStyle = '#FEF3C7'
- ctx.font = 'bold 16px sans-serif'
- ctx.fillText('24/7', 64, 210)
- }
- return new THREE.CanvasTexture(canvas)
- }, [])
-
- return (
-
- {/* Skyscraper Core Glass Facade */}
-
-
-
- {/* Structural Corner Columns (creates highly realistic 3D depth) */}
-
-
-
-
-
-
-
-
-
- {/* Horizontal banding rings */}
- {Array.from({ length: 4 }).map((_, i) => (
-
-
- ))}
-
- {/* Modern windows */}
-
-
-
-
-
-
-
- {/* Glowing Neon Billboard mounted on the street facade */}
- {billboardTexture && (
-
- {/* Left facing billboard (for left side buildings) */}
-
-
-
- {/* Supporting brackets */}
-
-
-
-
-
- {/* Right facing billboard (for right side buildings) */}
-
-
-
-
-
-
-
-
-
- )}
-
- )
-}
-
-function ApartmentBuilding({
- position,
- size,
- color = "#A8ACB4",
- awningColor = "#A467B7",
-}: {
- position: [number, number, number]
- size: [number, number, number]
- color?: string
- awningColor?: string
-}) {
- return (
-
- {/* Ground Floor Base Block */}
-
-
-
- {/* Decorative window ledges under each window row */}
- {Array.from({ length: 2 }).map((_, i) => (
-
-
- ))}
-
- {/* Windows with glowing frames */}
-
- {/* Positive X (Left street side storefront awning) */}
-
-
- {/* Support brackets */}
-
-
-
-
-
- {/* Negative X (Right street side storefront awning) */}
-
-
-
-
-
-
-
-
- {/* Slanted Tile Roof (Pitched triangular prism roof top) */}
-
-
-
- )
-}
-
-function Building({
- position,
- size,
- color = BUILDING_LIGHT,
- windows = true,
- awning = false,
-}: {
- position: [number, number, number]
- size: [number, number, number]
- color?: string
- windows?: boolean
- awning?: boolean
-}) {
- return (
-
- )
-}
-
-function Lamp() {
- return (
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-function ScrollingLamps({ x, rotationY = 0 }: { x: number; rotationY?: number }) {
- const ref = useRef
(null)
- const startZs = useMemo(() => [-10, -5, 0, 5, 10, 15], [])
- const loopLength = 30
-
- useFrame((_, dt) => {
- if (!ref.current) return
- ref.current.children.forEach((child) => {
- child.position.z += BACKGROUND_SCROLL_SPEED * dt
- if (child.position.z > 15) {
- child.position.z -= loopLength
- }
- })
- })
-
- return (
-
- {startZs.map((z, i) => (
-
-
- ))}
-
- )
-}
-
-interface OncomingCarProps {
- color?: string
- neonColor?: string
- speed?: number
-}
-
-function OncomingCar({ color = "#F1F5F9", neonColor = "#22D3EE", speed = 8.5 }: OncomingCarProps) {
- const frontLeftWheelGroup = useRef(null)
- const frontRightWheelGroup = useRef(null)
- const backLeftWheelGroup = useRef(null)
- const backRightWheelGroup = useRef(null)
-
- useFrame((state, delta) => {
- const dt = Math.max(delta, 1 / 144)
- const spinSpeed = speed * 4.5
- if (frontLeftWheelGroup.current) frontLeftWheelGroup.current.rotation.x += spinSpeed * dt
- if (frontRightWheelGroup.current) frontRightWheelGroup.current.rotation.x += spinSpeed * dt
- if (backLeftWheelGroup.current) backLeftWheelGroup.current.rotation.x += spinSpeed * dt
- if (backRightWheelGroup.current) backRightWheelGroup.current.rotation.x += spinSpeed * dt
- })
-
- return (
-
- {/* Car Main Metallic Chassis */}
-
-
-
- {/* Sleek Aerodynamic Cabin / Windshield (painted body color for ultra-high visibility) */}
-
-
-
- {/* Glowing Cyber Windows / Windshield (front windshield is a glowing cyber visor!) */}
-
-
-
- {/* Glowing Neon Side Accent Trims */}
-
-
-
-
-
- {/* Glowing Headlights facing positive Z (camera!) */}
-
-
-
-
-
- {/* Volumetric Headlight Cones projecting forward (towards the camera) - scaled up and boosted opacity */}
-
-
-
-
-
- {/* Red Tail lights facing negative Z */}
-
-
-
-
-
- {/* 4 Wheels that Spin! */}
- {/* Front Left */}
-
-
-
-
- {/* Wheel Spokes for spin visibility */}
-
-
-
-
- {/* Front Right */}
-
-
-
-
-
-
-
-
- {/* Back Left */}
-
-
-
-
-
-
-
-
- {/* Back Right */}
-
-
-
-
-
-
-
-
-
- )
-}
-
-interface OncomingBikeProps {
- color?: string
- neonColor?: string
- speed?: number
-}
-
-function OncomingBike({ color = "#F97316", neonColor = "#EC4899", speed = 6.8 }: OncomingBikeProps) {
- const frontWheelGroup = useRef(null)
- const backWheelGroup = useRef(null)
-
- useFrame((state, delta) => {
- const dt = Math.max(delta, 1 / 144)
- const spinSpeed = speed * 4.5
- if (frontWheelGroup.current) frontWheelGroup.current.rotation.x += spinSpeed * dt
- if (backWheelGroup.current) backWheelGroup.current.rotation.x += spinSpeed * dt
- })
-
- return (
-
- {/* Front Wheel */}
-
-
-
-
- {/* Wheel Spokes for spin visibility */}
-
-
-
-
-
- {/* Back Wheel */}
-
-
-
-
-
-
-
-
-
- {/* Frame Deck */}
-
-
-
- {/* Front Fork & Handlebars */}
-
-
-
-
-
- {/* Delivery Box (highly visible!) */}
-
-
- {/* Glowing Neon Box Panel */}
-
-
-
- {/* Rider Torso */}
-
-
- {/* Glowing Safety Vest Stripes */}
-
-
-
- {/* Helmet Head */}
-
-
- {/* Visor */}
-
-
-
- {/* Glowing Headlight & Light Cone */}
-
-
-
-
-
- )
-}
-
-function ScrollingTraffic() {
- const ref = useRef(null)
-
- const vehicles = useMemo(
- () => [
- { id: 'v1', type: 'car', z: -15, speed: 8.5, color: '#F8FAFC', neonColor: '#22D3EE' },
- { id: 'v2', type: 'bike', z: -32, speed: 6.8, color: '#F97316', neonColor: '#EC4899' },
- { id: 'v3', type: 'car', z: -48, speed: 9.2, color: '#C084FC', neonColor: '#34D399' },
- { id: 'v4', type: 'bike', z: -64, speed: 7.2, color: '#10B981', neonColor: '#38BDF8' },
- { id: 'v5', type: 'car', z: -80, speed: 7.8, color: '#FB923C', neonColor: '#818CF8' },
- ],
- [],
- )
-
- useFrame((_, dt) => {
- if (!ref.current) return
- ref.current.children.forEach((child, i) => {
- const v = vehicles[i]
- child.position.z += v.speed * dt
-
- // When vehicle passes behind the camera, reset it far in the distance
- // We use 22 because the camera is at z = 8.5
- if (child.position.z > 22) {
- child.position.z = -75 - Math.random() * 20
- }
- })
- })
-
- return (
-
- {vehicles.map((v) => (
-
- {v.type === 'car' ? (
-
- ))}
-
- )
-}
-
-function ScrollingDashes() {
- const ref = useRef(null)
- const startZs = useMemo(
- () => [-12, -9, -6, -3, 0, 3, 6, 9, 12],
- [],
- )
- const loopLength = 27
-
- useFrame((_, dt) => {
- if (!ref.current) return
- ref.current.children.forEach((child) => {
- child.position.z += BACKGROUND_SCROLL_SPEED * dt
- if (child.position.z > 13) {
- child.position.z -= loopLength
- }
- })
- })
-
- return (
-
- {startZs.map((z, i) => (
-
-
- ))}
-
- )
-}
-
-function Road() {
- return (
-
- {/* Asphalt road */}
-
-
-
- {/* Sidewalks */}
-
-
-
-
-
- {/* Sidewalk edge stripes (white) */}
-
-
-
-
-
- {/* Subtle grid on road */}
-
-
-
-
- )
-}
-
-function Wheel({ position, wheelRef }: { position: [number, number, number]; wheelRef: React.RefObject }) {
- return (
-
-
- {/* Tire */}
-
-
- {/* Hub */}
-
-
- {/* Spokes */}
- {Array.from({ length: 5 }).map((_, i) => (
-
-
- ))}
-
-
- )
-}
-
-const Rider = forwardRef(({ scrollProgress }, ref) => {
- const legL = useRef(null)
- const legR = useRef(null)
- const armR = useRef(null)
- const frontWheelRef = useRef(null)
- const backWheelRef = useRef(null)
- const hudRef = useRef(null)
-
- const brandTexture = useMemo(() => {
- if (typeof window === 'undefined') return null
- const canvas = document.createElement('canvas')
- canvas.width = 256
- canvas.height = 256
- const ctx = canvas.getContext('2d')
- if (ctx) {
- // Dark slate background
- ctx.fillStyle = '#0F172A'
- ctx.fillRect(0, 0, 256, 256)
- // Neon green glowing border
- ctx.strokeStyle = '#10B981'
- ctx.lineWidth = 14
- ctx.strokeRect(7, 7, 242, 242)
- // Inner glowing purple border
- ctx.strokeStyle = '#8B5CF6'
- ctx.lineWidth = 6
- ctx.strokeRect(18, 18, 220, 220)
-
- // Text "NEARLE"
- ctx.shadowColor = '#10B981'
- ctx.shadowBlur = 20
- ctx.fillStyle = '#FFFFFF'
- ctx.font = 'bold 50px sans-serif'
- ctx.textAlign = 'center'
- ctx.textBaseline = 'middle'
- ctx.fillText('NEARLE', 128, 128)
- }
- const texture = new THREE.CanvasTexture(canvas)
- return texture
- }, [])
-
- const avatarTexture = useMemo(() => {
- if (typeof window === 'undefined') return null
- const canvas = document.createElement('canvas')
- canvas.width = 256
- canvas.height = 256
- const ctx = canvas.getContext('2d')
- if (ctx) {
- // Circular clip for avatar
- ctx.beginPath()
- ctx.arc(128, 128, 120, 0, Math.PI * 2)
- ctx.clip()
-
- // Gradient background
- const grad = ctx.createLinearGradient(0, 0, 256, 256)
- grad.addColorStop(0, '#7C3AED') // Violet
- grad.addColorStop(1, '#10B981') // Green
- ctx.fillStyle = grad
- ctx.fillRect(0, 0, 256, 256)
-
- // Outer neon border
- ctx.strokeStyle = '#FFFFFF'
- ctx.lineWidth = 10
- ctx.beginPath()
- ctx.arc(128, 128, 118, 0, Math.PI * 2)
- ctx.stroke()
-
- // Draw avatar face (procedural cute vector!)
- // Helmet circle
- ctx.fillStyle = '#1F1B2E'
- ctx.beginPath()
- ctx.arc(128, 100, 55, 0, Math.PI * 2)
- ctx.fill()
-
- // Face circle
- ctx.fillStyle = '#FBCFE8' // Peach face
- ctx.beginPath()
- ctx.arc(128, 115, 38, 0, Math.PI)
- ctx.fill()
-
- // Visor
- ctx.fillStyle = '#0F172A' // Dark visor
- ctx.fillRect(98, 85, 60, 25)
- // Visor shine reflection
- ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
- ctx.beginPath()
- ctx.moveTo(105, 85)
- ctx.lineTo(125, 85)
- ctx.lineTo(115, 110)
- ctx.lineTo(98, 110)
- ctx.closePath()
- ctx.fill()
-
- // Safety jacket collar
- ctx.fillStyle = '#8B5CF6'
- ctx.beginPath()
- ctx.moveTo(78, 220)
- ctx.lineTo(178, 220)
- ctx.lineTo(148, 160)
- ctx.lineTo(108, 160)
- ctx.closePath()
- ctx.fill()
-
- // Neon yellow safety vest strap
- ctx.fillStyle = '#10B981'
- ctx.fillRect(98, 175, 14, 45)
- ctx.fillRect(144, 175, 14, 45)
-
- // Friendly smile eyes below visor
- ctx.strokeStyle = '#1F1B2E'
- ctx.lineWidth = 4
- ctx.lineCap = 'round'
- ctx.beginPath()
- ctx.arc(113, 125, 6, 0, Math.PI, false) // Left eye smile
- ctx.stroke()
- ctx.beginPath()
- ctx.arc(143, 125, 6, 0, Math.PI, false) // Right eye smile
- ctx.stroke()
-
- // Happy mouth smile
- ctx.beginPath()
- ctx.arc(128, 138, 8, 0, Math.PI, false)
- ctx.stroke()
- }
- const texture = new THREE.CanvasTexture(canvas)
- return texture
- }, [])
-
- const ratingTexture = useMemo(() => {
- if (typeof window === 'undefined') return null
- const canvas = document.createElement('canvas')
- canvas.width = 128
- canvas.height = 64
- const ctx = canvas.getContext('2d')
- if (ctx) {
- // Rounded background capsule
- ctx.fillStyle = 'rgba(16, 185, 129, 0.95)' // Glowing neon green
- ctx.beginPath()
- ctx.roundRect(4, 4, 120, 56, 15)
- ctx.fill()
-
- // Star and text
- ctx.fillStyle = '#FFFFFF'
- ctx.font = 'bold 22px sans-serif'
- ctx.textAlign = 'center'
- ctx.textBaseline = 'middle'
- ctx.fillText('5.0 ★', 64, 32)
- }
- const texture = new THREE.CanvasTexture(canvas)
- return texture
- }, [])
-
- useFrame((state, delta) => {
- const t = state.clock.getElapsedTime()
- const dt = Math.max(delta, 1 / 144)
-
- const groupRef = ref as React.RefObject
- if (!groupRef || !groupRef.current) return
-
- // Gentle drift along the road as the user scrolls the page (driving strictly on the left-hand lane)
- const targetZ = 6 - scrollProgress * 14
- const targetX = -2.4 - Math.sin(scrollProgress * Math.PI * 2.2) * 0.45
-
- groupRef.current.position.z += (targetZ - groupRef.current.position.z) * 0.08
- groupRef.current.position.x += (targetX - groupRef.current.position.x) * 0.08
-
- const deltaX = targetX - groupRef.current.position.x
- const targetRotationZ = -deltaX * 0.35
- groupRef.current.rotation.z += (targetRotationZ - groupRef.current.rotation.z) * 0.1
-
- // Subtle bob + pedalling
- groupRef.current.position.y = 0.04 + Math.sin(t * 9) * 0.015
- if (legL.current) legL.current.rotation.x = Math.PI / 8 + Math.sin(t * 11) * 0.22
- if (legR.current) legR.current.rotation.x = -Math.PI / 8 - Math.sin(t * 11) * 0.22
- if (armR.current) armR.current.rotation.z = -Math.PI / 4 + Math.sin(t * 9) * 0.05
-
- if (hudRef.current) {
- hudRef.current.position.y = 2.2 + Math.sin(t * 4.5) * 0.08
- }
-
- const wheelSpeed = 10 + Math.abs(deltaX) * 40
- if (frontWheelRef.current) frontWheelRef.current.rotation.z += wheelSpeed * dt
- if (backWheelRef.current) backWheelRef.current.rotation.z += wheelSpeed * dt
- })
-
- return (
-
-
-
-
-
- {/* Front fork */}
-
-
- {/* Handlebars */}
-
-
-
- {/* Seat */}
-
-
-
- {/* Delivery box */}
-
-
- {/* Box accent strip */}
-
-
-
-
-
- {brandTexture && (
-
-
- )}
-
- {/* Rider torso */}
-
-
-
- {/* Reflective safety vest stripes */}
-
-
-
-
-
-
- {/* Right arm forward to bars */}
-
-
-
- {/* Legs */}
-
-
-
-
-
- {/* Helmet */}
-
-
- {/* Visor */}
-
-
-
- {/* Holographic Floating Rider Avatar HUD Bubble */}
- {avatarTexture && ratingTexture && (
-
- {/* Round Avatar Profile Card */}
-
-
- {/* Rating Tag Capsule */}
-
-
-
- )}
-
-
- )
-})
-
-Rider.displayName = 'Rider'
-
-function ScrollingBuildings({
- side,
- data,
-}: {
- side: 'left' | 'right'
- data: Array<{
- z: number
- size: [number, number, number]
- y: number
- color?: string
- awning?: boolean
- }>
-}) {
- const ref = useRef(null)
- const x = side === 'left' ? -8.5 : 8.5
- const loopLength = 40
- const speed = BACKGROUND_SCROLL_SPEED * 0.55
-
- useFrame((_, dt) => {
- if (!ref.current) return
- ref.current.children.forEach((child) => {
- child.position.z += speed * dt
- if (child.position.z > 18) child.position.z -= loopLength
- })
- })
-
- return (
-
- {data.map((b, i) => {
- const isSkyscraper = b.size[1] > 7.0
- return (
-
- {isSkyscraper ? (
-
- )
- })}
-
- )
-}
-
-function Scene({ scrollProgress }: { scrollProgress: number }) {
- const cam = useRef(null)
- const riderRef = useRef(null)
- const pointer = useThree((s) => s.pointer)
-
- useFrame((state) => {
- if (!cam.current) return
- cam.current.rotation.y += (pointer.x * 0.04 - cam.current.rotation.y) * 0.04
-
- // Static cinematic angle — rider parked on the right, road extending forward-left
- const targetCamX = 4.4 + pointer.x * 0.4
- const targetCamY = 2.6 + pointer.y * 0.15
- const targetCamZ = 8.5
-
- state.camera.position.x += (targetCamX - state.camera.position.x) * 0.05
- state.camera.position.y += (targetCamY - state.camera.position.y) * 0.05
- state.camera.position.z += (targetCamZ - state.camera.position.z) * 0.05
-
- state.camera.lookAt(-1.5, 1.4, -2)
- })
-
- const leftBuildings = useMemo(
- () => [
- { z: -10, y: 2.8, size: [3.5, 5.6, 4] as [number, number, number], color: BUILDING_LIGHT },
- { z: -3, y: 4.0, size: [3.5, 8.0, 4] as [number, number, number], color: BUILDING_MID },
- { z: 5, y: 3.2, size: [3.5, 6.4, 4] as [number, number, number], color: BUILDING_LIGHT },
- { z: 13, y: 4.4, size: [3.5, 8.8, 4] as [number, number, number], color: BUILDING_MID },
- ],
- [],
- )
- const rightBuildings = useMemo(
- () => [
- { z: -8, y: 3.4, size: [3.5, 6.8, 5] as [number, number, number], color: BUILDING_MID },
- { z: -1, y: 5.0, size: [3.5, 10.0, 4.5] as [number, number, number], color: BUILDING_LIGHT, awning: true },
- { z: 8, y: 3.6, size: [3.5, 7.2, 4] as [number, number, number], color: BUILDING_MID },
- { z: 16, y: 4.0, size: [3.5, 8.0, 4] as [number, number, number], color: BUILDING_LIGHT },
- ],
- [],
- )
-
- return (
-
-
- )
-}
-
-export default function CityRider3D() {
- const [scrollProgress, setScrollProgress] = useState(0)
- const containerRef = useRef(null)
-
- useEffect(() => {
- const handleScroll = () => {
- if (!containerRef.current) return
- const rect = containerRef.current.getBoundingClientRect()
- const scrolled = window.scrollY
- const sectionTop = rect.top + scrolled
- const sectionHeight = rect.height
- const viewportHeight = window.innerHeight
-
- const start = sectionTop - viewportHeight
- const end = sectionTop + sectionHeight
-
- if (scrolled < start) {
- setScrollProgress(0)
- } else if (scrolled > end) {
- setScrollProgress(1)
- } else {
- const progress = (scrolled - start) / (end - start)
- setScrollProgress(progress)
- }
- }
-
- window.addEventListener('scroll', handleScroll, { passive: true })
- handleScroll()
- return () => window.removeEventListener('scroll', handleScroll)
- }, [])
-
- return (
-
-
{
- gl.setClearColor(SKY)
- camera.lookAt(-1.5, 1.4, -2)
- }}
- >
-
-
{/* Phone frame */}
{/* Notch */}
@@ -301,7 +301,7 @@ export default function HeroPhones3D() {
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
- className="absolute top-2 left-2 z-20 flex items-center gap-2 bg-white border border-[#E7D3EF] rounded-full pl-2 pr-3 py-1.5 shadow-[0_4px_16px_rgba(164,103,183,0.10)]"
+ className="absolute top-2 left-3 right-3 sm:left-2 sm:right-auto z-20 flex items-center gap-2 bg-white border border-[#E7D3EF] rounded-full pl-2 pr-3 py-1.5 shadow-[0_4px_16px_rgba(164,103,183,0.10)]"
>
🏅
@@ -318,9 +318,9 @@ export default function HeroPhones3D() {
transition: 'transform 0.25s ease-out',
}}
>
-
)
diff --git a/src/components/three/IsoMap3D.tsx b/src/components/three/IsoMap3D.tsx
index 063d414..b26b787 100644
--- a/src/components/three/IsoMap3D.tsx
+++ b/src/components/three/IsoMap3D.tsx
@@ -1,6 +1,6 @@
'use client'
-import { motion, AnimatePresence } from 'framer-motion'
+import { motion } from 'framer-motion'
type IsoNode = {
id: string
@@ -44,7 +44,7 @@ export default function IsoMap3D({
const scooterTarget = NODES.find((n) => n.id === selectedId)
return (
-