chore(site): layout updates

apps/site/src/app/(index)/page.tsx

@@ -87,7 +87,7 @@ export const metadata: Metadata = {
 export default function SiteHome() {
   return (
     <main className="flex-1 w-full z-1 bg-background-default">
-      <section className="hero h-full relative -mt-24 flex items-end justify-center px-4 pt-48">
+      <section className="hero h-full relative -mt-24 flex items-end justify-center px-4 pt-40">
         <div className="w-screen h-full absolute inset-0">
           <Antigravity
             count={300}
@@ -108,7 +108,7 @@ export default function SiteHome() {
           />
         </div>
         <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="content relative z-2 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">

apps/site/src/app/orm/page.tsx

@@ -11,6 +11,7 @@ import { cn } from "@/lib/cn";
 import { Card as FeatureCard } from "@/components/homepage/bento";
 import { YouTubePlayer } from "@prisma-docs/ui/components/youtube-player";
 import Image from "next/image";
+import Link from "next/link";
 
 const statsSection = [
   {
@@ -44,13 +45,16 @@ const prismaPostgresQuickstartUrl =
 const CardFooter = () => (
   <>
     <Separator className="my-6" />
-    <div className="flex flex-col md:flex-row justify-between w-full gap-8">
+    <div className="flex flex-col items-center md:items-stretch md:flex-row justify-between w-full gap-8">
       {badge_list.map((badge: any) => (
-        <div className="flex flex-col md:flex-row gap-2 md:gap-6 md:items-center" key={badge.title}>
+        <div
+          className="flex flex-col items-center md:items-center md:flex-row gap-2 md:gap-6"
+          key={badge.title}
+        >
           <h6 className="font-semibold text-2xs text-foreground-neutral uppercase">
             {badge.title}
           </h6>
-          <div className="flex gap-3">
+          <div className="flex justify-center md:justify-start gap-3">
             {badge.list &&
               badge.list.map((item: any) => (
                 <Button
@@ -115,10 +119,10 @@ const twoCol = [
           Prisma's compatibility with popular tools ensures no stack lock-in, lower integration
           costs, and smooth transitions.
         </p>
-        <a href="/stack" className="link-btn orm">
+        <Link href="/stack" className="link-btn orm w-fit mx-auto lg:mx-0">
           <span>Learn more</span>
           <i className="fa-regular fa-arrow-right ml-2" />
-        </a>
+        </Link>
       </div>
     ),
     imageUrl: null,
@@ -148,7 +152,7 @@ const twoCol_2 = [
           A meaningful comparison of database query latencies across database providers and ORM
           libraries in the Node.js & TypeScript ecosystem.
         </p>
-        <Button variant="orm" size="xl" href="https://benchmarks.prisma.io" className="w-fit">
+        <Button variant="orm" size="xl" href="https://benchmarks.prisma.io" className="w-fit mx-auto lg:w-full">
           <span>Explore Benchmarks</span>
           <i className="fa-regular fa-arrow-right ml-2!" />
         </Button>
@@ -180,10 +184,10 @@ const twoCol_2 = [
           intuitive, both for SQL veterans and developers brand new to databases. The
           auto-completion helps you figure out your query without the need for documentation.
         </p>
-        <a href="/client" className="link-btn orm">
+        <Link href="/client" className="link-btn orm w-fit mx-auto lg:mx-0">
           <span>Learn more</span>
           <i className="fa-regular fa-arrow-right ml-2" />
-        </a>
+        </Link>
       </div>
     ),
     imageUrl: "/illustrations/orm/orm_2",
@@ -280,7 +284,7 @@ export default function ORM() {
       <JsonLd id="orm-software-application" data={ormStructuredData} />
       <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="content relative z-2 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" />
@@ -318,7 +322,7 @@ export default function ORM() {
           </div>
         </div>
       </div>
-      <div className="my-12 flex gap-30 w-fit mx-auto px-4 md:px-40">
+      <div className="my-12 flex flex-col sm:flex-row gap-30 w-fit mx-auto px-4 sm:px-40">
         {statsSection?.map((stat: any, index: number) => (
           <InfoStats
             key={index}
@@ -339,15 +343,20 @@ export default function ORM() {
           <CardSection cardSection={twoCol_2} />
           <div className="grid md:grid-cols-2 gap-9">
             {twoCol_3.map((stat, index) => (
-              <div key={stat.title} className="flex flex-col gap-4">
+              <div key={stat.title} className="flex flex-col items-center md:items-start gap-4">
                 <Action size="4xl" color="orm" className={cn(index === 0 && "p-0", "relative")}>
                   <Image src={stat.icon} alt={stat.title} fill loading="lazy" />
                 </Action>
-                <h4 className="text-2xl font-sans-display stretch-display text-foreground-neutral">
+                <h4 className="text-2xl text-center md:text-left font-sans-display stretch-display text-foreground-neutral">
                   {stat.title}
                 </h4>
-                <p className="text-foreground-neutral-weak">{stat.description}</p>
-                <Button variant="default-stronger" href={stat.btn.url} size="xl" className="w-fit">
+                <p className="text-center md:text-left text-foreground-neutral-weak">{stat.description}</p>
+                <Button
+                  variant="default-stronger"
+                  href={stat.btn.url}
+                  size="xl"
+                  className="w-fit mx-auto md:mx-0"
+                >
                   <span>
                     {stat.btn.label} {stat.btn.icon && <i className={cn("ml-2", stat.btn.icon)} />}
                   </span>

apps/site/src/app/postgres/page.tsx

@@ -124,7 +124,7 @@ export default async function SiteHome() {
     <main className="flex-1 w-full z-1 bg-background-default">
       <div 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 my-12 py-12 flex flex-col gap-8">
+        <div className="content relative z-2 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-ppg-weak uppercase tracking-widest text-sm font-sans-display font-black">
               <i className="fa-solid fa-chart-pyramid" />
@@ -254,7 +254,7 @@ export default async function SiteHome() {
           </h3>
           <div className="content flex flex-col lg:flex-row gap-3 lg:gap-12 items-center md:items-start lg:items-center">
             <p className="max-w-94 w-full text-center md:text-left text-foreground-neutral-weak text-md">
-              Usage-based pricing, with a generous free tier. 
Spend limits
+              Usage-based pricing, with a generous free tier. Spend limits
               included, so you never get surprised.
             </p>
             <Button variant="ppg" size="2xl" href="/pricing">

apps/site/src/app/pricing/pricing-hero-plans.tsx

@@ -37,9 +37,9 @@ export function PricingHeroPlans({
 
   return (
     <>
-      <section className="-mt-24 pt-40 flex items-end justify-center px-4 relative">
+      <section className="hero h-full relative -mt-24 flex items-end justify-center px-4 pt-40">
         <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="relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6 py-12">
+        <div className="content relative z-2 max-w-[1200px] mx-auto flex flex-col items-center gap-3 md:gap-6">
           <Badge
             color="ppg"
             size="lg"

apps/site/src/app/studio/page.tsx

@@ -126,51 +126,56 @@ export const metadata: Metadata = {
 
 export default function StudioPage() {
   return (
-    <main className="flex-1 w-full -mt-24 bg-background-default text-foreground-neutral">
+    <main className="flex-1 w-full bg-background-default text-foreground-neutral">
       <JsonLd id="studio-software-application" data={studioStructuredData} />
       {/* Hero Section */}
-      <section className="relative overflow-hidden bg-[linear-gradient(180deg,var(--color-background-orm)_0%,var(--color-background-default)_72%)] px-4 pt-60 pb-12">
+      <section className="hero pt-40 -mt-24 flex items-end justify-center px-4 relative overflow-hidden bg-[linear-gradient(180deg,var(--color-background-orm)_0%,var(--color-background-default)_72%)]">
         <div className="pointer-events-none absolute inset-x-1/2 top-20 h-[780px] w-[1664px] -translate-x-1/2 rounded-full bg-[repeating-radial-gradient(circle_at_top,rgba(99,102,241,0.28)_0,rgba(99,102,241,0.28)_2px,transparent_2px,transparent_42px)] opacity-45 mask-[linear-gradient(to_bottom,rgba(0,0,0,0.9),transparent_78%)]" />
         <div className="pointer-events-none absolute inset-x-0 top-0 h-[520px] bg-[radial-gradient(70%_65%_at_50%_5%,rgba(79,70,229,0.3),transparent_70%)]" />
 
-        <div className="relative mx-auto flex max-w-[1200px] flex-col items-center gap-12">
-          <div className="flex max-w-[766px] flex-col items-center gap-8 text-center">
-            <div className="flex flex-col items-center gap-2">
-              <p className="m-0 flex items-center gap-2 text-base uppercase tracking-[1.6px] text-foreground-orm-strong font-sans-display [font-variation-settings:'wght'_800]">
-                <i className="fa-regular fa-table text-sm" aria-hidden="true" />
-                Prisma Studio
-              </p>
-              <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
-              </h1>
+        <div className="content relative z-2 flex w-full max-w-[1200px] 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-regular fa-table" aria-hidden="true" />
+              <span>Prisma Studio</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">
+              Explore and
+              <br />
+              understand your data
+            </h1>
+          </div>
 
-            <p className="m-0 max-w-[650px] text-lg leading-8 text-foreground-neutral md:text-xl">
-              The ultimate tool for exploring and editing data in your Prisma project. Work locally
-              or team up inside the Prisma Console.
-            </p>
+          <p className="text-center text-foreground-neutral max-w-2xl mx-auto">
+            The ultimate tool for exploring and editing data in your Prisma project. Work locally
+            or team up inside the Prisma Console.
+          </p>
 
-            <div className="flex flex-col items-center gap-4 sm:flex-row">
-              <Button
-                variant="orm"
-                size="2xl"
-                href={CONSOLE_URL}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <span>Explore Studio in Prisma Console</span>
-                <i className="fa-regular fa-arrow-up-right ml-2" />
-              </Button>
-              <Button variant="default-stronger" size="2xl" href={STUDIO_DOCS_URL}>
-                <span>Try locally</span>
-                <i className="fa-regular fa-arrow-down ml-2" />
-              </Button>
-            </div>
+          <div className="flex flex-col md:flex-row gap-4 items-center justify-center">
+            <Button
+              variant="orm"
+              size="3xl"
+              href={CONSOLE_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-sans-display! font-[650]"
+            >
+              <span>Explore Studio in Prisma Console</span>
+              <i className="fa-regular fa-arrow-up-right ml-2" />
+            </Button>
+            <Button
+              variant="default-stronger"
+              size="3xl"
+              href={STUDIO_DOCS_URL}
+              className="font-sans-display! font-[650]"
+            >
+              <span>Try locally</span>
+              <i className="fa-regular fa-arrow-down ml-2" />
+            </Button>
           </div>
 
           <Image
+            className="w-full h-auto"
             src="/illustrations/studio/hero.svg"
             alt="Prisma Studio Hero"
             width={1200}

apps/site/src/components/homepage/card-section/card-section.tsx

@@ -30,7 +30,7 @@ interface CardSectionProps {
 
 const imageShadowClass = "shadow-[0_10px_25px_-5px_rgba(0,0,0,0.1)]";
 const sectionClass =
-  "py-6 md:py-8 lg:py-12 my-6 md:my-8 lg:my-12 w-full overflow-visible";
+  "py-6 md:py-8 lg:py-12 my-6 md:my-8 lg:my-12 w-full overflow-visible px-4 sm:px-0";
 
 const getCardSectionItemKey = (item: TwoColumnItem) =>
   [
@@ -290,7 +290,7 @@ export const CardSection = ({ cardSection }: CardSectionProps) => {
     <div
       ref={containerRef}
       className={cn(
-        "max-w-[1232px] mx-auto mt-8 px-4 overflow-visible",
+        "max-w-[1232px] mx-auto mt-8 px-0 sm:px-4 overflow-visible",
         hasSteps && "flex-col md:flex-row items-start gap-6! relative",
       )}
     >