<footer class="bg-gray-100 py-10">
    <div class="container mx-auto px-6">
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
        
        <!-- Logo and Contact Information -->
        <div class="col-span-2 md:col-span-3 lg:col-span-2">
          <img src="" alt="ToyHub Logo" class="h-10 mb-4">
          <p class="text-gray-600 mb-4">Place where kid Dreams</p>
          <ul class="text-gray-600 space-y-2">
            <li class="flex items-start">
              <svg class="w-5 h-5 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10l1.664-1.664a2 2 0 01.61-.394L10 6l.736.265a2 2 0 00.94 0L12 6l4 2-1.664 1.664a2 2 0 00-.394.61L14 14h-4l-1.663-1.664a2 2 0 00-.61-.394L6 10z" />
              </svg>
              Address: 5171 W Campbell Ave demo demo demo demo demo demo
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h4l4 4m0 0l4 4 4 4H7.657M8 16h.01M16 8h.01M12 12h.01M16 16h.01M8 8h.01M12 16h.01M12 8h.01" />
              </svg>
              Call Us: (+91) - 9876543210
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.29-7.29a1 1 0 011.41 0l7.3 7.3L12 18l-9-9z" />
              </svg>
              Email: toyhub@gmail.com
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8V4m-1 8V5.5m1-4H7l-1.5 1.5M12 20v4m-1-3.5v-8h1m1 4H5.5M17 4V8h.01M17 5.5H20.5m1.5 0V9l-1.5 1.5M20 12v4m-1-4.5v-8H9.5" />
              </svg>
              Hours: 10:00 - 18:00, Mon - Sat
            </li>
          </ul>
        </div>
  
        <!-- Company Links -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Company</h3>
          <ul class="text-gray-600 space-y-2">
            <li><a href="#" class="hover:text-gray-900">About Us</a></li>
            <li><a href="#" class="hover:text-gray-900">Delivery Information</a></li>
            <li><a href="#" class="hover:text-gray-900">Privacy Policy</a></li>
            <li><a href="#" class="hover:text-gray-900">Terms & Conditions</a></li>
            <li><a href="#" class="hover:text-gray-900">Contact Us</a></li>
            <li><a href="#" class="hover:text-gray-900">Support Center</a></li>
            <li><a href="#" class="hover:text-gray-900">Careers</a></li>
          </ul>
        </div>
  
        <!-- Account Links -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Account</h3>
          <ul class="text-gray-600 space-y-2">
            <li><a href="#" class="hover:text-gray-900">Sign In</a></li>
            <li><a href="#" class="hover:text-gray-900">View Cart</a></li>
            <li><a href="#" class="hover:text-gray-900">My Wishlist</a></li>
            <li><a href="#" class="hover:text-gray-900">Track My Order</a></li>
            <li><a href="#" class="hover:text-gray-900">Help Ticket</a></li>
            <li><a href="#" class="hover:text-gray-900">Shipping Details</a></li>
            <li><a href="#" class="hover:text-gray-900">Compare products</a></li>
          </ul>
        </div>
  
        <!-- Corporate Links -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Corporate</h3>
          <ul class="text-gray-600 space-y-2">
            <li><a href="#" class="hover:text-gray-900">Become a Vendor</a></li>
            <li><a href="#" class="hover:text-gray-900">Affiliate Program</a></li>
            <li><a href="#" class="hover:text-gray-900">Farm Business</a></li>
            <li><a href="#" class="hover:text-gray-900">Farm Careers</a></li>
            <li><a href="#" class="hover:text-gray-900">Our Suppliers</a></li>
            <li><a href="#" class="hover:text-gray-900">Accessibility</a></li>
            <li><a href="#" class="hover:text-gray-900">Promotions</a></li>
          </ul>
        </div>
  
        <!-- Popular Links -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Popular</h3>
          <ul class="text-gray-600 space-y-2">
            <li><a href="#" class="hover:text-gray-900">Action Figures</a></li>
            <li><a href="#" class="hover:text-gray-900">Educational Toys</a></li>
            <li><a href="#" class="hover:text-gray-900">Dolls</a></li>
            <li><a href="#" class="hover:text-gray-900">Puzzle and games</a></li>
            <li><a href="#" class="hover:text-gray-900">Arts and craft</a></li>
            <li><a href="#" class="hover:text-gray-900">RC cars</a></li>
            <li><a href="#" class="hover:text-gray-900">Baby</a></li>
          </ul>
        </div>
  
        <!-- Install App -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 mb-3">Install App</h3>
          <div class="flex space-x-4">
            <a href="#"><img src="" alt="App Store" class="h-10"></a>
            <a href="#"><img src="" alt="Google Play" class="h-10"></a>
          </div>
          <p class="text-gray-600 mt-4">Secured Payment Gateways</p>
        </div>
  
      </div>
  
      <!-- Bottom Footer -->
      <div class="border-t border-gray-200 mt-10 pt-6">
        <div class="flex flex-col md:flex-row items-center justify-between">
          <p class="text-gray-600">Â© 2024, <span class="text-green-600">ToyHub</span> - Toys for kids. All rights reserved.</p>
          <div class="flex space-x-6 mt-4 md:mt-0">
            <div class="flex items-center">
              <svg class="w-5 h-5 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.24 4.22a4.22 4.22 0 01.76 2.43 4.2 4.2 0 01-.76 2.43L4.22 20.24a4.2 4.2 0 01-2.43.76 4.22 4.22 0 01-2.43-.76L20.24 4.22z" />
              </svg>
              <span class="text-gray-600">We accept:</span>
            </div>
            <img src="" alt="Payment Method 1" class="h-5">
            <img src="" alt="Payment Method 2" class="h-5">
            <img src="" alt="Payment Method 3" class="h-5">
            <img src="" alt="Payment Method 4" class="h-5">
          </div>
        </div>
      </div>
    </div>
  </footer>
  