diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
new file mode 100644
index 0000000..c68652a
--- /dev/null
+++ b/src/pages/Blog.tsx
@@ -0,0 +1,120 @@
+import { useState } from "react";
+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 { Input } from "@/components/ui/input";
+import { ArrowRight, Clock, Mail } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const featuredArticle = {
+  title: "The Future of Design Systems in 2026",
+  excerpt: "How modern design systems are evolving beyond component libraries into intelligent, adaptive frameworks that bridge design and development.",
+  category: "Design",
+  author: "Alex Rivera",
+  date: "Mar 15, 2026",
+  readTime: "8 min read",
+  gradient: "from-violet-400 via-purple-500 to-indigo-600",
+};
+
+const articles = [
+  { title: "Building Performant React Applications", excerpt: "Key strategies for optimizing React apps, from code splitting to server components.", category: "Development", date: "Mar 12, 2026", gradient: "from-sky-400 to-blue-500" },
+  { title: "The ROI of Great UX Design", excerpt: "Why investing in user experience consistently delivers measurable business results.", category: "Marketing", date: "Mar 10, 2026", gradient: "from-rose-400 to-pink-500" },
+  { title: "Color Theory for Digital Products", excerpt: "A practical guide to choosing and applying color palettes that convert.", category: "Design", date: "Mar 8, 2026", gradient: "from-emerald-400 to-teal-500" },
+  { title: "AI-Powered Development Workflows", excerpt: "How AI tools are reshaping the way we write, test, and deploy code.", category: "Technology", date: "Mar 6, 2026", gradient: "from-amber-400 to-orange-500" },
+  { title: "Content Strategy That Drives Growth", excerpt: "A framework for creating content that attracts, engages, and converts your target audience.", category: "Strategy", date: "Mar 4, 2026", gradient: "from-cyan-400 to-blue-500" },
+  { title: "How We Rebuilt Acme Corp in 8 Weeks", excerpt: "An inside look at our process for delivering a complete digital transformation on a tight timeline.", category: "Case Study", date: "Mar 2, 2026", gradient: "from-fuchsia-400 to-purple-500" },
+];
+
+export default function BlogPage() {
+  const [email, setEmail] = useState("");
+
+  return (
+    <div className="min-h-screen bg-background text-foreground antialiased">
+      <Header />
+
+      {/* ── HERO ── */}
+      <section className="pt-32 pb-20">
+        <div className="mx-auto max-w-7xl px-6 text-center">
+          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight animate-fade-up">Insights & Resources</h1>
+          <p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
+            Thoughts on design, development, marketing, and building great digital products.
+          </p>
+        </div>
+      </section>
+
+      {/* ── FEATURED ARTICLE ── */}
+      <section className="pb-16">
+        <div className="mx-auto max-w-7xl px-6">
+          <Card className="overflow-hidden border hover:shadow-2xl transition-all duration-500">
+            <div className="grid lg:grid-cols-2">
+              <div className={`relative aspect-video lg:aspect-auto bg-gradient-to-br \${featuredArticle.gradient} flex items-center justify-center text-white/30 text-sm overflow-hidden`}>
+                <div className="absolute inset-0 opacity-[0.1]" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "18px 18px" }} />
+                <div className="absolute -top-8 -right-8 w-32 h-32 rounded-full bg-white/10 blur-2xl" />
+                Featured Image
+              </div>
+              <CardContent className="p-8 lg:p-12 flex flex-col justify-center">
+                <Badge variant="secondary" className="w-fit mb-4">{featuredArticle.category}</Badge>
+                <h2 className="text-2xl font-bold tracking-tight">{featuredArticle.title}</h2>
+                <p className="mt-3 text-muted-foreground leading-relaxed">{featuredArticle.excerpt}</p>
+                <div className="mt-6 flex items-center gap-4 text-sm text-muted-foreground">
+                  <span className="font-medium text-foreground">{featuredArticle.author}</span>
+                  <span>{featuredArticle.date}</span>
+                  <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5" /> {featuredArticle.readTime}</span>
+                </div>
+              </CardContent>
+            </div>
+          </Card>
+        </div>
+      </section>
+
+      {/* ── ARTICLE GRID ── */}
+      <section className="pb-24">
+        <div className="mx-auto max-w-7xl px-6">
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 stagger">
+            {articles.map((article, i) => (
+              <Card key={i} className="overflow-hidden border hover:-translate-y-1 hover:shadow-xl transition-all duration-300 group">
+                <div className={`relative aspect-video bg-gradient-to-br \${article.gradient} opacity-80 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white/30 text-sm overflow-hidden`}>
+                  <div className="absolute inset-0 opacity-[0.1]" style={{ backgroundImage: "radial-gradient(circle, white 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
+                  Article Image
+                </div>
+                <CardContent className="p-6">
+                  <Badge variant="secondary" className="mb-3">{article.category}</Badge>
+                  <h3 className="font-bold text-lg leading-tight group-hover:text-primary transition-colors">{article.title}</h3>
+                  <p className="mt-2 text-sm text-muted-foreground leading-relaxed line-clamp-2">{article.excerpt}</p>
+                  <div className="mt-4 flex items-center gap-2">
+                    <div className={`w-6 h-6 rounded-full bg-gradient-to-br \${article.gradient} shrink-0`} />
+                    <p className="text-xs text-muted-foreground">{article.date}</p>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── NEWSLETTER ── */}
+      <section className="py-24 bg-muted/30">
+        <div className="mx-auto max-w-2xl px-6 text-center">
+          <Mail className="mx-auto h-10 w-10 text-primary mb-4" />
+          <h2 className="text-3xl font-bold tracking-tight animate-fade-up">Stay in the Loop</h2>
+          <p className="mt-4 text-muted-foreground">Get our latest insights delivered to your inbox. No spam, unsubscribe anytime.</p>
+          <p className="mt-2 text-sm text-muted-foreground/70">Join 5,000+ subscribers</p>
+          <div className="mt-8 flex gap-3 max-w-md mx-auto">
+            <Input
+              placeholder="you@email.com"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="flex-1"
+            />
+            <Button className="active:scale-[0.98]">Subscribe <ArrowRight className="ml-2 h-4 w-4" /></Button>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+    </div>
+  );
+}
\ No newline at end of file