shawon/JML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add AnimatedCounter component and update stats section with hero asset color adjustment

Browse Source
This commit is contained in:
sazzadulalambd
2026-06-22 17:12:33 +06:00
parent 79d32a9e83
commit 24b00fefcd
3 changed files with 80 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/page.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Image from 'next/image';
import HeroBackground3D from '@/components/ui/3d/HeroBackground3D';
import AnimatedCounter from '@/components/ui/AnimatedCounter';
import CardIcon3D from '@/components/ui/3d/CardIcon3D';
import { Zap, ArrowRight, Bike, Wallet, Leaf, ShieldCheck, MapPin, Truck, ChevronRight, BarChart3, BatteryCharging, Clock, Activity } from 'lucide-react';
@@ -117,24 +118,34 @@ export default function LandingPage() {
<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>
{/* Stats Section */}
<section className="py-12 lg:py-16 bg-white border-b border-slate-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 divide-x divide-slate-100">
<div className="flex flex-col items-center justify-center text-center px-2">
<h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2">
<AnimatedCounter end={500} suffix="+" />
</h3>
<p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">Active Riders</p>
</div>
<div className="flex flex-col items-center justify-center text-center px-2">
<h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2">
<AnimatedCounter end={200} suffix="+" />
</h3>
<p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">EV Fleet Size</p>
</div>
<div className="flex flex-col items-center justify-center text-center px-2">
<h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2 text-accent">
<AnimatedCounter end={18} suffix="%" />
</h3>
<p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">Avg. Investor ROI</p>
</div>
<div className="flex flex-col items-center justify-center text-center px-2">
<h3 className="text-4xl md:text-5xl font-black text-slate-900 mb-2">
<AnimatedCounter end={50} suffix="k+" />
</h3>
<p className="text-xs sm:text-sm font-semibold text-slate-500 uppercase tracking-wider">Deliveries Done</p>
</div>
</div>
</div>
</section>
@@ -166,7 +177,8 @@ export default function LandingPage() {
</button>
</div>
{/* Service 2 */}
{/* Service 2 - FICO Investment - User will redesign this section */}
{/*
<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">
@@ -174,14 +186,15 @@ export default function LandingPage() {
</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')}
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> */}
</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">