Use font-mono on Kicker

homepage/design-system/src/app/components/atoms/Kicker.tsx

@@ -12,7 +12,7 @@ export function Kicker({
     <Element
       className={clsx(
         className,
-        "uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400",
+        "uppercase font-mono text-blue tracking-widest text-sm font-semibold dark:text-stone-400",
       )}
     >
       {children}

homepage/homepage/components/home/EarlyAdopterSection.tsx

@@ -1,15 +1,14 @@
 import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
 import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
+import { Kicker } from "gcmp-design-system/src/app/components/atoms/Kicker";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 
 export function EarlyAdopterSection() {
   return (
     <Card className="p-4 md:py-16">
       <div className="lg:max-w-3xl md:text-center mx-auto space-y-6">
-        <p className="uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400">
-          Become an early adopter
-        </p>
+        <Kicker>Become an early adopter</Kicker>
         <H2>We&apos;ll help you build your next app with Jazz</H2>
         <Prose className="md:text-balance mx-auto">
           <p>

homepage/homepage/components/home/HeroSection.tsx

@@ -1,5 +1,6 @@
 import { H1 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { Icon } from "gcmp-design-system/src/app/components/atoms/Icon";
+import { Kicker } from "gcmp-design-system/src/app/components/atoms/Kicker";
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
 import Link from "next/link";
 
@@ -42,9 +43,7 @@ export function HeroSection() {
   return (
     <div className="container grid gap-x-8 gap-y-10 py-12 md:py-16 lg:py-24 lg:gap-0 lg:grid-cols-3">
       <div className="flex flex-col justify-center gap-4 lg:col-span-3 lg:gap-8">
-        <p className="uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400">
-          Local-first development toolkit
-        </p>
+        <Kicker>Local-first development toolkit</Kicker>
         <H1>
           <span className="inline-block">Ship top-tier apps</span>{" "}
           <span className="inline-block">at high tempo.</span>

homepage/homepage/components/home/HowJazzWorksSection.tsx

@@ -1,6 +1,7 @@
 import { clsx } from "clsx";
 import { Card } from "gcmp-design-system/src/app/components/atoms/Card";
 import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
+import { Kicker } from "gcmp-design-system/src/app/components/atoms/Kicker";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
 import CodeStepAction from "./CodeStepAction.mdx";
 import CodeStepCloud from "./CodeStepCloud.mdx";
@@ -85,9 +86,7 @@ export function HowJazzWorksSection() {
   return (
     <div className="grid gap-8">
       <div className="grid gap-3">
-        <p className="uppercase text-blue tracking-widest text-sm font-medium dark:text-stone-400">
-          Collaborative Values
-        </p>
+        <Kicker>Collaborative Values</Kicker>
 
         <H2>Build entire apps using only client-side code</H2>
       </div>