Update more stuff

Author: carlagn

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/event-code-of-conduct/page.tsx

@@ -8,8 +8,7 @@ import { LegalAccordion } from "@/components/legal-accordion";
 
 export const metadata = createPageMetadata({
   title: "Prisma - Event Code of Conduct",
-  description:
-    "Read our Event Code of Conduct and how it relates to you.",
+  description: "Read our Event Code of Conduct and how it relates to you.",
   path: "/event-code-of-conduct",
   ogImage: "/og/og-event-code-of-conduct.png",
 });
@@ -18,7 +17,7 @@ export default function EventCodeOfConductPage() {
   return (
     <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">
+      <div className="text-center pb-16 pt-24">
         <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>

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

@@ -156,7 +156,7 @@ const twoCol_2 = [
           asChild
           variant="orm"
           size="xl"
-          className="w-fit mx-auto lg:w-full"
+          className="w-fit mx-auto md:mx-0"
         >
           <a href="https://benchmarks.prisma.io">
             Explore Benchmarks
@@ -361,17 +361,17 @@ export default function ORM() {
                 >
                   <Image src={stat.icon} alt={stat.title} fill loading="lazy" />
                 </Action>
-                <h4 className="text-2xl text-center md:text-left font-sans-display stretch-display text-foreground-neutral">
+                <h4 className="text-2xl text-left font-sans-display stretch-display text-foreground-neutral">
                   {stat.title}
                 </h4>
-                <p className="text-center md:text-left text-foreground-neutral-weak">
+                <p className="text-left text-foreground-neutral-weak">
                   {stat.description}
                 </p>
                 <Button
                   asChild
                   variant="default-strong"
                   size="xl"
-                  className="w-fit mx-auto md:mx-0"
+                  className="w-fit"
                 >
                   <a href={stat.btn.url}>
                     {stat.btn.label}{" "}

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

@@ -2,6 +2,7 @@ import { createPageMetadata } from "@/lib/page-metadata";
 import { Accordion, Accordions, Button } from "@prisma/eclipse";
 import { faqs } from "./pricing-data";
 import { PricingPageContent } from "./pricing-page-content";
+import { PageFooterCta } from "@/components/page-footer-cta";
 
 export const metadata = createPageMetadata({
   title: "Pricing — Prisma Postgres Plans & Features",
@@ -50,40 +51,19 @@ export default function PricingPage() {
         </div>
       </section>
 
-      {/* Try Prisma Postgres */}
-      <section className="bg-radial from-background-ppg 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">
-                  Try Prisma Postgres
-                </h2>
-                <p className="text-foreground-neutral-weak">
-                  Deploy a Postgres database instantly.
-                </p>
-              </div>
-              <div className="flex flex-col gap-6 md:flex-row">
-                <Button asChild variant="ppg" size="2xl">
-                  <a href="https://console.prisma.io/sign-up?utm_source=website&utm_medium=pricing&utm_campaign=cta">
-                    Create your first Database
-                    <i className="fa-regular fa-arrow-right" />
-                  </a>
-                </Button>
-                <Button asChild variant="default-strong" size="2xl">
-                  <a href="https://www.prisma.io/docs/">
-                    Read the docs
-                    <i className="fa-regular fa-book-open" />
-                  </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="Try Prisma Postgres"
+        description="Deploy a Postgres database instantly."
+        btns={[
+          {
+            url: `https://console.prisma.io/sign-up?utm_source=website&utm_medium=pricing&utm_campaign=cta`,
+            text: "Create your first Database",
+            external: true,
+          },
+          { url: "https://www.prisma.io/docs", text: "Read the docs" },
+        ]}
+        footer="Free to get started, no credit card needed."
+      />
     </main>
   );
 }

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

@@ -67,7 +67,7 @@ export function PricingHeroPlans({
             className="rounded-md gap-2"
             label={
               <>
-                <i className="fa-regular fa-message-code text-xs" />
+                <i className="fa-regular fa-message-code text-xs mr-2" />
                 Prisma ORM will always be free
               </>
             }

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

@@ -14,7 +14,7 @@ export default function PrivacyPage() {
   return (
     <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">
+      <div className="text-center pb-16 pt-24">
         <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">
           Privacy Policy
         </h1>

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

@@ -14,7 +14,7 @@ export default function SlaPage() {
   return (
     <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">
+      <div className="text-center pb-16 pt-24">
         <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 Service Level Agreement
         </h1>

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

@@ -41,7 +41,8 @@ const featureRows = [
     description:
       "Access your database anywhere. Work locally for rapid development or use Console for team collaboration. Switch seamlessly between solo and team workflows.",
     imageSrc: "/illustrations/studio/laptop.svg",
-    imageAlt: "Prisma Studio interface showing local and collaborative workflows",
+    imageAlt:
+      "Prisma Studio interface showing local and collaborative workflows",
     imageWidth: 522,
     imageHeight: 295,
   },
@@ -51,7 +52,8 @@ const featureRows = [
     description:
       "Browse your database visually with powerful filters and search. Spot patterns instantly and get insights for debugging or schema changes, no SQL needed.",
     imageSrc: "/illustrations/studio/explore.svg",
-    imageAlt: "Prisma Studio data exploration interface with highlighted filters",
+    imageAlt:
+      "Prisma Studio data exploration interface with highlighted filters",
     imageWidth: 546,
     imageHeight: 275,
   },
@@ -147,12 +149,12 @@ export default function StudioPage() {
           </div>
 
           <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.
+            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 md:flex-row gap-4 items-center justify-center">
-            <Button asChild variant="ppg" size="2xl">
+            <Button asChild variant="orm" size="2xl">
               <a href={CONSOLE_URL} target="_blank" rel="noopener noreferrer">
                 Explore Studio in Prisma Console
                 <i className="fa-regular fa-arrow-up-right" />
@@ -186,7 +188,10 @@ export default function StudioPage() {
             >
               <div className="flex items-start gap-4">
                 <div className="flex size-12 items-center justify-center rounded-md bg-background-orm p-3">
-                  <i className={`${card.icon} text-lg text-foreground-orm`} aria-hidden="true" />
+                  <i
+                    className={`${card.icon} text-lg text-foreground-orm`}
+                    aria-hidden="true"
+                  />
                 </div>
                 <div>
                   <h2 className="m-0 text-xl leading-7 text-foreground-neutral font-sans-display [font-variation-settings:'wght'_800]">
@@ -230,12 +235,13 @@ export default function StudioPage() {
                 See how Studio works
               </h2>
               <p className="m-0 mt-4 text-base leading-6 text-foreground-neutral-weak">
-                Access Prisma Studio on your local machine during development, or in the Platform
-                Console to collaborate on data with your team.
+                Access Prisma Studio on your local machine during development,
+                or in the Platform Console to collaborate on data with your
+                team.
               </p>
             </div>
 
-            <Button asChild variant="ppg" size="xl">
+            <Button asChild variant="orm" size="xl">
               <a href={CONSOLE_URL} target="_blank" rel="noopener noreferrer">
                 Explore Studio in Console
                 <i className="fa-regular fa-arrow-right" />
@@ -267,7 +273,8 @@ export default function StudioPage() {
                   Try it out!
                 </h2>
                 <p className="m-0 mt-4 text-base leading-6 text-foreground-neutral-weak">
-                  Take Studio for a spin with a local pre-seeded database and example project.
+                  Take Studio for a spin with a local pre-seeded database and
+                  example project.
                 </p>
               </div>
 
@@ -324,10 +331,17 @@ function FeatureRow({
         <h2 className="m-0 mt-2 text-4xl leading-10 text-foreground-neutral font-sans-display [font-variation-settings:'wght'_900]">
           {title}
         </h2>
-        <p className="m-0 mt-4 text-base leading-8 text-foreground-neutral-weak">{description}</p>
+        <p className="m-0 mt-4 text-base leading-8 text-foreground-neutral-weak">
+          {description}
+        </p>
       </div>
 
-      <StudioFeatureImage src={imageSrc} alt={imageAlt} width={imageWidth} height={imageHeight} />
+      <StudioFeatureImage
+        src={imageSrc}
+        alt={imageAlt}
+        width={imageWidth}
+        height={imageHeight}
+      />
     </div>
   );
 }

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

@@ -4,8 +4,7 @@ import { LegalAccordion } from "@/components/legal-accordion";
 
 export const metadata = createPageMetadata({
   title: "Terms of Service",
-  description:
-    "Read our terms of services and see how they relate to you.",
+  description: "Read our terms of services and see how they relate to you.",
   path: "/terms",
   ogImage: "/og/og-terms.png",
 });
@@ -14,7 +13,7 @@ export default function TermsPage() {
   return (
     <main className="flex-1 w-full z-1 -mt-24 relative legal-hero-gradient">
       {/* Hero */}
-      <div className="text-center pb-16 pt-40 my-24">
+      <div className="text-center pb-16 pt-40 my-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">
           Terms of Service
         </h1>

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

@@ -100,29 +100,29 @@ interface LogoGridProps {
 // ============================================================================
 
 const LogoImage = memo(({ logo, size }: { logo: Logo; size: number }) => {
-  const lightImageUrl = logo.mobileImageUrl ?? logo.imageUrl;
-  const darkImageUrl = logo.imageUrlLight ?? logo.imageUrl;
+  const lightImageUrl = logo.mobileImageUrl ?? logo.imageUrlLight;
+  const darkImageUrl = logo.imageUrl;
   const hasThemeVariant = lightImageUrl !== darkImageUrl;
   const imageClassName = "w-full aspect-square rounded-lg object-contain";
 
   return (
     <>
-      <Image
-        src={lightImageUrl}
-        alt={logo.alt}
-        width={size}
-        height={size}
-        className={cn(imageClassName, hasThemeVariant && "block dark:hidden")}
-      />
-      {hasThemeVariant && (
+      {lightImageUrl && (
         <Image
-          src={darkImageUrl}
+          src={lightImageUrl}
           alt={logo.alt}
           width={size}
           height={size}
-          className={cn(imageClassName, "hidden dark:block")}
+          className={cn(imageClassName, "block dark:hidden")}
         />
       )}
+      <Image
+        src={darkImageUrl}
+        alt={logo.alt}
+        width={size}
+        height={size}
+        className={cn(imageClassName, lightImageUrl && "hidden dark:block")}
+      />
     </>
   );
 });