237 lines
12 KiB
HTML
237 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Lumina Garden | A Botanical Light & Sound Festival</title>
|
|
<meta name="description" content="Experience the fusion of nature, art, and music at Lumina Garden. A three-night immersive festival of light installations and ambient soundscapes.">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<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=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--forest-dark: #0a0f0d;
|
|
--moss-green: #4a5d4e;
|
|
--luminous-gold: #d4af37;
|
|
--ethereal-white: #f8fafc;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--forest-dark);
|
|
color: var(--ethereal-white);
|
|
}
|
|
|
|
h1, h2, h3, .serif {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
transition: transform 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
.glass-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(to right, #d4af37, #fef3c7);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero-gradient {
|
|
background: linear-gradient(to bottom, rgba(10, 15, 13, 0.4), rgba(10, 15, 13, 1));
|
|
}
|
|
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.nav-blur {
|
|
background: rgba(10, 15, 13, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--luminous-gold);
|
|
color: black;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #fff;
|
|
transform: scale(1.02);
|
|
box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
|
|
}
|
|
|
|
@keyframes pulse-soft {
|
|
0%, 100% { opacity: 0.8; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.pulse-soft {
|
|
animation: pulse-soft 3s infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed w-full z-50 nav-blur">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
|
|
<div class="text-2xl font-bold tracking-tighter">LUMINA <span class="text-yellow-600">GARDEN</span></div>
|
|
<div class="hidden md:flex space-x-8 text-sm uppercase tracking-widest font-medium">
|
|
<a href="#experience" class="hover:text-yellow-500 transition">Experience</a>
|
|
<a href="#schedule" class="hover:text-yellow-500 transition">Schedule</a>
|
|
<a href="#tickets" class="hover:text-yellow-500 transition">Tickets</a>
|
|
<a href="#location" class="hover:text-yellow-500 transition">Location</a>
|
|
</div>
|
|
<a href="#tickets" class="btn-primary px-6 py-2 text-sm font-bold rounded-full">GET TICKETS</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden">
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="https://images.pexels.com/photos/15451078/pexels-photo-15451078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="Brightly lit tulip garden with colorful LED flowers glowing against a night backdrop." class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 hero-gradient"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 text-center px-4 max-w-4xl">
|
|
<span class="uppercase tracking-[0.4em] text-sm mb-4 block text-yellow-400 animate-pulse-soft">Autumn Equinox 2024</span>
|
|
<h1 class="text-6xl md:text-9xl font-bold mb-6 leading-tight">Where Nature <br><i class="font-normal">Meets Light</i></h1>
|
|
<p class="text-lg md:text-xl mb-10 max-w-2xl mx-auto font-light opacity-90">
|
|
Join us for a three-night immersive sanctuary. A curated journey of botanical light installations, ethereal soundscapes, and organic artistry.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<a href="#tickets" class="btn-primary px-10 py-4 rounded-full text-lg font-bold">Reserve Your Entry</a>
|
|
<a href="#experience" class="border border-white/30 hover:bg-white/10 px-10 py-4 rounded-full text-lg font-medium transition">Explore the Grove</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-8 left-8 z-10">
|
|
<p class="text-[10px] uppercase tracking-widest opacity-60">
|
|
Photo by <a href="https://www.pexels.com/photo/illuminated-flowers-at-night-15451078/" class="underline hover:text-yellow-500">Suki Lee</a> on Pexels
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About/Experience Section -->
|
|
<section id="experience" class="py-24 px-6 bg-[#0d1411]">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
<div class="fade-in">
|
|
<h2 class="text-4xl md:text-6xl mb-8">An Awakening of the <span class="gradient-text">Senses</span></h2>
|
|
<p class="text-gray-300 mb-6 leading-relaxed">
|
|
Lumina Garden is not just a festival; it is a living organism. Situated deep within the old grove, we transform the landscape into a luminous tapestry of light and sound.
|
|
</p>
|
|
<p class="text-gray-300 mb-8 leading-relaxed">
|
|
Each night, the grove breathes with interactive installations that react to the movement of the crowd. From bioluminescent pathways to towering "Willow Lanterns" that hum with low-frequency cello tones, every corner tells a different story of harmony between the wild and the woven.
|
|
</p>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center gap-3">
|
|
<span class="w-2 h-2 bg-yellow-600 rounded-full"></span>
|
|
<span>Immersive Light Mapping on Ancient Trees</span>
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<span class="w-2 h-2 bg-yellow-600 rounded-full"></span>
|
|
<span>Spatial Audio Soundscapes by Global Artists</span>
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<span class="w-2 h-2 bg-yellow-600 rounded-full"></span>
|
|
<span>Botanical Mixology & Organic Dining</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 fade-in">
|
|
<img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?auto=format&fit=crop&w=800&q=80" class="rounded-2xl shadow-2xl" alt="Light installation">
|
|
<img src="https://images.unsplash.com/photo-1501281668745-f7f5848fd94a?auto=format&fit=crop&w=800&q=80" class="rounded-2xl mt-8 shadow-2xl" alt="Garden view">
|
|
<img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?auto=format&fit=crop&w=800&q=80" class="rounded-2xl shadow-2xl" alt="People dancing">
|
|
<img src="https://images.unsplash.com/photo-1514525253361-bee8a187499b?auto=format&fit=crop&w=800&q=80" class="rounded-2xl mt-8 shadow-2xl" alt="Music performance">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Schedule Section -->
|
|
<section id="schedule" class="py-24 px-6 bg-black">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl md:text-6xl mb-4">The Rituals</h2>
|
|
<p class="text-gray-400">A curated progression of events across three nights.</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Day 1 -->
|
|
<div class="glass-card p-8 rounded-3xl fade-in">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
|
<div>
|
|
<h3 class="text-3xl font-bold">Night I: The Awakening</h3>
|
|
<p class="text-yellow-600 tracking-widest text-sm">FRIDAY | 6:00 PM — 2:00 AM</p>
|
|
</div>
|
|
<span class="bg-yellow-600/20 text-yellow-500 px-4 py-1 rounded-full text-xs font-bold uppercase">Atmospheric</span>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-6 text-sm text-gray-400">
|
|
<div>
|
|
<p class="font-bold text-white mb-2">Opening Ceremony</p>
|
|
<p>6:00 PM: A synchronized light show and ceremonial drum circle.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-white mb-2">The Grove Sessions</p>
|
|
<p>8:00 PM: Ambient electronics and live cello performances.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-white mb-2">Luminous Walk</p>
|
|
<p>11:00 PM: Guided lantern walk through the deep grove.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Day 2 -->
|
|
<div class="glass-card p-8 rounded-3xl fade-in">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
|
<div>
|
|
<h3 class="text-3xl font-bold">Night II: The Resonance</h3>
|
|
<p class="text-yellow-600 tracking-widest text-sm">SATURDAY | 7:00 PM — 4:00 AM</p>
|
|
</div>
|
|
<span class="bg-yellow-600/20 text-yellow-500 px-4 py-1 rounded-full text-xs font-bold uppercase">Immersive</span>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-6 text-sm text-gray-400">
|
|
<div>
|
|
<p class="font-bold text-white mb-2">Sonic Architecture</p>
|
|
<p>7:00 PM: Interactive sound installations in the clearing.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-white mb-2">Deep Grove Beats</p>
|
|
<p>10:00 PM: Deep melodic techno and tribal fusion.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-white mb-2">Celestial Peak</p>
|
|
<p>1:00 AM: Laser mapping and high-energy sound finale.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Day 3 -->
|
|
<div class="glass-card p-8 rounded-3xl fade-in">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
|
<div>
|
|
<h3 class="text-3xl font-bold">Night III: The Synthesis</h3>
|
|
<p class="text-yellow-600 tracking-widest text-sm">SUNDAY | 4:00 PM — 11:00 PM</p>
|
|
</div>
|
|
<span class="bg-yellow-600/20 text-yellow-500 px-4 py-1 rounded-full text-xs font-bold uppercase">Collaborative</span>
|
|
</div><div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 64.14s</div> |