Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Orange Fuzz Fest | The Ultimate Music Experience</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#f97316', | |
| secondary: '#d946ef', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/lineup-card.js"></script> | |
| <script src="components/schedule-item.js"></script> | |
| <script src="components/faq-item.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-primary/20 overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/music/1200x630/42')] bg-cover bg-center opacity-30"></div> | |
| <div class="relative z-10 text-center px-4 max-w-4xl mx-auto"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary"> | |
| Orange Fuzz Fest | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-8">3 Days of Pure Music Madness • July 12-14, 2024</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#tickets" class="px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-full font-bold text-lg hover:scale-105 transition-transform"> | |
| Get Tickets Now | |
| </a> | |
| <a href="#lineup" class="px-8 py-4 border-2 border-secondary rounded-full font-bold text-lg hover:bg-secondary/20 transition-colors"> | |
| See Lineup | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-0 right-0 text-center"> | |
| <a href="#about" class="animate-bounce inline-block"> | |
| <i data-feather="chevron-down" class="w-10 h-10"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">The Ultimate Music Experience</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto"> | |
| Orange Fuzz Fest returns for its 5th year with an explosive lineup of rock, indie, electronic, and alternative artists across 4 stages in the heart of the desert. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition-colors"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="music" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">100+ Artists</h3> | |
| <p>From chart-topping headliners to emerging talent across all genres.</p> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition-colors"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="map" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">4 Unique Stages</h3> | |
| <p>Each with its own vibe and production, from intimate to massive.</p> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl hover:bg-gray-700 transition-colors"> | |
| <div class="text-primary mb-4"> | |
| <i data-feather="users" class="w-10 h-10"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">20,000 Music Lovers</h3> | |
| <p>Join our vibrant community of festival-goers from around the world.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lineup Section --> | |
| <section id="lineup" class="py-20 bg-gray-800"> | |
| <div class="px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">2024 Lineup</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto"> | |
| Our most diverse lineup yet featuring artists you love and ones you'll discover. | |
| </p> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-bold mb-6 text-primary">Headliners</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <custom-lineup-card | |
| name="The Electric Sun" | |
| genre="Alternative Rock" | |
| day="Friday" | |
| image="http://static.photos/music/400x400/1"> | |
| </custom-lineup-card> | |
| <custom-lineup-card | |
| name="Neon Dreams" | |
| genre="Electronic" | |
| day="Saturday" | |
| image="http://static.photos/music/400x400/2"> | |
| </custom-lineup-card> | |
| <custom-lineup-card | |
| name="Desert Echo" | |
| genre="Indie Folk" | |
| day="Sunday" | |
| image="http://static.photos/music/400x400/3"> | |
| </custom-lineup-card> | |
| <custom-lineup-card | |
| name="Fuzzy Logic" | |
| genre="Psychedelic Rock" | |
| day="All Weekend" | |
| image="http://static.photos/music/400x400/4"> | |
| </custom-lineup-card> | |
| </div> | |
| </div> | |
| <div class="mb-12"> | |
| <h3 class="text-2xl font-bold mb-6 text-secondary">Supporting Acts</h3> | |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <custom-lineup-card | |
| name="The Midnight Waves" | |
| genre="Synthwave" | |
| day="Friday" | |
| image="http://static.photos/music/400x400/5"> | |
| </custom-lineup-card> | |
| <custom-lineup-card | |
| name="Solar Flares" | |
| genre="Indie Rock" | |
| day="Saturday" | |
| image="http://static.photos/music/400x400/6"> | |
| </custom-lineup-card> | |
| <custom-lineup-card | |
| name="Cosmic Dust" | |
| genre="Dream Pop" | |
| day="Sunday" | |
| image="http://static.photos/music/400x400/7"> | |
| </custom-lineup-card> | |
| <custom-lineup-card | |
| name="The Echo Chamber" | |
| genre="Post-Punk" | |
| day="Friday" | |
| image="http://static.photos/music/400x400/8"> | |
| </custom-lineup-card> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="px-6 py-3 border border-secondary rounded-full font-bold hover:bg-secondary/20 transition-colors"> | |
| View Full Lineup | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Schedule Section --> | |
| <section id="schedule" class="py-20 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Stage Schedule</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto"> | |
| Plan your weekend with our detailed performance schedule. | |
| </p> | |
| </div> | |
| <div class="mb-12"> | |
| <div class="flex justify-center mb-8"> | |
| <div class="inline-flex rounded-md shadow-sm" role="group"> | |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-primary"> | |
| Friday | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 hover:bg-gray-600"> | |
| Saturday | |
| </button> | |
| <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-gray-700 hover:bg-gray-600"> | |
| Sunday | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-2xl font-bold mb-6 text-primary">Main Stage</h3> | |
| <div class="space-y-4"> | |
| <custom-schedule-item | |
| time="6:00 PM" | |
| artist="The Echo Chamber" | |
| duration="45 min"> | |
| </custom-schedule-item> | |
| <custom-schedule-item | |
| time="7:15 PM" | |
| artist="The Midnight Waves" | |
| duration="1 hour"> | |
| </custom-schedule-item> | |
| <custom-schedule-item | |
| time="8:45 PM" | |
| artist="The Electric Sun" | |
| duration="1.5 hours"> | |
| </custom-schedule-item> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6"> | |
| <h3 class="text-2xl font-bold mb-6 text-secondary">Electric Oasis</h3> | |
| <div class="space-y-4"> | |
| <custom-schedule-item | |
| time="5:30 PM" | |
| artist="DJ Solar Flare" | |
| duration="1 hour"> | |
| </custom-schedule-item> | |
| <custom-schedule-item | |
| time="7:00 PM" | |
| artist="Neon Dreams" | |
| duration="1.5 hours"> | |
| </custom-schedule-item> | |
| <custom-schedule-item | |
| time="9:00 PM" | |
| artist="Fuzzy Logic" | |
| duration="2 hours"> | |
| </custom-schedule-item> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Venue Map Section --> | |
| <section id="venue" class="py-20 bg-gray-800"> | |
| <div class="px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Venue Map</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto"> | |
| Explore our festival grounds and plan your adventure. | |
| </p> | |
| </div> | |
| <div class="bg-gray-700 rounded-xl overflow-hidden"> | |
| <div class="aspect-w-16 aspect-h-9 bg-gray-600 relative"> | |
| <img src="http://static.photos/outdoor/1200x630/10" alt="Festival Map" class="w-full h-full object-cover opacity-70"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-full font-bold text-lg hover:scale-105 transition-transform"> | |
| View Interactive Map | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-6 mt-8"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 text-primary">Main Stage</h4> | |
| <p class="text-sm">Capacity: 10,000</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 text-secondary">Electric Oasis</h4> | |
| <p class="text-sm">Capacity: 5,000</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 text-primary">Food & Drinks</h4> | |
| <p class="text-sm">50+ vendors</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <h4 class="font-bold mb-2 text-secondary">Camping</h4> | |
| <p class="text-sm">5 minute walk</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tickets Section --> | |
| <section id="tickets" class="py-20 px-4 max-w-6xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4">Ticket Options</h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6"></div> | |
| <p class="text-xl max-w-3xl mx-auto"> | |
| Early bird pricing available for a limited time. All tickets include camping access. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700 hover:border-primary transition-colors"> | |
| <h3 class="text-2xl font-bold mb-4">Weekend Pass</h3> | |
| <div class="text-4xl font-bold mb-6">$199<span class="text-lg text-gray-400">/person</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| Access to all 3 days | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| General camping | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| All stages | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-primary rounded-full font-bold hover:bg-primary/80 transition-colors"> | |
| Buy Now | |
| </button> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8 border-2 border-primary relative"> | |
| <div class="absolute top-0 right-0 bg-primary text-gray-900 px-4 py-1 font-bold rounded-bl-lg"> | |
| POPULAR | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">VIP Experience</h3> | |
| <div class="text-4xl font-bold mb-6">$399<span class="text-lg text-gray-400">/person</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| All weekend pass benefits | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| VIP viewing areas | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| Private bars & restrooms | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| Exclusive merch | |
| </li> | |
| </ul> | |
| <button class="w-full py-3 bg-gradient-to-r from-primary to-secondary rounded-full font-bold hover:opacity-90 transition-opacity"> | |
| Buy Now | |
| </button> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-8 border-2 border-gray-700 hover:border-secondary transition-colors"> | |
| <h3 class="text-2xl font-bold mb-4">Single Day</h3> | |
| <div class="text-4xl font-bold mb-6">$89<span class="text-lg text-gray-400">/person</span></div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| Choose your day | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 text-primary"></i> | |
| General camping | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="check" class="w-5 h-5 mr-2 | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |