Skip to content

fix(site): consistent layout across all pages #7770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mhartington merged 2 commits into from
Apr 2, 2026
Merged

fix(site): consistent layout across all pages #7770

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dce2032
fix(site): consistent layout across all pages
mhartington Apr 2, 2026
189f245
fix(site): address CodeRabbit review feedback
mhartington Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions apps/site/src/app/(index)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/(prisma-with)/nextjs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
8 changes: 4 additions & 4 deletions apps/site/src/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions apps/site/src/app/careers/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/changelog/[...slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/changelog/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/app/client/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/app/community/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/app/ecosystem/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/app/enterprise/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/event-code-of-conduct/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/events/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
4 changes: 2 additions & 2 deletions apps/site/src/app/migrate/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/newsletter/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 12 additions & 6 deletions apps/site/src/app/orm/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/oss-friends/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]">
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/partners/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/partners/tos/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/site/src/app/postgres/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading