From dce203237aff85dad46e4b00eeda041e3540c907 Mon Sep 17 00:00:00 2001
From: Mike Hartington <mikehartington@gmail.com>
Date: Thu, 2 Apr 2026 14:36:28 -0400
Subject: [PATCH 1/2] fix(site): consistent layout across all pages

---
 apps/site/src/app/(index)/page.tsx             | 14 +++++++++-----
 .../site/src/app/(prisma-with)/nextjs/page.tsx |  2 +-
 apps/site/src/app/(prisma-with)/react/page.tsx |  4 ++--
 apps/site/src/app/about/page.tsx               |  8 ++++----
 apps/site/src/app/careers/page.tsx             |  8 ++++----
 apps/site/src/app/changelog/[...slug]/page.tsx |  2 +-
 apps/site/src/app/changelog/page.tsx           |  2 +-
 apps/site/src/app/client/page.tsx              |  4 ++--
 apps/site/src/app/community/page.tsx           |  4 ++--
 apps/site/src/app/ecosystem/page.tsx           |  4 ++--
 apps/site/src/app/enterprise/page.tsx          |  4 ++--
 .../src/app/event-code-of-conduct/page.tsx     |  2 +-
 apps/site/src/app/events/page.tsx              |  2 +-
 apps/site/src/app/migrate/page.tsx             |  4 ++--
 apps/site/src/app/newsletter/page.tsx          |  2 +-
 apps/site/src/app/orm/page.tsx                 | 18 ++++++++++++------
 apps/site/src/app/oss-friends/page.tsx         |  2 +-
 apps/site/src/app/partners/page.tsx            |  2 +-
 apps/site/src/app/partners/tos/page.tsx        |  2 +-
 apps/site/src/app/postgres/page.tsx            |  2 +-
 .../src/app/pricing/pricing-hero-plans.tsx     |  6 +++---
 apps/site/src/app/privacy/page.tsx             |  2 +-
 apps/site/src/app/showcase/page.tsx            |  6 +++---
 apps/site/src/app/sla/page.tsx                 |  2 +-
 apps/site/src/app/stack/page.tsx               |  2 +-
 apps/site/src/app/startups/page.tsx            |  2 +-
 apps/site/src/app/studio/page.tsx              |  2 +-
 apps/site/src/app/support-policy/page.tsx      |  2 +-
 apps/site/src/app/support/page.tsx             |  4 ++--
 apps/site/src/app/terms/page.tsx               |  2 +-
 apps/site/src/app/typedsql/page.tsx            |  4 ++--
 31 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/apps/site/src/app/(index)/page.tsx b/apps/site/src/app/(index)/page.tsx
index c02c3b45ac..e030b61f14 100644
--- a/apps/site/src/app/(index)/page.tsx
+++ b/apps/site/src/app/(index)/page.tsx
@@ -100,11 +100,15 @@ export default function SiteHome() {
             fieldStrength={15.3}
           />
         </div>
-        <div className="content relative z-2 my-12 flex flex-col gap-8">
-          <h1 className="text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral">
-            Postgres, <br />
-            perfectly managed.
-          </h1>
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="content relative z-2 my-12 py-12 flex flex-col gap-8">
+          <div className="flex flex-col gap-4 items-center text-center">
+            
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
+              Postgres, <br />
+              perfectly managed.
+            </h1>
+          </div>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto">
             Real Postgres with the developer experience and infrastructure to
             ship faster.
diff --git a/apps/site/src/app/(prisma-with)/nextjs/page.tsx b/apps/site/src/app/(prisma-with)/nextjs/page.tsx
index efc5edc588..d7d0fbb3b1 100644
--- a/apps/site/src/app/(prisma-with)/nextjs/page.tsx
+++ b/apps/site/src/app/(prisma-with)/nextjs/page.tsx
@@ -19,7 +19,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
   })
   return (
     <div>
-      <h1>{post?.title || 'Post not found'}</h1>
+      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">{post?.title || 'Post not found'}</h1>
       <p>{post?.content || 'No content available'}</p>
     </div>
   )
