Have it so you pick the car and teach with deep down boxes and this app it dedicated to the game assetto corsa competition for Xbox so you only need the cards and tracks that are on the game

cars.html

@@ -63,64 +63,64 @@
 
             <!-- Cars Grid -->
             <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                <!-- Car Card 1 -->
+                <!-- GT3 Cars -->
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1563720223480-8d84b3e32e5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Ferrari 488 GT3" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
+                        <img src="http://static.photos/automotive/640x360/1" alt="Aston Martin Vantage GT3" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Ferrari 488 GT3</h3>
+                            <h3 class="text-xl font-bold">Aston Martin Vantage GT3</h3>
                             <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.8
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.5
                             </span>
                         </div>
-                        <p class="text-gray-300 text-sm mb-4">Mid-engine Italian thoroughbred with balanced handling</p>
+                        <p class="text-gray-300 text-sm mb-4">British muscle with refined aerodynamics</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-sm text-gray-400">47 setups</span>
+                            <span class="text-sm text-gray-400">34 setups</span>
                             <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
                                 View
                             </button>
                         </div>
                     </div>
                 </div>
-                <!-- Car Card 2 -->
+
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Porsche 911 GT3 R" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
+                        <img src="http://static.photos/automotive/640x360/2" alt="Audi R8 LMS GT3" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Porsche 911 GT3 R</h3>
+                            <h3 class="text-xl font-bold">Audi R8 LMS GT3</h3>
                             <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.7
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.6
                             </span>
                         </div>
-                        <p class="text-gray-300 text-sm mb-4">Rear-engine precision with exceptional cornering</p>
+                        <p class="text-gray-300 text-sm mb-4">German engineering with excellent traction</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-sm text-gray-400">52 setups</span>
+                            <span class="text-sm text-gray-400">42 setups</span>
                             <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
                                 View
                             </button>
                         </div>
                     </div>
                 </div>
-                <!-- Car Card 3 -->
+
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1555215695-3004980ad54e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="BMW M4 GT3" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
+                        <img src="http://static.photos/automotive/640x360/3" alt="Bentley Continental GT3" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">BMW M4 GT3</h3>
+                            <h3 class="text-xl font-bold">Bentley Continental GT3</h3>
                             <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.6
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.4
                             </span>
                         </div>
-                        <p class="text-gray-300 text-sm mb-4">Powerful German machine with stable aero</p>
+                        <p class="text-gray-300 text-sm mb-4">Powerful British grand tourer</p>
                         <div class="flex justify-between items-center">
                             <span class="text-sm text-gray-400">38 setups</span>
                             <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
@@ -129,55 +129,56 @@
                         </div>
                     </div>
                 </div>
-                <!-- Car Card 4 -->
+
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1626668893642-698d46b3d6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="McLaren 720S GT3" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
+                        <img src="http://static.photos/automotive/640x360/4" alt="BMW M4 GT3" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">McLaren 720S GT3</h3>
+                            <h3 class="text-xl font-bold">BMW M4 GT3</h3>
                             <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.5
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.6
                             </span>
                         </div>
-                        <p class="text-gray-300 text-sm mb-4">British engineering with exceptional downforce</p>
+                        <p class="text-gray-300 text-sm mb-4">Powerful German machine with stable aero</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-sm text-gray-400">41 setups</span>
+                            <span class="text-sm text-gray-400">38 setups</span>
                             <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
                                 View
                             </button>
                         </div>
                     </div>
                 </div>
-                <!-- Car Card 5 -->
+
+                <!-- GT4 Cars -->
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1592198084033-aade902d1aae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Porsche 718 Cayman GT4" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">GT4</span>
+                        <img src="http://static.photos/automotive/640x360/5" alt="Aston Martin Vantage GT4" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">GT4</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Porsche 718 Cayman GT4</h3>
+                            <h3 class="text-xl font-bold">Aston Martin Vantage GT4</h3>
                             <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.7
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.5
                             </span>
                         </div>
-                        <p class="text-gray-300 text-sm mb-4">Mid-engine balance perfect for GT4 racing</p>
+                        <p class="text-gray-300 text-sm mb-4">Balanced British GT4 contender</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-sm text-gray-400">29 setups</span>
+                            <span class="text-sm text-gray-400">27 setups</span>
                             <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
                                 View
                             </button>
                         </div>
                     </div>
                 </div>
-                <!-- Car Card 6 -->
+
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="BMW M4 GT4" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">GT4</span>
+                        <img src="http://static.photos/automotive/640x360/6" alt="BMW M4 GT4" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">GT4</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
@@ -195,51 +196,29 @@
                         </div>
                     </div>
                 </div>
-                <!-- Car Card 7 -->
-                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
-                    <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Porsche 911 GT2 RS Clubsport" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-purple-600 text-white text-xs px-2 py-1 rounded-full">GT2</span>
-                    </div>
-                    <div class="p-6">
-                        <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Porsche 911 GT2 RS</h3>
-                            <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.9
-                            </span>
-                        </div>
-                        <p class="text-gray-300 text-sm mb-4">Brutal power with precision handling</p>
-                        <div class="flex justify-between items-center">
-                            <span class="text-sm text-gray-400">18 setups</span>
-                            <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
-                                View
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Car Card 8 -->
+
                 <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg car-card transition duration-300">
                     <div class="relative">
-                        <img src="https://images.unsplash.com/photo-1626668893642-698d46b3d6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Aston Martin Vantage GT3" class="w-full h-48 object-cover">
-<span class="absolute top-3 right-3 bg-red-600 text-white text-xs px-2 py-1 rounded-full">GT3</span>
+                        <img src="http://static.photos/automotive/640x360/7" alt="Porsche 718 Cayman GT4" class="w-full h-48 object-cover">
+                        <span class="absolute top-3 right-3 bg-blue-600 text-white text-xs px-2 py-1 rounded-full">GT4</span>
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-xl font-bold">Aston Martin Vantage GT3</h3>
+                            <h3 class="text-xl font-bold">Porsche 718 Cayman GT4</h3>
                             <span class="text-yellow-400 text-sm flex items-center">
-                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.5
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> 4.7
                             </span>
                         </div>
-                        <p class="text-gray-300 text-sm mb-4">British muscle with refined aerodynamics</p>
+                        <p class="text-gray-300 text-sm mb-4">Mid-engine balance perfect for GT4 racing</p>
                         <div class="flex justify-between items-center">
-                            <span class="text-sm text-gray-400">34 setups</span>
+                            <span class="text-sm text-gray-400">29 setups</span>
                             <button class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded-lg text-sm font-medium transition">
                                 View
                             </button>
                         </div>
                     </div>
                 </div>
-            </div>
+</div>
 
             <!-- Pagination -->
             <div class="mt-12 flex justify-center">

index.html

@@ -67,40 +67,29 @@
             <section class="mb-20">
                 <h2 class="text-3xl font-bold mb-12 text-center">Available Car Classes</h2>
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <!-- GT3 Card -->
-                    <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg setup-card transition duration-300">
-                        <img src="https://images.unsplash.com/photo-1563720223480-8d84b3e32e5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="GT3 Car" class="w-full h-48 object-cover">
-<div class="p-6">
-                            <h3 class="text-xl font-bold mb-2">GT3 Class</h3>
-                            <p class="text-gray-300 mb-4">Precision setups for all GT3 models including Ferrari 488, Porsche 911 GT3 R, and more.</p>
-                            <a href="cars.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
-                                View 32 GT3 Cars
-                            </a>
-</div>
-                    </div>
-                    <!-- GT4 Card -->
-                    <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg setup-card transition duration-300">
-                        <img src="https://images.unsplash.com/photo-1592198084033-aade902d1aae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="GT4 Car" class="w-full h-48 object-cover">
-<div class="p-6">
-                            <h3 class="text-xl font-bold mb-2">GT4 Class</h3>
-                            <p class="text-gray-300 mb-4">Competitive configurations for GT4 vehicles like the BMW M4 GT4 and Porsche 718 Cayman GT4.</p>
-                            <a href="cars.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
-                                View 18 GT4 Cars
-                            </a>
-</div>
+                <!-- GT3 Card -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg setup-card transition duration-300">
+                    <img src="http://static.photos/automotive/640x360/1" alt="GT3 Car" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">GT3 Class</h3>
+                        <p class="text-gray-300 mb-4">Precision setups for GT3 models including Aston Martin Vantage, Audi R8 LMS, and BMW M4 GT3.</p>
+                        <a href="cars.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                            View GT3 Cars
+                        </a>
                     </div>
-                    <!-- GT2 Card -->
-                    <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg setup-card transition duration-300">
-                        <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="GT2 Car" class="w-full h-48 object-cover">
-<div class="p-6">
-                            <h3 class="text-xl font-bold mb-2">GT2 Class</h2>
-                            <p class="text-gray-300 mb-4">Specialized setups for GT2 machines including the Porsche 911 GT2 RS Clubsport.</p>
-                            <a href="cars.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
-                                View 5 GT2 Cars
-                            </a>
-</div>
+                </div>
+                <!-- GT4 Card -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg setup-card transition duration-300">
+                    <img src="http://static.photos/automotive/640x360/2" alt="GT4 Car" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold mb-2">GT4 Class</h3>
+                        <p class="text-gray-300 mb-4">Competitive configurations for GT4 vehicles like the Aston Martin Vantage GT4 and Porsche 718 Cayman GT4.</p>
+                        <a href="cars.html" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                            View GT4 Cars
+                        </a>
                     </div>
                 </div>
+</div>
             </section>
 
             <!-- Featured Tracks -->