diff --git a/src/app/page.tsx b/src/app/page.tsx
index b16df0d..d5b95d2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,14 +1,23 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { users } from '@/data/mockData';
-import { Zap, ArrowRight, Bike, Wallet } from 'lucide-react';
+import { Zap, ArrowRight, Bike, Wallet, Leaf, ShieldCheck, MapPin, Truck, ChevronRight, BarChart3, BatteryCharging, Clock, Activity } from 'lucide-react';
 
 export default function LandingPage() {
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const handleLogin = async (email: string) => {
     setLoading(true);
@@ -27,10 +36,10 @@ export default function LandingPage() {
           router.push('/admin');
           break;
         case 'accountant':
-          router.push('/admin');
+          router.push('/admin/accounting');
           break;
         case 'investor':
-          router.push('/investor');
+          router.push('/investor/dashboard');
           break;
         case 'biker':
           router.push('/biker');
@@ -49,137 +58,318 @@ export default function LandingPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
-      <header className="p-4 lg:p-6">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-3">
-            <Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className="object-contain h-10 w-auto" priority />
+    <div className="min-h-screen bg-slate-50 font-sans selection:bg-accent selection:text-white pb-20 lg:pb-0">
+      {/* Dynamic Header */}
+      <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/90 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-5'}`}>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
+          <div className="flex items-center gap-3 cursor-pointer" onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+            <Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className={`object-contain transition-all duration-300 ${scrolled ? 'h-8' : 'h-10'} w-auto`} priority />
             <div>
-              <h1 className="text-2xl lg:text-3xl font-extrabold text-white leading-tight">JAIBEN</h1>
-              <p className="text-xs text-slate-400 leading-none">Mobility Ltd</p>
+              <h1 className={`font-extrabold leading-tight transition-colors duration-300 ${scrolled ? 'text-xl text-slate-900' : 'text-2xl text-white'}`}>JAIBEN</h1>
+              <p className={`text-[10px] leading-none transition-colors duration-300 ${scrolled ? 'text-slate-500' : 'text-white/80'}`}>Mobility Ltd</p>
             </div>
           </div>
-          <button
-            onClick={() => router.push('/login')}
-            className="px-4 py-2 bg-accent text-white rounded-lg font-semibold hover:bg-accent-dark transition-colors flex items-center gap-2"
-          >
-            Sign In <ArrowRight className="w-4 h-4" />
-          </button>
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => router.push('/login')}
+              className={`px-5 py-2.5 rounded-full font-semibold transition-all flex items-center gap-2 ${
+                scrolled 
+                  ? 'bg-accent text-white hover:bg-accent-dark shadow-md hover:shadow-lg' 
+                  : 'bg-white text-accent hover:bg-slate-100 shadow-xl'
+              }`}
+            >
+              Sign In <ArrowRight className="w-4 h-4" />
+            </button>
+          </div>
         </div>
       </header>
 
-      <main className="p-4 lg:p-6">
-        <div className="max-w-4xl mx-auto">
-          <div className="text-center mb-8 lg:mb-12">
-            <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-accent/20 rounded-full text-accent text-sm font-medium mb-4">
-              <Zap className="w-4 h-4" /> Bangladesh&apos;s Leading EV Platform
-            </div>
-            <h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-4 leading-tight">
-              Electric Vehicle
-              <br className="lg:hidden" /> Rental
-              <span className="text-accent"> Made Simple</span>
-            </h2>
-            <p className="text-slate-400 text-lg lg:text-xl max-w-2xl mx-auto">
-              Rent, Rent-to-Own, or Invest in EVs. Join Bangladesh&apos;s fastest growing 
-              electric mobility ecosystem with FICO model for investors.
-            </p>
+      {/* Hero Section */}
+      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-slate-900">
+        <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-accent/20 z-0" />
+        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-20 mix-blend-overlay z-0"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-white text-sm font-medium mb-8">
+            <Leaf className="w-4 h-4 text-emerald-400" /> Bangladesh&apos;s Leading EV Platform
           </div>
- 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8">
+          <h1 className="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-white mb-6 leading-tight tracking-tight">
+            Ditch Petrol. <br className="hidden sm:block" />
+            <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent via-emerald-400 to-accent-light">Go Electric</span> with JAIBEN.
+          </h1>
+          <p className="text-slate-300 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
+            The largest EV Tech platform enabling the Gig Economy. Rent, Rent-to-Own, or Invest in EVs. Join the sustainable mobility revolution today.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
             <button
-              onClick={() => handleLogin('rahim@email.com')}
-              disabled={loading}
-              className="p-6 bg-slate-800/50 border border-slate-700 rounded-2xl hover:border-biker hover:bg-biker/10 transition-all group text-left"
+              onClick={() => router.push('/login')}
+              className="w-full sm:w-auto px-8 py-4 bg-accent text-white rounded-full font-bold text-lg hover:bg-accent-dark transition-all transform hover:scale-105 shadow-xl shadow-accent/30 flex items-center justify-center gap-2"
             >
-              <div className="w-12 h-12 bg-biker/20 rounded-xl flex items-center justify-center mb-4">
-                <Bike className="w-6 h-6 text-biker" />
-              </div>
-              <h3 className="text-xl font-bold text-white mb-1">Biker</h3>
-              <p className="text-slate-400 text-sm mb-3">Rent electric bikes for daily commute</p>
-              <span className="text-biker text-sm font-medium flex items-center gap-1">
-                Login as Biker <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              </span>
-            </button>
- 
-            <button
-              onClick={() => handleLogin('investor@email.com')}
-              disabled={loading}
-              className="p-6 bg-slate-800/50 border border-slate-700 rounded-2xl hover:border-green-500 hover:bg-green-500/10 transition-all group text-left"
-            >
-              <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
-                <Wallet className="w-6 h-6 text-green-500" />
-              </div>
-              <h3 className="text-xl font-bold text-white mb-1">Investor</h3>
-              <p className="text-slate-400 text-sm mb-3">FICO model with guaranteed returns</p>
-              <span className="text-green-500 text-sm font-medium flex items-center gap-1">
-                Login as Investor <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              </span>
-            </button>
-
-            <button
-              onClick={() => handleLogin('swap@jaiben.com')}
-              disabled={loading}
-              className="p-6 bg-slate-800/50 border border-slate-700 rounded-2xl hover:border-purple-500 hover:bg-purple-500/10 transition-all group text-left"
-            >
-              <div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
-                <Zap className="w-6 h-6 text-purple-500" />
-              </div>
-              <h3 className="text-xl font-bold text-white mb-1">Swap Station</h3>
-              <p className="text-slate-400 text-sm mb-3">Battery swap and charging services</p>
-              <span className="text-purple-500 text-sm font-medium flex items-center gap-1">
-                Login as Swap Station <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
-              </span>
+              Get Started Now <ArrowRight className="w-5 h-5" />
             </button>
           </div>
+        </div>
+        
+        {/* Decorative background elements */}
+        <div className="absolute -bottom-24 -left-24 w-96 h-96 bg-accent/30 rounded-full blur-3xl mix-blend-screen pointer-events-none"></div>
+        <div className="absolute top-24 -right-24 w-96 h-96 bg-emerald-500/20 rounded-full blur-3xl mix-blend-screen pointer-events-none"></div>
+      </section>
 
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-            <div className="text-center p-4">
-              <div className="text-2xl lg:text-3xl font-bold text-accent mb-1">500+</div>
-              <div className="text-slate-400 text-sm">Active Bikers</div>
-            </div>
-            <div className="text-center p-4">
-              <div className="text-2xl lg:text-3xl font-bold text-accent mb-1">200+</div>
-              <div className="text-slate-400 text-sm">EV Fleet</div>
-            </div>
-            <div className="text-center p-4">
-              <div className="text-2xl lg:text-3xl font-bold text-accent mb-1">50+</div>
-              <div className="text-slate-400 text-sm">Investors</div>
-            </div>
-            <div className="text-center p-4">
-              <div className="text-2xl lg:text-3xl font-bold text-accent mb-1">18%</div>
-              <div className="text-slate-400 text-sm">Avg. ROI</div>
-            </div>
+      {/* Stats Section (Overlapping Hero) */}
+      <section className="relative z-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mt-12 mb-20">
+        <div className="bg-white rounded-2xl shadow-2xl p-6 lg:p-10 grid grid-cols-2 lg:grid-cols-4 gap-8 divide-x divide-slate-100 border border-slate-100">
+          <div className="text-center px-4">
+            <div className="text-3xl lg:text-4xl font-black text-accent mb-2">500+</div>
+            <div className="text-slate-500 font-medium text-sm">Active Riders</div>
+          </div>
+          <div className="text-center px-4">
+            <div className="text-3xl lg:text-4xl font-black text-accent mb-2">200+</div>
+            <div className="text-slate-500 font-medium text-sm">EV Fleet Size</div>
+          </div>
+          <div className="text-center px-4">
+            <div className="text-3xl lg:text-4xl font-black text-accent mb-2">18%</div>
+            <div className="text-slate-500 font-medium text-sm">Avg. Investor ROI</div>
+          </div>
+          <div className="text-center px-4">
+            <div className="text-3xl lg:text-4xl font-black text-accent mb-2">50k+</div>
+            <div className="text-slate-500 font-medium text-sm">Deliveries Done</div>
+          </div>
+        </div>
+      </section>
+
+      {/* Services / What We Offer */}
+      <section className="py-16 lg:py-24 bg-slate-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <h2 className="text-accent font-semibold tracking-wide uppercase mb-3">Our Ecosystem</h2>
+            <h3 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">What We Offer</h3>
+            <p className="text-slate-600 text-lg">Explore categories of services tailored to save you money, boost your earnings, and reduce emissions.</p>
           </div>
 
-          <div className="bg-gradient-to-r from-accent to-accent-dark rounded-2xl p-6 lg:p-8 text-white">
-            <div className="grid lg:grid-cols-2 gap-6 items-center">
-              <div>
-                <h3 className="text-xl lg:text-2xl font-bold mb-2">Ready to join the EV revolution?</h3>
-                <p className="text-white/80 mb-4">Start renting or investing today and be part of Bangladesh&apos;s sustainable future.</p>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {/* Service 1 */}
+            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full">
+              <div className="absolute top-0 right-0 w-32 h-32 bg-biker/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
+              <div className="w-16 h-16 bg-biker/10 rounded-2xl flex items-center justify-center mb-6 relative z-10 text-biker group-hover:bg-biker group-hover:text-white transition-colors">
+                <Bike className="w-8 h-8" />
               </div>
-              <div className="flex flex-col gap-3">
-                <button
-                  onClick={() => router.push('/login')}
-                  className="w-full py-3 bg-white text-accent rounded-lg font-semibold hover:bg-slate-100 transition-colors"
-                >
-                  Get Started
-                </button>
-                <button
-                  onClick={() => router.push('/login')}
-                  className="w-full py-3 border-2 border-white text-white rounded-lg font-semibold hover:bg-white/10 transition-colors"
-                >
-                  Learn More
-                </button>
+              <h4 className="text-2xl font-bold text-slate-900 mb-3 relative z-10">Biker Rentals</h4>
+              <p className="text-slate-600 mb-8 flex-grow relative z-10">Save on petrol costs and rent a high-performance e-scooter for your daily commute or delivery gigs.</p>
+              <button 
+                onClick={() => handleLogin('rahim@email.com')}
+                disabled={loading}
+                className="inline-flex items-center gap-2 text-biker font-bold group-hover:translate-x-2 transition-transform relative z-10"
+              >
+                Login as Biker <ChevronRight className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Service 2 */}
+            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full">
+              <div className="absolute top-0 right-0 w-32 h-32 bg-investor/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
+              <div className="w-16 h-16 bg-investor/10 rounded-2xl flex items-center justify-center mb-6 relative z-10 text-investor group-hover:bg-investor group-hover:text-white transition-colors">
+                <Wallet className="w-8 h-8" />
+              </div>
+              <h4 className="text-2xl font-bold text-slate-900 mb-3 relative z-10">FICO Investment</h4>
+              <p className="text-slate-600 mb-8 flex-grow relative z-10">Invest in fractional EV ownership. Let us manage the fleet while you enjoy guaranteed monthly returns.</p>
+              <button 
+                onClick={() => handleLogin('investor@email.com')}
+                disabled={loading}
+                className="inline-flex items-center gap-2 text-investor font-bold group-hover:translate-x-2 transition-transform relative z-10"
+              >
+                Login as Investor <ChevronRight className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Service 3 */}
+            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full">
+              <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
+              <div className="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mb-6 relative z-10 text-purple-500 group-hover:bg-purple-500 group-hover:text-white transition-colors">
+                <Zap className="w-8 h-8" />
+              </div>
+              <h4 className="text-2xl font-bold text-slate-900 mb-3 relative z-10">Swap Stations</h4>
+              <p className="text-slate-600 mb-8 flex-grow relative z-10">Never wait to charge. Swap your depleted battery for a fully charged one in less than 2 minutes.</p>
+              <button 
+                onClick={() => handleLogin('swap@jaiben.com')}
+                disabled={loading}
+                className="inline-flex items-center gap-2 text-purple-600 font-bold group-hover:translate-x-2 transition-transform relative z-10"
+              >
+                Login as Swap Station <ChevronRight className="w-5 h-5" />
+              </button>
+            </div>
+            
+            {/* Service 4 (Merchant/Rent to own) */}
+            <div className="group bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl transition-all duration-300 border border-slate-100 relative overflow-hidden flex flex-col h-full md:col-span-2 lg:col-span-3 lg:w-2/3 lg:mx-auto">
+              <div className="absolute top-0 right-0 w-32 h-32 bg-accent/10 rounded-bl-full -mr-8 -mt-8 transition-transform group-hover:scale-110"></div>
+              <div className="flex flex-col sm:flex-row gap-6 relative z-10">
+                <div className="w-16 h-16 shrink-0 bg-accent/10 rounded-2xl flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-white transition-colors">
+                  <Truck className="w-8 h-8" />
+                </div>
+                <div>
+                  <h4 className="text-2xl font-bold text-slate-900 mb-3">Merchants & Deliveries</h4>
+                  <p className="text-slate-600 mb-6 max-w-xl">Are you a business looking for emission-free delivery solutions? Partner with us for dedicated EV riders or rent-to-own schemes for your fleet.</p>
+                  <button 
+                    onClick={() => router.push('/login')}
+                    className="inline-flex items-center gap-2 text-accent font-bold group-hover:translate-x-2 transition-transform"
+                  >
+                    Partner With Us <ChevronRight className="w-5 h-5" />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </main>
+      </section>
 
