From 776341e5a79d364e9d8f021ba268adfdd51ede72 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Wed, 25 Mar 2026 17:13:52 +0000
Subject: [PATCH 01/10] Add first section of migrate page

---
 apps/site/package.json                        |   1 +
 apps/site/src/app/layout.tsx                  |   2 +-
 apps/site/src/app/migrate/page.tsx            | 126 ++++++++++
 .../site/src/components/migrate/hero-code.tsx | 190 +++++++++++++++
 apps/site/src/lib/shiki_prisma.ts             | 227 ++++++++++++++++++
 packages/eclipse/src/components/button.tsx    |   2 +-
 pnpm-lock.yaml                                |  47 ++--
 7 files changed, 571 insertions(+), 24 deletions(-)
 create mode 100644 apps/site/src/app/migrate/page.tsx
 create mode 100644 apps/site/src/components/migrate/hero-code.tsx
 create mode 100644 apps/site/src/lib/shiki_prisma.ts
diff --git a/apps/site/package.json b/apps/site/package.json
index c9d6de8357..aae5a2e4d9 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -28,6 +28,7 @@
     "remark-directive": "catalog:",
     "tailwind-merge": "catalog:",
     "three": "^0.183.2",
+    "shiki": "3.22.0",
     "zod": "catalog:"
   },
   "devDependencies": {
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
index 516c4a97f7..694d6776f4 100644
--- a/apps/site/src/app/layout.tsx
+++ b/apps/site/src/app/layout.tsx
@@ -151,7 +151,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <Script src={WebFA} crossOrigin="anonymous" />
       </head>
       <body className="flex flex-col min-h-screen pt-24 relative">
-        <div className="bg-blog absolute inset-0 -z-1 overflow-hidden" />
+        <div className="bg-background-default absolute inset-0 -z-1 overflow-hidden" />
         <Provider>
           <ThemeProvider defaultTheme="system" storageKey="theme">
             <WebNavigation
diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
new file mode 100644
index 0000000000..5b4e9c5ba9
--- /dev/null
+++ b/apps/site/src/app/migrate/page.tsx
@@ -0,0 +1,126 @@
+import type { Metadata } from "next";
+import {
+  SITE_HOME_DESCRIPTION,
+  SITE_HOME_TITLE,
+} from "../../lib/blog-metadata";
+import { Button } from "@prisma/eclipse";
+import HeroCode, { HeroCodeStep } from "@/components/migrate/hero-code";
+
+export const metadata: Metadata = {
+  title: SITE_HOME_TITLE,
+  description: SITE_HOME_DESCRIPTION,
+};
+
+const migrateSteps: HeroCodeStep[] = [
+  {
+    title: "Creating a new model",
+    migrateFileName: "init/20210211160000_init/migration.sql",
+    schema: `model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}`.trim(),
+    migrateFileContents: `-- CreateTable
+CREATE TABLE "User" (
+  "id" SERIAL NOT NULL,
+  "email" TEXT NOT NULL,
+  "name" TEXT,
+
+  PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User.email_unique" IN "User"("email");`.trim(),
+    arrowOffset: {
+      x: -60,
+      y: 0,
+      rotation: 0,
+    },
+  },
+  {
+    title: "Adding a model",
+    migrateFileName: "init/20210325160100_add_post/migration.sql",
+    schema: `
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
++  posts Post[]
+}
++
++model Post {
++  id        Int      @id @default(autoincrement())
++  created   DateTime @default(now())
++  title     String   @db.VarChar(70)
++  content   String
++  author    User?    @relation(fields: [authorId], references: [id])
++  authorId  Int
++}`.trim(),
+    migrateFileContents: `
+-- CreateTable
+CREATE TABLE "Post" (
+  "id" SERIAL NOT NULL,
+  "created" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  "title" VARCHAR(70) NOT NULL,
+  "content" TEXT NOT NULL,
+  "authorId" INTEGER NOT NULL,
+  PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Post" ADD FOREIGN KEY ("authorId") REFERENCES
+"User"("id") ON DELETE CASCADE ON UPDATE CASCADE;`.trim(),
+    arrowOffset: {
+      x: 190,
+      y: -20,
+      rotation: -70,
+    },
+  },
+];
+
+export default function Migrate() {
+  return (
+    <main className="flex-1 w-screen bg-background-default">
+      <div className="hero relative w-full -mt-33 pt-45 block pb-12 flex flex-col gap-8">
+        <div className="bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] absolute inset-0 z-0 overflow-hidden opacity-20" />
+        <div className="flex flex-col gap-4 relative z-1">
+          <h5 className="stretch-display font-sans-display mx-auto w-fit my-0 text-background-orm-reverse uppercase">
+            Prisma Migrate
+          </h5>
+          <h1 className="stretch-display text-6xl font-bold text-center font-sans-display z-2 relative">
+            Hassle-free
+            <br />
+            Database Migrations
+          </h1>
+        </div>
+        <p className="max-w-200 w-full mx-auto text-center relative z-1">
+          Prisma Migrate uses Prisma schema changes to automatically generate
+          fully customizable database schema migrations
+        </p>
+        <div className="flex gap-4 mx-auto relative z-1">
+          <Button
+            variant="orm"
+            size="3xl"
+            href="/docs/getting-started/setup-prisma/start-from-scratch/relational-databases-typescript-postgresql"
+          >
+            <span>Install Prisma</span>
+          </Button>
+          <Button
+            variant="default-stronger"
+            size="3xl"
+            href="https://playground.prisma.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span>Playground</span>
+          </Button>
+        </div>
+      </div>
+      <div className="px-4">
+        <div className="max-w-[1200px] mx-auto">
+          <HeroCode steps={migrateSteps} />
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/site/src/components/migrate/hero-code.tsx b/apps/site/src/components/migrate/hero-code.tsx
new file mode 100644
index 0000000000..fc21ffc2fc
--- /dev/null
+++ b/apps/site/src/components/migrate/hero-code.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Button, Card, CardHeader, CodeBlock } from "@prisma/eclipse";
+import { cn } from "@/lib/cn";
+import { prisma_highlighter as getHighlighter } from "@/lib/shiki_prisma";
+
+export interface HeroCodeStep {
+  title: string;
+  schema: string;
+  migrateFileName: string;
+  migrateFileContents: string;
+  arrowOffset: {
+    x: number;
+    y: number;
+    rotation: number;
+  };
+}
+
+interface HeroCodeProps {
+  steps: HeroCodeStep[];
+}
+
+const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
+  const [activeStep, setActiveStep] = useState(0);
+  const [highlightedSchema, setHighlightedSchema] = useState<string>("");
+  const [highlightedMigration, setHighlightedMigration] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load highlighted code when activeStep changes
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadHighlightedCode = async () => {
+      setIsLoading(true);
+      try {
+        const highlighter = await getHighlighter();
+        const [schemaHtml, migrationHtml] = await Promise.all([
+          highlighter.codeToHtml(steps[activeStep].schema, {
+            lang: "prisma",
+            theme: "prisma-dark",
+          }),
+          highlighter.codeToHtml(steps[activeStep].migrateFileContents, {
+            lang: "sql",
+            theme: "prisma-dark",
+          }),
+        ]);
+
+        if (isMounted) {
+          setHighlightedSchema(schemaHtml);
+          setHighlightedMigration(migrationHtml);
+          setIsLoading(false);
+        }
+      } catch (error) {
+        console.error("Failed to highlight code:", error);
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadHighlightedCode();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [activeStep, steps]);
+
+  // cycle across steps and go back to if we're at the end
+  const cycleActiveStep = () => {
+    activeStep === steps.length - 1
+      ? setActiveStep(0)
+      : setActiveStep(activeStep + 1);
+  };
+
+  return (
+    <div className="inline-flex w-full relative items-start justify-center flex-col mt-22.5 gap-12.75 lg:gap-0 lg:flex-row">
+      {/* First Code Card - schema.prisma */}
+      <Card
+        className={cn(
+          // Base styles
+          "flex-1 relative max-w-full w-full transition-[margin-right] duration-300 ease-in-out z-2 bg-background-default gap-0!",
+          // Desktop styles
+          "lg:mt-15.5 lg:z-0 lg:max-w-[calc(50%-8px)]",
+          // Open card state
+          activeStep !== 0 && "lg:max-w-[calc(50%-8px+124px)] lg:-mr-31 lg:z-0",
+        )}
+      >
+        {/* Card Header */}
+        <CardHeader className="flex justify-between flex-row! items-center">
+          <span className="mb-0 text-foreground-neutral-weak text-xs font-bold">
+            schema.prisma
+          </span>
+          <Button
+            variant="default"
+            size="lg"
+            onClick={() => cycleActiveStep()}
+            className={cn(
+              "w-fit transition-all delay-300 duration-300",
+              activeStep !== 0 && "lg:mr-31",
+            )}
+            disabled={isLoading}
+          >
+            {steps[activeStep].title}
+          </Button>
+        </CardHeader>
+        <CodeBlock
+          keepBackground={true}
+          className="border-none [&_pre]:bg-transparent my-0!"
+        >
+          {isLoading ? (
+            <div className="p-4 text-center text-gray-400">Loading...</div>
+          ) : (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: highlightedSchema,
+              }}
+            />
+          )}
+        </CodeBlock>
+      </Card>
+
+      {/* Second Code Card - Migration file */}
+      <Card
+        className={cn(
+          // Base styles
+          "flex-1 relative max-w-full w-full border border-transparent transition-[margin-right] duration-300 ease-in-out z-2 bg-[linear-gradient(180deg,#7F9CF5_0%,#4A5B8F_100%)] gap-0!",
+          // After pseudo-element (gradient background)
+          "after:content-[''] after:bg-background-default after:absolute after:z-1 after:inset-0.25 after:rounded-square",
+          // Desktop styles
+          "lg:mt-0 lg:z-0 lg:max-w-[calc(50%-8px)]",
+        )}
+      >
+        {/* Card Header */}
+        <CardHeader className="flex justify-between flex-row! items-center relative z-2">
+          <span className="mb-0 text-foreground-neutral text-xs font-bold">
+            {steps[activeStep].migrateFileName}
+          </span>
+        </CardHeader>
+        <CodeBlock
+          keepBackground={true}
+          className="border-none [&_pre]:bg-transparent relative z-2 my-0!"
+        >
+          {isLoading ? (
+            <div className="p-4 text-center text-gray-400">Loading...</div>
+          ) : (
+            <div
+              dangerouslySetInnerHTML={{
+                __html: highlightedMigration,
+              }}
+            />
+          )}
+        </CodeBlock>
+      </Card>
+
+      {/* Arrow SVG */}
+      <svg
+        width="102"
+        height="81"
+        viewBox="0 0 102 81"
+        fill="none"
+        className="absolute bottom-[56%] z-1 left-[40%] lg:left-[46%] lg:block lg:z-100 lg:bottom-0"
+        style={{
+          transform: `translate(${steps[activeStep].arrowOffset.x}px, ${steps[activeStep].arrowOffset.y}px) rotate(${steps[activeStep].arrowOffset.rotation}deg)`,
+        }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.81326 1.15614C3.34721 0.154705 2.15757 -0.279308 1.15614 0.186743C0.154705 0.652795 -0.279308 1.84243 0.186743 2.84386L3.81326 1.15614ZM101.414 67.4142C102.195 66.6332 102.195 65.3668 101.414 64.5858L88.6863 51.8579C87.9052 51.0768 86.6389 51.0768 85.8579 51.8579C85.0768 52.6389 85.0768 53.9052 85.8579 54.6863L97.1716 66L85.8579 77.3137C85.0768 78.0948 85.0768 79.3611 85.8579 80.1421C86.6389 80.9232 87.9052 80.9232 88.6863 80.1421L101.414 67.4142ZM0.186743 2.84386C10.2779 24.5274 44.3226 68 100 68V64C46.5328 64 13.5785 22.1393 3.81326 1.15614L0.186743 2.84386Z"
+          fill="url(#paint0_linear_4084_6375)"
+        />
+        <defs>
+          <linearGradient
+            id="paint0_linear_4084_6375"
+            x1="51"
+            y1="2"
+            x2="51"
+            y2="66"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#0A141A" />
+            <stop offset="1" stopColor="#5A67D8" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default HeroCode;
diff --git a/apps/site/src/lib/shiki_prisma.ts b/apps/site/src/lib/shiki_prisma.ts
new file mode 100644
index 0000000000..7f93e844e2
--- /dev/null
+++ b/apps/site/src/lib/shiki_prisma.ts
@@ -0,0 +1,227 @@
+import { createHighlighter, type ThemeRegistration } from "shiki";
+
+const prismaTheme: ThemeRegistration = {
+  name: "prisma-dark",
+  type: "dark",
+  colors: {
+    "editor.background": "transparent",
+    "editor.foreground": "var(--color-foreground-neutral-weak)",
+  },
+  settings: [
+    {
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: {
+        foreground: "var(--color-disabled)",
+      },
+    },
+    {
+      scope: [
+        "variable",
+        "variable.other.readwrite",
+        "variable.other.object",
+        "variable.other.property",
+        "support.variable",
+      ],
+      settings: {
+        foreground: "var(--color-foreground-neutral-weak)",
+      },
+    },
+    {
+      scope: [
+        "variable.other.constant",
+        "variable.language.this",
+        "variable.language.super",
+      ],
+      settings: {
+        foreground: "var(--color-background-ppg-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "keyword",
+        "keyword.control",
+        "keyword.operator.new",
+        "keyword.control.import",
+        "keyword.control.export",
+        "keyword.control.from",
+        "keyword.control.default",
+        "keyword.control.as",
+        "keyword.control.async",
+        "keyword.control.await",
+        "storage.type",
+        "storage.modifier",
+        "storage.type.function",
+        "storage.type.class",
+        "storage.type.const",
+        "storage.type.let",
+        "storage.type.var",
+      ],
+      settings: {
+        foreground: "var(--color-background-orm-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "meta.function-call",
+        "support.function",
+        "entity.name.method",
+      ],
+      settings: {
+        foreground: "var(--color-background-ppg-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "entity.name.type",
+        "entity.name.class",
+        "support.type",
+        "support.class",
+        "meta.import variable.other.readwrite",
+        "meta.export variable.other.readwrite",
+      ],
+      settings: {
+        foreground: "var(--color-background-orm-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "string",
+        "string.quoted.single",
+        "string.quoted.double",
+        "string.template",
+        "punctuation.definition.string.begin",
+        "punctuation.definition.string.end",
+      ],
+      settings: {
+        foreground: "var(--color-background-ppg-reverse-strong)",
+      },
+    },
+    {
+      scope: ["constant.numeric", "constant.language", "constant.character"],
+      settings: {
+        foreground: "var(--color-background-warning-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "constant.language.boolean",
+        "constant.language.null",
+        "constant.language.undefined",
+      ],
+      settings: {
+        foreground: "var(--color-background-orm-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "keyword.operator",
+        "keyword.operator.arithmetic",
+        "keyword.operator.assignment",
+        "keyword.operator.comparison",
+        "keyword.operator.logical",
+      ],
+      settings: {
+        foreground: "var(--color-background-orm-reverse-strong)",
+      },
+    },
+    {
+      scope: ["keyword.operator.type", "keyword.operator.expression"],
+      settings: {
+        foreground: "var(--color-background-orm-reverse-strong)",
+      },
+    },
+    {
+      scope: [
+        "punctuation.accessor",
+        "punctuation.separator",
+        "punctuation.terminator",
+        "punctuation.definition.block",
+        "punctuation.definition.parameters",
+        "punctuation.definition.arguments",
+        "meta.brace.round",
+        "meta.brace.square",
+        "meta.brace.curly",
+      ],
+      settings: {
+        foreground: "var(--color-foreground-neutral-weak)",
+      },
+    },
+    {
+      scope: ["entity.name.tag", "punctuation.definition.tag"],
+      settings: {
+        foreground: "var(--color-foreground-neutral-weak)",
+      },
+    },
+    {
+      scope: ["entity.other.attribute-name"],
+      settings: {
+        foreground: "var(--color-background-ppg-reverse-strong)",
+      },
+    },
+    {
+      scope: ["meta.tag.attributes string.quoted"],
+      settings: {
+        foreground: "#96E072",
+      },
+    },
+    {
+      scope: [
+        "punctuation.definition.template-expression",
+        "punctuation.section.embedded",
+      ],
+      settings: {
+        foreground: "var(--color-foreground-neutral-weak)",
+      },
+    },
+    {
+      scope: ["meta.template.expression"],
+      settings: {
+        foreground: "#D5CED9",
+      },
+    },
+    {
+      scope: ["support.type.primitive", "support.type.builtin"],
+      settings: {
+        foreground: "#7cb7ff",
+      },
+    },
+    {
+      scope: ["variable.parameter", "meta.parameters variable"],
+      settings: {
+        foreground: "var(--color-background-warning-reverse-strong)",
+      },
+    },
+    {
+      scope: ["invalid", "invalid.illegal"],
+      settings: {
+        foreground: "#FC644D",
+      },
+    },
+  ],
+};
+
+let prisma_highlighter: Awaited<ReturnType<typeof createHighlighter>> | null =
+  null;
+
+async function getHighlighter() {
+  if (!prisma_highlighter) {
+    prisma_highlighter = await createHighlighter({
+      themes: [prismaTheme],
+      langs: [
+        "typescript",
+        "javascript",
+        "jsx",
+        "tsx",
+        "json",
+        "bash",
+        "sh",
+        "prisma",
+        "sql",
+      ],
+    });
+  }
+  return prisma_highlighter;
+}
+
+export { getHighlighter as prisma_highlighter };
diff --git a/packages/eclipse/src/components/button.tsx b/packages/eclipse/src/components/button.tsx
index 256477d76d..602e8ab09b 100644
--- a/packages/eclipse/src/components/button.tsx
+++ b/packages/eclipse/src/components/button.tsx
@@ -25,7 +25,7 @@ const buttonVariants = cva(
         lg: "px-2 h-element-lg type-text-sm-strong",
         xl: "px-3 h-element-xl type-text-sm-strong",
         "2xl": "px-3  h-element-2xl type-text-sm-strong",
-        "3xl": "px-4 h-element-3xl type-text-sm-strong",
+        "3xl": "px-3  h-element-3xl type-text-sm-strong",
         "4xl": "px-4  h-element-4xl type-heading-md",
       },
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 15820794ab..b2eb2c3023 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -239,7 +239,7 @@ importers:
         version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fumadocs/base-ui':
         specifier: 'catalog:'
-        version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
+        version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
       '@fumadocs/cli':
         specifier: 'catalog:'
         version: 1.2.5
@@ -257,16 +257,16 @@ importers:
         version: 2.8.6
       fumadocs-core:
         specifier: 'catalog:'
-        version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
+        version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       fumadocs-mdx:
         specifier: 'catalog:'
-        version: 14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+        version: 14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       fumadocs-openapi:
         specifier: 'catalog:'
-        version: 10.3.17(56148167186b01c0207d3a9885729be6)
+        version: 10.3.17(ff7c26fb9bd0f817b1e9fef28d46a492)
       fumadocs-ui:
         specifier: 'catalog:'
-        version: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
+        version: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
       lucide-react:
         specifier: 'catalog:'
         version: 0.575.0(react@19.2.4)
@@ -336,7 +336,7 @@ importers:
         version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fumadocs/base-ui':
         specifier: 'catalog:'
-        version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
+        version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
       '@fumadocs/cli':
         specifier: 'catalog:'
         version: 1.2.5
@@ -372,16 +372,16 @@ importers:
         version: 4.2.0(@types/react@19.2.14)(dexie@4.3.0)(react@19.2.4)
       fumadocs-core:
         specifier: 'catalog:'
-        version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
+        version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       fumadocs-mdx:
         specifier: 'catalog:'
-        version: 14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+        version: 14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       fumadocs-openapi:
         specifier: 'catalog:'
-        version: 10.3.17(56148167186b01c0207d3a9885729be6)
+        version: 10.3.17(ff7c26fb9bd0f817b1e9fef28d46a492)
       fumadocs-ui:
         specifier: 'catalog:'
-        version: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
+        version: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
       jotai:
         specifier: 'catalog:'
         version: 2.18.0(@babel/core@7.29.0)(@babel/template@7.28.6)(@types/react@19.2.14)(react@19.2.4)
@@ -496,7 +496,7 @@ importers:
         version: 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fumadocs/base-ui':
         specifier: 'catalog:'
-        version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
+        version: 16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)
       '@fumadocs/cli':
         specifier: 'catalog:'
         version: 1.2.5
@@ -511,13 +511,13 @@ importers:
         version: 0.7.1
       fumadocs-core:
         specifier: 'catalog:'
-        version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
+        version: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       fumadocs-mdx:
         specifier: 'catalog:'
-        version: 14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
+        version: 14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)
       fumadocs-ui:
         specifier: 'catalog:'
-        version: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
+        version: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
       lucide-react:
         specifier: 'catalog:'
         version: 0.575.0(react@19.2.4)
@@ -630,6 +630,9 @@ importers:
       remark-directive:
         specifier: 'catalog:'
         version: 4.0.0
+      shiki:
+        specifier: 3.22.0
+        version: 3.22.0
       tailwind-merge:
         specifier: 'catalog:'
         version: 3.5.0
@@ -6621,12 +6624,12 @@ snapshots:
       '@formatjs/fast-memoize': 3.1.0
       tslib: 2.8.1
 
-  '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)':
+  '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)':
     dependencies:
       '@base-ui/react': 1.2.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       '@fumadocs/tailwind': 0.0.2(tailwindcss@4.2.1)
       class-variance-authority: 0.7.1
-      fumadocs-core: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
+      fumadocs-core: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       lucide-react: 0.570.0(react@19.2.4)
       motion: 12.35.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-themes: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -9339,7 +9342,7 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6):
