сразу после херо секции добавь блок с карточками игровых автоматов ,4 карточки в ряд ,нужно сделать 3 ряда таких карточек

index.html

@@ -323,10 +323,171 @@ transition: max-height 0.5s ease-in-out;
     </div>
 </div>
 </header>
-<!-- Hero offset -->
-<div class="h-20"></div>
-<div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
-    <!-- Hero Section -->
+    <!-- Hero offset -->
+    <div class="h-20"></div>
+    <div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
+
+    <!-- Slots Grid Section -->
+    <section class="py-12">
+        <div class="container mx-auto px-4">
+            <h2 class="bebas text-4xl md:text-5xl text-center gold-text mb-8">ПОПУЛЯРНЫЕ СЛОТЫ</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                <!-- Row 1 -->
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/1" alt="Book of Ra" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Book of Ra</h3>
+                        <p class="text-gray-300 text-sm mb-2">Novomatic</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.5% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/2" alt="Starburst" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Starburst</h3>
+                        <p class="text-gray-300 text-sm mb-2">NetEnt</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.1% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/3" alt="Gonzo's Quest" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Gonzo's Quest</h3>
+                        <p class="text-gray-300 text-sm mb-2">NetEnt</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">95.7% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/4" alt="Mega Moolah" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Mega Moolah</h3>
+                        <p class="text-gray-300 text-sm mb-2">Microgaming</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">88.1% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                <!-- Row 2 -->
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/5" alt="Dead or Alive" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Dead or Alive</h3>
+                        <p class="text-gray-300 text-sm mb-2">NetEnt</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.8% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/6" alt="Bonanza" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Bonanza</h3>
+                        <p class="text-gray-300 text-sm mb-2">Big Time Gaming</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.0% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/7" alt="Jammin' Jars" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Jammin' Jars</h3>
+                        <p class="text-gray-300 text-sm mb-2">Push Gaming</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.8% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/8" alt="Reactoonz" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Reactoonz</h3>
+                        <p class="text-gray-300 text-sm mb-2">Play'n GO</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.5% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <!-- Row 3 -->
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/9" alt="Wolf Gold" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Wolf Gold</h3>
+                        <p class="text-gray-300 text-sm mb-2">Pragmatic Play</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.0% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/10" alt="Book of Dead" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Book of Dead</h3>
+                        <p class="text-gray-300 text-sm mb-2">Play'n GO</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.2% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/11" alt="Sweet Bonanza" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Sweet Bonanza</h3>
+                        <p class="text-gray-300 text-sm mb-2">Pragmatic Play</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.5% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card-gradient rounded-lg overflow-hidden transition-transform hover:scale-105">
+                    <img src="https://static.photos/gaming/640x360/12" alt="Fire Joker" class="w-full h-40 object-cover">
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1">Fire Joker</h3>
+                        <p class="text-gray-300 text-sm mb-2">Play'n GO</p>
+                        <div class="flex justify-between items-center">
+                            <span class="text-yellow-400 text-sm">96.1% RTP</span>
+                            <button class="bg-yellow-500 text-black px-3 py-1 rounded text-xs font-bold">Играть</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="site-wrapper w-full max-w-[1200px] mx-auto px-4">
+<!-- Hero Section -->
 <section class="pt-12 pb-16 relative overflow-hidden">
 <div class="absolute inset-0 bg-cover bg-center opacity-30 bg-[length:70%]" style="background-image: url('https://testsite.casino-ya.ru/azino/images/59.jpg')"></div>
 <div class="absolute inset-0 overflow-hidden"></div>