-      <footer className="p-4 lg:p-6 text-center">
-        <p className="text-slate-500 text-sm">
-          &copy; 2024 JAIBEN Mobility Ltd. All rights reserved.
-        </p>
+      {/* Why Choose Jaiben Features */}
+      <section className="py-16 lg:py-24 bg-white relative overflow-hidden">
+        <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-emerald-50 rounded-full blur-3xl opacity-50 pointer-events-none"></div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 mb-4">Why Will You Choose JAIBEN</h2>
+            <p className="text-slate-600 text-lg">We provide the most robust infrastructure and technology to ensure your rides are seamless and profitable.</p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
+              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
+                <Activity className="w-8 h-8 text-accent" />
+              </div>
+              <h4 className="text-xl font-bold text-slate-900 mb-3">IoT Enabled</h4>
+              <p className="text-slate-600 text-sm">Get real-time tracking, remote locking, and smart analytics for every vehicle.</p>
+            </div>
+            
+            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
+              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
+                <BatteryCharging className="w-8 h-8 text-accent" />
+              </div>
+              <h4 className="text-xl font-bold text-slate-900 mb-3">Robust EV Infra</h4>
+              <p className="text-slate-600 text-sm">Extensive network of swapping stations across major hubs for zero downtime.</p>
+            </div>
+
+            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
+              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
+                <Clock className="w-8 h-8 text-accent" />
+              </div>
+              <h4 className="text-xl font-bold text-slate-900 mb-3">99% Uptime</h4>
+              <p className="text-slate-600 text-sm">AI-powered predictive vehicle maintenance ensures bikes are always road-ready.</p>
+            </div>
+
+            <div className="bg-slate-50 rounded-2xl p-8 text-center hover:-translate-y-2 transition-transform duration-300 border border-slate-100 hover:shadow-lg">
+              <div className="w-16 h-16 mx-auto bg-white rounded-full shadow-sm flex items-center justify-center mb-6">
+                <ShieldCheck className="w-8 h-8 text-accent" />
+              </div>
+              <h4 className="text-xl font-bold text-slate-900 mb-3">24/7 Support</h4>
+              <p className="text-slate-600 text-sm">Dedicated operations command center and support team ready to assist.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* How to Join Section */}
+      <section className="py-16 lg:py-24 bg-slate-900 text-white relative">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-extrabold mb-4">How To Join JAIBEN</h2>
+            <p className="text-slate-400 text-lg">Start your journey in just 3 easy steps.</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
+            {/* Connecting line */}
+            <div className="hidden md:block absolute top-12 left-[15%] right-[15%] h-0.5 bg-slate-700"></div>
+
+            <div className="relative text-center">
+              <div className="w-24 h-24 mx-auto bg-slate-800 border-4 border-slate-900 rounded-full flex items-center justify-center mb-6 relative z-10 shadow-[0_0_30px_rgba(0,188,132,0.2)]">
+                <ShieldCheck className="w-10 h-10 text-accent" />
+                <div className="absolute -top-2 -right-2 w-8 h-8 bg-accent rounded-full flex items-center justify-center font-bold text-sm">1</div>
+              </div>
+              <h4 className="text-xl font-bold mb-3">Complete Your KYC</h4>
+              <p className="text-slate-400">Add your personal details like NID, Driving License, and basic info securely.</p>
+            </div>
+
+            <div className="relative text-center">
+              <div className="w-24 h-24 mx-auto bg-slate-800 border-4 border-slate-900 rounded-full flex items-center justify-center mb-6 relative z-10 shadow-[0_0_30px_rgba(0,188,132,0.2)]">
+                <Bike className="w-10 h-10 text-accent" />
+                <div className="absolute -top-2 -right-2 w-8 h-8 bg-accent rounded-full flex items-center justify-center font-bold text-sm">2</div>
+              </div>
+              <h4 className="text-xl font-bold mb-3">Choose Your Plan</h4>
+              <p className="text-slate-400">Select your EV model and subscription plan (Daily, Weekly, or Rent-to-Own).</p>
+            </div>
+
+            <div className="relative text-center">
+              <div className="w-24 h-24 mx-auto bg-slate-800 border-4 border-slate-900 rounded-full flex items-center justify-center mb-6 relative z-10 shadow-[0_0_30px_rgba(0,188,132,0.2)]">
+                <Wallet className="w-10 h-10 text-accent" />
+                <div className="absolute -top-2 -right-2 w-8 h-8 bg-accent rounded-full flex items-center justify-center font-bold text-sm">3</div>
+              </div>
+              <h4 className="text-xl font-bold mb-3">Start Earning</h4>
+              <p className="text-slate-400">Pick up your bike from the nearest hub and start delivering to earn more!</p>
+            </div>
+          </div>
+
+          <div className="mt-16 text-center">
+            <button
+              onClick={() => router.push('/login')}
+              className="px-10 py-4 bg-white text-slate-900 rounded-full font-bold text-lg hover:bg-slate-100 transition-all transform hover:scale-105 shadow-xl flex items-center justify-center gap-2 mx-auto"
+            >
+              Get The App <ArrowRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-slate-950 pt-20 pb-10 border-t border-slate-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
+            <div className="col-span-1 md:col-span-2">
+              <div className="flex items-center gap-3 mb-6">
+                <Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className="object-contain h-10 w-auto" />
+                <div>
+                  <h1 className="text-2xl font-extrabold text-white leading-tight">JAIBEN</h1>
+                  <p className="text-xs text-slate-500 leading-none">Mobility Ltd</p>
+                </div>
+              </div>
+              <p className="text-slate-400 max-w-sm mb-6">
+                Pioneering sustainable and emission-free mobility in Bangladesh through innovative tech and shared ecosystems.
+              </p>
+              <div className="flex gap-4">
+                {/* Social icons placeholders */}
+                <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-accent hover:text-white transition-colors cursor-pointer"><Zap className="w-5 h-5" /></div>
+                <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-accent hover:text-white transition-colors cursor-pointer"><BarChart3 className="w-5 h-5" /></div>
+                <div className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-accent hover:text-white transition-colors cursor-pointer"><MapPin className="w-5 h-5" /></div>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="text-white font-bold mb-6">Services</h4>
+              <ul className="space-y-3 text-slate-400">
+                <li><button onClick={() => router.push('/login')} className="hover:text-accent transition-colors">EV for Deliveries</button></li>
+                <li><button onClick={() => router.push('/login')} className="hover:text-accent transition-colors">Rent to Own</button></li>
+                <li><button onClick={() => router.push('/login')} className="hover:text-accent transition-colors">Investor Platform</button></li>
+                <li><button onClick={() => router.push('/login')} className="hover:text-accent transition-colors">Swap Stations</button></li>
+              </ul>
+            </div>
+
+            <div>
+              <h4 className="text-white font-bold mb-6">Company</h4>
+              <ul className="space-y-3 text-slate-400">
+                <li><a href="#" className="hover:text-accent transition-colors">About Us</a></li>
+                <li><a href="#" className="hover:text-accent transition-colors">Careers</a></li>
+                <li><a href="#" className="hover:text-accent transition-colors">ESG Impact</a></li>
+                <li><a href="#" className="hover:text-accent transition-colors">Contact</a></li>
+              </ul>
+            </div>
+          </div>
+          
+          <div className="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
+            <p className="text-slate-500 text-sm">
+              &copy; {new Date().getFullYear()} JAIBEN Mobility Ltd. All rights reserved.
+            </p>
+            <div className="flex gap-6 text-sm text-slate-500">
+              <a href="#" className="hover:text-white transition-colors">Privacy Policy</a>
+              <a href="#" className="hover:text-white transition-colors">Terms of Service</a>
+            </div>
+          </div>
+        </div>
       </footer>
     </div>
   );