From a831ea7a7c2faf9a8f2bdd1f970434e04fa8e32b Mon Sep 17 00:00:00 2001 From: sazzadulalambd Date: Mon, 22 Jun 2026 15:01:19 +0600 Subject: [PATCH] feat: redesign landing page with dynamic header, hero section, and stats layout --- src/app/page.tsx | 420 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 305 insertions(+), 115 deletions(-) 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 ( -
-
-
-
- JAIBEN Logo +
+ {/* Dynamic Header */} +
+
+
window.scrollTo({ top: 0, behavior: 'smooth' })}> + JAIBEN Logo
-

JAIBEN

-

Mobility Ltd

+

JAIBEN

+

Mobility Ltd

- +
+ +
-
-
-
-
- Bangladesh's Leading EV Platform -
-

- Electric Vehicle -
Rental - Made Simple -

-

- Rent, Rent-to-Own, or Invest in EVs. Join Bangladesh's fastest growing - electric mobility ecosystem with FICO model for investors. -

+ {/* Hero Section */} +
+
+
+
+
+ Bangladesh's Leading EV Platform
- -
+

+ Ditch Petrol.
+ Go Electric with JAIBEN. +

+

+ The largest EV Tech platform enabling the Gig Economy. Rent, Rent-to-Own, or Invest in EVs. Join the sustainable mobility revolution today. +

+
- - - -
+
+ + {/* Decorative background elements */} +
+
+
-
-
-
500+
-
Active Bikers
-
-
-
200+
-
EV Fleet
-
-
-
50+
-
Investors
-
-
-
18%
-
Avg. ROI
-
+ {/* Stats Section (Overlapping Hero) */} +
+
+
+
500+
+
Active Riders
+
+
+
200+
+
EV Fleet Size
+
+
+
18%
+
Avg. Investor ROI
+
+
+
50k+
+
Deliveries Done
+
+
+
+ + {/* Services / What We Offer */} +
+
+
+

Our Ecosystem

+

What We Offer

+

Explore categories of services tailored to save you money, boost your earnings, and reduce emissions.

-
-
-
-

Ready to join the EV revolution?

-

Start renting or investing today and be part of Bangladesh's sustainable future.

+
+ {/* Service 1 */} +
+
+
+
-
- - +

Biker Rentals

+

Save on petrol costs and rent a high-performance e-scooter for your daily commute or delivery gigs.

+ +
+ + {/* Service 2 */} +
+
+
+ +
+

FICO Investment

+

Invest in fractional EV ownership. Let us manage the fleet while you enjoy guaranteed monthly returns.

+ +
+ + {/* Service 3 */} +
+
+
+ +
+

Swap Stations

+

Never wait to charge. Swap your depleted battery for a fully charged one in less than 2 minutes.

+ +
+ + {/* Service 4 (Merchant/Rent to own) */} +
+
+
+
+ +
+
+

Merchants & Deliveries

+

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.

+ +
-
+ -
);