|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>RideEasy - Motorcycle Rentals</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.hero-bg { |
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
|
|
|
.bike-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
content: ''; |
|
|
display: block; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
background: #f59e0b; |
|
|
margin-top: 2px; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 1s ease-in; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-motorcycle text-2xl text-yellow-500 mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">RideEasy</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Home</a> |
|
|
<a href="#bikes" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Our Bikes</a> |
|
|
<a href="#how" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">How It Works</a> |
|
|
<a href="#testimonials" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Testimonials</a> |
|
|
<a href="#contact" class="nav-link text-gray-900 hover:text-yellow-500 px-3 py-2 text-sm font-medium">Contact</a> |
|
|
</div> |
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-200"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
|
|
<a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Home</a> |
|
|
<a href="#bikes" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Our Bikes</a> |
|
|
<a href="#how" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">How It Works</a> |
|
|
<a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Testimonials</a> |
|
|
<a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-yellow-500">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-bg text-white py-20 md:py-32 fade-in"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="md:w-1/2"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Ride Your Adventure</h1> |
|
|
<p class="text-lg md:text-xl mb-8">Explore the city or countryside with our premium motorcycle rentals. Affordable rates, flexible durations, and top-quality bikes.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#bikes" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Browse Bikes</a> |
|
|
<a href="#how" class="bg-transparent hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-6 border-2 border-white rounded-lg text-center transition duration-300">How It Works</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gray-100 py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-yellow-500 text-4xl mb-3"> |
|
|
<i class="fas fa-motorcycle"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900">150+</h3> |
|
|
<p class="text-gray-600">Bikes Available</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-yellow-500 text-4xl mb-3"> |
|
|
<i class="fas fa-map-marked-alt"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900">25</h3> |
|
|
<p class="text-gray-600">Cities Covered</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-yellow-500 text-4xl mb-3"> |
|
|
<i class="fas fa-smile"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900">10,000+</h3> |
|
|
<p class="text-gray-600">Happy Riders</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow"> |
|
|
<div class="text-yellow-500 text-4xl mb-3"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<h3 class="text-3xl font-bold text-gray-900">24/7</h3> |
|
|
<p class="text-gray-600">Support Available</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="bikes" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Our Premium Bike Collection</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Choose from our wide range of motorcycles for every type of rider and adventure.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bike-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1589311467701-cd310caa87c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sport Bike" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-bold">Popular</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-gray-900">Yamaha R1</h3> |
|
|
<span class="text-yellow-500 font-bold">$99/day</span> |
|
|
</div> |
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i class="fas fa-gas-pump mr-2"></i> |
|
|
<span class="mr-4">Petrol</span> |
|
|
<i class="fas fa-tachometer-alt mr-2"></i> |
|
|
<span>1000cc</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">High-performance sport bike with cutting-edge technology for the ultimate riding experience.</p> |
|
|
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300"> |
|
|
Rent Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bike-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1558980394-4c7c9299fe96?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Cruiser Bike" class="w-full h-64 object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-gray-900">Harley Davidson</h3> |
|
|
<span class="text-yellow-500 font-bold">$129/day</span> |
|
|
</div> |
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i class="fas fa-gas-pump mr-2"></i> |
|
|
<span class="mr-4">Petrol</span> |
|
|
<i class="fas fa-tachometer-alt mr-2"></i> |
|
|
<span>1800cc</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Iconic American cruiser with powerful engine and classic styling for comfortable long rides.</p> |
|
|
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300"> |
|
|
Rent Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bike-card bg-white rounded-lg overflow-hidden shadow-lg transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1568772585407-9361f9bf3a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Adventure Bike" class="w-full h-64 object-cover"> |
|
|
<div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-bold">Eco</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-xl font-bold text-gray-900">BMW R1250GS</h3> |
|
|
<span class="text-yellow-500 font-bold">$149/day</span> |
|
|
</div> |
|
|
<div class="flex items-center text-gray-600 mb-4"> |
|
|
<i class="fas fa-gas-pump mr-2"></i> |
|
|
<span class="mr-4">Petrol</span> |
|
|
<i class="fas fa-tachometer-alt mr-2"></i> |
|
|
<span>1250cc</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-4">Premium adventure bike with advanced suspension for both on-road and off-road adventures.</p> |
|
|
<button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-300"> |
|
|
Rent Now |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="bg-gray-900 hover:bg-gray-800 text-white font-bold py-3 px-8 rounded-lg transition duration-300"> |
|
|
View All Bikes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how" class="py-16 bg-gray-100"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">How It Works</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Renting a motorcycle has never been easier. Just follow these simple steps.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-8 rounded-lg shadow text-center"> |
|
|
<div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<span class="text-yellow-500 text-2xl font-bold">1</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Choose Your Bike</h3> |
|
|
<p class="text-gray-600">Browse our collection and select the perfect bike for your adventure. Filter by type, price, or features.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow text-center"> |
|
|
<div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<span class="text-yellow-500 text-2xl font-bold">2</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Book Online</h3> |
|
|
<p class="text-gray-600">Select your rental dates, add any accessories, and complete your booking with our secure payment system.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-lg shadow text-center"> |
|
|
<div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> |
|
|
<span class="text-yellow-500 text-2xl font-bold">3</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3">Pick Up & Ride</h3> |
|
|
<p class="text-gray-600">Visit our location with your license and documents, complete the paperwork, and hit the road!</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8 md:p-12"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Safety First</h3> |
|
|
<p class="text-gray-600 mb-6">We provide all necessary safety gear with every rental, including helmets, gloves, and jackets. Our bikes undergo rigorous maintenance checks before each rental.</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">Full-face helmets available in all sizes</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">Protective riding jackets and pants</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-yellow-500 mt-1 mr-2"></i> |
|
|
<span class="text-gray-700">24/7 roadside assistance</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<img src="https://images.unsplash.com/photo-1601758003122-53c40e686a19?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Safety Gear" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="testimonials" class="py-16 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">What Our Customers Say</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Don't just take our word for it. Here's what our riders have to say about their experiences.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="testimonial-card bg-gray-100 p-8 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-500 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"Renting from RideEasy was a breeze! The bike was in perfect condition, and the staff was incredibly helpful. Will definitely use them again for my next trip."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Sarah J.</h4> |
|
|
<p class="text-gray-600">Adventure Rider</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-gray-100 p-8 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-500 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"As a first-time renter, I was nervous, but the team at RideEasy made everything so simple. The bike was fantastic, and I had an amazing weekend exploring the coast."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Michael T.</h4> |
|
|
<p class="text-gray-600">First-time Renter</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="testimonial-card bg-gray-100 p-8 rounded-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-500 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"I've rented from several companies, but RideEasy stands out for their customer service and bike quality. The Harley I rented was flawless and made my trip unforgettable."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M." class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-900">Lisa M.</h4> |
|
|
<p class="text-gray-600">Experienced Rider</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-yellow-500 py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-3xl font-bold text-white mb-6">Ready for Your Next Adventure?</h2> |
|
|
<p class="text-xl text-white mb-8 max-w-3xl mx-auto">Join thousands of riders who've discovered the freedom of motorcycle travel with RideEasy.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#bikes" class="bg-white hover:bg-gray-100 text-yellow-500 font-bold py-3 px-8 rounded-lg transition duration-300">Browse Bikes</a> |
|
|
<a href="#contact" class="bg-transparent hover:bg-white hover:text-yellow-500 text-white font-bold py-3 px-8 border-2 border-white rounded-lg transition duration-300">Contact Us</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-gray-100"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Contact Us</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Have questions? We're here to help. Reach out to our friendly team.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 p-8 md:p-12"> |
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-6">Get In Touch</h3> |
|
|
<form> |
|
|
<div class="mb-4"> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label> |
|
|
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> |
|
|
Send Message |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
<div class="md:w-1/2 bg-gray-900 text-white p-8 md:p-12"> |
|
|
<h3 class="text-2xl font-bold mb-6">Our Locations</h3> |
|
|
<div class="mb-8"> |
|
|
<h4 class="text-xl font-semibold mb-2">Headquarters</h4> |
|
|
<p class="text-gray-300 mb-1">123 Motor Avenue</p> |
|
|
<p class="text-gray-300 mb-1">Bike City, BC 12345</p> |
|
|
<p class="text-gray-300">United States</p> |
|
|
</div> |
|
|
<div class="mb-8"> |
|
|
<h4 class="text-xl font-semibold mb-2">Contact Info</h4> |
|
|
<p class="text-gray-300 mb-1 flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-2 text-yellow-500"></i> (123) 456-7890 |
|
|
</p> |
|
|
<p class="text-gray-300 mb-1 flex items-center"> |
|
|
<i class="fas fa-envelope mr-2 text-yellow-500"></i> [email protected] |
|
|
</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-semibold mb-4">Opening Hours</h4> |
|
|
<div class="space-y-2"> |
|
|
<p class="text-gray-300 flex justify-between"> |
|
|
<span>Monday - Friday</span> |
|
|
<span>8:00 AM - 8:00 PM</span> |
|
|
</p> |
|
|
<p class="text-gray-300 flex justify-between"> |
|
|
<span>Saturday</span> |
|
|
<span>9:00 AM - 6:00 PM</span> |
|
|
</p> |
|
|
<p class="text-gray-300 flex justify-between"> |
|
|
<span>Sunday</span> |
|
|
<span>10:00 AM - 4:00 PM</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<div class="flex items-center mb-4"> |
|
|
<i class="fas fa-motorcycle text-2xl text-yellow-500 mr-2"></i> |
|
|
<span class="text-xl font-bold">RideEasy</span> |
|
|
</div> |
|
|
<p class="text-gray-400 mb-4">Your trusted partner for motorcycle rentals and adventures.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Quick Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-yellow-500 transition duration-300">Home</a></li> |
|
|
<li><a href="#bikes" class="text-gray-400 hover:text-yellow-500 transition duration-300">Our Bikes</a></li> |
|
|
<li><a href="#how" class="text-gray-400 hover:text-yellow-500 transition duration-300">How It Works</a></li> |
|
|
<li><a href="#testimonials" class="text-gray-400 hover:text-yellow-500 transition duration-300">Testimonials</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-yellow-500 transition duration-300">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Bike Types</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Sport Bikes</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Cruisers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Adventure Bikes</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Touring Bikes</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Scooters</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Newsletter</h3> |
|
|
<p class="text-gray-400 mb-4">Subscribe to get updates on new bikes and special offers.</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> |
|
|
<button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-r-lg transition duration-300"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 RideEasy Motorcycle Rentals. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
targetElement.scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const sections = document.querySelectorAll('section'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.classList.add('fade-in'); |
|
|
} |
|
|
}); |
|
|
}, { |
|
|
threshold: 0.1 |
|
|
}); |
|
|
|
|
|
sections.forEach(section => { |
|
|
observer.observe(section); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=HakDEV/motorent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
