diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
new file mode 100644
index 0000000..fb04e21
--- /dev/null
+++ b/src/pages/Index.tsx
@@ -0,0 +1,269 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ArrowRight, Palette, Code, Megaphone, Search, Smartphone, Cloud,
+  Star, Linkedin, Compass, PenTool, Rocket, Award, Users
+} from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const services = [
+  { icon: Palette, title: "Brand & Design", desc: "Stunning visual identities, UI/UX design systems, and creative direction that captures your brand essence.", to: "/services" },
+  { icon: Code, title: "Web Development", desc: "Performant, accessible websites and web applications built with modern frameworks and best practices.", to: "/services" },
+  { icon: Megaphone, title: "Digital Marketing", desc: "Data-driven campaigns across paid, organic, and social channels that maximize your ROI.", to: "/services" },
+  { icon: Search, title: "SEO & Analytics", desc: "Technical SEO audits, keyword strategy, and analytics dashboards to grow your organic traffic.", to: "/services" },
+  { icon: Smartphone, title: "Mobile Apps", desc: "Native and cross-platform mobile applications designed for engagement and retention.", to: "/services" },
+  { icon: Cloud, title: "Cloud & DevOps", desc: "Scalable cloud infrastructure, CI/CD pipelines, and monitoring for reliable deployments.", to: "/services" },
+];
+
+const processSteps = [
+  { icon: Compass, num: "01", title: "Discovery", desc: "We dive deep into your goals, audience, and competitors to shape the strategy." },
+  { icon: PenTool, num: "02", title: "Design", desc: "Wireframes, prototypes, and polished visuals crafted for usability and delight." },
+  { icon: Code, num: "03", title: "Develop", desc: "Clean, tested code delivered in agile sprints with full transparency." },
+  { icon: Rocket, num: "04", title: "Deliver", desc: "Launch, monitor, and iterate with ongoing support and optimization." },
+];
+
+const stats = [
+  { value: "500+", label: "Projects Delivered" },
+  { value: "98%", label: "Client Satisfaction" },
+  { value: "$2M+", label: "Revenue Generated" },
+  { value: "50+", label: "Team Members" },
+];
+
+const testimonials = [
+  { company: "Acme Corp", quote: "Apex Studio transformed our online presence. Revenue increased 40% within three months of launching our new site.", name: "Emily Chen", title: "VP Marketing" },
+  { company: "Globex Inc", quote: "Their design process was collaborative and transparent. We felt like true partners from day one.", name: "Marcus Lee", title: "CEO" },
+  { company: "NovaTech", quote: "The mobile app they built exceeded every benchmark. Five stars is not enough.", name: "Sara Patel", title: "Product Director" },
+];
+
+const team = [
+  { name: "Alex Rivera", role: "Creative Director", gradient: "from-violet-400 to-indigo-500" },
+  { name: "Jordan Wu", role: "Lead Developer", gradient: "from-rose-400 to-orange-500" },
+  { name: "Priya Sharma", role: "UX Strategist", gradient: "from-emerald-400 to-teal-500" },
+  { name: "David Kim", role: "Marketing Lead", gradient: "from-amber-400 to-pink-500" },
+];
+
+const clientLogos = ["Stripe", "Vercel", "Notion", "Linear", "Figma", "Framer"];
+
+export default function IndexPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="relative min-h-[85vh] flex items-center overflow-hidden pt-20">
+        <div className="absolute inset-0 pointer-events-none">
+          <div className="absolute top-1/3 left-1/4 w-72 h-72 rounded-full bg-primary/10 blur-[100px]" />
+          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 rounded-full bg-violet-500/8 blur-[120px]" />
+          <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
+        </div>
+        <div className="relative z-10 mx-auto max-w-7xl px-6 grid lg:grid-cols-2 gap-12 items-center">
+          <div>
+            <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-[1.1]">
+              We build digital products that drive growth
+            </h1>
+            <p className="mt-6 text-lg text-muted-foreground leading-relaxed max-w-lg">
+              Full-service digital agency delivering world-class design, development, and marketing solutions for ambitious brands.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <Button asChild size="lg" className="active:scale-[0.98]">
+                <Link to="/contact">Start a Project <ArrowRight className="ml-2 h-4 w-4" /></Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="active:scale-[0.98]">
+                <Link to="/case-study">Our Work</Link>
+              </Button>
+            </div>
+            <p className="mt-8 text-sm text-muted-foreground flex items-center gap-2">
+              <Award className="h-4 w-4 text-primary" />
+              Trusted by Fortune 500 companies
+            </p>
+            <p className="flex items-center gap-2 text-sm text-muted-foreground mt-3">
+              <Users className="h-4 w-4 text-primary" /> Trusted by 500+ companies worldwide
+            </p>
+          </div>
+          <div className="hidden lg:flex justify-center">
+            <div className="relative w-full max-w-md aspect-square rounded-3xl bg-gradient-to-br from-primary/20 via-violet-500/15 to-rose-500/10 border border-primary/10 flex items-center justify-center overflow-hidden animate-scale-in">
+              <div className="absolute inset-0 opacity-[0.07]" style={{ backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
+              <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-violet-500/20 blur-2xl" />
+              <div className="absolute -bottom-8 -left-8 w-32 h-32 rounded-full bg-primary/20 blur-2xl" />
+              <div className="w-3/4 h-3/4 rounded-2xl bg-gradient-to-br from-primary/30 to-violet-500/20 animate-pulse" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── CLIENT LOGOS ── */}
+      <section className="py-12 border-y bg-muted/20 animate-fade-in">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid grid-cols-3 md:grid-cols-6 gap-8 items-center">
+            {clientLogos.map((name, i) => (
+              <div key={i} className="text-center text-sm font-semibold text-muted-foreground/40 grayscale hover:grayscale-0 hover:text-foreground transition-all duration-300 cursor-default">
+                {name}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── SERVICES ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Services tailored to your needs</h2>
+            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">From concept to launch, we provide end-to-end solutions that transform your digital presence.</p>
+          </div>
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
+            {services.map((s, i) => (
+              <Card key={i} className="group relative border hover:border-primary/30 transition-all duration-300 hover:shadow-lg hover:shadow-primary/5 hover-card-lift">
+                <CardHeader>
+                  <span className="absolute top-4 right-4 text-4xl font-black text-primary/5">0{i+1}</span>
+                  <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors shadow-lg shadow-primary/10">
+                    <s.icon className="h-6 w-6 text-primary" />
+                  </div>
+                  <CardTitle className="text-lg">{s.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <CardDescription className="leading-relaxed">{s.desc}</CardDescription>
+                  <Link to={s.to} className="inline-flex items-center gap-1 text-sm font-medium text-primary mt-4 group-hover:gap-2 transition-all">
+                    Learn More <ArrowRight className="h-3.5 w-3.5" />
+                  </Link>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── PROCESS ── */}
+      <section className="py-24 bg-muted/30">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Our Process</h2>
+            <p className="mt-4 text-muted-foreground max-w-xl mx-auto">A proven four-step methodology that turns your vision into reality.</p>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
+            {processSteps.map((step, i) => (
+              <div key={i} className="relative text-center group">
+                <div className="mx-auto w-14 h-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-lg font-bold mb-4 group-hover:scale-110 transition-transform">
+                  {step.num}
+                </div>
+                {i < 3 && (
+                  <div className="hidden lg:block absolute top-7 left-[60%] w-[80%] text-muted-foreground/40">
+                    <ArrowRight className="h-5 w-5" />
+                  </div>
+                )}
+                <step.icon className="mx-auto h-6 w-6 text-primary/70 mb-2" />
+                <h3 className="font-semibold text-lg mb-2">{step.title}</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">{step.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── RESULTS ── */}
+      <section className="py-24 bg-foreground text-background">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Results That Speak</h2>
+            <p className="mt-4 text-background/60 max-w-xl mx-auto">Numbers our clients love to share.</p>
+          </div>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 stagger">
+            {stats.map((s, i) => (
+              <div key={i} className="text-center animate-fade-up">
+                <div className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-gradient-to-r from-violet-300 to-cyan-300 bg-clip-text text-transparent">
+                  {s.value}
+                </div>
+                <div className="mt-2 text-sm text-background/60">{s.label}</div>
+              </div>
+            ))}
+          </div>
+          <div className="text-center mt-12">
+            <Link to="/case-study" className="inline-flex items-center gap-2 text-sm font-medium text-background/80 hover:text-background transition-colors">
+              View our case studies <ArrowRight className="h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* ── TESTIMONIALS ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">What our clients say</h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-6 stagger">
+            {testimonials.map((t, i) => (
+              <Card key={i} className="hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
+                <CardHeader>
+                  <div className="w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-xs font-bold text-muted-foreground mb-2">
+                    {t.company.slice(0, 2).toUpperCase()}
+                  </div>
+                  <div className="flex gap-0.5 mb-2">
+                    {[...Array(5)].map((_, j) => (
+                      <Star key={j} className="h-4 w-4 fill-amber-400 text-amber-400" />
+                    ))}
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-sm leading-relaxed text-muted-foreground italic">"{t.quote}"</p>
+                  <div className="mt-4 pt-4 border-t">
+                    <div className="font-semibold text-sm">{t.name}</div>
+                    <div className="text-xs text-muted-foreground">{t.title} at {t.company}</div>
+                  </div>
+                  <Link to="/case-study" className="inline-flex items-center gap-1 text-xs font-medium text-primary mt-3 hover:gap-2 transition-all">
+                    View Case Study <ArrowRight className="h-3 w-3" />
+                  </Link>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── TEAM PREVIEW ── */}
+      <section className="py-24 bg-muted/30">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight animate-fade-up">Meet the Team</h2>
+            <p className="mt-4 text-muted-foreground max-w-xl mx-auto">Talented people who love what they do.</p>
+          </div>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 stagger">
+            {team.map((m, i) => (
+              <div key={i} className="text-center group">
+                <div className={`mx-auto w-24 h-24 rounded-full bg-gradient-to-br \${m.gradient} mb-4 hover:scale-110 hover:ring-4 hover:ring-primary/20 transition-all shadow-lg`} />
+                <h3 className="font-semibold">{m.name}</h3>
+                <p className="text-sm text-primary font-medium">{m.role}</p>
+                <p className="text-xs text-muted-foreground mb-3">Passionate about great work</p>
+                <Button variant="ghost" size="icon" className="h-8 w-8">
+                  <Linkedin className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+          </div>
+          <div className="text-center mt-12">
+            <Button asChild variant="outline" className="active:scale-[0.98]">
+              <Link to="/team">Meet the Full Team <ArrowRight className="ml-2 h-4 w-4" /></Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="py-24">
+        <div className="mx-auto max-w-4xl px-6">
+          <div className="rounded-3xl bg-gradient-to-br from-primary via-violet-600 to-indigo-700 p-12 sm:p-16 text-center text-white">
+            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Ready to start your next project?</h2>
+            <p className="mt-4 text-white/80 max-w-lg mx-auto">Let’s create something extraordinary together. Get in touch for a free consultation.</p>
+            <Button asChild size="lg" variant="secondary" className="mt-8 active:scale-[0.98]">
+              <Link to="/contact">Get in Touch <ArrowRight className="ml-2 h-4 w-4" /></Link>
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file