fix: DR-8002 web UI tweaks

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

@@ -5,6 +5,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";
 // Antigravity is a purely decorative particle animation — skip SSR to keep
@@ -229,42 +230,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-client";
 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>
@@ -82,7 +82,7 @@ const what_we_care_about = [
       "Illustration representing open-source contributions and the Prisma FOSS Fund",
     logos: null,
     useDefaultLogos: true,
-    alignItems: "items-start" as const,
+    alignItems: "items-center" as const,
     visualPosition: "left" as const,
     visualType: "image" as const,
   },
@@ -148,7 +148,7 @@ const what_we_care_about = [
       "Illustration representing Prisma's climate change commitments",
     logos: null,
     useDefaultLogos: true,
-    alignItems: "items-start" as const,
+    alignItems: "items-center" as const,
     visualPosition: "right" as const,
     visualType: "image" as const,
   },
@@ -388,7 +388,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

@@ -227,7 +227,7 @@ 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>