+  fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6):
     dependencies:
       '@formatjs/intl-localematcher': 0.8.1
       '@orama/orama': 3.1.18
@@ -9379,14 +9382,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-mdx@14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
+  fumadocs-mdx@14.2.9(@types/mdast@4.0.4)(@types/mdx@2.0.13)(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(mdast-util-directive@3.1.0)(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4):
     dependencies:
       '@mdx-js/mdx': 3.1.1
       '@standard-schema/spec': 1.1.0
       chokidar: 5.0.0
       esbuild: 0.27.3
       estree-util-value-to-estree: 3.5.0
-      fumadocs-core: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
+      fumadocs-core: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
       js-yaml: 4.1.1
       mdast-util-mdx: 3.0.0
       mdast-util-to-markdown: 2.1.2
@@ -9409,7 +9412,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-openapi@10.3.17(56148167186b01c0207d3a9885729be6):
+  fumadocs-openapi@10.3.17(ff7c26fb9bd0f817b1e9fef28d46a492):
     dependencies:
       '@fumari/json-schema-ts': 0.0.2
       '@fumari/stf': 1.0.3(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -9422,8 +9425,8 @@ snapshots:
       ajv: 8.18.0
       class-variance-authority: 0.7.1
       dereference-json-schema: 0.2.1
-      fumadocs-core: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
-      fumadocs-ui: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
+      fumadocs-core: 16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6)
+      fumadocs-ui: '@fumadocs/base-ui@16.6.3(@types/react@19.2.14)(fumadocs-core@16.6.3(@mdx-js/mdx@3.1.1)(@mixedbread/sdk@0.46.0)(@types/estree-jsx@1.0.5)(@types/hast@3.0.4)(@types/mdast@4.0.4)(@types/react@19.2.14)(lucide-react@0.575.0(react@19.2.4))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(zod@4.3.6))(next@16.1.6(@babel/core@7.29.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.58.2)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(tailwindcss@4.2.1)'
       github-slugger: 2.0.0
       hast-util-to-jsx-runtime: 2.3.6
       js-yaml: 4.1.1

From c0e08e91d7f567471aade63adc4bb5ebef101225 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Wed, 25 Mar 2026 17:59:49 +0000
Subject: [PATCH 02/10] Add migrate page

---
 apps/site/src/app/global.css                  |  13 +
 apps/site/src/app/migrate/page.tsx            | 249 +++++++++++++++++-
 .../site/src/components/migrate/hero-code.tsx |  22 +-
 apps/site/src/lib/shiki_prisma.ts             |  19 ++
 4 files changed, 296 insertions(+), 7 deletions(-)

diff --git a/apps/site/src/app/global.css b/apps/site/src/app/global.css
index 799fd38d4c..dd10ce2e7a 100644
--- a/apps/site/src/app/global.css
+++ b/apps/site/src/app/global.css
@@ -56,6 +56,13 @@ body {
         transform: translateY(0%);
     }
 }
