add a 3d gift box roatating at background of hero section and this is for younger generation so make it trendy and facinating
40ee265
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MysteryVault Unboxed - Discover Your Next Treasure</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0D9488', | |
| accent: '#FF6B6B', | |
| neutral: '#64748B' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'system-ui', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="font-sans bg-white text-gray-900"> | |
| <!-- Header Component --> | |
| <custom-header></custom-header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-br from-primary/10 to-accent/5 py-20 lg:py-32 overflow-hidden"> | |
| <!-- 3D Gift Box --> | |
| <div class="absolute inset-0 z-0"> | |
| <div id="giftBox3d" class="w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <!-- 3D box structure --> | |
| <div class="gift-box"> | |
| <div class="box"> | |
| <div class="side top"></div> | |
| <div class="side front"></div> | |
| <div class="side back"></div> | |
| <div class="side left"></div> | |
| <div class="side right"></div> | |
| <div class="side bottom"></div> | |
| </div> | |
| <div class="ribbon"> | |
| <div class="ribbon-vertical"></div> | |
| <div class="ribbon-horizontal"></div> | |
| <div class="bow"> | |
| <div class="bow-center"></div> | |
| <div class="bow-loop bow-loop-left"></div> | |
| <div class="bow-loop bow-loop-right"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute inset-0 bg-grid-pattern opacity-5"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"> | |
| Discover Your Next | |
| <span class="text-primary">Treasure</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-neutral mb-8 max-w-2xl mx-auto leading-relaxed"> | |
| Premium mystery boxes with guaranteed value. Unbox excitement, collect memories, and find hidden gems. | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center items-center"> | |
| <a href="#boxes" class="bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl"> | |
| Browse Mystery Boxes | |
| </a> | |
| <a href="#how-it-works" class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-300"> | |
| How It Works | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-32 h-32 bg-primary/20 rounded-full blur-3xl"></div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose MysteryVault?</h2> | |
| <p class="text-lg text-neutral max-w-2xl mx-auto">We make mystery shopping safe, exciting, and rewarding</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-feather="shield" class="w-8 h-8 text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Quality Guaranteed</h3> | |
| <p class="text-neutral leading-relaxed">Every item is professionally inspected and graded for quality. No disappointments, only surprises.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-accent/10 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-feather="refresh-cw" class="w-8 h-8 text-accent"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Easy Returns</h3> | |
| <p class="text-neutral leading-relaxed">30-day hassle-free return policy. If you're not thrilled, we'll make it right.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2"> | |
| <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center mb-6"> | |
| <i data-feather="lock" class="w-8 h-8 text-primary"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Secure Checkout</h3> | |
| <p class="text-neutral leading-relaxed">Bank-level encryption and trusted payment providers keep your transactions safe and secure.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Mystery Boxes Section --> | |
| <section id="boxes" class="py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Explore Mystery Boxes</h2> | |
| <p class="text-lg text-neutral max-w-2xl mx-auto">Find the perfect mystery box for your budget and interests</p> | |
| </div> | |
| <!-- Price Filter --> | |
| <div class="max-w-2xl mx-auto mb-12 bg-white p-6 rounded-2xl shadow-lg"> | |
| <div class="flex flex-col sm:flex-row justify-between items-center gap-4"> | |
| <span class="font-semibold text-neutral">Filter by Price:</span> | |
| <div class="flex-1 w-full"> | |
| <div class="relative"> | |
| <input type="range" min="10" max="500" value="250" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider" id="priceRange"> | |
| <div class="flex justify-between text-sm text-neutral mt-2"> | |
| <span>$10</span> | |
| <span id="currentPrice" class="font-bold text-primary">$250</span> | |
| <span>$500</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boxes Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="boxesGrid"> | |
| <!-- Boxes will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">How MysteryVault Works</h2> | |
| <p class="text-lg text-neutral max-w-2xl mx-auto">Simple steps to unboxing excitement</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div> | |
| <h3 class="text-lg font-bold mb-2">Choose Your Box</h3> | |
| <p class="text-neutral">Select from our curated mystery boxes based on your interests and budget.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div> | |
| <h3 class="text-lg font-bold mb-2">Place Your Order</h3> | |
| <p class="text-neutral">Complete secure checkout and get ready for the surprise.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div> | |
| <h3 class="text-lg font-bold mb-2">Receive & Unbox</h3> | |
| <p class="text-neutral">Get your mystery box delivered and experience the thrill of unboxing.</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">4</div> | |
| <h3 class="text-lg font-bold mb-2">Share & Enjoy</h3> | |
| <p class="text-neutral">Share your unboxing experience and enjoy your new treasures.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-20 bg-primary text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-2xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Stay in the Mystery</h2> | |
| <p class="text-lg text-primary-100 mb-8">Get exclusive access to limited edition boxes and special discounts</p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> | |
| <input type="email" placeholder="Enter your email" class="flex-1 px-4 py-3 rounded-xl text-gray-900 focus:outline-none focus:ring-2 focus:ring-white"> | |
| <button type="submit" class="bg-accent hover:bg-accent/90 text-white px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105"> | |
| Subscribe | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Modal for Quick View --> | |
| <div id="quickViewModal" class="fixed inset-0 z-50 hidden"> | |
| <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-2xl shadow-2xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-y-auto"> | |
| <div class="p-6"> | |
| <button id="closeModal" class="absolute top-4 right-4 text-neutral hover:text-gray-900 transition-colors"> | |
| <i data-feather="x" class="w-6 h-6"></i> | |
| </button> | |
| <div id="modalContent" class="mt-4"> | |
| <!-- Modal content will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |