File size: 2,384 Bytes
ae0e2c4 7472f96 ae0e2c4 7472f96 ae0e2c4 7472f96 ae0e2c4 7472f96 ae0e2c4 |
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 |
{% extends "base.html" %}
{% block content %}
<!-- Hero Section -->
<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>
<!-- Cars 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 %} |