Spaces:
Sleeping
Sleeping
File size: 4,226 Bytes
3328075 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
import { Link } from 'react-router-dom';
import { ArrowRight, ShieldCheck, Zap, Calendar } from 'lucide-react';
const HomePage = () => {
return (
<div className="bg-[#0a0a0a] text-white">
{/* Hero Section */}
<section className="relative py-20 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/20 to-purple-900/20 z-0"></div>
<div className="container mx-auto px-4 relative z-10">
<div className="max-w-3xl mx-auto text-center">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
Rent Your Dream<br />Electric Vehicle
</h1>
<p className="text-gray-300 text-lg md:text-xl mb-8">
Experience the future of transportation with our premium electric vehicle
rental service. Zero emissions, maximum performance.
</p>
<div className="flex flex-col sm:flex-row justify-center gap-4">
<Link
to="/vehicles"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-colors"
>
Browse Electric Vehicles
</Link>
<Link
to="/how-it-works"
className="bg-transparent border border-blue-600 text-blue-600 hover:bg-blue-600/10 px-6 py-3 rounded-md font-medium transition-colors"
>
Learn More
</Link>
</div>
</div>
</div>
</section>
{/* Features Section */}
<section className="py-16 bg-[#0c0c0c]">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="bg-[#161617] p-6 rounded-lg flex flex-col items-center text-center">
<div className="bg-blue-600/20 p-3 rounded-full mb-4">
<ShieldCheck className="text-blue-500 w-8 h-8" />
</div>
<h3 className="text-xl font-semibold mb-2">Safe & Secure</h3>
<p className="text-gray-400">
Premium vehicles with advanced safety features
</p>
</div>
<div className="bg-[#161617] p-6 rounded-lg flex flex-col items-center text-center">
<div className="bg-blue-600/20 p-3 rounded-full mb-4">
<Zap className="text-blue-500 w-8 h-8" />
</div>
<h3 className="text-xl font-semibold mb-2">100% Electric</h3>
<p className="text-gray-400">
Zero emissions, maximum performance
</p>
</div>
<div className="bg-[#161617] p-6 rounded-lg flex flex-col items-center text-center">
<div className="bg-blue-600/20 p-3 rounded-full mb-4">
<Calendar className="text-blue-500 w-8 h-8" />
</div>
<h3 className="text-xl font-semibold mb-2">Easy Booking</h3>
<p className="text-gray-400">
Book your ride in minutes
</p>
</div>
</div>
</div>
</section>
{/* Experience Section */}
<section className="py-20">
<div className="container mx-auto px-4">
<div className="max-w-3xl mx-auto text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4">
Experience Electric Luxury
</h2>
<p className="text-gray-300">
Discover our lineup of premium electric vehicles. Cutting-edge technology,
breathtaking design, and zero emissions. Explore and reserve your Tesla today.
</p>
</div>
{/* Vehicle Cards will go here */}
<div className="flex justify-center mt-12">
<Link
to="/vehicles"
className="flex items-center text-blue-500 hover:text-blue-400 transition-colors font-medium"
>
<span>View all vehicles</span>
<ArrowRight className="ml-2 w-5 h-5" />
</Link>
</div>
</div>
</section>
</div>
);
};
export default HomePage;
|