Styling for pricing section

homepage/design-system/src/app/components/molecules/HeroHeader.tsx

@@ -16,13 +16,15 @@ export function HeroHeader({
     title,
     slogan,
     pt = true,
+  className = ''
 }: {
     title: ReactNode;
     slogan: ReactNode;
     pt?: boolean;
+    className?: string;
 }) {
     return (
-        <hgroup className={clsx(pt && "pt-12 md:pt-20", "mb-10")}>
+        <hgroup className={clsx(pt && "pt-12 md:pt-20", "mb-10", className)}>
             <H1>{title}</H1>
             <H1Sub>{slogan}</H1Sub>
         </hgroup>

homepage/design-system/src/app/components/organisms/Footer.tsx

@@ -22,7 +22,7 @@ type FooterProps = {
 
 export function Footer({ logo, companyName, sections }: FooterProps) {
     return (
-        <footer className="flex z-10 mt-10 min-h-[15rem] bg-stone-100 dark:bg-stone-900 text-stone-600 dark:text-stone-400 w-full justify-center">
+        <footer className="flex z-10 mt-10 min-h-[15rem] border-t bg-stone-100 dark:bg-stone-925 text-stone-600 dark:text-stone-400 w-full justify-center  dark:border-stone-900">
             <div className="p-8 container w-full grid grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-8 max-sm:mb-12">
                 <div className="col-span-full md:col-span-1 sm:row-start-4 md:row-start-auto lg:col-span-2 md:row-span-2 md:flex-1 flex flex-row md:flex-col max-sm:mt-4 justify-between max-sm:items-start gap-2 text-sm min-w-[10rem]">
                     {logo}

homepage/design-system/src/app/components/organisms/Nav.tsx

@@ -38,7 +38,7 @@ export function Nav({
                 className={[
                     clsx(
                         "hidden md:flex sticky left-0 right-0 top-0 max-sm:bottom-0 w-full justify-center",
-                        "bg-white dark:bg-stone-950 border-b max-sm:border-t border-stone-50 dark:border-b-stone-950",
+                        "bg-white dark:bg-stone-950 border-b max-sm:border-t border-stone-200 dark:border-stone-900",
                         "max-h-none overflow-hidden transition[max-height] duration-300 ease-in-out",
                         "z-50",
                         menuOpen ? "h-[100dvh]" : "h-16"

homepage/homepage/app/(home)/page.tsx

@@ -100,7 +100,7 @@ export default function Home() {
                 </p>
             </div>
 
-            <div className="bg-stone-100 dark:bg-stone-925 py-8 lg:py-16">
+            <div className="bg-stone-100 border-y dark:bg-stone-925 py-8 lg:py-16 dark:border-stone-900">
                 <div className="container grid gap-8 lg:gap-12">
                     <h2 className="font-display md:text-center text-stone-950 dark:text-white text-2xl md:text-3xl font-semibold tracking-tight">
                         Hard things are easy now.
@@ -583,8 +583,9 @@ export default function Home() {
                             </p>
                             <p>
                                 We want to hear about what you&apos;re building,
-                                so we can help you every step of the way. We&apos;ll
-                                prioritize features that you need to succeed.
+                                so we can help you every step of the way.
+                                We&apos;ll prioritize features that you need to
+                                succeed.
                             </p>
                         </div>
                         <div className="flex md:justify-center gap-3">

homepage/homepage/app/mesh/page.tsx

@@ -4,17 +4,19 @@ import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/Gapp
 import { GridCard } from "gcmp-design-system/src/app/components/atoms/GridCard";
 import { ComingSoonBadge } from "gcmp-design-system/src/app/components/atoms/ComingSoonBadge";
 import { P } from "gcmp-design-system/src/app/components/atoms/Paragraph";
-import { H3, H4 } from "gcmp-design-system/src/app/components/atoms/Headings";
+import {
+    H2,
+    H3,
+    H4,
+} from "gcmp-design-system/src/app/components/atoms/Headings";
 import { LI } from "gcmp-design-system/src/app/components/atoms/ListItem";
 import { UL } from "gcmp-design-system/src/app/components/molecules/List";
-import {
-    Prose,
-    SmallProse,
-} from "gcmp-design-system/src/app/components/molecules/Prose";
+import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import MeshPlusBackup from "./meshPlusBackup.mdx";
 import MeshPlusDIY from "./meshPlusDIY.mdx";
 import CompletelyDIY from "./completelyDIY.mdx";
 import { Button } from "@/components/Button";
+import { Pricing } from "@/components/Pricing";
 
 export const metadata = {
     title: "jazz - Jazz Mesh",
@@ -23,13 +25,13 @@ export const metadata = {
 
 export default function Mesh() {
     return (
-        <div className="container space-y-16">
+        <div className="space-y-16">
             <HeroHeader
+                className="container"
                 title="Jazz Mesh"
                 slogan="Real-time sync and storage infrastructure that scales up to millions of users."
             />
-
-            <div>
+            <div className="container">
                 <P>Pricing that scales down to zero.</P>
                 <GappedGrid>
                     <GridCard>
@@ -59,180 +61,194 @@ export default function Mesh() {
                 </GappedGrid>
             </div>
 
-            <div>
-                <SectionHeader title="Pricing" slogan="" />
-                <GappedGrid>
-                    <GridCard>
-                        <H3>
-                            Mesh Free{" "}
-                            <div className="text-2xl float-right">$0</div>
-                        </H3>
+            <div className="bg-stone-100 border-y dark:bg-stone-925 py-8 lg:py-16 dark:border-y-0 dark:bg-transparent dark:py-0">
+                <div className="container">
+                    <H2 className="mb-5 sm:text-center md:text-left">
+                        Pricing
+                    </H2>
+
+                    <Pricing />
+                </div>
+            </div>
+
+            <div className="container space-y-16">
+                <div>
+                    <SectionHeader title="Pricing" slogan="" />
+                    <GappedGrid>
+                        <GridCard>
+                            <H3>
+                                Mesh Free{" "}
+                                <div className="text-2xl float-right">$0</div>
+                            </H3>
 
-                        <UL>
-                            <LI>Best-effort sync</LI>
-                            <LI>Community support</LI>
-                            <LI>
-                                <s>20 Monthly Active Users</s>
-                            </LI>
-                            <LI>
-                                <s>1 GB storage</s>
-                            </LI>
-                        </UL>
-                        <div className="border-white bg-blue-50 border-4 rounded-lg px-4 -rotate-6 shadow">
-                            <p className="text-center my-4 font-bold">
-                                Public Alpha
-                            </p>
                             <UL>
-                                <LI>Use your email address as API key</LI>
-                                <LI>Currently no enforced limits</LI>
+                                <LI>Best-effort sync</LI>
+                                <LI>Community support</LI>
+                                <LI>
+                                    <s>20 Monthly Active Users</s>
+                                </LI>
+                                <LI>
+                                    <s>1 GB storage</s>
+                                </LI>
+                            </UL>
+                            <div className="border-white bg-blue-50 border-4 rounded-lg px-4 -rotate-6 shadow">
+                                <p className="text-center my-4 font-bold">
+                                    Public Alpha
+                                </p>
+                                <UL>
+                                    <LI>Use your email address as API key</LI>
+                                    <LI>Currently no enforced limits</LI>
+                                </UL>
+                            </div>
+                        </GridCard>
+                        <GridCard>
+                            <H3>
+                                Mesh Indie <ComingSoonBadge />
+                                <div className="float-right">
+                                    <span className="text-2xl">$19</span>/mo
+                                </div>
+                            </H3>
+                            <UL>
+                                <LI>Base-priority sync</LI>
+                                <LI>Community support</LI>
+                                <LI>1000 Monthly Active Usersincluded</LI>
+                                <LI>500 GB storageincluded</LI>
+                            </UL>
+                            <P>Extra usage:</P>
+                            <LI>$9 per add. 1000 Monthly Active Users</LI>
+                            <LI>$9 per add. 500 GB storage/mo</LI>
+
+                            <p className="mt-4 text-sm">
+                                For companies with &lt;$200k in annual revenue
+                                or institutional funding.
+                            </p>
+                        </GridCard>
+                        <GridCard>
+                            <H3>
+                                Mesh Pro
+                                <div className="float-right">
+                                    from <span className="text-2xl">$500</span>
+                                    /mo
+                                </div>
+                            </H3>
+                            <UL>
+                                <LI>Highest-priority sync</LI>
+                                <LI>Dedicated integration & dev support</LI>
+                                <LI>Unlimited Monthly Active Users</LI>
+                                <LI>Unlimited storage</LI>
+                                <LI>SLAs, custom deployment, etc.</LI>
+                                <LI>
+                                    Offer <code>sync.yourdomain.com</code>
+                                </LI>
+                            </UL>
+                            <Button
+                                href="https://cal.com/anselm-io/mesh-pro-intro"
+                                size="lg"
+                                className="block text-center"
+                            >
+                                Book intro call
+                            </Button>
+                            <p className="mt-4 text-sm">
+                                Our team of devs & product experts will
+                                get you going for free. Then we&apos;ll make a
+                                 deal just for you.
+                            </p>
+                        </GridCard>
+                    </GappedGrid>
+                </div>
+
+                <div>
+                    <SectionHeader
+                        title="Global Footprint"
+                        slogan="We're rapidly expanding our network of sync & storage nodes. This is our current best-effort coverage."
+                    />
+                    <GappedGrid>
+                        <div className="text-sm">
+                            <H4>Under 50ms RTT</H4>
+                            <UL>
+                                <LI>Frankfurt</LI>
+                                <LI>New York</LI>
+                                <LI>Newark</LI>
+                                <LI>North California</LI>
+                                <LI>North Virginia</LI>
+                                <LI>San Francisco</LI>
+                                <LI>Singapore</LI>
+                                <LI>Toronto</LI>
                             </UL>
                         </div>
-                    </GridCard>
-                    <GridCard>
-                        <H3>
-                            Mesh Indie <ComingSoonBadge />
-                            <div className="float-right">
-                                <span className="text-2xl">$19</span>/mo
-                            </div>
-                        </H3>
-                        <UL>
-                            <LI>Base-priority sync</LI>
-                            <LI>Community support</LI>
-                            <LI>1000 Monthly Active Users included</LI>
-                            <LI>500 GB storage included</LI>
-                        </UL>
-                        <P>Extra usage:</P>
-                        <LI>$9 per add. 1000 Monthly Active Users</LI>
-                        <LI>$9 per add. 500 GB storage/mo</LI>
 
-                        <p className="mt-4 text-sm">
-                            For companies with &lt;$200k in annual revenue or
-                            institutional funding.
-                        </p>
-                    </GridCard>
-                    <GridCard>
-                        <H3>
-                            Mesh Pro
-                            <div className="float-right">
-                                from <span className="text-2xl">$500</span>/mo
-                            </div>
-                        </H3>
-                        <UL>
-                            <LI>Highest-priority sync</LI>
-                            <LI>
-                                Dedicated integration & dev support
-                            </LI>
-                            <LI>Unlimited Monthly Active Users</LI>
-                            <LI>Unlimited storage</LI>
-                            <LI>SLAs, custom deployment, etc.</LI>
-                            <LI>
-                                Offer <code>sync.yourdomain.com</code>
-                            </LI>
-                        </UL>
-                        <Button
-                            href="https://cal.com/anselm-io/mesh-pro-intro"
-                            size="lg"
-                            className="block text-center"
-                        >
-                            Book intro call
-                        </Button>
-                        <p className="mt-4 text-sm">
-                            Our team of devs & product experts will get
-                            you going for free. Then we&apos;ll make a deal just for you.
-                        </p>
-                    </GridCard>
-                </GappedGrid>
-            </div>
+                        <div className="text-sm">
+                            <H4>Under 100ms RTT</H4>
+                            <UL>
+                                <LI>Amsterdam</LI>
+                                <LI>Atlanta</LI>
+                                <LI>London</LI>
+                                <LI>Ohio</LI>
+                                <LI>Paris</LI>
+                            </UL>
+                        </div>
 
-            <div>
-                <SectionHeader
-                    title="Global Footprint"
-                    slogan="We're rapidly expanding our network of sync & storage nodes. This is our current best-effort coverage."
-                />
-                <GappedGrid>
-                    <div className="text-sm">
-                        <H4>Under 50ms RTT</H4>
-                        <UL>
-                            <LI>Frankfurt</LI>
-                            <LI>New York</LI>
-                            <LI>Newark</LI>
-                            <LI>North California</LI>
-                            <LI>North Virginia</LI>
-                            <LI>San Francisco</LI>
-                            <LI>Singapore</LI>
-                            <LI>Toronto</LI>
-                        </UL>
-                    </div>
+                        <div className="text-sm">
+                            <H4>Under 200ms RTT</H4>
+                            <UL>
+                                <LI>Bangalore</LI>
+                                <LI>Dallas</LI>
+                                <LI>Mumbai</LI>
+                                <LI>Oregon</LI>
+                            </UL>
 
-                    <div className="text-sm">
-                        <H4>Under 100ms RTT</H4>
-                        <UL>
-                            <LI>Amsterdam</LI>
-                            <LI>Atlanta</LI>
-                            <LI>London</LI>
-                            <LI>Ohio</LI>
-                            <LI>Paris</LI>
-                        </UL>
-                    </div>
+                            <H4>Under 300ms RTT</H4>
+                            <UL>
+                                <LI> Seoul</LI>
+                                <LI> Tokyo</LI>
+                            </UL>
+                        </div>
 
-                    <div className="text-sm">
-                        <H4>Under 200ms RTT</H4>
-                        <UL>
-                            <LI>Bangalore</LI>
-                            <LI>Dallas</LI>
-                            <LI>Mumbai</LI>
-                            <LI>Oregon</LI>
-                        </UL>
+                        <div className="text-sm">
+                            <H4>Under 400ms RTT</H4>
+                            <UL>
+                                <LI>Sao Paulo</LI>
+                                <LI>Sydney</LI>
+                            </UL>
 
-                        <H4>Under 300ms RTT</H4>
-                        <UL>
-                            <LI> Seoul</LI>
-                            <LI> Tokyo</LI>
-                        </UL>
-                    </div>
+                            <H4>Under 500ms RTT</H4>
 
-                    <div className="text-sm">
-                        <H4>Under 400ms RTT</H4>
-                        <UL>
-                            <LI>Sao Paulo</LI>
-                            <LI>Sydney</LI>
-                        </UL>
+                            <UL>
+                                <LI>Cape Town</LI>
+                            </UL>
+                        </div>
+                    </GappedGrid>
 
-                        <H4>Under 500ms RTT</H4>
 
-                        <UL>
-                            <LI>Cape Town</LI>
-                        </UL>
-                    </div>
-                </GappedGrid>
-            </div>
+                </div>
 
-            <div>
-                <SectionHeader
-                    title="Custom Deployment Scenarios"
-                    slogan="You can rely on Jazz Mesh. But you don't have to."
-                />
-                <P>
-                    Because Jazz is open-source, you can optionally run your own
-                    sync nodes &mdash; in a variety of setups.
-                </P>
-                <GappedGrid>
-                    <GridCard>
-                        <Prose>
-                            <MeshPlusBackup />
-                        </Prose>
-                    </GridCard>
-                    <GridCard>
-                        <Prose>
-                            <MeshPlusDIY />
-                        </Prose>
-                    </GridCard>
-                    <GridCard>
-                        <Prose>
-                            <CompletelyDIY />
-                        </Prose>
-                    </GridCard>
-                </GappedGrid>
+                <div>
+                    <SectionHeader
+                        title="Custom Deployment Scenarios"
+                        slogan="You can rely on Jazz Mesh. But you don't have to."
+                    />
+                    <P>
+                        Because Jazz is open-source, you can optionally run your
+                        own sync nodes &mdash; in a variety of setups.
+                    </P>
+                    <GappedGrid>
+                        <GridCard>
+                            <Prose>
+                                <MeshPlusBackup />
+                            </Prose>
+                        </GridCard>
+                        <GridCard>
+                            <Prose>
+                                <MeshPlusDIY />
+                            </Prose>
+                        </GridCard>
+                        <GridCard>
+                            <Prose>
+                                <CompletelyDIY />
+                            </Prose>
+                        </GridCard>
+                    </GappedGrid>
+                </div>
             </div>
         </div>
     );

homepage/homepage/components/Button.tsx

@@ -32,7 +32,7 @@ export function Button(props: ButtonProps) {
 
     const classNames = clsx(
         className,
-        "rounded-lg transition-colors",
+        "rounded-lg text-center transition-colors",
         sizeClasses[size],
         variantClasses[variant],
     );

homepage/homepage/components/Pricing.tsx

@@ -0,0 +1,145 @@
+import { CircleCheckIcon } from "lucide-react";
+import { Button } from "@/components/Button";
+import { ComingSoonBadge } from "gcmp-design-system/src/app/components/atoms/ComingSoonBadge";
+
+export function ListItem({
+    variant = "blue",
+    children,
+}: {
+    variant?: "gray" | "blue";
+    children: React.ReactNode;
+}) {
+    const iconSize = 16;
+
+    const iconVariants = {
+        gray: (
+            <CircleCheckIcon
+                size={iconSize}
+                className="text-stone-500 shrink-0"
+            />
+        ),
+        blue: (
+            <CircleCheckIcon
+                size={iconSize}
+                className="text-blue-500 dark:text-white shrink-0"
+            />
+        ),
+    };
+
+    return (
+        <li className="inline-flex items-center gap-2 text-stone-800 dark:text-stone-200 py-2">
+            {iconVariants[variant]}
+            {children}
+        </li>
+    );
+}
+
+export function Pricing() {
+    return (
+        <div className="flex flex-col sm:max-w-lg mx-auto md:max-w-none md:flex-row md:items-start gap-4">
+            <div className="md:flex-1 flex flex-col gap-3 overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5 bg-white dark:bg-stone-925">
+                <h3 className="font-semibold text-stone-900 text-lg dark:text-white">
+                    Starter
+                </h3>
+
+                <p className="text-3xl font-light text-stone-900 dark:text-white">
+                    $0
+                    <span className="text-sm text-stone-600 dark:text-stone-500">
+                        /mo
+                    </span>
+                </p>
+
+                <ul className="flex flex-col divide-y text-sm lg:text-base dark:divide-stone-900">
+                    <ListItem>Best-effort sync</ListItem>
+                    <ListItem>Community support</ListItem>
+                    <ListItem variant="gray">
+                        <s className="text-stone-500">
+                            20 monthly active users
+                        </s>
+                    </ListItem>
+                    <ListItem variant="gray">
+                        <s className="text-stone-500">1 GB storage</s>
+                    </ListItem>
+                </ul>
+                <div className="md:mt-5 space-y-3">
+                    <p className="text-xs">
+                        Currently no enforced limits for public alpha.
+                    </p>
+
+                    <p className="text-xs">
+                        Use your email address as API key.
+                    </p>
+                </div>
+            </div>
+            <div className="md:flex-1 flex flex-col gap-3 overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5 bg-white dark:bg-stone-925">
+                <div>
+                    <h3 className="font-semibold text-stone-900 text-lg inline mr-2 dark:text-white">
+                        Indie
+                    </h3>
+                    <ComingSoonBadge />
+                </div>
+
+                <p className="text-3xl font-light text-stone-900 dark:text-white">
+                    $19
+                    <span className="text-sm text-stone-600 dark:text-stone-500">
+                        /mo
+                    </span>
+                </p>
+
+                <ul className="flex flex-col divide-y text-sm lg:text-base dark:divide-stone-900">
+                    <ListItem>Base-priority sync</ListItem>
+                    <ListItem>Community support</ListItem>
+                    <ListItem>1000 monthly active users</ListItem>
+                    <ListItem>500GB storage</ListItem>
+                </ul>
+
+                <p className="text-sm">Extra usage</p>
+
+                <ul className="flex flex-col divide-y text-sm lg:text-base dark:divide-stone-900">
+                    <ListItem>$9 per additional 1000 MAUs</ListItem>
+                    <ListItem>$9 per additional 500GB storage/mo</ListItem>
+                </ul>
+                <p className="text-xs">
+                    For companies with &lt;$200k in annual revenue or
+                    institutional funding.
+                </p>
+            </div>
+            <div className="md:flex-1 flex flex-col gap-3 overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5 bg-white dark:bg-stone-925 pb-6">
+                <h3 className="font-semibold text-stone-900 text-lg dark:text-white">
+                    Pro
+                </h3>
+
+                <p className="text-3xl font-light text-stone-900 dark:text-white">
+                    <span className="text-lg font-medium">from {""}</span>
+                    $1k
+                    <span className="text-sm text-stone-600 dark:text-stone-500">
+                        /mo
+                    </span>
+                </p>
+
+                <ul className="flex flex-col divide-y text-sm lg:text-base dark:divide-stone-900">
+                    <ListItem>High-priority sync</ListItem>
+                    <ListItem>White-glove support</ListItem>
+                    <ListItem>Unlimited monthly active users</ListItem>
+                    <ListItem>Unlimited storage</ListItem>
+                    <ListItem>SLAs, custom deployment, etc.</ListItem>
+                    <ListItem>
+                        Offer <code>sync.yourdomain.com</code>
+                    </ListItem>
+                </ul>
+
+                <Button
+                    href="https://cal.com/anselm-io/mesh-pro-intro"
+                    size="lg"
+                    className="md:mt-6"
+                >
+                    Book intro call
+                </Button>
+                <p className="text-xs md:mt-3">
+                    Our team of devs and product specialists will get you going
+                    for free. Then we&apos;ll make a bespoke deal.
+                </p>
+            </div>
+        </div>
+    );
+}

homepage/homepage/lib/showcase.ts

@@ -10,6 +10,7 @@ export const products = [
         name: "Invoice Radar",
         imageUrl: "/invoice-radar.png",
         url: "https://invoiceradar.com",
-        description: "Automatically gather invoices from mail and cloud providers.",
+        description:
+            "Automatically gather invoices from mail and cloud providers.",
     },
 ];