fix: DR-8002 web UI tweaks

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

@@ -6,6 +6,7 @@ import { CopyCode } from "@/components/homepage/copy-btn";
 import { Bento } from "@/components/homepage/bento";
 import { CardSection } from "@/components/homepage/card-section/card-section";
 import { ConsoleCtaButton } from "@/components/console-cta-button";
+import { PageFooterCta } from "@/components/page-footer-cta";
 import review from "../../data/homepage.json";
 import Testimonials from "../../components/homepage/testimonials";
 
@@ -23,8 +24,8 @@ const twoCol = [
           Postgres that <br /> fits your stack.
         </h2>
         <p className="text-foreground-neutral-weak! text-base">
-          Works with your existing stack, wherever you deploy.Your choice of ORM, frameworks, and
-          tools, they all just connect.
+          Works with your existing stack, wherever you deploy.Your choice of
+          ORM, frameworks, and tools, they all just connect.
         </p>
       </>
     ),
@@ -44,8 +45,9 @@ const twoCol = [
           Real Postgres. <br /> Better experience.
         </h2>
         <p className="text-foreground-neutral-weak! text-base">
-          The PostgreSQL millions know and trust in production, ready in seconds with zero
-          configuration. Automatic backups, observability and compliance.
+          The PostgreSQL millions know and trust in production, ready in seconds
+          with zero configuration. Automatic backups, observability and
+          compliance.
         </p>
       </>
     ),
