import React, { useState, useEffect, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { Sparkles, Music, MapPin, Calendar, Clock, ChevronRight, Minus, Plus, Ticket, Star, Zap, Users, ArrowRight, Check } from 'lucide-react'; const App = () => { const [selectedTier, setSelectedTier] = useState('VIP'); const [quantity, setQuantity] = useState(2); const [selectedDay, setSelectedDay] = useState('Day 1'); const [showCheckout, setShowCheckout] = useState(false); const tiers = { General: { price: 129, perks: ['All 3 days access', 'Main stage viewing area', 'Festival merch pack', 'Food & drink discounts'] }, VIP: { price: 249, perks: ['All General perks', 'VIP lounge access', 'Premium viewing deck', 'Express entry lanes', 'Complimentary drinks bar'] }, Backstage: { price: 449, perks: ['All VIP perks', 'Backstage tours', 'Artist meet & greet', 'Private after-party access', 'Limited edition laminate'] } }; const lineup = { 'Day 1': [ { name: 'Aurora Wave', genre: 'Synthwave', time: '4:00 PM', stage: 'Main Stage' }, { name: 'Neon Pulse', genre: 'Electronic', time: '5:30 PM', stage: 'Solar Stage' }, { name: 'Midnight Drive', genre: 'Indie Rock', time: '7:00 PM', stage: 'Main Stage' }, { name: 'Echo Valley', genre: 'Ambient', time: '8:30 PM', stage: 'Lunar Stage' }, { name: 'Stellar Bloom', genre: 'Pop', time: '10:00 PM', stage: 'Main Stage' } ], 'Day 2': [ { name: 'Crimson Sky', genre: 'Alternative', time: '4:00 PM', stage: 'Main Stage' }, { name: 'Solar Flare', genre: 'House', time: '5:30 PM', stage: 'Solar Stage' }, { name: 'The Velvets', genre: 'Rock', time: '7:00 PM', stage: 'Main Stage' }, { name: 'Dream Sequence', genre: 'Dream Pop', time: '8:30 PM', stage: 'Lunar Stage' }, { name: 'Galactic Heart', genre: 'R&B', time: '10:00 PM', stage: 'Main Stage' } ], 'Day 3': [ { name: 'Phantom Echo', genre: 'Techno', time: '4:00 PM', stage: 'Main Stage' }, { name: 'Lunar Bloom', genre: 'Folk', time: '5:30 PM', stage: 'Lunar Stage' }, { name: 'Electric Dawn', genre: 'EDM', time: '7:00 PM', stage: 'Main Stage' }, { name: 'Velvet Skies', genre: 'Chillwave', time: '8:30 PM', stage: 'Solar Stage' }, { name: 'Nova Collective', genre: 'Fusion', time: '10:00 PM', stage: 'Main Stage' } ] }; const totalPrice = tiers[selectedTier].price * quantity; const handleCheckout = () => { setShowCheckout(true); setTimeout(() => setShowCheckout(false), 4000); }; return (

{/* Background glow orbs */}

{/* Navbar */} {/* Hero */}

3 Days • 15 Artists • 1 Unforgettable Experience

NOVA
NIGHTS

Where music meets the stars. Three nights of transcendent performances under the open sky. document.getElementById('tickets')?.scrollIntoView({ behavior: 'smooth' })} className="px-8 py-4 bg-gradient-to-r from-fuchsia-500 to-violet-500 rounded-full font-semibold text-lg shadow-xl shadow-fuchsia-500/30 flex items-center gap-2" > Buy Tickets document.getElementById('lineup')?.scrollIntoView({ behavior: 'smooth' })} className="px-8 py-4 bg-white/10 backdrop-blur-md border border-white/20 rounded-full font-semibold text-lg hover:bg-white/20 transition-colors" > View Lineup

{/* Info Section */}

{[ { icon: Calendar, title: 'August 15-17', subtitle: '2025 • 3 Days' }, { icon: MapPin, title: 'Neon Valley Park', subtitle: 'Los Angeles, CA' }, { icon: Clock, title: 'Doors at 2:00 PM', subtitle: 'Music till 2:00 AM' } ].map((item, idx) => (

{item.title}

{item.subtitle}

))}

{/* Lineup Section */}

THE LINEUP {/* Day Tabs */}

{['Day 1', 'Day 2', 'Day 3'].map((day) => ( setSelectedDay(day)} className={`px-6 py-3 rounded-full font-semibold transition-all ${ selectedDay === day ? 'bg-gradient-to-r from-fuchsia-500 to-violet-500 shadow-lg shadow-fuchsia-500/30' : 'bg-white/5 border border-white/10 hover:bg-white/10' }`} > {day} ))}

{/* Artist Cards */} {lineup[selectedDay].map((artist, idx) => (

{artist.name}

{artist.genre}

{artist.time} {artist.stage}

))}

{/* Ticket Section */}

GET YOUR TICKETS

{/* Tier Cards */}

{Object.entries(tiers).map(([tier, data]) => ( setSelectedTier(tier)} className={`p-6 rounded-2xl text-left transition-all ${ selectedTier === tier ? 'bg-gradient-to-br from-fuchsia-500/30 to-violet-500/30 border-2 border-fuchsia-400 shadow-xl shadow-fuchsia-500/20' : 'bg-white/5 border border-white/10 hover:bg-white/10' }`} >

{tier} {selectedTier === tier && }

${data.price} / day

{data.perks.slice(0, 3).map((perk) => (

{perk}

))}

{/* Checkout Panel */}

Your Experience

{selectedTier} Pass

${tiers[selectedTier].price} per day

setQuantity(Math.max(1, quantity - 1))} className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors" > {quantity} setQuantity(Math.min(10, quantity + 1))} className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors" >

Selected perks:

{perk}

Subtotal ${tiers[selectedTier].price * quantity}

Fees ${Math.round(tiers[selectedTier].price * quantity * 0.05)}

Total ${totalPrice + Math.round(tiers[selectedTier].price * quantity * 0.05)}

{showCheckout ? 'Processing...' : 'Book Now'} {showCheckout && (

✓ Booking confirmed! See you there!

)}

{/* Footer */}

); }; export default App;

NOVA NIGHTS

{item.title}

{artist.name}

Your Experience

NOVA
NIGHTS

콘서트·이벤트 티켓 예매