diff --git a/src/pages/About.tsx b/src/pages/About.tsx
new file mode 100644
index 0000000..2a734f5
--- /dev/null
+++ b/src/pages/About.tsx
@@ -0,0 +1,148 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { ArrowRight, Linkedin, Heart, Target, Lightbulb, Users } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const team = [
+  { name: "Alex Kim", role: "Co-Founder & CEO", initials: "AK" },
+  { name: "Sophia Patel", role: "Co-Founder & CTO", initials: "SP" },
+  { name: "James Moreno", role: "VP of Engineering", initials: "JM" },
+  { name: "Lena Chen", role: "Head of Design", initials: "LC" },
+];
+
+const values = [
+  { icon: Target, title: "Customer Obsessed", desc: "Every decision starts with what is best for our users." },
+  { icon: Lightbulb, title: "Relentlessly Innovative", desc: "We push the boundaries of what project management can be." },
+  { icon: Heart, title: "People First", desc: "We build for humans, and we treat our team as family." },
+  { icon: Users, title: "Radically Transparent", desc: "Open roadmaps, public changelogs, and honest communication." },
+];
+
+const milestones = [
+  { year: "2020", event: "Founded in San Francisco by two ex-Google engineers" },
+  { year: "2021", event: "Launched beta with 500 early adopter teams" },
+  { year: "2022", event: "Series A: $18M raised, 5,000 teams onboarded" },
+  { year: "2023", event: "AI Copilot launched, crossed 10,000 teams" },
+  { year: "2024", event: "Series B: $45M raised, expanded to 150+ countries" },
+];
+
+export default function AboutPage() {
+  return (
+    <div className="min-h-screen bg-white text-slate-900 antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-16 bg-gradient-to-b from-slate-50 to-white">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">About Us</Badge>
+          <h1 className="animate-fade-up text-4xl font-bold tracking-tight sm:text-5xl">We are building the future of work</h1>
+          <p className="mt-4 text-lg text-slate-500 max-w-2xl mx-auto">
+            Nexus was born from a simple belief: teams deserve tools that work as hard as they do. We are a team of engineers, designers, and dreamers on a mission to make work feel effortless.
+          </p>
+        </div>
+      </section>
+
+      {/* ── MISSION ── */}
+      <section className="py-24 bg-white">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div>
+              <Badge className="mb-4 bg-cyan-50 text-cyan-600 border-0">Our Mission</Badge>
+              <h2 className="animate-fade-up text-3xl font-bold tracking-tight">Empower every team to do their best work</h2>
+              <p className="mt-6 text-slate-500 leading-relaxed text-lg">We believe that great software should amplify human potential, not replace it. Nexus combines the best of AI with intuitive design so teams can focus on what matters most: building great products.</p>
+              <Button asChild className="active:scale-[0.98] mt-8 rounded-full bg-indigo-600 hover:bg-indigo-500">
+                <Link to="/features">See What We Built <ArrowRight className="ml-2 h-4 w-4" /></Link>
+              </Button>
+            </div>
+            <div className="animate-scale-in aspect-[4/3] rounded-2xl bg-gradient-to-br from-indigo-100 via-cyan-50 to-slate-100 flex items-center justify-center relative overflow-hidden">
+              <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-60" />
+              <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-indigo-300/30 blur-3xl" />
+              <div className="absolute -bottom-10 -left-10 w-32 h-32 rounded-full bg-cyan-300/30 blur-3xl" />
+              <span className="relative text-slate-400 text-sm">Mission Image</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── TEAM ── */}
+      <section className="py-24 bg-slate-50">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">Our Team</Badge>
+            <h2 className="animate-fade-up text-3xl font-bold tracking-tight">Meet the people behind Nexus</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
+            {team.map((member) => (
+              <Card key={member.name} className="hover-card-lift border-slate-200 text-center hover:shadow-lg transition-all duration-300">
+                <CardContent className="p-8">
+                  <Avatar className="h-20 w-20 mx-auto mb-4">
+                    <AvatarFallback className="bg-gradient-to-br from-indigo-500 to-cyan-500 text-white text-xl font-bold">{member.initials}</AvatarFallback>
+                  </Avatar>
+                  <h3 className="font-semibold text-lg">{member.name}</h3>
+                  <p className="text-sm text-slate-500 mt-1">{member.role}</p>
+                  <a href="#" className="inline-flex items-center gap-1 mt-4 text-indigo-600 hover:text-indigo-700 text-sm">
+                    <Linkedin className="h-4 w-4" /> LinkedIn
+                  </a>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── VALUES ── */}
+      <section className="py-24 bg-white">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <Badge className="mb-4 bg-amber-50 text-amber-600 border-0">Our Values</Badge>
+            <h2 className="animate-fade-up text-3xl font-bold tracking-tight">What drives us every day</h2>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 stagger">
+            {values.map((v) => (
+              <Card key={v.title} className="hover-card-lift border-slate-200 hover:border-indigo-200 hover:shadow-lg transition-all duration-300">
+                <CardContent className="p-6">
+                  <div className="h-12 w-12 rounded-xl bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center mb-4">
+                    <v.icon className="h-6 w-6 text-white" />
+                  </div>
+                  <h3 className="font-semibold mb-2">{v.title}</h3>
+                  <p className="text-sm text-slate-500">{v.desc}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── TIMELINE ── */}
+      <section className="py-24 bg-slate-50">
+        <div className="mx-auto max-w-3xl px-6">
+          <div className="text-center mb-16">
+            <Badge className="mb-4 bg-indigo-50 text-indigo-600 border-0">Our Journey</Badge>
+            <h2 className="animate-fade-up text-3xl font-bold tracking-tight">Company milestones</h2>
+          </div>
+          <div className="relative">
+            <div className="absolute left-4 top-0 bottom-0 w-px bg-gradient-to-b from-indigo-500 to-cyan-500" />
+            <div className="space-y-10">
+              {milestones.map((m) => (
+                <div key={m.year} className="flex gap-6 items-start">
+                  <div className="relative flex-shrink-0 h-9 w-9 rounded-full bg-indigo-600 flex items-center justify-center text-white text-xs font-bold ring-4 ring-white">
+                    {m.year.slice(2)}
+                  </div>
+                  <div className="pt-1">
+                    <span className="text-sm font-bold text-indigo-600">{m.year}</span>
+                    <p className="text-slate-600 mt-1">{m.event}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}