@@ -109,14 +111,14 @@ export default function SiteHome() {
         <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 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.
+            Real Postgres with the developer experience and infrastructure to
+            ship faster.
           </p>
           <div className="flex flex-col md:flex-row gap-4 items-center justify-center">
             <ConsoleCtaButton
@@ -133,7 +135,9 @@ export default function SiteHome() {
             </ConsoleCtaButton>
             <CopyCode text="npx prisma init">
               <span className="text-foreground-neutral-reverse-weak">$</span>
-              <span className="text-foreground-neutral-weak">&nbsp;npx prisma init</span>
+              <span className="text-foreground-neutral-weak">
+                &nbsp;npx prisma init
+              </span>
               <i className="fa-regular fa-copy ml-2" />
             </CopyCode>
           </div>
@@ -154,7 +158,8 @@ export default function SiteHome() {
               },
               {
                 title: "Manage databases",
-                subtitle: "Create, manage and explore databases directly in your IDE.",
+                subtitle:
+                  "Create, manage and explore databases directly in your IDE.",
                 imageUrl: "/illustrations/homepage/ide",
                 imageAlt: "IDE",
                 icon: "fa-light fa-screwdriver-wrench",
@@ -178,7 +183,8 @@ export default function SiteHome() {
               },
               {
                 title: "Browse your data",
-                subtitle: "Explore, filter, and edit your data with an interface.",
+                subtitle:
+                  "Explore, filter, and edit your data with an interface.",
                 imageUrl: "/illustrations/homepage/data",
                 imageAlt: "Data browsing",
                 icon: "fa-light fa-magnifying-glass-arrow-right",
@@ -204,8 +210,8 @@ export default function SiteHome() {
           </h3>
           <div className="content flex flex-col items-center gap-3 md:items-start lg:flex-row lg:items-center lg:gap-12">
             <p className="max-w-94 w-full text-center text-md text-foreground-neutral-weak md:text-left">
-              Give your users instant production-ready Postgres, create databases, add a built-in
-              data browser, and personalize it.
+              Give your users instant production-ready Postgres, create
+              databases, add a built-in data browser, and personalize it.
             </p>
             <Button asChild variant="ppg" size="2xl">
               <a href="/pricing">
@@ -237,42 +243,20 @@ export default function SiteHome() {
       )}
 
       {/* Footer CTA Section */}
-      <section className="bg-radial from-background-ppg/50 from-0% to-background-default to-70% px-4 py-12">
-        <div className="mx-auto rounded-2xl bg-[url('/illustrations/homepage/footer_grid.svg')] bg-cover bg-center px-4 py-12">
-          <div className="p-4 md:p-8">
-            <div className="mx-auto flex max-w-[580px] flex-col items-center gap-8 text-center">
-              <div className="flex flex-col items-center gap-4">
-                <h2 className="text-3xl text-foreground-neutral font-sans-display stretch-display">
-                  Ready to try Prisma?
-                </h2>
-                <p className="text-foreground-neutral-weak">
-                  Deploy a Postgres database instantly.
-                </p>
-              </div>
-              <div className="flex flex-col gap-6 md:flex-row">
-                <ConsoleCtaButton
-                  variant="ppg"
-                  size="2xl"
-                  consolePath="/sign-up"
-                  defaultUtm={INDEX_CTA_DEFAULT_UTM}
-                >
-                  <span>Create your first Database</span>
-                  <i className="fa-regular fa-arrow-right ml-2" />
-                </ConsoleCtaButton>
-                <Button asChild variant="default-strong" size="2xl">
-                  <a href="/pricing">
-                    Explore Pricing
-                    <i className="fa-regular fa-arrow-right" />
-                  </a>
-                </Button>
-              </div>
-              <h6 className="mb-0! -mt-4 text-xs text-foreground-neutral-weaker">
-                Free to get started, no credit card needed.
-              </h6>
-            </div>
-          </div>
-        </div>
-      </section>
+      <PageFooterCta
+        title="Ready to try Prisma?"
+        description="Deploy a Postgres database instantly."
+        footer="Free to get started, no credit card needed."
+        btns={[
+          {
+            url: "https://www.prisma.io/sign-up",
+            text: "Create your first Database",
+            consolePath: "/sign-up",
+            defaultUtm: INDEX_CTA_DEFAULT_UTM,
+          },
+          { url: "https://www.prisma.io/pricing", text: "Explore Pricing" },
+        ]}
+      />
     </main>
   );
 }

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

@@ -19,7 +19,7 @@ import { MasonryPict } from "@/components/careers/masonry";
 const what_we_care_about = [
   {
     content: (
-      <div className="flex flex-col gap-6 self-start">
+      <div className="flex flex-col gap-6 self-start w-full">
         <h3 className="text-foreground-neutral stretch-display text-2xl font-black! font-sans-display">
           Open-Source
         </h3>
@@ -80,7 +80,7 @@ const what_we_care_about = [
     mobileImageAlt: "About",
     logos: null,
     useDefaultLogos: true,
-    alignItems: "items-start" as const,
+    alignItems: "items-center" as const,
     visualPosition: "left" as const,
     visualType: "image" as const,
   },
@@ -145,7 +145,7 @@ const what_we_care_about = [
     mobileImageAlt: "About",
     logos: null,
     useDefaultLogos: true,
-    alignItems: "items-start" as const,
+    alignItems: "items-center" as const,
     visualPosition: "right" as const,
     visualType: "image" as const,
   },
@@ -336,7 +336,7 @@ export const metadata = createPageMetadata({
 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="hero -mt-24 relative flex items-end justify-center px-4 pb-40 pt-10">
         <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

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

@@ -200,15 +200,20 @@ export default function Careers() {
             className="object-cover object-bottom block dark:hidden"
           />
         </div>
-        <div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 py-12">
+        <div className="content relative z-2 my-12 flex flex-col gap-8 mt-30 pb-12">
           <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">
             Help us empower developers to build data-driven applications.
           </p>
           <div className="flex flex-col md:flex-row gap-4 items-center justify-center">
-            <Button asChild variant="orm" size="3xl" className="font-sans-display! font-[650]">
+            <Button
+              asChild
+              variant="orm"
+              size="3xl"
+              className="font-sans-display! font-[650]"
+            >
               <a href="#open-positions">
                 View open positions
                 <i className="fa-solid fa-arrow-down" />