|
|
{% extends "base.html" %} |
|
|
|
|
|
{% block content %} |
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-20 mb-12 rounded-lg"> |
|
|
<div class="container mx-auto text-center"> |
|
|
<h1 class="text-5xl font-bold mb-4">Find Your Dream Car</h1> |
|
|
<p class="text-xl mb-8">Browse through our extensive collection of quality vehicles</p> |
|
|
{% if session.get('user_id') and session.get('role') == 'buyer' %} |
|
|
<a href="#cars" class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300"> |
|
|
Browse Cars |
|
|
</a> |
|
|
{% else %} |
|
|
<a href="{{ url_for('register') }}" class="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300"> |
|
|
Get Started |
|
|
</a> |
|
|
{% endif %} |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="cars" class="mb-12"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8">Available Cars</h2> |
|
|
|
|
|
{% if cars %} |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
{% for car in cars %} |
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition duration-300"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">{{ car.name }}</h3> |
|
|
<p class="text-gray-600 mb-2">Year: {{ car.year }}</p> |
|
|
<p class="text-2xl font-bold text-blue-600 mb-4">${{ car.price }}</p> |
|
|
<p class="text-gray-700 mb-4">{{ car.description }}</p> |
|
|
|
|
|
{% if session.get('user_id') and session.get('role') == 'buyer' %} |
|
|
<a href="{{ url_for('book_appointment', car_id=car._id) }}" |
|
|
class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition duration-300 block text-center"> |
|
|
Book Appointment |
|
|
</a> |
|
|
{% elif not session.get('user_id') %} |
|
|
<p class="text-red-500 text-center">Please login as buyer to book appointment</p> |
|
|
{% endif %} |
|
|
</div> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
{% else %} |
|
|
<div class="text-center py-12"> |
|
|
<p class="text-xl text-gray-600">No cars available at the moment. Check back later!</p> |
|
|
</div> |
|
|
{% endif %} |
|
|
</section> |
|
|
{% endblock %} |
