1087 lines
62 KiB
HTML
1087 lines
62 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Verde Valley Music & Arts Festival — Where Sound Meets the Horizon</title>
|
|
|
|
<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:wght@700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
forest: { 50:'#f0f7f4', 100:'#d9e9e0', 200:'#b5d3b8', 300:'#7fa38a', 400:'#5a8a6a', 500:'#3d6b4a', 600:'#2d4e3a', 700:'#1f3a2a', 800:'#12261a', 900:'#0a1a0f' },
|
|
coral: { 50:'#fef5f2', 100:'#fde5e0', 200:'#f9c5b0', 300:'#f5a085', 400:'#f1735a', 500:'#e8522e', 600:'#c73e20', 700:'#9a3018', 800:'#6e2212', 900:'#44160c' },
|
|
sand: { 50:'#fdfbf7', 100:'#f9f2e3', 200:'#f2e6c8', 300:'#e9d1a0', 400:'#dcc77a', 500:'#d4a94a', 600:'#b8893a', 700:'#8f6b2c', 800:'#6e5222', 900:'#4a3b1a' },
|
|
night: { 50:'#f4f6f8', 100:'#e1e6ed', 200:'#c5cedc', 300:'#9da6b8', 400:'#6d7a90', 500:'#4d5a6a', 600:'#3b4558', 700:'#2d3342', 800:'#1f2230', 900:'#11141c', 950:'#0a0d12' }
|
|
},
|
|
fontFamily: {
|
|
display: ['"Playfair Display"', 'serif'],
|
|
body: ['"Inter"', 'sans-serif'],
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--bg: #f4f6f8;
|
|
--fg: #11141c;
|
|
--muted: #6d7a90;
|
|
--accent: #e8522e;
|
|
--accent2: #d4a94a;
|
|
--card: #ffffff;
|
|
--border: #e1e6ed;
|
|
--glass: rgba(255,255,255,0.72);
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { scroll-behavior: smooth; }
|
|
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--fg); overflow-x: hidden; }
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: #c5cedc; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #9da6b8; }
|
|
|
|
/* Focus visible */
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
|
|
|
|
/* Hero background animation */
|
|
.hero-bg {
|
|
background: linear-gradient(135deg, #1f3a2a 0%, #2d4e3a 30%, #3d6b4a 60%, #5a8a6a 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
|
|
radial-gradient(circle at 80% 20%, rgba(232,82,46,0.15) 0%, transparent 40%);
|
|
}
|
|
|
|
/* Floating particles */
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
animation: floatParticle 8s ease-in-out infinite;
|
|
opacity: 0.3;
|
|
}
|
|
@keyframes floatParticle {
|
|
0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
|
|
50% { transform: translateY(-30px) scale(1.2); opacity: 0.6; }
|
|
}
|
|
|
|
/* Glow effect */
|
|
.glow { box-shadow: 0 0 30px rgba(232,82,46,0.15), 0 0 60px rgba(232,82,46,0.05); }
|
|
.glow-teal { box-shadow: 0 0 30px rgba(61,107,74,0.2), 0 0 60px rgba(61,107,74,0.08); }
|
|
|
|
/* Section reveal */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Card hover */
|
|
.card-hover {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Button press */
|
|
.btn-press {
|
|
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
|
}
|
|
.btn-press:active {
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
/* Nav scroll state */
|
|
.nav-scrolled {
|
|
background: rgba(244,246,248,0.92) !important;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 0 1px 8px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* Marquee */
|
|
@keyframes marquee {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-50%); }
|
|
}
|
|
.marquee-track { animation: marquee 30s linear infinite; }
|
|
|
|
/* Image overlay */
|
|
.img-overlay {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.img-overlay::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, rgba(15,22,18,0.8) 0%, transparent 60%);
|
|
}
|
|
|
|
/* Tag pill */
|
|
.tag-pill {
|
|
background: #e8522e;
|
|
color: #fff;
|
|
font-size: 0.75rem;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Line clamp */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Typing cursor */
|
|
.cursor-blink {
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* Sound wave */
|
|
.wave-bar {
|
|
display: inline-block;
|
|
width: 3px;
|
|
background: var(--accent);
|
|
border-radius: 2px;
|
|
animation: wave 1.2s ease-in-out infinite;
|
|
}
|
|
.wave-bar:nth-child(2) { animation-delay: 0.1s; }
|
|
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
|
|
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
|
|
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
|
|
|
|
@keyframes wave {
|
|
0%, 100% { transform: scaleY(1); }
|
|
50% { transform: scaleY(0.6); }
|
|
}
|
|
|
|
/* Countdown */
|
|
.countdown-num {
|
|
font-variant-numeric: tabular-nums;
|
|
font-feature-settings: 'tnum';
|
|
}
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
padding: 16px 24px;
|
|
background: #1f3a2a;
|
|
color: #fff;
|
|
border-radius: 12px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
z-index: 9999;
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
|
|
}
|
|
.toast.show {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Stagger */
|
|
.stagger-item {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
animation: staggerIn 0.5s ease forwards;
|
|
}
|
|
@keyframes staggerIn {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Reduced motion */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
.reveal { opacity: 1; transform: none; }
|
|
}
|
|
|
|
/* Mobile menu */
|
|
.mobile-menu {
|
|
transform: translateX(100%);
|
|
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
.mobile-menu.open { transform: translateX(0); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Toast notification -->
|
|
<div id="toast" class="toast" role="alert" aria-live="polite">
|
|
<i class="fa-solid fa-check-circle mr-2"></i>
|
|
<span id="toast-msg">Added to your cart!</span>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" role="navigation" aria-label="Main navigation">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo -->
|
|
<a href="#" class="flex items-center gap-2.5 group">
|
|
<div class="w-9 h-9 rounded-lg bg-coral-500 flex items-center justify-center text-white font-display font-bold text-lg transition-transform duration-200 group-hover:scale-110">V</div>
|
|
<span class="font-display font-bold text-lg text-white">Verde Valley</span>
|
|
</a>
|
|
<!-- Desktop nav -->
|
|
<div class="hidden md:flex items-center gap-8">
|
|
<a href="#events" class="text-sm font-medium text-white/80 hover:text-white transition-colors duration-200">Events</a>
|
|
<a href="#schedule" class="text-sm font-medium text-white/80 hover:text-white transition-colors duration-200">Schedule</a>
|
|
<a href="#tickets" class="text-sm font-medium text-white/80 hover:text-white transition-colors duration-200">Tickets</a>
|
|
<a href="#about" class="text-sm font-medium text-white/80 hover:text-white transition-colors duration-200">About</a>
|
|
<a href="#register" class="px-5 py-2 bg-coral-500 text-white text-sm font-semibold rounded-full hover:bg-coral-600 transition-all duration-200 btn-press">Register Now</a>
|
|
</div>
|
|
<!-- Mobile toggle -->
|
|
<button id="mobile-toggle" class="md:hidden w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/10 transition-colors" aria-label="Toggle menu" aria-expanded="false">
|
|
<i class="fa-solid fa-bars text-white text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile menu -->
|
|
<div id="mobile-menu" class="mobile-menu fixed inset-0 z-[60] bg-night-950/95 backdrop-blur-xl flex flex-col" role="dialog" aria-modal="true" aria-label="Mobile navigation">
|
|
<div class="flex items-center justify-between p-6">
|
|
<a href="#" class="flex items-center gap-2.5">
|
|
<div class="w-9 h-9 rounded-lg bg-coral-500 flex items-center justify-center text-white font-display font-bold text-lg">V</div>
|
|
<span class="font-display font-bold text-xl">Verde Valley</span>
|
|
</a>
|
|
<button id="mobile-close" class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/10 transition-colors" aria-label="Close menu">
|
|
<i class="fa-solid fa-xmark text-white text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center flex-1 gap-6">
|
|
<a href="#events" class="text-2xl font-display font-semibold text-white hover:text-coral-400 transition-colors">Events</a>
|
|
<a href="#schedule" class="text-2xl font-display font-semibold text-white hover:text-coral-400 transition-colors">Schedule</a>
|
|
<a href="#tickets" class="text-2xl font-display font-semibold text-white hover:text-coral-400 transition-colors">Tickets</a>
|
|
<a href="#about" class="text-2xl font-display font-semibold text-white hover:text-coral-400 transition-colors">About</a>
|
|
<a href="#register" class="px-8 py-3 bg-coral-500 text-white text-xl font-semibold rounded-full hover:bg-coral-600 transition-colors mt-4">Register Now</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== HERO ===================== -->
|
|
<section class="hero-bg min-h-screen flex items-center relative" id="hero">
|
|
<!-- Animated particles -->
|
|
<div id="particles" class="absolute inset-0 pointer-events-none" aria-hidden="true">
|
|
</div>
|
|
<!-- Decorative gradient blobs -->
|
|
<div class="absolute top-20 right-10 w-96 h-96 bg-coral-500/20 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
<div class="absolute bottom-0 left-0 w-80 h-80 bg-sand-500/20 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
<div class="absolute top-40 left-1/3 w-64 h-64 bg-teal-500/15 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<!-- Left: text -->
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 bg-coral-500/15 text-coral-400 text-sm font-medium px-4 py-2 rounded-full mb-8 stagger-item" style="animation-delay: 0.1s">
|
|
<span class="w-2 h-2 bg-coral-400 rounded-full animate-pulse"></span>
|
|
Now Booking — Limited Spots Remaining
|
|
</div>
|
|
<h1 class="font-display text-5xl sm:text-6xl lg:text-7xl font-black leading-tight mb-6 stagger-item" style="animation-delay: 0.2s">
|
|
Where Sound<br>
|
|
<span class="text-coral-400">Meets</span> the Horizon
|
|
</h1>
|
|
<p class="text-lg text-white/70 leading-relaxed mb-10 max-w-lg stagger-item" style="animation-delay: 0.3s">
|
|
Three days of live music, artisan workshops, and community under the stars. Join the most anticipated festival in the Verde Valley this summer.
|
|
</p>
|
|
<div class="flex flex-wrap gap-4 stagger-item" style="animation-delay: 0.4s">
|
|
<a href="#register" class="px-8 py-4 bg-coral-500 text-white font-semibold rounded-full hover:bg-coral-600 transition-all duration-300 btn-press text-base flex items-center gap-2">
|
|
<i class="fa-solid fa-ticket"></i>
|
|
Get Tickets
|
|
</a>
|
|
<a href="#events" class="px-8 py-4 border-2 border-white/20 text-white font-semibold rounded-full hover:border-white/50 hover:bg-white/5 transition-all duration-300 btn-press text-base flex items-center gap-2">
|
|
<i class="fa-solid fa-play"></i>
|
|
Explore
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Stats bar -->
|
|
<div class="flex gap-8 mt-10 pt-8 border-t border-white/10 stagger-item" style="animation-delay: 0.5s">
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-white countup" data-target="12000" data-suffix="+">0</div>
|
|
<div class="text-sm text-white/50 mt-1">Attending</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-white countup" data-target="45" data-suffix="+">0</div>
|
|
<div class="text-sm text-white/50 mt-1">Acts</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-3xl font-bold text-white countup" data-target="3" data-suffix="">0</div>
|
|
<div class="text-sm text-white/50 mt-1">Days</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Image -->
|
|
<div class="relative hidden lg:block">
|
|
<div class="img-overlay rounded-3xl overflow-hidden aspect-[4/5]">
|
|
<img src="https://images.pexels.com/photos/5558928/pexels-photo-5558928.webp?auto=format&fit=crop&w=1000&q=80" alt="A vibrant summer music festival under the stars with a crowd dancing" class="w-full h-full object-cover" loading="eager">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-forest-900/70 via-transparent to-transparent"></div>
|
|
</div>
|
|
<!-- Floating badge -->
|
|
<div class="absolute -bottom-4 -right-4 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl px-5 py-3 flex items-center gap-3 stagger-item" style="animation-delay: 0.6s">
|
|
<div class="w-10 h-10 rounded-full bg-coral-500 flex items-center justify-center text-white">
|
|
<i class="fa-solid fa-heart text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-semibold text-white">15,000+</div>
|
|
<div class="text-xs text-white/50">Loves</div>
|
|
</div>
|
|
</div>
|
|
<!-- Floating line -->
|
|
<div class="absolute -top-2 -left-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl px-4 py-2 flex items-center gap-2 stagger-item" style="animation-delay: 0.7s">
|
|
<span class="w-3 h-3 bg-coral-400 rounded-full"></span>
|
|
<span class="text-xs text-white/70 font-medium">Live Music</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== MARQUEE ===================== -->
|
|
<div class="bg-forest-700 py-4 overflow-hidden" aria-hidden="true">
|
|
<div class="flex whitespace-nowrap">
|
|
<div class="marquee-track flex items-center gap-8">
|
|
<span class="text-white/70 text-sm font-medium">🎵 Live Jazz Under the Stars</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
<span class="text-white/70 text-sm font-medium">🥁 Drumming Circle</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
<span class="text-white/70 text-sm font-medium">🎨 Artisan Market</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
<span class="text-white/70 text-sm font-medium">🎸 Rock Stage</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
<span class="text-white/70 text-sm font-medium">🌿 Wellness Workshops</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
<span class="text-white/70 text-sm font-medium">🌾 Community Feast</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
<span class="text-white/70 text-sm font-medium">🎭 Open-Air Cinema</span>
|
|
<span class="text-coral-400 text-2xl">⋮</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===================== FEATURES ===================== -->
|
|
<section class="py-20 bg-white relative">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="reveal bg-white rounded-2xl p-8 border border-gray-100 card-hover stagger-item">
|
|
<div class="w-14 h-14 rounded-2xl bg-coral-500/10 flex items-center justify-center text-coral-500 text-xl mb-6">
|
|
<i class="fa-solid fa-music"></i>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Live Music</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">Over 45 artists across genres — from intimate acoustic sets to electrifying headliners under open skies.</p>
|
|
</div>
|
|
<div class="reveal bg-white rounded-2xl p-8 border border-gray-100 card-hover stagger-item" style="animation-delay: 0.1s">
|
|
<div class="w-14 h-14 rounded-2xl bg-sand-500/10 flex items-center justify-center text-sand-600 text-xl mb-6">
|
|
<i class="fa-solid fa-pencil-ruler"></i>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Artisan Market</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">Handcrafted goods, local food artisans, and creative workshops from the Verde Valley community.</p>
|
|
</div>
|
|
<div class="reveal bg-white rounded-2xl p-8 border border-gray-100 card-hover stagger-item" style="animation-delay: 0.2s">
|
|
<div class="w-14 h-14 rounded-2xl bg-teal-500/10 flex items-center justify-center text-teal-600 text-xl mb-6">
|
|
<i class="fa-solid fa-people-group"></i>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-3">Community</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">Connect with fellow music lovers, share stories, and build lasting bonds in a warm, inclusive atmosphere.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== EVENTS ===================== -->
|
|
<section id="events" class="py-20 bg-forest-900 text-white overflow-hidden">
|
|
<div class="absolute inset-0 opacity-10" aria-hidden="true">
|
|
<div class="absolute top-0 left-0 w-96 h-96 bg-coral-400 rounded-full blur-3xl"></div>
|
|
<div class="absolute bottom-0 right-0 w-80 h-80 bg-sand-400 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-12 reveal">
|
|
<span class="tag-pill mb-4 inline-block">Featured Events</span>
|
|
<h2 class="font-display text-4xl sm:text-5xl font-bold mb-4">What's On Your Calendar</h2>
|
|
<p class="text-white/50 max-w-2xl mx-auto">A curated lineup of the most unforgettable performances, hands-on workshops, and experiences happening in the Verde Valley.</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Card 1 -->
|
|
<div class="reveal bg-white/5 border border-white/10 rounded-2xl overflow-hidden hover:bg-white/10 transition-colors duration-300 card-hover">
|
|
<div class="h-56 bg-gradient-to-br from-coral-600 to-coral-400 relative overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/5347521/pexels-photo-5347521.webp?auto=format&fit=crop&w=1000&q=80" alt="Sunset jazz stage at a summer festival" class="w-full h-full object-cover opacity-70" loading="lazy">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-forest-900/80 to-transparent"></div>
|
|
<span class="absolute top-4 right-4 bg-coral-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Headliner</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i class="fa-solid fa-calendar text-coral-400 text-sm"></i>
|
|
<span class="text-sm text-white/50">June 14 — 16, 2025</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Sunset Jazz at the Pavilion</h3>
|
|
<p class="text-sm text-white/40 leading-relaxed mb-4">An unforgettable evening of live jazz, with world-class musicians performing beneath a canopy of stars.</p>
|
|
<div class="flex items-center gap-4 text-sm text-white/40">
|
|
<span><i class="fa-solid fa-users mr-1 text-coral-400"></i> 3,200 Tickets</span>
|
|
<span><i class="fa-solid fa-location-dot mr-1 text-coral-400"></i> Pavilion</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2 -->
|
|
<div class="reveal bg-white/5 border border-white/10 rounded-2xl overflow-hidden hover:bg-white/10 transition-colors duration-300 card-hover">
|
|
<div class="h-56 bg-gradient-to-br from-teal-600 to-teal-400 relative overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/5341682/pexels-photo-5341682.webp?auto=format&fit=crop&w=1000&q=80" alt="An artist painting at an outdoor workshop" class="w-full h-full object-cover opacity-70" loading="lazy">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-forest-900/80 to-transparent"></div>
|
|
<span class="absolute top-4 right-4 bg-teal-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Workshop</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i class="fa-solid fa-calendar text-teal-400 text-sm"></i>
|
|
<span class="text-sm text-white/50">June 28, 2025</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Wildflower Painting Workshop</h3>
|
|
<p class="text-sm text-white/40 leading-relaxed mb-4">Learn to paint the landscape around you. All skill levels welcome — bring your canvas and creative spirit.</p>
|
|
<div class="flex items-center gap-4 text-sm text-white/40">
|
|
<span><i class="fa-solid fa-users mr-1 text-teal-400"></i> 120 Slots</span>
|
|
<span><i class="fa-solid fa-location-dot mr-1 text-teal-400"></i> Art Pavilion</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3 -->
|
|
<div class="reveal bg-white/5 border border-white/10 rounded-2xl overflow-hidden hover:bg-white/10 transition-colors duration-300 card-hover">
|
|
<div class="h-56 bg-gradient-to-br from-sand-500 to-sand-300 relative overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/5342116/pexels-photo-5342116.webp?auto=format&fit=crop&w=1000&q=80" alt="A crowd dancing at an outdoor music festival" class="w-full h-full object-cover opacity-70" loading="lazy">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-forest-900/80 to-transparent"></div>
|
|
<span class="absolute top-4 right-4 bg-sand-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Main Stage</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i class="fa-solid fa-calendar text-sand-600 text-sm"></i>
|
|
<span class="text-sm text-white/50">July 11 — 13, 2025</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Verde Valley Music Festival</h3>
|
|
<p class="text-sm text-white/40 leading-relaxed mb-4">The flagship three-day event featuring 12 artists, a food village, and a night of dancing under the desert sky.</p>
|
|
<div class="flex items-center gap-4 text-sm text-white/40">
|
|
<span><i class="fa-solid fa-users mr-1 text-sand-600"></i> 12,000+ Tickets</span>
|
|
<span><i class="fa-solid fa-location-dot mr-1 text-sand-600"></i> Multiple Venues</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4 -->
|
|
<div class="reveal bg-white/5 border border-white/10 rounded-2xl overflow-hidden hover:bg-white/10 transition-colors duration-300 card-hover">
|
|
<div class="h-56 bg-gradient-to-br from-forest-400 to-forest-600 relative overflow-hidden">
|
|
<img src="https://images.pexels.com/photos/5340470/pexels-photo-5340470.webp?auto=format&fit=crop&w=1000&q=80" alt="A group of friends enjoying a campfire dinner" class="w-full h-full object-cover opacity-70" loading="lazy">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-forest-900/80 to-transparent"></div>
|
|
<span class="absolute top-4 right-4 bg-forest-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Campfire</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i class="fa-solid fa-calendar text-forest-400 text-sm"></i>
|
|
<span class="text-sm text-white/50">July 25, 2025</span>
|
|
</div>
|
|
<h3 class="font-display text-xl font-bold mb-2">Campfire Storytelling Nights</h3>
|
|
<p class="text-sm text-white/40 leading-relaxed mb-4">Gather around the fire, share stories, and make memories that will last a lifetime under a blanket of stars.</p>
|
|
<div class="flex items-center gap-4 text-sm text-white/40">
|
|
<span><i class="fa-solid fa-users mr-1 text-forest-400"></i> 800 Spots</span>
|
|
<span><i class="fa-solid fa-location-dot mr-1 text-forest-400"></i> Campfire Circle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== SCHEDULE ===================== -->
|
|
<section id="schedule" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid lg:grid-cols-5 gap-8">
|
|
<!-- Timeline -->
|
|
<div class="lg:col-span-3">
|
|
<div class="reveal">
|
|
<h2 class="font-display text-3xl font-bold mb-2">Festival Day Schedule</h2>
|
|
<p class="text-sm text-gray-500 mb-8">Every moment is designed for magic.</p>
|
|
|
|
<div class="relative">
|
|
<!-- Vertical line -->
|
|
<div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-200" aria-hidden="true"></div>
|
|
|
|
<div class="space-y-8 pl-6">
|
|
<!-- Day 1 -->
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-coral-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D1
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-coral-500 font-semibold text-sm">09:00 AM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Gate Opens</h4>
|
|
<p class="text-sm text-gray-500 mt-1">Arrive early, grab your pass, and settle in at the main pavilion.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-coral-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D1
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-coral-500 font-semibold text-sm">11:00 AM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Headliner Set 1</h4>
|
|
<p class="text-sm text-gray-500 mt-1">Opening act brings the energy. Check the lineup for the first set.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-coral-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D1
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-coral-500 font-semibold text-sm">2:00 PM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Midday Break</h4>
|
|
<p class="text-sm text-gray-500 mt-1">Refresh at the food village and explore the artisan stalls.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-coral-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D1
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-coral-500 font-semibold text-sm">5:00 PM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Headliner Set 2</h4>
|
|
<p class="text-sm text-gray-500 mt-1">The big names take the stage for the main concert of the day.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-coral-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D1
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-coral-500 font-semibold text-sm">8:00 PM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Night DJ Set</h4>
|
|
<p class="text-sm text-gray-500 mt-1">Drugs of the world — DJ set under the open sky.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Day 2 -->
|
|
<div class="lg:col-span-2">
|
|
<div class="reveal">
|
|
<h2 class="font-display text-3xl font-bold mb-2">Day 2</h2>
|
|
<p class="text-sm text-gray-500 mb-8">A new chapter awaits.</p>
|
|
|
|
<div class="relative">
|
|
<div class="absolute left-6 top-0 bottom-0 w-0.5 bg-gray-200" aria-hidden="true"></div>
|
|
|
|
<div class="space-y-8 pl-6">
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D2
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-teal-500 font-semibold text-sm">10:00 AM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Wellness Morning</h4>
|
|
<p class="text-sm text-gray-500 mt-1">Yoga, meditation, and breathwork with local instructors.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D2
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-teal-500 font-semibold text-sm">12:00 PM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Indie Band Spotlight</h4>
|
|
<p class="text-sm text-gray-500 mt-1">An intimate indie performance and Q&A session.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D2
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-teal-500 font-semibold text-sm">4:00 PM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Sunset Stage</h4>
|
|
<p class="text-sm text-gray-500 mt-1">Golden hour set with a new artist each day.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal group relative">
|
|
<div class="absolute -left-12 top-0 w-8 h-8 rounded-full bg-teal-500 flex items-center justify-center text-white text-sm font-bold group-hover:scale-110 transition-transform">
|
|
D2
|
|
</div>
|
|
<div class="bg-white rounded-2xl p-6 border border-gray-100 card-hover">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<span class="text-teal-500 font-semibold text-sm">7:00 PM</span>
|
|
<h4 class="font-display text-lg font-bold mt-1">Grand Finale</h4>
|
|
<p class="text-sm text-gray-500 mt-1">The headliner concert under the stars.</p>
|
|
</div>
|
|
<span class="tag-pill text-xs">Day 2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== TICKETS ===================== -->
|
|
<section id="tickets" class="py-20 bg-night-950 text-white relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-96 h-96 bg-coral-500/10 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
<div class="absolute bottom-0 left-0 w-80 h-80 bg-sand-500/10 rounded-full blur-3xl" aria-hidden="true"></div>
|
|
|
|
<div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-2 gap-16 items-center">
|
|
<div class="reveal">
|
|
<span class="tag-pill mb-4 inline-block">Ticket Options</span>
|
|
<h2 class="font-display text-4xl font-bold mb-6">Get Your Tickets</h2>
|
|
<p class="text-white/50 leading-relaxed mb-8">Choose your experience and join the celebration. All proceeds support local artists and the Verde Valley community.</p>
|
|
|
|
<div class="space-y-6">
|
|
<div class="flex items-center gap-4 bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition-colors">
|
|
<div class="w-12 h-12 rounded-xl bg-coral-500/20 flex items-center justify-center text-coral-400">
|
|
<i class="fa-solid fa-ticket text-lg"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-white">General Admission</h4>
|
|
<p class="text-sm text-white/40">One ticket, one experience. Perfect for friends and families.</p>
|
|
</div>
|
|
<span class="text-coral-400 font-semibold">$85</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition-colors">
|
|
<div class="w-12 h-12 rounded-xl bg-teal-500/20 flex items-center justify-center text-teal-400">
|
|
<i class="fa-solid fa-users text-lg"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-white">Family Pass</h4>
|
|
<p class="text-sm text-white/40">A bundle of 4 tickets — perfect for a full family celebration.</p>
|
|
</div>
|
|
<span class="text-teal-400 font-semibold">$280</span>
|
|
</div>
|
|
<div class="flex items-center gap-4 bg-white/5 border border-white/10 rounded-xl p-5 hover:bg-white/10 transition-colors">
|
|
<div class="w-12 h-12 rounded-xl bg-sand-500/20 flex items-center justify-center text-sand-400">
|
|
<i class="fa-solid fa-crown text-lg"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-semibold text-white">VIP Access</h4>
|
|
<p class="text-sm text-white/40">Behind-the-scenes experience with premium seating and exclusive content.</p>
|
|
</div>
|
|
<span class="text-sand-400 font-semibold">$220</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reveal">
|
|
<div class="bg-white/5 border border-white/10 rounded-2xl p-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="font-display text-xl font-bold">Your Ticket</h3>
|
|
<span class="text-sm text-white/40">Expires in 3 days</span>
|
|
</div>
|
|
<div class="mb-6">
|
|
<img src="https://images.pexels.com/photos/5346294/pexels-photo-5346294.webp?auto=format&fit=crop&w=600&q=80" alt="Ticket design preview" class="rounded-xl w-full aspect-square object-cover" loading="lazy">
|
|
</div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<span class="text-2xl font-bold">$85</span>
|
|
<span class="text-sm text-white/40">General</span>
|
|
</div>
|
|
<div class="w-full bg-gray-800 rounded-full h-2 mb-4">
|
|
<div class="bg-coral-500 h-2 rounded-full" style="width: 75%"></div>
|
|
</div>
|
|
<div class="text-sm text-white/40">
|
|
<span class="text-coral-400">75% filled</span>
|
|
<span class="mx-3">|</span>
|
|
<span class="text-white/50">3,200 of 4,000 tickets</span>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-6">
|
|
<a href="#register" class="flex-1 py-3 bg-coral-500 text-white text-center font-semibold rounded-xl hover:bg-coral-600 transition-colors btn-press">
|
|
<i class="fa-solid fa-cart-plus mr-2"></i>
|
|
Buy Now
|
|
</a>
|
|
<button class="flex-1 py-3 border border-white/20 text-white rounded-xl hover:bg-white/5 transition-colors btn-press">
|
|
<i class="fa-regular fa-heart mr-2"></i>
|
|
Favorite
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== CTA ===================== -->
|
|
<section id="register" class="py-20 bg-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="relative overflow-hidden rounded-3xl" style="background: linear-gradient(135deg, #1f3a2a 0%, #3d6b4a 100%);">
|
|
<div class="absolute inset-0 opacity-20" aria-hidden="true">
|
|
<img src="https://images.pexels.com/photos/5346294/pexels-photo-5346294.webp?auto=format&fit=crop&w=1000&q=80" alt="" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="relative z-10 px-8 py-16 sm:px-12 lg:px-16 text-center">
|
|
<h2 class="font-display text-4xl sm:text-5xl font-bold text-white mb-4">
|
|
Don't Wait —<br>
|
|
<span class="text-coral-400">Secure Your Spot</span>
|
|
</h2>
|
|
<p class="text-lg text-white/50 mb-8 max-w-lg mx-auto">
|
|
Limited tickets remain. Join the 12,000+ attendees who are already planning their summer getaway.
|
|
</p>
|
|
<div class="flex flex-wrap items-center justify-center gap-4">
|
|
<form id="register-form" class="flex flex-col sm:flex-row gap-3" onsubmit="return false;">
|
|
<input type="email" id="email-input" placeholder="Enter your email" required
|
|
class="px-5 py-3 bg-white/10 text-white placeholder-white/30 border border-white/20 rounded-xl focus:outline-none focus:border-coral-400 focus:bg-white/15 transition-colors text-sm w-full sm:w-72"
|
|
aria-label="Email address">
|
|
<button type="submit" id="register-btn"
|
|
class="px-8 py-3 bg-coral-500 text-white font-semibold rounded-xl hover:bg-coral-600 transition-all duration-300 btn-press text-sm whitespace-nowrap">
|
|
<i class="fa-solid fa-arrow-right mr-2"></i>
|
|
Get Tickets
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<p class="text-sm text-white/30 mt-4">Free shipping on orders over $50. Use code <span class="text-coral-400 font-medium">FEST25</span> at checkout.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===================== FOOTER ===================== -->
|
|
<footer class="bg-forest-900 text-white py-16">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-4 gap-12 mb-12">
|
|
<div>
|
|
<div class="flex items-center gap-2.5 mb-4">
|
|
<div class="w-10 h-10 rounded-lg bg-coral-500 flex items-center justify-center text-white font-display font-bold text-lg">V</div>
|
|
<span class="font-display font-bold text-lg">Verde Valley</span>
|
|
</div>
|
|
<p class="text-sm text-white/40 leading-relaxed">The most anticipated music and arts festival in the Verde Valley. Join us for an unforgettable summer.</p>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-sm mb-4 text-white/80">Explore</h4>
|
|
<ul class="space-y-2 text-sm text-white/40">
|
|
<li><a href="#events" class="hover:text-coral-400 transition-colors">Events</a></li>
|
|
<li><a href="#schedule" class="hover:text-coral-400 transition-colors">Schedule</a></li>
|
|
<li><a href="#tickets" class="hover:text-coral-400 transition-colors">Tickets</a></li>
|
|
<li><a href="#about" class="hover:text-coral-400 transition-colors">About</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-sm mb-4 text-white/80">Stay Connected</h4>
|
|
<ul class="space-y-2 text-sm text-white/40">
|
|
<li>Subscribers get early access and exclusive content</li>
|
|
<li>Follow us on social media</li>
|
|
<li>Newsletter: <span class="text-coral-400">subscribe@verdegv.com</span></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-sm mb-4 text-white/80">Contact</h4>
|
|
<ul class="space-y-2 text-sm text-white/40">
|
|
<li><i class="fa-solid fa-phone mr-2 text-coral-400"></i> (505) 555-0142</li>
|
|
<li><i class="fa-solid fa-envelope mr-2 text-coral-400"></i> info@verdegv.com</li>
|
|
<li><i class="fa-solid fa-location-dot mr-2 text-coral-400"></i> 1200 E. Main St, Sedona, AZ 86336</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-white/10 pt-8 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p class="text-xs text-white/30">2025 Verde Valley Festival. All rights reserved.</p>
|
|
<div class="flex gap-4">
|
|
<a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-white/50 hover:text-coral-400 hover:bg-white/10 transition-colors" aria-label="Instagram">
|
|
<i class="fa-brands fa-instagram"></i>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-white/50 hover:text-coral-400 hover:bg-white/10 transition-colors" aria-label="Twitter">
|
|
<i class="fa-brands fa-x-twitter"></i>
|
|
</a>
|
|
<a href="#" class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-white/50 hover:text-coral-400 hover:bg-white/10 transition-colors" aria-label="Facebook">
|
|
<i class="fa-brands fa-facebook-f"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ===================== JAVASCRIPT ===================== -->
|
|
<script>
|
|
// ===================== Mobile Menu =====================
|
|
const mobileToggle = document.getElementById('mobile-toggle');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const mobileClose = document.getElementById('mobile-close');
|
|
const mobileLinks = mobileMenu.querySelectorAll('a');
|
|
|
|
function closeMobile() {
|
|
mobileMenu.classList.remove('open');
|
|
mobileToggle.setAttribute('aria-expanded', 'false');
|
|
}
|
|
|
|
mobileToggle.addEventListener('click', () => {
|
|
const isOpen = mobileMenu.classList.contains('open');
|
|
if (isOpen) {
|
|
closeMobile();
|
|
} else {
|
|
mobileMenu.classList.add('open');
|
|
mobileToggle.setAttribute('aria-expanded', 'true');
|
|
}
|
|
});
|
|
|
|
mobileClose.addEventListener('click', closeMobile);
|
|
mobileLinks.forEach(link => link.addEventListener('click', closeMobile));
|
|
|
|
// Close on Escape
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && mobileMenu.classList.contains('open')) {
|
|
closeMobile();
|
|
}
|
|
});
|
|
|
|
// ===================== Nav Scroll =====================
|
|
const navbar = document.getElementById('navbar');
|
|
const navLinks = navbar.querySelectorAll('a');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('nav-scrolled');
|
|
} else {
|
|
navbar.classList.remove('nav-scrolled');
|
|
}
|
|
});
|
|
|
|
// ===================== Countdown =====================
|
|
function formatTime(date) {
|
|
const now = new Date();
|
|
const diff = date - now;
|
|
if (diff <= 0) return '0d 0h 0m 0s';
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
return `${days}d ${hours}h ${minutes}m ${seconds}s`;
|
|
}
|
|
|
|
// Countdown timer
|
|
let targetDate = new Date('2025-08-01T12:00:00');
|
|
const countdownEl = document.getElementById('countdown');
|
|
function updateCountdown() {
|
|
const now = new Date();
|
|
const diff = targetDate - now;
|
|
if (diff <= 0) {
|
|
countdownEl.innerHTML = '<span class="text-coral-400">Event is happening now!</span>';
|
|
return;
|
|
}
|
|
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
countdownEl.innerHTML = `
|
|
<span class="countdown-num text-white/70">${days}d</span>
|
|
<span class="countdown-num text-white/70">${hours}h</span>
|
|
<span class="countdown-num text-white/70">${minutes}m</span>
|
|
<span class="countdown-num text-white/70">${seconds}s</span>
|
|
`;
|
|
}
|
|
updateCountdown();
|
|
setInterval(updateCountdown, 1000);
|
|
|
|
// ===================== Scroll Reveal =====================
|
|
const revealObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
|
|
|
|
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
|
|
|
|
// ===================== Countup Animation =====================
|
|
function animateCountup() {
|
|
document.querySelectorAll('.countup').forEach(el => {
|
|
const target = parseInt(el.dataset.target);
|
|
const suffix = el.dataset.suffix || '';
|
|
const duration = 2000;
|
|
const startTime = performance.now();
|
|
|
|
function update(currentTime) {
|
|
const elapsed = currentTime - startTime;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const eased = 1 - Math.pow(1 - progress, 3);
|
|
const current = Math.floor(eased * target);
|
|
el.textContent = current.toLocaleString() + suffix;
|
|
if (progress < 1) {
|
|
requestAnimationFrame(update);
|
|
}
|
|
}
|
|
requestAnimationFrame(update);
|
|
});
|
|
}
|
|
|
|
// Observe after reveal
|
|
const countupObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
animateCountup();
|
|
countupObserver.disconnect();
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
|
|
document.querySelectorAll('.countup').forEach(el => countupObserver.observe(el));
|
|
|
|
// ===================== Toast =====================
|
|
const toast = document.getElementById('toast');
|
|
const toastMsg = document.getElementById('toast-msg');
|
|
|
|
function showToast(msg) {
|
|
toastMsg.textContent = msg;
|
|
toast.classList.add('show');
|
|
setTimeout(() => toast.classList.remove('show'), 3000);
|
|
}
|
|
|
|
// ===================== Register Form =====================
|
|
const registerForm = document.getElementById('register-form');
|
|
const emailInput = document.getElementById('email-input');
|
|
const registerBtn = document.getElementById('register-btn');
|
|
|
|
registerForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const email = emailInput.value.trim();
|
|
if (!email) return;
|
|
|
|
// Simple validation
|
|
if (!email.includes('@') || !email.includes('.')) {
|
|
showToast('Please enter a valid email address.');
|
|
return;
|
|
}
|
|
|
|
showToast('🎉 Check your inbox! We\'re getting ready to send those tickets.');
|
|
emailInput.value = '';
|
|
|
|
// Simulate registration
|
|
setTimeout(() => {
|
|
showToast('🎉 A confirmation has been sent!');
|
|
}, 1500);
|
|
});
|
|
|
|
// ===================== Particles =====================
|
|
(function createParticles() {
|
|
const container = document.getElementById('particles');
|
|
if (!container) return;
|
|
|
|
for (let i = 0; i < 30; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.className = 'particle';
|
|
const size = Math.random() * 6 + 2;
|
|
const isCoral = Math.random() > 0.6;
|
|
const isSand = Math.random() > 0.5;
|
|
const color = isCoral
|
|
? `rgba(232, 82, 46, ${Math.random() * 0.3 + 0.1})`
|
|
: isSand
|
|
? `rgba(212, 169, 74, ${Math.random() * 0.3 + 0.1})`
|
|
: `rgba(61, 107, 74, ${Math.random() * 0.3 + 0.1})`;
|
|
|
|
particle.style.cssText = `
|
|
width: ${size}px;
|
|
height: ${size}px;
|
|
background: ${color};
|
|
left: ${Math.random() * 100}%;
|
|
top: ${Math.random() * 100}%;
|
|
animation-delay: ${Math.random() * 8}s;
|
|
animation-duration: ${Math.random() * 6 + 6}s;
|
|
border-radius: ${Math.random() > 0.5 ? '50%' : '0'};
|
|
`;
|
|
container.appendChild(particle);
|
|
}
|
|
})();
|
|
|
|
// ===================== Smooth scroll for anchor links =====================
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
e.preventDefault();
|
|
const offset = 80;
|
|
const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
|
window.scrollTo({ top, behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<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 98.07s<br>Model: bloomer010/Ling-3.0-tiny-GGUF:Q4_K_M</div></body>
|
|
</html> |