diff --git a/apps/site/content/changelog/2024-12-19.mdx b/apps/site/content/changelog/2024-12-19.mdx
index 6be7f17802c..0b31d840271 100644
--- a/apps/site/content/changelog/2024-12-19.mdx
+++ b/apps/site/content/changelog/2024-12-19.mdx
@@ -1,6 +1,7 @@
---
title: "Prisma ORM v6.1.0: tracing is now stable"
date: "2024-12-19"
+category: "orm"
version: "v6.1.0"
slug: "2024-12-19"
headline: "Prisma ORM v6.1.0: tracing is now stable"
diff --git a/apps/site/content/changelog/2025-01-09.mdx b/apps/site/content/changelog/2025-01-09.mdx
index 9dd75d66fc1..50caa20d1e4 100644
--- a/apps/site/content/changelog/2025-01-09.mdx
+++ b/apps/site/content/changelog/2025-01-09.mdx
@@ -1,6 +1,7 @@
---
title: "Prisma ORM v6.2.0: omit API is now GA"
date: "2025-01-09"
+category: "orm"
version: "v6.2.0"
slug: "2025-01-09"
headline: "Prisma ORM v6.2.0: omit API is now GA"
diff --git a/apps/site/content/changelog/2025-01-30.mdx b/apps/site/content/changelog/2025-01-30.mdx
index 2b020fb4250..c804cfff4b5 100644
--- a/apps/site/content/changelog/2025-01-30.mdx
+++ b/apps/site/content/changelog/2025-01-30.mdx
@@ -1,6 +1,7 @@
---
title: "Prisma ORM v6.3.0: Prisma Studio returns to Console"
date: "2025-01-30"
+category: "orm"
version: "v6.3.0"
slug: "2025-01-30"
headline: "Prisma ORM v6.3.0: Prisma Studio returns to Console"
diff --git a/apps/site/content/changelog/2025-02-20.mdx b/apps/site/content/changelog/2025-02-20.mdx
index 99cd97908fe..a5afa6cbba8 100644
--- a/apps/site/content/changelog/2025-02-20.mdx
+++ b/apps/site/content/changelog/2025-02-20.mdx
@@ -1,6 +1,7 @@
---
title: "Prisma ORM v6.4.0: Prisma Postgres is GA"
date: "2025-02-20"
+category: "orm"
version: "v6.4.0"
slug: "2025-02-20"
headline: "Prisma ORM v6.4.0: Prisma Postgres is GA"
diff --git a/apps/site/content/changelog/2026-06-11.mdx b/apps/site/content/changelog/2026-06-11.mdx
index c07cfe2258f..5485ba431c2 100644
--- a/apps/site/content/changelog/2026-06-11.mdx
+++ b/apps/site/content/changelog/2026-06-11.mdx
@@ -1,6 +1,7 @@
---
title: "Deploy TypeScript apps next to Prisma Postgres: Prisma Compute is now in Public Beta"
date: "2026-06-11"
+highlight: true
version: "2026-06-11"
slug: "2026-06-11"
headline: "Deploy TypeScript apps next to Prisma Postgres: Prisma Compute is now in Public Beta"
diff --git a/apps/site/content/changelog/2026-07-03.mdx b/apps/site/content/changelog/2026-07-03.mdx
index ce133047c24..b53eec6cb93 100644
--- a/apps/site/content/changelog/2026-07-03.mdx
+++ b/apps/site/content/changelog/2026-07-03.mdx
@@ -1,6 +1,7 @@
---
title: "Set up Prisma 8 with new guides and debug failed Prisma Compute builds"
date: "2026-07-03"
+category: "compute"
version: "2026-07-03"
slug: "2026-07-03"
headline: "Set up Prisma 8 with new guides and debug failed Prisma Compute builds"
diff --git a/apps/site/content/changelog/2026-07-24.mdx b/apps/site/content/changelog/2026-07-24.mdx
index 44d0b9d0d79..7a7c97b3116 100644
--- a/apps/site/content/changelog/2026-07-24.mdx
+++ b/apps/site/content/changelog/2026-07-24.mdx
@@ -1,6 +1,8 @@
---
title: "Store files with Object Store buckets and see your workspace at a glance"
date: "2026-07-24"
+category: "postgres"
+highlight: true
version: "2026-07-24"
slug: "2026-07-24"
headline: "Store files with Object Store buckets and see your workspace at a glance"
diff --git a/apps/site/content/changelog/2026-08-28.mdx b/apps/site/content/changelog/2026-08-28.mdx
index b06da5b2a56..0b83ec5d52d 100644
--- a/apps/site/content/changelog/2026-08-28.mdx
+++ b/apps/site/content/changelog/2026-08-28.mdx
@@ -1,6 +1,7 @@
---
title: "Prisma Compute is now generally available"
date: "2026-08-28"
+highlight: true
version: "2026-08-28"
slug: "2026-08-28"
headline: "Prisma Compute is now generally available"
diff --git a/apps/site/public/brand/robot-nod.png b/apps/site/public/brand/robot-nod.png
new file mode 100644
index 00000000000..4002e993c7f
Binary files /dev/null and b/apps/site/public/brand/robot-nod.png differ
diff --git a/apps/site/public/brand/robot-nod.webp b/apps/site/public/brand/robot-nod.webp
new file mode 100644
index 00000000000..38aea6c43bc
Binary files /dev/null and b/apps/site/public/brand/robot-nod.webp differ
diff --git a/apps/site/public/customers/stories/amplication.png b/apps/site/public/customers/stories/amplication.png
deleted file mode 100644
index 6303acbb86c..00000000000
Binary files a/apps/site/public/customers/stories/amplication.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/bucket.png b/apps/site/public/customers/stories/bucket.png
deleted file mode 100644
index da77b1c09f9..00000000000
Binary files a/apps/site/public/customers/stories/bucket.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/elsevierstory.svg b/apps/site/public/customers/stories/elsevierstory.svg
deleted file mode 100644
index fe396ff0a2d..00000000000
--- a/apps/site/public/customers/stories/elsevierstory.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/site/public/customers/stories/formbricks.svg b/apps/site/public/customers/stories/formbricks.svg
deleted file mode 100644
index bb00eaf4bd3..00000000000
--- a/apps/site/public/customers/stories/formbricks.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/site/public/customers/stories/grover.png b/apps/site/public/customers/stories/grover.png
deleted file mode 100644
index 8cb2b0f1b50..00000000000
Binary files a/apps/site/public/customers/stories/grover.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/invisible.png b/apps/site/public/customers/stories/invisible.png
deleted file mode 100644
index cd45fe65cd9..00000000000
Binary files a/apps/site/public/customers/stories/invisible.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/iopool.png b/apps/site/public/customers/stories/iopool.png
deleted file mode 100644
index b1fceec474f..00000000000
Binary files a/apps/site/public/customers/stories/iopool.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/panther.png b/apps/site/public/customers/stories/panther.png
deleted file mode 100644
index 92d3d781fa1..00000000000
Binary files a/apps/site/public/customers/stories/panther.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/pearly.png b/apps/site/public/customers/stories/pearly.png
deleted file mode 100644
index 67fe5cb037d..00000000000
Binary files a/apps/site/public/customers/stories/pearly.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/poppy.png b/apps/site/public/customers/stories/poppy.png
deleted file mode 100644
index 0e7a4c93563..00000000000
Binary files a/apps/site/public/customers/stories/poppy.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/rapha.png b/apps/site/public/customers/stories/rapha.png
deleted file mode 100644
index d59162a53af..00000000000
Binary files a/apps/site/public/customers/stories/rapha.png and /dev/null differ
diff --git a/apps/site/public/customers/stories/solin.svg b/apps/site/public/customers/stories/solin.svg
deleted file mode 100644
index 1dd80e852c9..00000000000
--- a/apps/site/public/customers/stories/solin.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/site/public/customers/stories/tryg.png b/apps/site/public/customers/stories/tryg.png
deleted file mode 100644
index cf254c8523c..00000000000
Binary files a/apps/site/public/customers/stories/tryg.png and /dev/null differ
diff --git a/apps/site/public/logos/customers/agvolution.svg b/apps/site/public/logos/customers/agvolution.svg
new file mode 100644
index 00000000000..3c38511c849
--- /dev/null
+++ b/apps/site/public/logos/customers/agvolution.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/amplication-white.png b/apps/site/public/logos/customers/amplication-white.png
new file mode 100644
index 00000000000..119ea4c4f56
Binary files /dev/null and b/apps/site/public/logos/customers/amplication-white.png differ
diff --git a/apps/site/public/logos/customers/antstack.svg b/apps/site/public/logos/customers/antstack.svg
new file mode 100644
index 00000000000..4368f426060
--- /dev/null
+++ b/apps/site/public/logos/customers/antstack.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/apideck.svg b/apps/site/public/logos/customers/apideck.svg
new file mode 100644
index 00000000000..8ede46ca0e2
--- /dev/null
+++ b/apps/site/public/logos/customers/apideck.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/avenue.svg b/apps/site/public/logos/customers/avenue.svg
new file mode 100644
index 00000000000..ebb8c487a62
--- /dev/null
+++ b/apps/site/public/logos/customers/avenue.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/cal.svg b/apps/site/public/logos/customers/cal.svg
new file mode 100644
index 00000000000..5f9e0512846
--- /dev/null
+++ b/apps/site/public/logos/customers/cal.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/cargon.svg b/apps/site/public/logos/customers/cargon.svg
new file mode 100644
index 00000000000..41fd2d267dd
--- /dev/null
+++ b/apps/site/public/logos/customers/cargon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/caribou.png b/apps/site/public/logos/customers/caribou.png
new file mode 100644
index 00000000000..6204617ffbb
Binary files /dev/null and b/apps/site/public/logos/customers/caribou.png differ
diff --git a/apps/site/public/logos/customers/coinrotator.png b/apps/site/public/logos/customers/coinrotator.png
new file mode 100644
index 00000000000..2827e045059
Binary files /dev/null and b/apps/site/public/logos/customers/coinrotator.png differ
diff --git a/apps/site/public/logos/customers/digitalspeed.svg b/apps/site/public/logos/customers/digitalspeed.svg
new file mode 100644
index 00000000000..4162b616a0e
--- /dev/null
+++ b/apps/site/public/logos/customers/digitalspeed.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/dotworld.webp b/apps/site/public/logos/customers/dotworld.webp
new file mode 100644
index 00000000000..07d478e850f
Binary files /dev/null and b/apps/site/public/logos/customers/dotworld.webp differ
diff --git a/apps/site/public/logos/customers/elsevier.svg b/apps/site/public/logos/customers/elsevier.svg
new file mode 100644
index 00000000000..39518e78297
--- /dev/null
+++ b/apps/site/public/logos/customers/elsevier.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/escape.svg b/apps/site/public/logos/customers/escape.svg
new file mode 100644
index 00000000000..b9850c5a73a
--- /dev/null
+++ b/apps/site/public/logos/customers/escape.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/everify.svg b/apps/site/public/logos/customers/everify.svg
new file mode 100644
index 00000000000..db35ec88e4f
--- /dev/null
+++ b/apps/site/public/logos/customers/everify.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/expandbymonroe.svg b/apps/site/public/logos/customers/expandbymonroe.svg
new file mode 100644
index 00000000000..2c4136078e7
--- /dev/null
+++ b/apps/site/public/logos/customers/expandbymonroe.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/feather.svg b/apps/site/public/logos/customers/feather.svg
new file mode 100644
index 00000000000..e5389c9de3d
--- /dev/null
+++ b/apps/site/public/logos/customers/feather.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/flux.svg b/apps/site/public/logos/customers/flux.svg
new file mode 100644
index 00000000000..9f5a724d13e
--- /dev/null
+++ b/apps/site/public/logos/customers/flux.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/flycode.svg b/apps/site/public/logos/customers/flycode.svg
new file mode 100644
index 00000000000..fc5a929f38f
--- /dev/null
+++ b/apps/site/public/logos/customers/flycode.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/formbricks-white.png b/apps/site/public/logos/customers/formbricks-white.png
new file mode 100644
index 00000000000..fa294abcbaa
Binary files /dev/null and b/apps/site/public/logos/customers/formbricks-white.png differ
diff --git a/apps/site/public/logos/customers/gamma.svg b/apps/site/public/logos/customers/gamma.svg
new file mode 100644
index 00000000000..afe8dbd5a59
--- /dev/null
+++ b/apps/site/public/logos/customers/gamma.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/garages-near-me.svg b/apps/site/public/logos/customers/garages-near-me.svg
new file mode 100644
index 00000000000..2265d0784b6
--- /dev/null
+++ b/apps/site/public/logos/customers/garages-near-me.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/grover.svg b/apps/site/public/logos/customers/grover.svg
new file mode 100644
index 00000000000..b063ea26365
--- /dev/null
+++ b/apps/site/public/logos/customers/grover.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/ihi.svg b/apps/site/public/logos/customers/ihi.svg
new file mode 100644
index 00000000000..b233cae9774
--- /dev/null
+++ b/apps/site/public/logos/customers/ihi.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/insta.svg b/apps/site/public/logos/customers/insta.svg
new file mode 100644
index 00000000000..26c6b95d57a
--- /dev/null
+++ b/apps/site/public/logos/customers/insta.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/instatus.png b/apps/site/public/logos/customers/instatus.png
new file mode 100644
index 00000000000..0441d6e4787
Binary files /dev/null and b/apps/site/public/logos/customers/instatus.png differ
diff --git a/apps/site/public/logos/customers/invisible.svg b/apps/site/public/logos/customers/invisible.svg
new file mode 100644
index 00000000000..654507f4f5c
--- /dev/null
+++ b/apps/site/public/logos/customers/invisible.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/iopool-white.png b/apps/site/public/logos/customers/iopool-white.png
new file mode 100644
index 00000000000..9fb84bcc294
Binary files /dev/null and b/apps/site/public/logos/customers/iopool-white.png differ
diff --git a/apps/site/public/logos/customers/jelly.png b/apps/site/public/logos/customers/jelly.png
new file mode 100644
index 00000000000..f96a95a8352
Binary files /dev/null and b/apps/site/public/logos/customers/jelly.png differ
diff --git a/apps/site/public/logos/customers/krisenchat.svg b/apps/site/public/logos/customers/krisenchat.svg
new file mode 100644
index 00000000000..ebaee385f1a
--- /dev/null
+++ b/apps/site/public/logos/customers/krisenchat.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/memberstack.svg b/apps/site/public/logos/customers/memberstack.svg
new file mode 100644
index 00000000000..d3d0f52179c
--- /dev/null
+++ b/apps/site/public/logos/customers/memberstack.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/motionbox.svg b/apps/site/public/logos/customers/motionbox.svg
new file mode 100644
index 00000000000..cf0e9c4e6e3
--- /dev/null
+++ b/apps/site/public/logos/customers/motionbox.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/nachonacho.svg b/apps/site/public/logos/customers/nachonacho.svg
new file mode 100644
index 00000000000..9b064bef58c
--- /dev/null
+++ b/apps/site/public/logos/customers/nachonacho.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/nuna.png b/apps/site/public/logos/customers/nuna.png
new file mode 100644
index 00000000000..8441077fc6f
Binary files /dev/null and b/apps/site/public/logos/customers/nuna.png differ
diff --git a/apps/site/public/logos/customers/outrider.svg b/apps/site/public/logos/customers/outrider.svg
new file mode 100644
index 00000000000..6c30ee1c58e
--- /dev/null
+++ b/apps/site/public/logos/customers/outrider.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/oxio.svg b/apps/site/public/logos/customers/oxio.svg
new file mode 100644
index 00000000000..0056897ab98
--- /dev/null
+++ b/apps/site/public/logos/customers/oxio.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/panther.svg b/apps/site/public/logos/customers/panther.svg
new file mode 100644
index 00000000000..d7b3f768588
--- /dev/null
+++ b/apps/site/public/logos/customers/panther.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/pearly-white.webp b/apps/site/public/logos/customers/pearly-white.webp
new file mode 100644
index 00000000000..ec4a73f669f
Binary files /dev/null and b/apps/site/public/logos/customers/pearly-white.webp differ
diff --git a/apps/site/public/logos/customers/pmt.svg b/apps/site/public/logos/customers/pmt.svg
new file mode 100644
index 00000000000..a11bd02f3d8
--- /dev/null
+++ b/apps/site/public/logos/customers/pmt.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/poppy-white.png b/apps/site/public/logos/customers/poppy-white.png
new file mode 100644
index 00000000000..b041e4cbd35
Binary files /dev/null and b/apps/site/public/logos/customers/poppy-white.png differ
diff --git a/apps/site/public/logos/customers/poppy.svg b/apps/site/public/logos/customers/poppy.svg
new file mode 100644
index 00000000000..edc91674a53
--- /dev/null
+++ b/apps/site/public/logos/customers/poppy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/prevalentware.png b/apps/site/public/logos/customers/prevalentware.png
new file mode 100644
index 00000000000..6d6ab0b9943
Binary files /dev/null and b/apps/site/public/logos/customers/prevalentware.png differ
diff --git a/apps/site/public/logos/customers/prosperity.svg b/apps/site/public/logos/customers/prosperity.svg
new file mode 100644
index 00000000000..0fb25a7d5cd
--- /dev/null
+++ b/apps/site/public/logos/customers/prosperity.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/questmate.png b/apps/site/public/logos/customers/questmate.png
new file mode 100644
index 00000000000..e3c824f2552
Binary files /dev/null and b/apps/site/public/logos/customers/questmate.png differ
diff --git a/apps/site/public/logos/customers/rapha.svg b/apps/site/public/logos/customers/rapha.svg
new file mode 100644
index 00000000000..f97a013d9ed
--- /dev/null
+++ b/apps/site/public/logos/customers/rapha.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/reflag-white.png b/apps/site/public/logos/customers/reflag-white.png
new file mode 100644
index 00000000000..84fd1bbd32c
Binary files /dev/null and b/apps/site/public/logos/customers/reflag-white.png differ
diff --git a/apps/site/public/logos/customers/revere.svg b/apps/site/public/logos/customers/revere.svg
new file mode 100644
index 00000000000..544ced03213
--- /dev/null
+++ b/apps/site/public/logos/customers/revere.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/solin-white.png b/apps/site/public/logos/customers/solin-white.png
new file mode 100644
index 00000000000..e0982bd8acb
Binary files /dev/null and b/apps/site/public/logos/customers/solin-white.png differ
diff --git a/apps/site/public/logos/customers/southpole.svg b/apps/site/public/logos/customers/southpole.svg
new file mode 100644
index 00000000000..59659d85247
--- /dev/null
+++ b/apps/site/public/logos/customers/southpole.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/stellate.svg b/apps/site/public/logos/customers/stellate.svg
new file mode 100644
index 00000000000..5b5ebf1181a
--- /dev/null
+++ b/apps/site/public/logos/customers/stellate.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/stonegiantstudio.svg b/apps/site/public/logos/customers/stonegiantstudio.svg
new file mode 100644
index 00000000000..21dd5ea2b3c
--- /dev/null
+++ b/apps/site/public/logos/customers/stonegiantstudio.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/sunhat.svg b/apps/site/public/logos/customers/sunhat.svg
new file mode 100644
index 00000000000..6f4004fb2df
--- /dev/null
+++ b/apps/site/public/logos/customers/sunhat.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/superblog.png b/apps/site/public/logos/customers/superblog.png
new file mode 100644
index 00000000000..c1d3eac0ba6
Binary files /dev/null and b/apps/site/public/logos/customers/superblog.png differ
diff --git a/apps/site/public/logos/customers/tabya.svg b/apps/site/public/logos/customers/tabya.svg
new file mode 100644
index 00000000000..23897afecf1
--- /dev/null
+++ b/apps/site/public/logos/customers/tabya.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/timenavi.svg b/apps/site/public/logos/customers/timenavi.svg
new file mode 100644
index 00000000000..82b88228b8a
--- /dev/null
+++ b/apps/site/public/logos/customers/timenavi.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/trunk.svg b/apps/site/public/logos/customers/trunk.svg
new file mode 100644
index 00000000000..d8e0b129ea4
--- /dev/null
+++ b/apps/site/public/logos/customers/trunk.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/tryg-white.svg b/apps/site/public/logos/customers/tryg-white.svg
new file mode 100644
index 00000000000..d0ae8086d3a
--- /dev/null
+++ b/apps/site/public/logos/customers/tryg-white.svg
@@ -0,0 +1,3 @@
+
diff --git a/apps/site/public/logos/customers/tryg.svg b/apps/site/public/logos/customers/tryg.svg
new file mode 100644
index 00000000000..5f7405c788d
--- /dev/null
+++ b/apps/site/public/logos/customers/tryg.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/wasp.svg b/apps/site/public/logos/customers/wasp.svg
new file mode 100644
index 00000000000..f46972df239
--- /dev/null
+++ b/apps/site/public/logos/customers/wasp.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/public/logos/customers/wefindflats.png b/apps/site/public/logos/customers/wefindflats.png
new file mode 100644
index 00000000000..a3882fb2f5b
Binary files /dev/null and b/apps/site/public/logos/customers/wefindflats.png differ
diff --git a/apps/site/public/logos/customers/wingfield.svg b/apps/site/public/logos/customers/wingfield.svg
new file mode 100644
index 00000000000..1874abacc19
--- /dev/null
+++ b/apps/site/public/logos/customers/wingfield.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/apps/site/src/app/changelog/page.tsx b/apps/site/src/app/changelog/page.tsx
index d5979554a88..ca1be5fa80d 100644
--- a/apps/site/src/app/changelog/page.tsx
+++ b/apps/site/src/app/changelog/page.tsx
@@ -1,9 +1,8 @@
import { createPageMetadata } from "@/lib/page-metadata";
-import Link from "next/link";
-import { ArrowRight } from "@/components/icons/forma";
-import { RoleKicker } from "@/components/brand/role-kicker";
-import { Texture } from "@/components/brand/texture";
-import { extractPreview, formatChangelogDate, getChangelogEntries } from "@/lib/changelog";
+import { ChangelogFeed } from "@/components/sections/changelog-feed";
+import { ChangelogHero } from "@/components/sections/changelog-hero";
+import { CtaBurst } from "@/components/sections/cta-burst";
+import { getChangelogFeedEntries } from "@/lib/changelog";
export const metadata = createPageMetadata({
title: "Changelog",
@@ -13,87 +12,25 @@ export const metadata = createPageMetadata({
ogKicker: "Changelog",
});
-// Ported from the old site's /changelog (apps/site): same MDX entries, listed
-// newest first as a single timeline.
+// /changelog — the same MDX release notes as before (content/changelog, also
+// served machine-readable at /changelog.md), given the brand front door
+// (spectral hero), a product-area filter, and a colour-coded release timeline
+// you can scan without reading. The category, tags and highlight flag per
+// entry come from the entry's frontmatter via lib/changelog.ts.
export default function ChangelogPage() {
- const entries = getChangelogEntries();
+ const entries = getChangelogFeedEntries();
return (
<>
-
-
-
-
-
-
- Changelog
-
-
- What's new in Prisma
-
-
- New features, improvements, and fixes across Prisma ORM, Prisma Postgres, and the
- platform.
-
- )}
- {/* "Read more" on its own is a generic anchor: the visible
- label stays, the hidden half names the entry it opens. */}
-
- Read more
-
- : {entry.frontmatter.headline ?? entry.frontmatter.title}
-
-
-
-
- );
- })}
-
-
-
+
+
+
);
}
diff --git a/apps/site/src/app/customers/[slug]/page.tsx b/apps/site/src/app/customers/[slug]/page.tsx
new file mode 100644
index 00000000000..8ed18510d4e
--- /dev/null
+++ b/apps/site/src/app/customers/[slug]/page.tsx
@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { CustomerStory } from "@/components/sections/customer-story";
+import { CUSTOMER_STORY_DETAILS, getCustomerStory } from "@/data/customer-stories";
+import { createPageMetadata } from "@/lib/page-metadata";
+
+type Props = {
+ params: Promise<{ slug: string }>;
+};
+
+export function generateStaticParams() {
+ return CUSTOMER_STORY_DETAILS.map((story) => ({ slug: story.slug }));
+}
+
+export async function generateMetadata({ params }: Props): Promise {
+ const { slug } = await params;
+ const story = getCustomerStory(slug);
+ if (!story) return {};
+
+ const metadata = createPageMetadata({
+ title: story.hero.title,
+ description: story.hero.lead,
+ path: `/customers/${slug}`,
+ ogKicker: "Customers",
+ });
+
+ return {
+ ...metadata,
+ openGraph: { ...metadata.openGraph, type: "article" },
+ };
+}
+
+// Long-form customer stories, built from the approved copy (Notion: "Customer
+// Story Detail Page", batches one and two). The index at /customers links here
+// for every story that has an entry in data/customer-stories.ts.
+export default async function CustomerStoryPage({ params }: Props) {
+ const { slug } = await params;
+ const story = getCustomerStory(slug);
+ if (!story) notFound();
+
+ return ;
+}
diff --git a/apps/site/src/app/customers/page.tsx b/apps/site/src/app/customers/page.tsx
index 5a540188a2c..05474408a6c 100644
--- a/apps/site/src/app/customers/page.tsx
+++ b/apps/site/src/app/customers/page.tsx
@@ -2,25 +2,71 @@ import { createPageMetadata } from "@/lib/page-metadata";
import { CtaBurst } from "@/components/sections/cta-burst";
import { CustomersGrid } from "@/components/sections/customers-grid";
import { CustomersHero } from "@/components/sections/customers-hero";
-import { TestimonialsReveal } from "@/components/sections/testimonials-reveal";
+import { LogoCloud } from "@/components/sections/logo-cloud";
+import { COMMUNITY_LOGOS } from "@/data/customers";
export const metadata = createPageMetadata({
title: "Customers",
description:
- "See how teams use Prisma ORM, Prisma Postgres, and Prisma Compute in production to ship faster, scale reliably, and improve developer workflows.",
+ "Real teams, real production stories. See how developers use Prisma to build, deploy, and scale without wrestling their backend at every step.",
path: "/customers",
ogKicker: "Customers",
});
-// Ported from the old site's /case-studies page (apps/site). The nav links
-// here as "Customers"; story content lives in src/lib/customers.ts.
+// /customers — the redesign of prisma.io/showcase, built from the approved
+// copy (Notion: Customers Index — Copy and Design, V1) with the section order
+// the copy gives, and the card/logo-band structure of the reference layout
+// André supplied. Layout notes and the rulings behind them:
+// .context/customers-index-layout.md.
+//
+// Four sections. The copy asks for logos twice, and the two moments are
+// deliberately different jobs: the hero band is twelve recognisable marks
+// answering "who", the marquee is all 44 community projects answering "how
+// many". If one ever has to go, it's the band — the marquee is the one the copy
+// gives an actual heading to.
+//
+// The closer is CtaBurst with a headline override and nothing else: /contact
+// already ships this block with these exact three checks, so the approved copy
+// needed no new component.
export default function CustomersPage() {
return (
<>
-
-
+ {/* 180s, not the default 45s. The track is 44 wide tiles (~8600px) against
+ the homepage's 21 square ones (~2400px), and the keyframe duration is
+ per-loop, so the default made this strip drift 3.5x faster than the
+ homepage's. 180s puts it at ~48px/s, a shade calmer than home. */}
+
+ Trusted by 500K+ developers globally
+
+ }
+ />
+
);
}
diff --git a/apps/site/src/app/globals.css b/apps/site/src/app/globals.css
index cc91b60a008..c19da0d5eab 100644
--- a/apps/site/src/app/globals.css
+++ b/apps/site/src/app/globals.css
@@ -757,8 +757,14 @@ h6 {
pointer-events: none;
}
+/* Direct parent for the button link variant, where the label span sits inside
+ the button itself. The `.group` form is for cards that wrap a link: there the
+ label is nested a level or two down, so the immediate-child selector would
+ only fire over the text column and not over the card's image. */
:hover > .spectrum-underline::after,
-:focus-visible > .spectrum-underline::after {
+:focus-visible > .spectrum-underline::after,
+.group:hover .spectrum-underline::after,
+.group:focus-visible .spectrum-underline::after {
opacity: 1;
animation: spectrum-slide 2.5s linear infinite;
}
@@ -766,7 +772,9 @@ h6 {
@media (prefers-reduced-motion: reduce) {
.spectrum-underline::after,
:hover > .spectrum-underline::after,
- :focus-visible > .spectrum-underline::after {
+ :focus-visible > .spectrum-underline::after,
+ .group:hover .spectrum-underline::after,
+ .group:focus-visible .spectrum-underline::after {
animation: none;
}
}
diff --git a/apps/site/src/app/stack/page.tsx b/apps/site/src/app/stack/page.tsx
index 5a4f7c95abd..ddba31b9efd 100644
--- a/apps/site/src/app/stack/page.tsx
+++ b/apps/site/src/app/stack/page.tsx
@@ -1,43 +1,41 @@
import { createPageMetadata } from "@/lib/page-metadata";
+import { PlatformHero } from "@/components/sections/platform-hero";
+import { PlatformCompare } from "@/components/sections/platform-compare";
+import { PlatformFlow } from "@/components/sections/platform-flow";
+import { PlatformProducts } from "@/components/sections/platform-products";
+import { PlatformOpen } from "@/components/sections/platform-open";
+import { AgentLoop } from "@/components/sections/agent-loop";
+import { TestimonialsReveal } from "@/components/sections/testimonials-reveal";
import { CtaBurst } from "@/components/sections/cta-burst";
-import { StackBento } from "@/components/sections/stack-bento";
-import { RoleKicker } from "@/components/brand/role-kicker";
-import { Texture } from "@/components/brand/texture";
export const metadata = createPageMetadata({
title: "The Prisma Stack | ORM, Postgres, and Compute for TypeScript",
+ // The approved SEO copy (scripts/seo-page-metadata.test.ts), kept across the
+ // page redesign.
description:
"ORM, Postgres, and Compute, one platform for your app and its database, with one shared context across your stack.",
path: "/stack",
ogKicker: "The Prisma Stack",
});
-// Interim /stack page: the header's "Explore the stack" link needs a real
-// destination. Reuses the homepage's StackBento until CF designs the full
-// stack page (the old site's /stack diagram stays on apps/site meanwhile).
+// Narrative order, per the client's structure note: what it is → how it works →
+// why it matters. Core value, then the system diagram, then the build/deploy/
+// debug path, then the products, then what you get and what stays replaceable,
+// then proof and the ask.
+// Section rhythm: the wrapped panels (hero, flow, closing CTA) break up the runs
+// of sections that sit on the page's own white.
export default function StackPage() {
return (
<>
-
-
-
-
-
-
- The Prisma stack
-
-
- One platform, from schema to production
-
-
- ORM, Postgres, and Compute work together natively, one shared context across your
- stack, one bill, and nothing to glue together.
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {/* the homepage's closing CTA, unchanged — same copy as the copy deck's
+ closing block, same cloud loop, same prismatic burst on the buttons */}
);
diff --git a/apps/site/src/app/use-cases/ai-agents/page.tsx b/apps/site/src/app/use-cases/ai-agents/page.tsx
new file mode 100644
index 00000000000..dd020c05270
--- /dev/null
+++ b/apps/site/src/app/use-cases/ai-agents/page.tsx
@@ -0,0 +1,17 @@
+import { aiAgentsUseCase } from "@/components/use-case/ai-agents/content";
+import { AiAgentsUseCasePage } from "@/components/use-case/ai-agents/ai-agents-page";
+import { createPageMetadata } from "@/lib/page-metadata";
+
+// The AI & Agents use case carries a different section set from the segment
+// use cases (saas-teams, startups, engineering-teams), so it has its own
+// composition rather than running through SegmentPage.
+export const metadata = createPageMetadata({
+ title: `Prisma for ${aiAgentsUseCase.meta.title}`,
+ description: aiAgentsUseCase.meta.description,
+ path: "/use-cases/ai-agents",
+ ogKicker: "Use cases",
+});
+
+export default function AiAgentsRoute() {
+ return ;
+}
diff --git a/apps/site/src/app/use-cases/engineering-teams/page.tsx b/apps/site/src/app/use-cases/engineering-teams/page.tsx
new file mode 100644
index 00000000000..6ba3eae2aff
--- /dev/null
+++ b/apps/site/src/app/use-cases/engineering-teams/page.tsx
@@ -0,0 +1,15 @@
+import { EngineeringIntroVisual } from "@/components/use-case/segment/abstractions/engineering-teams";
+import { engineeringTeamsUseCase } from "@/components/use-case/segment/content/engineering-teams";
+import { SegmentPage } from "@/components/use-case/segment/segment-page";
+import { createPageMetadata } from "@/lib/page-metadata";
+
+export const metadata = createPageMetadata({
+ title: `Prisma for ${engineeringTeamsUseCase.meta.title}`,
+ description: engineeringTeamsUseCase.meta.description,
+ path: "/use-cases/engineering-teams",
+ ogKicker: "Use cases",
+});
+
+export default function EngineeringTeamsRoute() {
+ return } />;
+}
diff --git a/apps/site/src/app/use-cases/saas-teams/page.tsx b/apps/site/src/app/use-cases/saas-teams/page.tsx
new file mode 100644
index 00000000000..2234b05ad48
--- /dev/null
+++ b/apps/site/src/app/use-cases/saas-teams/page.tsx
@@ -0,0 +1,15 @@
+import { SaasIntroVisual } from "@/components/use-case/segment/abstractions/saas-teams";
+import { saasTeamsUseCase } from "@/components/use-case/segment/content/saas-teams";
+import { SegmentPage } from "@/components/use-case/segment/segment-page";
+import { createPageMetadata } from "@/lib/page-metadata";
+
+export const metadata = createPageMetadata({
+ title: `Prisma for ${saasTeamsUseCase.meta.title}`,
+ description: saasTeamsUseCase.meta.description,
+ path: "/use-cases/saas-teams",
+ ogKicker: "Use cases",
+});
+
+export default function SaasTeamsRoute() {
+ return } />;
+}
diff --git a/apps/site/src/app/use-cases/startups/page.tsx b/apps/site/src/app/use-cases/startups/page.tsx
new file mode 100644
index 00000000000..19a3b5ca3b9
--- /dev/null
+++ b/apps/site/src/app/use-cases/startups/page.tsx
@@ -0,0 +1,15 @@
+import { StartupsIntroVisual } from "@/components/use-case/segment/abstractions/startups";
+import { startupsUseCase } from "@/components/use-case/segment/content/startups";
+import { SegmentPage } from "@/components/use-case/segment/segment-page";
+import { createPageMetadata } from "@/lib/page-metadata";
+
+export const metadata = createPageMetadata({
+ title: `Prisma for ${startupsUseCase.meta.title}`,
+ description: startupsUseCase.meta.description,
+ path: "/use-cases/startups",
+ ogKicker: "Use cases",
+});
+
+export default function StartupsRoute() {
+ return } />;
+}
diff --git a/apps/site/src/components/brand/agent-robot.tsx b/apps/site/src/components/brand/agent-robot.tsx
index dc6aae0ed75..382681a719a 100644
--- a/apps/site/src/components/brand/agent-robot.tsx
+++ b/apps/site/src/components/brand/agent-robot.tsx
@@ -6,21 +6,40 @@ import { cn } from "@/lib/utils";
// reading as a character and starts reading as wallpaper.
//
// The animated WebP looks around; the static PNG stands in under reduced motion.
-// The WebP is ~1.9 MB, so it must stay below the fold and lazily loaded.
-export function AgentRobot({ className }: { className?: string }) {
+// Both are lazily loaded and belong below the fold — `look` is ~1.9 MB.
+//
+// Source clips arrive on a white backdrop, not with an alpha channel. The
+// character is white chrome, so a colour key eats its own highlights — the
+// mattes here were cut per frame with macOS Vision's subject segmentation
+// instead. Sized to what they actually render at rather than to the source.
+const VARIANTS = {
+ /** Looks around. 324x298, 152 frames. */
+ look: { animated: "/brand/robot-look.webp", still: "/brand/robot.png" },
+ /** Nods, head dipping down. 288x265, 81 frames at 16fps. */
+ nod: { animated: "/brand/robot-nod.webp", still: "/brand/robot-nod.png" },
+} as const;
+
+export function AgentRobot({
+ className,
+ variant = "look",
+}: {
+ className?: string;
+ variant?: keyof typeof VARIANTS;
+}) {
const shared = "drop-shadow-[0_10px_16px_rgba(21,21,21,0.18)]";
+ const { animated, still } = VARIANTS[variant];
return (
<>
{/* eslint-disable-next-line @next/next/no-img-element */}
{/* eslint-disable-next-line @next/next/no-img-element */}
+
+ {/* prismatic halo, bled well past the rim */}
+
+
+ {/* the disc */}
+
+
+
+
+
+
+ {/* inner ring, so the disc has a floor for the character to stand on */}
+
+
+ {/* the comet on the rim. r=192 in a 400 box puts it on the disc's edge;
+ the dash spans 11% of the circle clockwise from 3 o'clock, so its
+ head lands at ~40° and the gradient runs that chord, cyan tail to
+ red head. */}
+
+
+ {/* the character, sized to the inner ring and nudged up so its mass —
+ not its bounding box — sits on the disc's optical centre */}
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/product/product-features.tsx b/apps/site/src/components/product/product-features.tsx
index 53509b379ab..e785b246d36 100644
--- a/apps/site/src/components/product/product-features.tsx
+++ b/apps/site/src/components/product/product-features.tsx
@@ -1,5 +1,6 @@
import { GlassPrismSpin } from "@/components/brand/glass-prism-spin";
import { LearnMore } from "@/components/brand/learn-more";
+import { PrismButtonOutline } from "@/components/brand/prism-button";
import { Texture } from "@/components/brand/texture";
import { Reveal } from "@/components/motion/reveal";
import { cn } from "@/lib/utils";
@@ -43,7 +44,33 @@ function centreLastPair(count: number, i: number) {
// (~2:3): the prism-tinted illustration block fills the card above the
// content, the feature's abstraction filling the block, inside the homepage
// stack's wrapped panel.
-export function ProductFeatures({ features }: Pick) {
+export function ProductFeatures({
+ features,
+ cta,
+ placeholderLabel = "[Feature abstraction]",
+ mediaHeight = "h-64",
+ frameIllustration = false,
+}: Pick & {
+ /** Closes the section where the copy carries one — use-case pages do, product pages don't. */
+ cta?: { label: string; href: string };
+ /** What the reserved illustration slots are waiting for, when there aren't any yet. */
+ placeholderLabel?: string;
+ /**
+ * Float each illustration in a rounded, bordered, shadowed surface over the
+ * ray photo, so hero-scale panels (which are otherwise flush) read as one
+ * consistent card per feature instead of some panels hitting the edges. Used
+ * by pages that reuse the full-bleed hero panels here (the AI-agents stack).
+ */
+ frameIllustration?: boolean;
+ /**
+ * Height of each card's illustration block. The default suits the three-up
+ * row the cards were proportioned for (~2:3 portrait). At two-up the cards
+ * are nearly twice as wide, so the same block leaves them landscape and
+ * squat — pages running four cards can grow it back toward portrait
+ * (André, 2026-08-13).
+ */
+ mediaHeight?: string;
+}) {
return (
@@ -108,7 +135,13 @@ export function ProductFeatures({ features }: Pick
{/* illustration and content split the card roughly in half */}
-
+
{Illustration ? (
-
+
) : (
@@ -125,8 +164,8 @@ export function ProductFeatures({ features }: Pick
-
diff --git a/apps/site/src/components/product/product-hero.tsx b/apps/site/src/components/product/product-hero.tsx
index b6e81dd1f58..7835553c97f 100644
--- a/apps/site/src/components/product/product-hero.tsx
+++ b/apps/site/src/components/product/product-hero.tsx
@@ -5,7 +5,7 @@ import { PrismRay } from "@/components/brand/prism-ray";
import { RoleKicker } from "@/components/brand/role-kicker";
import { Texture } from "@/components/brand/texture";
import { cn } from "@/lib/utils";
-import { PLATFORM_PRODUCT_ACCENTS } from "./icons";
+import { PLATFORM_PRODUCT_ACCENTS, type ProductAccentName } from "./icons";
import { PRODUCT_ILLUSTRATIONS } from "./illustrations";
import { ProductTour } from "./product-tour";
import type { ProductPageContent } from "./types";
@@ -43,8 +43,61 @@ export function ProductHero({
name,
accent,
hero,
-}: Pick) {
+ visual,
+ placeholderLabel = "[Product abstraction]",
+ benefitsPlacement = "below-cta",
+}: Pick & {
+ /**
+ * A Platform product's canonical accent, or a raw `bg-*` class for pages
+ * that aren't a product — use-case pages carry the same hero but must not
+ * claim a product identity in the kicker dot.
+ */
+ accent: ProductAccentName | `bg-${string}`;
+ /**
+ * A ready-made visual for the right column, rendered ahead of the tour /
+ * illustration / placeholder fallbacks. Use-case pages carry no product
+ * tour, so they pass an existing site abstraction here (e.g. the Console
+ * illustration) rather than reserving a labelled slot.
+ */
+ visual?: React.ReactNode;
+ /** What the reserved illustration slot is waiting for, when there isn't one yet. */
+ placeholderLabel?: string;
+ /**
+ * Where the three benefits sit relative to the CTA. Product pages keep
+ * `below-cta` — the 2026-08-06 review moved them there because they were
+ * pushing the CTA below the fold on /orm. Use-case pages ask for
+ * `above-cta`, which is the order their approved copy is written in
+ * (André, 2026-08-13); their copy is short enough to carry it.
+ */
+ benefitsPlacement?: "above-cta" | "below-cta";
+}) {
const Illustration = hero.illustration ? PRODUCT_ILLUSTRATIONS[hero.illustration] : null;
+ const dotColor = accent.startsWith("bg-")
+ ? accent
+ : PLATFORM_PRODUCT_ACCENTS[accent as ProductAccentName];
+ const benefitsAbove = benefitsPlacement === "above-cta";
+
+ // Above the CTA the list is part of the pitch, so it runs straight on from
+ // the subheadline. Below it, it's supporting detail after the ask, and the
+ // rule separates the two.
+ const benefits = (
+
+ {hero.benefits.map((label, i) => (
+
+
+ {label}
+
+ ))}
+
+ );
return (
@@ -83,7 +136,7 @@ export function ProductHero({
{/* the site's standard tagline: sentence case, ink at 70%, colour
carried by the dot — never uppercase, letter-spaced or grey
(documented on /brand) */}
- {name}
+ {name}
{/* 16ch is the intended measure, but at the top of the clamp it
resolves wider than this column, so the column has to be the
hard limit — otherwise a headline with a long nowrap emphasis
@@ -91,9 +144,26 @@ export function ProductHero({
-
- {hero.subheadline}
-
+ {/* One paragraph on product pages; use-case copy leads with two,
+ so an array renders a stacked pair at the same measure. */}
+ {(Array.isArray(hero.subheadline) ? hero.subheadline : [hero.subheadline]).map(
+ (para, i) => (
+
+ {para}
+
+ ),
+ )}
+ {/* Benefits support the CTA rather than delaying it — on product
+ pages they sit below it, so they carry their original weight
+ without competing. It was the position that pushed the CTA
+ down, not the type. */}
+ {benefitsAbove ? benefits : null}
) : null}
- {/* Benefits support the CTA rather than delaying it. They sit
- below it now, so they can carry their original weight without
- competing — it's the position that was pushing the CTA down,
- not the type. */}
-
- {hero.benefits.map((label, i) => (
-
-
- {label}
-
- ))}
-
+ {benefitsAbove ? null : benefits}
{/* the demo: the ray crosses the panel behind it — light passing
@@ -139,7 +192,11 @@ export function ProductHero({
intermediate state while editing content, and it is truthy —
it would render a tour whose `% stops.length` is NaN, giving
an empty card with no tabs instead of falling through here */}
- {hero.tour?.length ? (
+ {visual ? (
+
+ {visual}
+
+ ) : hero.tour?.length ? (
) : Illustration ? (
@@ -147,8 +204,8 @@ export function ProductHero({
) : (
-
- [Product abstraction]
+
+ {placeholderLabel}
)}
diff --git a/apps/site/src/components/product/product-narrative.tsx b/apps/site/src/components/product/product-narrative.tsx
index 2ebb07e256b..91d16a953e1 100644
--- a/apps/site/src/components/product/product-narrative.tsx
+++ b/apps/site/src/components/product/product-narrative.tsx
@@ -9,17 +9,20 @@ export function ProductNarrative({
headline,
paragraphs,
illustration,
+ centerText = false,
}: {
headline: string;
paragraphs: string[];
illustration: React.ReactNode;
+ /** Vertically centre the copy against a full-height (e.g. square) graphic. */
+ centerText?: boolean;
}) {
return (
{/* columns stretch rather than centre, so the graphic reads as a panel
the height of the argument beside it instead of a card floating in it */}
-
+
{headline}
diff --git a/apps/site/src/components/product/types.ts b/apps/site/src/components/product/types.ts
index b64e48a3b2c..83f5faa9910 100644
--- a/apps/site/src/components/product/types.ts
+++ b/apps/site/src/components/product/types.ts
@@ -54,8 +54,11 @@ export type ProductPageContent = {
* two — the second sentence pushed the primary CTA to ~700px, below the
* fold on a 1440x800 laptop, and every page's second sentence was already
* restated by the section under the hero.
+ *
+ * An array renders as stacked paragraphs, for use-case pages whose approved
+ * copy leads with two.
*/
- subheadline: string;
+ subheadline: string | string[];
/** Exactly three specific benefits. Sit under the CTA, not above it. */
benefits: [string, string, string];
primaryCta: Cta;
diff --git a/apps/site/src/components/sections/agent-loop.tsx b/apps/site/src/components/sections/agent-loop.tsx
index 30007e20e6c..15b939cbb56 100644
--- a/apps/site/src/components/sections/agent-loop.tsx
+++ b/apps/site/src/components/sections/agent-loop.tsx
@@ -163,7 +163,13 @@ function LoopDiagram() {
);
}
-export function AgentLoop() {
+// `heading` lets /stack re-point the same section at its own narrative while
+// the homepage keeps the default.
+export function AgentLoop({
+ heading = "What changes when your stack is built to work together",
+}: {
+ heading?: string;
+} = {}) {
return (
@@ -171,7 +177,7 @@ export function AgentLoop() {
- What changes when your stack is built to work together
+ {heading}
diff --git a/apps/site/src/components/sections/changelog-feed.tsx b/apps/site/src/components/sections/changelog-feed.tsx
new file mode 100644
index 00000000000..6dfa2adf128
--- /dev/null
+++ b/apps/site/src/components/sections/changelog-feed.tsx
@@ -0,0 +1,277 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import Link from "next/link";
+import { ArrowRightBold } from "@/components/icons/forma";
+import { Reveal } from "@/components/motion/reveal";
+import {
+ CATEGORY_META,
+ CATEGORY_ORDER,
+ type ChangelogCategory,
+ type ChangelogEntry,
+} from "@/data/changelog";
+import { cn } from "@/lib/utils";
+
+// The feed: a sticky category filter over a colour-coded release timeline.
+// One client component because the tabs and the list share a single piece of
+// filter state — the same call data/blog-browser makes. Twelve entries is far
+// too few to debounce or round-trip, so filtering is a plain array filter in
+// the client and the state stays out of the URL (no deep links to share yet).
+//
+// The timeline is the redesign's answer to the live changelog's flat numbered
+// list: a vertical spine on desktop with a category-coloured node per entry,
+// the date on a rail to its left, and the content in a card whose accent is the
+// entry's product area. You can scan the colours down the spine and tell a
+// Compute launch from an ORM fix without reading a word.
+
+const FMT = new Intl.DateTimeFormat("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ timeZone: "UTC",
+});
+
+type Filter = ChangelogCategory | "all";
+
+// `all` is every release note in content/changelog, newest first, shaped by
+// lib/changelog.ts on the server; this component only filters it.
+export function ChangelogFeed({ entries: all }: { entries: ChangelogEntry[] }) {
+ const [filter, setFilter] = useState("all");
+
+ // Counts per category — totals over the whole feed that never change with
+ // the active filter.
+ const counts = useMemo(
+ () =>
+ CATEGORY_ORDER.reduce>((acc, id) => {
+ acc[id] = all.filter((e) => e.category === id).length;
+ return acc;
+ }, {}),
+ [all],
+ );
+
+ const entries = useMemo(
+ () => (filter === "all" ? all : all.filter((e) => e.category === filter)),
+ [all, filter],
+ );
+
+ return (
+
+
+ {/* Sticky filter bar. Sits below the fixed header (top-16) with a
+ frosted backer so entries scroll cleanly under it. */}
+
+
+
+ setFilter("all")}
+ label="All updates"
+ count={all.length}
+ />
+ {/* Only categories that actually have entries — a zero-count tab
+ dead-ends to a blank timeline. Same rule blog-browser applies to
+ its topic chips. */}
+ {CATEGORY_ORDER.filter((id) => (counts[id] ?? 0) > 0).map((id) => (
+ setFilter(id)}
+ label={CATEGORY_META[id].label}
+ count={counts[id] ?? 0}
+ dot={CATEGORY_META[id].dot}
+ glow={CATEGORY_META[id].glow}
+ />
+ ))}
+
+ {/* Date rail — desktop only, right-aligned onto the spine */}
+
+
+ {meta.label}
+
+
+ {/* Content column — the spine is this column's left border; consecutive
+ rows stack their borders into one continuous line. The node sits on
+ it, punched through with a background-colored ring. */}
+
+ );
+}
+
+function EntryCard({
+ entry,
+ meta,
+}: {
+ entry: ChangelogEntry;
+ meta: (typeof CATEGORY_META)[ChangelogCategory];
+}) {
+ return (
+
+ {/* Every card blooms a wash of its category colour up from the bottom on
+ hover — the panel idiom in miniature. Fades in only on hover so the
+ resting feed stays clean and the colour reads as a reward for
+ reaching for the card. */}
+
+
+
+ {/* meta row: category chip + date (date shows here on mobile, where the
+ rail is hidden) */}
+
+ )}
+
+ {/* "Read more" on its own is a generic anchor: the visible label
+ stays, the hidden half names the entry it opens. */}
+
+ Read more
+ : {entry.title}
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/changelog-hero.tsx b/apps/site/src/components/sections/changelog-hero.tsx
new file mode 100644
index 00000000000..1d190639936
--- /dev/null
+++ b/apps/site/src/components/sections/changelog-hero.tsx
@@ -0,0 +1,64 @@
+import { GlassGlide } from "@/components/brand/glass-glide";
+import { Texture } from "@/components/brand/texture";
+
+// /changelog hero — the wrapped prismatic panel, centred like customers-hero:
+// the page opens on a claim, not a form or product visual, so there's no
+// second column to balance. Wash values are product-hero's short-panel
+// calibration, not the homepage's, so the beam fan doesn't bloom up behind the
+// subhead and cost it contrast.
+//
+// The live changelog opens on a bare "Changelog / What's new in Prisma" stack
+// on white. Same words, given the brand's front door: the spectral wash, the
+// grain, and one phrase lit by the glass glide.
+export function ChangelogHero() {
+ return (
+
+
+ {/* spectral bottom — wash + beam fan dispersing to white above */}
+
+
+
+
+
+
+
+
+
+
+ {/* top padding = bottom padding + the fixed header's footprint */}
+
+
+
+
+
+
+
+ What's new in Prisma
+
+
+
+ The Changelog
+
+
+ New features, improvements, and fixes across Prisma ORM, Prisma Postgres, and the
+ platform — shipped continuously and gathered here.
+
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/comparison.tsx b/apps/site/src/components/sections/comparison.tsx
index c863a764a41..c647983b56a 100644
--- a/apps/site/src/components/sections/comparison.tsx
+++ b/apps/site/src/components/sections/comparison.tsx
@@ -2,6 +2,7 @@ import { CheckBold, X } from "@/components/icons/forma";
import { Pattern } from "@/components/brand/pattern";
import { Reveal } from "@/components/motion/reveal";
import { BrokenCard, LiveCard } from "@/components/sections/comparison-cards";
+import { cn } from "@/lib/utils";
const BEFORE = [
"A database from Neon, an ORM from Drizzle, hosting from Vercel",
@@ -19,16 +20,42 @@ const AFTER = [
"Spend limits on every paid tier, so your bill stops where you tell it to",
];
+type ComparisonProps = {
+ heading?: React.ReactNode;
+ before?: readonly string[];
+ after?: readonly string[];
+ /**
+ * The two mini deploy cards. On by default — they are the section's whole
+ * point on the homepage. Use-case pages turn them off: the cards illustrate
+ * *the platform's* broken/live moment, and repeating them on every use case
+ * would show the same abstraction three or four times across the site
+ * (André, 2026-08-13).
+ */
+ cards?: boolean;
+};
+
// Before/after: two columns, each led by a mini deploy card — the same
// moment, broken on the left, alive on the right. Card microcopy is
// decorative UI illustration (same idiom as ConsoleIllustration).
-export function Comparison() {
+//
+// Defaults are the homepage set; pass copy to reuse the layout elsewhere
+// (see use-case/use-case-page.tsx), the same way Faq and CtaBurst are reused.
+export function Comparison({
+ heading = "The stack your agent has been waiting for",
+ before = BEFORE,
+ after = AFTER,
+ cards = true,
+}: ComparisonProps = {}) {
+ // Without the cards the lists start directly under the column heading, so
+ // they take the heading's own rhythm instead of the card's clearance.
+ const listSpacing = cards ? "mt-10" : "mt-8";
+
return (
- The stack your agent has been waiting for
+ {heading}
@@ -38,10 +65,10 @@ export function Comparison() {
Before
{/* broken deploy card — glass shatters into its current state */}
-
+ {cards ? : null}
-
- {BEFORE.map((item) => (
+
+ {before.map((item) => (
After
{/* live deploy card — a cursor glides in and clicks Deploy preview */}
-
+ {cards ? : null}
-
{/* ray backdrop — saturation boosted (bold pass) on its own layer so the
filter doesn't touch the card content */}
@@ -163,7 +170,12 @@ export function ComputeIllustration() {
{label}
diff --git a/apps/site/src/components/sections/customer-story.tsx b/apps/site/src/components/sections/customer-story.tsx
new file mode 100644
index 00000000000..b23d3b73247
--- /dev/null
+++ b/apps/site/src/components/sections/customer-story.tsx
@@ -0,0 +1,580 @@
+import { IconTile } from "@/components/brand/icon-tile";
+import { PrismButton, PrismButtonOutline } from "@/components/brand/prism-button";
+import { PrismRay } from "@/components/brand/prism-ray";
+import { RoleKicker } from "@/components/brand/role-kicker";
+import { Texture } from "@/components/brand/texture";
+import { Star } from "@/components/icons/forma";
+import { Reveal } from "@/components/motion/reveal";
+import { CtaBurst } from "@/components/sections/cta-burst";
+import { PRODUCT_ICONS } from "@/components/product/icons";
+import { PRODUCT_ILLUSTRATIONS } from "@/components/product/illustrations";
+import type { CustomerStoryDetail } from "@/data/customer-stories";
+import { cn } from "@/lib/utils";
+
+// /customers/[slug] — the customer story detail template.
+//
+// Built entirely out of the redesign's existing vocabulary: the wrapped
+// prismatic panel (hero-home / product-hero / cta-burst), the split hero with a
+// PrismRay crossing behind the visual, IconTile cards (product-problem), a
+// product illustration for the "how they use it" visual (product-features), and
+// CtaBurst for the closer. Surfaces alternate white ↔ wrapped panel — there is
+// deliberately no bg-muted band. Section order follows the approved copy.
+
+const CHECK_COLORS = ["text-prism-cyan-500", "text-prism-yellow-400", "text-prism-red-500"];
+
+export function CustomerStory({ story }: { story: CustomerStoryDetail }) {
+ return (
+ <>
+
+
+
+
+ {story.quote && }
+
+
+ ({
+ label,
+ color: CHECK_COLORS[i % CHECK_COLORS.length],
+ }))}
+ primaryCta={{ label: "Get started free", href: "https://console.prisma.io" }}
+ secondaryCta={{ label: "Talk to us", href: "/contact" }}
+ />
+
+ );
+}
+
+// The wrapped prismatic panel used across the site (hero-home, product-hero,
+// product-features): a rounded white card with the spectral wash collecting
+// along the bottom and dispersing to white above. Extracted here so the hero,
+// quote and results panels share one source instead of three copies.
+function PrismPanel({ children, className }: { children: React.ReactNode; className?: string }) {
+ return (
+
+
+
+
+
+
+
+
+
+
{children}
+
+ );
+}
+
+// The customer mark on a light surface — flattened to solid black (no chip, no
+// background). brightness-0 alone forces black while keeping the alpha, so both
+// the white marks (logoAsIs) and the dark-ink originals read as one flat mark.
+function LogoMark({ story, className }: { story: CustomerStoryDetail; className?: string }) {
+ return (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ );
+}
+
+// Opening quote glyph. Its slice-glitch classes (animate-quote-slice-*) live in
+// globals.css — added for the original pricing-hero testimonial, kept when that
+// hero was reworked, reused here.
+function QuoteGlyph({ className, style }: { className?: string; style?: React.CSSProperties }) {
+ return (
+
+ );
+}
+
+// The testimonial quote-mark with a continuous slice glitch (React Bits
+// GlitchText idiom): the ink mark, static chromatic offsets under it, and three
+// card-colored layers clipped to a jumping band so slices read as displaced
+// through the prism trio. Sits on an OPAQUE card surface — the layers mask with
+// bg-card between flickers.
+function GlitchQuote({ className }: { className?: string }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// Comma-separated Stack fact → a short list, for the hero plate's footer. Capped
+// so a long stack (Amplication runs eight) stays a clean one-or-two-line summary;
+// the full stack still shows in the About fact sheet.
+function stackFrom(story: CustomerStoryDetail): string[] {
+ const fact = story.about.facts.find((f) => f.label.toLowerCase() === "stack");
+ if (!fact) return [];
+ return fact.value
+ .split(",")
+ .map((s) => s.trim())
+ .filter(Boolean)
+ .slice(0, 5);
+}
+
+// The hero visual: a black "built with" plate that fills its column — the Prisma
+// mark up top, the customer's mark large and centred, the stack along the
+// bottom — with the brand's prismatic light leaking in at the corners and the
+// triple-band ray crossing behind it (story-art.tsx idiom, given room to breathe).
+function HeroVisual({ story }: { story: CustomerStoryDetail }) {
+ const stack = stackFrom(story);
+ return (
+
+ );
+}
+
+// Hero — product-hero's wrapped panel in a split: copy left, the "built with"
+// plate on the right with the ray crossing behind it.
+function StoryHero({ story }: { story: CustomerStoryDetail }) {
+ return (
+
+
+
+
+ {/* copy */}
+
+ Customer story
+
+ {story.hero.title}
+
+
+
{story.hero.lead}
+ {story.hero.support &&
{story.hero.support}
}
+
+
+
+ Get started free
+
+
+ Talk to us
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// About — narrative on the left, the fact sheet on the right as a card where
+// every row carries its own IconTile.
+function StoryAbout({ story }: { story: CustomerStoryDetail }) {
+ return (
+
+
+
+ );
+}
+
+// Challenge — a wrapped panel: framing on the left, the constraints as IconTile
+// cards on the right, the closing line beneath.
+function StoryChallenge({ story }: { story: CustomerStoryDetail }) {
+ return (
+
+
+
+
+
+ );
+}
+
+// How they use Prisma — the argument on the left (vertically centred against the
+// visual), a schema.prisma abstraction on the right. Reuses the product pages'
+// SchemaFile illustration so the visual is real and never repeats the hero plate.
+function StoryUsage({ story }: { story: CustomerStoryDetail }) {
+ const SchemaFile = PRODUCT_ILLUSTRATIONS.schemaFile;
+ return (
+
+
+
+
+ {story.usage.heading}
+
+
+ {story.usage.body.map((p, i) => (
+
{p}
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+// Results — a wrapped panel split two ways: the outcome heading and the three
+// IconTile result cards on the left, the closing quote as a tall card on the
+// right (per the review wireframe). Falls back to a single column when a story
+// carries no closing quote.
+function StoryResults({ story }: { story: CustomerStoryDetail }) {
+ const quote = story.closingQuote;
+ return (
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/customers-grid.tsx b/apps/site/src/components/sections/customers-grid.tsx
index 43457c5c0d2..79e0b31f298 100644
--- a/apps/site/src/components/sections/customers-grid.tsx
+++ b/apps/site/src/components/sections/customers-grid.tsx
@@ -1,22 +1,80 @@
import Link from "next/link";
-import { ArrowRight } from "@/components/icons/forma";
-import { CUSTOMER_STORIES } from "@/lib/customers";
+import { Marker } from "@/components/brand/marker";
+import { ArrowRightBold } from "@/components/icons/forma";
+import { Reveal } from "@/components/motion/reveal";
+import { StoryArt } from "@/components/sections/story-art";
+import { STORY_DETAIL_SLUGS } from "@/data/customer-stories";
+import { CUSTOMER_STORIES, type CustomerStory } from "@/data/customers";
import { cn } from "@/lib/utils";
-// Case-study grid — the 13 production stories ported from the old site's
-// /case-studies page. The lead story spans two columns on desktop; everything
-// else sits in the uniform 3-up grid. Story art is full-bleed (the old site
-// rendered the same assets object-cover) under a soft card wash.
+// Display names for the stack ids carried on each story. Anything unmapped
+// falls through to the raw id rather than being dropped, so a new technology
+// appearing in the data shows up (slightly wrong) instead of silently vanishing.
+const STACK_LABELS: Record = {
+ apollo: "Apollo",
+ aws: "AWS",
+ cloudflare: "Cloudflare",
+ cockroach: "CockroachDB",
+ cognito: "Cognito",
+ docker: "Docker",
+ gcp: "Google Cloud",
+ graphql: "GraphQL",
+ kafka: "Kafka",
+ kubernetes: "Kubernetes",
+ mongodb: "MongoDB",
+ mysql: "MySQL",
+ nest: "NestJS",
+ next: "Next.js",
+ nexus: "Nexus",
+ node: "Node.js",
+ postgres: "Postgres",
+ prisma: "Prisma",
+ react: "React",
+ redis: "Redis",
+ trpc: "tRPC",
+ ts: "TypeScript",
+ vercel: "Vercel",
+};
+
+// The three brand colours in the site's standard order, cycled across a story's
+// chips so the row carries the spectrum without any one chip claiming meaning.
+const DOT_COLORS = ["bg-prism-cyan-400", "bg-prism-yellow-400", "bg-prism-red-400"];
+
+// Chips are capped at three. Five is the longest stack in the data, and at card
+// width a five-chip row wraps to two lines and starts competing with the title
+// for weight — the reference layout runs three.
+const MAX_CHIPS = 3;
+
+// /customers story grid — all thirteen customer stories.
+//
+// Thirteen doesn't divide into three columns, so the first story runs
+// full-width as a lead card and the remaining twelve fill exactly four rows of
+// three. That gives the reference layout's featured-card moment without asking
+// anyone for new copy: the lead card renders the same fields as every other
+// card, just larger and horizontal.
+//
+// Three columns rather than the reference's two: at max-w-site (1400px) a
+// two-column card is ~690px, far wider than a logo plate wants. Three lands at
+// ~455px, close to the reference's own ~500px.
+//
+// Cards link inward to /customers/[slug] where a detail page has been built
+// (STORY_DETAIL_SLUGS), and fall back to the live prisma.io blog post for the
+// rest until their pages land.
export function CustomersGrid() {
const [lead, ...rest] = CUSTOMER_STORIES;
return (
-
+
-
-
- {rest.map((story) => (
-
+
+
+
+
+
+ {rest.map((story, i) => (
+
+
+
))}
@@ -24,59 +82,93 @@ export function CustomersGrid() {
);
}
-function StoryCard({
- story,
- className,
- lead = false,
-}: {
- story: (typeof CUSTOMER_STORIES)[number];
- className?: string;
- lead?: boolean;
-}) {
+function StoryCard({ story, lead = false }: { story: CustomerStory; lead?: boolean }) {
+ const internal = STORY_DETAIL_SLUGS.has(story.slug);
+ const href = internal ? `/customers/${story.slug}` : story.href;
+ // Detail pages are this app's own routes, so they get client-side routing;
+ // the fallback to a live blog post is another zone and hard-navigates.
+ const Card = internal ? Link : "a";
+
return (
-
-
+ )}
+
+ {/* No `grow` on the clamped paragraph: line-clamp needs
+ display:-webkit-box, and letting flex stretch that box makes it tall
+ enough to paint a fourth line which then gets sliced through the
+ middle by the clamp. The link takes mt-auto instead, so cards still
+ bottom-align without the paragraph having to absorb the slack. */}
+
{story.excerpt}
-
- Read the story
-
+
+ {/* Grid cards push the link to the bottom edge so it lines up across a
+ row whatever the excerpt length. The lead card must not: its column
+ is vertically centred, so mt-auto strands the link at the bottom
+ with a gap above it — visible as soon as the card was made taller. */}
+ {/* The underline needs its own box to sit under, so it goes on an inner
+ span — putting it on the outer one would draw the rule 3px below the
+ card's bottom padding instead of under the words. */}
+
+
+ Read the story
+
+
-
+
);
}
diff --git a/apps/site/src/components/sections/customers-hero.tsx b/apps/site/src/components/sections/customers-hero.tsx
index e65505ccfc1..92b64409d39 100644
--- a/apps/site/src/components/sections/customers-hero.tsx
+++ b/apps/site/src/components/sections/customers-hero.tsx
@@ -1,46 +1,130 @@
-import { RoleKicker } from "@/components/brand/role-kicker";
+import { GlassGlide } from "@/components/brand/glass-glide";
+import { PrismButton, PrismButtonOutline } from "@/components/brand/prism-button";
import { Texture } from "@/components/brand/texture";
+import { BAND_LOGOS } from "@/data/customers";
-// Customers hero — wrapped-panel title band (same shell as product-hero, with
-// the spectral wash dialed down: this page's color comes from the story grid,
-// so the hero stays a quiet paper surface).
+// /customers hero — the wrapped prismatic panel, centred rather than split:
+// this page opens on a claim and a proof band, not on a form or a product
+// visual, so there is no second column to balance (contact-hero.tsx splits at
+// lg for exactly that reason).
+//
+// A split layout with the marks drifting in a constellation beside the copy was
+// tried and reverted (André, 2026-08-17). Centred, with the band reading as one
+// roster across the full width, is the version that stays.
+//
+// The "Built with Prisma" logo band lives INSIDE the panel, sitting on the
+// spectral wash. The approved copy runs that label straight off the CTAs with
+// no heading marker, so it reads as the panel's footer rather than as its own
+// section. The second, much wider logo moment (all 44 community marks) is the
+// marquee further down, which answers "how many" where this answers "who".
+//
+// Wash values are product-hero's calibration, not the homepage's, for the same
+// reason contact-hero gives: this panel is short, and the homepage's stronger
+// values bloom up behind the headline and cost the subhead its contrast.
export function CustomersHero() {
return (
+ {/* spectral bottom — wash + beam fan dispersing to white above, same
+ values as product-hero.tsx and contact-hero.tsx */}
-
+
+
+
+
-
-
- Customer stories
-
-
- Teams ship faster on Prisma
-
-
- How engineering teams use Prisma in production to speed up delivery, simplify database
- workflows, and scale without slowing down.
-
+ {/* top padding = bottom padding + the fixed header's footprint */}
+
+
+
+ How teams ship faster with Prisma
+
+
+ Real teams, real production stories. See how developers use Prisma to build, deploy,
+ and scale without wrestling their backend at every step.
+
+
+
+ Get started free
+
+
+ Talk to us
+
+
+
+
+ {/* the proof band, on the wash */}
+
+
+ Built with Prisma
+
+ {/* Static rather than a marquee: twelve marks are few enough to
+ show at once, and a fixed roster reads as "these companies"
+ where a marquee reads as "a crowd". The crowd is the marquee
+ below.
+ An explicit grid rather than flex-wrap — twelve items divide
+ evenly at every breakpoint here (6/4/3/2 per row), where
+ wrapping left a lopsided 8-then-4 at desktop width. */}
+
+ {BAND_LOGOS.map((logo) => (
+
+
+
+ ))}
+
+
);
}
+
+function BandLogo({ logo }: { logo: (typeof BAND_LOGOS)[number] }) {
+ const mark = (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ );
+
+ const tile =
+ "spectrum-border flex h-[4.5rem] w-full items-center justify-center rounded-2xl border border-neutral-200 bg-white/80 px-5 backdrop-blur-sm";
+
+ // Insta Group is the one mark prisma.io carries without a link.
+ if (!logo.href) {
+ return
{mark}
;
+ }
+
+ return (
+
+ {mark}
+
+ );
+}
diff --git a/apps/site/src/components/sections/logo-cloud.tsx b/apps/site/src/components/sections/logo-cloud.tsx
index 28cb8712032..55b08fc1fd3 100644
--- a/apps/site/src/components/sections/logo-cloud.tsx
+++ b/apps/site/src/components/sections/logo-cloud.tsx
@@ -1,4 +1,5 @@
import { Reveal } from "@/components/motion/reveal";
+import { cn } from "@/lib/utils";
type CompanyLogo = {
name: string;
@@ -40,7 +41,7 @@ const companies: CompanyLogo[] = [
/* The row is rendered twice per track (and the track twice) so the strip is
wider than any viewport and the -50% marquee loop is seamless. */
-function Track({ hidden = false }: { hidden?: boolean }) {
+function CompanyTrack({ hidden = false }: { hidden?: boolean }) {
return (
+ ) : (
+
+ {logo.name}
+
+ );
+
+ if (!logo.href) {
+ return
+ );
+}
+
+type LogoCloudProps = {
+ /** A tiled roster in place of the homepage's company wordmarks. */
+ logos?: Logo[];
+ /** Defaults to the homepage's small uppercase kicker. */
+ heading?: React.ReactNode;
+ /**
+ * Landscape tiles for wordmark logos. The square tile is sized for icon
+ * marks; customer logos are nearly all wordmarks, and squeezing those into
+ * a 48px box renders them unreadably small.
+ */
+ wide?: boolean;
+ /**
+ * Seconds for one full loop. The keyframe duration is per-loop, not
+ * per-pixel, so a longer list covers more ground in the same time and drifts
+ * proportionally faster. Set it to hold px/s steady across differently sized
+ * sets.
+ */
+ durationSeconds?: number;
+ className?: string;
+};
+
+// The marquee is shared: the homepage runs it over the company wordmarks, and
+// /customers runs it over all 44 community projects under its own heading.
+export function LogoCloud({
+ logos,
+ heading,
+ wide,
+ durationSeconds,
+ className,
+}: LogoCloudProps = {}) {
return (
-
+
-
- Trusted by leading companies
-
+ {heading ?? (
+
+ Trusted by leading companies
+
+ )}
-
-
-
+
+ {logos ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
diff --git a/apps/site/src/components/sections/orm-illustration.tsx b/apps/site/src/components/sections/orm-illustration.tsx
index 69f651b30ca..391a3c11bd5 100644
--- a/apps/site/src/components/sections/orm-illustration.tsx
+++ b/apps/site/src/components/sections/orm-illustration.tsx
@@ -29,7 +29,11 @@ const IN_VIEW = { margin: "0px 0px -20% 0px" } as const;
// autocomplete. On scroll-in it loops: the dropdown drops down, a cursor glides
// in and hovers an option (the highlight follows), then the cursor retreats and
// the dropdown closes. The schema stack (3D) floats gently throughout.
-export function OrmIllustration() {
+//
+// `compact` fits the illustration into a narrow column (the /platform product
+// cards) instead of the homepage's half-page cell: tighter frame padding and a
+// smaller schema stack, so the editor keeps its breathing room.
+export function OrmIllustration({ compact = false }: { compact?: boolean } = {}) {
const reduce = useReducedMotion();
const ref = useRef(null);
const inView = useInView(ref, IN_VIEW);
@@ -42,7 +46,10 @@ export function OrmIllustration() {
{/* ray backdrop — saturation boosted (bold pass) on its own layer so the
filter doesn't touch the card content */}
@@ -132,19 +139,23 @@ export function OrmIllustration() {
)
-
-
- for{" "}
- of users {"{"}
-
-
-
-
-
-
-
-
{"}"}
-
+ {/* the loop below the query is the first thing to go in a narrow
+ column — the autocomplete is what the illustration is about */}
+ {!compact && (
+
+
+ for{" "}
+ of users {"{"}
+
+
+
+
+
+
+
+
{"}"}
+
+ )}
@@ -152,11 +163,16 @@ export function OrmIllustration() {
- {/* the schema stack — floats gently over the editor's right half */}
+ {/* the schema stack — floats gently over the editor's right half. In a
+ narrow column it rides higher and smaller, clear of the autocomplete
+ popup that would otherwise sit underneath it. */}
+
+
+
+ Why the three belong on one platform
+
+
+
+
+
+
+
+
+ {/* without — quiet, on the page's own white */}
+
+
+ Without an integrated stack
+
+
+ {WITHOUT.map((item) => (
+
+
+ {item}
+
+ ))}
+
+
+
+ {/* with — lifted on white behind the spectrum border, the brand mark
+ standing in for the heading (same idiom as the homepage's After) */}
+
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/platform-flow.tsx b/apps/site/src/components/sections/platform-flow.tsx
new file mode 100644
index 00000000000..f3b3767e589
--- /dev/null
+++ b/apps/site/src/components/sections/platform-flow.tsx
@@ -0,0 +1,115 @@
+import { Code, Console, Rocket } from "@/components/icons/forma";
+import { Texture } from "@/components/brand/texture";
+import { Reveal } from "@/components/motion/reveal";
+
+// Step tiles sit 1.5rem in from each column's left edge (half of size-12), and
+// the columns are (100% - 2.5rem)/3 wide with gap-5 between them — so the track
+// runs from the first tile's center to the last tile's center exactly.
+const TRACK_INSET_RIGHT = "calc((100% - 2.5rem) / 3 - 1.5rem)";
+
+const STEPS = [
+ {
+ icon: Code,
+ title: "Build",
+ body: "Model your data and write type-safe queries with Prisma ORM.",
+ },
+ {
+ icon: Rocket,
+ title: "Deploy",
+ body: "Provision a Prisma Postgres database and deploy to Prisma Compute, co-located on the same host.",
+ },
+ {
+ icon: Console,
+ title: "Debug",
+ body: "Read your logs, update your schema, migrate, and redeploy, without switching tools.",
+ },
+];
+
+// A node on the track: the white tile idiom (see stack-bento's ToolIcon) turned
+// round, so it reads as something the wire passes through.
+function StepNode({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+// The happy path, before the page breaks into the three products: build, deploy,
+// debug as three nodes on one continuous wire, with the same spectral pulse the
+// platform diagram uses running through them. Wrapped panel, so it separates the
+// "why" above from the product detail below.
+export function PlatformFlow() {
+ return (
+
+
+ {/* the panel's spectral wash, quieter than the hero's — the track has to
+ stay the most legible thing in the frame */}
+
+
+
+
+
+
+
+
+
+
+ From building to shipping, in one flow
+
+
+
+
+ {/* the one wire every step hangs off, level with the tile centers */}
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/platform-hero.tsx b/apps/site/src/components/sections/platform-hero.tsx
new file mode 100644
index 00000000000..d05d69583f1
--- /dev/null
+++ b/apps/site/src/components/sections/platform-hero.tsx
@@ -0,0 +1,77 @@
+import { GlassPrismSpin } from "@/components/brand/glass-prism-spin";
+import { PrismButton, PrismButtonOutline } from "@/components/brand/prism-button";
+import { Texture } from "@/components/brand/texture";
+
+// Spectrum gradient matching the brand CTA glow (see prism-button.tsx).
+const SPECTRUM =
+ "linear-gradient(85deg, #01d7e4 0%, #f3c306 25%, #f37a03 50%, #f43531 74%, #f00e5c 100%)";
+
+// Platform index hero: the homepage's wrapped prismatic panel reduced to its
+// quietest state — heading and description only, so the product list below is
+// what the page actually asks you to act on.
+// The section's pb matches the page gutter, so the products panel below sits
+// in the same 3/4 rhythm as the panel's other edges.
+export function PlatformHero() {
+ return (
+
+
+ {/* prismatic backdrop — spectral wash along the bottom edge dispersing
+ to white above, the same treatment as the homepage hero */}
+
+
+ {/* beam fan rising from below */}
+
+
+
+ {/* dispersion back to white above */}
+
+
+ {/* the glass monument rising out of the corner where the spectrum
+ concentrates behind it */}
+
+
+
+
+
+
+
+ {/* pt clears the fixed navbar in its docked state */}
+
+ {/* h1 and description carry the homepage hero's exact type
+ treatment — same clamp, leading, and measure (see hero-home) */}
+
+ Build and ship your whole backend in one place
+
+
+ A type-safe ORM, managed Postgres, and TypeScript app hosting, built to work together
+ natively rather than wired together after the fact. Start with any one of them and add
+ the rest when you're ready to ship.
+
+
+ Get started free
+ See pricing
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/platform-open.tsx b/apps/site/src/components/sections/platform-open.tsx
new file mode 100644
index 00000000000..e7f31e7e8a4
--- /dev/null
+++ b/apps/site/src/components/sections/platform-open.tsx
@@ -0,0 +1,50 @@
+import { Database, Layers, Swap } from "@/components/icons/forma";
+import { Reveal } from "@/components/motion/reveal";
+
+const POINTS = [
+ { icon: Database, label: "Prisma Postgres is standard Postgres" },
+ { icon: Swap, label: "Prisma ORM works with other databases" },
+ { icon: Layers, label: "Each product can be adopted on its own" },
+];
+
+// The escape hatch, stated plainly: integrated is the default, not a lock-in.
+// Quiet and unwrapped — the claim carries it, so the section stays a two-column
+// text block rather than another set of cards.
+export function PlatformOpen() {
+ return (
+
+
+
+
+
+ Integrated by default, open by design
+
+
+
+
+ Prisma gives you a stack that works together out of the box, with room to use the
+ tools you already trust.
+
+ Start with the piece you need today, then add more when it makes sense.
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/platform-products.tsx b/apps/site/src/components/sections/platform-products.tsx
new file mode 100644
index 00000000000..978e7d83c8a
--- /dev/null
+++ b/apps/site/src/components/sections/platform-products.tsx
@@ -0,0 +1,149 @@
+import { ArrowRightBold } from "@/components/icons/forma";
+import { OrmIllustration } from "@/components/sections/orm-illustration";
+import { PostgresIllustration } from "@/components/sections/postgres-illustration";
+import { ComputeIllustration } from "@/components/sections/compute-illustration";
+import { Reveal } from "@/components/motion/reveal";
+import { cn } from "@/lib/utils";
+
+// TODO: /orm, /postgres and /compute are Phase 1 sitemap routes not built yet
+// (see design-ref/sitemap.md) — same as the homepage StackBento links.
+const PRODUCTS = [
+ {
+ name: "Prisma ORM",
+ role: "Type-safe data layer",
+ href: "/orm",
+ dot: "bg-prism-cyan-400",
+ Illustration: OrmIllustration,
+ description:
+ "One declarative schema in native TypeScript — the single config your app, your migrations, and your agent all build against.",
+ points: [
+ "Free and open source, trusted by 500,000+ developers",
+ "Schema small and dense enough to hand an LLM as context",
+ "Errors structured for agents, not just humans",
+ ],
+ },
+ {
+ name: "Prisma Postgres",
+ role: "Managed database",
+ href: "/postgres",
+ dot: "bg-prism-yellow-400",
+ Illustration: PostgresIllustration,
+ description:
+ "Managed Postgres that arrives already wired to your schema, co-located with your hosting on infrastructure built for single-digit ms boot times.",
+ points: [
+ "Unikernel microVMs on bare metal, single-digit ms boot",
+ "Operation-based pricing with spend limits, no bill shock",
+ "Free per-branch databases for every preview",
+ ],
+ },
+ {
+ name: "Prisma Compute",
+ role: "App hosting",
+ href: "/compute",
+ dot: "bg-prism-red-500",
+ badge: "Public Beta",
+ Illustration: ComputeIllustration,
+ description:
+ "TypeScript app hosting on the same host as your database, so your agent can deploy, debug, and redeploy without leaving the loop.",
+ points: [
+ "Bun runtime on bare metal",
+ "Co-located with Postgres for single-digit ms queries",
+ "Versioned deploys with preview URLs, by git push or CLI",
+ ],
+ },
+];
+
+function Bullet({ children }: { children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+// Product role kicker — the product's color lives in a small dot, the label
+// stays ink (pills are reserved for buttons). Same idiom as StackBento.
+function RoleKicker({ dot, children }: { dot: string; children: React.ReactNode }) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+// The inline spectrum-ink link that closes each card — same treatment as
+// StackBento's LearnMore (see stack-bento.tsx).
+function LearnMore({ href, product }: { href: string; product: string }) {
+ return (
+
+
+ Learn more
+ about {product}
+
+
+
+ );
+}
+
+// The platform index: the three products as cards, each card a link into its
+// own page. Same card type as the homepage's "The TypeScript stack, integrated
+// by design" (see stack-bento.tsx) — rounded-2xl on bg-card, the product's
+// animated illustration above the copy, closed by an inline "Learn more" link —
+// with the illustrations in `compact` mode to suit the narrower column.
+// Unwrapped: the hero above carries the wrapped panel, so this sits on the
+// page's own white (see platform/page.tsx for the wrapped/unwrapped rhythm).
+export function PlatformProducts() {
+ return (
+
+
+
+
+ Start with one, add the rest when you need them
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/platform-stack-map.tsx b/apps/site/src/components/sections/platform-stack-map.tsx
new file mode 100644
index 00000000000..313d98d8cb8
--- /dev/null
+++ b/apps/site/src/components/sections/platform-stack-map.tsx
@@ -0,0 +1,131 @@
+import { Swap } from "@/components/icons/forma";
+import { Pattern } from "@/components/brand/pattern";
+import { cn } from "@/lib/utils";
+
+// Node centers in a 3-column grid with gap-5 (1.25rem): the outer columns are
+// each (100% - 2.5rem)/3 wide, so their centers sit one half-column in from
+// the edges. Every wire below is positioned off these values, which is why the
+// bus and the drops line up with the cards exactly at any width.
+const COL = "calc((100% - 2.5rem) / 6)";
+// Midpoint between the middle and right node centers — where the co-location
+// bracket hangs its caption.
+const MID = "calc(75% - (100% - 2.5rem) / 12)";
+
+const CO_LOCATED = "Postgres and your app on the same host — single-digit ms queries";
+
+const NODES = [
+ { name: "Prisma ORM", role: "Type-safe data layer", dot: "bg-prism-cyan-400" },
+ { name: "Prisma Postgres", role: "Managed database", dot: "bg-prism-yellow-400" },
+ { name: "Prisma Compute", role: "App hosting", dot: "bg-prism-red-500" },
+];
+
+// `flow` carries the brand's sliding spectrum gradient along the wire (the
+// same motif as .spectrum-border / .spectrum-ink, on a hairline) — "x" runs
+// along the wire, "y" runs down it. Without it the wire is a plain hairline.
+function Wire({
+ className,
+ style,
+ flow,
+}: {
+ className?: string;
+ style?: React.CSSProperties;
+ flow?: "x" | "y";
+}) {
+ return (
+
+ );
+}
+
+// The schema chip — the same file-chip idiom as the homepage's ConnectorStrip,
+// promoted to the thing the whole diagram hangs off.
+function SchemaChip() {
+ return (
+
+ );
+}
+
+// The system overview the page opens on: one schema up top, the three products
+// wired to it, and the two runtime pieces bracketed together because they share
+// a host. The pulse travelling the bus is the schema propagating — the whole
+// claim of the page in one movement.
+export function StackMap() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* mobile: one spine straight down instead of the bus */}
+
+
+ {/* desktop wiring: drop from the chip, a bus across the three node
+ centers, then a drop into each node — every segment carrying the
+ spectrum, so the schema visibly runs out into all three products */}
+
+
+
+
+
+
+
+
+
+ {/* the mobile spine, showing through the gaps between stacked nodes */}
+
+ {NODES.map((node) => (
+
+ ))}
+
+
+ {/* co-location bracket joining the two runtime pieces */}
+
+
+
+
+
+
+ {CO_LOCATED}
+
+
+
{CO_LOCATED}
+
+
+ );
+}
diff --git a/apps/site/src/components/sections/postgres-illustration.tsx b/apps/site/src/components/sections/postgres-illustration.tsx
index f3ca2b60246..b1d0981dacb 100644
--- a/apps/site/src/components/sections/postgres-illustration.tsx
+++ b/apps/site/src/components/sections/postgres-illustration.tsx
@@ -35,7 +35,11 @@ const IN_VIEW = { margin: "0px 0px -20% 0px" } as const;
// the database floats, the brand ray breathes light through it, a boot pulse
// sweeps across the branch strip (main → pr-214 → feat-auth, the story of a
// preview branch spinning up), and the "Live" dot breathes.
-export function PostgresIllustration() {
+//
+// `compact` fits the illustration into a narrow column (the /platform product
+// cards) instead of the homepage's half-page cell: a fixed frame height rather
+// than stretching to the row, tighter padding, and a smaller database.
+export function PostgresIllustration({ compact = false }: { compact?: boolean } = {}) {
const reduce = useReducedMotion();
const ref = useRef(null);
const inView = useInView(ref, IN_VIEW);
@@ -45,7 +49,10 @@ export function PostgresIllustration() {
{/* ray backdrop — saturation boosted (bold pass) on its own layer so the
filter doesn't touch the card content */}
@@ -88,7 +95,10 @@ export function PostgresIllustration() {
| Prisma" PNGs prisma.io ships in
+// /photos/showcase/stories. Those are flat 1266x711 images: one per customer,
+// no way to restyle them, and unusable on a light surface. This renders the
+// same lockup from the customer's own logo file, so adding a story is a data
+// entry rather than a trip to a design tool, and it stays crisp at any size.
+//
+// The light is at the EDGES rather than pooled at the bottom (the light-panel
+// idiom): the centre has to stay dark enough for white marks to hold contrast,
+// so the spectrum enters from outside the frame and falls off inward. Beam
+// angles and the cyan/yellow/red order match hero-home.tsx.
+export function StoryArt({
+ story,
+ className,
+ size = "card",
+}: {
+ story: CustomerStory;
+ className?: string;
+ /** `card` is the grid plate; `lead` scales the lockup up for the wide card. */
+ size?: "card" | "lead";
+}) {
+ const lead = size === "lead";
+
+ return (
+
+ {/* Two prismatic blurs on the diagonal — cyan into the top-left corner,
+ red out of the bottom-right (André, 2026-08-17).
+ Both sources sit just OUTSIDE their corner and are drawn large, so
+ what lands in frame is the broad body of the glow sweeping across the
+ corner rather than a discrete blob. Anchored inside the frame and
+ smaller, they read as two spots with dead black stranded between them.
+ `screen` is what keeps it reading as light: painted normally, these
+ gradients composite toward their own muddy midtones over black (the
+ cyan goes swampy teal, the red goes maroon). Screening against black
+ is additive, so the hues stay true and the untouched middle stays at
+ true #08090b — no vignette needed to protect the marks, which is what
+ the first pass used and what was dulling the colour. */}
+
+
+ {/* Grain, doubled from the 0.04 first pass (André asked for it to read
+ more). Still well under the value that works on white: Texture is
+ calibrated at 0.06 multiply there, and hard-light on black amplifies
+ it — 0.14 tips from print grain into a scratched, dirty surface. */}
+
+
+
+ {/* full-color-white is the dark-surface sibling of the full-color mark
+ the header uses: brand-coloured icon, white wordmark. The all-white
+ white.svg flattened the icon into the customer's mark beside it —
+ two white shapes either side of the divider with nothing to say
+ which one is the host. */}
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+
+ );
+}
+
+// Height caps per optical weight, for both plate sizes. `md` is the baseline;
+// `sm` reins in heavy blocked wordmarks that read oversized at the common
+// height, `lg` lifts marks drawn light or small.
+const MARK_SIZE = {
+ sm: { card: "max-h-6 max-w-[9rem]", lead: "max-h-7 max-w-[11rem]" },
+ md: { card: "max-h-8 max-w-[11rem]", lead: "max-h-9 max-w-[13rem]" },
+ lg: { card: "max-h-10 max-w-[12rem]", lead: "max-h-11 max-w-[14rem]" },
+} as const;
+
+function CustomerMark({ story, lead }: { story: CustomerStory; lead: boolean }) {
+ if (!story.logo) {
+ return (
+
+ {story.name}
+
+ );
+ }
+
+ return (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ );
+}
diff --git a/apps/site/src/components/use-case/ai-agents/agent-toolchain.tsx b/apps/site/src/components/use-case/ai-agents/agent-toolchain.tsx
new file mode 100644
index 00000000000..7c1b6cb9a9c
--- /dev/null
+++ b/apps/site/src/components/use-case/ai-agents/agent-toolchain.tsx
@@ -0,0 +1,84 @@
+import { AgentRobot } from "@/components/brand/agent-robot";
+import { IconTile } from "@/components/brand/icon-tile";
+import { Pattern } from "@/components/brand/pattern";
+import { Code, Console, Database, Server } from "@/components/icons/forma";
+
+// The intro's 1:1 abstraction: Prismo at the centre of one connected toolchain.
+// The four pieces the copy names — schema, database, hosting, CLI — sit on a
+// rail wired up to the agent above them, so the picture says the section's
+// point: one connected Prisma toolchain the agent drives, not four separate
+// contexts. Square by design (1:1), filling its column so it reads as one large
+// object; the copy beside it is centred to the square (see AgentIntro).
+const NODES = [
+ { Icon: Code, label: "Schema" },
+ { Icon: Database, label: "Database" },
+ { Icon: Server, label: "Hosting" },
+ { Icon: Console, label: "CLI" },
+];
+
+export function AgentToolchain() {
+ return (
+
+ {/* cube pattern, faint at the top (the panel idiom) */}
+
+
+
+ {/* the spectral bottom wash, as on the hero panel */}
+
+
+ {/* Prismo, floating over a soft bloom */}
+
+
+
+
+
+ {/* the connected toolchain: a rail wired up to the agent */}
+
+ {/* drop line from the agent to the rail */}
+
+ {/* the rail */}
+
+
+ {NODES.map(({ Icon, label }) => (
+
+ {/* connector stub rising to the rail */}
+
+
+
+
+
+ {label}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/site/src/components/use-case/ai-agents/ai-agents-page.tsx b/apps/site/src/components/use-case/ai-agents/ai-agents-page.tsx
new file mode 100644
index 00000000000..cbb2250b49b
--- /dev/null
+++ b/apps/site/src/components/use-case/ai-agents/ai-agents-page.tsx
@@ -0,0 +1,70 @@
+import { CtaBurst } from "@/components/sections/cta-burst";
+import { LogoCloud } from "@/components/sections/logo-cloud";
+import { TestimonialsReveal } from "@/components/sections/testimonials-reveal";
+import { UseCaseHero } from "@/components/use-case/use-case-hero";
+import { aiAgentsUseCase } from "./content";
+import {
+ AgentBuilds,
+ AgentCompare,
+ AgentDeploy,
+ AgentFit,
+ AgentIntro,
+ AgentStack,
+ AgentWhen,
+} from "./sections";
+
+// Rotates through the brand's three hues, in the order the homepage uses.
+const CHECK_COLORS = ["text-prism-cyan-500", "text-prism-yellow-400", "text-prism-red-500"];
+
+// The AI & Agents use-case page, in the doc's section order:
+//
+// hero → logo strip → what Prisma is → when to use → is it the right fit →
+// the stack → where can I deploy → how it compares → what agents can build →
+// testimonials → closer
+//
+// Some sections are existing site components reused as-is rather than restyled,
+// so a fix to the homepage or product pages reaches this page too:
+// - the logo strip is the homepage LogoCloud;
+// - testimonials and the closer are the site's TestimonialsReveal and CtaBurst;
+// - the hero is the one every use-case page shares (use-case-hero.tsx). It
+// used to be this page's own purpose-built agent console; the console went
+// and the agent character took its place (client feedback, 2026-09-04), at
+// which point there was nothing left for the four pages to disagree about.
+//
+// The rest are this page's own sections (see sections.tsx) — the doc's copy has
+// no slot in the /use-cases template shape.
+export function AiAgentsUseCasePage() {
+ const c = aiAgentsUseCase;
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ({
+ label,
+ color: CHECK_COLORS[i % CHECK_COLORS.length],
+ // the third benefit is a long list — drop it to its own line below
+ ownLine: i === 2,
+ }))}
+ primaryCta={c.cta.primaryCta}
+ secondaryCta={c.cta.secondaryCta}
+ />
+
+ );
+}
diff --git a/apps/site/src/components/use-case/ai-agents/compare-abstractions.tsx b/apps/site/src/components/use-case/ai-agents/compare-abstractions.tsx
new file mode 100644
index 00000000000..86a4806e360
--- /dev/null
+++ b/apps/site/src/components/use-case/ai-agents/compare-abstractions.tsx
@@ -0,0 +1,85 @@
+import { IconTile } from "@/components/brand/icon-tile";
+import { Pattern } from "@/components/brand/pattern";
+import { Code, Console, Database, Rocket, Server } from "@/components/icons/forma";
+import { cn } from "@/lib/utils";
+
+// The two abstractions for "How Prisma compares to stitched-together stacks",
+// one per column of AgentCompare. Both are labelled only with terms the section
+// copy already uses — the five separate concerns on the left ("the database,
+// ORM, hosting, logs, and deployment"), the Prisma pieces on the right ("the
+// Prisma schema, Prisma Postgres, Prisma Compute … CLIs and Management API").
+// No invented product copy.
+
+// Left — five separate tools sitting apart: dashed, muted, staggered, with no
+// rail joining them. The agent has to reason across each on its own.
+const SEPARATE = [
+ { Icon: Database, label: "Database" },
+ { Icon: Code, label: "ORM" },
+ { Icon: Server, label: "Hosting" },
+ { Icon: Console, label: "Logs" },
+ { Icon: Rocket, label: "Deployment" },
+];
+
+export function StitchedAbstraction() {
+ return (
+
+ );
+}
+
+// Right — one connected layer: the Prisma pieces stacked in a single spectrum-
+// edged panel, joined by a spine, so they read as one thing rather than five.
+const PIECES = [
+ { Icon: Code, label: "Prisma schema" },
+ { Icon: Database, label: "Prisma Postgres" },
+ { Icon: Server, label: "Prisma Compute" },
+ { Icon: Console, label: "CLIs & Management API" },
+];
+
+export function PrismaAbstraction() {
+ return (
+
+
+
+
+
+ {PIECES.map(({ Icon, label }) => (
+
+
+
+
+ {label}
+
+ ))}
+
+
+ );
+}
diff --git a/apps/site/src/components/use-case/ai-agents/content.ts b/apps/site/src/components/use-case/ai-agents/content.ts
new file mode 100644
index 00000000000..7036e97290c
--- /dev/null
+++ b/apps/site/src/components/use-case/ai-agents/content.ts
@@ -0,0 +1,194 @@
+import type { ProductIconName } from "@/components/product/icons";
+import type { ProductPageContent } from "@/components/product/types";
+
+// The "AI & Agents" use-case page, at /use-cases/ai-agents.
+//
+// Copy is André's "USE CASE — AI & AGENTS" doc, transcribed verbatim — no line
+// added, removed, tightened or reworded (André, 2026-08-25). This copy carries
+// a different section set from the /use-cases/template shape (it has no
+// three-step Define/Deploy/Iterate, no D4 differentiators and no FAQs; it adds
+// "What Prisma is for AI agents", "When to use", "Is it the right fit", "The
+// stack", "Where can I deploy", "How it compares" and "What agents can build"),
+// so it gets its own composition (ai-agents-page.tsx) that reuses the template's
+// components and idioms rather than being forced into the template's slots.
+//
+// Two copy-placement calls, both preserving every word:
+// - The doc's top label "USE CASE — AI & AGENTS" is the page-type marker, the
+// same role the RoleKicker already plays; the eyebrow carries the use-case
+// name "AI & Agents" (sentence-cased per the RoleKicker rule — the dot is
+// the accent, the label is never all-caps).
+// - The doc's hero has no visual and no stats microline, so neither is
+// invented: the hero visual is filled with the existing Console illustration
+// (see ai-agents-page.tsx) and the microline is left off.
+const CONSOLE = "https://console.prisma.io";
+const CONTACT = "/contact";
+
+type Cta = { label: string; href: string };
+/** Icon + heading + body — the "When to use" and "The stack" grids. */
+type IconItem = { icon: ProductIconName; title: string; body: string };
+/** Heading + body, no icon — the "What agents can build" cards (no icons in copy). */
+type TextItem = { title: string; body: string };
+
+export type AgentUseCaseContent = {
+ /** Route segment: /use-cases/. */
+ slug: string;
+ meta: { title: string; description: string };
+ /** Hero eyebrow — the use-case name, rendered as the site's RoleKicker. */
+ eyebrow: string;
+ /** Runs through the shared ProductHero; subheadline is the two hero paragraphs. */
+ hero: ProductPageContent["hero"];
+ /** "What Prisma is for AI agents" — a lede and two narrative paragraphs. */
+ intro: { headline: string; lede: string; body: string[] };
+ /** "When to use Prisma for agent-driven apps" — intro + four icon cards. */
+ when: { headline: string; intro: string; items: IconItem[] };
+ /** "Is Prisma the right fit for AI and agents?" — the suited line and the honest caveat. */
+ fit: { headline: string; suited: string; caveat: string };
+ /** "A stack built for agents to drive end to end" — intro + four layers. */
+ stack: { headline: string; intro: string; items: IconItem[] };
+ /** "Where can I deploy my agent-built TypeScript app?" — intro, the terminal animation, the loop line. */
+ deploy: { headline: string; intro: string; animationLabel: string; body: string };
+ /** "How Prisma compares to stitched-together stacks" — the two prose columns. */
+ compare: { headline: string; before: string; after: string };
+ /** "What agents can build with Prisma" — three build types. */
+ builds: { headline: string; items: TextItem[] };
+ /** The testimonials section heading, carried by the shared TestimonialsReveal. */
+ testimonialsHeading: string;
+ /** Closing CTA. */
+ cta: { headline: string; body: string; benefits: string[]; primaryCta: Cta; secondaryCta: Cta };
+};
+
+export const aiAgentsUseCase: AgentUseCaseContent = {
+ slug: "ai-agents",
+ meta: {
+ title: "AI & Agents",
+ description: "The infrastructure layer for agent-driven TypeScript apps.",
+ },
+ eyebrow: "AI & Agents",
+ hero: {
+ headline: "The infrastructure layer for agent-driven TypeScript apps",
+ headlineEmphasis: "infrastructure",
+ subheadline: [
+ "Prisma is integrated TypeScript infrastructure for AI coding agents. It gives agents a readable data model, managed Postgres, app hosting, migrations, logs, and deploy workflows they can operate through Prisma’s CLIs and Management API.",
+ "Prisma is best for teams building TypeScript apps with agents like Claude Code, Cursor, Codex, Windsurf, v0, or Bolt, especially when the app needs a real database, a deployable backend, and a workflow the agent can keep moving through after it writes the first version of the code.",
+ ],
+ benefits: [
+ "A machine-readable Prisma schema your agent can inspect, update, and migrate",
+ "Prisma Postgres and Prisma Compute in one connected TypeScript stack",
+ "CLIs and Management API for provisioning, deployment, logs, and redeployment",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+ intro: {
+ headline: "What Prisma is for AI agents",
+ lede: "Prisma is the infrastructure layer for agent-driven TypeScript apps.",
+ body: [
+ "It connects the parts an agent needs to ship a working application: the data model, database, ORM, migrations, hosting, logs, and deployment workflow. The agent gets one connected Prisma toolchain instead of separate database, ORM, and hosting contexts to reason through.",
+ "For AI-assisted development, that matters because the agent can keep working through the backend loop: update the schema, provision the database, run migrations, deploy the app, inspect logs, fix issues, and redeploy.",
+ ],
+ },
+ when: {
+ headline: "When to use Prisma for agent-driven apps",
+ intro:
+ "Use Prisma when you want an AI coding agent to help ship a TypeScript app that needs more than generated code.",
+ items: [
+ {
+ icon: "code",
+ title: "Use Prisma when your agent needs a clear data model",
+ body: "Prisma schema gives the agent a readable view of your data model, relationships, and migrations, so it can make changes with shared context.",
+ },
+ {
+ icon: "database",
+ title: "Use Prisma when your agent needs a database it can provision",
+ body: "Prisma Postgres gives the agent a managed Postgres database it can create and connect as part of the same Prisma workflow.",
+ },
+ {
+ icon: "rocket",
+ title: "Use Prisma when your agent needs to deploy the app",
+ body: "Prisma Compute gives the agent a place to deploy the TypeScript app in the same Prisma project, alongside its Prisma Postgres database.",
+ },
+ {
+ icon: "repeat",
+ title: "Use Prisma when your agent needs to debug and redeploy",
+ body: "Prisma’s CLIs and Management API expose the workflow programmatically, so an agent can deploy, inspect logs, diagnose issues, apply fixes, and redeploy.",
+ },
+ ],
+ },
+ fit: {
+ headline: "Is Prisma the right fit for AI and agents?",
+ suited:
+ "Prisma is best suited for TypeScript applications and agent-driven TypeScript workflows.",
+ caveat:
+ "Prisma may not be the right fit if your app is primarily outside the TypeScript ecosystem, if you need a fully bundled backend platform with built-in auth, or if you only need a standalone database without the ORM, schema, migration, and deployment workflow around it.",
+ },
+ stack: {
+ headline: "A stack built for agents to drive end to end",
+ intro: "Prisma gives agents one connected TypeScript stack to operate across.",
+ items: [
+ {
+ icon: "code",
+ title: "Schema",
+ body: "The Prisma schema gives the agent a structured source of context for the data model.",
+ },
+ {
+ icon: "database",
+ title: "Database",
+ body: "Prisma Postgres gives the agent a managed Postgres database to provision and connect.",
+ },
+ {
+ icon: "server",
+ title: "Hosting",
+ body: "Prisma Compute gives the agent a deployment target for the TypeScript app.",
+ },
+ {
+ icon: "console",
+ title: "CLI and Management API",
+ body: "Prisma’s CLIs and Management API give the agent structured interfaces for provisioning, deployment, logs, and redeployment.",
+ },
+ ],
+ },
+ deploy: {
+ headline: "Where can I deploy my agent-built TypeScript app?",
+ intro:
+ "Prisma is a strong fit for deploying agent-built TypeScript apps when the app needs a database, migrations, hosting, and a repeatable deploy/debug/redeploy workflow.",
+ animationLabel:
+ "Terminal animation: agent runs the full build → deploy → debug → redeploy loop",
+ body: "An agent can use Prisma to move from prompt to deploy in one loop: update the schema, migrate the database, deploy the app, inspect the logs, fix what broke, and redeploy through Prisma’s toolchain.",
+ },
+ compare: {
+ headline: "How Prisma compares to stitched-together stacks",
+ before:
+ "In a stitched-together stack, the agent has to reason across separate tools for the database, ORM, hosting, logs, and deployment.",
+ after:
+ "With Prisma, those pieces live in one TypeScript infrastructure layer. The agent can work from the Prisma schema, provision Prisma Postgres, deploy to Prisma Compute, and continue through logs and redeploys using Prisma’s CLIs and Management API.",
+ },
+ builds: {
+ headline: "What agents can build with Prisma",
+ items: [
+ {
+ title: "Internal tools",
+ body: "Generate a data model, connect a database, deploy the app, and keep iterating as requirements change.",
+ },
+ {
+ title: "AI products",
+ body: "Build TypeScript apps that need a real database, server-side logic, and a deployable TypeScript backend.",
+ },
+ {
+ title: "SaaS prototypes",
+ body: "Move from an idea to a working app without spending the first day wiring infrastructure together.",
+ },
+ ],
+ },
+ testimonialsHeading: "Trusted by more than 500K monthly active developers globally",
+ cta: {
+ headline: "Give your agent infrastructure it can keep working through",
+ body: "Prisma gives AI coding agents the connected TypeScript infrastructure to build, deploy, debug, and iterate on real apps.",
+ benefits: [
+ "Free to start, no credit card required",
+ "One integrated TypeScript stack",
+ "Built around Prisma schema, Prisma Postgres, Prisma Compute, CLIs, and Management API",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+};
diff --git a/apps/site/src/components/use-case/ai-agents/deploy-loop-terminal.tsx b/apps/site/src/components/use-case/ai-agents/deploy-loop-terminal.tsx
new file mode 100644
index 00000000000..12167250118
--- /dev/null
+++ b/apps/site/src/components/use-case/ai-agents/deploy-loop-terminal.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { Bot, Check, CheckCircle, XCircle } from "@/components/icons/forma";
+import { cn } from "@/lib/utils";
+
+// The build → deploy → debug → redeploy loop, running. Not a still and not a
+// caption: the four stages light up in sequence, each streaming its own CLI
+// lines, then it wraps back to the start — the loop the copy describes, shown
+// as a loop. Commands and results are illustrative in the step-mocks idiom
+// (real `prisma` verbs, skeleton results), not invented product copy.
+//
+// prefers-reduced-motion holds the finished state with every stage lit, so the
+// picture still reads without any movement.
+
+type Line =
+ | { kind: "cmd"; text: string }
+ | { kind: "ok"; text: string }
+ | { kind: "warn"; text: string }
+ | { kind: "agent"; text: string };
+
+const STAGES: { label: string; lines: Line[] }[] = [
+ {
+ label: "build",
+ lines: [
+ { kind: "cmd", text: "prisma migrate deploy" },
+ { kind: "ok", text: "3 migrations applied" },
+ ],
+ },
+ {
+ label: "deploy",
+ lines: [
+ { kind: "cmd", text: "prisma deploy" },
+ { kind: "ok", text: "web · api · worker built" },
+ { kind: "ok", text: "health check — 200 OK" },
+ ],
+ },
+ {
+ label: "debug",
+ lines: [
+ { kind: "cmd", text: "prisma app logs" },
+ { kind: "warn", text: "TypeError in /api/checkout" },
+ { kind: "agent", text: "agent: patch applied" },
+ ],
+ },
+ {
+ label: "redeploy",
+ lines: [
+ { kind: "cmd", text: "prisma deploy" },
+ { kind: "ok", text: "redeployed to us-west-1" },
+ ],
+ },
+];
+
+const STEP_MS = 1700;
+
+const SPECTRUM = "linear-gradient(90deg,#01d7e4,#f3c306 25%,#f37a03 50%,#f43531 74%,#f00e5c)";
+
+// The deploy result summary — every value is a fact the log above already
+// streamed, so nothing new is invented; the panel just states the outcome.
+const RESULT: { label: string; value: string; ok?: boolean }[] = [
+ { label: "url", value: "acme-dashboard.prisma.app" },
+ { label: "services", value: "web · api · worker", ok: true },
+ { label: "migrations", value: "3 applied", ok: true },
+ { label: "health", value: "200 OK", ok: true },
+ { label: "region", value: "us-west-1" },
+];
+
+function LogLine({ line, caret }: { line: Line; caret?: boolean }) {
+ return (
+
+ {line.kind === "cmd" ? (
+ <>
+ $
+ {line.text}
+
+ ) : line.kind === "ok" ? (
+ <>
+
+ {line.text}
+
+ ) : line.kind === "warn" ? (
+ <>
+
+ {line.text}
+
+ ) : (
+ <>
+
+ {line.text}
+
+ )}
+ {caret ? (
+
+ ) : null}
+
+ );
+}
+
+export function DeployLoopTerminal({ label }: { label: string }) {
+ const reduce = useReducedMotion();
+ const [step, setStep] = useState(0);
+
+ useEffect(() => {
+ // Under reduced motion the render shows every stage lit already, so there's
+ // nothing to drive — leave `step` be and don't start the interval.
+ if (reduce) return;
+ const id = setInterval(() => setStep((s) => (s + 1) % STAGES.length), STEP_MS);
+ return () => clearInterval(id);
+ }, [reduce]);
+
+ // Accumulate lines through the current stage, so the log fills across a cycle
+ // and clears when it wraps — the loop restarting.
+ const shown = reduce ? STAGES : STAGES.slice(0, step + 1);
+ const flat = shown.flatMap((s, si) => s.lines.map((line, li) => ({ line, si, li })));
+
+ return (
+
+ {/* window chrome */}
+
+
+
+ agent — deploy loop
+
+
+ running
+
+
+
+ {/* stage strip — the four loop stages, filling in sequence */}
+
+ {STAGES.map((s, i) => {
+ const active = reduce || i <= step;
+ return (
+
+
+ {/* the log — a fixed band, newest anchored to the bottom so accumulating
+ lines scroll under the fold rather than resizing the card */}
+
+
+
+ {flat.map(({ line, si, li }) => (
+
+ ))}
+
+
+
+
+ {/* the deploy result — a clean summary of what the loop shipped, drawn
+ only from the log's own facts. Fills the rest of the card so the space
+ reads as the deployed outcome rather than an empty terminal. */}
+
+
+
+
+ Deployed
+
+
+ live
+
+
+
+
+ {RESULT.map(({ label, value, ok }) => (
+
+ {label}
+
+ {ok ? (
+
+ ) : null}
+ {value}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/site/src/components/use-case/ai-agents/sections.tsx b/apps/site/src/components/use-case/ai-agents/sections.tsx
new file mode 100644
index 00000000000..45c2f94cf27
--- /dev/null
+++ b/apps/site/src/components/use-case/ai-agents/sections.tsx
@@ -0,0 +1,292 @@
+import { IconTile } from "@/components/brand/icon-tile";
+import { Pattern } from "@/components/brand/pattern";
+import { Bot, CheckBold, LayoutGrid, Rocket, X } from "@/components/icons/forma";
+import { PRODUCT_ICONS } from "@/components/product/icons";
+import { ProductFeatures } from "@/components/product/product-features";
+import { ProductNarrative } from "@/components/product/product-narrative";
+import type { ProductIllustrationName } from "@/components/product/illustrations";
+import { Reveal } from "@/components/motion/reveal";
+import { cn } from "@/lib/utils";
+import { AgentToolchain } from "./agent-toolchain";
+import { PrismaAbstraction, StitchedAbstraction } from "./compare-abstractions";
+import { DeployLoopTerminal } from "./deploy-loop-terminal";
+import type { AgentUseCaseContent } from "./content";
+
+// The AI & Agents page's own sections — an illustrated narrative, an icon-card
+// grid, an asymmetric split, the product feature grid, a running terminal, a
+// two-column comparison, a card row. The "When to use" and "What agents
+// can build" sections both use the site's icon-tile card, since the copy for
+// each names an icon per item and asks to be read as one card per point; the
+// layouts between them keep the page from reading as one long card wall. Where a
+// section is anchored by a visual, it reuses
+// the product pages' own abstractions (the feature cards) or builds a first-
+// class one (the toolchain diagram, the deploy-loop terminal). Shared sections
+// (hero, logo strip, testimonials, closer) are composed in ai-agents-page.tsx.
+
+const HEADING = "text-balance text-[clamp(1.75rem,2.75vw,2.375rem)] leading-[1.1]";
+const SPECTRUM = "linear-gradient(85deg,#01d7e4,#f3c306 25%,#f37a03 50%,#f43531 74%,#f00e5c)";
+
+// "What Prisma is for AI agents" — the /orm "argue one point with a visual"
+// pattern (ProductNarrative): the headline and copy on the left, a purpose-built
+// 1:1 abstraction on the right — Prismo at the centre of one connected toolchain
+// (schema, database, hosting, CLI), which is exactly what the copy argues. The
+// lede leads the paragraphs, so all three lines are kept.
+export function AgentIntro({ intro }: Pick) {
+ return (
+
+
+
+ }
+ />
+ );
+}
+
+// "When to use Prisma for agent-driven apps" — icon cards. The copy names an
+// icon per item (schema→code, database, deploy→rocket, debug→repeat), so the
+// section respects them: the /postgres "outcomes" tile (ProductProblem) — an
+// icon tile, a heading, a line of copy, a quiet border — in the same four-up row
+// that page uses, so the four "Use Prisma when your agent needs…" points each
+// read as one card.
+export function AgentWhen({ when }: Pick) {
+ return (
+
+
+
+ );
+}
+
+// "Is Prisma the right fit for AI and agents?" — an asymmetric split, not two
+// equal boxes. The affirmative is promoted: wider, elevated, spectrum-edged,
+// set larger. The honest caveat sits beside it, plain and muted — present, but
+// visibly the secondary voice.
+export function AgentFit({ fit }: Pick) {
+ return (
+
+
+
+
{fit.headline}
+
+
+
+
+
+
+
+
+
+
+ {fit.suited}
+
+
+
+
+
+
+
{fit.caveat}
+
+
+
+
+
+ );
+}
+
+// "A stack built for agents to drive end to end" — the four layers as the
+// product pages' own feature grid (ProductFeatures): a wrapped prismatic panel
+// of ray-photo cards, each carrying the real abstraction that product page
+// shows — the schema file, the database panel, the co-located app, the deploy
+// log. Reusing the component (not a copy) keeps this page in lockstep with
+// /orm, /postgres and /compute.
+const STACK_ILLUSTRATIONS: ProductIllustrationName[] = [
+ "schemaFile",
+ "databasePanel",
+ "coLocated",
+ "deployLog",
+];
+export function AgentStack({ stack }: Pick) {
+ return (
+ ({
+ name: item.title,
+ description: item.body,
+ illustration: STACK_ILLUSTRATIONS[i],
+ })),
+ }}
+ // four cards run two-up, where the default block leaves them squat; the
+ // hero panels need the extra height so their content isn't clipped
+ mediaHeight="h-[26rem]"
+ // these are the full-bleed hero panels; float them so they read as one
+ // card each instead of hitting the edges (André, 2026-08-26)
+ frameIllustration
+ />
+ );
+}
+
+// "Where can I deploy my agent-built TypeScript app?" — the loop, running. The
+// terminal cycles build → deploy → debug → redeploy on its own (see
+// deploy-loop-terminal.tsx), so the section shows the animation the doc asked
+// for rather than describing it. The doc's animation note is carried as the
+// terminal's accessible label, so nothing is lost. Intro and body copy frame it.
+export function AgentDeploy({ deploy }: Pick) {
+ return (
+
+ {/* headline sits with its copy on the left; the loop runs on the right in
+ a 1:1 frame, matching the intro's square visual */}
+
+
+
+
{deploy.headline}
+
+
+
+
+ {deploy.intro}
+
+
+
+
+ {deploy.body}
+
+
+
+
+
+
+
+ {/* spectrum bloom low in the card, the deploy glow */}
+
+ {/* terminal fills the square so the loop reads as the visual, not a
+ small card floating in it */}
+
+
+
+
+
+
+
+ );
+}
+
+// "How Prisma compares to stitched-together stacks" — two columns, each an
+// abstraction over its paragraph: the five separate tools on the left, the one
+// connected Prisma layer on the right (see compare-abstractions.tsx). The
+// headline carries the comparison; the copy stays verbatim, one paragraph a
+// side, nothing labelled or invented.
+export function AgentCompare({ compare }: Pick) {
+ return (
+
+
+
+
{compare.headline}
+
+
+ {/* both abstractions are the same fixed height so their panels align
+ top and bottom; the paragraphs sit beneath, lengths free to differ */}
+
+
+
+
+
+
+
+ {compare.before}
+
+
+
+
+
+
+
+
+
+
+ {compare.after}
+
+
+
+
+
+
+ );
+}
+
+// "What agents can build with Prisma" — three build types in the site's own
+// card idiom (the /postgres "ships with the rest of your stack" tiles): an icon
+// tile, a heading, a line of copy, a quiet border. One distinct icon each —
+// internal tools, an AI product, a prototype to launch.
+const BUILD_ICONS = [LayoutGrid, Bot, Rocket];
+export function AgentBuilds({ builds }: Pick) {
+ return (
+
+
+
+ );
+}
diff --git a/apps/site/src/components/use-case/segment/abstractions/engineering-teams.tsx b/apps/site/src/components/use-case/segment/abstractions/engineering-teams.tsx
new file mode 100644
index 00000000000..a9f6abc7bf7
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/abstractions/engineering-teams.tsx
@@ -0,0 +1,12 @@
+import { OrmIllustration } from "@/components/sections/orm-illustration";
+
+// Intro — the ORM illustration: the schema-backed, fully typed client the team
+// shares. Reuses the landing-page illustration so the picture shows the real
+// product, not a placeholder (teammate feedback, 2026-08-26).
+//
+// The hero visual that used to live here — a fabricated PR-workflow console —
+// is gone: the use-case heroes carry the agent character now (client feedback,
+// 2026-09-04). See use-case-hero.tsx.
+export function EngineeringIntroVisual() {
+ return ;
+}
diff --git a/apps/site/src/components/use-case/segment/abstractions/saas-teams.tsx b/apps/site/src/components/use-case/segment/abstractions/saas-teams.tsx
new file mode 100644
index 00000000000..60695dfc0ec
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/abstractions/saas-teams.tsx
@@ -0,0 +1,12 @@
+import { ConsoleIllustration } from "@/components/sections/console-illustration";
+
+// Intro — the actual Prisma Console: one project with an app and a database,
+// ready to deploy. Reuses the landing-page illustration so the picture shows
+// the real product, not a placeholder (teammate feedback, 2026-08-26).
+//
+// The hero visual that used to live here — a fabricated SaaS project console —
+// is gone: the use-case heroes carry the agent character now (client feedback,
+// 2026-09-04). See use-case-hero.tsx.
+export function SaasIntroVisual() {
+ return ;
+}
diff --git a/apps/site/src/components/use-case/segment/abstractions/startups.tsx b/apps/site/src/components/use-case/segment/abstractions/startups.tsx
new file mode 100644
index 00000000000..5b7220743fc
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/abstractions/startups.tsx
@@ -0,0 +1,12 @@
+import { ComputeIllustration } from "@/components/sections/compute-illustration";
+
+// Intro — the Compute deploy illustration: a founder's app going live from the
+// same connected stack. Reuses the landing-page illustration so the picture
+// shows the real product, not a placeholder (teammate feedback, 2026-08-26).
+//
+// The hero visual that used to live here — a fabricated launch-to-scale
+// console — is gone: the use-case heroes carry the agent character now
+// (client feedback, 2026-09-04). See use-case-hero.tsx.
+export function StartupsIntroVisual() {
+ return ;
+}
diff --git a/apps/site/src/components/use-case/segment/comparison-table.tsx b/apps/site/src/components/use-case/segment/comparison-table.tsx
new file mode 100644
index 00000000000..43fa43bf7d8
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/comparison-table.tsx
@@ -0,0 +1,147 @@
+import { Marker } from "@/components/brand/marker";
+import { Reveal } from "@/components/motion/reveal";
+import { cn } from "@/lib/utils";
+
+// The audience use-case comparison table. Design starts from the pricing spec
+// table (pricing-spec-table.tsx) — the haloed panel, the lit column with a
+// spectrum cap, the mobile pivot — but the shape is different: these tables are
+// a three-column prose comparison (the comparison point, an assembled/
+// fragmented stack, and Prisma) rather than a four-plan grid, so the cells hold
+// sentences and the Prisma column is the one that's lifted. Copy is verbatim.
+
+const SPECTRUM =
+ "linear-gradient(85deg, #01d7e4 0%, #f3c306 25%, #f37a03 50%, #f43531 74%, #f00e5c 100%)";
+const HALO =
+ "conic-gradient(var(--color-prism-yellow-300), var(--color-prism-red-500) 32%, var(--color-prism-cyan-400) 64%, var(--color-prism-yellow-300))";
+
+const HEADING = "text-balance text-[clamp(1.75rem,2.75vw,2.375rem)] leading-[1.1]";
+
+export type ComparisonRow = { point: string; assembled: string; prisma: string };
+
+export type ComparisonContent = {
+ headline: string;
+ intro: string[];
+ /** Header for the first (row-label) column, e.g. "Comparison point". */
+ pointHeader: string;
+ /** Header for the assembled/fragmented column, e.g. "Assembled SaaS stack". */
+ assembledHeader: string;
+ rows: ComparisonRow[];
+};
+
+export function ComparisonTable({ comparison }: { comparison: ComparisonContent }) {
+ const { headline, intro, pointHeader, assembledHeader, rows } = comparison;
+ return (
+
+
+
+
{headline}
+
+
+ {intro.map((para, i) => (
+
+
{para}
+
+ ))}
+
+
+
+ {/* the pricing table's prismatic halo — inner edge + soft bloom */}
+
+
+
+ {/* mobile / tablet: pivot each row to a label with the two values
+ stacked, the Prisma value lifted */}
+
+ {rows.map((row, i) => (
+
+
{row.point}
+
+
+
+ {assembledHeader}
+
+
+ {row.assembled}
+
+
+
+
+
Prisma
+
{row.prisma}
+
+
+
+ ))}
+
+
+ {/* desktop */}
+
+
+
{headline}
+
+
+
+
+
+
+
+
+
+ {pointHeader}
+
+
+
+
+ {assembledHeader}
+
+
+
+
+
+ Prisma
+ Recommended
+
+
+
+
+
+ {rows.map((row, i) => (
+
+
+ {row.point}
+
+
+ {row.assembled}
+
+
+ {row.prisma}
+
+
+ ))}
+
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/components/use-case/segment/content/engineering-teams.ts b/apps/site/src/components/use-case/segment/content/engineering-teams.ts
new file mode 100644
index 00000000000..7a9feab81a7
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/content/engineering-teams.ts
@@ -0,0 +1,154 @@
+import type { SegmentUseCaseContent } from "../types";
+
+// "Engineering Teams" use case, at /use-cases/engineering-teams. Copy is
+// André's doc, transcribed verbatim — no line added, removed, or reworded.
+const CONSOLE = "https://console.prisma.io";
+const CONTACT = "/contact";
+
+export const engineeringTeamsUseCase: SegmentUseCaseContent = {
+ slug: "engineering-teams",
+ meta: {
+ title: "Engineering Teams",
+ description: "Best backend workflow for TypeScript engineering teams.",
+ },
+ eyebrow: "Engineering Teams",
+ hero: {
+ headline: "Best backend workflow for TypeScript engineering teams",
+ headlineEmphasis: "backend workflow",
+ subheadline: [
+ "Prisma is an integrated TypeScript stack for engineering teams that need one shared workflow across schema, queries, migrations, preview environments, and production.",
+ "Prisma is best for teams that want to keep engineers, environments, and coding agents aligned as the backend grows more complex.",
+ ],
+ benefits: [
+ "One schema as the shared contract across your team",
+ "Type-safe queries that catch mistakes before they ship",
+ "A production-like database for every branch and PR",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+ intro: {
+ headline: "Why engineering teams use Prisma",
+ lede: "As engineering teams grow, backend workflows can start to drift. Data models change, migrations get harder to review, preview environments fall out of sync, and different engineers may handle queries, database changes, and deploys in different ways.",
+ body: [
+ "Prisma gives teams one connected TypeScript workflow for the parts of the backend that need to stay aligned: schema, queries, migrations, database environments, and deployment workflows.",
+ "The result is a backend workflow that is easier to review, easier to share across the team, and easier for agents to reason about.",
+ ],
+ },
+ when: {
+ headline: "When Prisma is a good fit for engineering teams",
+ intro:
+ "Use Prisma when your team is building with TypeScript and needs a shared backend workflow that stays consistent from local development to production.",
+ items: [
+ {
+ icon: "code",
+ title: "Your team needs one shared data model",
+ body: "Prisma schema gives engineers one readable source of context for the data model, relationships, and migrations.",
+ },
+ {
+ icon: "shield",
+ title: "You want safer query changes",
+ body: "Prisma Client gives your team fully typed queries, so mismatches can be caught during development before they become production issues.",
+ },
+ {
+ icon: "swap",
+ title: "Migrations need to be easier to review",
+ body: "Prisma Migrate generates reviewable migrations from the schema, so database changes are easier to inspect before they reach production.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Preview environments need real databases",
+ body: "Each deployed preview branch can get its own isolated app and database environment, so teams can test changes without touching production.",
+ },
+ ],
+ },
+ fit: {
+ headline: "Is Prisma the right fit for engineering teams?",
+ suited:
+ "Prisma is best suited for TypeScript engineering teams that want a shared workflow across the data model, queries, migrations, database environments, and deploy process.",
+ caveat:
+ "Prisma may not be the right fit if your team is primarily outside the TypeScript ecosystem, if you only need a standalone database, or if your team wants to manage the ORM, database, hosting, migrations, and preview environments as separate tools.",
+ },
+ comparison: {
+ headline: "Prisma vs. a fragmented backend workflow",
+ intro: [
+ "Engineering teams often start with an ORM, a database provider, a hosting platform, and a migration workflow that were chosen separately. That can work early on, but as the team grows, the seams between those tools become harder to manage.",
+ "Prisma brings the core backend workflow into one TypeScript stack, so engineers and agents work from the same schema, query layer, migration workflow, and project context.",
+ ],
+ pointHeader: "Engineering need",
+ assembledHeader: "Fragmented backend workflow",
+ rows: [
+ {
+ point: "Shared data model",
+ assembled:
+ "The data model may be spread across ORM files, SQL, migrations, and application code.",
+ prisma: "Prisma schema gives the team one shared, readable contract for the data model.",
+ },
+ {
+ point: "Query safety",
+ assembled: "Query mistakes may show up during review, testing, or production.",
+ prisma: "Prisma Client catches type mismatches during development.",
+ },
+ {
+ point: "Migration review",
+ assembled:
+ "Database changes can be hard to understand when schema, SQL, and application code drift.",
+ prisma: "Prisma Migrate creates reviewable migrations from the schema.",
+ },
+ {
+ point: "Preview environments",
+ assembled: "App previews and database changes may need to be coordinated across providers.",
+ prisma:
+ "Deployed preview branches can be paired with isolated app and database environments.",
+ },
+ {
+ point: "Team onboarding",
+ assembled: "New engineers have to learn conventions spread across tools and people.",
+ prisma: "New engineers can start from the schema and shared Prisma workflow.",
+ },
+ {
+ point: "Agent-assisted development",
+ assembled: "Agents may need to infer backend context across separate tools and files.",
+ prisma:
+ "Agents can reason from Prisma schema and work through Prisma’s CLIs and Management API.",
+ },
+ ],
+ },
+ builds: {
+ headline: "Who Prisma is best for",
+ items: [
+ {
+ icon: "layers",
+ title: "Growing TypeScript teams",
+ body: "Keep engineers aligned around one schema, one typed client, and one migration workflow.",
+ },
+ {
+ icon: "swap",
+ title: "Teams with frequent schema changes",
+ body: "Make database changes easier to review before they reach production.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Teams using preview environments",
+ body: "Test app and database changes together before merging.",
+ },
+ {
+ icon: "bot",
+ title: "Teams using coding agents",
+ body: "Give agents a clearer backend context and a structured workflow for schema changes, deploys, logs, fixes, and redeploys.",
+ },
+ ],
+ },
+ testimonialsHeading: "Trusted by more than 500K monthly active developers globally",
+ cta: {
+ headline: "Keep your engineering team aligned from schema to production",
+ body: "Prisma gives engineering teams one connected TypeScript workflow for schema, queries, migrations, preview environments, and production.",
+ benefits: [
+ "Free to start, no credit card required",
+ "One shared stack across your whole team",
+ "Built for TypeScript teams and agent-assisted development",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+};
diff --git a/apps/site/src/components/use-case/segment/content/saas-teams.ts b/apps/site/src/components/use-case/segment/content/saas-teams.ts
new file mode 100644
index 00000000000..af5f6e1eba1
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/content/saas-teams.ts
@@ -0,0 +1,193 @@
+import type { SegmentUseCaseContent } from "../types";
+
+// "SaaS Teams" use case, at /use-cases/saas-teams. Copy is André's doc,
+// transcribed verbatim — no line added, removed, tightened or reworded.
+const CONSOLE = "https://console.prisma.io";
+const CONTACT = "/contact";
+
+export const saasTeamsUseCase: SegmentUseCaseContent = {
+ slug: "saas-teams",
+ meta: {
+ title: "SaaS Teams",
+ description: "Best platform for SaaS apps built with TypeScript.",
+ },
+ eyebrow: "SaaS Teams",
+ hero: {
+ headline: "Best platform for SaaS apps built with TypeScript",
+ headlineEmphasis: "SaaS apps",
+ subheadline: [
+ "Prisma is a strong fit for SaaS apps built with TypeScript when your team wants the app, database, ORM, migrations, preview environments, and deployment workflow in one connected stack.",
+ "Prisma is best for SaaS teams that want to ship product faster, spend less time connecting separate tools, and give both developers and coding agents one stack to build, deploy, debug, and iterate on end to end.",
+ ],
+ benefits: [
+ "Database, ORM, and hosting in one integrated stack, one bill",
+ "Operation-based pricing with spend limits",
+ "Isolated app and database environments for preview branches and PRs",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+ intro: {
+ headline: "What Prisma is for SaaS teams",
+ lede: "Prisma is integrated TypeScript infrastructure for building and running SaaS apps.",
+ body: [
+ "It brings the data model, ORM, managed Postgres, app hosting, migrations, preview environments, and deployment workflow into one Prisma project. Your team works from the same stack, and your agent has one connected toolchain to operate through.",
+ "For SaaS teams, that means fewer vendors to connect, fewer bills to reconcile, fewer environments to keep aligned, and a clearer workflow from feature development to production.",
+ ],
+ },
+ when: {
+ headline: "When to use Prisma for a SaaS app",
+ intro:
+ "Use Prisma when your SaaS team is building with TypeScript and wants the app, database, queries, migrations, and deploy workflow to stay connected as the product grows.",
+ items: [
+ {
+ icon: "layers",
+ title: "Use Prisma when you want one connected stack",
+ body: "Prisma ORM, Prisma Postgres, and Prisma Compute work together in one Prisma project, so your team spends less time wiring separate vendors together.",
+ },
+ {
+ icon: "settings",
+ title: "Use Prisma when pricing predictability matters",
+ body: "Prisma uses operation-based pricing with spend limits, so teams can estimate usage, cap spend, and plan growth with fewer billing surprises.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Use Prisma when your team needs safer preview environments",
+ body: "Each deployed preview branch can get its own isolated app and database, so changes can be tested without touching production.",
+ },
+ {
+ icon: "bot",
+ title: "Use Prisma when agents are part of your workflow",
+ body: "Prisma’s CLIs and Management API give coding agents a structured way to provision, deploy, inspect logs, fix issues, and redeploy across the stack.",
+ },
+ ],
+ },
+ fit: {
+ headline: "Is Prisma the right fit for SaaS teams?",
+ suited:
+ "Prisma is best suited for TypeScript SaaS teams that want an integrated app, database, ORM, and deployment workflow.",
+ caveat:
+ "Prisma may not be the right fit if your team needs built-in auth and storage from the same platform, if your app is primarily outside the TypeScript ecosystem, or if you only need a standalone database with no ORM, migrations, hosting, or agent-driven workflow around it.",
+ },
+ whyChoose: {
+ headline: "Why SaaS teams choose Prisma over a stitched-together stack",
+ intro: [
+ "A typical SaaS stack uses a database from one vendor, hosting from another, and an ORM in between. Each layer has its own setup, bill, environment model, and operational surface area.",
+ "Prisma brings the SaaS backend workflow closer together:",
+ ],
+ items: [
+ {
+ icon: "layoutGrid",
+ title: "Database, ORM, and hosting in one Prisma project",
+ body: "Your team can build against one connected TypeScript stack instead of managing separate database, ORM, and hosting contexts.",
+ },
+ {
+ icon: "repeat",
+ title: "One workflow from branch to production",
+ body: "Prisma keeps development, preview, and production workflows easier to reason about because app and database changes can move together.",
+ },
+ {
+ icon: "shield",
+ title: "One billing model with spend controls",
+ body: "Operation-based pricing and spend limits help teams plan usage before costs grow.",
+ },
+ {
+ icon: "console",
+ title: "One toolchain for developers and agents",
+ body: "Developers and coding agents can work through Prisma’s schema, CLIs, and Management API to keep the workflow moving.",
+ },
+ ],
+ },
+ comparison: {
+ headline: "How Prisma compares to Supabase, Neon, Vercel, and Drizzle for SaaS apps",
+ intro: [
+ "Prisma is a strong fit for TypeScript SaaS teams that want the core app, data model, database, queries, migrations, deploy workflow, and agent workflow to stay connected.",
+ "In an assembled stack, teams often combine tools like Supabase or Neon for Postgres, Vercel or Netlify for hosting, and Drizzle or another ORM for the data layer. Prisma brings those core workflows into one TypeScript stack with Prisma ORM, Prisma Postgres, Prisma Compute, Prisma schema, CLIs, and Management API.",
+ ],
+ pointHeader: "Comparison point",
+ assembledHeader: "Assembled SaaS stack",
+ rows: [
+ {
+ point: "Core setup",
+ assembled: "Database, ORM, and hosting are usually chosen and configured separately.",
+ prisma:
+ "Prisma ORM, Prisma Postgres, and Prisma Compute live in one connected TypeScript stack.",
+ },
+ {
+ point: "Data model",
+ assembled:
+ "The data model may be spread across ORM files, SQL, migrations, app code, and provider config.",
+ prisma: "Prisma schema gives the team one shared, typed data model to build from.",
+ },
+ {
+ point: "Deployment workflow",
+ assembled: "App deploys and database setup often happen in separate tools.",
+ prisma: "App, database, and deploy workflows can live in the same Prisma project.",
+ },
+ {
+ point: "Preview environments",
+ assembled:
+ "App previews and database branches may need to be coordinated across providers.",
+ prisma:
+ "Deployed preview branches can be paired with isolated app and database environments.",
+ },
+ {
+ point: "Pricing",
+ assembled: "Separate providers mean separate bills, limits, and usage models.",
+ prisma: "Operation-based pricing and spend limits help teams plan usage in one platform.",
+ },
+ {
+ point: "AI-assisted development",
+ assembled:
+ "Agents may need to move across separate contexts for database, ORM, hosting, logs, and deploys.",
+ prisma:
+ "Agents can work through Prisma schema, CLIs, and Management API across the workflow.",
+ },
+ {
+ point: "Best fit",
+ assembled:
+ "Teams that want to choose each layer separately and are comfortable managing the integration.",
+ prisma:
+ "TypeScript SaaS teams that want one connected workflow for app, data, deploys, previews, and agents.",
+ },
+ ],
+ },
+ builds: {
+ headline: "What SaaS teams build with Prisma",
+ intro: "Prisma is best for:",
+ items: [
+ {
+ icon: "layoutGrid",
+ title: "B2B SaaS products",
+ body: "Build and run your core app with a connected database, ORM, and hosting workflow.",
+ },
+ {
+ icon: "database",
+ title: "Multi-tenant SaaS apps",
+ body: "Model tenants in Prisma schema, manage migrations in the same workflow, and keep environments easier to reason about as the product grows.",
+ },
+ {
+ icon: "bot",
+ title: "AI-assisted SaaS teams",
+ body: "Give coding agents one stack to work through as they build, deploy, debug, and redeploy app changes.",
+ },
+ {
+ icon: "settings",
+ title: "Internal SaaS tools",
+ body: "Ship supporting dashboards, admin tools, and operational apps on the same stack your team already uses.",
+ },
+ ],
+ },
+ testimonialsHeading: "Trusted by more than 500K monthly active developers globally",
+ cta: {
+ headline: "Run your SaaS on one connected TypeScript stack",
+ body: "Prisma gives SaaS teams integrated TypeScript infrastructure for the app, database, queries, migrations, previews, and deploy workflow.",
+ benefits: [
+ "Free to start, no credit card required",
+ "One platform, one bill, predictable pricing",
+ "Trusted by 500K+ monthly active developers",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+};
diff --git a/apps/site/src/components/use-case/segment/content/startups.ts b/apps/site/src/components/use-case/segment/content/startups.ts
new file mode 100644
index 00000000000..807ba3a41cd
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/content/startups.ts
@@ -0,0 +1,151 @@
+import type { SegmentUseCaseContent } from "../types";
+
+// "Startups & Founders" use case, at /use-cases/startups. Copy is André's doc,
+// transcribed verbatim — no line added, removed, tightened or reworded.
+const CONSOLE = "https://console.prisma.io";
+const CONTACT = "/contact";
+
+export const startupsUseCase: SegmentUseCaseContent = {
+ slug: "startups",
+ meta: {
+ title: "Startups & Founders",
+ description: "Best TypeScript stack for founders building from MVP to scale.",
+ },
+ eyebrow: "Startups & Founders",
+ hero: {
+ headline: "Best TypeScript stack for founders building from MVP to scale",
+ headlineEmphasis: "MVP to scale",
+ subheadline: [
+ "Prisma is an integrated TypeScript stack for founders who need to launch a real product quickly, then keep building on the same foundation as usage grows.",
+ "It brings your app, database, ORM, migrations, and deployment workflow into one connected stack, so you can start fast without planning for a rebuild the moment you find traction.",
+ "Prisma is best for technical founders, small startup teams, and AI-assisted builders who want to ship a TypeScript app with a real database, predictable pricing, and a path from first deploy to real traffic.",
+ ],
+ benefits: [
+ "Build your MVP on the same stack you can keep using as you grow",
+ "Start free, then keep costs capped as usage increases",
+ "Give developers and coding agents one workflow from schema to deploy",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+ intro: {
+ headline: "Why founders start with Prisma",
+ lede: "Prisma gives founders one connected TypeScript stack for the parts of the product that usually slow early teams down: the data model, database, queries, migrations, and deployment workflow.",
+ body: [
+ "Instead of assembling those pieces across separate vendors, founders can launch the first version faster and keep building on the same foundation as usage grows.",
+ ],
+ },
+ when: {
+ headline: "When Prisma is a good fit for startups",
+ intro:
+ "Use Prisma when you’re building a TypeScript product and want to get from idea to deployed app without assembling your backend stack from separate vendors first.",
+ items: [
+ {
+ icon: "rocket",
+ title: "You need to launch quickly",
+ body: "Define your data model, create a database, and deploy your TypeScript app from one connected Prisma workflow.",
+ },
+ {
+ icon: "layoutGrid",
+ title: "Your team is small",
+ body: "A founder or small team can manage the database, migrations, and deploy workflow without dedicated infrastructure support from day one.",
+ },
+ {
+ icon: "shield",
+ title: "Pricing needs to stay predictable",
+ body: "Start free with no credit card, then use operation-based pricing and spend limits as traffic grows.",
+ },
+ {
+ icon: "layers",
+ title: "You want less rework later",
+ body: "Start your MVP on a stack designed for real traffic, so early infrastructure decisions hold up as the product grows.",
+ },
+ ],
+ },
+ fit: {
+ headline: "Is Prisma the right fit for startups?",
+ suited:
+ "Prisma is best suited for TypeScript products and teams that want an integrated app, database, ORM, migration, and deployment workflow.",
+ caveat:
+ "Prisma may not be the right fit if your app is primarily outside the TypeScript ecosystem, if you need built-in auth and storage from the same backend platform, or if you only need a standalone database without the Prisma ORM, schema, migrations, or deployment workflow around it.",
+ },
+ comparison: {
+ headline: "Why founders start on Prisma instead of assembling a stack",
+ intro: [
+ "Early-stage teams usually need to answer one question quickly: can this product get real users?",
+ "Infrastructure decisions can slow that down. A typical startup stack means picking a database provider, choosing an ORM, selecting a host, setting up environments, wiring connection strings, and figuring out pricing across multiple tools.",
+ "Prisma gives founders one connected TypeScript stack for the core product workflow: schema, database, queries, migrations, deploys, previews, and agents.",
+ ],
+ pointHeader: "Startup need",
+ assembledHeader: "Assembled stack",
+ rows: [
+ {
+ point: "First launch",
+ assembled:
+ "The founder chooses and wires together a database, ORM, and host before shipping.",
+ prisma:
+ "Prisma brings the app, database, ORM, and deploy workflow into one connected stack.",
+ },
+ {
+ point: "MVP speed",
+ assembled: "Setup decisions can take time before users ever see the product.",
+ prisma: "Founders can move from data model to database to deployed app faster.",
+ },
+ {
+ point: "Cost control",
+ assembled: "Separate tools create separate bills and usage models.",
+ prisma: "Prisma starts free and supports spend limits as usage grows.",
+ },
+ {
+ point: "AI-assisted building",
+ assembled: "Coding agents may need to reason across separate tools and setup steps.",
+ prisma:
+ "Agents can work through Prisma schema, CLIs, and Management API across the workflow.",
+ },
+ {
+ point: "Growth path",
+ assembled: "The MVP stack may become harder to manage once traffic and complexity grow.",
+ prisma:
+ "Prisma is designed to carry the product from first deploy to real traffic on the same platform.",
+ },
+ ],
+ },
+ builds: {
+ headline: "Who Prisma is best for",
+ intro: "Prisma is best for:",
+ items: [
+ {
+ icon: "rocket",
+ title: "MVPs and first launches",
+ body: "Get a working TypeScript product in front of users without spending the first week assembling infrastructure.",
+ },
+ {
+ icon: "bot",
+ title: "AI-assisted products",
+ body: "Build apps with a real database, durable state, server-side logic, and a deployable TypeScript backend, often with help from a coding agent.",
+ },
+ {
+ icon: "layoutGrid",
+ title: "Early SaaS products",
+ body: "Start with one connected workflow for your app, database, queries, migrations, and deploys.",
+ },
+ {
+ icon: "layers",
+ title: "The company after the MVP",
+ body: "Keep building on the same stack as you add users, features, and your first hires.",
+ },
+ ],
+ },
+ testimonialsHeading: "Trusted by more than 500K monthly active developers globally",
+ cta: {
+ headline: "Start on Prisma and keep building as you grow",
+ body: "Prisma gives founders integrated TypeScript infrastructure for the first version of the product and the growth that comes after it.",
+ benefits: [
+ "Free to start, no credit card required",
+ "One connected stack from MVP to real traffic",
+ "Built for developers and coding agents building TypeScript apps",
+ ],
+ primaryCta: { label: "Get started free", href: CONSOLE },
+ secondaryCta: { label: "Talk to us", href: CONTACT },
+ },
+};
diff --git a/apps/site/src/components/use-case/segment/sections.tsx b/apps/site/src/components/use-case/segment/sections.tsx
new file mode 100644
index 00000000000..f15b69c2a3b
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/sections.tsx
@@ -0,0 +1,194 @@
+import { IconTile } from "@/components/brand/icon-tile";
+import { Pattern } from "@/components/brand/pattern";
+import { CheckBold, X } from "@/components/icons/forma";
+import { PRODUCT_ICONS } from "@/components/product/icons";
+import { ProductNarrative } from "@/components/product/product-narrative";
+import { Reveal } from "@/components/motion/reveal";
+import { cn } from "@/lib/utils";
+import type { SegmentUseCaseContent } from "./types";
+
+// Shared sections for the audience use-case pages — the same idioms as the
+// AI-agents page (an illustrated narrative, icon-card grids, an asymmetric fit
+// split, card rows), generalised to take per-page content and abstractions.
+// The hero is the one every use-case page shares (use-case-hero.tsx) and the
+// comparison table is its own file.
+
+const HEADING = "text-balance text-[clamp(1.75rem,2.75vw,2.375rem)] leading-[1.1]";
+
+// "What Prisma is for … / Why … use Prisma" — the /orm narrative shape: copy on
+// the left, a purpose-built 1:1 abstraction on the right, the copy centred to it.
+export function SegmentIntro({
+ intro,
+ visual,
+}: Pick & { visual: React.ReactNode }) {
+ return (
+ {visual}
}
+ />
+ );
+}
+
+// An icon-card grid — the /postgres outcomes tile. Used by "when to use" (four-
+// up) and "why choose" (two-up), so the two grids read at different rhythms.
+function IconCards({
+ headline,
+ intro,
+ items,
+ columns,
+}: {
+ headline: string;
+ intro: string[];
+ items: SegmentUseCaseContent["when"]["items"];
+ columns: "four" | "two";
+}) {
+ return (
+
+
+
+ );
+}
diff --git a/apps/site/src/components/use-case/segment/segment-page.tsx b/apps/site/src/components/use-case/segment/segment-page.tsx
new file mode 100644
index 00000000000..a2c14ee0b2a
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/segment-page.tsx
@@ -0,0 +1,56 @@
+import { CtaBurst } from "@/components/sections/cta-burst";
+import { LogoCloud } from "@/components/sections/logo-cloud";
+import { TestimonialsReveal } from "@/components/sections/testimonials-reveal";
+import { UseCaseHero } from "@/components/use-case/use-case-hero";
+import { ComparisonTable } from "./comparison-table";
+import { SegmentBuilds, SegmentFit, SegmentIntro, SegmentWhen, SegmentWhyChoose } from "./sections";
+import type { SegmentUseCaseContent } from "./types";
+
+const CHECK_COLORS = ["text-prism-cyan-500", "text-prism-yellow-400", "text-prism-red-500"];
+
+// The audience use-case template, in the copy's section order:
+//
+// hero → logo strip → what Prisma is → when to use → is it the right fit →
+// [why choose] → comparison table → what they build → testimonials → closer
+//
+// The hero is the shared use-case hero, which carries the agent character
+// rather than a per-page abstraction; the intro visual is still passed in.
+// Everything else is driven by the page's content object.
+export function SegmentPage({
+ content,
+ introVisual,
+}: {
+ content: SegmentUseCaseContent;
+ introVisual: React.ReactNode;
+}) {
+ const c = content;
+ return (
+ <>
+
+
+
+
+
+
+
+ {c.whyChoose ? : null}
+
+
+
+
+
+ ({
+ label,
+ color: CHECK_COLORS[i % CHECK_COLORS.length],
+ }))}
+ primaryCta={c.cta.primaryCta}
+ secondaryCta={c.cta.secondaryCta}
+ />
+
+ );
+}
diff --git a/apps/site/src/components/use-case/segment/types.ts b/apps/site/src/components/use-case/segment/types.ts
new file mode 100644
index 00000000000..54e2cd416d1
--- /dev/null
+++ b/apps/site/src/components/use-case/segment/types.ts
@@ -0,0 +1,44 @@
+import type { ProductIconName } from "@/components/product/icons";
+import type { ProductPageContent } from "@/components/product/types";
+import type { ComparisonContent } from "./comparison-table";
+
+// Content contract for the audience use-case pages (SaaS teams, startups &
+// founders, engineering teams). These follow the AI-agents page shape — hero,
+// an illustrated intro, "when to use" icon cards, an is-it-the-right-fit split,
+// an optional "why choose" icon-card grid, a comparison TABLE, "what they
+// build" cards, testimonials, closer — differing from the /use-cases/[slug]
+// template (which has before/after, three steps, D4 reasons and FAQs).
+//
+// Every string is transcribed verbatim from André's copy doc — nothing added,
+// tightened or reworded.
+
+type Cta = { label: string; href: string };
+/** Icon + heading + body — the "when to use" and "why choose" grids. */
+export type IconItem = { icon: ProductIconName; title: string; body: string };
+/** Heading + body — the "what they build" cards (icon is decorative, not copy). */
+export type TextItem = { icon: ProductIconName; title: string; body: string };
+
+export type SegmentUseCaseContent = {
+ slug: string;
+ meta: { title: string; description: string };
+ /** Hero eyebrow — the audience name ("SaaS Teams"), rendered as the RoleKicker. */
+ eyebrow: string;
+ /** Runs through the shared segment hero; subheadline is the hero paragraphs. */
+ hero: ProductPageContent["hero"];
+ /** "What Prisma is for … / Why … use Prisma" — a lede and narrative paragraphs. */
+ intro: { headline: string; lede: string; body: string[] };
+ /** "When to use Prisma …" — intro + four icon cards. */
+ when: { headline: string; intro: string; items: IconItem[] };
+ /** "Is Prisma the right fit …?" — the suited line and the honest caveat. */
+ fit: { headline: string; suited: string; caveat: string };
+ /** "Why … choose Prisma over a stitched-together stack" — intro paragraphs + icon cards. Optional. */
+ whyChoose?: { headline: string; intro: string[]; items: IconItem[] };
+ /** The comparison table (see comparison-table.tsx). */
+ comparison: ComparisonContent;
+ /** "What … build with Prisma / Who Prisma is best for" — cards. */
+ builds: { headline: string; intro?: string; items: TextItem[] };
+ /** Testimonials section heading. */
+ testimonialsHeading: string;
+ /** Closing CTA. */
+ cta: { headline: string; body: string; benefits: string[]; primaryCta: Cta; secondaryCta: Cta };
+};
diff --git a/apps/site/src/components/use-case/types.ts b/apps/site/src/components/use-case/types.ts
new file mode 100644
index 00000000000..2351d211dde
--- /dev/null
+++ b/apps/site/src/components/use-case/types.ts
@@ -0,0 +1,90 @@
+import type { ProductIconName } from "@/components/product/icons";
+import type { ProductPageContent } from "@/components/product/types";
+import type { FaqItem } from "@/components/sections/faq";
+
+type Cta = { label: string; href: string };
+
+// Content contract for the use-case page template. Copy source is the Notion
+// request card "Use Case Template Copy", toggle **V2** — the final version. V1
+// differs (Management API instead of Prisma Skills, a different closing CTA);
+// don't copy from it.
+//
+// V2 is a *template*: every use-case-specific string in it is a bracketed
+// placeholder. Those brackets are carried through to the page verbatim rather
+// than being guessed at, per the placeholder convention this project already
+// uses on /pricing — a visible placeholder, never an invented value. See
+// content/template.ts.
+//
+// The page reuses the product-page sections wholesale where the layout is the
+// same one (hero, the four-card grid), so the two templates can't drift apart.
+export type UseCasePageContent = {
+ /** Route segment: /use-cases/. */
+ slug: string;
+ /** Browser/OG title and description. */
+ meta: { title: string; description: string };
+ /**
+ * Hero eyebrow — the use case name, short and developer-native
+ * ("Ship a SaaS backend"). Renders as the site's standard RoleKicker.
+ */
+ eyebrow: string;
+ /**
+ * Same shape as the product hero, so both run through ProductHero. The dot
+ * colour is fixed rather than per-page: a use case isn't a product and must
+ * not borrow a product's canonical accent (see product/icons.ts).
+ */
+ hero: ProductPageContent["hero"] & {
+ /** Label for the reserved visual slot until the real screenshot/sample exists. */
+ placeholderLabel?: string;
+ };
+ /** "Why [use case] breaks down on a stitched-together stack" — the homepage before/after. */
+ problem: {
+ headline: string;
+ before: string[];
+ after: string[];
+ };
+ /**
+ * "Ship [outcome] in three steps" — Define / Deploy / Iterate.
+ *
+ * Reserved, not built: André asked for the slot to be held while the section
+ * gets designed (2026-08-13). `items` and `cta` carry V2's copy verbatim so
+ * nothing is lost in the meantime — the section renders the headline and a
+ * reserved block, and picks the rest up when it's designed.
+ */
+ steps: {
+ headline: string;
+ items: { step: string; name: string; body: string }[];
+ cta: Cta;
+ };
+ /** "How Prisma handles [use case]" — four cards, two rows of two. */
+ handles: {
+ headline: string;
+ bridge: string;
+ /** Four in V2: the ORM, Postgres, Compute, and the agent workflow. */
+ items: { name: string; description: string }[];
+ cta: Cta;
+ };
+ /** "What changes when your stack is built to work together" — three icon columns. */
+ changes: {
+ headline: string;
+ items: { icon: ProductIconName; title: string; body: string }[];
+ };
+ /**
+ * "Why teams choose Prisma for [use case]" — the fixed D4 differentiators.
+ * These four are real copy in V2, not placeholders: keep them, and tailor
+ * only the trailing one-line read per use case. Never claim a best-in-class
+ * ORM, database or host individually — the integrated slice is the claim.
+ */
+ reasons: {
+ headline: string;
+ items: { title: string; body: string }[];
+ };
+ /** Closing CTA — V2's CHANGE #12 rewrite, which closes on the use-case outcome. */
+ cta: {
+ headline: string;
+ body: string;
+ benefits: string[];
+ primaryCta: Cta;
+ secondaryCta: Cta;
+ };
+ faqs: FaqItem[];
+};
diff --git a/apps/site/src/components/use-case/use-case-hero.tsx b/apps/site/src/components/use-case/use-case-hero.tsx
new file mode 100644
index 00000000000..7cc44d54b68
--- /dev/null
+++ b/apps/site/src/components/use-case/use-case-hero.tsx
@@ -0,0 +1,135 @@
+import { GlassGlide } from "@/components/brand/glass-glide";
+import { PrismButton, PrismButtonOutline } from "@/components/brand/prism-button";
+import { RobotStage } from "@/components/brand/robot-stage";
+import { RoleKicker } from "@/components/brand/role-kicker";
+import { Texture } from "@/components/brand/texture";
+import { CheckBold } from "@/components/icons/forma";
+import type { ProductPageContent } from "@/components/product/types";
+import { cn } from "@/lib/utils";
+
+// The hero every use-case page shares — AI & agents and the three audience
+// segments alike. Previously each page had its own: a copy column beside a
+// purpose-built console panel, stretched to whatever height the copy set.
+//
+// Reworked on client feedback (2026-09-04): the console abstractions are out,
+// the agent character is in, and the content is re-laid-out around it. Not one
+// word of copy changed — only where each piece sits:
+//
+// · kicker
+// headline [ the character on its stage ]
+// two paragraphs
+// primary + secondary CTA
+// ────────────────────────────────────────────────────────────────────
+// ✓ benefit ✓ benefit ✓ benefit
+//
+// The three benefits used to run down the bottom of the copy column, which
+// made that column tall enough that anything beside it had to stretch to a
+// shape it didn't want. On their own rule they read at equal weight, and the
+// character gets to sit at the copy's optical centre instead of being inflated
+// to match it. The headline picks up the height that frees.
+const CHECK_COLORS = ["text-prism-cyan-500", "text-prism-yellow-400", "text-prism-red-500"];
+
+type Hero = ProductPageContent["hero"];
+
+function Headline({ headline, emphasis }: { headline: string; emphasis?: string }) {
+ const at = emphasis ? headline.indexOf(emphasis) : -1;
+ if (!emphasis || at === -1) return <>{headline};
+ return (
+ <>
+ {headline.slice(0, at)}
+ {emphasis}
+ {headline.slice(at + emphasis.length)}
+
+ );
+}
+
+export function UseCaseHero({ name, hero }: { name: string; hero: Hero }) {
+ const paras = Array.isArray(hero.subheadline) ? hero.subheadline : [hero.subheadline];
+ return (
+
+
+ {/* spectral bottom — same values as the site hero */}
+
+
+ {/* the character, centred on the copy. No prism ray here — the
+ old heroes hid one behind an opaque console panel; with the
+ panel gone it just slices the character in half. The stage
+ carries its own spectrum instead. */}
+ {/* Single-column, the character follows the CTAs rather than
+ leading — the headline is the message, and a full-width
+ portrait above it pushes that message below the fold.
+ No auto margins here: an auto margin on a grid item sizes it
+ to its content, and the stage is absolutely positioned, so
+ the whole thing collapses to nothing. RobotStage centres
+ itself and caps its own width. */}
+
+
+
+
+
+ {/* the benefits, on their own rule under the whole hero */}
+
+ {hero.benefits.map((label, i) => (
+
+
+ {label}
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/apps/site/src/data/changelog.ts b/apps/site/src/data/changelog.ts
new file mode 100644
index 00000000000..d9655b8323a
--- /dev/null
+++ b/apps/site/src/data/changelog.ts
@@ -0,0 +1,80 @@
+// Presentation model for the /changelog feed.
+//
+// The entries themselves are the MDX release notes in content/changelog,
+// loaded by lib/changelog.ts (`getChangelogFeedEntries`). What lives here is
+// the structure the redesign adds on top of that flat list: a product-area
+// category per entry (which drives colour and the filter), a short tag set,
+// and a "highlight" flag for the launches that deserve a feature card.
+
+/** Product areas. The id drives the category chip colour and the filter. */
+export type ChangelogCategory = "compute" | "orm" | "postgres" | "studio" | "platform";
+
+export type ChangelogEntry = {
+ slug: string;
+ /** ISO date. Formatted at render with an explicit UTC timezone. */
+ date: string;
+ title: string;
+ description: string;
+ category: ChangelogCategory;
+ /** Short labels shown as pills under the entry. */
+ tags: string[];
+ /**
+ * The big launches get a featured treatment (larger card, ships an accent).
+ * Reserve for genuine "generally available" / "now in beta" moments.
+ */
+ highlight?: boolean;
+ /** The entry's own page, /changelog/[slug]. */
+ href: string;
+};
+
+// Category display + colour. Each area gets one of the three brand anchors (or
+// ink for the platform-wide entries), so the feed reads as coloured bands you
+// can scan without reading. Kept in one place so the chip, the timeline node
+// and the filter tab always agree.
+export const CATEGORY_META: Record<
+ ChangelogCategory,
+ { label: string; dot: string; text: string; glow: string }
+> = {
+ compute: {
+ label: "Compute",
+ dot: "bg-prism-cyan-400",
+ text: "text-prism-cyan-700",
+ glow: "var(--color-prism-cyan-400)",
+ },
+ orm: {
+ label: "ORM",
+ dot: "bg-prism-red-500",
+ text: "text-prism-red-700",
+ glow: "var(--color-prism-red-500)",
+ },
+ postgres: {
+ label: "Postgres",
+ dot: "bg-prism-yellow-400",
+ text: "text-prism-yellow-700",
+ glow: "var(--color-prism-yellow-400)",
+ },
+ studio: {
+ label: "Studio",
+ dot: "bg-prism-cyan-600",
+ text: "text-prism-cyan-800",
+ glow: "var(--color-prism-cyan-600)",
+ },
+ platform: {
+ label: "Platform",
+ dot: "bg-foreground",
+ text: "text-foreground",
+ glow: "var(--primary)",
+ },
+};
+
+// The order the filter tabs show categories in — hand-ordered so the three
+// headline products lead and the cross-cutting areas follow.
+export const CATEGORY_ORDER: ChangelogCategory[] = [
+ "compute",
+ "orm",
+ "postgres",
+ "studio",
+ "platform",
+];
+
+export const CHANGELOG_CATEGORIES = new Set(CATEGORY_ORDER);
diff --git a/apps/site/src/data/customer-stories.ts b/apps/site/src/data/customer-stories.ts
new file mode 100644
index 00000000000..361c32f0f02
--- /dev/null
+++ b/apps/site/src/data/customer-stories.ts
@@ -0,0 +1,1721 @@
+// Long-form content for the /customers/[slug] detail pages — the redesign of the
+// prisma.io/blog customer stories, rebuilt from the approved copy (Notion:
+// "Customer Story Detail Page — Batch One").
+//
+// Separate from customers.ts, which drives the /customers INDEX (card title,
+// excerpt, black logo lockup, outbound blog href). That file stays the source
+// for the grid; this one carries the full story body. The two share a `slug`,
+// and STORY_DETAIL_SLUGS below is what customers-grid.tsx reads to decide
+// whether a card links inward (a detail page exists) or out to the live post.
+//
+// Icons are named against the shared PRODUCT_ICONS map (product/icons.ts) so the
+// glyph vocabulary stays consistent with the product pages and the data stays
+// serializable. Batch one is seven stories; we build the template on the first
+// (Reflag) and fill the rest once the layout is signed off.
+
+import type { ProductIconName } from "@/components/product/icons";
+
+type Fact = { icon: ProductIconName; label: string; value: string };
+type Reason = { icon: ProductIconName; title: string; body: string };
+type Quote = {
+ text: string;
+ author: string;
+ /** e.g. "Co-founder & CTO". */
+ role: string;
+ /** Company name, shown after the role. */
+ company?: string;
+ /** Optional link on the company name. */
+ companyHref?: string;
+ /** Render one size down — for long quotes. Honored by the closing quote card. */
+ compact?: boolean;
+};
+type Result = { icon: ProductIconName; stat: string; detail: string };
+
+export type CustomerStoryDetail = {
+ slug: string;
+ name: string;
+ /**
+ * White-on-transparent customer mark (same asset the index uses on its black
+ * plate). Rendered on the hero's dark logo plate, so a white mark is correct.
+ */
+ logo: string;
+ /** Skip the whitening filter when the mark is already white — see customers.ts. */
+ logoAsIs?: boolean;
+
+ hero: {
+ title: string;
+ /** Lead + supporting paragraph; both render in the hero dek. */
+ lead: string;
+ support?: string;
+ };
+
+ about: {
+ heading: string;
+ body: string;
+ facts: Fact[];
+ };
+
+ challenge: {
+ heading: string;
+ /** Paragraphs before the constraint list. */
+ body: string[];
+ /** Optional pull quote shown under the intro, beside the constraints. */
+ quote?: Quote;
+ points: { icon: ProductIconName; title: string; body: string }[];
+ /** Closing line after the constraints. */
+ outro?: string;
+ };
+
+ reasons: {
+ heading: string;
+ intro: string;
+ cards: Reason[];
+ };
+
+ /** Pull quote between "Why" and "How". Omitted when the story has no quote. */
+ quote?: Quote;
+
+ usage: {
+ heading: string;
+ body: string[];
+ };
+
+ results: {
+ heading: string;
+ intro: string;
+ items: Result[];
+ };
+
+ /** Second pull quote, shown under the results. Optional. */
+ closingQuote?: Quote;
+
+ cta: {
+ heading: string;
+ body: string;
+ /** Three ticks. Cycled through the brand spectrum in order. */
+ checks: string[];
+ };
+};
+
+export const CUSTOMER_STORY_DETAILS: CustomerStoryDetail[] = [
+ {
+ slug: "reflag",
+ name: "Reflag",
+ logo: "/logos/customers/reflag-white.png",
+ logoAsIs: true,
+ hero: {
+ title: "How Reflag ships reliably with a lean team on Prisma ORM",
+ lead: "Reflag, a feature-management platform out of Copenhagen, runs its product on Node.js and PostgreSQL with a team of eight. It uses Prisma ORM to manage the complex relationships between features, users, and feedback without slowing development down.",
+ support:
+ "For a small team, the data layer can't become the work. Prisma keeps queries type-safe and migrations schema-driven, so Reflag keeps shipping features reliably as the product grows.",
+ },
+ about: {
+ heading: "About Reflag",
+ body: "Reflag is a feature-management platform for product engineering teams, bringing feature flags, user feedback, and adoption metrics together in one place. What started three years ago in Copenhagen is now a live product run by a team of eight, built on Node.js services talking to PostgreSQL on Google Cloud.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Developer tools / feature management" },
+ { icon: "rocket", label: "Team size", value: "8" },
+ { icon: "layers", label: "Stack", value: "Node.js, PostgreSQL, Google Cloud" },
+ { icon: "database", label: "Using", value: "Prisma ORM" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Reflag's product lives on complex relationships between features, users, and the feedback tied to them. Modeling and querying that data across their Node.js services meant holding two things together that usually pull apart: moving fast, and staying type-safe as the schema kept growing.",
+ "With a team of eight, there's no room for the data layer to slow things down:",
+ ],
+ points: [
+ {
+ icon: "layers",
+ title: "A data model with real depth.",
+ body: "Features, users, and feedback all relate to each other, and every new capability adds relationships to keep consistent.",
+ },
+ {
+ icon: "rocket",
+ title: "Velocity that can't drop.",
+ body: "A small team ships often, so queries and migrations have to stay easy to change.",
+ },
+ {
+ icon: "shield",
+ title: "Type safety that has to hold.",
+ body: "Mistakes caught at compile time are mistakes that never reach a customer.",
+ },
+ ],
+ outro:
+ "The database is central to the product. It just can't be the thing that slows the product down.",
+ },
+ reasons: {
+ heading: "Why Reflag chose Prisma ORM",
+ intro:
+ "Reflag reached for Prisma ORM to make working with PostgreSQL fast and safe. The draw wasn't a single feature, it was how the schema, the generated client, and relational queries work together to keep a small team productive.",
+ cards: [
+ {
+ icon: "shield",
+ title: "Type-safe from the schema",
+ body: "A generated, fully typed client catches mistakes before they ship, no manual setup to keep in sync.",
+ },
+ {
+ icon: "database",
+ title: "Relational queries made simple",
+ body: "Prisma's include and select turn complex joins into queries that are easy to write and easy to read.",
+ },
+ {
+ icon: "layers",
+ title: "One schema the team shares",
+ body: "The schema documents the data model in one place, so eight people stay aligned on how the data fits together.",
+ },
+ ],
+ },
+ quote: {
+ text: "We rely on Prisma heavily for relational queries. It's so intuitive and makes complex queries easy to manage, allowing us to build advanced data retrieval patterns with minimal effort.",
+ author: "Ron Cohen",
+ role: "Co-founder & CTO",
+ company: "Reflag",
+ companyHref: "https://reflag.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Reflag uses Prisma ORM as the data-access layer across its Node.js services. As the product evolves, the team uses schema-based migrations to experiment with the database structure, then leans on Prisma's include and select to handle the relational queries the product depends on, all through a generated type-safe client.",
+ "The shared schema doubles as documentation. Instead of tribal knowledge about how features, users, and feedback connect, there's one model everyone works from, which keeps a small team moving in the same direction.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "With Prisma handling the data layer, Reflag ships reliably at a size where every hour counts.",
+ items: [
+ {
+ icon: "rocket",
+ stat: "8-person team",
+ detail: "Shipping features reliably without a dedicated database team.",
+ },
+ {
+ icon: "database",
+ stat: "Complex queries, simplified",
+ detail: "Relational joins handled through include and select.",
+ },
+ {
+ icon: "layers",
+ stat: "One shared schema",
+ detail: "The data model documented in one place the whole team works from.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "Prisma makes database management incredibly easy. For example, when we needed to implement OAuth, which involved creating multiple new database tables, we just defined them in our Prisma schema, ran a migration, and everything was ready. Prisma's built-in type safety helps us avoid mistakes that happen with manual setups.",
+ author: "Ron Cohen",
+ role: "Co-founder & CTO",
+ company: "Reflag",
+ companyHref: "https://reflag.com/",
+ },
+ cta: {
+ heading: "Build on the same stack as Reflag",
+ body: "If an eight-person team can manage complex relational data and keep shipping, yours can too.",
+ checks: [
+ "Free to start, no credit card required",
+ "One TypeScript stack your agent can operate end to end",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "amplication",
+ name: "Amplication",
+ logo: "/logos/customers/amplication-white.png",
+ logoAsIs: true,
+ hero: {
+ title: "How Amplication builds Prisma into every app it generates",
+ lead: "Amplication is an open-source, low-code tool that generates production-quality Node.js applications, so teams skip the repetitive setup and spend their time on real features instead. Prisma ORM and Prisma Migrate are built right into the stack Amplication generates.",
+ support:
+ "Amplication bet on Prisma early, back in 2020, and it became an enabler for the whole product: easy to use, strong on TypeScript, and with a migrations story that fit their long-term vision.",
+ },
+ about: {
+ heading: "About Amplication",
+ body: "Amplication is an open-source, low-code development tool that helps teams build quality Node.js applications while cutting out repetitive coding. It serves both backend and fullstack developers, generating a complete server-side stack so teams can focus on business logic instead of boilerplate. At the time of the story, Amplication had raised $6.6M in seed funding and was planning to double its team within the year.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Open-source developer tools / low-code" },
+ { icon: "rocket", label: "Stage", value: "$6.6M seed, team growing" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value: "Node.js, NestJS, PostgreSQL, GraphQL, Passport, Jest, Swagger UI, Docker",
+ },
+ { icon: "database", label: "Using", value: "Prisma ORM · Prisma Migrate" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Development teams at larger companies were spending too much time on the repetitive, error-prone work at the start of every project: standing up databases, user interfaces, and APIs by hand. That's time that should go into innovative features and complex business logic, not setup.",
+ "Amplication set out to remove that friction by generating the whole foundation for a Node.js application. But to do that credibly, the code it generates has to be something developers actually trust:",
+ ],
+ points: [
+ {
+ icon: "shield",
+ title: "The generated stack has to be production-quality.",
+ body: "Teams inherit this code, so it has to be solid, not scaffolding they rip out.",
+ },
+ {
+ icon: "database",
+ title: "The data layer has to be easy to work with.",
+ body: "Whatever Amplication generates for the database has to be approachable for the developers who take it forward.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Schema changes have to stay manageable.",
+ body: "As generated apps evolve, migrations can't become a source of friction.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Amplication chose Prisma",
+ intro:
+ "Yuval Hazaz, CEO at Amplication, chose Prisma early, in 2020. The decision came down to three things: an easy-to-use tool with a responsive community, strong TypeScript support, and a migrations story that matched where Amplication was headed.",
+ cards: [
+ {
+ icon: "rocket",
+ title: "An enabler, easy to use",
+ body: "Prisma was easy enough to adopt that Amplication could build it directly into the apps it generates.",
+ },
+ {
+ icon: "code",
+ title: "Built for TypeScript",
+ body: "Type-safe from the schema, which fit Amplication's TypeScript-first generated stack.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Migrations that fit the vision",
+ body: "Prisma Migrate auto-generates customizable schema migrations, aligned with Amplication's long-term plans.",
+ },
+ ],
+ },
+ quote: {
+ text: "Prisma was a really good bet, and it helped us a lot when working on Amplication. It was an enabler for us because we actually use Prisma in the generated app, and it is really easy to use.",
+ author: "Yuval Hazaz",
+ role: "CEO",
+ company: "Amplication",
+ companyHref: "https://amplication.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Prisma is part of the server-side stack Amplication generates, alongside NestJS, PostgreSQL, GraphQL, Passport, Jest, Swagger UI, and Docker. The Prisma Client slots into NestJS's modular architecture, carrying type safety through the application layer so the generated code is type-safe end to end.",
+ "Prisma Migrate handles schema changes in that generated stack, auto-generating customizable migrations. That keeps schema evolution low-friction for the teams who take an Amplication-generated app forward, so they stay focused on building features rather than refactoring the data layer.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Prisma became a foundational part of what Amplication ships, built into every app it generates.",
+ items: [
+ {
+ icon: "database",
+ stat: "Prisma in every generated app",
+ detail: "Prisma ORM and Migrate are part of Amplication's generated server stack.",
+ },
+ {
+ icon: "code",
+ stat: "TypeScript-first, type-safe",
+ detail: "Type safety carried through the NestJS application layer.",
+ },
+ {
+ icon: "gitBranch",
+ stat: "Low-friction migrations",
+ detail: "Prisma Migrate keeps schema changes manageable so teams build, not refactor.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "Supporting and building with TypeScript was really great for us. I also think migrations are amazing.",
+ author: "Yuval Hazaz",
+ role: "CEO",
+ company: "Amplication",
+ },
+ cta: {
+ heading: "Build on the same stack as Amplication",
+ body: "Amplication trusts Prisma enough to build it into every app it ships. See what it can do for yours.",
+ checks: [
+ "Free to start, no credit card required",
+ "One TypeScript stack your agent can operate end to end",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "formbricks",
+ name: "Formbricks",
+ logo: "/logos/customers/formbricks-white.png",
+ logoAsIs: true,
+ hero: {
+ title: "How Formbricks kept its serverless backend online under load with Prisma Accelerate",
+ lead: "Formbricks, an open-source survey and feedback platform, hit a scaling wall running its cloud version on a serverless backend. A usage spike blew past its database connection limit and took the database down. Prisma Accelerate's connection pooling solved it, and the setup was simple enough to do at 3 a.m. mid-incident.",
+ },
+ about: {
+ heading: "About Formbricks",
+ body: "Formbricks is an open-source, privacy-first survey and feedback platform. It lets businesses gather user insights through in-app surveys, website surveys, link-based questionnaires, and email surveys, with prebuilt data analysis built in as an experience-management solution.",
+ facts: [
+ {
+ icon: "layoutGrid",
+ label: "Industry",
+ value: "Open-source survey / experience management",
+ },
+ {
+ icon: "server",
+ label: "Deployment",
+ value: "Cloud version on Vercel, serverless backend",
+ },
+ { icon: "database", label: "Using", value: "Prisma Accelerate (connection pooling)" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Formbricks runs its cloud version on Vercel with a serverless backend, and that architecture ran into a hard limit. Serverless functions open lots of short-lived database connections, and Formbricks exceeded its connection pool size, hitting performance bottlenecks along the way.",
+ "Then a significant usage spike pushed it over the edge: the database failed and server load climbed, forcing an urgent need for something more robust.",
+ ],
+ points: [
+ {
+ icon: "server",
+ title: "Serverless exhausts connections.",
+ body: "Many concurrent functions meant more database connections than the pool could hold.",
+ },
+ {
+ icon: "rocket",
+ title: "A spike became an outage.",
+ body: "Growing traffic tipped bottlenecks into a database failure.",
+ },
+ {
+ icon: "swap",
+ title: "Alternatives were too expensive.",
+ body: "Options like AWS RDS Proxy existed, but the cost was prohibitively high.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Formbricks chose Prisma Accelerate",
+ intro:
+ "Formbricks needed connection pooling built for serverless, without the price tag of the heavier alternatives. Prisma Accelerate offered an accessible, cost-effective option with a low barrier to entry, and it was straightforward enough to set up in the middle of an incident.",
+ cards: [
+ {
+ icon: "server",
+ title: "Connection pooling for serverless",
+ body: "A scalable pool that manages many database connections without exhausting the limit.",
+ },
+ {
+ icon: "swap",
+ title: "Cost-effective by comparison",
+ body: "A low entry barrier where alternatives like AWS RDS Proxy were prohibitively expensive.",
+ },
+ {
+ icon: "rocket",
+ title: "Simple to set up",
+ body: "Create an account, swap the connection string, connect the database, done, even at 3 a.m.",
+ },
+ ],
+ },
+ quote: {
+ text: "It's also possible to set up Accelerate when you're totally tired at 3 a.m. in the morning. The process was pretty straightforward – created an account, replaced the connection string, and connected the database on the Prisma Accelerate website. It was easy and worked out, even under those high-pressure circumstances.",
+ author: "Matti Nannt",
+ role: "Co-Founder",
+ company: "Formbricks",
+ companyHref: "https://formbricks.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Formbricks put Prisma Accelerate in front of its database to handle connection pooling for the serverless backend. The setup was deliberately minimal: create a Prisma Accelerate account, replace the connection string, and connect the database through the Accelerate website, which is exactly what they did during the database-failure incident at 3 a.m.",
+ "With Accelerate's scalable connection pool in place, the serverless architecture could manage large numbers of database connections while holding performance during traffic surges.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "The integration resolved Formbricks' scalability problems and strengthened its serverless backend against future spikes.",
+ items: [
+ {
+ icon: "server",
+ stat: "Serverless scaling, solved",
+ detail: "Connection pooling that keeps serverless from exhausting the database.",
+ },
+ {
+ icon: "shield",
+ stat: "Held up under surges",
+ detail:
+ "The pool manages many connections while maintaining performance during traffic spikes.",
+ },
+ {
+ icon: "rocket",
+ stat: "Set up mid-incident",
+ detail: "Configured at 3 a.m. during a live database failure.",
+ },
+ ],
+ },
+ cta: {
+ heading: "Build on the same stack as Formbricks",
+ body: "If your serverless backend is straining its database connections, Prisma can take the pressure off.",
+ checks: [
+ "Free to start, no credit card required",
+ "One TypeScript stack your agent can operate end to end",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "solin",
+ name: "Solin",
+ logo: "/logos/customers/solin-white.png",
+ logoAsIs: true,
+ hero: {
+ title: "How Solin serves 2.5M database queries a day with Prisma",
+ lead: "Solin, a fitness-creator marketplace, ran a serverless backend that kept exhausting its database connections during traffic spikes, causing failed requests and a poor experience. With Prisma ORM and Prisma Accelerate, it now serves 2.5 million database queries a day with zero connection issues.",
+ support:
+ "Accelerate's connection pooling ended the failures, and per-query caching made landing pages lightning fast, which fed directly into better conversion.",
+ },
+ about: {
+ heading: "About Solin",
+ body: "Solin is a fitness marketplace that connects fitness creators with consumers. Creators sell workout programs, challenges, memberships, and cookbooks, while consumers get community features and transformation-tracking tools. The platform runs a fullstack serverless app in the fitness-technology space.",
+ facts: [
+ {
+ icon: "layoutGrid",
+ label: "Industry",
+ value: "Fitness technology / creator marketplace",
+ },
+ { icon: "layers", label: "Stack", value: "Remix, Vercel serverless, PostgreSQL on Heroku" },
+ { icon: "database", label: "Using", value: "Prisma ORM · Prisma Accelerate" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Solin runs a fullstack Remix app on Vercel with serverless functions, and that setup hit a familiar serverless wall: too many database connections. As the user base and query volume grew, its PostgreSQL database on Heroku couldn't hold enough connections, and traffic spikes exhausted the limit.",
+ "When the connections ran out, requests failed and the user experience suffered:",
+ ],
+ points: [
+ {
+ icon: "server",
+ title: "Serverless exhausts connections.",
+ body: "Many concurrent functions opened more connections than the database could sustain.",
+ },
+ {
+ icon: "rocket",
+ title: "Spikes caused failed requests.",
+ body: "When the limit was hit, requests dropped and users felt it.",
+ },
+ {
+ icon: "swap",
+ title: "Growth made it worse.",
+ body: "A growing audience and rising query volume kept pushing against the ceiling.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Solin chose Prisma",
+ intro:
+ "Solin already used Prisma ORM to query its database. When connection limits became the bottleneck, Prisma Accelerate added the connection pooling and caching the serverless backend needed to scale, without changing how the team wrote queries.",
+ cards: [
+ {
+ icon: "server",
+ title: "Connection pooling at scale",
+ body: "Accelerate's pool manages database connections so serverless functions stop exhausting the limit.",
+ },
+ {
+ icon: "repeat",
+ title: "Per-query caching",
+ body: "ttl and swr options set per query, ideal for landing pages whose content rarely changes.",
+ },
+ {
+ icon: "code",
+ title: "No change to the query layer",
+ body: "Accelerate layered onto the Prisma ORM queries Solin was already writing.",
+ },
+ ],
+ },
+ quote: {
+ text: "Accelerate is a perfect fit for landing pages. We are able to take advantage of caching to speed up queries and reduce latency, making them lightning fast. This obviously means we have a faster landing page, leading to better conversion.",
+ author: "Blake Carroll",
+ role: "CTO",
+ company: "Solin",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Solin's API layer uses Prisma ORM to query the database, with Prisma Accelerate's connection pool sitting in front to manage connections at scale across its serverless functions. On top of pooling, the team uses Accelerate's caching on a per-query basis, applying ttl (time-to-live) and swr (stale-while-revalidate) where it helps most, particularly on landing pages with content that rarely changes.",
+ "That combination keeps the serverless backend from running out of connections during spikes, while caching keeps high-traffic pages fast.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Prisma took Solin from connection failures to serving millions of queries a day, reliably.",
+ items: [
+ {
+ icon: "database",
+ stat: "2.5M queries / day",
+ detail: "Database queries served daily through Prisma.",
+ },
+ {
+ icon: "shield",
+ stat: "Zero connection issues",
+ detail: "No connection problems since adopting Accelerate.",
+ },
+ {
+ icon: "rocket",
+ stat: "Faster landing pages",
+ detail:
+ "Cached pages load lightning fast, improving conversion, while reduced server load lowers costs.",
+ },
+ ],
+ },
+ cta: {
+ heading: "Build on the same stack as Solin",
+ body: "If your serverless app is straining its database connections, Prisma can pool and cache its way past the limit.",
+ checks: [
+ "Free to start, no credit card required",
+ "One TypeScript stack your agent can operate end to end",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "elsevier",
+ name: "Elsevier",
+ logo: "/logos/customers/elsevier.svg",
+ hero: {
+ title: "How one tech lead built Elsevier's peer-review MVP in ten months with Prisma",
+ lead: "Elsevier, a global leader in scientific publishing, set out to modernize a slow, manual peer-review process. Led by a single tech lead, the team built a meaningful MVP in ten months on Prisma, and it now processes real scientific publications.",
+ support:
+ "Prisma Client, Prisma Migrate, and Nexus let one engineer move fast, experiment with the data model, and keep frontend and database types in sync, so the product could change quickly based on user feedback.",
+ },
+ about: {
+ heading: "About Elsevier",
+ body: "Elsevier is a global leader in information and analytics for scientific publishing, helping researchers and healthcare professionals advance science and improve health outcomes. This project set out to modernize its peer-review workflow for journal publications.",
+ facts: [
+ {
+ icon: "layoutGrid",
+ label: "Industry",
+ value: "Scientific publishing / information analytics",
+ },
+ { icon: "rocket", label: "Scale", value: "Global" },
+ { icon: "layers", label: "Stack", value: "TypeScript, GraphQL, Nexus, AWS Lambda" },
+ { icon: "database", label: "Using", value: "Prisma Client · Prisma Migrate · Nexus" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Elsevier's peer-review process for scientific publications was manual, outdated, and slow, a logically complex workflow that needed modernizing to stay competitive in healthcare research.",
+ "Rebuilding it came with real constraints:",
+ ],
+ quote: {
+ text: "The flexibility of moving fast and changing the product based on user feedback fast was crucial.",
+ author: "Serghei Ghidora",
+ role: "Tech Lead",
+ company: "Elsevier",
+ },
+ points: [
+ {
+ icon: "layers",
+ title: "A logically complex workflow.",
+ body: "Multi-user document editing needs a nested data structure, not flat records.",
+ },
+ {
+ icon: "rocket",
+ title: "Speed of iteration mattered.",
+ body: "The product had to change quickly as user feedback came in.",
+ },
+ {
+ icon: "bot",
+ title: "A very small team.",
+ body: "Much of the build rested on a single tech lead, so hand-writing boilerplate wasn't an option.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Elsevier chose Prisma",
+ intro:
+ "The team chose Prisma to move fast without writing and maintaining the usual boilerplate. Paired with Nexus for code-first GraphQL, Prisma removed the manual work of definitions, resolvers, schemas, and models, while keeping everything type-safe in TypeScript.",
+ cards: [
+ {
+ icon: "layers",
+ title: "GraphQL with the nested data it needed",
+ body: "Nexus gave the multi-user document editing a nested structure, code-first.",
+ },
+ {
+ icon: "code",
+ title: "Less boilerplate to hand-write",
+ body: "Prisma eliminated manual definitions, resolvers, schemas, and models.",
+ },
+ {
+ icon: "checkCircle",
+ title: "Frontend and database types in sync",
+ body: "TypeScript throughout kept application types aligned with the database.",
+ },
+ ],
+ },
+ quote: {
+ text: "Writing all that by yourself, it's a lot of work. The flexibility of moving fast and changing fast, that was crucial.",
+ author: "Serghei Ghidora",
+ role: "Tech Lead",
+ company: "Elsevier",
+ companyHref: "https://www.elsevier.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "The MVP is built around a Prisma and Nexus package that holds the schema, migrations, and generated types. AWS Lambda functions use Prisma Client to update resources directly, and the business logic backed by Prisma serves both the GraphQL API and the frontend. Everything is written in TypeScript, so database and frontend types stay synchronized.",
+ "Handling schema changes is a big part of why it worked for a small team. As Serghei Ghidora put it: “When it comes to the data model experimentation, handling migrations, you run the migrations and Prisma will do everything by itself.”",
+ "On type safety, they said: “Your frontend application types are always in sync with what's available on the database level. That's a big, big deal.”",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "One tech lead turned a complex, manual process into a working product that runs on real publications today.",
+ items: [
+ {
+ icon: "rocket",
+ stat: "MVP in 10 months",
+ detail: "A meaningful MVP delivered in ten months.",
+ },
+ {
+ icon: "bot",
+ stat: "Built by 1 tech lead",
+ detail: "A large, complex product driven largely by a single engineer.",
+ },
+ {
+ icon: "checkCircle",
+ stat: "Live on real publications",
+ detail:
+ "Processing real scientific publications, holding up with few critical bugs as it moves toward full production.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "Prisma is one of the bricks of that foundation.",
+ author: "Serghei Ghidora",
+ role: "Tech Lead",
+ company: "Elsevier",
+ },
+ cta: {
+ heading: "Build on the same stack as Elsevier",
+ body: "Prisma helped one tech lead take a complex workflow from MVP to real publications. Start building on it today.",
+ checks: [
+ "Free to start, no credit card required",
+ "One TypeScript stack your agent can operate end to end",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "tryg",
+ name: "Tryg",
+ logo: "/logos/customers/tryg-white.svg",
+ logoAsIs: true,
+ hero: {
+ title: "How Tryg unified decades of insurance data with Prisma",
+ lead: "Tryg, one of the Nordic region's largest non-life insurers, handles over a million claims a year across data sources spread between countries and built up over decades. It uses Prisma to power Tryg 360, the in-house data-broker platform that pulls all of it into one model.",
+ support:
+ "Prisma auto-generates database clients and GraphQL APIs straight from the schema, even for data models that run to 10,000 lines, so Tryg's developers iterate quickly and data becomes reachable for people without SQL expertise.",
+ },
+ about: {
+ heading: "About Tryg",
+ body: "Tryg is one of the Nordic region's largest non-life insurance companies, covering private, commercial, and corporate markets and handling more than a million claims a year. To make its data accessible across the business, Tryg built Tryg 360, a proprietary data-broker platform, with Prisma as a core enabling technology.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Non-life insurance" },
+ { icon: "rocket", label: "Scale", value: "Nordic's largest, 1M+ claims/year" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value: "CockroachDB, Kubernetes, Helm, Apache Kafka, GraphQL, Pal.js",
+ },
+ {
+ icon: "database",
+ label: "Using",
+ value: "Prisma Client · Prisma Schema (generator API)",
+ },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Tryg's data had accumulated across different countries over decades, in systems that were never designed to work together. The result was a harmonization problem at scale:",
+ ],
+ points: [
+ {
+ icon: "layers",
+ title: "Incompatible models.",
+ body: "Data sources across countries used models built independently over many years.",
+ },
+ {
+ icon: "swap",
+ title: "Conflicting definitions.",
+ body: "The same concept meant different things in different systems, creating redundancy and workarounds.",
+ },
+ {
+ icon: "settings",
+ title: "Slow, error-prone integration.",
+ body: "Bringing it all together by hand was time-consuming and easy to get wrong.",
+ },
+ {
+ icon: "database",
+ title: "Locked behind SQL.",
+ body: "The goal was to make data accessible to everyone who needed it, including people without SQL expertise.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Tryg chose Prisma",
+ intro:
+ "Tryg chose Prisma as a critical enabler for Tryg 360 because it could generate the data-access layer from the schema and hold up under models far larger than most tools handle.",
+ cards: [
+ {
+ icon: "database",
+ title: "Clients generated from the schema",
+ body: "Prisma auto-generates database clients directly from the Prisma schema.",
+ },
+ {
+ icon: "code",
+ title: "GraphQL APIs, auto-generated",
+ body: "Paired with Pal.js, the platform auto-generates GraphQL resolvers and type definitions for developers to work against.",
+ },
+ {
+ icon: "layers",
+ title: "Built for extreme complexity",
+ body: "Prisma handles very complex models and massive datasets, with schema files up to 10,000 lines and over a million characters.",
+ },
+ ],
+ },
+ quote: {
+ text: "Prisma is a huge technical enabler for us.",
+ author: "Artur Mrozowski",
+ role: "Data Engineer",
+ company: "Tryg",
+ companyHref: "https://www.tryg.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Tryg 360 is a data broker that streams live data from multiple sources into one place, without transforming it up front. Data synchronizes through a Time-Aware MirrorMaker built on Apache Kafka into a local Kafka cluster for selective loading, and lands in CockroachDB, which speaks the PostgreSQL wire protocol, as unified storage.",
+ "Prisma Client accesses CockroachDB, and from the Prisma schema the platform generates the database client and, with Pal.js, the GraphQL resolvers and type definitions. Whole environments spin up in one click through Kubernetes and Helm charts, so there's no manual configuration between a developer and a working environment.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Tryg turned decades of scattered, incompatible data into one model developers can build on quickly.",
+ items: [
+ {
+ icon: "layers",
+ stat: "Many sources, one schema",
+ detail: "Multiple data sources unified into a single schema and data model.",
+ },
+ {
+ icon: "rocket",
+ stat: "One-click environments",
+ detail: "Kubernetes and Helm provision whole environments without manual setup.",
+ },
+ {
+ icon: "code",
+ stat: "Faster development",
+ detail: "Generating clients and APIs from code lets developers iterate quickly.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "Our setup with Prisma enabled us to generate everything from code and ensure our developers can iterate very quickly.",
+ author: "Lasse Abelsen",
+ role: "DevOps Engineer",
+ company: "Tryg",
+ },
+ cta: {
+ heading: "Build on the same stack as Tryg",
+ body: "Tryg unified decades of insurance data on Prisma. See what it can do for your data model.",
+ checks: [
+ "Free to start, no credit card required",
+ "Clients and GraphQL APIs generated from your schema",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "panther",
+ name: "Panther",
+ logo: "/logos/customers/panther.svg",
+ hero: {
+ title: "How Panther keeps data consistent across microservices in 160+ countries with Prisma",
+ lead: "Panther, a global payroll and compliance platform, runs a distributed microservices architecture behind a federated GraphQL API. It uses Prisma ORM to guarantee that the data flowing through that API is valid and correctly shaped, no matter which service it came from.",
+ support:
+ "Prisma lets Panther's independent service teams move fast while keeping data consistent across the whole platform, giving them faster time to market with type safety end to end.",
+ },
+ about: {
+ heading: "About Panther",
+ body: "Panther is a global payroll and compliance platform that helps organizations hire remote talent across borders. Operating in over 160 countries, it handles hiring, onboarding, payroll, benefits administration, and labor-law compliance. Panther is a 100% remote company in a period of significant growth, having raised $2.5M in its latest funding round.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Global payroll & compliance" },
+ { icon: "rocket", label: "Scale", value: "160+ countries, 100% remote, $2.5M raised" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value: "TypeScript, Node.js, MySQL, MongoDB, GraphQL (Apollo Federation), React",
+ },
+ { icon: "database", label: "Using", value: "Prisma ORM · Prisma Data Proxy" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Panther set out to build a complex platform from multiple independent services, and needed to keep data consistent across a distributed microservices architecture. Its domain-driven design and federated GraphQL API depended on reliable database interaction underneath.",
+ ],
+ points: [
+ {
+ icon: "server",
+ title: "Many independent services.",
+ body: "Each team owns its own service, but the data has to stay consistent across all of them.",
+ },
+ {
+ icon: "code",
+ title: "A federated GraphQL API.",
+ body: "Data from many services funnels into one API, and its shape has to be guaranteed.",
+ },
+ {
+ icon: "database",
+ title: "Reliable database interaction.",
+ body: "A distributed architecture across borders needs database tooling teams can depend on.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Panther chose Prisma",
+ intro:
+ "Before committing, co-founder and CTO Vasil Popovski looked hard at whether Prisma was a technology Panther could rely on for the long run, weighing its backing, community, and documentation. On the product side, the draw was faster time to market, developer productivity, type safety, and guaranteed data structures through the GraphQL API.",
+ cards: [
+ {
+ icon: "shield",
+ title: "A technology to rely on",
+ body: "Backing, community, and complete documentation that made Prisma safe to standardize on.",
+ },
+ {
+ icon: "checkCircle",
+ title: "Guaranteed data shape",
+ body: "Type safety that ensures the data reaching the GraphQL API is valid and correctly shaped.",
+ },
+ {
+ icon: "rocket",
+ title: "Faster time to market",
+ body: "Developer productivity that helps independent teams ship quickly.",
+ },
+ ],
+ },
+ quote: {
+ text: "I did a lot of investigation on whether Prisma was going to be supported by its creators, whether it's something we can rely on and will be here in the long run. I also looked at the community, which is an important factor when switching to a new technology, and finally the completeness of the documentation.",
+ author: "Vasil Popovski",
+ role: "Co-founder & CTO",
+ company: "Panther",
+ companyHref: "https://www.panther.co/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Panther's platform is built in TypeScript and Node.js, with MySQL and MongoDB behind the services, a React frontend, and a federated GraphQL API using Apollo Federation, with Dataloaders batching and caching requests. Prisma ORM sits in the services as the database layer, guaranteeing the shape of the data that funnels through the main GraphQL API. Prisma Data Proxy handles database connections for serverless without exhausting them.",
+ "This lets individual microservice teams keep their freedom while the platform maintains data consistency across the federated GraphQL layer.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Panther built a complex, distributed platform where independent teams ship freely and the data stays consistent across all of it.",
+ items: [
+ {
+ icon: "layoutGrid",
+ stat: "160+ countries",
+ detail: "Automated global payroll and compliance across more than 160 countries.",
+ },
+ {
+ icon: "server",
+ stat: "Independent teams, consistent data",
+ detail: "Microservice teams keep their freedom while data stays consistent.",
+ },
+ {
+ icon: "code",
+ stat: "One federated GraphQL API",
+ detail: "Data from many services funnels through one API with a guaranteed shape.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "We have to rely on a lot of internal APIs, and Prisma guarantees that the data and the shape of the data that gets funnelled through the main GraphQL API at the end is valid and is of a specific shape.",
+ author: "Vasil Popovski",
+ role: "Co-founder & CTO",
+ company: "Panther",
+ },
+ cta: {
+ heading: "Build on the same stack as Panther",
+ body: "Panther keeps data consistent across a global microservices platform. See what Prisma can do for yours.",
+ checks: [
+ "Free to start, no credit card required",
+ "Type-safe data across every service",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "rapha",
+ name: "Rapha",
+ logo: "/logos/customers/rapha.svg",
+ hero: {
+ title: "How Rapha keeps data consistent across mobile, web, and its clubhouses with Prisma",
+ lead: "Rapha, a global cycling apparel and lifestyle company, meets customers across iOS and Android apps, an e-commerce site, blog content, and physical clubhouses around the world. Its mobile team uses Prisma to manage the data behind all of it, changing the schema quickly and safely while keeping a stable interface across every platform.",
+ support:
+ "With Prisma 2 and Prisma Migrate, changes flow from one schema file through to the GraphQL API its apps consume, tracked in version control and applied through CI/CD.",
+ },
+ about: {
+ heading: "About Rapha",
+ body: "Rapha is a cycling apparel and lifestyle company redefining comfort, performance, and style for cyclists everywhere, from beginners to World Tour professionals. Beyond activewear, it organizes and sponsors rides and events, founded the Rapha Cycling Club in 2015, and runs the Rapha Foundation to support cycling non-profits. Its customers reach Rapha across mobile apps, the web, its blog, and physical clubhouses worldwide.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Cycling apparel & lifestyle" },
+ { icon: "rocket", label: "Scale", value: "Global, beginners to World Tour pros" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value:
+ "PostgreSQL (Amazon RDS), Nexus Schema, Apollo Server, Contentful, Docker on ECS, SQS, Lambda, Cloudflare",
+ },
+ { icon: "database", label: "Using", value: "Prisma 2 (ORM) · Prisma Migrate" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Rapha's mobile team needed to develop against their database quickly and safely, while keeping schema changes between the database and their GraphQL API organized across platforms.",
+ ],
+ points: [
+ {
+ icon: "rocket",
+ title: "Fast, safe database work.",
+ body: "The team needed tooling to build against the database without risky, manual changes.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Organized schema changes.",
+ body: "Changes had to stay in sync between the backing database and the GraphQL API that feeds iOS and Android.",
+ },
+ {
+ icon: "swap",
+ title: "Room to change storage later.",
+ body: "They wanted the flexibility to evaluate or switch data storage options without breaking the stable interfaces their apps depend on.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Rapha chose Prisma ORM",
+ intro:
+ "Rapha adopted Prisma 2 as its ORM and Prisma Migrate to manage schema changes across development and production. Prisma gave the team a typed way to work with the database and a decoupled interface, so the apps stay stable even as the data layer evolves.",
+ cards: [
+ {
+ icon: "code",
+ title: "A typed ORM for Node and TypeScript",
+ body: "Prisma 2 lets the team build against the database quickly and safely.",
+ },
+ {
+ icon: "gitBranch",
+ title: "Managed schema changes",
+ body: "Prisma Migrate keeps changes organized and consistent across dev and production.",
+ },
+ {
+ icon: "layers",
+ title: "A stable interface across platforms",
+ body: "The data layer stays decoupled, so iOS and Android see a consistent interface even if storage changes.",
+ },
+ ],
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "The team makes data-model changes in the Prisma schema file, which updates the underlying database tables and feeds into the GraphQL API consumed by the iOS and Android apps. Prisma Migrate detects schema changes, generates SQL migration files stored in version control, and applies them automatically through the CI/CD pipeline or a manual deploy.",
+ "Prisma sits inside a wider stack: a PostgreSQL database on Amazon RDS, Nexus Schema for type definitions, Apollo Server for the GraphQL API, Contentful for content, Docker containers on Amazon ECS, Amazon SQS for queuing, AWS Lambda for asynchronous tasks, and Cloudflare for edge acceleration.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Prisma gives Rapha's mobile team an organized, version-controlled way to evolve the data behind every platform.",
+ items: [
+ {
+ icon: "layers",
+ stat: "One schema, every platform",
+ detail:
+ "Data-model changes flow from the Prisma schema through to the GraphQL API the apps consume.",
+ },
+ {
+ icon: "gitBranch",
+ stat: "Version-controlled migrations",
+ detail:
+ "Prisma Migrate generates SQL migrations tracked in version control and applied via CI/CD.",
+ },
+ {
+ icon: "swap",
+ stat: "Storage flexibility",
+ detail: "A decoupled interface keeps the apps stable even if storage options change.",
+ },
+ ],
+ },
+ cta: {
+ heading: "Build on the same stack as Rapha",
+ body: "Rapha manages data across mobile, web, and its clubhouses on Prisma. See what Prisma can do for your stack.",
+ checks: [
+ "Free to start, no credit card required",
+ "Type-safe ORM with version-controlled migrations",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "grover",
+ name: "Grover",
+ logo: "/logos/customers/grover.svg",
+ hero: {
+ title: "How Grover standardized database access across mixed-stack teams with Prisma",
+ lead: "Grover, a tech-product subscription service with over 800,000 users, runs 14 services across independent teams and multiple languages behind a federated GraphQL API. Prisma gives those teams one standardized, type-safe way to work with their databases.",
+ support:
+ "It started with a single engineer in 2020 and spread across the org from there. With Prisma Client, Migrate, and Studio, developers get end-to-end type safety and a consistent workflow for queries, migrations, and viewing data, no matter which stack their service runs on.",
+ },
+ about: {
+ heading: "About Grover",
+ body: "Grover is a tech-product subscription service that rents phones, tablets, and computers by the month, built around sustainable, circular consumption of consumer electronics. With more than 800,000 users and €60M raised in Series B funding, Grover runs a federated architecture where multiple independent teams own their own services.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Consumer electronics subscription" },
+ { icon: "rocket", label: "Scale", value: "800,000+ users, €60M Series B" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value: "TypeScript, Ruby, Python, federated GraphQL, TypeGraphQL, Nexus",
+ },
+ {
+ icon: "database",
+ label: "Using",
+ value: "Prisma Client · Prisma Migrate · Prisma Studio",
+ },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Grover runs with multiple independent development teams, each managing its own services inside a federated GraphQL API. That's 14 unique services spread across different technology stacks, TypeScript, Ruby, and Python, using frameworks like TypeGraphQL and Nexus.",
+ "The tension was keeping teams autonomous while still integrating data cohesively:",
+ ],
+ points: [
+ {
+ icon: "server",
+ title: "Every team works its own way.",
+ body: "Independent teams own their services and pick their own tools, so there's no shared approach to data.",
+ },
+ {
+ icon: "code",
+ title: "Several languages in the mix.",
+ body: "Services run across TypeScript, Ruby, and Python, with no common default for database access.",
+ },
+ {
+ icon: "layers",
+ title: "One API has to unify it all.",
+ body: "However each team builds, the data still has to come together in a single federated GraphQL layer.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Grover chose Prisma",
+ intro:
+ "Prisma spread through Grover organically. Software Engineer Ricardo Almeida started experimenting with it in 2020, saw immediate results, and shared what he learned in cross-team sessions until other teams picked it up too. The draw was a low learning curve paired with end-to-end type safety.",
+ cards: [
+ {
+ icon: "rocket",
+ title: "Low learning curve",
+ body: "Teams could adopt Prisma quickly without a steep ramp-up.",
+ },
+ {
+ icon: "shield",
+ title: "End-to-end type safety",
+ body: "The Prisma Schema Language defines the models and auto-generates TypeScript types.",
+ },
+ {
+ icon: "repeat",
+ title: "One standardized workflow",
+ body: "Queries, migrations, and data viewing work the same way across every team.",
+ },
+ ],
+ },
+ quote: {
+ text: "Prisma has a low learning curve. Productivity becomes higher because it gets combined with end-to-end type-safety using TypeScript.",
+ author: "Ricardo Almeida",
+ role: "Software Engineer",
+ company: "Grover",
+ companyHref: "https://www.grover.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Across Grover's mixed-stack environment, the Prisma Schema Language defines the database models and automatically generates TypeScript types. Developers use single commands to generate the schema and run migrations, and it fits into their CI/CD pipelines. Prisma Client handles type-safe database access, Prisma Migrate manages schema changes, and Prisma Studio gives teams a browser-based way to view their data, all out of the box.",
+ "As Ricardo Almeida put it: “Prisma provides a more standardized way to access databases, carry out migrations, and view data, all out of the box. Prisma provides a single and standardised way to build queries, where we're sure not to face issues with grouping data, worry about joins, or glue different libraries together.”",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Prisma became a shared standard across Grover's teams, one consistent way to work with data in an otherwise mixed-stack, federated setup.",
+ items: [
+ {
+ icon: "rocket",
+ stat: "800,000+ users",
+ detail: "Serving a large user base across a federated architecture.",
+ },
+ {
+ icon: "layers",
+ stat: "14 services",
+ detail: "One standardized data workflow across services and stacks.",
+ },
+ {
+ icon: "repeat",
+ stat: "Adopted team by team",
+ detail: "Spread organically from a single engineer to teams across the org.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "I would be very interested in seeing other teams migrate to use Prisma, since I can only see benefits in using it.",
+ author: "Ricardo Almeida",
+ role: "Software Engineer",
+ company: "Grover",
+ },
+ cta: {
+ heading: "Build on the same stack as Grover",
+ body: "Grover standardized data access across independent teams and stacks on Prisma. See what Prisma can do for yours.",
+ checks: [
+ "Free to start, no credit card required",
+ "Type-safe access, migrations, and data viewing out of the box",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "invisible",
+ name: "Invisible",
+ logo: "/logos/customers/invisible.svg",
+ hero: {
+ title: "How migrating from Sequelize to Prisma let Invisible scale with zero downtime",
+ lead: "Invisible, a B2B automation startup whose revenue quadrupled over the past year, outgrew Sequelize as it scaled. It migrated to Prisma gradually and with zero downtime, while hundreds of agents kept working around the clock and customers saw no interruption.",
+ support:
+ "Prisma gave the team auto-generated types, a modern fluent API, and a fully type-safe stack. Paired with tRPC and Vercel, it drastically simplified their architecture and sped up how fast they ship features.",
+ },
+ about: {
+ heading: "About Invisible",
+ body: "Invisible is a B2B productivity company in the operational-efficiency and automation space. Its “Worksharing” platform lets customers automate and outsource complex workflows, combining elements of business process outsourcing and robotic process automation while keeping human discretion in the loop. Over the past year, Invisible's revenue quadrupled, with hundreds of agents working globally, 24/7.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Business automation / productivity" },
+ { icon: "rocket", label: "Scale", value: "Revenue 4x in a year, hundreds of agents 24/7" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value: "React/Next.js, Node.js, tRPC, TypeScript, NX, Vercel, PostgreSQL",
+ },
+ { icon: "database", label: "Using", value: "Prisma ORM" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Invisible started on Sequelize, but as the platform grew, the ORM became a constraint:",
+ ],
+ points: [
+ {
+ icon: "code",
+ title: "Too much boilerplate.",
+ body: "Creating models required extensive boilerplate code.",
+ },
+ {
+ icon: "shield",
+ title: "Types that didn't keep up.",
+ body: "Type definitions didn't update dynamically based on what a query actually selected.",
+ },
+ {
+ icon: "settings",
+ title: "Not flexible enough.",
+ body: "Sequelize lacked the flexibility the team needed for complex backend logic.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why Invisible chose Prisma",
+ intro:
+ "Prisma fit where Sequelize fell short: types generated from the actual query, a modern and learnable API, and a foundation the team could build on for the long term.",
+ cards: [
+ {
+ icon: "shield",
+ title: "Types from your query",
+ body: "Prisma auto-generates types based on what each query selects, so the types always match the data.",
+ },
+ {
+ icon: "code",
+ title: "A modern, fluent API",
+ body: "An API that's quick to learn and pleasant to work in, a step up from Sequelize and TypeORM.",
+ },
+ {
+ icon: "layers",
+ title: "Future-proof foundation",
+ body: "A modern data layer the team could standardize on as the stack evolved.",
+ },
+ ],
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Invisible migrated gradually, with zero downtime. The team stood up a Prisma client alongside the existing Sequelize client in their Heroku-hosted API monolith, then used Prisma introspect to build a new schema from the existing database. From there they built a new serverless GraphQL API on Vercel using Postgres with Prisma exclusively, migrating simple data models and business logic first and moving high-volume requests onto new serverless functions to reduce load. They're now migrating the remaining queries off Sequelize, aiming to deprecate it fully within a year.",
+ "Today Prisma is abstracted into a shared library across their microservices, managing database connections automatically for serverless functions. The wider stack is React and Next.js on the frontend, Node.js APIs, a highly relational PostgreSQL data model through Prisma, and tRPC in place of GraphQL and Apollo, all in a fully type-safe TypeScript codebase.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Invisible moved off Sequelize without disrupting a 24/7 operation, and came out with a simpler, faster stack.",
+ items: [
+ {
+ icon: "shield",
+ stat: "Zero downtime",
+ detail:
+ "Migrated with no service interruption while hundreds of agents worked around the clock.",
+ },
+ {
+ icon: "rocket",
+ stat: "Revenue 4x in a year",
+ detail: "Scaled through a period of rapid growth.",
+ },
+ {
+ icon: "layers",
+ stat: "A simpler, faster stack",
+ detail:
+ "Drastically simplified architecture and faster feature deployment than with Sequelize.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "Prisma's approach to type-safe ORM is next-level compared to Sequelize and even TypeORM. The tRPC + Prisma combo is insanely easy to get going with. It provides full type-safety without any codegen or messy types and interfaces to write and maintain. Prisma generates the types, tRPC consumes them and passes them down, and we don't even need to maintain any API servers. With Next.js and Vercel we also get great DX and UX at a fraction of the cost we'd usually have to pay to run our own stateful servers.",
+ author: "Pieter Venter",
+ role: "Sr. Software Engineer",
+ company: "Invisible",
+ compact: true,
+ },
+ cta: {
+ heading: "Build on the same stack as Invisible",
+ body: "Invisible migrated off Sequelize to Prisma with zero downtime and came out faster. See what Prisma can do for your stack.",
+ checks: [
+ "Free to start, no credit card required",
+ "Type-safe ORM with types generated from your queries",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "pearly",
+ name: "Pearly",
+ logo: "/logos/customers/pearly-white.webp",
+ logoAsIs: true,
+ hero: {
+ title: "How one developer built and scaled two dental fintech products with Prisma",
+ lead: "Pearly, a HIPAA-compliant dental financial platform, built both of its products, Pearly Pay and Pearly Plan, with a single developer. Prisma abstracted away the database work, so one engineer could iterate fast on market feedback and still scale after launch.",
+ support:
+ "From day one, Prisma Client and Prisma Migrate let the team prototype schemas quickly, ship features in a fraction of the time, and keep the whole stack type-safe.",
+ },
+ about: {
+ heading: "About Pearly",
+ body: "Pearly is a dental financial engagement platform that helps dentists build reliable revenue streams and offer patients affordable care. It runs two products: Pearly Pay, which automates payments for dental practices, and Pearly Plan, which gives patients access to affordable care plans through their dentist. The platform is HIPAA-compliant for handling sensitive patient information.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Dental fintech / patient financing" },
+ { icon: "shield", label: "Compliance", value: "HIPAA" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value:
+ "GraphQL (Apollo), GraphQL Nexus, GCP serverless, PostgreSQL, TypeScript, Stripe, Firebase",
+ },
+ { icon: "database", label: "Using", value: "Prisma Client · Prisma Migrate" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Pearly needed to move fast with an ultra-lean team without painting itself into a corner. The initial versions of both products were built by a single developer, who had to balance two things at once:",
+ ],
+ points: [
+ {
+ icon: "rocket",
+ title: "Iterate fast on feedback.",
+ body: "Ship and adjust quickly as the market responded.",
+ },
+ {
+ icon: "layers",
+ title: "Still scale after launch.",
+ body: "Build in a way that would hold up as the products grew.",
+ },
+ {
+ icon: "shield",
+ title: "Handle sensitive data carefully.",
+ body: "Everything runs under HIPAA compliance.",
+ },
+ ],
+ outro: "For one developer, that left no room to spend time hand-managing the database.",
+ },
+ reasons: {
+ heading: "Why Pearly chose Prisma",
+ intro:
+ "Sean Emmer, CTO and co-founder, chose Prisma from day one because it abstracted database management and let him focus on the features that mattered most. It fit Pearly's lean approach: reduce risk quickly, then iterate.",
+ cards: [
+ {
+ icon: "database",
+ title: "Database work, abstracted",
+ body: "Prisma handled the database layer so a single developer could focus on core features.",
+ },
+ {
+ icon: "rocket",
+ title: "Built for fast iteration",
+ body: "A workflow that matched a lean, feedback-driven way of building.",
+ },
+ {
+ icon: "shield",
+ title: "Type-safe end to end",
+ body: "Type safety across frontend and backend cut down on compile-time bugs.",
+ },
+ ],
+ },
+ quote: {
+ text: "We've been really happy with our decision to use Prisma. We've been iterating very fast.",
+ author: "Sean Emmer",
+ role: "CTO & Co-Founder",
+ company: "Pearly",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Prisma Client gives Pearly a clean API for database access, and Prisma Migrate manages schema changes. Early on, the team could prototype schemas rapidly with prisma db push, iterating on the data model without migration versioning until it settled.",
+ "Prisma sits in a TypeScript stack front to back: a GraphQL API with Apollo and GraphQL Nexus abstracts multiple third-party services, with the schema registered in Apollo's registry so the frontend gets generated types. The rest runs on Google Cloud's serverless platform with PostgreSQL, plus Stripe and Firebase integrations.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "With Prisma handling the data layer, one developer shipped and scaled two products, and shipped features far faster.",
+ items: [
+ {
+ icon: "rocket",
+ stat: "Half the build time",
+ detail: "Features that used to take a day or two now take half a day.",
+ },
+ {
+ icon: "bot",
+ stat: "Two products, one developer",
+ detail: "A single developer built and scaled both Pearly Pay and Pearly Plan.",
+ },
+ {
+ icon: "shield",
+ stat: "Type-safe, fewer bugs",
+ detail: "End-to-end type safety reduced compile-time bugs.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "This is the fastest I've ever developed in my life, by far. The tooling has dramatically cut down on the amount of time I've had to spend working on things. Not only that, but I've also been able to say yes to a lot of new incremental features, that used to be a 1-2 day thing and that are now a half-day thing.",
+ author: "Sean Emmer",
+ role: "CTO & Co-Founder",
+ company: "Pearly",
+ },
+ cta: {
+ heading: "Build on the same stack as Pearly",
+ body: "Pearly built and scaled two products with one developer on Prisma. See what Prisma can do for your team.",
+ checks: [
+ "Free to start, no credit card required",
+ "A clean, type-safe data layer that scales with you",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "poppy",
+ name: "Poppy",
+ logo: "/logos/customers/poppy-white.png",
+ logoAsIs: true,
+ hero: {
+ title: "How Poppy runs a multi-vehicle mobility service with Prisma",
+ lead: "Poppy, a Belgian mobility-sharing service, offers shared cars, e-scooters, and e-steps across three cities through a single app, and has served 1.5 million rides. Prisma Client gives its engineers a type-safe way to manage the complex data behind that simple experience.",
+ support:
+ "Every engineer at Poppy develops with Prisma in production. Type safety, together with thorough integration tests, gives the team the confidence to refactor critical parts of the codebase as they scale.",
+ },
+ about: {
+ heading: "About Poppy",
+ body: "Poppy is a mobility-sharing service based in Belgium, operating in Antwerp, Brussels, and Mechelen. Through its mobile app, riders can access over 500 shared cars, 400 e-scooters, and 200 e-steps. By mid-2021, Poppy had reached 1.5 million total rides, serving thousands of rides every week.",
+ facts: [
+ { icon: "layoutGrid", label: "Industry", value: "Mobility / vehicle sharing" },
+ {
+ icon: "rocket",
+ label: "Scale",
+ value: "500+ cars, 400 e-scooters, 200 e-steps, 1.5M rides",
+ },
+ {
+ icon: "layers",
+ label: "Stack",
+ value:
+ "Node.js (Fastify), React Native, PostgreSQL + PostGIS, Redis, Twilio, Docker, GCP, BigQuery",
+ },
+ { icon: "database", label: "Using", value: "Prisma Client" },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "Behind Poppy's simple app is a lot of moving architecture. Running a shared fleet across multiple cities means handling:",
+ ],
+ points: [
+ {
+ icon: "server",
+ title: "Location awareness.",
+ body: "Knowing where every vehicle is, across a distributed network.",
+ },
+ {
+ icon: "repeat",
+ title: "Payments and notifications.",
+ body: "Processing rides and keeping riders informed.",
+ },
+ {
+ icon: "layers",
+ title: "Multiple vehicle types.",
+ body: "Cars, e-scooters, and e-steps, each with their own logic.",
+ },
+ ],
+ outro:
+ "Keeping all of that manageable, without the codebase becoming its own obstacle, was the challenge.",
+ },
+ reasons: {
+ heading: "Why Poppy chose Prisma",
+ intro:
+ "Poppy's team had followed Prisma since its early graph.cool days. When they started a greenfield project, they gave Prisma 2's early release a shot and were quickly convinced, largely because of how well it integrated with TypeScript.",
+ cards: [
+ {
+ icon: "rocket",
+ title: "A team already sold on the DX",
+ body: "Early graph.cool fans who'd watched Prisma evolve and trusted the developer experience.",
+ },
+ {
+ icon: "code",
+ title: "Great TypeScript integration",
+ body: "Prisma 2 fit their TypeScript stack so well the choice was easy on a greenfield build.",
+ },
+ {
+ icon: "shield",
+ title: "Type-safe database access",
+ body: "Typed queries reduced coding errors across a complex system.",
+ },
+ ],
+ },
+ quote: {
+ text: "Two of us in the team were early graph.cool fans and were super impressed by the quality and developer experience. I remember checking Prisma 1 at the time but was a bit reluctant to add an additional server to set it up. Then when came the time to start on a greenfield project we gave Prisma 2's early release a shot and were immediately convinced we had to use it as it integrated TypeScript so well.",
+ author: "Thibaut Nguyen",
+ role: "CTO",
+ company: "Poppy",
+ companyHref: "https://poppy.be/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "Every engineer at Poppy builds with Prisma Client in production. It sits in a Node.js and Fastify backend serving a React Native app, on top of PostgreSQL with the PostGIS extension for the geospatial queries that power location awareness. Around it, the stack uses Redis, Twilio for notifications, Docker, and Google Cloud, with Google BigQuery holding IoT data streaming from the vehicles.",
+ "Type-safe database access keeps errors down across all of that complexity and gives the team the confidence to change critical code without fear of breaking it.",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "Prisma lets Poppy move fast on a genuinely complex system, and refactor it safely as it grows.",
+ items: [
+ {
+ icon: "rocket",
+ stat: "1.5M rides",
+ detail: "Served across cars, e-scooters, and e-steps in three cities.",
+ },
+ {
+ icon: "code",
+ stat: "Every engineer on Prisma",
+ detail: "The whole team develops with Prisma in production.",
+ },
+ {
+ icon: "shield",
+ stat: "Confident refactoring",
+ detail: "Type safety plus strong test coverage makes critical refactors safe.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "The combination of Prisma, TypeScript and our pretty thorough coverage with integration tests gives us the confidence to refactor critical parts of our code.",
+ author: "Thibaut Nguyen",
+ role: "CTO",
+ company: "Poppy",
+ },
+ cta: {
+ heading: "Build on the same stack as Poppy",
+ body: "Poppy runs a complex, multi-vehicle mobility service on Prisma. See what Prisma can do for your stack.",
+ checks: [
+ "Free to start, no credit card required",
+ "Type-safe database access, even for complex systems",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+ {
+ slug: "iopool",
+ name: "iopool",
+ logo: "/logos/customers/iopool-white.png",
+ logoAsIs: true,
+ hero: {
+ title: "How iopool refactored a two-year project in under six months with Prisma",
+ lead: "iopool, maker of a smart pool-management system, was buried in technical debt: 16 microservices with no consistency, a NoSQL database faking its relationships, and no way to test locally. It had less than six months to refactor two years of work before its June high season. Prisma made it possible.",
+ support:
+ "With Prisma as its core ORM, iopool rebuilt on a relational foundation, set up type-safe database access within a week, and went from shipping every few weeks to multiple times a week.",
+ },
+ about: {
+ heading: "About iopool",
+ body: "iopool offers a complete pool-management solution for private pools, jacuzzis, and hot tubs. Its system combines a smart pool sensor, a mobile app, and products that help owners keep their water safe and clean. Behind the simple experience is a connected-hardware platform handling water-quality data at scale.",
+ facts: [
+ {
+ icon: "layoutGrid",
+ label: "Industry",
+ value: "Connected hardware / pool management (IoT)",
+ },
+ { icon: "settings", label: "Product", value: "Smart pool sensor and app" },
+ {
+ icon: "layers",
+ label: "Stack",
+ value:
+ "React Native, GraphQL (Apollo), AWS Lambda, Nexus, PostgreSQL, DynamoDB, TypeScript",
+ },
+ {
+ icon: "database",
+ label: "Using",
+ value: "Prisma Client · Prisma Schema · Prisma Migrate",
+ },
+ ],
+ },
+ challenge: {
+ heading: "The challenge",
+ body: [
+ "By 2020, iopool's technical debt was threatening its growth. The team had built up problems that made every change harder than it should be:",
+ ],
+ quote: {
+ text: "It was a developer's nightmare.",
+ author: "Luc Matagne",
+ role: "Lead Software Engineer",
+ company: "iopool",
+ },
+ points: [
+ {
+ icon: "server",
+ title: "16 microservices, no consistency.",
+ body: "File structures, code organization, and tooling all varied service to service.",
+ },
+ {
+ icon: "database",
+ title: "A NoSQL database faking relations.",
+ body: "Relationships were managed artificially, with “fake relations” holding the data together.",
+ },
+ {
+ icon: "settings",
+ title: "No local testing.",
+ body: "Services had to be deployed to the cloud just to test them.",
+ },
+ {
+ icon: "rocket",
+ title: "A hard deadline.",
+ body: "They needed to refactor a two-year project in under six months, before their June high season.",
+ },
+ ],
+ },
+ reasons: {
+ heading: "Why iopool chose Prisma",
+ intro:
+ "iopool set five requirements for a new ORM: speed with a minimal learning curve, flexibility for frequent releases, ease of use, reliability for robust unit testing, and the comfort of being able to test locally. Prisma met them, and gave the team the confidence to take on the full rebuild.",
+ cards: [
+ {
+ icon: "rocket",
+ title: "Fast to adopt",
+ body: "A minimal learning curve meant the team could move quickly under a tight deadline.",
+ },
+ {
+ icon: "settings",
+ title: "Local testing back",
+ body: "Prisma let engineers test locally instead of deploying to the cloud first.",
+ },
+ {
+ icon: "shield",
+ title: "Reliable and type-safe",
+ body: "Type-safe access made robust unit testing across the backend possible.",
+ },
+ ],
+ },
+ quote: {
+ text: "Because we found Prisma, we decided to start the refactor for the full project.",
+ author: "Luc Matagne",
+ role: "Lead Software Engineer",
+ company: "iopool",
+ companyHref: "https://iopool.com/",
+ },
+ usage: {
+ heading: "How they use Prisma",
+ body: [
+ "iopool rebuilt on a relational foundation with PostgreSQL as its primary database, accessed through Prisma Client for type safety. They use the Prisma schema to iterate on the database quickly and Prisma Migrate to manage schema changes collaboratively across the team.",
+ "Prisma sits in a new stack: a React Native app, a GraphQL API with Apollo and Nexus, AWS Lambda for serverless functions, and DynamoDB alongside PostgreSQL for water-quality data at scale, all in TypeScript. As Luc Matagne put it: “When we're editing or making a change to the schema, we know that if we're using Prisma, it's going to work.”",
+ ],
+ },
+ results: {
+ heading: "The results",
+ intro:
+ "iopool shipped the refactor on time and came out shipping far faster, with the confidence to change critical code safely.",
+ items: [
+ {
+ icon: "rocket",
+ stat: "Type-safe access in a week",
+ detail: "Type-safe database access up and running within a week of adopting Prisma.",
+ },
+ {
+ icon: "repeat",
+ stat: "Shipping multiple times a week",
+ detail:
+ "Release frequency jumped from once every few weeks to multiple times a week, with feature work going from weeks to days.",
+ },
+ {
+ icon: "checkCircle",
+ stat: "Refactor shipped on time",
+ detail: "The two-year rebuild landed on schedule for the June high season.",
+ },
+ ],
+ },
+ closingQuote: {
+ text: "Without Prisma we would never had iopool 2.0 ready on time. We can now sleep soundly after each new commit, with Prisma the margin of error is so very small.",
+ author: "Luc Matagne",
+ role: "Lead Software Engineer",
+ company: "iopool",
+ },
+ cta: {
+ heading: "Build on the same stack as iopool",
+ body: "iopool rebuilt two years of work on Prisma in under six months. See what Prisma can do for your team.",
+ checks: [
+ "Free to start, no credit card required",
+ "Type-safe access, rapid schema iteration, and safe migrations",
+ "Trusted by 500K+ developers",
+ ],
+ },
+ },
+];
+
+const BY_SLUG = new Map(CUSTOMER_STORY_DETAILS.map((s) => [s.slug, s]));
+
+export function getCustomerStory(slug: string): CustomerStoryDetail | undefined {
+ return BY_SLUG.get(slug);
+}
+
+/** Slugs with a built detail page — customers-grid uses this to link inward. */
+export const STORY_DETAIL_SLUGS = new Set(BY_SLUG.keys());
diff --git a/apps/site/src/data/customers.ts b/apps/site/src/data/customers.ts
new file mode 100644
index 00000000000..025f96fe9cc
--- /dev/null
+++ b/apps/site/src/data/customers.ts
@@ -0,0 +1,506 @@
+// The single source for everything on /customers.
+//
+// Ported from apps/site (the live prisma.io source) so the redesign can't drift
+// from the real showcase: `stories` and `communityProjects` come out of
+// apps/site/src/data/showcase.ts, the band comes out of
+// components/logo-parade.tsx. Logo files were copied into
+// /public/logos/customers, preferring each company's `_light` variant — on
+// prisma.io the bare filename is the dark-mode mark and `_light` is the
+// light-mode one, and this site is light-only.
+//
+// Deliberately one module rather than three. testimonials-reveal.tsx,
+// testimonials-strip.tsx and logo-cloud.tsx each keep their own private copy of
+// the same customer list and have already drifted apart; every surface on this
+// page reads from here instead.
+//
+// prisma.io has no standalone mark for several of these stories — its cards use
+// pre-baked dark "X | Prisma" lockups (/photos/showcase/stories/*), which are
+// unusable on a light card and are what the card-image template replaces.
+// André supplied white-on-transparent marks for all of them on 2026-08-17
+// (Reflag, Amplication, Formbricks, iopool, plus Poppy and Tryg replacing red
+// knockout boxes). **All 13 stories now carry a real logo**; the text-wordmark
+// fallback on `logo` is unused but kept for whatever gets added next.
+//
+// Bucket now trades as Reflag, and the mark supplied is the Reflag one, so the
+// card art reads "Prisma | Reflag" while the story title beside it still says
+// "How Bucket Uses Prisma ORM…" — that is the real title of the linked post.
+// Unresolved: rename the story, or keep the Bucket-era wording.
+
+export type CustomerStory = {
+ slug: string;
+ name: string;
+ title: string;
+ excerpt: string;
+ /** Technologies the customer runs alongside Prisma; rendered as Marker chips. */
+ stack: string[];
+ /** The story itself — a prisma.io blog post until /customers/[slug] exists. */
+ href: string;
+ /**
+ * File in /public/logos/customers. Omit to render a text wordmark instead.
+ *
+ * Only ever rendered on the black story art, so a white-on-transparent mark
+ * is fine here — unlike BAND_LOGOS and COMMUNITY_LOGOS, which sit on white
+ * tiles. Where a company appears in both (Poppy), they are deliberately two
+ * different files: overwriting the shared one puts a white mark on a white
+ * tile in the hero band.
+ */
+ logo?: string;
+ /**
+ * Skip the whitening filter on the black story art (story-art.tsx).
+ *
+ * Default (omitted) flattens the mark to pure white with `brightness-0
+ * invert`, which is right for the dark-ink-on-transparent marks. Set `asis`
+ * where that filter would destroy the logo, for either reason:
+ *
+ * - the mark is ALREADY white — Reflag, Amplication, Formbricks, Poppy,
+ * Tryg, Solin. Inverting white gives black, i.e. invisible on the plate;
+ * - the mark is a knockout, white type inside a solid colour block, where
+ * whitening fills the block too and leaves a featureless slab. Nothing is
+ * in this state now (Tryg and Solin both were, and both have since been
+ * replaced with proper white marks), but it is why the escape hatch exists.
+ *
+ * Verified per logo by rendering both ways on black.
+ */
+ onDark?: "asis";
+ /**
+ * Optical size correction on the story art. Every mark is capped to a common
+ * max-height, which matches them physically but not optically: a heavy
+ * blocked wordmark (Poppy) reads far larger than a light one at the same
+ * height. Same idea as `fit` on logo-cloud's Logo type.
+ */
+ markFit?: "sm" | "lg";
+};
+
+export type CustomerLogo = {
+ name: string;
+ src: string;
+ /** Omitted where prisma.io has no link for the company (Insta Group). */
+ href?: string;
+};
+
+export const CUSTOMER_STORIES: CustomerStory[] = [
+ {
+ slug: "reflag",
+ name: "Bucket",
+ title: "How Bucket Uses Prisma ORM to Make Shipping Feature Releases Faster",
+ excerpt:
+ "Discover how Bucket, a fast-growing feature management platform, uses Prisma ORM to simplify complex relational queries and accelerate feature releases. Learn how their lean team delivers high-quality features faster while managing evolving database needs with ease.",
+ stack: ["prisma"],
+ href: "https://prisma.io/blog/how-bucket-uses-prisma-orm",
+ logo: "/logos/customers/reflag-white.png",
+ onDark: "asis",
+ },
+ {
+ slug: "amplication",
+ name: "Amplication",
+ title: "How Prisma helps Amplication evolutionize backend development",
+ excerpt:
+ "Amplication is an open-source development tool. It helps you develop quality Node.js applications without spending time on repetitive coding tasks. It’s perfect for both backend and fullstack developers.",
+ stack: ["nest", "postgres", "prisma", "graphql", "docker"],
+ href: "https://prisma.io/blog/amplication-customer-story-nmlkBNlLlxnN",
+ logo: "/logos/customers/amplication-white.png",
+ onDark: "asis",
+ },
+ {
+ slug: "formbricks",
+ name: "Formbricks",
+ title: "Formbricks and Prisma Accelerate: Solving scalability together",
+ excerpt:
+ "Formbricks, an open-source survey platform, effectively tackled scalability challenges with Prisma Accelerate and strategically integrated it to manage growing user demands and maintain high performance.",
+ stack: [],
+ href: "https://prisma.io/blog/formbricks-and-prisma-accelerate-solving-scalability-together",
+ logo: "/logos/customers/formbricks-white.png",
+ onDark: "asis",
+ },
+ {
+ slug: "solin",
+ name: "Solin",
+ title: "How Solin uses Accelerate to serve 2.5M database queries per day",
+ excerpt:
+ "Learn how Prisma Accelerate has contributed to Solin's success by enhancing performance and reliability with its scalable connection pool and global database cache.",
+ stack: [],
+ href: "https://prisma.io/blog/how-solin-uses-prisma-accelerate-to-serve-2-5m-database-queries-per",
+ logo: "/logos/customers/solin-white.png",
+ onDark: "asis",
+ },
+ {
+ slug: "elsevier",
+ name: "Elsevier",
+ title:
+ "How Elsevier piloted an innovative publication process quickly and flexibly with Prisma",
+ excerpt:
+ "Elsevier is a global leader in information and analytics in scientific publishing and helps researchers and healthcare professionals. With the help of Prisma, Elsevier is in the process of modernizing the scientific publishing process efficiently and with flexibility.",
+ stack: ["graphql", "ts", "prisma", "aws", "nexus"],
+ href: "https://prisma.io/blog/elsevier-customer-story-SsAASKagMHtN",
+ logo: "/logos/customers/elsevier.svg",
+ },
+ {
+ slug: "tryg",
+ name: "Tryg",
+ title: "How Tryg has leveraged Prisma to democratize data",
+ excerpt:
+ "Tryg saved huge amounts of time thanks to its “360” Data Broker platform that accelerated development cycles by removing the overhead incurred by configuring environments manually. Prisma was the critical technology that enabled them to democratize billions of records from different data sources.",
+ stack: ["kafka", "cockroach", "graphql", "kubernetes", "prisma"],
+ href: "https://prisma.io/blog/tryg-customer-story-pdmdrRhTupvd",
+ logo: "/logos/customers/tryg-white.svg",
+ onDark: "asis",
+ },
+ {
+ slug: "panther",
+ name: "Panther",
+ title: "How Panther champions talent over geography with Prisma",
+ excerpt:
+ "Panther leverages Prisma and a cutting edge tech stack to power a domain-driven architecture. This allows Panther to ensure that its customers can automate global payroll and compliance for their remote teams with one click.",
+ stack: ["mysql", "mongodb", "graphql", "react", "prisma"],
+ href: "https://prisma.io/blog/panther-customer-story-pdmdrrhtupsl",
+ logo: "/logos/customers/panther.svg",
+ },
+ {
+ slug: "rapha",
+ name: "Rapha",
+ title: "How Prisma helps Rapha manage their mobile application data",
+ excerpt:
+ "Rapha is a company dedicated to redefining comfort, performance, and style for cyclists around the world, whether beginners or World Tour professionals. Learn how Prisma helps Rapha build consistent data APIs across various teams and platforms.",
+ stack: ["postgres", "prisma", "nexus", "apollo", "cloudflare"],
+ href: "https://prisma.io/blog/helping-rapha-access-data-across-platforms-n3jfhtyu6rgn",
+ logo: "/logos/customers/rapha.svg",
+ },
+ {
+ slug: "grover",
+ name: "Grover",
+ title: "How Grover moves faster with Prisma",
+ excerpt:
+ "Grover offers monthly tech product subscriptions and splits work on its services across many teams. Some teams have recently found huge productivity gains by adopting Prisma. Read on to find out how Prisma has benefited Grover and how you can benefit as well.",
+ stack: ["postgres", "nest", "prisma", "nexus", "apollo"],
+ href: "https://prisma.io/blog/grover-customer-success-story-nxkWGcGNuvFd",
+ logo: "/logos/customers/grover.svg",
+ },
+ {
+ slug: "invisible",
+ name: "Invisible",
+ title: "How migrating from Sequelize to Prisma allowed Invisible to scale",
+ excerpt:
+ "Invisible is a B2B productivity startup that allows its users to automate and outsource any complex workflow or business process through Worksharing. Prisma played a crucial role in allowing Invisible to future proof their tech stack and in supporting its scale.",
+ stack: ["next", "trpc", "prisma", "vercel", "postgres"],
+ href: "https://prisma.io/blog/how-migrating-from-Sequelize-to-Prisma-allowed-Invisible-to-scale-i4pz2mwu6q",
+ logo: "/logos/customers/invisible.svg",
+ },
+ {
+ slug: "pearly",
+ name: "Pearly",
+ title: "How Prisma allowed Pearly to scale quickly with an ultra-lean team",
+ excerpt:
+ "Pearly provides a platform for dentists to create better and reliable revenue streams and affordable care plans for their patients. Learn how Prisma has helped them scale quickly with an ultra-lean team.",
+ stack: ["apollo", "nexus", "prisma", "gcp", "postgres"],
+ href: "https://prisma.io/blog/pearly-plan-customer-success-pdmdrRhTupve",
+ logo: "/logos/customers/pearly.png",
+ },
+ {
+ slug: "poppy",
+ name: "Poppy",
+ title: "How Poppy uses Prisma Client to ship confidently",
+ excerpt:
+ "Poppy offers rides of all kinds through its mobile app. Whether its a car, scooter, or e-step, Poppy has it. Prisma plays a vital role in helping Poppy ship quickly and confidently and is a big reason they ve just hit 1.5 million total rides taken.",
+ stack: ["node", "postgres", "prisma", "redis", "gcp"],
+ href: "https://prisma.io/blog/poppy-customer-success-story-swnWQcGRRvpd",
+ logo: "/logos/customers/poppy-white.png",
+ onDark: "asis",
+ markFit: "sm",
+ },
+ {
+ slug: "iopool",
+ name: "iopool",
+ title: "How iopool refactored their app in less than 6 months with Prisma",
+ excerpt:
+ "In 2020, iopool realized that their architecture was slowing them down and preventing them from innovating. They decided to switch to Lambda functions and a PostgreSQL database powered by Prisma. Learn how this has helped them move fast with confidence and has greatly simplified their process.",
+ stack: ["cognito", "postgres", "aws", "prisma", "nexus"],
+ href: "https://prisma.io/blog/iopool-customer-success-story-uLsCWvaqzXoa",
+ logo: "/logos/customers/iopool-white.png",
+ onDark: "asis",
+ },
+];
+
+export const BAND_LOGOS: CustomerLogo[] = [
+ {
+ name: "Rapha",
+ src: "/logos/customers/rapha.svg",
+ href: "https://www.rapha.cc/",
+ },
+ {
+ name: "Poppy",
+ src: "/logos/customers/poppy.svg",
+ href: "https://poppy.be/",
+ },
+ {
+ name: "Panther",
+ src: "/logos/customers/panther.svg",
+ href: "https://www.panther.co/",
+ },
+ {
+ name: "Grover",
+ src: "/logos/customers/grover.svg",
+ href: "https://www.grover.com/",
+ },
+ {
+ name: "Invisible",
+ src: "/logos/customers/invisible.svg",
+ href: "https://inv.tech/",
+ },
+ {
+ name: "Elsevier",
+ src: "/logos/customers/elsevier.svg",
+ href: "https://www.elsevier.com/",
+ },
+ {
+ name: "Tryg",
+ src: "/logos/customers/tryg.svg",
+ href: "https://www.tryg.com/",
+ },
+ {
+ name: "IHI",
+ src: "/logos/customers/ihi.svg",
+ href: "https://www.ihiterrasun.com/",
+ },
+ {
+ name: "Insta",
+ src: "/logos/customers/insta.svg",
+ },
+ {
+ name: "Outrider",
+ src: "/logos/customers/outrider.svg",
+ href: "https://outrider.org/",
+ },
+ {
+ name: "Oxio",
+ src: "/logos/customers/oxio.svg",
+ href: "https://oxio.com/",
+ },
+ {
+ name: "Southpole",
+ src: "/logos/customers/southpole.svg",
+ href: "https://www.southpole.com/",
+ },
+];
+
+export const COMMUNITY_LOGOS: CustomerLogo[] = [
+ {
+ name: "South Pole",
+ src: "/logos/customers/southpole.svg",
+ href: "https://southpole.com/",
+ },
+ {
+ name: "Garages near me",
+ src: "/logos/customers/garages-near-me.svg",
+ href: "https://garages-near-me.com",
+ },
+ {
+ name: "Wasp",
+ src: "/logos/customers/wasp.svg",
+ href: "https://wasp.sh/",
+ },
+ {
+ name: "Sunhat",
+ src: "/logos/customers/sunhat.svg",
+ href: "https://www.getsunhat.com/",
+ },
+ {
+ name: "CoinRotator",
+ src: "/logos/customers/coinrotator.png",
+ href: "https://coinrotator.app/",
+ },
+ {
+ name: "Gamma",
+ src: "/logos/customers/gamma.svg",
+ href: "https://gamma.app/",
+ },
+ {
+ name: "Flux",
+ src: "/logos/customers/flux.svg",
+ href: "https://driveflux.com/",
+ },
+ {
+ name: "Nuna",
+ src: "/logos/customers/nuna.png",
+ href: "https://www.nuna.ai/",
+ },
+ {
+ name: "prosperity",
+ src: "/logos/customers/prosperity.svg",
+ href: "https://prosperity.app/en",
+ },
+ {
+ name: "Flycode",
+ src: "/logos/customers/flycode.svg",
+ href: "https://www.flycode.com/",
+ },
+ {
+ name: "wingfield",
+ src: "/logos/customers/wingfield.svg",
+ href: "https://www.wingfield.io/en",
+ },
+ {
+ name: "trunk",
+ src: "/logos/customers/trunk.svg",
+ href: "https://trunk.io/",
+ },
+ {
+ name: "apideck",
+ src: "/logos/customers/apideck.svg",
+ href: "https://www.apideck.com/",
+ },
+ {
+ name: "Dotworld Technologies",
+ src: "/logos/customers/dotworld.webp",
+ href: "https://www.dotworld.in/",
+ },
+ {
+ name: "Cal.com",
+ src: "/logos/customers/cal.svg",
+ href: "https://cal.com/",
+ },
+ {
+ name: "Tabya",
+ src: "/logos/customers/tabya.svg",
+ href: "https://tabya.de",
+ },
+ {
+ name: "Caribou",
+ src: "/logos/customers/caribou.png",
+ href: "https://caribouwealth.notion.site/Careers-at-Caribou-357783b6007f4d15bae8c7b9651cebf5",
+ },
+ {
+ name: "Revere",
+ src: "/logos/customers/revere.svg",
+ href: "https://reverecre.com/",
+ },
+ {
+ name: "Escape",
+ src: "/logos/customers/escape.svg",
+ href: "https://escape.tech/",
+ },
+ {
+ name: "Questmate",
+ src: "/logos/customers/questmate.png",
+ href: "https://www.questmate.com/",
+ },
+ {
+ name: "Memberstack",
+ src: "/logos/customers/memberstack.svg",
+ href: "https://www.memberstack.com/",
+ },
+ {
+ name: "Peace Mass Transit",
+ src: "/logos/customers/pmt.svg",
+ href: "https://www.pmt.ng/",
+ },
+ {
+ name: "AGVOLUTION",
+ src: "/logos/customers/agvolution.svg",
+ href: "https://agvolution.com/",
+ },
+ {
+ name: "Avenue",
+ src: "/logos/customers/avenue.svg",
+ href: "https://avenue.app/",
+ },
+ {
+ name: "instatus",
+ src: "/logos/customers/instatus.png",
+ href: "https://instatus.com/",
+ },
+ {
+ name: "oxio",
+ src: "/logos/customers/oxio.svg",
+ href: "https://oxio.ca/en",
+ },
+ {
+ name: "Feather",
+ src: "/logos/customers/feather.svg",
+ href: "https://feather-insurance.com/",
+ },
+ {
+ name: "Motionbox",
+ src: "/logos/customers/motionbox.svg",
+ href: "https://motionbox.io/",
+ },
+ {
+ name: "Antstack",
+ src: "/logos/customers/antstack.svg",
+ href: "https://www.antstack.com/",
+ },
+ {
+ name: "Stone Giant Studio",
+ src: "/logos/customers/stonegiantstudio.svg",
+ href: "https://www.stonegiantstudio.com/",
+ },
+ {
+ name: "Insta Group",
+ src: "/logos/customers/insta.svg",
+ href: "https://www.insta.fi/en/",
+ },
+ {
+ name: "Digital Speed",
+ src: "/logos/customers/digitalspeed.svg",
+ href: "https://www.digitalspeed.co.uk/",
+ },
+ {
+ name: "TimeNavi",
+ src: "/logos/customers/timenavi.svg",
+ href: "https://timenavi.com/",
+ },
+ {
+ name: "CargOn",
+ src: "/logos/customers/cargon.svg",
+ href: "https://cargon.com.br/",
+ },
+ {
+ name: "Everify",
+ src: "/logos/customers/everify.svg",
+ href: "https://everify.vercel.app/",
+ },
+ {
+ name: "Expand by Monroe Institute",
+ src: "/logos/customers/expandbymonroe.svg",
+ href: "https://info.monroeinstitute.org/get-expand-app",
+ },
+ {
+ name: "WeFindFlats",
+ src: "/logos/customers/wefindflats.png",
+ href: "https://www.wefindflats.com/",
+ },
+ {
+ name: "NachoNacho",
+ src: "/logos/customers/nachonacho.svg",
+ href: "https://nachonacho.com/",
+ },
+ {
+ name: "Superblog",
+ src: "/logos/customers/superblog.png",
+ href: "https://superblog.ai/",
+ },
+ {
+ name: "IHI Terrasun Solutions",
+ src: "/logos/customers/ihi.svg",
+ href: "https://www.ihiterrasun.com/",
+ },
+ {
+ name: "Jelly",
+ src: "/logos/customers/jelly.png",
+ href: "https://www.getjelly.co.uk/",
+ },
+ {
+ name: "Stellate",
+ src: "/logos/customers/stellate.svg",
+ href: "https://stellate.co/",
+ },
+ {
+ name: "Prevalentware",
+ src: "/logos/customers/prevalentware.png",
+ href: "https://www.prevalentware.com/",
+ },
+ {
+ name: "Krisenchat",
+ src: "/logos/customers/krisenchat.svg",
+ href: "https://krisenchat.de/en",
+ },
+];
diff --git a/apps/site/src/lib/changelog.ts b/apps/site/src/lib/changelog.ts
index ead0e5d7c70..932d58810bf 100644
--- a/apps/site/src/lib/changelog.ts
+++ b/apps/site/src/lib/changelog.ts
@@ -1,3 +1,8 @@
+import {
+ CHANGELOG_CATEGORIES,
+ type ChangelogCategory,
+ type ChangelogEntry,
+} from "@/data/changelog";
import { getAllContent, getContentBySlug } from "@/lib/content";
// Changelog entries, ported from apps/site/content/changelog (fumadocs there,
@@ -9,8 +14,63 @@ export type ChangelogFrontmatter = {
headline?: string;
tags?: string[];
metaDescription?: string;
+ /**
+ * Product area for the /changelog feed's colour and filter. Optional: when
+ * absent it is derived from `tags` (see `deriveCategory`), so set it only
+ * where that guess is wrong for the entry.
+ */
+ category?: ChangelogCategory;
+ /** Featured treatment in the feed — reserve for GA / public-beta moments. */
+ highlight?: boolean;
};
+// Which product area a frontmatter tag speaks for. The first tag in the
+// entry's own order that maps wins, so an entry tagged "Prisma 8" ahead of
+// "Prisma Compute" files under ORM: the release notes list the headline
+// product first.
+const TAG_CATEGORY: Record = {
+ "Prisma ORM": "orm",
+ "Prisma 8": "orm",
+ "Prisma Postgres": "postgres",
+ Accelerate: "postgres",
+ Pulse: "postgres",
+ "Prisma Compute": "compute",
+ "Prisma Composer": "compute",
+ "Prisma Studio": "studio",
+ Studio: "studio",
+ "Query Insights": "studio",
+ Optimize: "studio",
+};
+
+function deriveCategory(frontmatter: ChangelogFrontmatter): ChangelogCategory {
+ if (frontmatter.category && CHANGELOG_CATEGORIES.has(frontmatter.category)) {
+ return frontmatter.category;
+ }
+ for (const tag of frontmatter.tags ?? []) {
+ const category = TAG_CATEGORY[tag];
+ if (category) return category;
+ }
+ return "platform";
+}
+
+// The bare "Prisma" tag is on nearly every entry and says nothing the page
+// doesn't already; the rest stay as pills.
+const GENERIC_TAGS = new Set(["Prisma"]);
+
+/** The feed's view of every entry, newest first — see data/changelog.ts. */
+export function getChangelogFeedEntries(): ChangelogEntry[] {
+ return getChangelogEntries().map((entry) => ({
+ slug: entry.slug,
+ date: entry.frontmatter.date,
+ title: entry.frontmatter.headline ?? entry.frontmatter.title,
+ description: entry.frontmatter.metaDescription ?? extractPreview(entry.content) ?? "",
+ category: deriveCategory(entry.frontmatter),
+ tags: (entry.frontmatter.tags ?? []).filter((tag) => !GENERIC_TAGS.has(tag)),
+ highlight: entry.frontmatter.highlight === true,
+ href: `/changelog/${entry.slug}`,
+ }));
+}
+
// Entry images still live in apps/site/public/changelog (~78MB — deliberately
// not duplicated into this app). Until the asset cutover, point them at the
// live site, which serves the same paths today.
diff --git a/apps/site/src/lib/customers.ts b/apps/site/src/lib/customers.ts
deleted file mode 100644
index 47ba393dbb6..00000000000
--- a/apps/site/src/lib/customers.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-// Customer case studies, ported from apps/site (src/data/showcase.ts stories).
-// Story URLs point at the blog app, which serves /blog in production, kept
-// relative so they resolve on any deploy of the combined site.
-
-export type CustomerStory = {
- company: string;
- title: string;
- excerpt: string;
- href: string;
- image: string;
-};
-
-export const CUSTOMER_STORIES: CustomerStory[] = [
- {
- company: "Bucket",
- title: "How Bucket uses Prisma ORM to make shipping feature releases faster",
- excerpt:
- "Bucket, a fast-growing feature management platform, uses Prisma ORM to simplify complex relational queries and accelerate feature releases, a lean team delivering high-quality features faster while managing evolving database needs.",
- href: "/blog/how-bucket-uses-prisma-orm",
- image: "/customers/stories/bucket.png",
- },
- {
- company: "Amplication",
- title: "How Prisma helps Amplication revolutionize backend development",
- excerpt:
- "Amplication is an open-source development tool that helps you build quality Node.js applications without spending time on repetitive coding tasks.",
- href: "/blog/amplication-customer-story-nmlkBNlLlxnN",
- image: "/customers/stories/amplication.png",
- },
- {
- company: "Formbricks",
- title: "Formbricks and Prisma Accelerate: solving scalability together",
- excerpt:
- "Formbricks, an open-source survey platform, tackled scalability challenges with Prisma Accelerate, managing growing user demand while maintaining high performance.",
- href: "/blog/formbricks-and-prisma-accelerate-solving-scalability-together",
- image: "/customers/stories/formbricks.svg",
- },
- {
- company: "Solin",
- title: "How Solin uses Accelerate to serve 2.5M database queries per day",
- excerpt:
- "Prisma Accelerate contributes to Solin's success by enhancing performance and reliability with its scalable connection pool and global database cache.",
- href: "/blog/how-solin-uses-prisma-accelerate-to-serve-2-5m-database-queries-per",
- image: "/customers/stories/solin.svg",
- },
- {
- company: "Elsevier",
- title: "How Elsevier piloted an innovative publication process with Prisma",
- excerpt:
- "Elsevier, a global leader in scientific publishing, is modernizing the publication process efficiently and flexibly with Prisma's help.",
- href: "/blog/elsevier-customer-story-SsAASKagMHtN",
- image: "/customers/stories/elsevierstory.svg",
- },
- {
- company: "Tryg",
- title: "How Tryg has leveraged Prisma to democratize data",
- excerpt:
- 'Tryg\'s "360" Data Broker platform accelerated development cycles by removing manual environment configuration. Prisma was the critical technology that let them democratize billions of records across data sources.',
- href: "/blog/tryg-customer-story-pdmdrRhTupvd",
- image: "/customers/stories/tryg.png",
- },
- {
- company: "Panther",
- title: "How Panther champions talent over geography with Prisma",
- excerpt:
- "Panther leverages Prisma and a cutting-edge tech stack to power a domain-driven architecture, automating global payroll and compliance for remote teams in one click.",
- href: "/blog/panther-customer-story-pdmdrrhtupsl",
- image: "/customers/stories/panther.png",
- },
- {
- company: "Rapha",
- title: "How Prisma helps Rapha manage their mobile application data",
- excerpt:
- "Rapha redefines comfort, performance, and style for cyclists worldwide. Prisma helps Rapha build consistent data APIs across teams and platforms.",
- href: "/blog/helping-rapha-access-data-across-platforms-n3jfhtyu6rgn",
- image: "/customers/stories/rapha.png",
- },
- {
- company: "Grover",
- title: "How Grover moves faster with Prisma",
- excerpt:
- "Grover offers monthly tech product subscriptions across many teams. Several found huge productivity gains by adopting Prisma.",
- href: "/blog/grover-customer-success-story-nxkWGcGNuvFd",
- image: "/customers/stories/grover.png",
- },
- {
- company: "Invisible",
- title: "How migrating from Sequelize to Prisma allowed Invisible to scale",
- excerpt:
- "Invisible, a B2B productivity startup, future-proofed its tech stack with Prisma, which played a crucial role in supporting the company's scale.",
- href: "/blog/how-migrating-from-Sequelize-to-Prisma-allowed-Invisible-to-scale-i4pz2mwu6q",
- image: "/customers/stories/invisible.png",
- },
- {
- company: "Pearly",
- title: "How Prisma allowed Pearly to scale quickly with an ultra-lean team",
- excerpt:
- "Pearly provides a platform for dentists to create reliable revenue streams and affordable care plans, scaling quickly with an ultra-lean team.",
- href: "/blog/pearly-plan-customer-success-pdmdrRhTupve",
- image: "/customers/stories/pearly.png",
- },
- {
- company: "Poppy",
- title: "How Poppy uses Prisma Client to ship confidently",
- excerpt:
- "Poppy offers shared rides of all kinds through its mobile app. Prisma plays a vital role in shipping quickly and confidently, a big reason they've hit 1.5 million total rides.",
- href: "/blog/poppy-customer-success-story-swnWQcGRRvpd",
- image: "/customers/stories/poppy.png",
- },
- {
- company: "iopool",
- title: "How iopool refactored their app in less than 6 months with Prisma",
- excerpt:
- "iopool's architecture was slowing them down, so they switched to Lambda functions and PostgreSQL powered by Prisma, moving fast with confidence and a greatly simplified process.",
- href: "/blog/iopool-customer-success-story-uLsCWvaqzXoa",
- image: "/customers/stories/iopool.png",
- },
-];
diff --git a/apps/site/src/lib/markdown/markdown-parity.test.ts b/apps/site/src/lib/markdown/markdown-parity.test.ts
index 3c8c0a2caab..f305cb00329 100644
--- a/apps/site/src/lib/markdown/markdown-parity.test.ts
+++ b/apps/site/src/lib/markdown/markdown-parity.test.ts
@@ -65,7 +65,16 @@ const PAGE_SOURCES: Record = {
"src/components/sections/faq.tsx",
],
"/studio": ["src/app/studio/page.tsx"],
- "/stack": ["src/app/stack/page.tsx", "src/components/sections/stack-bento.tsx"],
+ "/stack": [
+ "src/app/stack/page.tsx",
+ "src/components/sections/platform-hero.tsx",
+ "src/components/sections/platform-compare.tsx",
+ "src/components/sections/platform-flow.tsx",
+ "src/components/sections/platform-products.tsx",
+ "src/components/sections/platform-open.tsx",
+ "src/components/sections/agent-loop.tsx",
+ "src/components/sections/cta-burst.tsx",
+ ],
"/enterprise": ["src/app/enterprise/page.tsx"],
"/mcp": [
"src/app/mcp/page.tsx",
@@ -87,13 +96,16 @@ const PAGE_SOURCES: Record = {
* an expression in the JSX and the content-object test below is what covers it.
*/
const MIN_LITERAL_HEADINGS: Record = {
- "/": 6,
+ // Comparison and AgentLoop take their heading as a prop (with the homepage
+ // copy as the default) since /use-cases and /stack reuse them, so those two
+ // are expressions here and covered by the hard-coded home.ts rendition.
+ "/": 4,
"/orm": 1,
"/postgres": 1,
"/compute": 1,
"/pricing": 5,
"/studio": 3,
- "/stack": 2,
+ "/stack": 5,
"/enterprise": 3,
"/mcp": 4,
};
@@ -226,7 +238,9 @@ test("the product pages inherit their copy from the page's own content object",
const document = renderMarkdownDocument(markdownPages[path], baseUrl);
assert.ok(document.includes(content.hero.headline), `${path}: hero headline missing`);
- assert.ok(document.includes(content.hero.subheadline), `${path}: subheadline missing`);
+ for (const paragraph of [content.hero.subheadline].flat()) {
+ assert.ok(document.includes(paragraph), `${path}: subheadline missing`);
+ }
assert.ok(document.includes(content.problem.headline), `${path}: problem headline missing`);
assert.ok(document.includes(content.features.headline), `${path}: features headline missing`);
assert.ok(document.includes(content.cta.headline), `${path}: cta headline missing`);
diff --git a/apps/site/src/lib/markdown/product.ts b/apps/site/src/lib/markdown/product.ts
index 384d644bdc6..498aefafc37 100644
--- a/apps/site/src/lib/markdown/product.ts
+++ b/apps/site/src/lib/markdown/product.ts
@@ -60,9 +60,9 @@ export function productH1(content: ProductPageContent): string {
return content.hero.headline;
}
-/** The paragraph directly under the h1. */
+/** The paragraph(s) directly under the h1. Use-case pages carry two, stacked. */
export function productSubheadline(content: ProductPageContent): string {
- return content.hero.subheadline;
+ return [content.hero.subheadline].flat().join("\n\n");
}
export function renderProductMarkdown({
diff --git a/apps/site/src/lib/markdown/stack.ts b/apps/site/src/lib/markdown/stack.ts
index 7fa840c0d0f..2cd3b3c7abf 100644
--- a/apps/site/src/lib/markdown/stack.ts
+++ b/apps/site/src/lib/markdown/stack.ts
@@ -1,120 +1,177 @@
import { bulletList, ctaList, definitionList, heading, joinBlocks, paragraphs } from "./blocks";
+import { renderTestimonialsMarkdown } from "./testimonials";
/**
* Markdown rendition of /stack.
*
- * Source of truth is src/app/stack/page.tsx (hero) plus the two sections it
- * renders: components/sections/stack-bento.tsx and components/sections/
- * cta-burst.tsx. /stack renders with no props, so the closing
- * section below is CtaBurst's DEFAULT headline, body, checks and CTAs.
+ * Source of truth is src/app/stack/page.tsx and the sections it renders, in
+ * order: components/sections/platform-hero.tsx, platform-compare.tsx (with the
+ * platform-stack-map.tsx diagram), platform-flow.tsx, platform-products.tsx,
+ * agent-loop.tsx (with the page's own heading), platform-open.tsx,
+ * testimonials-reveal.tsx and cta-burst.tsx (rendered bare, so the closing
+ * section is CtaBurst's DEFAULT headline, body, checks and CTAs).
+ *
+ * Left out, per the "skip pure decoration" rule: the hero's prism monument,
+ * the animated wire in PlatformFlow, the product illustrations, AgentLoop's
+ * `aria-hidden` LoopDiagram and the CtaBurst cloud
{/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+ );
+}
+
+// Opening quote glyph. Its slice-glitch classes (animate-quote-slice-*) live in
+// globals.css — added for the original pricing-hero testimonial, kept when that
+// hero was reworked, reused here.
+function QuoteGlyph({ className, style }: { className?: string; style?: React.CSSProperties }) {
+ return (
+
+ );
+}
+
+// The testimonial quote-mark with a continuous slice glitch (React Bits
+// GlitchText idiom): the ink mark, static chromatic offsets under it, and three
+// card-colored layers clipped to a jumping band so slices read as displaced
+// through the prism trio. Sits on an OPAQUE card surface — the layers mask with
+// bg-card between flickers.
+function GlitchQuote({ className }: { className?: string }) {
+ return (
+
+ 
+
+ Customer
+
+
+
+ {/* the customer, given the room */}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
-
-
- 
+ );
+
+ const tile =
+ "spectrum-border flex h-[4.5rem] w-full items-center justify-center rounded-2xl border border-neutral-200 bg-white/80 px-5 backdrop-blur-sm";
+
+ // Insta Group is the one mark prisma.io carries without a link.
+ if (!logo.href) {
+ return {mark};
+ }
+
+ return (
+
+ {mark}
+
+ );
+}
diff --git a/apps/site/src/components/sections/logo-cloud.tsx b/apps/site/src/components/sections/logo-cloud.tsx
index 28cb8712032..55b08fc1fd3 100644
--- a/apps/site/src/components/sections/logo-cloud.tsx
+++ b/apps/site/src/components/sections/logo-cloud.tsx
@@ -1,4 +1,5 @@
import { Reveal } from "@/components/motion/reveal";
+import { cn } from "@/lib/utils";
type CompanyLogo = {
name: string;
@@ -40,7 +41,7 @@ const companies: CompanyLogo[] = [
/* The row is rendered twice per track (and the track twice) so the strip is
wider than any viewport and the -50% marquee loop is seamless. */
-function Track({ hidden = false }: { hidden?: boolean }) {
+function CompanyTrack({ hidden = false }: { hidden?: boolean }) {
return (
+ ) : (
+
+ {logo.name}
+
+ );
+
+ if (!logo.href) {
+ return {mark};
+ }
+
+ return (
+
+ {mark}
+
+ );
+}
+
+function TileTrack({
+ logos,
+ wide,
+ hidden = false,
+}: {
+ logos: Logo[];
+ wide?: boolean;
+ hidden?: boolean;
+}) {
+ return (
+
+ {logos.map((logo) => (
+ 
+