fix(site): consistent layout across all pages

Author: mhartington

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.

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>
   )

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>
   )

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

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">

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">

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">

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

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]">

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">