Seed: music template (13 files)
This commit is contained in:
@@ -0,0 +1,117 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Users, Disc3, MapPin, Award, Quote, X, ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
|
||||||
|
const stats = [
|
||||||
|
{ icon: Users, label: "Monthly Listeners", value: "2.4M" },
|
||||||
|
{ icon: Disc3, label: "Albums Released", value: "4" },
|
||||||
|
{ icon: MapPin, label: "Tours Completed", value: "7" },
|
||||||
|
{ icon: Award, label: "Awards Won", value: "12" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const press = [
|
||||||
|
{ quote: "Nova Eclipse is redefining what electronic music can feel like. Every track is a world unto itself.", publication: "Pitchfork" },
|
||||||
|
{ quote: "A sonic architect building cathedrals of sound. The live show is nothing short of transcendent.", publication: "Rolling Stone" },
|
||||||
|
{ quote: "Chromatic Abyss is the album of the year. Dark, beautiful, and impossibly catchy.", publication: "NME" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const gallery = [
|
||||||
|
{ gradient: "from-purple-600 to-fuchsia-500", alt: "Live at Brooklyn Steel" },
|
||||||
|
{ gradient: "from-fuchsia-500 to-pink-500", alt: "Studio session" },
|
||||||
|
{ gradient: "from-violet-600 to-purple-500", alt: "Album artwork shoot" },
|
||||||
|
{ gradient: "from-indigo-600 to-violet-500", alt: "Festival headliner" },
|
||||||
|
{ gradient: "from-purple-700 to-indigo-500", alt: "Backstage moments" },
|
||||||
|
{ gradient: "from-fuchsia-600 to-rose-500", alt: "Press photoshoot" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function AboutPage() {
|
||||||
|
const [lightbox, setLightbox] = useState<number | null>(null);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-slate-950 text-white">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="pt-32 pb-16 text-center px-6">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-black tracking-tight mb-4 bg-gradient-to-r from-purple-400 to-fuchsia-400 bg-clip-text text-transparent animate-fade-up">About</h1>
|
||||||
|
<p className="text-slate-400 max-w-xl mx-auto">The story behind the sound.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Bio */}
|
||||||
|
<section className="px-6 pb-24">
|
||||||
|
<div className="mx-auto max-w-3xl">
|
||||||
|
<div className="grid md:grid-cols-[280px_1fr] gap-10 items-start">
|
||||||
|
<div className="aspect-[3/4] rounded-2xl bg-gradient-to-br from-purple-600 via-fuchsia-500 to-pink-500 shadow-2xl shadow-purple-500/20" />
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold mb-6 animate-fade-up">Nova Eclipse</h2>
|
||||||
|
<p className="text-slate-300 leading-relaxed mb-4">Born from the neon-lit underground of Los Angeles, Nova Eclipse emerged in 2019 as a boundary-pushing force in electronic music. Blending cinematic synthwave with darkwave textures, the project quickly gained a cult following through immersive live shows and a relentless release schedule that defied genre conventions.</p>
|
||||||
|
<p className="text-slate-300 leading-relaxed">With four studio albums, two EPs, and a global tour spanning 30 cities, Nova Eclipse has evolved from bedroom producer to arena headliner. Collaborations with visual artists and fashion houses have expanded the project into a full sensory experience, where sound, light, and emotion converge into something unforgettable.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<section className="px-6 pb-24">
|
||||||
|
<div className="mx-auto max-w-4xl grid grid-cols-2 md:grid-cols-4 gap-6 stagger">
|
||||||
|
{stats.map((s, i) => (
|
||||||
|
<Card key={i} className="backdrop-blur-sm bg-card/80 border-border/50 hover:border-purple-500/30 transition-all duration-300 text-center">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<s.icon className="h-8 w-8 text-purple-400 mx-auto mb-3" />
|
||||||
|
<div className="text-3xl font-black text-white mb-1">{s.value}</div>
|
||||||
|
<div className="text-sm text-slate-400">{s.label}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Press */}
|
||||||
|
<section className="px-6 pb-24 bg-slate-900/30 py-24">
|
||||||
|
<div className="mx-auto max-w-4xl">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-12 animate-fade-up">Press</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6 stagger">
|
||||||
|
{press.map((p, i) => (
|
||||||
|
<Card key={i} className="backdrop-blur-sm bg-card/80 border-border/50 hover:border-purple-500/30 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<Quote className="h-6 w-6 text-purple-400/40 mb-4" />
|
||||||
|
<p className="text-slate-300 italic leading-relaxed mb-4">{p.quote}</p>
|
||||||
|
<Badge className="bg-purple-500/15 text-purple-300 border-purple-500/20">{p.publication}</Badge>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Gallery */}
|
||||||
|
<section className="px-6 pb-24 pt-24">
|
||||||
|
<div className="mx-auto max-w-5xl">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-12 animate-fade-up">Gallery</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 stagger">
|
||||||
|
{gallery.map((img, i) => (
|
||||||
|
<button key={i} onClick={() => setLightbox(i)} className={`aspect-square rounded-xl bg-gradient-to-br \${img.gradient} hover:scale-[1.02] transition-transform duration-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-950`} aria-label={img.alt} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Lightbox */}
|
||||||
|
{lightbox !== null && (
|
||||||
|
<div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-6" onClick={() => setLightbox(null)}>
|
||||||
|
<Button variant="ghost" size="icon" className="absolute top-4 right-4 text-white hover:bg-white/10" onClick={() => setLightbox(null)}><X className="h-6 w-6" /></Button>
|
||||||
|
<Button variant="ghost" size="icon" className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox - 1 + gallery.length) % gallery.length); }}><ChevronLeft className="h-6 w-6" /></Button>
|
||||||
|
<div className={`w-full max-w-2xl aspect-square rounded-2xl bg-gradient-to-br \${gallery[lightbox].gradient}`} onClick={(e) => e.stopPropagation()} />
|
||||||
|
<Button variant="ghost" size="icon" className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox + 1) % gallery.length); }}><ChevronRight className="h-6 w-6" /></Button>
|
||||||
|
<div className="absolute bottom-6 text-center text-sm text-slate-400">{gallery[lightbox].alt} — {lightbox + 1} / {gallery.length}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user