diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,36 +3,28 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>QuickBite - Food & Grocery Delivery</title>
+    <title>Aires Solutions | Game Development & IoT Innovation</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .gradient-bg {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            background: linear-gradient(135deg, #000428 0%, #004e92 100%);
         }
-        .food-card:hover {
+        .tech-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            box-shadow: 0 10px 25px rgba(0, 78, 146, 0.3);
         }
-        .map-container {
-            height: 300px;
-            background-color: #e5e7eb;
-            border-radius: 0.75rem;
-            position: relative;
-            overflow: hidden;
+        .game-card:hover {
+            transform: scale(1.03);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
         }
-        .map-placeholder {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #e5e7eb;
-            color: #6b7280;
-            font-weight: 500;
+        .iot-animation {
+            animation: pulse 4s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(0, 78, 146, 0.4); }
+            70% { box-shadow: 0 0 0 15px rgba(0, 78, 146, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(0, 78, 146, 0); }
         }
         .modal {
             transition: opacity 0.3s ease, visibility 0.3s ease;
@@ -41,894 +33,1002 @@
             opacity: 0;
             visibility: hidden;
         }
-        .cart-item-enter {
-            animation: slideIn 0.3s forwards;
-        }
-        .cart-item-exit {
-            animation: slideOut 0.3s forwards;
-        }
-        @keyframes slideIn {
-            from { transform: translateX(100%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
+        .marquee {
+            animation: marquee 30s linear infinite;
         }
-        @keyframes slideOut {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(100%); opacity: 0; }
+        @keyframes marquee {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
         }
     </style>
 </head>
-<body class="gradient-bg min-h-screen">
+<body class="min-h-screen bg-gray-100">
     <!-- Navigation -->
-    <nav class="bg-white shadow-lg">
-        <div class="max-w-6xl mx-auto px-4">
+    <nav class="gradient-bg text-white shadow-xl sticky top-0 z-50">
+        <div class="max-w-7xl mx-auto px-4">
             <div class="flex justify-between items-center py-4">
                 <div class="flex items-center space-x-4">
-                    <div class="text-2xl font-bold text-indigo-600">QuickBite</div>
-                    <div class="hidden md:flex items-center space-x-1">
-                        <a href="#" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Home</a>
-                        <a href="#restaurants" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Restaurants</a>
-                        <a href="#groceries" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Groceries</a>
-                        <a href="#stores" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Nearby Stores</a>
+                    <div class="flex items-center">
+                        <i class="fas fa-robot text-3xl text-blue-300 mr-2"></i>
+                        <span class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-white">Aires Solutions</span>
+                    </div>
+                    <div class="hidden lg:flex items-center space-x-6">
+                        <a href="#solutions" class="hover:text-blue-300 transition">Solutions</a>
+                        <a href="#games" class="hover:text-blue-300 transition">Games</a>
+                        <a href="#iot" class="hover:text-blue-300 transition">IoT & Robotics</a>
+                        <a href="#about" class="hover:text-blue-300 transition">About Us</a>
+                        <a href="#clients" class="hover:text-blue-300 transition">Clients</a>
                     </div>
                 </div>
                 <div class="flex items-center space-x-4">
-                    <button onclick="toggleCart()" class="relative p-2 text-gray-700 hover:text-indigo-600">
-                        <i class="fas fa-shopping-cart text-xl"></i>
-                        <span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
-                    </button>
-                    <button id="auth-btn" onclick="toggleAuthModal()" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Login</button>
-                    <button class="md:hidden p-2 text-gray-700" onclick="toggleMobileMenu()">
+                    <a href="#contact" class="hidden md:inline-block bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md transition">Contact Us</a>
+                    <button class="lg:hidden p-2 text-white" onclick="toggleMobileMenu()">
                         <i class="fas fa-bars text-xl"></i>
                     </button>
                 </div>
             </div>
         </div>
         <!-- Mobile menu -->
-        <div id="mobile-menu" class="hidden md:hidden bg-white px-4 pb-4">
-            <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Home</a>
-            <a href="#restaurants" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Restaurants</a>
-            <a href="#groceries" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Groceries</a>
-            <a href="#stores" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Nearby Stores</a>
+        <div id="mobile-menu" class="lg:hidden hidden bg-blue-900 px-4 pb-4">
+            <a href="#solutions" class="block py-2 hover:text-blue-300 transition">Solutions</a>
+            <a href="#games" class="block py-2 hover:text-blue-300 transition">Games</a>
+            <a href="#iot" class="block py-2 hover:text-blue-300 transition">IoT & Robotics</a>
+            <a href="#about" class="block py-2 hover:text-blue-300 transition">About Us</a>
+            <a href="#clients" class="block py-2 hover:text-blue-300 transition">Clients</a>
+            <a href="#contact" class="block py-2 hover:text-blue-300 transition">Contact Us</a>
         </div>
     </nav>
 
     <!-- Hero Section -->
-    <section class="py-16 px-4">
-        <div class="max-w-6xl mx-auto">
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-8 md:mb-0">
-                    <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Food & Groceries Delivered to Your Door</h1>
-                    <p class="text-lg text-gray-600 mb-6">Order from your favorite restaurants and grocery stores with just a few taps.</p>
-                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
-                        <button class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition">Order Now</button>
-                        <button class="border border-indigo-600 text-indigo-600 px-6 py-3 rounded-md hover:bg-indigo-50 transition">Download App</button>
+    <section class="gradient-bg text-white py-20 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0">
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Innovative Tech <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-blue-100">Solutions</span> for the Digital Age</h1>
+                    <p class="text-xl md:text-2xl text-blue-100 mb-8">We create immersive games, cutting-edge software, and smart IoT systems that transform businesses and entertain millions.</p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <a href="#contact" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-md text-center transition">Partner With Us</a>
+                        <a href="#solutions" class="border border-blue-300 text-blue-300 hover:bg-blue-900 px-8 py-4 rounded-md text-center transition">Explore Solutions</a>
                     </div>
                 </div>
-                <div class="md:w-1/2">
-                    <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food delivery" class="rounded-lg shadow-xl w-full">
+                <div class="lg:w-1/2 relative">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1551033406-611cf9a28f67?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game development" class="rounded-lg shadow-2xl w-full">
+                        <div class="absolute -bottom-6 -right-6 bg-blue-800 p-4 rounded-lg shadow-xl hidden lg:block">
+                            <div class="flex items-center">
+                                <div class="iot-animation bg-blue-600 rounded-full p-3 mr-3">
+                                    <i class="fas fa-microchip text-white text-xl"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-blue-200">Latest IoT Project</p>
+                                    <p class="font-bold">Smart Home 2.0</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Search Section -->
-    <section class="py-8 px-4 bg-white">
-        <div class="max-w-6xl mx-auto">
-            <div class="bg-white rounded-lg shadow-md p-6">
-                <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
-                    <div class="flex-1 relative">
-                        <input type="text" placeholder="Search for restaurants or groceries..." class="w-full p-4 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                        <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
-                    </div>
-                    <div class="relative w-full md:w-auto">
-                        <select class="w-full p-4 border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                            <option>All Categories</option>
-                            <option>Restaurants</option>
-                            <option>Groceries</option>
-                            <option>Pharmacies</option>
-                        </select>
-                        <i class="fas fa-chevron-down absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
-                    </div>
-                    <button class="w-full md:w-auto bg-indigo-600 text-white px-6 py-4 rounded-lg hover:bg-indigo-700 transition">Search</button>
+    <!-- Trust Badges -->
+    <section class="py-8 bg-white">
+        <div class="max-w-7xl mx-auto px-4">
+            <div class="overflow-hidden">
+                <div class="flex space-x-12 marquee">
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Microsoft" alt="Microsoft" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Unity" alt="Unity" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Amazon+Web+Services" alt="AWS" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Google+Cloud" alt="Google Cloud" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Intel" alt="Intel" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Nvidia" alt="Nvidia" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
+                    <div class="flex-shrink-0 flex items-center">
+                        <img src="https://via.placeholder.com/150x60?text=Unreal+Engine" alt="Unreal Engine" class="h-12 opacity-70 hover:opacity-100 transition">
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Restaurants Section -->
-    <section id="restaurants" class="py-12 px-4">
-        <div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-gray-800 mb-8">Popular Restaurants</h2>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Restaurant Card 1 -->
-                <div class="bg-white rounded-lg shadow-md overflow-hidden food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Restaurant" class="w-full h-48 object-cover">
-                    <div class="p-4">
-                        <div class="flex justify-between items-start">
-                            <h3 class="text-xl font-semibold text-gray-800">Gourmet Haven</h3>
-                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">4.8 ★</span>
-                        </div>
-                        <p class="text-gray-600 mt-1">Italian, Mediterranean</p>
-                        <div class="flex items-center mt-2 text-yellow-500">
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star-half-alt"></i>
-                        </div>
-                        <div class="mt-4 flex justify-between items-center">
-                            <span class="text-gray-700">$10 - $30</span>
-                            <button onclick="addToCart('Margherita Pizza', 12.99, 'Gourmet Haven')" class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
-                        </div>
+    <!-- Solutions Section -->
+    <section id="solutions" class="py-16 px-4 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our <span class="text-blue-600">Technology Solutions</span></h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">We deliver comprehensive digital solutions tailored to your business needs, from concept to deployment.</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Solution 1 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden tech-card transition duration-300 border border-gray-100">
+                    <div class="h-48 bg-gradient-to-r from-blue-500 to-blue-700 flex items-center justify-center">
+                        <i class="fas fa-gamepad text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Game Development</h3>
+                        <p class="text-gray-600 mb-4">Immersive gaming experiences across all platforms with cutting-edge graphics and gameplay mechanics.</p>
+                        <ul class="space-y-2 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-blue-500 mr-2"></i>
+                                <span>Mobile, PC & Console games</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-blue-500 mr-2"></i>
+                                <span>VR/AR experiences</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-blue-500 mr-2"></i>
+                                <span>Multiplayer & cloud gaming</span>
+                            </li>
+                        </ul>
+                        <button onclick="openSolutionModal('Game Development')" class="text-blue-600 font-semibold hover:text-blue-800 transition">Learn More →</button>
                     </div>
                 </div>
                 
-                <!-- Restaurant Card 2 -->
-                <div class="bg-white rounded-lg shadow-md overflow-hidden food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Restaurant" class="w-full h-48 object-cover">
-                    <div class="p-4">
-                        <div class="flex justify-between items-start">
-                            <h3 class="text-xl font-semibold text-gray-800">Spice Kingdom</h3>
-                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">4.5 ★</span>
-                        </div>
-                        <p class="text-gray-600 mt-1">Indian, Asian</p>
-                        <div class="flex items-center mt-2 text-yellow-500">
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="far fa-star"></i>
-                        </div>
-                        <div class="mt-4 flex justify-between items-center">
-                            <span class="text-gray-700">$8 - $25</span>
-                            <button onclick="addToCart('Butter Chicken', 14.99, 'Spice Kingdom')" class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
-                        </div>
+                <!-- Solution 2 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden tech-card transition duration-300 border border-gray-100">
+                    <div class="h-48 bg-gradient-to-r from-purple-500 to-purple-700 flex items-center justify-center">
+                        <i class="fas fa-laptop-code text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Custom Software</h3>
+                        <p class="text-gray-600 mb-4">Bespoke applications that streamline operations, enhance productivity, and drive business growth.</p>
+                        <ul class="space-y-2 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-purple-500 mr-2"></i>
+                                <span>Enterprise solutions</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-purple-500 mr-2"></i>
+                                <span>Mobile & web applications</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-purple-500 mr-2"></i>
+                                <span>Cloud-native development</span>
+                            </li>
+                        </ul>
+                        <button onclick="openSolutionModal('Custom Software')" class="text-purple-600 font-semibold hover:text-purple-800 transition">Learn More →</button>
                     </div>
                 </div>
                 
-                <!-- Restaurant Card 3 -->
-                <div class="bg-white rounded-lg shadow-md overflow-hidden food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Restaurant" class="w-full h-48 object-cover">
-                    <div class="p-4">
-                        <div class="flex justify-between items-start">
-                            <h3 class="text-xl font-semibold text-gray-800">Burger Junction</h3>
-                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">4.7 ★</span>
-                        </div>
-                        <p class="text-gray-600 mt-1">American, Fast Food</p>
-                        <div class="flex items-center mt-2 text-yellow-500">
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star-half-alt"></i>
-                        </div>
-                        <div class="mt-4 flex justify-between items-center">
-                            <span class="text-gray-700">$5 - $20</span>
-                            <button onclick="addToCart('Classic Cheeseburger', 8.99, 'Burger Junction')" class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
-                        </div>
+                <!-- Solution 3 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden tech-card transition duration-300 border border-gray-100">
+                    <div class="h-48 bg-gradient-to-r from-green-500 to-green-700 flex items-center justify-center">
+                        <i class="fas fa-robot text-white text-6xl"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">IoT & Robotics</h3>
+                        <p class="text-gray-600 mb-4">Smart connected systems and automation solutions that transform industries and daily life.</p>
+                        <ul class="space-y-2 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                <span>Industrial automation</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                <span>Smart home & city solutions</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
+                                <span>AI-powered robotics</span>
+                            </li>
+                        </ul>
+                        <button onclick="openSolutionModal('IoT & Robotics')" class="text-green-600 font-semibold hover:text-green-800 transition">Learn More →</button>
                     </div>
                 </div>
             </div>
-            <div class="mt-8 text-center">
-                <button class="border border-indigo-600 text-indigo-600 px-6 py-2 rounded-md hover:bg-indigo-50 transition">View All Restaurants</button>
-            </div>
         </div>
     </section>
 
-    <!-- Groceries Section -->
-    <section id="groceries" class="py-12 px-4 bg-gray-50">
-        <div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-gray-800 mb-8">Fresh Groceries</h2>
-            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                <!-- Grocery Item 1 -->
-                <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1589927986089-35812388d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Apples" class="w-full h-32 object-contain mb-3">
-                    <h3 class="font-medium text-gray-800">Fresh Apples</h3>
-                    <p class="text-indigo-600 font-semibold mt-1">$2.99/lb</p>
-                    <button onclick="addToCart('Fresh Apples', 2.99, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
-                </div>
-                
-                <!-- Grocery Item 2 -->
-                <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1573246123716-6b1782bfd499?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1370&q=80" alt="Milk" class="w-full h-32 object-contain mb-3">
-                    <h3 class="font-medium text-gray-800">Organic Milk</h3>
-                    <p class="text-indigo-600 font-semibold mt-1">$4.49</p>
-                    <button onclick="addToCart('Organic Milk', 4.49, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
-                </div>
-                
-                <!-- Grocery Item 3 -->
-                <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1603569283847-aa6ba8a8a022?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bread" class="w-full h-32 object-contain mb-3">
-                    <h3 class="font-medium text-gray-800">Whole Wheat Bread</h3>
-                    <p class="text-indigo-600 font-semibold mt-1">$3.29</p>
-                    <button onclick="addToCart('Whole Wheat Bread', 3.29, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
+    <!-- Game Showcase Section -->
+    <section id="games" class="py-16 px-4 bg-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Our <span class="text-blue-600">Game Portfolio</span></h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Engaging games that captivate players across all platforms and genres.</p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Game 1 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden game-card transition duration-300">
+                    <div class="relative h-64">
+                        <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game screenshot" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded">NEW RELEASE</span>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-bold text-gray-800">Galactic Conquest</h3>
+                            <div class="flex items-center">
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <span class="ml-1 font-semibold">4.9</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-600 mb-4">Strategic space exploration game with stunning visuals and deep gameplay.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Strategy</span>
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Multiplayer</span>
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">PC/Console</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <i class="fab fa-windows text-gray-500"></i>
+                                <i class="fab fa-playstation text-gray-500"></i>
+                                <i class="fab fa-xbox text-gray-500"></i>
+                            </div>
+                            <button onclick="openGameModal('Galactic Conquest')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition">View Details</button>
+                        </div>
+                    </div>
                 </div>
                 
-                <!-- Grocery Item 4 -->
-                <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1576186726115-4d51596775d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Eggs" class="w-full h-32 object-contain mb-3">
-                    <h3 class="font-medium text-gray-800">Free Range Eggs</h3>
-                    <p class="text-indigo-600 font-semibold mt-1">$5.99/dozen</p>
-                    <button onclick="addToCart('Free Range Eggs', 5.99, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
+                <!-- Game 2 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden game-card transition duration-300">
+                    <div class="relative h-64">
+                        <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Game screenshot" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <span class="bg-green-600 text-white text-xs px-2 py-1 rounded">MOBILE</span>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-bold text-gray-800">Mystic Quest</h3>
+                            <div class="flex items-center">
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <span class="ml-1 font-semibold">4.7</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-600 mb-4">Adventure RPG with captivating story and beautiful open world.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">RPG</span>
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Adventure</span>
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Mobile</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <i class="fab fa-apple text-gray-500"></i>
+                                <i class="fab fa-android text-gray-500"></i>
+                            </div>
+                            <button onclick="openGameModal('Mystic Quest')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition">View Details</button>
+                        </div>
+                    </div>
                 </div>
                 
-                <!-- Grocery Item 5 -->
-                <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
-                    <img src="https://images.unsplash.com/photo-1603048719535-4b6b68c23805?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chicken" class="w-full h-32 object-contain mb-3">
-                    <h3 class="font-medium text-gray-800">Boneless Chicken</h3>
-                    <p class="text-indigo-600 font-semibold mt-1">$7.99/lb</p>
-                    <button onclick="addToCart('Boneless Chicken', 7.99, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
+                <!-- Game 3 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden game-card transition duration-300">
+                    <div class="relative h-64">
+                        <img src="https://images.unsplash.com/photo-1586182987320-4a8d3207c6c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game screenshot" class="w-full h-full object-cover">
+                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
+                            <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded">VR EXPERIENCE</span>
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h3 class="text-xl font-bold text-gray-800">Neon Arena</h3>
+                            <div class="flex items-center">
+                                <i class="fas fa-star text-yellow-400"></i>
+                                <span class="ml-1 font-semibold">4.8</span>
+                            </div>
+                        </div>
+                        <p class="text-gray-600 mb-4">Fast-paced VR shooter with competitive multiplayer and esports potential.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">FPS</span>
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">VR</span>
+                            <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Esports</span>
+                        </div>
+                        <div class="flex justify-between items-center">
+                            <div class="flex space-x-2">
+                                <i class="fab fa-oculus text-gray-500"></i>
+                                <i class="fab fa-steam text-gray-500"></i>
+                            </div>
+                            <button onclick="openGameModal('Neon Arena')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition">View Details</button>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="mt-8 text-center">
-                <button class="border border-indigo-600 text-indigo-600 px-6 py-2 rounded-md hover:bg-indigo-50 transition">Browse All Groceries</button>
+            
+            <div class="mt-12 text-center">
+                <button class="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 rounded-md font-semibold transition">View All Games</button>
             </div>
         </div>
     </section>
 
-    <!-- Nearby Stores Section -->
-    <section id="stores" class="py-12 px-4">
-        <div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-gray-800 mb-8">Nearby Stores</h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <!-- Map Section -->
-                <div class="map-container">
-                    <div class="map-placeholder">
-                        <div class="text-center">
-                            <i class="fas fa-map-marker-alt text-4xl mb-2"></i>
-                            <p>Interactive map showing nearby stores</p>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- Store List -->
+    <!-- IoT & Robotics Section -->
+    <section id="iot" class="py-16 px-4 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">IoT & <span class="text-blue-600">Robotics</span> Solutions</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">Transforming industries with smart automation and connected systems.</p>
+            </div>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                 <div>
-                    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
-                        <div class="p-4 flex items-center">
-                            <img src="https://images.unsplash.com/photo-1601593763799-41a03c5c5393?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="QuickMart" class="w-16 h-16 object-cover rounded-md">
-                            <div class="ml-4 flex-1">
-                                <h3 class="font-semibold text-gray-800">QuickMart</h3>
-                                <p class="text-sm text-gray-600">0.5 miles away • Groceries, Household</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-yellow-500 text-sm">4.4 ★</span>
-                                    <span class="mx-2 text-gray-300">•</span>
-                                    <span class="text-sm text-gray-600">15-30 min delivery</span>
-                                </div>
+                    <div class="bg-gray-100 rounded-xl p-8 mb-8">
+                        <div class="flex items-start">
+                            <div class="bg-blue-600 text-white p-3 rounded-full mr-4">
+                                <i class="fas fa-network-wired text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Industrial Automation</h3>
+                                <p class="text-gray-600">Our IoT systems optimize manufacturing processes, reduce downtime, and increase efficiency by up to 40%.</p>
                             </div>
-                            <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Shop Now</button>
                         </div>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
-                        <div class="p-4 flex items-center">
-                            <img src="https://images.unsplash.com/photo-1604719312566-8912e4227c9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="FreshMarket" class="w-16 h-16 object-cover rounded-md">
-                            <div class="ml-4 flex-1">
-                                <h3 class="font-semibold text-gray-800">FreshMarket</h3>
-                                <p class="text-sm text-gray-600">1.2 miles away • Organic, Produce</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-yellow-500 text-sm">4.7 ★</span>
-                                    <span class="mx-2 text-gray-300">•</span>
-                                    <span class="text-sm text-gray-600">20-40 min delivery</span>
-                                </div>
+                    <div class="bg-gray-100 rounded-xl p-8 mb-8">
+                        <div class="flex items-start">
+                            <div class="bg-green-600 text-white p-3 rounded-full mr-4">
+                                <i class="fas fa-home text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Smart Home Systems</h3>
+                                <p class="text-gray-600">Complete home automation solutions that learn your habits and adapt to your lifestyle.</p>
                             </div>
-                            <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Shop Now</button>
                         </div>
                     </div>
                     
-                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
-                        <div class="p-4 flex items-center">
-                            <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="PharmaPlus" class="w-16 h-16 object-cover rounded-md">
-                            <div class="ml-4 flex-1">
-                                <h3 class="font-semibold text-gray-800">PharmaPlus</h3>
-                                <p class="text-sm text-gray-600">0.8 miles away • Pharmacy, Essentials</p>
-                                <div class="flex items-center mt-1">
-                                    <span class="text-yellow-500 text-sm">4.3 ★</span>
-                                    <span class="mx-2 text-gray-300">•</span>
-                                    <span class="text-sm text-gray-600">25-45 min delivery</span>
-                                </div>
+                    <div class="bg-gray-100 rounded-xl p-8">
+                        <div class="flex items-start">
+                            <div class="bg-purple-600 text-white p-3 rounded-full mr-4">
+                                <i class="fas fa-robot text-xl"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-800 mb-2">Service Robotics</h3>
+                                <p class="text-gray-600">From healthcare assistants to warehouse logistics, our robots are revolutionizing service industries.</p>
                             </div>
-                            <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Shop Now</button>
                         </div>
                     </div>
                 </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- How It Works Section -->
-    <section class="py-12 px-4 bg-gray-50">
-        <div class="max-w-6xl mx-auto">
-            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">How It Works</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="text-center">
-                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-store text-indigo-600 text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold text-gray-800 mb-2">1. Choose Store</h3>
-                    <p class="text-gray-600">Browse restaurants and grocery stores near you</p>
-                </div>
-                <div class="text-center">
-                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-utensils text-indigo-600 text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold text-gray-800 mb-2">2. Select Items</h3>
-                    <p class="text-gray-600">Add your favorite food or groceries to your cart</p>
-                </div>
-                <div class="text-center">
-                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-truck text-indigo-600 text-2xl"></i>
+                
+                <div class="relative">
+                    <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="IoT technology" class="rounded-xl shadow-xl w-full">
+                    <div class="absolute -bottom-6 -right-6 bg-blue-800 text-white p-6 rounded-xl shadow-xl max-w-xs">
+                        <h3 class="font-bold mb-2">Case Study</h3>
+                        <p class="text-sm mb-2">Smart Factory implementation increased production by 35%</p>
+                        <button class="text-blue-200 hover:text-white text-sm font-semibold transition">Read Case Study →</button>
                     </div>
-                    <h3 class="text-xl font-semibold text-gray-800 mb-2">3. Fast Delivery</h3>
-                    <p class="text-gray-600">Track your order as it's prepared and delivered</p>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-12 px-4">
-        <div class="max-w-6xl mx-auto">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+    <!-- Stats Section -->
+    <section class="gradient-bg text-white py-16 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                 <div>
-                    <h3 class="text-xl font-bold mb-4">QuickBite</h3>
-                    <p class="text-gray-400">Food and groceries delivered to your door in minutes.</p>
-                    <div class="flex space-x-4 mt-4">
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
-                    </div>
+                    <div class="text-4xl md:text-5xl font-bold mb-2">150+</div>
+                    <p class="text-blue-200">Games Developed</p>
                 </div>
                 <div>
-                    <h4 class="font-semibold mb-4">Company</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
-                    </ul>
+                    <div class="text-4xl md:text-5xl font-bold mb-2">40M+</div>
+                    <p class="text-blue-200">Active Users</p>
                 </div>
                 <div>
-                    <h4 class="font-semibold mb-4">Support</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
-                    </ul>
+                    <div class="text-4xl md:text-5xl font-bold mb-2">500+</div>
+                    <p class="text-blue-200">IoT Systems Deployed</p>
                 </div>
                 <div>
-                    <h4 class="font-semibold mb-4">Download App</h4>
-                    <div class="space-y-3">
-                        <button class="flex items-center bg-black text-white px-4 py-2 rounded-md w-full">
-                            <i class="fab fa-apple text-2xl mr-2"></i>
-                            <div class="text-left">
-                                <div class="text-xs">Download on the</div>
-                                <div class="font-semibold">App Store</div>
-                            </div>
-                        </button>
-                        <button class="flex items-center bg-black text-white px-4 py-2 rounded-md w-full">
-                            <i class="fab fa-google-play text-2xl mr-2"></i>
-                            <div class="text-left">
-                                <div class="text-xs">Get it on</div>
-                                <div class="font-semibold">Google Play</div>
-                            </div>
-                        </button>
-                    </div>
+                    <div class="text-4xl md:text-5xl font-bold mb-2">85+</div>
+                    <p class="text-blue-200">Countries Served</p>
                 </div>
             </div>
-            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
-                <p>© 2023 QuickBite. All rights reserved.</p>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-16 px-4 bg-gray-50">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col lg:flex-row items-center">
+                <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
+                    <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Our <span class="text-blue-600">Story</span></h2>
+                    <p class="text-gray-600 mb-6">Founded in 2010, Aires Solutions began as a small game development studio with a passion for creating immersive experiences. As technology evolved, so did we, expanding into software development and IoT solutions.</p>
+                    <p class="text-gray-600 mb-8">Today, we're a team of 200+ engineers, designers, and innovators committed to pushing the boundaries of what's possible in digital technology.</p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md transition">Meet Our Team</button>
+                        <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-md transition">Careers</button>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="bg-white p-6 rounded-xl shadow-md">
+                            <i class="fas fa-bullseye text-blue-600 text-3xl mb-4"></i>
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">Our Mission</h3>
+                            <p class="text-gray-600">To create technology that entertains, empowers, and enhances lives through innovation.</p>
+                        </div>
+                        <div class="bg-white p-6 rounded-xl shadow-md">
+                            <i class="fas fa-eye text-blue-600 text-3xl mb-4"></i>
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">Our Vision</h3>
+                            <p class="text-gray-600">To be the global leader in integrated digital experiences across gaming, software, and IoT.</p>
+                        </div>
+                        <div class="bg-white p-6 rounded-xl shadow-md">
+                            <i class="fas fa-heart text-blue-600 text-3xl mb-4"></i>
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">Our Values</h3>
+                            <p class="text-gray-600">Innovation, Quality, Integrity, and Passion drive everything we do.</p>
+                        </div>
+                        <div class="bg-white p-6 rounded-xl shadow-md">
+                            <i class="fas fa-trophy text-blue-600 text-3xl mb-4"></i>
+                            <h3 class="text-xl font-bold text-gray-800 mb-2">Our Achievements</h3>
+                            <p class="text-gray-600">15 industry awards in the last 3 years for excellence in technology and design.</p>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-    </footer>
+    </section>
 
-    <!-- Shopping Cart Sidebar -->
-    <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
-        <div class="p-6">
-            <div class="flex justify-between items-center mb-6">
-                <h2 class="text-xl font-bold">Your Cart</h2>
-                <button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700">
-                    <i class="fas fa-times"></i>
-                </button>
+    <!-- Clients Section -->
+    <section id="clients" class="py-16 px-4 bg-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Trusted By <span class="text-blue-600">Industry Leaders</span></h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">We partner with organizations across industries to deliver transformative technology solutions.</p>
             </div>
             
-            <div id="cart-items" class="space-y-4">
-                <!-- Cart items will be added here dynamically -->
-                <div class="text-center py-8 text-gray-500" id="empty-cart-message">
-                    <i class="fas fa-shopping-cart text-4xl mb-2"></i>
-                    <p>Your cart is empty</p>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-16">
+                <div class="bg-gray-50 p-8 rounded-xl flex items-center justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=TechGiant" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition">
                 </div>
-            </div>
-            
-            <div class="border-t border-gray-200 mt-6 pt-4">
-                <div class="flex justify-between mb-2">
-                    <span class="text-gray-600">Subtotal</span>
-                    <span id="cart-subtotal" class="font-semibold">$0.00</span>
+                <div class="bg-gray-50 p-8 rounded-xl flex items-center justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=AutoCorp" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition">
                 </div>
-                <div class="flex justify-between mb-2">
-                    <span class="text-gray-600">Delivery Fee</span>
-                    <span id="delivery-fee" class="font-semibold">$2.99</span>
+                <div class="bg-gray-50 p-8 rounded-xl flex items-center justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=HealthPlus" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition">
                 </div>
-                <div class="flex justify-between mb-4">
-                    <span class="text-gray-600">Tax</span>
-                    <span id="cart-tax" class="font-semibold">$0.00</span>
+                <div class="bg-gray-50 p-8 rounded-xl flex items-center justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=EduSystems" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition">
                 </div>
-                <div class="flex justify-between text-lg font-bold">
-                    <span>Total</span>
-                    <span id="cart-total">$0.00</span>
+                <div class="bg-gray-50 p-8 rounded-xl flex items-center justify-center">
+                    <img src="https://via.placeholder.com/150x80?text=RetailChain" alt="Client logo" class="h-12 opacity-70 hover:opacity-100 transition">
                 </div>
-                
-                <button id="checkout-btn" onclick="checkout()" class="w-full bg-indigo-600 text-white py-3 rounded-md mt-6 hover:bg-indigo-700 transition disabled:opacity-50" disabled>
-                    Proceed to Checkout
-                </button>
             </div>
-        </div>
-    </div>
-    <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleCart()"></div>
-
-    <!-- Auth Modal -->
-    <div id="auth-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
-            <div class="p-6">
-                <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-xl font-bold" id="auth-modal-title">Login</h2>
-                    <button onclick="toggleAuthModal()" class="text-gray-500 hover:text-gray-700">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                
-                <div id="login-form">
-                    <div class="mb-4">
-                        <label for="login-email" class="block text-gray-700 mb-2">Email</label>
-                        <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+            
+            <div class="bg-blue-50 rounded-xl p-8 md:p-12">
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
+                        <h3 class="text-2xl font-bold text-gray-800 mb-4">Ready to Transform Your Business?</h3>
+                        <p class="text-gray-600 mb-6">Let's discuss how our technology solutions can drive your success.</p>
+                        <div class="flex items-center">
+                            <div class="bg-blue-100 text-blue-800 p-3 rounded-full mr-4">
+                                <i class="fas fa-phone-alt"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Call us anytime</p>
+                                <p class="text-lg font-semibold text-gray-800">+1 (555) 123-4567</p>
+                            </div>
+                        </div>
                     </div>
-                    <div class="mb-6">
-                        <label for="login-password" class="block text-gray-700 mb-2">Password</label>
-                        <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <div class="md:w-1/2">
+                        <form class="space-y-4">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <input type="text" placeholder="Your Name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <input type="email" placeholder="Email Address" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                            </div>
+                            <select class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
+                                <option>I'm interested in...</option>
+                                <option>Game Development</option>
+                                <option>Custom Software</option>
+                                <option>IoT Solutions</option>
+                                <option>Robotics</option>
+                                <option>Other</option>
+                            </select>
+                            <textarea placeholder="Tell us about your project" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 h-32"></textarea>
+                            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-md font-semibold transition">Get Started</button>
+                        </form>
                     </div>
-                    <button onclick="login()" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Login</button>
-                    <p class="text-center mt-4 text-gray-600">
-                        Don't have an account? 
-                        <button onclick="showRegisterForm()" class="text-indigo-600 hover:underline">Register</button>
-                    </p>
                 </div>
-                
-                <div id="register-form" class="hidden">
-                    <div class="mb-4">
-                        <label for="register-name" class="block text-gray-700 mb-2">Full Name</label>
-                        <input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div class="mb-4">
-                        <label for="register-email" class="block text-gray-700 mb-2">Email</label>
-                        <input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                    </div>
-                    <div class="mb-4">
-                        <label for="register-password" class="block text-gray-700 mb-2">Password</label>
-                        <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-16 px-4 bg-gray-900 text-white">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
+                <div>
+                    <div class="flex items-center mb-6">
+                        <i class="fas fa-robot text-3xl text-blue-400 mr-3"></i>
+                        <span class="text-2xl font-bold">Aires Solutions</span>
                     </div>
-                    <div class="mb-6">
-                        <label for="register-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
-                        <input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <p class="text-gray-400 mb-6">Innovating at the intersection of entertainment and technology to create the digital experiences of tomorrow.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
                     </div>
-                    <button onclick="register()" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Register</button>
-                    <p class="text-center mt-4 text-gray-600">
-                        Already have an account? 
-                        <button onclick="showLoginForm()" class="text-indigo-600 hover:underline">Login</button>
-                    </p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
+                    <ul class="space-y-3">
+                        <li><a href="#solutions" class="text-gray-400 hover:text-white transition">Solutions</a></li>
+                        <li><a href="#games" class="text-gray-400 hover:text-white transition">Games</a></li>
+                        <li><a href="#iot" class="text-gray-400 hover:text-white transition">IoT & Robotics</a></li>
+                        <li><a href="#about" class="text-gray-400 hover:text-white transition">About Us</a></li>
+                        <li><a href="#clients" class="text-gray-400 hover:text-white transition">Clients</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold mb-6">Contact Info</h3>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-3"></i>
+                            <span class="text-gray-400">123 Tech Park Drive, Silicon Valley, CA 94025</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt text-blue-400 mr-3"></i>
+                            <span class="text-gray-400">+1 (555) 123-4567</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope text-blue-400 mr-3"></i>
+                            <span class="text-gray-400">info@airessolutions.com</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-clock text-blue-400 mr-3"></i>
+                            <span class="text-gray-400">Mon-Fri: 9AM - 6PM PST</span>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>
-    </div>
-    <div id="auth-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleAuthModal()"></div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-gray-400 py-6 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <p class="mb-4 md:mb-0">© 2023 Aires Solutions. All rights reserved.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="hover:text-white transition">Privacy Policy</a>
+                    <a href="#" class="hover:text-white transition">Terms of Service</a>
+                    <a href="#" class="hover:text-white transition">Cookie Policy</a>
+                </div>
+            </div>
+        </div>
+    </footer>
 
-    <!-- Checkout Modal -->
-    <div id="checkout-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto">
-            <div class="p-6">
+    <!-- Solution Modal -->
+    <div id="solution-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="p-8">
                 <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-xl font-bold">Checkout</h2>
-                    <button onclick="closeCheckoutModal()" class="text-gray-500 hover:text-gray-700">
-                        <i class="fas fa-times"></i>
+                    <h2 class="text-2xl font-bold" id="solution-modal-title">Solution Details</h2>
+                    <button onclick="closeSolutionModal()" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times text-xl"></i>
                     </button>
                 </div>
                 
-                <div class="mb-6">
-                    <h3 class="font-semibold mb-2">Delivery Address</h3>
-                    <div class="flex items-center space-x-2 mb-2">
-                        <input type="radio" id="home-address" name="address" checked>
-                        <label for="home-address">Home: 123 Main St, Apt 4B, New York, NY 10001</label>
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <input type="radio" id="work-address" name="address">
-                        <label for="work-address">Work: 456 Business Ave, Floor 12, New York, NY 10005</label>
-                    </div>
-                    <button class="text-indigo-600 text-sm mt-2 hover:underline">Add new address</button>
-                </div>
-                
-                <div class="mb-6">
-                    <h3 class="font-semibold mb-2">Delivery Time</h3>
-                    <select class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
-                        <option>ASAP (20-30 min)</option>
-                        <option>Schedule for later</option>
-                    </select>
-                </div>
-                
-                <div class="mb-6">
-                    <h3 class="font-semibold mb-2">Delivery Instructions</h3>
-                    <textarea class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Add delivery instructions (optional)"></textarea>
+                <div id="solution-modal-content">
+                    <!-- Content will be loaded here dynamically -->
                 </div>
                 
-                <div class="mb-6">
-                    <h3 class="font-semibold mb-2">Payment Method</h3>
-                    <div class="space-y-2">
-                        <div class="flex items-center space-x-2 p-3 border border-gray-300 rounded-md">
-                            <input type="radio" id="credit-card" name="payment" checked>
-                            <label for="credit-card" class="flex-1">Credit/Debit Card</label>
-                            <i class="fab fa-cc-visa text-2xl text-blue-800"></i>
-                            <i class="fab fa-cc-mastercard text-2xl text-red-600"></i>
-                        </div>
-                        <div class="flex items-center space-x-2 p-3 border border-gray-300 rounded-md">
-                            <input type="radio" id="paypal" name="payment">
-                            <label for="paypal" class="flex-1">PayPal</label>
-                            <i class="fab fa-paypal text-2xl text-blue-700"></i>
-                        </div>
-                        <div class="flex items-center space-x-2 p-3 border border-gray-300 rounded-md">
-                            <input type="radio" id="apple-pay" name="payment">
-                            <label for="apple-pay" class="flex-1">Apple Pay</label>
-                            <i class="fab fa-apple text-2xl"></i>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="border-t border-gray-200 pt-4 mb-6">
-                    <div class="flex justify-between mb-2">
-                        <span class="text-gray-600">Subtotal</span>
-                        <span id="checkout-subtotal" class="font-semibold">$0.00</span>
-                    </div>
-                    <div class="flex justify-between mb-2">
-                        <span class="text-gray-600">Delivery Fee</span>
-                        <span id="checkout-delivery" class="font-semibold">$2.99</span>
-                    </div>
-                    <div class="flex justify-between mb-2">
-                        <span class="text-gray-600">Tax</span>
-                        <span id="checkout-tax" class="font-semibold">$0.00</span>
-                    </div>
-                    <div class="flex justify-between text-lg font-bold">
-                        <span>Total</span>
-                        <span id="checkout-total">$0.00</span>
-                    </div>
+                <div class="mt-8">
+                    <button onclick="closeSolutionModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md transition">Close</button>
                 </div>
-                
-                <button onclick="placeOrder()" class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 transition">
-                    Place Order
-                </button>
             </div>
         </div>
     </div>
-    <div id="checkout-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="closeCheckoutModal()"></div>
+    <div id="solution-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="closeSolutionModal()"></div>
 
-    <!-- Order Confirmation Modal -->
-    <div id="confirmation-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 text-center p-8">
-            <div class="mb-6">
-                <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i class="fas fa-check text-green-600 text-2xl"></i>
-                </div>
-                <h2 class="text-2xl font-bold mb-2">Order Confirmed!</h2>
-                <p class="text-gray-600">Your order has been placed successfully.</p>
-            </div>
-            
-            <div class="bg-gray-50 rounded-lg p-4 mb-6">
-                <div class="flex justify-between mb-2">
-                    <span class="text-gray-600">Order #</span>
-                    <span class="font-semibold">QB-284759</span>
+    <!-- Game Modal -->
+    <div id="game-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-y-auto">
+            <div class="p-8">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold" id="game-modal-title">Game Details</h2>
+                    <button onclick="closeGameModal()" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times text-xl"></i>
+                    </button>
                 </div>
-                <div class="flex justify-between mb-2">
-                    <span class="text-gray-600">Estimated Delivery</span>
-                    <span class="font-semibold">25-35 minutes</span>
+                
+                <div id="game-modal-content">
+                    <!-- Content will be loaded here dynamically -->
                 </div>
-                <div class="flex justify-between">
-                    <span class="text-gray-600">Total</span>
-                    <span class="font-semibold" id="confirmation-total">$0.00</span>
+                
+                <div class="mt-8 flex space-x-4">
+                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md transition">View Trailer</button>
+                    <button onclick="closeGameModal()" class="border border-gray-300 text-gray-700 hover:bg-gray-100 px-6 py-3 rounded-md transition">Close</button>
                 </div>
             </div>
-            
-            <button onclick="closeConfirmationModal()" class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 transition">
-                Track My Order
-            </button>
         </div>
     </div>
-    <div id="confirmation-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="closeConfirmationModal()"></div>
+    <div id="game-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="closeGameModal()"></div>
 
     <script>
-        // Cart functionality
-        let cart = [];
-        let isLoggedIn = false;
-        let currentUser = null;
-
         // Mobile menu toggle
         function toggleMobileMenu() {
             const menu = document.getElementById('mobile-menu');
             menu.classList.toggle('hidden');
         }
 
-        // Shopping cart toggle
-        function toggleCart() {
-            const sidebar = document.getElementById('cart-sidebar');
-            const overlay = document.getElementById('cart-overlay');
-            sidebar.classList.toggle('translate-x-full');
-            overlay.classList.toggle('hidden');
-            
-            // Update cart totals when opening
-            if (!sidebar.classList.contains('translate-x-full')) {
-                updateCartTotals();
-            }
-        }
-
-        // Add item to cart
-        function addToCart(itemName, price, storeName) {
-            const item = {
-                id: Date.now(),
-                name: itemName,
-                price: price,
-                store: storeName,
-                quantity: 1
-            };
-            
-            cart.push(item);
-            updateCartUI();
-            updateCartCount();
-            
-            // Show cart if it's hidden
-            const sidebar = document.getElementById('cart-sidebar');
-            if (sidebar.classList.contains('translate-x-full')) {
-                toggleCart();
-            }
-        }
-
-        // Update cart item quantity
-        function updateQuantity(itemId, change) {
-            const itemIndex = cart.findIndex(item => item.id === itemId);
-            if (itemIndex !== -1) {
-                cart[itemIndex].quantity += change;
-                
-                // Remove item if quantity is 0 or less
-                if (cart[itemIndex].quantity <= 0) {
-                    cart.splice(itemIndex, 1);
-                }
-                
-                updateCartUI();
-                updateCartCount();
-            }
-        }
-
-        // Update cart UI
-        function updateCartUI() {
-            const cartItemsContainer = document.getElementById('cart-items');
-            const emptyCartMessage = document.getElementById('empty-cart-message');
+        // Solution modal functions
+        function openSolutionModal(solutionName) {
+            const modal = document.getElementById('solution-modal');
+            const overlay = document.getElementById('solution-overlay');
+            const title = document.getElementById('solution-modal-title');
+            const content = document.getElementById('solution-modal-content');
             
-            if (cart.length === 0) {
-                emptyCartMessage.classList.remove('hidden');
-                cartItemsContainer.innerHTML = '';
-                document.getElementById('checkout-btn').disabled = true;
-                return;
-            }
-            
-            emptyCartMessage.classList.add('hidden');
+            title.textContent = solutionName;
             
+            // Generate dynamic content based on solution
             let html = '';
-            cart.forEach(item => {
-                html += `
-                    <div class="cart-item-enter flex justify-between items-center p-3 bg-gray-50 rounded-md">
-                        <div>
-                            <h4 class="font-medium">${item.name}</h4>
-                            <p class="text-sm text-gray-600">${item.store}</p>
-                            <div class="flex items-center mt-2">
-                                <button onclick="updateQuantity(${item.id}, -1)" class="w-6 h-6 flex items-center justify-center bg-gray-200 rounded-md hover:bg-gray-300">
-                                    <i class="fas fa-minus text-xs"></i>
-                                </button>
-                                <span class="mx-2">${item.quantity}</span>
-                                <button onclick="updateQuantity(${item.id}, 1)" class="w-6 h-6 flex items-center justify-center bg-gray-200 rounded-md hover:bg-gray-300">
-                                    <i class="fas fa-plus text-xs"></i>
-                                </button>
+            if (solutionName === 'Game Development') {
+                html = `
+                    <div class="flex flex-col lg:flex-row gap-8">
+                        <div class="lg:w-1/2">
+                            <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Game development" class="w-full rounded-lg">
+                        </div>
+                        <div class="lg:w-1/2">
+                            <h3 class="text-xl font-semibold mb-4">Comprehensive Game Development Services</h3>
+                            <p class="text-gray-600 mb-4">From concept to launch, we handle every aspect of game development with expertise across all platforms and genres.</p>
+                            
+                            <div class="mb-6">
+                                <h4 class="font-semibold mb-2">Our Capabilities:</h4>
+                                <ul class="space-y-2">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>Full-cycle game development for mobile, PC, and consoles</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>VR/AR game development with cutting-edge immersion</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>Multiplayer and cloud gaming solutions</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>Game design, artwork, animation, and sound production</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>Porting and optimization across platforms</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="bg-blue-50 p-4 rounded-lg">
+                                <h4 class="font-semibold mb-2">Why Choose Us?</h4>
+                                <p class="text-gray-600">With over 150 games developed and 40M+ active users, we combine creative vision with technical excellence to deliver unforgettable gaming experiences.</p>
                             </div>
                         </div>
-                        <div class="text-right">
-                            <p class="font-semibold">$${(item.price * item.quantity).toFixed(2)}</p>
-                            <button onclick="removeItem(${item.id})" class="text-red-500 text-sm hover:text-red-700 mt-1">
-                                <i class="fas fa-trash-alt"></i> Remove
-                            </button>
+                    </div>
+                `;
+            } else if (solutionName === 'Custom Software') {
+                html = `
+                    <div class="flex flex-col lg:flex-row gap-8">
+                        <div class="lg:w-1/2">
+                            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Custom software" class="w-full rounded-lg">
+                        </div>
+                        <div class="lg:w-1/2">
+                            <h3 class="text-xl font-semibold mb-4">Tailored Software Solutions</h3>
+                            <p class="text-gray-600 mb-4">We design and develop custom software applications that solve your unique business challenges and drive growth.</p>
+                            
+                            <div class="mb-6">
+                                <h4 class="font-semibold mb-2">Our Expertise:</h4>
+                                <ul class="space-y-2">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Enterprise resource planning (ERP) systems</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Customer relationship management (CRM) platforms</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Mobile and web application development</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Cloud-native and serverless architectures</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Data analytics and business intelligence solutions</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="bg-purple-50 p-4 rounded-lg">
+                                <h4 class="font-semibold mb-2">Our Approach:</h4>
+                                <p class="text-gray-600">We follow agile methodologies to deliver high-quality software on time and within budget, with a focus on scalability, security, and user experience.</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else if (solutionName === 'IoT & Robotics') {
+                html = `
+                    <div class="flex flex-col lg:flex-row gap-8">
+                        <div class="lg:w-1/2">
+                            <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="IoT & Robotics" class="w-full rounded-lg">
+                        </div>
+                        <div class="lg:w-1/2">
+                            <h3 class="text-xl font-semibold mb-4">Smart Connected Systems</h3>
+                            <p class="text-gray-600 mb-4">We design and implement IoT solutions and robotics that automate processes, gather insights, and transform operations across industries.</p>
+                            
+                            <div class="mb-6">
+                                <h4 class="font-semibold mb-2">Our Offerings:</h4>
+                                <ul class="space-y-2">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                        <span>Industrial IoT for manufacturing and logistics</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                        <span>Smart home and building automation systems</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                        <span>Autonomous mobile robots for warehouses</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                        <span>AI-powered service robots for healthcare</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                        <span>End-to-end IoT platform development</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="bg-green-50 p-4 rounded-lg">
+                                <h4 class="font-semibold mb-2">Impact:</h4>
+                                <p class="text-gray-600">Our IoT and robotics solutions have helped clients reduce operational costs by up to 45%, improve efficiency by 60%, and unlock new revenue streams.</p>
+                            </div>
                         </div>
                     </div>
                 `;
-            });
-            
-            cartItemsContainer.innerHTML = html;
-            document.getElementById('checkout-btn').disabled = false;
-        }
-
-        // Remove item from cart
-        function removeItem(itemId) {
-            cart = cart.filter(item => item.id !== itemId);
-            updateCartUI();
-            updateCartCount();
-        }
-
-        // Update cart count in navbar
-        function updateCartCount() {
-            const count = cart.reduce((total, item) => total + item.quantity, 0);
-            document.getElementById('cart-count').textContent = count;
-        }
-
-        // Update cart totals
-        function updateCartTotals() {
-            const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
-            const tax = subtotal * 0.08; // 8% tax
-            const deliveryFee = 2.99;
-            const total = subtotal + tax + deliveryFee;
-            
-            document.getElementById('cart-subtotal').textContent = `$${subtotal.toFixed(2)}`;
-            document.getElementById('cart-tax').textContent = `$${tax.toFixed(2)}`;
-            document.getElementById('cart-total').textContent = `$${total.toFixed(2)}`;
-            
-            // Also update checkout modal totals if open
-            if (!document.getElementById('checkout-modal').classList.contains('modal-hidden')) {
-                document.getElementById('checkout-subtotal').textContent = `$${subtotal.toFixed(2)}`;
-                document.getElementById('checkout-tax').textContent = `$${tax.toFixed(2)}`;
-                document.getElementById('checkout-total').textContent = `$${total.toFixed(2)}`;
-            }
-        }
-
-        // Auth modal toggle
-        function toggleAuthModal() {
-            const modal = document.getElementById('auth-modal');
-            const overlay = document.getElementById('auth-overlay');
-            modal.classList.toggle('modal-hidden');
-            overlay.classList.toggle('hidden');
-        }
-
-        // Show register form
-        function showRegisterForm() {
-            document.getElementById('login-form').classList.add('hidden');
-            document.getElementById('register-form').classList.remove('hidden');
-            document.getElementById('auth-modal-title').textContent = 'Register';
-        }
-
-        // Show login form
-        function showLoginForm() {
-            document.getElementById('register-form').classList.add('hidden');
-            document.getElementById('login-form').classList.remove('hidden');
-            document.getElementById('auth-modal-title').textContent = 'Login';
-        }
-
-        // Login function
-        function login() {
-            const email = document.getElementById('login-email').value;
-            const password = document.getElementById('login-password').value;
-            
-            if (!email || !password) {
-                alert('Please enter both email and password');
-                return;
-            }
-            
-            // In a real app, you would validate credentials with a backend
-            isLoggedIn = true;
-            currentUser = {
-                email: email,
-                name: 'User Name' // This would come from backend in a real app
-            };
-            
-            document.getElementById('auth-btn').textContent = 'My Account';
-            toggleAuthModal();
-            
-            // Clear form fields
-            document.getElementById('login-email').value = '';
-            document.getElementById('login-password').value = '';
-        }
-
-        // Register function
-        function register() {
-            const name = document.getElementById('register-name').value;
-            const email = document.getElementById('register-email').value;
-            const password = document.getElementById('register-password').value;
-            const confirmPassword = document.getElementById('register-confirm-password').value;
-            
-            if (!name || !email || !password || !confirmPassword) {
-                alert('Please fill in all fields');
-                return;
-            }
-            
-            if (password !== confirmPassword) {
-                alert('Passwords do not match');
-                return;
-            }
-            
-            // In a real app, you would send this data to a backend
-            isLoggedIn = true;
-            currentUser = {
-                email: email,
-                name: name
-            };
-            
-            document.getElementById('auth-btn').textContent = 'My Account';
-            toggleAuthModal();
-            
-            // Clear form fields
-            document.getElementById('register-name').value = '';
-            document.getElementById('register-email').value = '';
-            document.getElementById('register-password').value = '';
-            document.getElementById('register-confirm-password').value = '';
-            
-            // Switch back to login form for next time
-            showLoginForm();
-        }
-
-        // Checkout function
-        function checkout() {
-            if (!isLoggedIn) {
-                toggleAuthModal();
-                return;
             }
             
-            updateCartTotals();
-            
-            // Also update checkout modal totals
-            const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
-            const tax = subtotal * 0.08;
-            const deliveryFee = 2.99;
-            const total = subtotal + tax + deliveryFee;
-            
-            document.getElementById('checkout-subtotal').textContent = `$${subtotal.toFixed(2)}`;
-            document.getElementById('checkout-tax').textContent = `$${tax.toFixed(2)}`;
-            document.getElementById('checkout-total').textContent = `$${total.toFixed(2)}`;
-            
-            // Show checkout modal
-            const modal = document.getElementById('checkout-modal');
-            const overlay = document.getElementById('checkout-overlay');
+            content.innerHTML = html;
             modal.classList.remove('modal-hidden');
             overlay.classList.remove('hidden');
         }
 
-        // Close checkout modal
-        function closeCheckoutModal() {
-            const modal = document.getElementById('checkout-modal');
-            const overlay = document.getElementById('checkout-overlay');
+        function closeSolutionModal() {
+            const modal = document.getElementById('solution-modal');
+            const overlay = document.getElementById('solution-overlay');
             modal.classList.add('modal-hidden');
             overlay.classList.add('hidden');
         }
 
-        // Place order function
-        function placeOrder() {
-            // In a real app, you would send the order to a backend
-            closeCheckoutModal();
+        // Game modal functions
+        function openGameModal(gameName) {
+            const modal = document.getElementById('game-modal');
+            const overlay = document.getElementById('game-overlay');
+            const title = document.getElementById('game-modal-title');
+            const content = document.getElementById('game-modal-content');
             
-            // Update confirmation modal with order total
-            const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
-            const tax = subtotal * 0.08;
-            const deliveryFee = 2.99;
-            const total = subtotal + tax + deliveryFee;
+            title.textContent = gameName;
             
-            document.getElementById('confirmation-total').textContent = `$${total.toFixed(2)}`;
+            // Generate dynamic content based on game
+            let html = '';
+            if (gameName === 'Galactic Conquest') {
+                html = `
+                    <div class="flex flex-col lg:flex-row gap-8">
+                        <div class="lg:w-1/2">
+                            <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="${gameName}" class="w-full rounded-lg">
+                            <div class="mt-4 flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Strategy</span>
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Multiplayer</span>
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">PC/Console</span>
+                                </div>
+                                <div class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400"></i>
+                                    <span class="ml-1 font-semibold">4.9</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="lg:w-1/2">
+                            <h3 class="text-xl font-semibold mb-4">About the Game</h3>
+                            <p class="text-gray-600 mb-6">Galactic Conquest is a grand strategy game set in a vast, procedurally generated universe. Build your empire, research technologies, form alliances or wage war, and ultimately conquer the galaxy.</p>
+                            
+                            <div class="mb-6">
+                                <h4 class="font-semibold mb-2">Key Features:</h4>
+                                <ul class="space-y-2">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Procedurally generated galaxies with billions of star systems</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Deep technology tree with hundreds of research options</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Real-time with pause combat system</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Up to 32-player multiplayer matches</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Mod support with Steam Workshop integration</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="bg-blue-50 p-4 rounded-lg">
+                                <h4 class="font-semibold mb-2">Available On:</h4>
+                                <div class="flex space-x-4">
+                                    <i class="fab fa-windows text-2xl text-gray-700"></i>
+                                    <i class="fab fa-playstation text-2xl text-gray-700"></i>
+                                    <i class="fab fa-xbox text-2xl text-gray-700"></i>
+                                    <i class="fab fa-steam text-2xl text-gray-700"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else if (gameName === 'Mystic Quest') {
+                html = `
+                    <div class="flex flex-col lg:flex-row gap-8">
+                        <div class="lg:w-1/2">
+                            <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="${gameName}" class="w-full rounded-lg">
+                            <div class="mt-4 flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">RPG</span>
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Adventure</span>
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Mobile</span>
+                                </div>
+                                <div class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400"></i>
+                                    <span class="ml-1 font-semibold">4.7</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="lg:w-1/2">
+                            <h3 class="text-xl font-semibold mb-4">About the Game</h3>
+                            <p class="text-gray-600 mb-6">Embark on an epic journey through magical realms in this award-winning mobile RPG. Customize your hero, master powerful spells, and uncover ancient secrets in a beautifully crafted world.</p>
+                            
+                            <div class="mb-6">
+                                <h4 class="font-semibold mb-2">Key Features:</h4>
+                                <ul class="space-y-2">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Open world with diverse landscapes to explore</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Deep character customization with 7 classes</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Engaging story with multiple endings</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Real-time combat with tactical elements</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Regular content updates with new quests and areas</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="bg-blue-50 p-4 rounded-lg">
+                                <h4 class="font-semibold mb-2">Available On:</h4>
+                                <div class="flex space-x-4">
+                                    <i class="fab fa-apple text-2xl text-gray-700"></i>
+                                    <i class="fab fa-google-play text-2xl text-gray-700"></i>
+                                    <i class="fab fa-android text-2xl text-gray-700"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else if (gameName === 'Neon Arena') {
+                html = `
+                    <div class="flex flex-col lg:flex-row gap-8">
+                        <div class="lg:w-1/2">
+                            <img src="https://images.unsplash.com/photo-1586182987320-4a8d3207c6c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="${gameName}" class="w-full rounded-lg">
+                            <div class="mt-4 flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">FPS</span>
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">VR</span>
+                                    <span class="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">Esports</span>
+                                </div>
+                                <div class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400"></i>
+                                    <span class="ml-1 font-semibold">4.8</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="lg:w-1/2">
+                            <h3 class="text-xl font-semibold mb-4">About the Game</h3>
+                            <p class="text-gray-600 mb-6">Step into the futuristic world of Neon Arena, a competitive VR shooter that combines fast-paced action with tactical gameplay. Experience unparalleled immersion as you battle in stunning cyberpunk environments.</p>
+                            
+                            <div class="mb-6">
+                                <h4 class="font-semibold mb-2">Key Features:</h4>
+                                <ul class="space-y-2">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Designed specifically for VR with intuitive controls</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>5v5 competitive matches with ranked play</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>12 unique heroes with special abilities</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Regular esports tournaments with cash prizes</span>
+                                    </li>
+                                    <li class="fas fa-check text-blue-500 mt-1 mr-2"></i>
+                                        <span>Cross-platform play between VR headsets</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            
+                            <div class="bg-blue-50 p-4 rounded-lg">
+                                <h4 class="font-semibold mb-2">Available On:</h4>
+                                <div class="flex space-x-4">
+                                    <i class="fab fa-oculus text-2xl text-gray-700"></i>
+                                    <i class="fab fa-steam text-2xl text-gray-700"></i>
+                                    <i class="fab fa-windows text-2xl text-gray-700"></i>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
             
-            // Show confirmation modal
-            const modal = document.getElementById('confirmation-modal');
-            const overlay = document.getElementById('confirmation-overlay');
+            content.innerHTML = html;
             modal.classList.remove('modal-hidden');
             overlay.classList.remove('hidden');
-            
-            // Clear cart
-            cart = [];
-            updateCartUI();
-            updateCartCount();
         }
 
-        // Close confirmation modal
-        function closeConfirmationModal() {
-            const modal = document.getElementById('confirmation-modal');
-            const overlay = document.getElementById('confirmation-overlay');
+        function closeGameModal() {
+            const modal = document.getElementById('game-modal');
+            const overlay = document.getElementById('game-overlay');
             modal.classList.add('modal-hidden');
             overlay.classList.add('hidden');
         }
+
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                    
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        toggleMobileMenu();
+                    }
+                }
+            });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SimpleSam/grocery-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>
\ No newline at end of file
