diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..cd92366
--- /dev/null
+++ b/src/pages/About.tsx
@@ -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} &mdash; {lightbox + 1} / {gallery.length}</div>
+        </div>
+      )}
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file