Update more stuff

Author: Carla Goncalves

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

@@ -13,7 +13,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
@@ -365,17 +365,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: "Prisma Pricing | Prisma Postgres Plans and Usage-Based Pricing",
@@ -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

@@ -132,7 +132,7 @@ export default function StudioPage() {
           </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" />
@@ -219,7 +219,7 @@ export default function StudioPage() {
               </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" />

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

@@ -13,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

@@ -96,29 +96,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")}
+      />
     </>
   );
 });