diff --git a/frontend/components/ContactDialog.tsx b/frontend/components/ContactDialog.tsx
new file mode 100644
index 0000000..19a431e
--- /dev/null
+++ b/frontend/components/ContactDialog.tsx
@@ -0,0 +1,365 @@
+// src/components/ContactDialog.tsx
+// ─────────────────────────────────────────────────────────────────────────────
+// Wraps the existing <ContactForm> in a Radix Dialog (shadcn/ui).
+// Usage:
+//   <ContactDialog />                     ← renders its own "Contact us" trigger button
+//   <ContactDialog trigger={<button>} />  ← use a custom trigger element
+//
+// To wire up a real backend later, update the handleSubmit mock in ContactForm.tsx
+// (look for "Mock API delay") and replace with your fetch/API call.
+// ─────────────────────────────────────────────────────────────────────────────
+
+"use client";
+
+import { useState } from "react";
+import {
+  MessageSquare,
+  Loader2,
+  X,
+  CheckCircle2,
+  AlertCircle,
+} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+// ─── Inline form (self-contained so the modal owns its own state) ─────────────
+
+type FormData = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+};
+type Status = "idle" | "loading" | "success" | "error";
+
+function ContactModalForm({ onSuccess }: { onSuccess?: () => void }) {
+  const [formData, setFormData] = useState<FormData>({
+    name: "",
+    email: "",
+    subject: "",
+    message: "",
+  });
+  const [errors, setErrors] = useState<Partial<FormData>>({});
+  const [status, setStatus] = useState<Status>("idle");
+  const [feedback, setFeedback] = useState("");
+  const [honeypot, setHoneypot] = useState("");
+
+  const validate = (): boolean => {
+    const e: Partial<FormData> = {};
+    if (!formData.name.trim()) e.name = "Name is required.";
+    if (!formData.email.trim()) {
+      e.email = "Email is required.";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      e.email = "Enter a valid email address.";
+    }
+    if (!formData.message.trim()) e.message = "Message is required.";
+    if (formData.message.length > 500)
+      e.message = "Message cannot exceed 500 characters.";
+    setErrors(e);
+    return Object.keys(e).length === 0;
+  };
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    // Clear field error on change
+    if (errors[name as keyof FormData]) {
+      setErrors((prev) => ({ ...prev, [name]: undefined }));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (honeypot) {
+      setStatus("success");
+      setFeedback("Message sent!");
+      return;
+    }
+    if (!validate()) return;
+
+    setStatus("loading");
+    setFeedback("");
+
+    try {
+      // ── TODO: replace with real API call ──────────────────────────────────
+      // await fetch("/api/contact", {
+      //   method: "POST",
+      //   headers: { "Content-Type": "application/json" },
+      //   body: JSON.stringify(formData),
+      // });
+      await new Promise((res) => setTimeout(res, 1500));
+      // ─────────────────────────────────────────────────────────────────────
+
+      setStatus("success");
+      setFeedback("Thank you! We'll get back to you soon.");
+      setFormData({ name: "", email: "", subject: "", message: "" });
+      onSuccess?.();
+    } catch {
+      setStatus("error");
+      setFeedback("Something went wrong. Please try again later.");
+    }
+  };
+
+  const field =
+    "w-full rounded-lg border bg-background px-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 focus:ring-offset-background disabled:opacity-50";
+  const fieldError = "border-destructive focus:ring-destructive";
+  const fieldNormal = "border-border";
+
+  if (status === "success") {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-10 text-center">
+        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-primary/10">
+          <CheckCircle2 className="h-7 w-7 text-primary" />
+        </div>
+        <div>
+          <p className="font-display font-bold text-foreground text-lg">
+            Message sent!
+          </p>
+          <p className="mt-1 text-sm text-muted-foreground font-body">
+            {feedback}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} noValidate className="flex flex-col gap-5">
+      {/* Honeypot */}
+      <div className="hidden" aria-hidden="true">
+        <input
+          type="text"
+          name="website"
+          value={honeypot}
+          onChange={(e) => setHoneypot(e.target.value)}
+          tabIndex={-1}
+          autoComplete="off"
+        />
+      </div>
+
+      {/* Name + Email */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="flex flex-col gap-1.5">
+          <label
+            htmlFor="modal-name"
+            className="text-xs font-semibold text-foreground font-display"
+          >
+            Name <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="modal-name"
+            name="name"
+            type="text"
+            value={formData.name}
+            onChange={handleChange}
+            placeholder="Your name"
+            disabled={status === "loading"}
+            aria-invalid={!!errors.name}
+            aria-describedby={errors.name ? "modal-name-err" : undefined}
+            className={`${field} ${errors.name ? fieldError : fieldNormal}`}
+          />
+          {errors.name && (
+            <p
+              id="modal-name-err"
+              className="text-xs text-destructive flex items-center gap-1"
+            >
+              <AlertCircle className="h-3 w-3 flex-shrink-0" /> {errors.name}
+            </p>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label
+            htmlFor="modal-email"
+            className="text-xs font-semibold text-foreground font-display"
+          >
+            Email <span className="text-destructive">*</span>
+          </label>
+          <input
+            id="modal-email"
+            name="email"
+            type="email"
+            value={formData.email}
+            onChange={handleChange}
+            placeholder="you@example.com"
+            disabled={status === "loading"}
+            aria-invalid={!!errors.email}
+            aria-describedby={errors.email ? "modal-email-err" : undefined}
+            className={`${field} ${errors.email ? fieldError : fieldNormal}`}
+          />
+          {errors.email && (
+            <p
+              id="modal-email-err"
+              className="text-xs text-destructive flex items-center gap-1"
+            >
+              <AlertCircle className="h-3 w-3 flex-shrink-0" /> {errors.email}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Subject (optional) */}
+      <div className="flex flex-col gap-1.5">
+        <label
+          htmlFor="modal-subject"
+          className="text-xs font-semibold text-foreground font-display"
+        >
+          Subject{" "}
+          <span className="text-muted-foreground font-normal">(optional)</span>
+        </label>
+        <input
+          id="modal-subject"
+          name="subject"
+          type="text"
+          value={formData.subject}
+          onChange={handleChange}
+          placeholder="How can we help?"
+          disabled={status === "loading"}
+          className={`${field} ${fieldNormal}`}
+        />
+      </div>
+
+      {/* Message */}
+      <div className="flex flex-col gap-1.5">
+        <label
+          htmlFor="modal-message"
+          className="text-xs font-semibold text-foreground font-display"
+        >
+          Message <span className="text-destructive">*</span>
+        </label>
+        <textarea
+          id="modal-message"
+          name="message"
+          value={formData.message}
+          onChange={handleChange}
+          rows={4}
+          placeholder="Tell us more..."
+          disabled={status === "loading"}
+          maxLength={500}
+          aria-invalid={!!errors.message}
+          aria-describedby={
+            errors.message ? "modal-message-err" : "modal-message-count"
+          }
+          className={`${field} resize-none ${errors.message ? fieldError : fieldNormal}`}
+        />
+        <div className="flex items-center justify-between">
+          {errors.message ? (
+            <p
+              id="modal-message-err"
+              className="text-xs text-destructive flex items-center gap-1"
+            >
+              <AlertCircle className="h-3 w-3 flex-shrink-0" /> {errors.message}
+            </p>
+          ) : (
+            <span />
+          )}
+          <p
+            id="modal-message-count"
+            className={`text-xs ml-auto ${formData.message.length >= 480 ? "text-destructive" : "text-muted-foreground"}`}
+          >
+            {formData.message.length}/500
+          </p>
+        </div>
+      </div>
+
+      {/* Global error */}
+      {status === "error" && feedback && (
+        <div
+          role="alert"
+          className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm text-destructive"
+        >
+          <AlertCircle className="h-4 w-4 flex-shrink-0" />
+          {feedback}
+        </div>
+      )}
+
+      {/* Submit */}
+      <button
+        type="submit"
+        disabled={status === "loading"}
+        className="btn-primary w-full mt-1"
+      >
+        {status === "loading" ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            Sending…
+          </>
+        ) : (
+          "Send Message"
+        )}
+      </button>
+    </form>
+  );
+}
+
+// ─── Dialog wrapper ───────────────────────────────────────────────────────────
+
+type Props = {
+  /** Optional custom trigger. Defaults to a "Contact us" button. */
+  trigger?: React.ReactNode;
+  /** Extra classes on the default trigger button */
+  triggerClassName?: string;
+};
+
+export function ContactDialog({ trigger, triggerClassName }: Props) {
+  const [open, setOpen] = useState(false);
+
+  const defaultTrigger = (
+    <button
+      onClick={() => setOpen(true)}
+      className={`text-sm text-muted-foreground transition-colors hover:text-foreground font-body ${triggerClassName ?? ""}`}
+    >
+      Contact us
+    </button>
+  );
+
+  return (
+    <>
+      {/* Trigger */}
+      <span onClick={() => setOpen(true)} style={{ cursor: "pointer" }}>
+        {trigger ?? defaultTrigger}
+      </span>
+
+      {/* Modal */}
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="w-full max-w-lg max-h-[90vh] overflow-y-auto rounded-2xl border-border bg-background p-0">
+          {/* Header */}
+          <div className="flex items-start justify-between gap-4 border-b border-border px-6 py-5">
+            <div className="flex items-center gap-3">
+              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10">
+                <MessageSquare className="h-4 w-4 text-primary" />
+              </div>
+              <div>
+                <DialogHeader>
+                  <DialogTitle className="text-base font-display font-bold text-foreground leading-none">
+                    Contact us
+                  </DialogTitle>
+                  <DialogDescription className="text-xs text-muted-foreground font-body mt-0.5">
+                    We typically reply within 1–2 business days.
+                  </DialogDescription>
+                </DialogHeader>
+              </div>
+            </div>
+          </div>
+
+          {/* Form body */}
+          <div className="px-6 py-6">
+            <ContactModalForm
+              onSuccess={() => {
+                // Auto-close after 2.5 s on success
+                setTimeout(() => setOpen(false), 2500);
+              }}
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/components/layout/Footer.tsx b/frontend/components/layout/Footer.tsx
index 3c4c4c1..5571b0b 100644
--- a/frontend/components/layout/Footer.tsx
+++ b/frontend/components/layout/Footer.tsx
@@ -1,39 +1,32 @@
-const FOOTER_LINKS = [
+"use client";
+
+import { ContactDialog } from "../ContactDialog";
+
+const PRODUCT_LINKS = [
+  { label: "Features", href: "/#features" },
+  { label: "Templates", href: "/#templates" },
+  { label: "Compare", href: "/#compare" },
+];
+
+const RESOURCE_LINKS = [
+  { label: "Blog", href: "/blog" },
   {
-    title: "Product",
-    links: [
-      { label: "Features", href: "#features" },
-      { label: "Templates", href: "#templates" },
-      { label: "Compare", href: "#compare" },
-    ],
+    label: "Documentation",
+    href: "https://github.com/0xVida/stellar-suite#readme",
   },
   {
-    title: "Resources",
-    links: [
-      {
-        label: "Documentation",
-        href: "https://github.com/0xVida/stellar-suite#readme",
-      },
-      {
-        label: "VS Code Marketplace",
-        href: "https://marketplace.visualstudio.com/",
-      },
-      { label: "Stellar Docs", href: "https://developers.stellar.org/" },
-    ],
+    label: "VS Code Marketplace",
+    href: "https://marketplace.visualstudio.com/",
   },
+  { label: "Stellar Docs", href: "https://developers.stellar.org/" },
+];
+
+const COMMUNITY_LINKS = [
+  { label: "GitHub", href: "https://github.com/0xVida/stellar-suite" },
+  { label: "Issues", href: "https://github.com/0xVida/stellar-suite/issues" },
   {
-    title: "Community",
-    links: [
-      { label: "GitHub", href: "https://github.com/0xVida/stellar-suite" },
-      {
-        label: "Issues",
-        href: "https://github.com/0xVida/stellar-suite/issues",
-      },
-      {
-        label: "Contributing",
-        href: "https://github.com/0xVida/stellar-suite#contributing",
-      },
-    ],
+    label: "Contributing",
+    href: "https://github.com/0xVida/stellar-suite#contributing",
   },
 ];
 
@@ -41,30 +34,89 @@ export function Footer() {
   return (
     <footer className="border-t border-border-subtle bg-cosmic-navy">
       <div className="mx-auto max-w-6xl px-6 py-12 md:px-12">
-        <div className="grid gap-8 sm:grid-cols-3">
-          {FOOTER_LINKS.map((group) => (
-            <div key={group.title}>
-              <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-silver">
-                {group.title}
-              </h4>
-              <ul className="space-y-2">
-                {group.links.map((link) => (
-                  <li key={link.label}>
-                    <a
-                      href={link.href}
-                      className="text-sm text-muted-silver/70 transition-colors hover:text-stardust-white"
-                      {...(link.href.startsWith("http")
-                        ? { target: "_blank", rel: "noopener noreferrer" }
-                        : {})}
-                    >
-                      {link.label}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
+        <div className="grid gap-8 sm:grid-cols-4">
+          {/* Product */}
+          <div>
+            <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-silver">
+              Product
+            </h4>
+            <ul className="space-y-2">
+              {PRODUCT_LINKS.map((link) => (
+                <li key={link.label}>
+                  <a
+                    href={link.href}
+                    className="text-sm text-muted-silver/70 transition-colors hover:text-stardust-white"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Resources */}
+          <div>
+            <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-silver">
+              Resources
+            </h4>
+            <ul className="space-y-2">
+              {RESOURCE_LINKS.map((link) => (
+                <li key={link.label}>
+                  <a
+                    href={link.href}
+                    className="text-sm text-muted-silver/70 transition-colors hover:text-stardust-white"
+                    {...(link.href.startsWith("http")
+                      ? { target: "_blank", rel: "noopener noreferrer" }
+                      : {})}
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Community */}
+          <div>
+            <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-silver">
+              Community
+            </h4>
+            <ul className="space-y-2">
+              {COMMUNITY_LINKS.map((link) => (
+                <li key={link.label}>
+                  <a
+                    href={link.href}
+                    className="text-sm text-muted-silver/70 transition-colors hover:text-stardust-white"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Support */}
+          <div>
+            <h4 className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-silver">
+              Support
+            </h4>
+            <ul className="space-y-2">
+              <li>
+                {/* ContactDialog renders inline as a plain text link */}
+                <ContactDialog
+                  trigger={
+                    <span className="text-sm text-muted-silver/70 transition-colors hover:text-stardust-white cursor-pointer">
+                      Contact us
+                    </span>
+                  }
+                />
+              </li>
+            </ul>
+          </div>
         </div>
+
         <div className="mt-10 border-t border-border-subtle pt-6 text-center text-xs text-muted-silver/50">
           &copy; {new Date().getFullYear()} Stellar Suite. Built for the Stellar
           ecosystem.
diff --git a/frontend/components/layout/Navbar.tsx b/frontend/components/layout/Navbar.tsx
index ae21d51..87bd187 100644
--- a/frontend/components/layout/Navbar.tsx
+++ b/frontend/components/layout/Navbar.tsx
@@ -1,10 +1,14 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
+import { ContactDialog } from "../ContactDialog";
 
 const NAV_LINKS = [
   { label: "Features", href: "/#features" },
   { label: "Templates", href: "/#templates" },
   { label: "Compare", href: "/#compare" },
+  { label: "Blog", href: "/blog" },
   { label: "Docs", href: "https://github.com/0xVida/stellar-suite#readme" },
 ];
 
@@ -40,6 +44,15 @@ export function Navbar() {
               {link.label}
             </Link>
           ))}
+
+          {/* Contact trigger */}
+          <ContactDialog
+            trigger={
+              <span className="text-sm text-muted-silver transition-colors hover:text-stardust-white cursor-pointer">
+                Contact
+              </span>
+            }
+          />
         </div>
       </div>
     </nav>
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index c4b7818..9edff1c 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/frontend/src/app/blog/[slug]/page.tsx b/frontend/src/app/blog/[slug]/page.tsx
new file mode 100644
index 0000000..40155b5
--- /dev/null
+++ b/frontend/src/app/blog/[slug]/page.tsx
@@ -0,0 +1,215 @@
+// src/app/blog/[slug]/page.tsx
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import type { Metadata } from "next";
+import { Navbar } from "../../../../components/layout/Navbar";
+import { Footer } from "../../../../components/layout/Footer";
+import { formatDate, getAllPosts, getPostBySlug } from "@/lib/post";
+import { PostBody } from "@/components/PostBody";
+import { PostCard } from "@/components/ PostCard";
+
+// Static generation: pre-render all slugs at build time
+export async function generateStaticParams() {
+  return getAllPosts().map((p) => ({ slug: p.slug }));
+}
+
+// Per-post metadata
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  const post = getPostBySlug(params.slug);
+  if (!post) return {};
+  return {
+    title: `${post.title} — Stellar Suite Blog`,
+    description: post.excerpt,
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      type: "article",
+      publishedTime: post.date,
+    },
+  };
+}
+
+export default function PostPage({ params }: { params: { slug: string } }) {
+  const post = getPostBySlug(params.slug);
+  if (!post) notFound();
+
+  const allPosts = getAllPosts();
+  const currentIndex = allPosts.findIndex((p) => p.slug === post.slug);
+  const related = allPosts
+    .filter(
+      (p) =>
+        p.slug !== post.slug &&
+        (p.category === post.category ||
+          p.tags.some((t) => post.tags.includes(t))),
+    )
+    .slice(0, 2);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar />
+
+      <main id="main-content" className="pt-28 pb-20 px-6">
+        <div className="mx-auto max-w-3xl">
+          {/* Breadcrumb */}
+          <nav className="flex items-center gap-2 mb-8 text-sm font-body text-muted-foreground">
+            <Link href="/" className="hover:text-foreground transition-colors">
+              Home
+            </Link>
+            <span className="text-muted-foreground/40">/</span>
+            <Link
+              href="/blog"
+              className="hover:text-foreground transition-colors"
+            >
+              Blog
+            </Link>
+            <span className="text-muted-foreground/40">/</span>
+            <span className="text-foreground truncate max-w-[200px]">
+              {post.title}
+            </span>
+          </nav>
+
+          {/* Category badge */}
+          <div className="mb-5">
+            <Link
+              href={`/blog?category=${post.category}`}
+              className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary font-display tracking-wide hover:bg-primary/20 transition-colors"
+            >
+              {post.category}
+            </Link>
+          </div>
+
+          {/* Title */}
+          <h1 className="text-3xl md:text-4xl lg:text-5xl font-display font-extrabold text-foreground leading-tight tracking-tight mb-6">
+            {post.title}
+          </h1>
+
+          {/* Meta row */}
+          <div className="flex flex-wrap items-center gap-x-5 gap-y-2 mb-3 pb-8 border-b border-border">
+            <div className="flex items-center gap-2">
+              <div className="h-7 w-7 rounded-full bg-primary/20 flex items-center justify-center">
+                <span className="text-xs font-bold text-primary font-display">
+                  {post.author.name[0]}
+                </span>
+              </div>
+              <span className="text-sm font-semibold text-foreground font-body">
+                {post.author.name}
+              </span>
+            </div>
+            <span className="text-muted-foreground text-sm font-body">
+              {formatDate(post.date)}
+            </span>
+            <span className="text-muted-foreground text-sm font-body">
+              {post.readingTime}
+            </span>
+          </div>
+
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2 mb-10">
+            {post.tags.map((tag) => (
+              <Link
+                key={tag}
+                href={`/blog?tag=${tag}`}
+                className="text-xs font-mono text-muted-foreground border border-border rounded px-2 py-1 hover:border-primary/40 hover:text-primary transition-colors"
+              >
+                #{tag}
+              </Link>
+            ))}
+          </div>
+
+          {/* Excerpt (lead) */}
+          <p className="text-lg font-body text-muted-foreground leading-relaxed mb-10 pb-10 border-b border-border">
+            {post.excerpt}
+          </p>
+
+          {/* Post content */}
+          <PostBody content={post.content} />
+
+          {/* Post nav: prev/next */}
+          <div className="mt-16 pt-8 border-t border-border flex items-center justify-between gap-4">
+            {currentIndex < allPosts.length - 1 ? (
+              <Link
+                href={`/blog/${allPosts[currentIndex + 1].slug}`}
+                className="group flex items-center gap-2 text-sm font-body text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  className="group-hover:-translate-x-0.5 transition-transform"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M7 16l-4-4m0 0l4-4m-4 4h18"
+                  />
+                </svg>
+                <span className="truncate max-w-[200px]">
+                  {allPosts[currentIndex + 1].title}
+                </span>
+              </Link>
+            ) : (
+              <div />
+            )}
+            {currentIndex > 0 ? (
+              <Link
+                href={`/blog/${allPosts[currentIndex - 1].slug}`}
+                className="group flex items-center gap-2 text-sm font-body text-muted-foreground hover:text-foreground transition-colors text-right"
+              >
+                <span className="truncate max-w-[200px]">
+                  {allPosts[currentIndex - 1].title}
+                </span>
+                <svg
+                  width="16"
+                  height="16"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  className="group-hover:translate-x-0.5 transition-transform"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M17 8l4 4m0 0l-4 4m4-4H3"
+                  />
+                </svg>
+              </Link>
+            ) : (
+              <div />
+            )}
+          </div>
+
+          {/* Back to blog */}
+          <div className="mt-8 text-center">
+            <Link href="/blog" className="btn-outline text-sm">
+              ← Back to Blog
+            </Link>
+          </div>
+        </div>
+
+        {/* Related posts */}
+        {related.length > 0 && (
+          <div className="mx-auto max-w-6xl mt-20 pt-12 border-t border-border">
+            <h2 className="text-xl font-display font-bold text-foreground mb-8">
+              Related Posts
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {related.map((p) => (
+                <PostCard key={p.slug} post={p} />
+              ))}
+            </div>
+          </div>
+        )}
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
new file mode 100644
index 0000000..22a5c61
--- /dev/null
+++ b/frontend/src/app/blog/page.tsx
@@ -0,0 +1,118 @@
+// src/app/blog/page.tsx
+"use client";
+
+import { useState, useMemo } from "react";
+import Link from "next/link";
+import { Navbar } from "../../../components/layout/Navbar";
+import { Footer } from "../../../components/layout/Footer";
+import { getAllCategories, getAllPosts, getAllTags } from "@/lib/post";
+import { CategoryFilter } from "@/components/CategoryFilter";
+import { PostCard } from "@/components/ PostCard";
+
+const allPosts = getAllPosts();
+const allCategories = getAllCategories();
+const allTags = getAllTags();
+
+export default function BlogIndex() {
+  const [activeCategory, setActiveCategory] = useState("");
+  const [activeTag, setActiveTag] = useState("");
+
+  const filtered = useMemo(() => {
+    return allPosts.filter((p) => {
+      const matchCat = activeCategory === "" || p.category === activeCategory;
+      const matchTag = activeTag === "" || p.tags.includes(activeTag);
+      return matchCat && matchTag;
+    });
+  }, [activeCategory, activeTag]);
+
+  const featured = filtered[0];
+  const rest = filtered.slice(1);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Navbar />
+
+      {/* Hero */}
+      <section className="pt-32 pb-14 px-6 border-b border-border">
+        <div className="mx-auto max-w-6xl">
+          <div className="flex items-center gap-2 mb-5">
+            <Link
+              href="/"
+              className="text-sm text-muted-foreground hover:text-foreground transition-colors font-body"
+            >
+              Home
+            </Link>
+            <span className="text-muted-foreground/40">/</span>
+            <span className="text-sm text-foreground font-body">Blog</span>
+          </div>
+          <h1 className="text-4xl md:text-6xl font-display font-extrabold tracking-tight text-foreground leading-tight">
+            Blog
+          </h1>
+          <p className="mt-4 text-lg font-body text-muted-foreground max-w-xl">
+            Release notes, tutorials, and updates from the Stellar Suite team.
+          </p>
+
+          {/* Filters */}
+          <div className="mt-10">
+            <CategoryFilter
+              categories={allCategories}
+              tags={allTags}
+              activeCategory={activeCategory}
+              activeTag={activeTag}
+              onCategoryChange={(c) => {
+                setActiveCategory(c);
+                setActiveTag("");
+              }}
+              onTagChange={(t) => {
+                setActiveTag(t);
+                setActiveCategory("");
+              }}
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Posts */}
+      <main id="main-content" className="py-16 px-6">
+        <div className="mx-auto max-w-6xl">
+          {filtered.length === 0 ? (
+            <div className="text-center py-24">
+              <p className="text-muted-foreground font-body text-lg">
+                No posts match your filter.
+              </p>
+              <button
+                onClick={() => {
+                  setActiveCategory("");
+                  setActiveTag("");
+                }}
+                className="mt-4 text-primary underline underline-offset-4 text-sm font-body hover:opacity-80 transition-opacity"
+              >
+                Clear filters
+              </button>
+            </div>
+          ) : (
+            <div className="flex flex-col gap-6">
+              {/* Featured (first) post — full width */}
+              {featured && (
+                <div className="grid grid-cols-1 lg:grid-cols-2">
+                  <PostCard post={featured} featured />
+                </div>
+              )}
+
+              {/* Remaining posts — 2-col grid */}
+              {rest.length > 0 && (
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {rest.map((post) => (
+                    <PostCard key={post.slug} post={post} />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 5ebfb04..908bc10 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -120,7 +120,12 @@
     @apply bg-background text-foreground font-body antialiased;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply font-display;
   }
 
@@ -134,7 +139,11 @@
 @layer utilities {
   .text-gradient-blue {
     @apply bg-clip-text text-transparent;
-    background-image: linear-gradient(135deg, hsl(228 76% 52%), hsl(262 68% 56%));
+    background-image: linear-gradient(
+      135deg,
+      hsl(228 76% 52%),
+      hsl(262 68% 56%)
+    );
   }
 }
 
diff --git a/frontend/src/components/ PostCard.tsx b/frontend/src/components/ PostCard.tsx
new file mode 100644
index 0000000..e035a2b
--- /dev/null
+++ b/frontend/src/components/ PostCard.tsx	
@@ -0,0 +1,90 @@
+import { formatDate, Post } from "@/lib/post";
+import Link from "next/link";
+
+type Props = {
+  post: Post;
+  featured?: boolean;
+};
+
+export function PostCard({ post, featured = false }: Props) {
+  return (
+    <Link
+      href={`/blog/${post.slug}`}
+      className={`group flex flex-col rounded-2xl border border-border bg-card transition-all duration-300 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 overflow-hidden ${
+        featured ? "lg:col-span-2 lg:flex-row" : ""
+      }`}
+    >
+      {/* Color bar accent */}
+      <div
+        className={`h-1 w-full bg-gradient-to-r from-primary to-accent flex-shrink-0 ${
+          featured ? "lg:h-auto lg:w-1" : ""
+        }`}
+      />
+
+      <div className={`flex flex-col p-6 flex-1 ${featured ? "lg:p-8" : ""}`}>
+        {/* Category + reading time */}
+        <div className="flex items-center gap-3 mb-4">
+          <span className="inline-flex items-center rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary font-display tracking-wide">
+            {post.category}
+          </span>
+          <span className="text-xs text-muted-foreground font-body">
+            {post.readingTime}
+          </span>
+        </div>
+
+        {/* Title */}
+        <h2
+          className={`font-display font-bold text-foreground leading-tight group-hover:text-primary transition-colors duration-200 ${
+            featured ? "text-2xl lg:text-3xl mb-4" : "text-lg mb-3"
+          }`}
+        >
+          {post.title}
+        </h2>
+
+        {/* Excerpt */}
+        <p
+          className={`font-body text-muted-foreground leading-relaxed flex-1 ${
+            featured ? "text-base" : "text-sm"
+          }`}
+        >
+          {post.excerpt}
+        </p>
+
+        {/* Footer: date + tags + arrow */}
+        <div className="mt-5 pt-4 border-t border-border flex items-center justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            <span className="text-xs text-muted-foreground font-body">
+              {formatDate(post.date)}
+            </span>
+            <div className="flex flex-wrap gap-1.5">
+              {post.tags.slice(0, 3).map((tag) => (
+                <span
+                  key={tag}
+                  className="text-[10px] font-mono text-muted-foreground border border-border rounded px-1.5 py-0.5"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          </div>
+          <span className="flex-shrink-0 text-muted-foreground group-hover:text-primary transition-transform duration-200 group-hover:translate-x-1 transform transition-transform">
+            <svg
+              width="20"
+              height="20"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M17 8l4 4m0 0l-4 4m4-4H3"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/frontend/src/components/CategoryFilter.tsx b/frontend/src/components/CategoryFilter.tsx
new file mode 100644
index 0000000..b351984
--- /dev/null
+++ b/frontend/src/components/CategoryFilter.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+type Props = {
+  categories: string[];
+  tags: string[];
+  activeCategory: string;
+  activeTag: string;
+  onCategoryChange: (c: string) => void;
+  onTagChange: (t: string) => void;
+};
+
+export function CategoryFilter({
+  categories,
+  tags,
+  activeCategory,
+  activeTag,
+  onCategoryChange,
+  onTagChange,
+}: Props) {
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Categories */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground font-display mr-1">
+          Category
+        </span>
+        <button
+          onClick={() => onCategoryChange("")}
+          className={`rounded-full px-4 py-1.5 text-sm font-semibold font-display transition-all duration-200 border ${
+            activeCategory === ""
+              ? "border-primary bg-primary text-primary-foreground shadow-sm"
+              : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/30"
+          }`}
+        >
+          All
+        </button>
+        {categories.map((cat) => (
+          <button
+            key={cat}
+            onClick={() => onCategoryChange(activeCategory === cat ? "" : cat)}
+            className={`rounded-full px-4 py-1.5 text-sm font-semibold font-display transition-all duration-200 border ${
+              activeCategory === cat
+                ? "border-primary bg-primary text-primary-foreground shadow-sm"
+                : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/30"
+            }`}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
+      {/* Tags */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground font-display mr-1">
+          Tag
+        </span>
+        {tags.map((tag) => (
+          <button
+            key={tag}
+            onClick={() => onTagChange(activeTag === tag ? "" : tag)}
+            className={`rounded-md px-3 py-1 text-xs font-mono transition-all duration-200 border ${
+              activeTag === tag
+                ? "border-primary/60 bg-primary/10 text-primary"
+                : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/30"
+            }`}
+          >
+            #{tag}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/PostBody.tsx b/frontend/src/components/PostBody.tsx
new file mode 100644
index 0000000..1531922
--- /dev/null
+++ b/frontend/src/components/PostBody.tsx
@@ -0,0 +1,189 @@
+// src/components/blog/PostBody.tsx
+// Renders post.content (markdown string) with consistent typography.
+// Uses a lightweight regex-based renderer so no extra dependencies are needed.
+// If you later add @next/mdx or remark, replace this component with your MDX renderer.
+
+type Props = {
+  content: string;
+};
+
+/**
+ * Lightweight markdown → HTML renderer.
+ * Supports: h2/h3, bold, inline code, fenced code blocks, paragraphs, unordered lists.
+ */
+function renderMarkdown(md: string): string {
+  const lines = md.split("\n");
+  const html: string[] = [];
+  let inCode = false;
+  let codeLang = "";
+  let codeLines: string[] = [];
+  let inList = false;
+
+  const flushList = () => {
+    if (inList) {
+      html.push("</ul>");
+      inList = false;
+    }
+  };
+
+  const inline = (text: string) =>
+    text
+      // Bold
+      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+      // Inline code
+      .replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+
+  for (const line of lines) {
+    // Fenced code block start
+    if (!inCode && line.startsWith("```")) {
+      flushList();
+      inCode = true;
+      codeLang = line.slice(3).trim();
+      codeLines = [];
+      continue;
+    }
+    // Fenced code block end
+    if (inCode && line.startsWith("```")) {
+      html.push(
+        `<pre class="code-block"><code class="language-${codeLang || "text"}">${codeLines
+          .map((l) =>
+            l
+              .replace(/&/g, "&amp;")
+              .replace(/</g, "&lt;")
+              .replace(/>/g, "&gt;"),
+          )
+          .join("\n")}</code></pre>`,
+      );
+      inCode = false;
+      codeLines = [];
+      continue;
+    }
+    if (inCode) {
+      codeLines.push(line);
+      continue;
+    }
+
+    // Headings
+    if (line.startsWith("## ")) {
+      flushList();
+      html.push(`<h2 class="post-h2">${inline(line.slice(3))}</h2>`);
+      continue;
+    }
+    if (line.startsWith("### ")) {
+      flushList();
+      html.push(`<h3 class="post-h3">${inline(line.slice(4))}</h3>`);
+      continue;
+    }
+
+    // List items
+    if (line.startsWith("- ")) {
+      if (!inList) {
+        html.push('<ul class="post-list">');
+        inList = true;
+      }
+      html.push(`<li class="post-li">${inline(line.slice(2))}</li>`);
+      continue;
+    }
+
+    // Blank line
+    if (line.trim() === "") {
+      flushList();
+      continue;
+    }
+
+    // Paragraph
+    flushList();
+    html.push(`<p class="post-p">${inline(line)}</p>`);
+  }
+
+  flushList();
+  return html.join("\n");
+}
+
+export function PostBody({ content }: Props) {
+  return (
+    <>
+      <style>{`
+        .post-body .post-h2 {
+          font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
+          font-size: 1.5rem;
+          font-weight: 700;
+          color: hsl(var(--foreground));
+          margin-top: 2.5rem;
+          margin-bottom: 1rem;
+          line-height: 1.3;
+        }
+        .post-body .post-h3 {
+          font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
+          font-size: 1.15rem;
+          font-weight: 600;
+          color: hsl(var(--foreground));
+          margin-top: 2rem;
+          margin-bottom: 0.75rem;
+        }
+        .post-body .post-p {
+          font-family: var(--font-body, 'DM Sans', sans-serif);
+          font-size: 1.0625rem;
+          line-height: 1.85;
+          color: hsl(var(--muted-foreground));
+          margin-bottom: 1.25rem;
+        }
+        .post-body .post-list {
+          margin-bottom: 1.25rem;
+          padding-left: 1.5rem;
+          list-style: none;
+        }
+        .post-body .post-li {
+          font-family: var(--font-body, 'DM Sans', sans-serif);
+          font-size: 1.0625rem;
+          line-height: 1.8;
+          color: hsl(var(--muted-foreground));
+          position: relative;
+          padding-left: 0.25rem;
+          margin-bottom: 0.4rem;
+        }
+        .post-body .post-li::before {
+          content: '';
+          position: absolute;
+          left: -1.1rem;
+          top: 0.75rem;
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: hsl(var(--primary));
+        }
+        .post-body .inline-code {
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 0.85em;
+          background: hsl(var(--muted));
+          color: hsl(var(--primary));
+          border-radius: 4px;
+          padding: 0.15em 0.4em;
+        }
+        .post-body .code-block {
+          background: hsl(222 47% 6%);
+          border: 1px solid hsl(var(--border));
+          border-radius: 12px;
+          padding: 1.25rem 1.5rem;
+          overflow-x: auto;
+          margin: 1.75rem 0;
+          font-family: 'JetBrains Mono', monospace;
+          font-size: 0.875rem;
+          line-height: 1.7;
+          color: #cdd3de;
+        }
+        .dark .post-body .code-block {
+          background: hsl(222 47% 4%);
+        }
+        .post-body strong {
+          font-weight: 600;
+          color: hsl(var(--foreground));
+        }
+      `}</style>
+      <div
+        className="post-body"
+        dangerouslySetInnerHTML={{ __html: renderMarkdown(content) }}
+      />
+    </>
+  );
+}
diff --git a/frontend/src/components/UseCasesSection.tsx b/frontend/src/components/UseCasesSection.tsx
index 47d99b0..9fe6018 100644
--- a/frontend/src/components/UseCasesSection.tsx
+++ b/frontend/src/components/UseCasesSection.tsx
@@ -1,143 +1,823 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Rocket, Play, FileCode, Terminal, Shield } from "lucide-react";
 
+// ─── VS Code mock content per tab ───────────────────────────────────────────
+
+const vscodeMocks: Record<
+  string,
+  {
+    filename: string;
+    language: string;
+    lines: { indent: number; tokens: { text: string; color: string }[] }[];
+    terminal?: string[];
+    sidePanel?: {
+      label: string;
+      value: string;
+      status?: "ok" | "warn" | "err";
+    }[];
+  }
+> = {
+  Deploy: {
+    filename: "deploy.ts",
+    language: "typescript",
+    lines: [
+      {
+        indent: 0,
+        tokens: [
+          { text: "import", color: "#c792ea" },
+          { text: " { StellarSuite } ", color: "#cdd3de" },
+          { text: "from", color: "#c792ea" },
+          { text: " 'stellar-suite'", color: "#c3e88d" },
+        ],
+      },
+      { indent: 0, tokens: [] },
+      {
+        indent: 0,
+        tokens: [
+          { text: "const", color: "#c792ea" },
+          { text: " suite ", color: "#cdd3de" },
+          { text: "=", color: "#89ddff" },
+          { text: " new ", color: "#c792ea" },
+          { text: "StellarSuite", color: "#82aaff" },
+          { text: "()", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [] },
+      {
+        indent: 0,
+        tokens: [{ text: "// Deploy to testnet", color: "#546e7a" }],
+      },
+      {
+        indent: 0,
+        tokens: [
+          { text: "await", color: "#c792ea" },
+          { text: " suite.", color: "#cdd3de" },
+          { text: "deploy", color: "#82aaff" },
+          { text: "({", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "network", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "'testnet'", color: "#c3e88d" },
+          { text: ",", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "contract", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "'HelloWorld'", color: "#c3e88d" },
+          { text: ",", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "signer", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "identity", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [{ text: "})", color: "#cdd3de" }] },
+    ],
+    terminal: [
+      "$ stellar deploy --network testnet",
+      "✓ Compiled HelloWorld.wasm (2.3kb)",
+      "✓ Uploaded to testnet",
+      "✓ Contract ID: CCHKN...XF72",
+      "  Deployed in 1.42s",
+    ],
+    sidePanel: [
+      { label: "Network", value: "Testnet", status: "ok" },
+      { label: "Contract", value: "HelloWorld", status: "ok" },
+      { label: "Status", value: "Deployed ✓", status: "ok" },
+      { label: "Gas used", value: "14,820 stroops" },
+    ],
+  },
+  Simulate: {
+    filename: "simulate.ts",
+    language: "typescript",
+    lines: [
+      {
+        indent: 0,
+        tokens: [{ text: "// Simulate before sending", color: "#546e7a" }],
+      },
+      {
+        indent: 0,
+        tokens: [
+          { text: "const", color: "#c792ea" },
+          { text: " result ", color: "#cdd3de" },
+          { text: "=", color: "#89ddff" },
+          { text: " await ", color: "#c792ea" },
+          { text: "suite.", color: "#cdd3de" },
+          { text: "simulate", color: "#82aaff" },
+          { text: "({", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "fn", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "'transfer'", color: "#c3e88d" },
+          { text: ",", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "args", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "[from, to, amount]", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [{ text: "})", color: "#cdd3de" }] },
+      { indent: 0, tokens: [] },
+      {
+        indent: 0,
+        tokens: [
+          { text: "console", color: "#cdd3de" },
+          { text: ".", color: "#89ddff" },
+          { text: "log", color: "#82aaff" },
+          { text: "(result.", color: "#cdd3de" },
+          { text: "returnValue", color: "#f07178" },
+          { text: ")", color: "#cdd3de" },
+        ],
+      },
+    ],
+    terminal: [
+      "$ stellar simulate transfer",
+      "  Simulating transaction...",
+      "✓ Return value: true",
+      "✓ Fee estimate: 203 stroops",
+      "✓ No state changes detected",
+    ],
+    sidePanel: [
+      { label: "Function", value: "transfer()", status: "ok" },
+      { label: "Fee est.", value: "203 stroops", status: "ok" },
+      { label: "Return", value: "true", status: "ok" },
+      { label: "Warnings", value: "None", status: "ok" },
+    ],
+  },
+  Build: {
+    filename: "HelloWorld.rs",
+    language: "rust",
+    lines: [
+      { indent: 0, tokens: [{ text: "#![no_std]", color: "#546e7a" }] },
+      {
+        indent: 0,
+        tokens: [
+          { text: "use", color: "#c792ea" },
+          { text: " soroban_sdk", color: "#cdd3de" },
+          { text: "::{", color: "#89ddff" },
+          { text: "contract, contractimpl, Env", color: "#82aaff" },
+          { text: "};", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [] },
+      { indent: 0, tokens: [{ text: "#[contract]", color: "#c3e88d" }] },
+      {
+        indent: 0,
+        tokens: [
+          { text: "pub", color: "#c792ea" },
+          { text: " struct ", color: "#cdd3de" },
+          { text: "HelloWorld", color: "#82aaff" },
+          { text: ";", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [] },
+      { indent: 0, tokens: [{ text: "#[contractimpl]", color: "#c3e88d" }] },
+      {
+        indent: 0,
+        tokens: [
+          { text: "impl", color: "#c792ea" },
+          { text: " HelloWorld {", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "pub", color: "#c792ea" },
+          { text: " fn ", color: "#cdd3de" },
+          { text: "hello", color: "#82aaff" },
+          { text: "(_env: ", color: "#cdd3de" },
+          { text: "Env", color: "#82aaff" },
+          { text: ") -> ", color: "#cdd3de" },
+          { text: "String", color: "#82aaff" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "  {", color: "#cdd3de" },
+          { text: ' "Hello, Stellar!"', color: "#c3e88d" },
+          { text: ".into() }", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [{ text: "}", color: "#cdd3de" }] },
+    ],
+    terminal: [
+      "$ cargo build --target wasm32-unknown-unknown",
+      "   Compiling hello_world v0.1.0",
+      "✓ Finished release [optimized]",
+      "✓ hello_world.wasm → target/wasm32/",
+      "  Build time: 3.1s",
+    ],
+    sidePanel: [
+      { label: "Target", value: "wasm32", status: "ok" },
+      { label: "Output", value: "hello_world.wasm", status: "ok" },
+      { label: "Size", value: "2.3 KB", status: "ok" },
+      { label: "Errors", value: "0", status: "ok" },
+    ],
+  },
+  Test: {
+    filename: "hello_world_test.rs",
+    language: "rust",
+    lines: [
+      { indent: 0, tokens: [{ text: "#[cfg(test)]", color: "#c3e88d" }] },
+      {
+        indent: 0,
+        tokens: [
+          { text: "mod", color: "#c792ea" },
+          { text: " tests {", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "use", color: "#c792ea" },
+          { text: " super::*;", color: "#cdd3de" },
+        ],
+      },
+      { indent: 0, tokens: [] },
+      { indent: 2, tokens: [{ text: "#[test]", color: "#c3e88d" }] },
+      {
+        indent: 2,
+        tokens: [
+          { text: "fn", color: "#c792ea" },
+          { text: " test_hello", color: "#82aaff" },
+          { text: "() {", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 4,
+        tokens: [
+          { text: "let", color: "#c792ea" },
+          { text: " env ", color: "#cdd3de" },
+          { text: "=", color: "#89ddff" },
+          { text: " Env::", color: "#cdd3de" },
+          { text: "default", color: "#82aaff" },
+          { text: "();", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 4,
+        tokens: [
+          { text: "assert_eq!", color: "#82aaff" },
+          { text: "(hello(env), ", color: "#cdd3de" },
+          { text: '"Hello, Stellar!"', color: "#c3e88d" },
+          { text: ");", color: "#cdd3de" },
+        ],
+      },
+      { indent: 2, tokens: [{ text: "}", color: "#cdd3de" }] },
+      { indent: 0, tokens: [{ text: "}", color: "#cdd3de" }] },
+    ],
+    terminal: [
+      "$ cargo test",
+      "  running 3 tests",
+      "✓ test_hello ... ok",
+      "✓ test_transfer ... ok",
+      "✓ test_balance ... ok",
+      "  test result: ok. 3 passed; 0 failed",
+    ],
+    sidePanel: [
+      { label: "Tests run", value: "3", status: "ok" },
+      { label: "Passed", value: "3 ✓", status: "ok" },
+      { label: "Failed", value: "0", status: "ok" },
+      { label: "Coverage", value: "94%", status: "ok" },
+    ],
+  },
+  Manage: {
+    filename: "accounts.ts",
+    language: "typescript",
+    lines: [
+      {
+        indent: 0,
+        tokens: [{ text: "// Create & fund a new account", color: "#546e7a" }],
+      },
+      {
+        indent: 0,
+        tokens: [
+          { text: "const", color: "#c792ea" },
+          { text: " account ", color: "#cdd3de" },
+          { text: "=", color: "#89ddff" },
+          { text: " await ", color: "#c792ea" },
+          { text: "suite.", color: "#cdd3de" },
+          { text: "createAccount", color: "#82aaff" },
+          { text: "({", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "alias", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "'alice'", color: "#c3e88d" },
+          { text: ",", color: "#cdd3de" },
+        ],
+      },
+      {
+        indent: 2,
+        tokens: [
+          { text: "fund", color: "#f07178" },
+          { text: ": ", color: "#89ddff" },
+          { text: "true", color: "#c792ea" },
+        ],
+      },
+      { indent: 0, tokens: [{ text: "})", color: "#cdd3de" }] },
+      { indent: 0, tokens: [] },
+      {
+        indent: 0,
+        tokens: [{ text: "// Switch network config", color: "#546e7a" }],
+      },
+      {
+        indent: 0,
+        tokens: [
+          { text: "suite.", color: "#cdd3de" },
+          { text: "setNetwork", color: "#82aaff" },
+          { text: "('mainnet')", color: "#c3e88d" },
+        ],
+      },
+    ],
+    terminal: [
+      "$ stellar account create alice --fund",
+      "✓ Keypair generated",
+      "✓ Funded via Friendbot",
+      "  Balance: 10,000 XLM",
+      "  Public: GDTKN...WQ9X",
+    ],
+    sidePanel: [
+      { label: "Alias", value: "alice", status: "ok" },
+      { label: "Balance", value: "10,000 XLM", status: "ok" },
+      { label: "Network", value: "Testnet", status: "ok" },
+      { label: "Keys", value: "Stored ✓", status: "ok" },
+    ],
+  },
+};
+
+// ─── Animated typing cursor ──────────────────────────────────────────────────
+function TypingCursor() {
+  return (
+    <span
+      className="inline-block w-[2px] h-[14px] bg-[#aeafad] align-middle ml-0.5"
+      style={{ animation: "blink 1s step-end infinite" }}
+    />
+  );
+}
+
+// ─── VS Code Mock Window ─────────────────────────────────────────────────────
+function VSCodeWindow({ tabLabel }: { tabLabel: string }) {
+  const mock = vscodeMocks[tabLabel];
+  const [visibleLines, setVisibleLines] = useState(0);
+  const [visibleTermLines, setVisibleTermLines] = useState(0);
+  const animatingRef = useRef(false);
+
+  useEffect(() => {
+    setVisibleLines(0);
+    setVisibleTermLines(0);
+    animatingRef.current = true;
+
+    // Animate code lines
+    let line = 0;
+    const codeInterval = setInterval(() => {
+      line++;
+      setVisibleLines(line);
+      if (line >= mock.lines.length) {
+        clearInterval(codeInterval);
+        // Then animate terminal
+        if (mock.terminal) {
+          let tLine = 0;
+          const termInterval = setInterval(() => {
+            tLine++;
+            setVisibleTermLines(tLine);
+            if (tLine >= mock.terminal!.length) clearInterval(termInterval);
+          }, 160);
+        }
+      }
+    }, 80);
+
+    return () => {
+      clearInterval(codeInterval);
+      animatingRef.current = false;
+    };
+  }, [tabLabel]);
+
+  const statusColor = (s?: "ok" | "warn" | "err") =>
+    s === "ok"
+      ? "#4ec9b0"
+      : s === "warn"
+        ? "#dcdcaa"
+        : s === "err"
+          ? "#f44747"
+          : "#858585";
+
+  return (
+    <div
+      className="w-full rounded-xl overflow-hidden border border-[#1e1e2e] shadow-2xl"
+      style={{
+        background: "#1e1e1e",
+        fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
+      }}
+    >
+      {/* Title bar */}
+      <div
+        className="flex items-center gap-2 px-4 py-2.5"
+        style={{ background: "#323233" }}
+      >
+        <span className="w-3 h-3 rounded-full bg-[#ff5f56]" />
+        <span className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
+        <span className="w-3 h-3 rounded-full bg-[#27c93f]" />
+        <span className="ml-3 text-xs text-[#858585] flex-1 text-center">
+          {mock.filename} — Stellar Suite
+        </span>
+      </div>
+
+      {/* Tab bar */}
+      <div
+        className="flex items-center gap-0 text-xs border-b border-[#252526]"
+        style={{ background: "#252526" }}
+      >
+        <div
+          className="px-4 py-2 border-r border-[#1e1e1e] border-t-2 border-t-[#007acc] text-[#cdd3de]"
+          style={{ background: "#1e1e1e" }}
+        >
+          {mock.filename}
+        </div>
+        <div className="px-4 py-2 text-[#858585]">stellar.config.ts</div>
+      </div>
+
+      {/* Main layout: editor + side panel */}
+      <div className="flex" style={{ minHeight: "240px" }}>
+        {/* Line numbers + code */}
+        <div className="flex-1 overflow-hidden">
+          <div className="flex">
+            {/* Line numbers */}
+            <div
+              className="select-none text-right pr-4 pt-3 pb-2 text-xs leading-[1.7] min-w-[2.5rem]"
+              style={{ color: "#495162", background: "#1e1e1e" }}
+            >
+              {mock.lines.map((_, i) => (
+                <div key={i}>{i + 1}</div>
+              ))}
+            </div>
+            {/* Code */}
+            <div className="pt-3 pb-2 pr-4 text-xs leading-[1.7] overflow-x-auto flex-1">
+              {mock.lines.map((line, i) => (
+                <div
+                  key={i}
+                  style={{
+                    paddingLeft: `${line.indent * 0.85}rem`,
+                    opacity: i < visibleLines ? 1 : 0,
+                    transition: "opacity 0.15s ease",
+                  }}
+                >
+                  {line.tokens.length === 0 ? (
+                    <span>&nbsp;</span>
+                  ) : (
+                    line.tokens.map((t, j) => (
+                      <span key={j} style={{ color: t.color }}>
+                        {t.text}
+                      </span>
+                    ))
+                  )}
+                  {i === visibleLines - 1 && i < mock.lines.length - 1 && (
+                    <TypingCursor />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Side panel */}
+        {mock.sidePanel && (
+          <div
+            className="border-l border-[#252526] px-4 py-3 flex flex-col gap-2 min-w-[140px]"
+            style={{ background: "#252526" }}
+          >
+            <div
+              className="text-[10px] font-bold uppercase tracking-widest mb-1"
+              style={{ color: "#858585" }}
+            >
+              Stellar Suite
+            </div>
+            {mock.sidePanel.map((item) => (
+              <div key={item.label} className="flex flex-col gap-0.5">
+                <span className="text-[10px]" style={{ color: "#858585" }}>
+                  {item.label}
+                </span>
+                <span
+                  className="text-[11px] font-semibold"
+                  style={{ color: statusColor(item.status) }}
+                >
+                  {item.value}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Terminal panel */}
+      {mock.terminal && (
+        <div
+          className="border-t border-[#252526]"
+          style={{ background: "#1a1a1a" }}
+        >
+          <div
+            className="flex items-center gap-3 px-4 py-1.5 border-b border-[#252526]"
+            style={{ background: "#252526" }}
+          >
+            <span
+              className="text-[10px] font-semibold uppercase tracking-wider"
+              style={{ color: "#007acc" }}
+            >
+              Terminal
+            </span>
+            <span className="text-[10px]" style={{ color: "#858585" }}>
+              zsh
+            </span>
+          </div>
+          <div className="px-4 py-2.5 text-xs leading-[1.8] min-h-[90px]">
+            {mock.terminal.map((line, i) => (
+              <div
+                key={i}
+                style={{
+                  opacity: i < visibleTermLines ? 1 : 0,
+                  transition: "opacity 0.2s ease",
+                  color: line.startsWith("✓")
+                    ? "#4ec9b0"
+                    : line.startsWith("$")
+                      ? "#dcdcaa"
+                      : "#858585",
+                }}
+              >
+                {line}
+                {i === visibleTermLines - 1 &&
+                  i < mock.terminal!.length - 1 && <TypingCursor />}
+              </div>
+            ))}
+            {visibleTermLines >= mock.terminal.length && (
+              <div style={{ color: "#858585" }}>
+                $ <TypingCursor />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Status bar */}
+      <div
+        className="flex items-center gap-4 px-4 py-1 text-[10px]"
+        style={{ background: "#007acc", color: "#fff" }}
+      >
+        <span>⎇ main</span>
+        <span>Stellar Suite</span>
+        <span className="ml-auto">TypeScript</span>
+        <span>UTF-8</span>
+        <span>Ln {mock.lines.length}, Col 1</span>
+      </div>
+    </div>
+  );
+}
+
+// ─── Tab data ────────────────────────────────────────────────────────────────
+
 const tabs = [
   {
     label: "Deploy",
     icon: Rocket,
-    description: "One-click deployment lets you push Soroban smart contracts to testnet or mainnet without leaving VS Code.",
+    description:
+      "One-click deployment lets you push Soroban smart contracts to testnet or mainnet without leaving VS Code.",
     bullets: [
-      { title: "One-click deploy:", text: "Select your target network and deploy instantly — no terminal commands needed." },
-      { title: "Environment management:", text: "Switch between testnet, futurenet, and mainnet environments effortlessly." },
-      { title: "Deploy history:", text: "Track every deployment with built-in logs and contract addresses." },
-      { title: "Error handling:", text: "Get clear, actionable error messages right in your editor when deployments fail." },
+      {
+        title: "One-click deploy:",
+        text: "Select your target network and deploy instantly — no terminal commands needed.",
+      },
+      {
+        title: "Environment management:",
+        text: "Switch between testnet, futurenet, and mainnet environments effortlessly.",
+      },
+      {
+        title: "Deploy history:",
+        text: "Track every deployment with built-in logs and contract addresses.",
+      },
+      {
+        title: "Error handling:",
+        text: "Get clear, actionable error messages right in your editor when deployments fail.",
+      },
     ],
   },
   {
     label: "Simulate",
     icon: Play,
-    description: "Test transactions before committing them to the blockchain — simulate any contract invocation with real-time feedback.",
+    description:
+      "Test transactions before committing them to the blockchain — simulate any contract invocation with real-time feedback.",
     bullets: [
-      { title: "Transaction preview:", text: "See exactly what a transaction will do before you send it." },
-      { title: "Gas estimation:", text: "Get accurate resource and fee estimates for every transaction." },
-      { title: "Debug outputs:", text: "View detailed logs and return values from simulated contract calls." },
-      { title: "Iterate faster:", text: "Catch bugs in seconds instead of waiting for on-chain failures." },
+      {
+        title: "Transaction preview:",
+        text: "See exactly what a transaction will do before you send it.",
+      },
+      {
+        title: "Gas estimation:",
+        text: "Get accurate resource and fee estimates for every transaction.",
+      },
+      {
+        title: "Debug outputs:",
+        text: "View detailed logs and return values from simulated contract calls.",
+      },
+      {
+        title: "Iterate faster:",
+        text: "Catch bugs in seconds instead of waiting for on-chain failures.",
+      },
     ],
   },
   {
     label: "Build",
     icon: FileCode,
-    description: "Scaffold, compile, and manage Soroban projects with built-in tooling that understands your contract structure.",
+    description:
+      "Scaffold, compile, and manage Soroban projects with built-in tooling that understands your contract structure.",
     bullets: [
-      { title: "Project scaffolding:", text: "Create new Soroban projects from templates with a single command." },
-      { title: "Auto-compile:", text: "Contracts are built automatically on save with real-time error reporting." },
-      { title: "WASM management:", text: "Compiled WASM files are organized and ready for deployment." },
-      { title: "Multi-contract support:", text: "Manage multiple contracts in a single workspace seamlessly." },
+      {
+        title: "Project scaffolding:",
+        text: "Create new Soroban projects from templates with a single command.",
+      },
+      {
+        title: "Auto-compile:",
+        text: "Contracts are built automatically on save with real-time error reporting.",
+      },
+      {
+        title: "WASM management:",
+        text: "Compiled WASM files are organized and ready for deployment.",
+      },
+      {
+        title: "Multi-contract support:",
+        text: "Manage multiple contracts in a single workspace seamlessly.",
+      },
     ],
   },
   {
     label: "Test",
     icon: Shield,
-    description: "Run your contract tests with integrated test runners and get results right in the editor.",
+    description:
+      "Run your contract tests with integrated test runners and get results right in the editor.",
     bullets: [
-      { title: "Inline test results:", text: "See pass/fail status next to each test function." },
-      { title: "Coverage reports:", text: "Understand which parts of your contract are tested." },
-      { title: "Watch mode:", text: "Tests re-run automatically as you edit your contracts." },
-      { title: "Snapshot testing:", text: "Compare contract state before and after transactions." },
+      {
+        title: "Inline test results:",
+        text: "See pass/fail status next to each test function.",
+      },
+      {
+        title: "Coverage reports:",
+        text: "Understand which parts of your contract are tested.",
+      },
+      {
+        title: "Watch mode:",
+        text: "Tests re-run automatically as you edit your contracts.",
+      },
+      {
+        title: "Snapshot testing:",
+        text: "Compare contract state before and after transactions.",
+      },
     ],
   },
   {
     label: "Manage",
     icon: Terminal,
-    description: "Manage accounts, keys, identities, and network configurations — all from a visual interface.",
+    description:
+      "Manage accounts, keys, identities, and network configurations — all from a visual interface.",
     bullets: [
-      { title: "Account management:", text: "Create, fund, and manage Stellar accounts without the CLI." },
-      { title: "Key management:", text: "Securely store and use signing keys within VS Code." },
-      { title: "Network config:", text: "Configure custom RPC endpoints and network settings visually." },
-      { title: "Contract interactions:", text: "Invoke deployed contracts with a graphical form interface." },
+      {
+        title: "Account management:",
+        text: "Create, fund, and manage Stellar accounts without the CLI.",
+      },
+      {
+        title: "Key management:",
+        text: "Securely store and use signing keys within VS Code.",
+      },
+      {
+        title: "Network config:",
+        text: "Configure custom RPC endpoints and network settings visually.",
+      },
+      {
+        title: "Contract interactions:",
+        text: "Invoke deployed contracts with a graphical form interface.",
+      },
     ],
   },
 ];
 
+// ─── Main Section ─────────────────────────────────────────────────────────────
+
 const UseCasesSection = () => {
   const [active, setActive] = useState(0);
   const current = tabs[active];
 
   return (
-    <section id="use-cases" className="section-padding">
-      <div className="container mx-auto max-w-6xl">
-        <div className="text-center mb-12">
-          <h2 className="text-3xl md:text-5xl font-display font-extrabold tracking-tight text-foreground leading-tight">
-            Endless ways to build on Stellar.
-          </h2>
-          <p className="mt-4 text-lg font-body text-muted-foreground max-w-2xl mx-auto">
-            From deploying contracts to simulating transactions, Stellar Suite delivers the tools you need.
-            Every workflow is faster, easier, and more intuitive.
-          </p>
-        </div>
-
-        {/* Tabs */}
-        <div className="flex flex-wrap justify-center gap-2 mb-14" role="tablist" aria-label="Use cases">
-          {tabs.map((tab, i) => (
-            <button
-              key={tab.label}
-              onClick={() => setActive(i)}
-              className={`rounded-full px-6 py-2.5 text-sm font-semibold font-display transition-all duration-200 border ${
-                active === i
-                  ? "border-foreground bg-background text-foreground shadow-sm"
-                  : "border-transparent text-muted-foreground hover:text-foreground"
-              }`}
-              role="tab"
-              id={`use-case-tab-${i}`}
-              aria-selected={active === i}
-              aria-controls={`use-case-panel-${i}`}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
+    <>
+      <style>{`
+        @keyframes blink {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0; }
+        }
+      `}</style>
 
-        {/* Content */}
-        <div
-          className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"
-          role="tabpanel"
-          id={`use-case-panel-${active}`}
-          aria-labelledby={`use-case-tab-${active}`}
-        >
-          <div>
-            <p className="font-body text-muted-foreground text-base leading-relaxed mb-8">
-              {current.description}
+      <section id="use-cases" className="section-padding">
+        <div className="container mx-auto max-w-6xl">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl md:text-5xl font-display font-extrabold tracking-tight text-foreground leading-tight">
+              Endless ways to build on Stellar.
+            </h2>
+            <p className="mt-4 text-lg font-body text-muted-foreground max-w-2xl mx-auto">
+              From deploying contracts to simulating transactions, Stellar Suite
+              delivers the tools you need. Every workflow is faster, easier, and
+              more intuitive.
             </p>
-            <ul className="space-y-5">
-              {current.bullets.map((b) => (
-                <li key={b.title} className="flex items-start gap-3">
-                  <span className="mt-2 h-2 w-2 rounded-full bg-primary flex-shrink-0" />
-                  <span className="font-body text-muted-foreground leading-relaxed">
-                    <strong className="text-foreground font-semibold">{b.title}</strong> {b.text}
-                  </span>
-                </li>
-              ))}
-            </ul>
-            <div className="mt-10">
-              <a href="#get-started" className="btn-primary">
-                Get started
-              </a>
-            </div>
           </div>
 
-          {/* Visual card */}
-          <div className="rounded-2xl bg-card-blue-light p-10 flex flex-col items-center justify-center min-h-[400px] border border-border">
-            <div className="icon-box-lg rounded-2xl mb-5">
-              <current.icon className="h-8 w-8" strokeWidth={1.8} />
+          {/* Tabs */}
+          <div
+            className="flex flex-wrap justify-center gap-2 mb-14"
+            role="tablist"
+            aria-label="Use cases"
+          >
+            {tabs.map((tab, i) => (
+              <button
+                key={tab.label}
+                onClick={() => setActive(i)}
+                className={`rounded-full px-6 py-2.5 text-sm font-semibold font-display transition-all duration-200 border ${
+                  active === i
+                    ? "border-foreground bg-background text-foreground shadow-sm"
+                    : "border-transparent text-muted-foreground hover:text-foreground"
+                }`}
+                role="tab"
+                id={`use-case-tab-${i}`}
+                aria-selected={active === i}
+                aria-controls={`use-case-panel-${i}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* Content */}
+          <div
+            className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"
+            role="tabpanel"
+            id={`use-case-panel-${active}`}
+            aria-labelledby={`use-case-tab-${active}`}
+          >
+            {/* Left: description + bullets */}
+            <div>
+              <p className="font-body text-muted-foreground text-base leading-relaxed mb-8">
+                {current.description}
+              </p>
+              <ul className="space-y-5">
+                {current.bullets.map((b) => (
+                  <li key={b.title} className="flex items-start gap-3">
+                    <span className="mt-2 h-2 w-2 rounded-full bg-primary flex-shrink-0" />
+                    <span className="font-body text-muted-foreground leading-relaxed">
+                      <strong className="text-foreground font-semibold">
+                        {b.title}
+                      </strong>{" "}
+                      {b.text}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+              <div className="mt-10">
+                <a href="#get-started" className="btn-primary">
+                  Get started
+                </a>
+              </div>
+            </div>
+
+            {/* Right: VS Code mock */}
+            <div className="w-full">
+              <VSCodeWindow key={current.label} tabLabel={current.label} />
+              <p className="mt-3 text-center text-xs text-muted-foreground font-body">
+                Visual workflow in VS Code · Stellar Suite Extension
+              </p>
             </div>
-            <p className="text-xl font-display font-bold text-foreground">{current.label}</p>
-            <p className="text-sm font-body text-muted-foreground mt-1.5">Visual workflow in VS Code</p>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </>
   );
 };
 
diff --git a/frontend/src/lib/post.ts b/frontend/src/lib/post.ts
new file mode 100644
index 0000000..775a2fe
--- /dev/null
+++ b/frontend/src/lib/post.ts
@@ -0,0 +1,218 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// File-based blog post store.
+// To add a new post: add an entry to ALL_POSTS below.
+// Fields: slug (URL key), title, excerpt, date (ISO), category, tags, readingTime, content (MDX/markdown string)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type Post = {
+  slug: string;
+  title: string;
+  excerpt: string;
+  date: string; // ISO 8601 e.g. "2025-01-15"
+  category: string;
+  tags: string[];
+  readingTime: string;
+  author: { name: string; avatar?: string };
+  content: string; // Markdown/MDX string
+};
+
+export const ALL_POSTS: Post[] = [
+  {
+    slug: "introducing-stellar-suite",
+    title: "Introducing Stellar Suite: Soroban Development, Right in VS Code",
+    excerpt:
+      "We built Stellar Suite to eliminate the friction between writing Soroban smart contracts and shipping them — no more terminal juggling, no more context switching.",
+    date: "2025-01-15",
+    category: "Announcements",
+    tags: ["release", "soroban", "vscode"],
+    readingTime: "4 min read",
+    author: { name: "Stellar Suite Team" },
+    content: `
+## The Problem We Kept Running Into
+
+Every Soroban developer knows the rhythm: write a function, switch to your terminal, run \`stellar contract deploy\`, parse the output, switch back to your editor. Repeat fifty times a day.
+
+It's not that the Stellar CLI is bad — it's excellent. But the constant context switch between editor and terminal fragments your focus and slows you down.
+
+We built Stellar Suite to fix that.
+
+## What Stellar Suite Does
+
+Stellar Suite is a VS Code extension that brings the full Soroban development workflow into your editor:
+
+- **Deploy** contracts to testnet or mainnet with one click, without touching a terminal
+- **Simulate** transactions before committing them — see return values, fee estimates, and state changes inline
+- **Build** and compile your contracts automatically on save
+- **Test** with an integrated test runner that shows pass/fail status next to each function
+- **Manage** accounts, keys, and network configs from a clean visual panel
+
+## How It Works
+
+The extension connects directly to the Stellar RPC and wraps the Soroban SDK. Everything runs locally — no cloud dependency, no telemetry, no keys leaving your machine.
+
+\`\`\`typescript
+// Before: terminal context switch every time
+// $ stellar contract deploy --network testnet --source alice
+
+// After: one command from the Command Palette
+// > Stellar Suite: Deploy Contract
+\`\`\`
+
+## Getting Started
+
+Install from the VS Code Marketplace, open any Soroban project, and the extension activates automatically. The sidebar panel gives you instant access to every workflow.
+
+We're shipping fast. Follow the repo for weekly updates.
+    `.trim(),
+  },
+  {
+    slug: "simulating-transactions-before-you-commit",
+    title: "Why You Should Always Simulate Before You Send",
+    excerpt:
+      "On-chain failures are expensive and embarrassing. Here's how Stellar Suite's simulation mode lets you catch bugs before they cost you gas — or worse, corrupt state.",
+    date: "2025-02-03",
+    category: "Tutorials",
+    tags: ["simulation", "debugging", "soroban"],
+    readingTime: "6 min read",
+    author: { name: "Stellar Suite Team" },
+    content: `
+## The Cost of On-Chain Failures
+
+When a Soroban contract call fails on-chain, you've already paid the transaction fee. Worse, if your contract has partial state mutations before hitting an error, you're debugging a mess.
+
+The simulation API exists to prevent exactly this. Stellar Suite surfaces it directly in your editor so you never have to remember to call it manually.
+
+## How Simulation Works
+
+Under the hood, the Stellar RPC exposes a \`simulateTransaction\` endpoint. It runs your transaction against the current ledger state without committing it, returning:
+
+- The **return value** your function would produce
+- Accurate **resource and fee estimates**
+- Any **diagnostic events** or error messages
+- A diff of **ledger entries** that would change
+
+Stellar Suite wraps this into a single "Simulate" action in the command palette and sidebar panel.
+
+## A Real Example
+
+Say you have a token transfer function:
+
+\`\`\`rust
+pub fn transfer(env: Env, from: Address, to: Address, amount: i128) {
+    from.require_auth();
+    let balance = get_balance(&env, &from);
+    if balance < amount {
+        panic!("insufficient balance");
+    }
+    // ... update balances
+}
+\`\`\`
+
+Before Stellar Suite, you'd deploy, invoke, wait for the transaction, and check the result. With simulation:
+
+1. Open the Stellar Suite sidebar
+2. Select your function (\`transfer\`)
+3. Fill in the args
+4. Click **Simulate**
+
+In under a second you'll see the return value, the fee (e.g. 203 stroops), and whether any auth is missing — all before touching the network.
+
+## Iteration Speed
+
+In practice, this turns a 30-second round-trip into a 1-second feedback loop. For complex contracts with multiple failure modes, that compounds quickly.
+
+Simulate everything. It costs nothing and saves you from the worst bugs.
+    `.trim(),
+  },
+  {
+    slug: "managing-accounts-and-keys-in-vscode",
+    title: "Account & Key Management Without the CLI",
+    excerpt:
+      "Managing Stellar accounts across testnet, futurenet, and mainnet used to mean memorizing CLI flags. Stellar Suite's Manage panel changes that.",
+    date: "2025-02-20",
+    category: "Tutorials",
+    tags: ["accounts", "keys", "manage", "workflow"],
+    readingTime: "5 min read",
+    author: { name: "Stellar Suite Team" },
+    content: `
+## The Old Way
+
+\`\`\`bash
+stellar keys generate alice
+stellar keys address alice
+stellar network add testnet --rpc-url https://soroban-testnet.stellar.org ...
+stellar contract invoke --network testnet --source alice ...
+\`\`\`
+
+Nothing wrong with any of that — but doing it dozens of times a day across multiple projects adds friction.
+
+## The Stellar Suite Manage Panel
+
+The Manage tab in the Stellar Suite sidebar gives you a visual interface for everything account-related:
+
+### Creating and Funding Accounts
+
+Click **New Account**, give it an alias (e.g. \`alice\`), and optionally auto-fund it via Friendbot on testnet. The keypair is generated locally and stored in VS Code's secret storage — encrypted, never in plaintext on disk.
+
+### Switching Networks
+
+A dropdown at the top of the panel lets you switch between testnet, futurenet, and mainnet in one click. The active network propagates to all other Stellar Suite actions automatically.
+
+### Custom RPC Endpoints
+
+If you're running a local Quickstart node or a private RPC, add it under **Network Config**:
+
+\`\`\`
+Name: local-quickstart
+RPC URL: http://localhost:8000/soroban/rpc
+Network Passphrase: Standalone Network ; February 2017
+\`\`\`
+
+### Invoking Deployed Contracts
+
+Once you have a contract deployed and an account set up, the **Invoke** panel lets you call any exported function through a generated form — no ABI file needed, the extension reads your compiled WASM.
+
+## Security Notes
+
+Keys are stored using VS Code's \`SecretStorage\` API, which maps to the OS keychain (Keychain on macOS, libsecret on Linux, Credential Manager on Windows). They are never written to disk in plaintext and never leave your machine.
+
+For mainnet keys, we recommend hardware wallet support — which is on our roadmap.
+    `.trim(),
+  },
+];
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+export function getAllPosts(): Post[] {
+  return [...ALL_POSTS].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+  );
+}
+
+export function getPostBySlug(slug: string): Post | undefined {
+  return ALL_POSTS.find((p) => p.slug === slug);
+}
+
+export function getAllCategories(): string[] {
+  return Array.from(new Set(ALL_POSTS.map((p) => p.category)));
+}
+
+export function getAllTags(): string[] {
+  return Array.from(new Set(ALL_POSTS.flatMap((p) => p.tags)));
+}
+
+export function getPostsByCategory(category: string): Post[] {
+  return getAllPosts().filter((p) => p.category === category);
+}
+
+export function getPostsByTag(tag: string): Post[] {
+  return getAllPosts().filter((p) => p.tags.includes(tag));
+}
+
+export function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}