diff --git a/apps/site/src/app/(prisma-with)/react/page.tsx b/apps/site/src/app/(prisma-with)/react/page.tsx
index 8f91dc10cc..fc25239951 100644
--- a/apps/site/src/app/(prisma-with)/react/page.tsx
+++ b/apps/site/src/app/(prisma-with)/react/page.tsx
@@ -19,7 +19,7 @@ export default async function UserList() {
 
   return (
     <div>
-      <h1>Users</h1>
+      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1>
       <ul>
         {users.map((user) => (
           <li key={user.id}>{user.name} ({user.email})</li>
@@ -41,7 +41,7 @@ export default async function UsersPage() {
   const users = await prisma.user.findMany()
   return (
     <div>
-      <h1>Users</h1>
+      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1>
       <ul>{users.map((user) => <li key={user.id}>{user.name}</li>)}</ul>
     </div>
   )
diff --git a/apps/site/src/app/about/page.tsx b/apps/site/src/app/about/page.tsx
index 78ef7d29e1..ab3c4f7bf1 100644
--- a/apps/site/src/app/about/page.tsx
+++ b/apps/site/src/app/about/page.tsx
@@ -337,7 +337,7 @@ export default function About() {
   return (
     <main className="flex-1 w-full z-1 bg-background-default">
       <div className="hero -mt-24 relative flex items-end justify-center px-4 pb-40 pt-30">
-        <div className="absolute inset-0 z-1 bg-[linear-gradient(180deg,transparent_0%,var(--color-background-default)_150%)]" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,transparent_0%,var(--color-background-default)_150%)]" />
         <div className="w-screen absolute inset-0 z-0">
           <Image
             src="/illustrations/about/hero_bg.svg"
@@ -355,7 +355,7 @@ export default function About() {
           />
         </div>
         <div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">
-          <h1 className="text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Join Prisma
           </h1>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto mb-12">
@@ -388,7 +388,7 @@ export default function About() {
         </div>
       </div>
       <div className="py-12 px-4 relative">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(0deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(0deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="max-w-[1200px] w-full p-4 mx-auto">
           <h2 className="relative z-1 text-center m-0 mb-4 text-4xl md:text-[36px] font-black text-foreground-neutral font-sans-display stretch-display">
             Our Investors
@@ -439,7 +439,7 @@ export default function About() {
         </div>
       </div>
       <div className="py-12 px-4 relative">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="max-w-[1200px] w-full p-4 mx-auto relative z-1">
           <Card className="p-12  flex-row justify-around bg-background-default border-none flex-wrap">
             <a
diff --git a/apps/site/src/app/careers/page.tsx b/apps/site/src/app/careers/page.tsx
index d2e6707c51..8a594a39a2 100644
--- a/apps/site/src/app/careers/page.tsx
+++ b/apps/site/src/app/careers/page.tsx
@@ -201,7 +201,7 @@ export default function Careers() {
           />
         </div>
         <div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">
-          <h1 className="text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Join Prisma
           </h1>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto">
@@ -222,7 +222,7 @@ export default function Careers() {
       </div>
 
       <div className="py-12 relative px-4 ">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="z-1 relative">
           <StatsList statsList={statsList} />
         </div>
@@ -232,7 +232,7 @@ export default function Careers() {
       </div>
       <div className="py-12 px-4 relative">
         <div className="max-w-[1200px] w-full mx-auto">
-          <div className="absolute inset-0 z-0 bg-[linear-gradient(0deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+          <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(0deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
           <h2 className="relative z-1 text-center m-0 mb-4 text-4xl md:text-[36px] font-black text-foreground-neutral font-sans-display stretch-display">
             Why Prisma?
           </h2>
@@ -242,7 +242,7 @@ export default function Careers() {
         </div>
       </div>
       <div className="py-12 px-4 relative">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="max-w-[1200px] w-full mx-auto flex flex-col gap-8 relative z-1">
           <section className="py-16 px-4">
             <div className="max-w-[1200px] mx-auto flex-col flex gap-8">
diff --git a/apps/site/src/app/changelog/[...slug]/page.tsx b/apps/site/src/app/changelog/[...slug]/page.tsx
index b99d396622..3e3edf89e3 100644
--- a/apps/site/src/app/changelog/[...slug]/page.tsx
+++ b/apps/site/src/app/changelog/[...slug]/page.tsx
@@ -46,7 +46,7 @@ export default async function ReleaseNotesPage({
             >
               ← Back to Changelog
             </Link>
-            <h1 className="mt-3 mb-8 font-bold max-md:text-3xl md:text-5xl   stretch-display font-sans-display text-foreground-neutral">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
               {page.data.title}
             </h1>
             <div className="text-sm flex gap-2 items-center text-foreground-neutral mb-4">
diff --git a/apps/site/src/app/changelog/page.tsx b/apps/site/src/app/changelog/page.tsx
index 1f30cb8bae..1b80dcfa96 100644
--- a/apps/site/src/app/changelog/page.tsx
+++ b/apps/site/src/app/changelog/page.tsx
@@ -34,7 +34,7 @@ export default async function ChangelogPage() {
           <i className="fa-regular fa-sparkles" aria-hidden />
           Changelog
         </p>
-        <h1 className="stretch-display text-4xl font-bold mb-2 landing-h1 text-center mt-9 font-sans-display">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           The Latest News from Prisma
         </h1>
         <p className="m-0 max-w-[640px] mx-auto text-center text-base text-foreground-neutral-weak md:text-lg">
diff --git a/apps/site/src/app/client/page.tsx b/apps/site/src/app/client/page.tsx
index 1003a2b26b..c401e25828 100644
--- a/apps/site/src/app/client/page.tsx
+++ b/apps/site/src/app/client/page.tsx
@@ -177,12 +177,12 @@ export default function Client() {
   return (
     <main className="flex-1 w-screen bg-background-default">
       <div className="hero relative w-full -mt-33 pt-70 pb-8 flex flex-col gap-8 px-4">
-        <div className="bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] absolute inset-0 z-0 overflow-hidden opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 overflow-hidden bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="flex flex-col gap-4 relative z-1">
           <h5 className="stretch-display font-sans-display mx-auto w-fit my-0 text-foreground-orm-strong uppercase">
             Prisma Client
           </h5>
-          <h1 className="stretch-display text-6xl font-bold text-center font-sans-display z-2 relative max-w-223 mx-auto">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Intuitive database client for TypeScript and Node.js
             <br />
             Database Migrations
diff --git a/apps/site/src/app/community/page.tsx b/apps/site/src/app/community/page.tsx
index 15af311c86..f26eaa40b9 100644
--- a/apps/site/src/app/community/page.tsx
+++ b/apps/site/src/app/community/page.tsx
@@ -128,13 +128,13 @@ export default function CommunityPage() {
     <main className="flex-1 w-full -mt-24 bg-background-default text-foreground-neutral">
       {/* Hero */}
       <section className="relative overflow-hidden px-4 pt-36 pb-12 md:pb-16">
-        <div className="absolute inset-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="relative z-1 mx-auto flex w-full max-w-[720px] flex-col items-center gap-6 text-center">
           <p className="m-0 flex items-center justify-center gap-2 text-base font-semibold uppercase tracking-[1.6px] text-foreground-orm-strong font-sans">
             <i className="fa-regular fa-users" aria-hidden />
             Community
           </p>
-          <h1 className="m-0 text-foreground-neutral text-4xl md:text-5xl font-sans-display [font-variation-settings:'wght'_900]">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Join the Prisma Community
           </h1>
           <p className="m-0 text-lg text-foreground-neutral-weak max-w-[560px]">
diff --git a/apps/site/src/app/ecosystem/page.tsx b/apps/site/src/app/ecosystem/page.tsx
index 621a57266a..7fc1e81fe2 100644
--- a/apps/site/src/app/ecosystem/page.tsx
+++ b/apps/site/src/app/ecosystem/page.tsx
@@ -67,9 +67,9 @@ export default function SiteHome() {
   return (
     <main className="flex-1 w-full z-1 bg-background-default">
       <div className="hero -mt-24 flex items-end justify-center px-4 relative pt-24">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="content pt-31 relative z-2 my-12 flex flex-col gap-8">
-          <h1 className="text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-200 mx-auto">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Prisma Ecosystem
           </h1>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto">
diff --git a/apps/site/src/app/enterprise/page.tsx b/apps/site/src/app/enterprise/page.tsx
index 08c4d66917..ec034906dc 100644
--- a/apps/site/src/app/enterprise/page.tsx
+++ b/apps/site/src/app/enterprise/page.tsx
@@ -355,13 +355,13 @@ export default function EnterprisePage() {
     <main className="flex-1 w-full z-1 bg-background-default">
       {/* Hero */}
       <section className="hero -mt-24 flex items-end justify-center px-4 relative pt-24">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="content pt-31 relative z-2 my-12 flex flex-col gap-8">
           <div className="flex flex-col gap-1">
             <h5 className="text-foreground-orm-strong text-center stretch-display font-sans-display text-base uppercase">
               Enterprise & Solution Providers
             </h5>
-            <h1 className="text-[clamp(2.5rem,9vw,3.75rem)] md:text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-200 mx-auto">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
               Streamline your <br /> development workflow
             </h1>
           </div>
diff --git a/apps/site/src/app/event-code-of-conduct/page.tsx b/apps/site/src/app/event-code-of-conduct/page.tsx
index 0702a46a65..c867579415 100644
--- a/apps/site/src/app/event-code-of-conduct/page.tsx
+++ b/apps/site/src/app/event-code-of-conduct/page.tsx
@@ -19,7 +19,7 @@ export default function EventCodeOfConductPage() {
     <main className="flex-1 w-full z-1 -mt-24 pt-24 relative legal-hero-gradient">
       {/* Hero */}
       <div className="text-center pb-16 pt-40">
-        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           Event Code of Conduct
         </h1>
         <p className="max-w-[640px] mx-auto text-lg text-foreground-neutral-weak text-left mb-6">
diff --git a/apps/site/src/app/events/page.tsx b/apps/site/src/app/events/page.tsx
index 105c24edda..1b35501516 100644
--- a/apps/site/src/app/events/page.tsx
+++ b/apps/site/src/app/events/page.tsx
@@ -55,7 +55,7 @@ export default function EventsPage() {
             <i className="fa-regular fa-calendar" aria-hidden />
             Events
           </p>
-          <h1 className="text-5xl font-black! font-sans-display text-foreground-neutral mt-0 mb-0 stretch-display">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Prisma Events
           </h1>
           <p className="text-lg text-foreground-neutral-weak max-w-[600px]">
diff --git a/apps/site/src/app/migrate/page.tsx b/apps/site/src/app/migrate/page.tsx
index 6d3600317f..94cef4441a 100644
--- a/apps/site/src/app/migrate/page.tsx
+++ b/apps/site/src/app/migrate/page.tsx
@@ -80,12 +80,12 @@ export default function Migrate() {
   return (
     <main className="flex-1 w-screen bg-background-default">
       <div className="hero relative w-full -mt-33 pt-70 pb-8 flex flex-col gap-8">
-        <div className="bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] absolute inset-0 z-0 overflow-hidden opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 overflow-hidden bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="flex flex-col gap-4 relative z-1">
           <h5 className="stretch-display font-sans-display mx-auto w-fit my-0 text-foreground-orm-strong uppercase">
             Prisma Migrate
           </h5>
-          <h1 className="stretch-display text-6xl font-bold text-center font-sans-display z-2 relative">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Hassle-free
             <br />
             Database Migrations
diff --git a/apps/site/src/app/newsletter/page.tsx b/apps/site/src/app/newsletter/page.tsx
index 740aff3ebf..6f74ae17b7 100644
--- a/apps/site/src/app/newsletter/page.tsx
+++ b/apps/site/src/app/newsletter/page.tsx
@@ -100,7 +100,7 @@ export default async function NewsletterPage() {
             <i className="fa-regular fa-bell" aria-hidden />
             Stay Updated
           </p>
-          <h1 className="m-0 text-foreground-neutral text-5xl font-sans-display stretch-display">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Get our monthly newsletter
           </h1>
         </div>
diff --git a/apps/site/src/app/orm/page.tsx b/apps/site/src/app/orm/page.tsx
index 8099c625aa..3bbf601618 100644
--- a/apps/site/src/app/orm/page.tsx
+++ b/apps/site/src/app/orm/page.tsx
@@ -277,12 +277,18 @@ export default function ORM() {
   return (
     <main className="flex-1 w-full z-1 ">
       <JsonLd id="orm-software-application" data={ormStructuredData} />
-      <div className="hero pt-50 -mt-24 flex items-end justify-center px-4 relative">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
-        <div className="content relative z-2 flex flex-col gap-8 py-12">
-          <h1 className="text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
-            Next-generation Node.js and TypeScript ORM
-          </h1>
+      <div className="hero pt-40 -mt-24 flex items-end justify-center px-4 relative">
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="content relative z-2 my-12 py-12 flex flex-col gap-8">
+          <div className="flex flex-col gap-4 items-center text-center">
+            <div className="flex items-center gap-2 text-foreground-orm-weak uppercase tracking-widest text-sm font-sans-display font-black">
+              <i className="fa-solid fa-database" />
+              <span>Prisma ORM</span>
+            </div>
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
+              Next-generation Node.js and TypeScript ORM
+            </h1>
+          </div>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto">
             Prisma ORM elevates developer experience with intuitive data modeling, automated
             migrations, and type-safety.
diff --git a/apps/site/src/app/oss-friends/page.tsx b/apps/site/src/app/oss-friends/page.tsx
index 0dc98d45d6..d2a534d773 100644
--- a/apps/site/src/app/oss-friends/page.tsx
+++ b/apps/site/src/app/oss-friends/page.tsx
@@ -38,7 +38,7 @@ export default async function OSSFriendsPage() {
             <i className="fa-regular fa-heart" aria-hidden />
             Community
           </p>
-          <h1 className="m-0 text-foreground-neutral text-5xl font-sans-display [font-variation-settings:'wght'_900]">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             OSS Friends
           </h1>
           <p className="m-0 text-lg text-foreground-neutral-weak max-w-[560px]">
diff --git a/apps/site/src/app/partners/page.tsx b/apps/site/src/app/partners/page.tsx
index 9df60f818b..58ff853728 100644
--- a/apps/site/src/app/partners/page.tsx
+++ b/apps/site/src/app/partners/page.tsx
@@ -168,7 +168,7 @@ export default function Partners() {
   return (
     <main className="flex-1 w-full z-1 text-prety">
       <div className="hero pt-60 -mt-24 flex items-center justify-center px-4 relative flex-col gap-8">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20"></div>
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20"></div>
         <div className="flex flex-col gap-4 z-1 relative">
           <h5 className="font-sans-display text-foreground-orm-strong uppercase stretch-display text-center mx-auto">
             Prisma Partners
diff --git a/apps/site/src/app/partners/tos/page.tsx b/apps/site/src/app/partners/tos/page.tsx
index 3929551967..06398b666a 100644
--- a/apps/site/src/app/partners/tos/page.tsx
+++ b/apps/site/src/app/partners/tos/page.tsx
@@ -18,7 +18,7 @@ export default function PartnersTosPage() {
     <main className="flex-1 w-full z-1 -mt-24 pt-24 relative legal-hero-gradient">
       {/* Hero */}
       <div className="text-center pb-16 pt-40">
-        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           Terms of Service Prisma Partner Network
         </h1>
         <p className="text-lg text-foreground-neutral-weak">
diff --git a/apps/site/src/app/postgres/page.tsx b/apps/site/src/app/postgres/page.tsx
index 0fdd274864..e06f4b04ee 100644
--- a/apps/site/src/app/postgres/page.tsx
+++ b/apps/site/src/app/postgres/page.tsx
@@ -130,7 +130,7 @@ export default async function SiteHome() {
               <i className="fa-solid fa-chart-pyramid" />
               <span>Prisma Postgres</span>
             </div>
-            <h1 className="text-5xl md:text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 mt-0 font-sans-display text-foreground-neutral">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
               The fastest way <br />
               to real Postgres
             </h1>
diff --git a/apps/site/src/app/pricing/pricing-hero-plans.tsx b/apps/site/src/app/pricing/pricing-hero-plans.tsx
index d71ec7453d..c16335ebaa 100644
--- a/apps/site/src/app/pricing/pricing-hero-plans.tsx
+++ b/apps/site/src/app/pricing/pricing-hero-plans.tsx
@@ -37,9 +37,9 @@ export function PricingHeroPlans({
 
   return (
     <>
-      <section className="relative pt-28 pb-8 md:pt-28 md:pb-16 px-4 ">
-        <div className="absolute inset-0 bg-[radial-gradient(80%_60%_at_50%_0%,rgba(20,184,166,0.22),transparent_60%)] pointer-events-none" />
-        <div className="relative max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6">
+      <section className="hero -mt-24 pt-40 flex items-end justify-center px-4 relative">
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="content relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
           <Badge
             color="ppg"
             size="lg"
diff --git a/apps/site/src/app/privacy/page.tsx b/apps/site/src/app/privacy/page.tsx
index f359671c11..80270a8e1b 100644
--- a/apps/site/src/app/privacy/page.tsx
+++ b/apps/site/src/app/privacy/page.tsx
@@ -15,7 +15,7 @@ export default function PrivacyPage() {
     <main className="flex-1 w-full z-1 -mt-24 pt-24 relative legal-hero-gradient">
       {/* Hero */}
       <div className="text-center pb-16 pt-40">
-        <h1 className="text-5xl font-bold font-sans-display text-foreground-neutral mb-6">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           Privacy Policy
         </h1>
         <p className="text-lg text-foreground-neutral-weak">
diff --git a/apps/site/src/app/showcase/page.tsx b/apps/site/src/app/showcase/page.tsx
index 6c0f438dbe..a6a28a9545 100644
--- a/apps/site/src/app/showcase/page.tsx
+++ b/apps/site/src/app/showcase/page.tsx
@@ -44,9 +44,9 @@ export default function EnterprisePage() {
     <main className="flex-1 w-full z-1 bg-background-default">
       {/* Hero */}
       <section className="hero -mt-24 flex items-end justify-center px-4 relative pt-24">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="content pt-40 relative z-2 my-12 flex flex-col gap-8">
-          <h1 className="text-5xl md:text-6xl mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-200 mx-auto stretch-display">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Made with Prisma
           </h1>
           <p className="text-center text-foreground-neutral max-w-2xl mx-auto text-xl">
@@ -97,7 +97,7 @@ export default function EnterprisePage() {
         </div>
       </section>
       <section className="my-12 px-4 relative">
-        <div className="absolute inset-0 z-0 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-orm)_0%,var(--color-background-default)_100%)] opacity-20" />
         <div className="content pt-40 relative z-2 my-12 flex flex-col gap-8 max-w-[1200px] mx-auto">
           <h3 className="text-center text-foreground-neutral stretch-display text-3xl stretch-display font-sans-display my-0">
             Built with Prisma
diff --git a/apps/site/src/app/sla/page.tsx b/apps/site/src/app/sla/page.tsx
index 351a32e5c7..6fe289d184 100644
--- a/apps/site/src/app/sla/page.tsx
+++ b/apps/site/src/app/sla/page.tsx
@@ -15,7 +15,7 @@ export default function SlaPage() {
     <main className="flex-1 w-full z-1 -mt-24 pt-24 relative legal-hero-gradient">
       {/* Hero */}
       <div className="text-center pb-16 pt-40">
-        <h1 className="text-5xl md:text-6xl font-bold font-sans-display text-foreground-neutral mb-6">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           Prisma Service Level Agreement
         </h1>
         <p className="text-lg text-foreground-neutral-weak">
diff --git a/apps/site/src/app/stack/page.tsx b/apps/site/src/app/stack/page.tsx
index 2f78cc4327..f65a801fd6 100644
--- a/apps/site/src/app/stack/page.tsx
+++ b/apps/site/src/app/stack/page.tsx
@@ -32,7 +32,7 @@ export default function StackPage() {
               <i className="fa-regular fa-layer-group" />
               <span>Prisma Stack</span>
             </div>
-            <h1 className="text-5xl md:text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 mt-0 font-sans-display text-foreground-neutral">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
               Build with
               <br /> your favorite tools
             </h1>
diff --git a/apps/site/src/app/startups/page.tsx b/apps/site/src/app/startups/page.tsx
index f1ed11b736..668df6da2e 100644
--- a/apps/site/src/app/startups/page.tsx
+++ b/apps/site/src/app/startups/page.tsx
@@ -102,7 +102,7 @@ export default function StartupsPage() {
       {/* Hero */}
       <div className="text-center px-4 pb-20 pt-44">
         <div className="max-w-[748px] mx-auto">
-          <h1 className="text-6xl md:text-7xl font-bold font-sans-display text-foreground-neutral mb-8">
+          <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
             Fuel your startup&apos;s success with Prisma
           </h1>
           <p className="text-xl text-foreground-neutral-weak mb-10 max-w-[700px] mx-auto">
diff --git a/apps/site/src/app/studio/page.tsx b/apps/site/src/app/studio/page.tsx
index 750ffdb287..71daaeb6f1 100644
--- a/apps/site/src/app/studio/page.tsx
+++ b/apps/site/src/app/studio/page.tsx
@@ -140,7 +140,7 @@ export default function StudioPage() {
                 <i className="fa-regular fa-table text-sm" aria-hidden="true" />
                 Prisma Studio
               </p>
-              <h1 className="m-0 text-5xl leading-none text-foreground-neutral font-sans-display md:text-6xl [font-variation-settings:'wght'_900] stretch-display">
+              <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
                 Explore and
                 <br />
                 understand your data
diff --git a/apps/site/src/app/support-policy/page.tsx b/apps/site/src/app/support-policy/page.tsx
index 428efef12f..a8be75959b 100644
--- a/apps/site/src/app/support-policy/page.tsx
+++ b/apps/site/src/app/support-policy/page.tsx
@@ -30,7 +30,7 @@ export default function SupportPolicyPage() {
               <i className="fa-regular fa-headset" />
               <span>Support</span>
             </div>
-            <h1 className="text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 mt-0 font-sans-display text-foreground-neutral">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
               Prisma Support Policy
             </h1>
           </div>
diff --git a/apps/site/src/app/support/page.tsx b/apps/site/src/app/support/page.tsx
index f03a961c57..41578a309b 100644
--- a/apps/site/src/app/support/page.tsx
+++ b/apps/site/src/app/support/page.tsx
@@ -37,8 +37,8 @@ export default function Support() {
   return (
     <main className="flex-1 w-screen bg-background-default">
       <div className="hero relative w-full -mt-33 pt-65 block pb-12 flex flex-col gap-8">
-        <div className="bg-[linear-gradient(180deg,var(--color-foreground-orm-strong)_0%,var(--color-background-default)_100%)] absolute inset-0 z-1 overflow-hidden opacity-20" />
-        <h1 className="stretch-display text-6xl font-bold mb-4 text-center mt-9 font-sans-display z-2 relative">
+        <div className="absolute inset-0 pointer-events-none z-1 overflow-hidden bg-[linear-gradient(180deg,var(--color-foreground-orm-strong)_0%,var(--color-background-default)_100%)] opacity-20" />
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           {data.title}
         </h1>
         <LargeSearchToggle className="h-full z-2 max-w-141 mx-auto w-full" />
diff --git a/apps/site/src/app/terms/page.tsx b/apps/site/src/app/terms/page.tsx
index a0777cbb8d..f731678b94 100644
--- a/apps/site/src/app/terms/page.tsx
+++ b/apps/site/src/app/terms/page.tsx
@@ -15,7 +15,7 @@ export default function TermsPage() {
     <main className="flex-1 w-full z-1 -mt-24 relative legal-hero-gradient">
       {/* Hero */}
       <div className="text-center pb-16 pt-40 my-24">
-        <h1 className="text-5xl md:text-6xl font-bold font-sans-display text-foreground-neutral mb-6">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           Terms of Service
         </h1>
         <p className="text-lg text-foreground-neutral-weak">
diff --git a/apps/site/src/app/typedsql/page.tsx b/apps/site/src/app/typedsql/page.tsx
index 2f05c1f3bc..67290786ab 100644
--- a/apps/site/src/app/typedsql/page.tsx
+++ b/apps/site/src/app/typedsql/page.tsx
@@ -111,13 +111,13 @@ export default function TypedSQLPage() {
   return (
     <main className="flex-1 w-full z-1 bg-background-default">
       <div className="hero -mt-24 flex items-center md:items-end justify-center px-4 relative overflow-hidden pt-50 pb-16 md:pb-0">
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,var(--color-background-orm-strong)_0%,var(--color-background-default)_70%)]" />
+        <div className="absolute inset-0 pointer-events-none z-1 bg-[radial-gradient(ellipse_at_center,var(--color-background-orm-strong)_0%,var(--color-background-default)_70%)]" />
         <div className="content relative z-2 md:my-12 flex flex-col gap-8">
           <div className="flex flex-col items-center gap-4">
             <span className="text-foreground-orm font-sans-display text-sm font-bold tracking-widest uppercase">
               TypedSQL
             </span>
-            <h1 className="text-4xl md:text-6xl [font-variation-settings:'wght'_900,'wdth'_125] mb-0 text-center mt-0 font-sans-display text-foreground-neutral">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
               Fully type-safe <br />
               raw SQL
             </h1>

From 189f245037d9df41046fe6bdc3fb208b2199eba1 Mon Sep 17 00:00:00 2001
From: Mike Hartington <mikehartington@gmail.com>
Date: Thu, 2 Apr 2026 14:55:08 -0400
Subject: [PATCH 2/2] fix(site): address CodeRabbit review feedback

Keep the support hero title above its gradient overlay and make the React code
examples portable while removing unused pricing hero class hooks.

Made-with: Cursor
---
 apps/site/src/app/(prisma-with)/react/page.tsx   | 4 ++--
 apps/site/src/app/pricing/pricing-hero-plans.tsx | 4 ++--
 apps/site/src/app/support/page.tsx               | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/site/src/app/(prisma-with)/react/page.tsx b/apps/site/src/app/(prisma-with)/react/page.tsx
index fc25239951..8f91dc10cc 100644
--- a/apps/site/src/app/(prisma-with)/react/page.tsx
+++ b/apps/site/src/app/(prisma-with)/react/page.tsx
@@ -19,7 +19,7 @@ export default async function UserList() {
 
   return (
     <div>
-      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1>
+      <h1>Users</h1>
       <ul>
         {users.map((user) => (
           <li key={user.id}>{user.name} ({user.email})</li>
@@ -41,7 +41,7 @@ export default async function UsersPage() {
   const users = await prisma.user.findMany()
   return (
     <div>
-      <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">Users</h1>
+      <h1>Users</h1>
       <ul>{users.map((user) => <li key={user.id}>{user.name}</li>)}</ul>
     </div>
   )
diff --git a/apps/site/src/app/pricing/pricing-hero-plans.tsx b/apps/site/src/app/pricing/pricing-hero-plans.tsx
index c16335ebaa..0815ff3583 100644
--- a/apps/site/src/app/pricing/pricing-hero-plans.tsx
+++ b/apps/site/src/app/pricing/pricing-hero-plans.tsx
@@ -37,9 +37,9 @@ export function PricingHeroPlans({
 
   return (
     <>
-      <section className="hero -mt-24 pt-40 flex items-end justify-center px-4 relative">
+      <section className="-mt-24 pt-40 flex items-end justify-center px-4 relative">
         <div className="absolute inset-0 pointer-events-none z-1 bg-[linear-gradient(180deg,var(--color-foreground-ppg)_0%,var(--color-background-default)_100%)] opacity-20" />
-        <div className="content relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
+        <div className="relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
           <Badge
             color="ppg"
             size="lg"
diff --git a/apps/site/src/app/support/page.tsx b/apps/site/src/app/support/page.tsx
index 41578a309b..9d6bfefb3f 100644
--- a/apps/site/src/app/support/page.tsx
+++ b/apps/site/src/app/support/page.tsx
@@ -38,7 +38,7 @@ export default function Support() {
     <main className="flex-1 w-screen bg-background-default">
       <div className="hero relative w-full -mt-33 pt-65 block pb-12 flex flex-col gap-8">
         <div className="absolute inset-0 pointer-events-none z-1 overflow-hidden bg-[linear-gradient(180deg,var(--color-foreground-orm-strong)_0%,var(--color-background-default)_100%)] opacity-20" />
-        <h1 className="text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
+        <h1 className="relative z-2 text-4xl sm:text-5xl md:text-6xl stretch-display mb-0 text-center mt-0 font-sans-display text-foreground-neutral max-w-224 mx-auto">
           {data.title}
         </h1>
         <LargeSearchToggle className="h-full z-2 max-w-141 mx-auto w-full" />