Create templates/index.html

templates/index.html

@@ -0,0 +1,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 %}