feat: implement 3D components and create a coming soon page with a memory match game
This commit is contained in:
sazzadulalambd
@@ -3,6 +3,8 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Image from 'next/image';
|
||||
import HeroBackground3D from '@/components/ui/3d/HeroBackground3D';
|
||||
import CardIcon3D from '@/components/ui/3d/CardIcon3D';
|
||||
import { users } from '@/data/mockData';
|
||||
import { Zap, ArrowRight, Bike, Wallet, Leaf, ShieldCheck, MapPin, Truck, ChevronRight, BarChart3, BatteryCharging, Clock, Activity } from 'lucide-react';
|
||||
|
||||
@@ -22,13 +24,13 @@ export default function LandingPage() {
|
||||
const handleLogin = async (email: string) => {
|
||||
setLoading(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
|
||||
const user = users.find(u => u.email === email);
|
||||
if (user) {
|
||||
sessionStorage.setItem('authToken', 'demo-token');
|
||||
sessionStorage.setItem('userRole', user.role);
|
||||
sessionStorage.setItem('userName', user.name);
|
||||
|
||||
|
||||
switch (user.role) {
|
||||
case 'super_admin':
|
||||
case 'admin_manager':
|
||||
@@ -72,11 +74,10 @@ export default function LandingPage() {
|
||||
<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'
|
||||
}`}
|
||||
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>
|
||||
@@ -88,6 +89,7 @@ export default function LandingPage() {
|
||||
<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>
|
||||
<HeroBackground3D />
|
||||
<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
|
||||
@@ -101,14 +103,14 @@ export default function LandingPage() {
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<button
|
||||
onClick={() => router.push('/login')}
|
||||
onClick={() => router.push('/coming-soon')}
|
||||
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>
|
||||
|
||||
|
||||
{/* 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>
|
||||
@@ -155,7 +157,7 @@ export default function LandingPage() {
|
||||
<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')}
|
||||
onClick={() => router.push('/coming-soon')}
|
||||
disabled={loading}
|
||||
className="inline-flex items-center gap-2 text-biker font-bold group-hover:translate-x-2 transition-transform relative z-10"
|
||||
>
|
||||
@@ -171,13 +173,13 @@ 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 */}
|
||||
@@ -189,14 +191,14 @@ export default function LandingPage() {
|
||||
<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')}
|
||||
onClick={() => router.push('/coming-soon')}
|
||||
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>
|
||||
@@ -206,9 +208,9 @@ export default function LandingPage() {
|
||||
</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>
|
||||
<p className="text-slate-600 mb-6 max-w-xl">Are you a delivery partner or company? Request any amount of riders for your delivery needs. Partner with us for dedicated EV riders.</p>
|
||||
<button
|
||||
onClick={() => router.push('/login')}
|
||||
onClick={() => router.push('/coming-soon')}
|
||||
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" />
|
||||
@@ -237,7 +239,7 @@ export default function LandingPage() {
|
||||
<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" />
|
||||
@@ -307,7 +309,7 @@ export default function LandingPage() {
|
||||
|
||||
<div className="mt-16 text-center">
|
||||
<button
|
||||
onClick={() => router.push('/login')}
|
||||
onClick={() => router.push('/coming-soon')}
|
||||
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" />
|
||||
@@ -338,14 +340,14 @@ export default function LandingPage() {
|
||||
<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>
|
||||
<li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">EV for Deliveries</button></li>
|
||||
<li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">Rent to Own</button></li>
|
||||
<li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">Investor Platform</button></li>
|
||||
<li><button onClick={() => router.push('/coming-soon')} className="hover:text-accent transition-colors">Swap Stations</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -359,7 +361,7 @@ export default function LandingPage() {
|
||||
</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.
|
||||
|
||||
Reference in New Issue
Block a user