Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MysteryBox | Home</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Navbar --> | |
| <header class="bg-purple-700 text-white"> | |
| <div class="max-w-7xl mx-auto flex justify-between items-center py-4 px-6"> | |
| <!-- Logo --> | |
| <a href="/" class="text-xl font-bold tracking-wide"> | |
| 🎁 MysteryBox | |
| </a> | |
| <!-- Navigation Links (Desktop) --> | |
| <nav class="hidden md:flex space-x-6 text-sm font-medium"> | |
| <a href="/" class="hover:text-yellow-300">Home</a> | |
| <a href="/boxes" class="hover:text-yellow-300">All Boxes</a> | |
| <a href="/boxes/?category=gadgets" class="hover:text-yellow-300">electronics</a> | |
| <a href="/boxes/?category=clothes" class="hover:text-yellow-300">Clothes</a> | |
| <a href="/boxes/?category=accessories" class="hover:text-yellow-300">Accessories</a> | |
| <a href="reward" class="hover:text-yellow-300">Rewards</a> | |
| </nav> | |
| <!-- Right Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Search --> | |
| <!-- Cart --> | |
| <a href="/cart/" class="relative"> | |
| <span class="text-xl">🛒</span> | |
| <span class="absolute -top-2 -right-2 bg-yellow-400 text-black text-xs font-bold px-1 rounded">3</span> | |
| </a> | |
| <!-- Account --> | |
| <a href="/Accounts/" class="hover:text-yellow-300"> | |
| {% if request.user.is_authenticated %} | |
| <span>👤 Hello,{{ request.user.first_name|slice:"0:8" }}</span> | |
| {% else %} | |
| 👤 Account | |
| {% endif %} | |
| </a> | |
| {% if request.user.is_authenticated %} | |
| <a href="Accounts/logout" class="hover:text-yellow-300"> | |
| 👤 Logout | |
| </a> | |
| {% else %} | |
| <a href="Accounts/login" class="hover:text-yellow-300"> | |
| 👤 Login | |
| </a> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-purple-700 to-purple-500 text-white py-20"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <!-- Search Bar --> | |
| <form action="/search/" method="get" class="mb-8"> | |
| <input type="text" | |
| name="q" | |
| placeholder="Search..." | |
| class="w-full max-w-2xl px-5 py-2.5 rounded-full text-black text-base focus:outline-none focus:ring-4 focus:ring-yellow-300 shadow" /> | |
| </form> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4"> | |
| Unbox the Mystery. Discover the Surprise! | |
| </h1> | |
| <p class="text-xl mb-6"> | |
| Branded products at unbelievable prices — delivered to your door. | |
| </p> | |
| <a href="#boxes" | |
| class="px-8 py-4 rounded-full bg-yellow-400 text-black font-semibold shadow-lg hover:bg-yellow-500 transition"> | |
| Shop Now | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Mystery Boxes --> | |
| <section id="boxes" class="py-16 max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 text-center"> | |
| <div class="p-6 rounded-lg bg-orange-400 text-white shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-4">₹299 Box</h2> | |
| <a href="#" class="px-4 py-2 rounded-full bg-white text-black font-semibold">Buy Now</a> | |
| </div> | |
| <div class="p-6 rounded-lg bg-yellow-400 text-black shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-4">₹499 Box</h2> | |
| <a href="#" class="px-4 py-2 rounded-full bg-black text-white font-semibold">Buy Now</a> | |
| </div> | |
| <div class="p-6 rounded-lg bg-blue-500 text-white shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-4">₹999 Box</h2> | |
| <a href="#" class="px-4 py-2 rounded-full bg-white text-black font-semibold">Buy Now</a> | |
| </div> | |
| </section> | |
| <main class="max-w-7xl mx-auto px-6 py-10"> | |
| <!-- Grid of Boxes --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8"> | |
| <!-- Example Box Item --> | |
| <div class="bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transition"> | |
| <img src="https://em-content.zobj.net/source/microsoft-teams/337/wrapped-gift_1f381.png" alt="Box" class="w-full h-40 object-contain bg-gray-200 p-6"> | |
| <div class="p-4 text-center"> | |
| <h2 class="text-lg font-bold">Box ₹299</h2> | |
| <p class="text-gray-500 text-sm">Small Mystery Surprise</p> | |
| <button class="mt-4 px-4 py-2 bg-purple-700 text-white rounded hover:bg-purple-800">Buy Now</button> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transition"> | |
| <img src="https://em-content.zobj.net/source/microsoft-teams/337/wrapped-gift_1f381.png" alt="Box" class="w-full h-40 object-contain bg-gray-200 p-6"> | |
| <div class="p-4 text-center"> | |
| <h2 class="text-lg font-bold">Box ₹499</h2> | |
| <p class="text-gray-500 text-sm">Medium Mystery Box</p> | |
| <button class="mt-4 px-4 py-2 bg-purple-700 text-white rounded hover:bg-purple-800">Buy Now</button> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transition"> | |
| <img src="https://em-content.zobj.net/source/microsoft-teams/337/wrapped-gift_1f381.png" alt="Box" class="w-full h-40 object-contain bg-gray-200 p-6"> | |
| <div class="p-4 text-center"> | |
| <h2 class="text-lg font-bold">Box ₹999</h2> | |
| <p class="text-gray-500 text-sm">Premium Mystery Offer</p> | |
| <button class="mt-4 px-4 py-2 bg-purple-700 text-white rounded hover:bg-purple-800">Buy Now</button> | |
| </div> | |
| </div> | |
| <div class="bg-white shadow-lg rounded-lg overflow-hidden hover:scale-105 transition"> | |
| <img src="https://em-content.zobj.net/source/microsoft-teams/337/wrapped-gift_1f381.png" alt="Box" class="w-full h-40 object-contain bg-gray-200 p-6"> | |
| <div class="p-4 text-center"> | |
| <h2 class="text-lg font-bold">Box ₹1499</h2> | |
| <p class="text-gray-500 text-sm">Ultra Luxury Box</p> | |
| <button class="mt-4 px-4 py-2 bg-purple-700 text-white rounded hover:bg-purple-800">Buy Now</button> | |
| </div> | |
| </div> | |
| <!-- 3rd row (add more if needed) --> | |
| </div> | |
| </main> | |
| <!-- Features --> | |
| <section class="bg-white py-16"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-8">Why Choose Us</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="text-4xl">💰</div> | |
| <p class="mt-2">Affordable Prices</p> | |
| </div> | |
| <div> | |
| <div class="text-4xl">🎉</div> | |
| <p class="mt-2">Surprise & Fun</p> | |
| </div> | |
| <div> | |
| <div class="text-4xl">🌱</div> | |
| <p class="mt-2">Eco-Friendly</p> | |
| </div> | |
| <div> | |
| <div class="text-4xl">⭐</div> | |
| <p class="mt-2">Trusted Sellers</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Reviews --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-8">Customer Reviews</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <strong class="block mb-2">😊 Aman</strong> | |
| <p>“Loved the mystery box! Amazing quality at low cost.”</p> | |
| <p class="mt-2 text-yellow-500">⭐⭐⭐⭐⭐</p> | |
| </div> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <strong class="block mb-2">😎 Lucky</strong> | |
| <p>“Great surprise and value. Will order again!”</p> | |
| <p class="mt-2 text-yellow-500">⭐⭐⭐⭐</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-purple-700 text-white py-8"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center md:text-left"> | |
| <!-- Logo & Tagline --> | |
| <div> | |
| <h2 class="text-lg font-bold">🎁 MysteryBox</h2> | |
| <p class="text-sm mt-2">Affordable. Fun. Eco-Friendly.</p> | |
| </div> | |
| <!-- Navigation Links --> | |
| <div> | |
| <h3 class="font-semibold mb-3">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="/about" class="hover:underline">About Us</a></li> | |
| <li><a href="/contact" class="hover:underline">Contact</a></li> | |
| <li><a href="/faq" class="hover:underline">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <!-- Social Media --> | |
| <div> | |
| <h3 class="font-semibold mb-3">Follow Us</h3> | |
| <div class="flex justify-center md:justify-start space-x-4 text-2xl"> | |
| <a href="https://instagram.com" target="_blank" class="hover:text-pink-400"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="https://facebook.com" target="_blank" class="hover:text-blue-400"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Divider --> | |
| <div class="border-t border-purple-500 mt-6 pt-4 text-center text-sm"> | |
| <p>© 2024 MysteryBox. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- ✅ Font Awesome (for social icons) --> | |
| <script src="https://kit.fontawesome.com/3b5fbf8a70.js" crossorigin="anonymous"></script> | |
| </body> | |
| </html> | |