feat: redesign landing page with dynamic header, hero section, and stats layout
This commit is contained in:
sazzadulalambd
368
src/app/page.tsx
368
src/app/page.tsx
@@ -1,14 +1,23 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useState } from 'react';
|
import { useState, useEffect } from 'react';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { users } from '@/data/mockData';
|
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() {
|
export default function LandingPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [loading, setLoading] = useState(false);
|
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) => {
|
const handleLogin = async (email: string) => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -27,10 +36,10 @@ export default function LandingPage() {
|
|||||||
router.push('/admin');
|
router.push('/admin');
|
||||||
break;
|
break;
|
||||||
case 'accountant':
|
case 'accountant':
|
||||||
router.push('/admin');
|
router.push('/admin/accounting');
|
||||||
break;
|
break;
|
||||||
case 'investor':
|
case 'investor':
|
||||||
router.push('/investor');
|
router.push('/investor/dashboard');
|
||||||
break;
|
break;
|
||||||
case 'biker':
|
case 'biker':
|
||||||
router.push('/biker');
|
router.push('/biker');
|
||||||
@@ -49,137 +58,318 @@ export default function LandingPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
<div className="min-h-screen bg-slate-50 font-sans selection:bg-accent selection:text-white pb-20 lg:pb-0">
|
||||||
<header className="p-4 lg:p-6">
|
{/* Dynamic Header */}
|
||||||
<div className="flex items-center justify-between">
|
<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="flex items-center gap-3">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
|
||||||
<Image src="/jaiben.png" alt="JAIBEN Logo" width={48} height={48} className="object-contain h-10 w-auto" priority />
|
<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>
|
<div>
|
||||||
<h1 className="text-2xl lg:text-3xl font-extrabold text-white leading-tight">JAIBEN</h1>
|
<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-xs text-slate-400 leading-none">Mobility Ltd</p>
|
<p className={`text-[10px] leading-none transition-colors duration-300 ${scrolled ? 'text-slate-500' : 'text-white/80'}`}>Mobility Ltd</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
<button
|
<button
|
||||||
onClick={() => router.push('/login')}
|
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"
|
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" />
|
Sign In <ArrowRight className="w-4 h-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="p-4 lg:p-6">
|
{/* Hero Section */}
|
||||||
<div className="max-w-4xl mx-auto">
|
<section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-slate-900">
|
||||||
<div className="text-center mb-8 lg:mb-12">
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-accent/20 z-0" />
|
||||||
<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">
|
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-20 mix-blend-overlay z-0"></div>
|
||||||
<Zap className="w-4 h-4" /> Bangladesh's Leading EV Platform
|
<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's Leading EV Platform
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-4 leading-tight">
|
<h1 className="text-4xl sm:text-5xl lg:text-7xl font-extrabold text-white mb-6 leading-tight tracking-tight">
|
||||||
Electric Vehicle
|
Ditch Petrol. <br className="hidden sm:block" />
|
||||||
<br className="lg:hidden" /> Rental
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-accent via-emerald-400 to-accent-light">Go Electric</span> with JAIBEN.
|
||||||
<span className="text-accent"> Made Simple</span>
|
</h1>
|
||||||
</h2>
|
<p className="text-slate-300 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
|
||||||
<p className="text-slate-400 text-lg lg:text-xl max-w-2xl mx-auto">
|
The largest EV Tech platform enabling the Gig Economy. Rent, Rent-to-Own, or Invest in EVs. Join the sustainable mobility revolution today.
|
||||||
Rent, Rent-to-Own, or Invest in EVs. Join Bangladesh's fastest growing
|
|
||||||
electric mobility ecosystem with FICO model for investors.
|
|
||||||
</p>
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<button
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
Get Started Now <ArrowRight className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8">
|
{/* 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>
|
||||||
|
|
||||||
|
{/* 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="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>
|
||||||
|
<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
|
<button
|
||||||
onClick={() => handleLogin('rahim@email.com')}
|
onClick={() => handleLogin('rahim@email.com')}
|
||||||
disabled={loading}
|
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"
|
className="inline-flex items-center gap-2 text-biker font-bold group-hover:translate-x-2 transition-transform relative z-10"
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 bg-biker/20 rounded-xl flex items-center justify-center mb-4">
|
Login as Biker <ChevronRight className="w-5 h-5" />
|
||||||
<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>
|
||||||
|
</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
|
<button
|
||||||
onClick={() => handleLogin('investor@email.com')}
|
onClick={() => handleLogin('investor@email.com')}
|
||||||
disabled={loading}
|
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"
|
className="inline-flex items-center gap-2 text-investor font-bold group-hover:translate-x-2 transition-transform relative z-10"
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
|
Login as Investor <ChevronRight className="w-5 h-5" />
|
||||||
<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>
|
||||||
|
</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
|
<button
|
||||||
onClick={() => handleLogin('swap@jaiben.com')}
|
onClick={() => handleLogin('swap@jaiben.com')}
|
||||||
disabled={loading}
|
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"
|
className="inline-flex items-center gap-2 text-purple-600 font-bold group-hover:translate-x-2 transition-transform relative z-10"
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4">
|
Login as Swap Station <ChevronRight className="w-5 h-5" />
|
||||||
<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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
{/* Service 4 (Merchant/Rent to own) */}
|
||||||
<div className="text-center p-4">
|
<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="text-2xl lg:text-3xl font-bold text-accent mb-1">500+</div>
|
<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="text-slate-400 text-sm">Active Bikers</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>
|
||||||
<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>
|
|
||||||
</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>
|
<div>
|
||||||
<h3 className="text-xl lg:text-2xl font-bold mb-2">Ready to join the EV revolution?</h3>
|
<h4 className="text-2xl font-bold text-slate-900 mb-3">Merchants & Deliveries</h4>
|
||||||
<p className="text-white/80 mb-4">Start renting or investing today and be part of Bangladesh's sustainable future.</p>
|
<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>
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-3">
|
|
||||||
<button
|
<button
|
||||||
onClick={() => router.push('/login')}
|
onClick={() => router.push('/login')}
|
||||||
className="w-full py-3 bg-white text-accent rounded-lg font-semibold hover:bg-slate-100 transition-colors"
|
className="inline-flex items-center gap-2 text-accent font-bold group-hover:translate-x-2 transition-transform"
|
||||||
>
|
>
|
||||||
Get Started
|
Partner With Us <ChevronRight className="w-5 h-5" />
|
||||||
</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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<footer className="p-4 lg:p-6 text-center">
|
{/* Why Choose Jaiben Features */}
|
||||||
<p className="text-slate-500 text-sm">
|
<section className="py-16 lg:py-24 bg-white relative overflow-hidden">
|
||||||
© 2024 JAIBEN Mobility Ltd. All rights reserved.
|
<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>
|
</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">
|
||||||
|
© {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>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user