+.newsletter-bg {
+    background: linear-gradient(
+        59deg,
+        color-mix(in srgb, var(--color-foreground-ppg) 30%, transparent) 6.53%,
+        var(--color-background-default) 74.71%
+    );
+}
 
 @keyframes glitch-1 {
     0% {
@@ -192,3 +199,9 @@ body {
 .running {
     animation-play-state: running;
 }
+
+.diff-add {
+    background: var(--color-background-orm);
+    width: 100%;
+    display: inline-block;
+}
diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
index 5b4e9c5ba9..a453196766 100644
--- a/apps/site/src/app/migrate/page.tsx
+++ b/apps/site/src/app/migrate/page.tsx
@@ -3,7 +3,7 @@ import {
   SITE_HOME_DESCRIPTION,
   SITE_HOME_TITLE,
 } from "../../lib/blog-metadata";
-import { Button } from "@prisma/eclipse";
+import { Action, Button, Card } from "@prisma/eclipse";
 import HeroCode, { HeroCodeStep } from "@/components/migrate/hero-code";
 
 export const metadata: Metadata = {
@@ -81,7 +81,7 @@ ALTER TABLE "Post" ADD FOREIGN KEY ("authorId") REFERENCES
 export default function Migrate() {
   return (
     <main className="flex-1 w-screen bg-background-default">
-      <div className="hero relative w-full -mt-33 pt-45 block pb-12 flex flex-col gap-8">
+      <div className="hero relative w-full -mt-33 pt-45 pb-8 flex flex-col gap-8">
         <div className="bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] absolute inset-0 z-0 overflow-hidden opacity-20" />
         <div className="flex flex-col gap-4 relative z-1">
           <h5 className="stretch-display font-sans-display mx-auto w-fit my-0 text-background-orm-reverse uppercase">
@@ -116,11 +116,252 @@ export default function Migrate() {
           </Button>
         </div>
       </div>
-      <div className="px-4">
-        <div className="max-w-[1200px] mx-auto">
+      <div className="px-4 mb-12">
+        <div className="max-w-[1200px] mx-auto pb-12">
           <HeroCode steps={migrateSteps} />
         </div>
       </div>
+      <div className="px-4 my-12">
+        <div className="max-w-[1200px] mx-auto py-8">
+          <div className="grid md:grid-cols-3 gap-8">
+            <Card className="bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)]">
+              <div className="flex gap-2 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-file-binary" />
+                </Action>
+                <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
+                  Auto-generated
+                </h4>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                Migrations are automatically generated so you don't have to
+                write the SQL by hand.
+              </p>
+            </Card>
+            <Card className="bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)]">
+              <div className="flex gap-2 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-file-binary" />
+                </Action>
+                <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
+                  Deterministic/ Repeatable
+                </h4>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                Migrate generates SQL migrations, ensuring migrations will
+                always result in the same database schema across environments.
+              </p>
+            </Card>
+            <Card className="bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)]">
+              <div className="flex gap-2 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-file-binary" />
+                </Action>
+                <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
+                  Customizable
+                </h4>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                Generated SQL migrations can be fully customized giving you full
+                control over the exact changes.
+              </p>
+            </Card>
+          </div>
+        </div>
+      </div>
+      <div className="px-4 my-12">
+        <div className="max-w-[1200px] mx-auto py-8">
+          <div className="grid md:grid-cols-2 gap-18">
+            <div>
+              <h5 className="stretch-display font-sans-display w-fit my-0 text-background-orm-reverse uppercase">
+                Iteration
+              </h5>
+              <h3 className="text-[48px] text-foreground-neutral font-bold mt-4 mb-8 leading-13">
+                Fast in development
+              </h3>
+              <ul className="list-none space-y-6">
+                <li className="flex gap-4">
+                  <i className="fa-solid fa-circle-check text-background-orm-reverse text-2xl shrink-0 mt-1" />
+                  <div>
+                    <h4 className="text-2xl mb-3 text-foreground-neutral font-bold">
+                      Prototype fast without migrations
+                    </h4>
+                    <p className="text-base text-foreground-neutral-weak">
+                      While prototyping you can create the database schema
+                      quickly using the prisma db push command without creating
+                      migrations.
+                    </p>
+                  </div>
+                </li>
+
+                <li className="flex gap-4">
+                  <i className="fa-solid fa-circle-check text-background-orm-reverse text-2xl shrink-0 mt-1" />
+                  <div>
+                    <h4 className="text-2xl mb-3 text-foreground-neutral font-bold">
+                      Integrated seeding
+                    </h4>
+                    <p className="text-base text-foreground-neutral-weak">
+                      Quickly seed your database with data by defining a seed
+                      script in JavaScript, TypeScript or Shell.
+                    </p>
+                  </div>
+                </li>
+                <li className="flex gap-4">
+                  <i className="fa-solid fa-circle-check text-background-orm-reverse text-2xl shrink-0 mt-1" />
+                  <div>
+                    <h4 className="text-2xl mb-3 text-foreground-neutral font-bold">
+                      Smart problem resolution
+                    </h4>
+                    <p className="text-base text-foreground-neutral-weak">
+                      Migrate detects database schema drift and assists you in
+                      resolving them.
+                    </p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+            <div>
+              <h5 className="stretch-display font-sans-display w-fit my-0 text-background-orm-reverse uppercase">
+                Deployment
+              </h5>
+              <h3 className="text-[48px] text-foreground-neutral font-bold mt-4 mb-8 leading-13">
+                Reliable in Production
+              </h3>
+              <ul className="list-none space-y-6">
+                <li className="flex gap-4">
+                  <i className="fa-solid fa-circle-check text-background-orm-reverse text-2xl shrink-0 mt-1" />
+                  <div>
+                    <h4 className="text-2xl mb-3 text-foreground-neutral font-bold">
+                      Dedicated production workflows
+                    </h4>
+                    <p className="text-base text-foreground-neutral-weak">
+                      Migrate supports dedicated workflows for carrying out
+                      migrations safely in production.
+                    </p>
+                  </div>
+                </li>
+                <li className="flex gap-4">
+                  <i className="fa-solid fa-circle-check text-background-orm-reverse text-2xl shrink-0 mt-1" />
+                  <div>
+                    <h4 className="text-2xl mb-3 text-foreground-neutral font-bold">
+                      CI/CD Integration
+                    </h4>
+                    <p className="text-base text-foreground-neutral-weak">
+                      Migrate can be integrated into CI/CD pipelines, e.g.
+                      GitHub Actions, to automate applying migrations before
+                      deployment.
+                    </p>
+                  </div>
+                </li>
+                <li className="flex gap-4">
+                  <i className="fa-solid fa-circle-check text-background-orm-reverse text-2xl shrink-0 mt-1" />
+                  <div>
+                    <h4 className="text-2xl mb-3 text-foreground-neutral font-bold">
+                      Conflict detection and resolution
+                    </h4>
+                    <p className="text-base text-foreground-neutral-weak">
+                      Migrate keeps track of applied migrations and provides
+                      tools to detect and resolve conflicts and drifts between
+                      migrations and the database schema.
+                    </p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="px-4 my-12">
+        <div className="max-w-[1200px] mx-auto py-8">
+          <div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-6 gap-6">
+            {/* Card 1 */}
+            <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-3">
+              <div className="flex gap-4 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-terminal" />
+                </Action>
+                <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
+                  Seamless integration with Prisma Client
+                </h3>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                When using Prisma Migrate with Prisma Client, schema changes are
+                type checked in your application code. This eliminates errors
+                that arise when database schema changes require changes to the
+                application code.
+              </p>
+            </Card>
+
+            {/* Card 2 */}
+            <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-3">
+              <div className="flex gap-4 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-messages" />
+                </Action>
+                <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
+                  Declarative data modelling
+                </h3>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                Prisma Migrate generates migrations based on changes in the
+                Prisma schema – a human-readable declarative definition of your
+                database schema. This allows you to focus on your desired
+                database schema rather than the steps to get there.
+              </p>
+            </Card>
+
+            {/* Card 3 */}
+            <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-2">
+              <div className="flex gap-4 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-code-branch" />
+                </Action>
+                <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
+                  Version control for your database
+                </h3>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                With Prisma Migrate, generated migrations are tracked in your
+                Git repository, allowing you to make changes to your database
+                schema in tandem with your application code.
+              </p>
+            </Card>
+
+            {/* Card 4 */}
+            <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-2">
+              <div className="flex gap-4 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-users" />
+                </Action>
+                <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
+                  Streamlined collaboration
+                </h3>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                With Prisma Migrate, generated migrations are tracked in your
+                Git repository, allowing you to make changes to your database
+                schema in tandem with your application code.
+              </p>
+            </Card>
+
+            {/* Card 5 */}
+            <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-2">
+              <div className="flex gap-4 items-center">
+                <Action color="orm" size="4xl">
+                  <i className="fa-regular fa-hand-pointer" />
+                </Action>
+                <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
+                  Bring your own project
+                </h3>
+              </div>
+              <p className="text-foreground-neutral-weak">
+                Prisma Migrate can be adopted in any existing project that uses
+                PostgreSQL, MySQL, MariaDB, SQL Server, CockroachDB or SQLite.
+              </p>
+            </Card>
+          </div>
+        </div>
+      </div>
     </main>
   );
 }
diff --git a/apps/site/src/components/migrate/hero-code.tsx b/apps/site/src/components/migrate/hero-code.tsx
index fc21ffc2fc..bdb03dd456 100644
--- a/apps/site/src/components/migrate/hero-code.tsx
+++ b/apps/site/src/components/migrate/hero-code.tsx
@@ -35,6 +35,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
       setIsLoading(true);
       try {
         const highlighter = await getHighlighter();
+
         const [schemaHtml, migrationHtml] = await Promise.all([
           highlighter.codeToHtml(steps[activeStep].schema, {
             lang: "prisma",
@@ -46,8 +47,22 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
           }),
         ]);
 
+        // Post-process to add diff styling for lines starting with +
+        const processedSchemaHtml = schemaHtml.replace(
+          /<span class="line">([\s\S]*?)(<\/span>)/g,
+          (match, content, closing) => {
+            // Check if line starts with + (accounting for any leading spans)
+            const startsWithPlus =
+              /<span[^>]*>\+/.test(content) || content.trim().startsWith("+");
+            if (startsWithPlus) {
+              return `<span class="line diff-add">${content}${closing}`;
+            }
+            return match;
+          },
+        );
+
         if (isMounted) {
-          setHighlightedSchema(schemaHtml);
+          setHighlightedSchema(processedSchemaHtml);
           setHighlightedMigration(migrationHtml);
           setIsLoading(false);
         }
@@ -106,7 +121,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
         </CardHeader>
         <CodeBlock
           keepBackground={true}
-          className="border-none [&_pre]:bg-transparent my-0!"
+          className="border-none [&_pre]:bg-transparent my-0! [&_.diff-add]:text-background-success-reverse-strong"
         >
           {isLoading ? (
             <div className="p-4 text-center text-gray-400">Loading...</div>
@@ -124,7 +139,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
       <Card
         className={cn(
           // Base styles
-          "flex-1 relative max-w-full w-full border border-transparent transition-[margin-right] duration-300 ease-in-out z-2 bg-[linear-gradient(180deg,#7F9CF5_0%,#4A5B8F_100%)] gap-0!",
+          "flex-1 relative max-w-full w-full border border-transparent transition-[margin-right] duration-300 ease-in-out z-2 bg-[linear-gradient(180deg,var(--color-background-orm)_0%,var(--color-background-orm-strong)_100%)] gap-0!",
           // After pseudo-element (gradient background)
           "after:content-[''] after:bg-background-default after:absolute after:z-1 after:inset-0.25 after:rounded-square",
           // Desktop styles
@@ -138,6 +153,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
           </span>
         </CardHeader>
         <CodeBlock
+          data-line-numbers
           keepBackground={true}
           className="border-none [&_pre]:bg-transparent relative z-2 my-0!"
         >
diff --git a/apps/site/src/lib/shiki_prisma.ts b/apps/site/src/lib/shiki_prisma.ts
index 7f93e844e2..df422158d3 100644
--- a/apps/site/src/lib/shiki_prisma.ts
+++ b/apps/site/src/lib/shiki_prisma.ts
@@ -198,6 +198,24 @@ const prismaTheme: ThemeRegistration = {
         foreground: "#FC644D",
       },
     },
+    {
+      scope: ["markup.inserted", "markup.inserted.diff"],
+      settings: {
+        background: "var(--color-background-success-reverse-strong)",
+      },
+    },
+    {
+      scope: ["markup.deleted", "markup.deleted.diff"],
+      settings: {
+        background: "var(--color-background-error-reverse-strong)",
+      },
+    },
+    {
+      scope: ["meta.diff.header"],
+      settings: {
+        background: "var(--color-foreground-neutral-weak)",
+      },
+    },
   ],
 };
 
@@ -218,6 +236,7 @@ async function getHighlighter() {
         "sh",
         "prisma",
         "sql",
+        "diff",
       ],
     });
   }

From d44a681f413fcf5f9569c3a7fafc092169ef43b4 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Wed, 25 Mar 2026 18:04:08 +0000
Subject: [PATCH 03/10] Update icon size

---
 apps/site/src/app/migrate/page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
index a453196766..621320d88e 100644
--- a/apps/site/src/app/migrate/page.tsx
+++ b/apps/site/src/app/migrate/page.tsx
@@ -127,7 +127,7 @@ export default function Migrate() {
             <Card className="bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)]">
               <div className="flex gap-2 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-file-binary" />
+                  <i className="fa-regular fa-file-binary text-xl" />
                 </Action>
                 <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
                   Auto-generated
@@ -141,7 +141,7 @@ export default function Migrate() {
             <Card className="bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)]">
               <div className="flex gap-2 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-file-binary" />
+                  <i className="fa-regular fa-file-binary text-xl" />
                 </Action>
                 <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
                   Deterministic/ Repeatable
@@ -155,7 +155,7 @@ export default function Migrate() {
             <Card className="bg-[linear-gradient(180deg,var(--color-background-default)_0%,var(--color-background-orm)_262.5%)]">
               <div className="flex gap-2 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-file-binary" />
+                  <i className="fa-regular fa-file-binary text-xl" />
                 </Action>
                 <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
                   Customizable
@@ -278,7 +278,7 @@ export default function Migrate() {
             <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-3">
               <div className="flex gap-4 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-terminal" />
+                  <i className="fa-regular fa-terminal text-xl" />
                 </Action>
                 <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
                   Seamless integration with Prisma Client
@@ -296,7 +296,7 @@ export default function Migrate() {
             <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-3">
               <div className="flex gap-4 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-messages" />
+                  <i className="fa-regular fa-messages text-xl" />
                 </Action>
                 <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
                   Declarative data modelling
@@ -314,7 +314,7 @@ export default function Migrate() {
             <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-2">
               <div className="flex gap-4 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-code-branch" />
+                  <i className="fa-regular fa-code-branch text-xl" />
                 </Action>
                 <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
                   Version control for your database
@@ -331,7 +331,7 @@ export default function Migrate() {
             <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-2">
               <div className="flex gap-4 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-users" />
+                  <i className="fa-regular fa-users text-xl" />
                 </Action>
                 <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
                   Streamlined collaboration
@@ -348,7 +348,7 @@ export default function Migrate() {
             <Card className="bg-background-default justify-start md:col-span-2 lg:col-span-2">
               <div className="flex gap-4 items-center">
                 <Action color="orm" size="4xl">
-                  <i className="fa-regular fa-hand-pointer" />
+                  <i className="fa-regular fa-hand-pointer text-xl" />
                 </Action>
                 <h3 className="text-xl font-bold text-foreground-neutral font-sans-display">
                   Bring your own project

From 2330c4a267f35a479c73fdc27be6e5b61dd6db80 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Wed, 25 Mar 2026 18:08:13 +0000
Subject: [PATCH 04/10] Update copy button positioning

---
 apps/site/src/components/migrate/hero-code.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/site/src/components/migrate/hero-code.tsx b/apps/site/src/components/migrate/hero-code.tsx
index bdb03dd456..7c9d5d7071 100644
--- a/apps/site/src/components/migrate/hero-code.tsx
+++ b/apps/site/src/components/migrate/hero-code.tsx
@@ -111,7 +111,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
             size="lg"
             onClick={() => cycleActiveStep()}
             className={cn(
-              "w-fit transition-all delay-300 duration-300",
+              "w-fit transition-all duration-300",
               activeStep !== 0 && "lg:mr-31",
             )}
             disabled={isLoading}
@@ -121,7 +121,10 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
         </CardHeader>
         <CodeBlock
           keepBackground={true}
-          className="border-none [&_pre]:bg-transparent my-0! [&_.diff-add]:text-background-success-reverse-strong"
+          className={cn(
+            "border-none [&_pre]:bg-transparent my-0! [&_.diff-add]:text-background-success-reverse-strong [&>.absolute]:duration-300 [&>.absolute]:transition-all",
+            activeStep !== 0 && "[&>.absolute]:lg:mr-31",
+          )}
         >
           {isLoading ? (
             <div className="p-4 text-center text-gray-400">Loading...</div>

From 98db9b88b467e6afff135bb14350cf4c7576f050 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Wed, 25 Mar 2026 18:09:38 +0000
Subject: [PATCH 05/10] Update arrow color

---
 apps/site/src/components/migrate/hero-code.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/site/src/components/migrate/hero-code.tsx b/apps/site/src/components/migrate/hero-code.tsx
index 7c9d5d7071..953c35ce2a 100644
--- a/apps/site/src/components/migrate/hero-code.tsx
+++ b/apps/site/src/components/migrate/hero-code.tsx
@@ -197,8 +197,8 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
             y2="66"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stopColor="#0A141A" />
-            <stop offset="1" stopColor="#5A67D8" />
+            <stop stopColor="var(--color-background-orm)" />
+            <stop offset="1" stopColor="var(--color-background-orm-strong)" />
           </linearGradient>
         </defs>
       </svg>

From 414116f950988c2439ab137ad65089f120502c5a Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Wed, 25 Mar 2026 19:01:15 +0000
Subject: [PATCH 06/10] Update eyebrow color

---
 apps/site/src/app/migrate/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
index 621320d88e..41d8791f46 100644
--- a/apps/site/src/app/migrate/page.tsx
+++ b/apps/site/src/app/migrate/page.tsx
@@ -84,7 +84,7 @@ export default function Migrate() {
       <div className="hero relative w-full -mt-33 pt-45 pb-8 flex flex-col gap-8">
         <div className="bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] absolute inset-0 z-0 overflow-hidden opacity-20" />
         <div className="flex flex-col gap-4 relative z-1">
-          <h5 className="stretch-display font-sans-display mx-auto w-fit my-0 text-background-orm-reverse uppercase">
+          <h5 className="stretch-display font-sans-display mx-auto w-fit my-0 text-foreground-orm-strong uppercase">
             Prisma Migrate
           </h5>
           <h1 className="stretch-display text-6xl font-bold text-center font-sans-display z-2 relative">

From 8fc5e8d5a73f15eef8d67b9e65e3f2c0a34d6698 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Mon, 30 Mar 2026 11:50:39 +0100
Subject: [PATCH 07/10] Update alignment and gap between code blocks

---
 apps/site/src/components/migrate/hero-code.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/site/src/components/migrate/hero-code.tsx b/apps/site/src/components/migrate/hero-code.tsx
index 953c35ce2a..3e171a315c 100644
--- a/apps/site/src/components/migrate/hero-code.tsx
+++ b/apps/site/src/components/migrate/hero-code.tsx
@@ -89,7 +89,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
   };
 
   return (
-    <div className="inline-flex w-full relative items-start justify-center flex-col mt-22.5 gap-12.75 lg:gap-0 lg:flex-row">
+    <div className="inline-flex w-full relative items-start justify-center flex-col mt-22.5 gap-12.75 lg:gap-4 lg:flex-row">
       {/* First Code Card - schema.prisma */}
       <Card
         className={cn(
@@ -112,7 +112,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
             onClick={() => cycleActiveStep()}
             className={cn(
               "w-fit transition-all duration-300",
-              activeStep !== 0 && "lg:mr-31",
+              activeStep !== 0 && "lg:mr-26",
             )}
             disabled={isLoading}
           >
@@ -123,7 +123,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
           keepBackground={true}
           className={cn(
             "border-none [&_pre]:bg-transparent my-0! [&_.diff-add]:text-background-success-reverse-strong [&>.absolute]:duration-300 [&>.absolute]:transition-all",
-            activeStep !== 0 && "[&>.absolute]:lg:mr-31",
+            activeStep !== 0 && "[&>.absolute]:lg:mr-23",
           )}
         >
           {isLoading ? (

From 2e7bb071c2cba8073cfafbb560d03f6713535f76 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Mon, 30 Mar 2026 11:53:44 +0100
Subject: [PATCH 08/10] comment code for playground button

---
 apps/site/src/app/migrate/page.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
index 41d8791f46..2341ecbc67 100644
--- a/apps/site/src/app/migrate/page.tsx
+++ b/apps/site/src/app/migrate/page.tsx
@@ -105,7 +105,7 @@ export default function Migrate() {
           >
             <span>Install Prisma</span>
           </Button>
-          <Button
+          {/*<Button
             variant="default-stronger"
             size="3xl"
             href="https://playground.prisma.io/"
@@ -113,7 +113,7 @@ export default function Migrate() {
             rel="noopener noreferrer"
           >
             <span>Playground</span>
-          </Button>
+          </Button>*/}
         </div>
       </div>
       <div className="px-4 mb-12">

From 6288f4a66d893d0f2a3d4169d12bf68fc350dbd3 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Mon, 30 Mar 2026 11:54:05 +0100
Subject: [PATCH 09/10] Fix typo

---
 apps/site/src/app/migrate/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
index 2341ecbc67..19401ee736 100644
--- a/apps/site/src/app/migrate/page.tsx
+++ b/apps/site/src/app/migrate/page.tsx
@@ -144,7 +144,7 @@ export default function Migrate() {
                   <i className="fa-regular fa-file-binary text-xl" />
                 </Action>
                 <h4 className="text-xl text-foreground-neutral font-sans-display font-extrabold">
-                  Deterministic/ Repeatable
+                  Deterministic / Repeatable
                 </h4>
               </div>
               <p className="text-foreground-neutral-weak">

From 9cd2cab6d5bec7b944922e3b8a506a0e0bb62915 Mon Sep 17 00:00:00 2001
From: Carla Goncalves <goncalves@prisma.io>
Date: Mon, 30 Mar 2026 16:37:04 +0100
Subject: [PATCH 10/10] guard

---
 .../site/src/components/migrate/hero-code.tsx | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/site/src/components/migrate/hero-code.tsx b/apps/site/src/components/migrate/hero-code.tsx
index 3e171a315c..39e52f1800 100644
--- a/apps/site/src/components/migrate/hero-code.tsx
+++ b/apps/site/src/components/migrate/hero-code.tsx
@@ -27,6 +27,25 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
   const [highlightedMigration, setHighlightedMigration] = useState<string>("");
   const [isLoading, setIsLoading] = useState(true);
 
+  // Guard: Return early if steps array is empty
+  if (!steps || steps.length === 0) {
+    return (
+      <div className="inline-flex w-full relative items-start justify-center flex-col mt-22.5 gap-12.75 lg:gap-4 lg:flex-row">
+        <Card className="flex-1 relative max-w-full w-full bg-background-default gap-0!">
+          <CardHeader>
+            <span className="mb-0 text-foreground-neutral-weak text-xs font-bold">
+              No steps available
+            </span>
+          </CardHeader>
+        </Card>
+      </div>
+    );
+  }
+
+  // Clamp activeStep to valid range
+  const safeActiveStep = Math.min(activeStep, steps.length - 1);
+  const currentStep = steps[safeActiveStep];
+
   // Load highlighted code when activeStep changes
   useEffect(() => {
     let isMounted = true;
@@ -37,11 +56,11 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
         const highlighter = await getHighlighter();
 
         const [schemaHtml, migrationHtml] = await Promise.all([
-          highlighter.codeToHtml(steps[activeStep].schema, {
+          highlighter.codeToHtml(currentStep?.schema || "", {
             lang: "prisma",
             theme: "prisma-dark",
           }),
-          highlighter.codeToHtml(steps[activeStep].migrateFileContents, {
+          highlighter.codeToHtml(currentStep?.migrateFileContents || "", {
             lang: "sql",
             theme: "prisma-dark",
           }),
@@ -79,10 +98,11 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
     return () => {
       isMounted = false;
     };
-  }, [activeStep, steps]);
+  }, [activeStep, steps, currentStep]);
 
   // cycle across steps and go back to if we're at the end
   const cycleActiveStep = () => {
+    if (steps.length === 0) return;
     activeStep === steps.length - 1
       ? setActiveStep(0)
       : setActiveStep(activeStep + 1);
@@ -116,7 +136,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
             )}
             disabled={isLoading}
           >
-            {steps[activeStep].title}
+            {currentStep?.title || "No title"}
           </Button>
         </CardHeader>
         <CodeBlock
@@ -152,7 +172,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
         {/* Card Header */}
         <CardHeader className="flex justify-between flex-row! items-center relative z-2">
           <span className="mb-0 text-foreground-neutral text-xs font-bold">
-            {steps[activeStep].migrateFileName}
+            {currentStep?.migrateFileName || "migration.sql"}
           </span>
         </CardHeader>
         <CodeBlock
@@ -180,7 +200,7 @@ const HeroCode: React.FC<HeroCodeProps> = ({ steps }) => {
         fill="none"
         className="absolute bottom-[56%] z-1 left-[40%] lg:left-[46%] lg:block lg:z-100 lg:bottom-0"
         style={{
-          transform: `translate(${steps[activeStep].arrowOffset.x}px, ${steps[activeStep].arrowOffset.y}px) rotate(${steps[activeStep].arrowOffset.rotation}deg)`,
+          transform: `translate(${currentStep?.arrowOffset?.x || 0}px, ${currentStep?.arrowOffset?.y || 0}px) rotate(${currentStep?.arrowOffset?.rotation || 0}deg)`,
         }}
         xmlns="http://www.w3.org/2000/svg"
       >
