Tighter slogan supported by kicker

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

@@ -24,6 +24,7 @@ export function Prose({
         sizeClassName,
         "dark:prose-invert",
         "prose-code:dark:bg-stone-900",
+        "prose-p:leading-snug leading-snug",
       )}
     >
       {children}

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

@@ -19,13 +19,15 @@ export default function Home() {
       <ProblemStatementSection />
 
       <div className="container flex flex-col gap-12 mt-12 lg:gap-20 lg:mt-20">
+        <LocalFirstFeaturesSection />
+
         <HowJazzWorksSection />
 
         <Testimonial name="Spreadsheet app (stealth)" role="CTO">
           <p>
             You don&apos;t have to think about deploying a database, SQL
             schemas, relations, and writing queries… Basically,{" "}
-            <span className="bg-blue-50 px-1 dark:bg-transparent">
+            <span className="bg-blue-50 px-1 dark:bg-blue-950">
               if you know TypeScript, you know Jazz
             </span>
             , and you can ship an app. It&apos;s just so nice!
@@ -34,8 +36,6 @@ export default function Home() {
 
         <ChatDemoSection />
 
-        <LocalFirstFeaturesSection />
-
         <CollaborationFeaturesSection />
 
         <EncryptionSection />
@@ -44,7 +44,7 @@ export default function Home() {
           We just wanted to build a single-player experience first, planning to
           add team and org features much later. But because of Jazz, we had that
           from day one.{" "}
-          <span className="bg-blue-50 px-1 dark:bg-transparent">
+          <span className="bg-blue-50 px-1 dark:bg-blue-950">
             All we needed to add was an invite button.
           </span>
         </Testimonial>

homepage/homepage/components/home/HeroSection.tsx

@@ -42,25 +42,31 @@ export function HeroSection() {
     <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
+          Build local-first apps
         </p>
         <h1 className="font-display text-stone-950 dark:text-white text-4xl md:text-5xl lg:text-6xl font-medium tracking-tighter">
-          <span className="inline-block">Ship top-tier apps</span>{" "}
+          <span className="inline-block">Ship high-tech</span>{" "}
           <span className="inline-block">at high tempo.</span>
         </h1>
 
-        <Prose size="lg" className="text-pretty max-w-2xl dark:text-stone-200">
+        <Prose
+          size="lg"
+          className="prose-p:text-pretty max-w-2xl text-stone-800 dark:text-stone-200"
+        >
           <p>
-            Jazz is a framework for building local-first apps
-            &mdash;&nbsp;an&nbsp;architecture that lets companies like Figma and
-            Linear play in a league of their own.
+            Jazz is a toolkit for building apps with{" "}
+            <span className="bg-blue-50 px-1 dark:bg-blue-950">
+              local-first state
+            </span>{" "}
+            &mdash; a&nbsp;radically new approach powering top-tier apps like
+            Figma and Linear.
           </p>
           <p>
-            Open source. Self-host or use{" "}
-            <Link className="text-reset" href="/cloud">
-              Jazz Cloud
-            </Link>{" "}
-            for zero-config magic.
+            Taking it one step further, Jazz&apos;s unique
+            <span className="bg-blue-50 px-1 dark:bg-blue-950">
+              local-first permissions
+            </span>{" "}
+            completely distribute and abstract away the traditional backend.
           </p>
         </Prose>
 
@@ -77,6 +83,15 @@ export function HeroSection() {
             </div>
           ))}
         </div>
+        <Prose className="prose-p:max-w-4xl text-stone-800 dark:text-stone-200">
+          <p>
+            Forever open source (MIT). Self-host or use{" "}
+            <Link className="text-reset" href="/cloud">
+              Jazz Cloud
+            </Link>{" "}
+            for instant global sync&nbsp;&&nbsp;storage.
+          </p>
+        </Prose>
       </div>
     </div>
   );

homepage/homepage/components/home/HowJazzWorksSection.tsx

@@ -2,6 +2,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 { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
+import { SectionHeader } from "gcmp-design-system/src/app/components/molecules/SectionHeader";
 import CodeStepAction from "./CodeStepAction.mdx";
 import CodeStepCloud from "./CodeStepCloud.mdx";
 import CodeStepRender from "./CodeStepRender.mdx";
@@ -84,13 +85,18 @@ 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>
-
-        <H2>Build entire apps using only client-side code</H2>
-      </div>
+      <SectionHeader
+        kicker="Collaborative Values"
+        title="Build entire apps using only client-side code"
+        slogan={
+          <>
+            <p>
+              Collaborative Values are the shape local-first state takes in Jazz
+              &mdash; typesafe, mutable local JSON.
+            </p>
+          </>
+        }
+      />
       <GappedGrid>
         <Step
           step={1}

homepage/homepage/components/home/LocalFirstFeaturesSection.tsx

@@ -9,8 +9,8 @@ export function LocalFirstFeaturesSection() {
       icon: "offline",
       description: (
         <>
-          Your app works seamlessly offline or on sketchy connections. When
-          you&apos;re back online, your data is synced.
+          Your app works seamlessly offline or on sketchy networks. Whenever
+          possible, your data is synced.
         </>
       ),
     },
@@ -48,13 +48,19 @@ export function LocalFirstFeaturesSection() {
   return (
     <div>
       <SectionHeader
-        title="Why local-first?"
+        kicker="Local-first state"
+        title="What if your app&apos;s data worked like git?"
         slogan={
           <>
             <p>
-              With local-first, your data is stored locally, then synced to the
-              server.
-              <br /> This comes with the following benefits.
+              With local-first state, your data is stored locally and edited
+              directly. Diffs are synced to the server and to other
+              participants.
+            </p>
+            <p>
+              Jazz uses CRDTs, which are like super-lightweight git for
+              structured data &mdash; so we can constantly diff tiny edits and
+              sync in real-time.
             </p>
           </>
         }

homepage/homepage/components/home/ProblemStatementSection.tsx

@@ -9,7 +9,7 @@ export default function ProblemStatementSection() {
     <div className="container grid gap-4 lg:gap-8">
       <SectionHeader
         className="sm:text-center sm:mx-auto"
-        title="Hard things are easy now."
+        title="Ready for a perspective shift?"
         slogan=""
       />
 
@@ -27,11 +27,11 @@ export default function ProblemStatementSection() {
           </span>
           <Prose>
             <p className="font-display text-lg md:text-xl font-semibold text-stone-900 dark:text-white">
-              The sad truth is...
+              The sad truth:
             </p>
             <p>
               <strong>
-                Every stack reinvents how users and machines share state.
+                Every stack has to reinvent how users and machines share state.
               </strong>
             </p>
           </Prose>
@@ -60,7 +60,7 @@ export default function ProblemStatementSection() {
         <div className="flex flex-col gap-3 p-4 pt-8 md:p-8 md:gap-5">
           <Prose>
             <p className="font-display text-lg md:text-xl font-semibold text-stone-900 dark:text-white">
-              The good news is...
+              The good news:
             </p>
             <p>
               <strong>
@@ -79,7 +79,7 @@ export default function ProblemStatementSection() {
             </p>
             <p>
               All that’s left is{" "}
-              <strong>building the UX that makes your app special.</strong>
+              <strong>building what makes your app special.</strong>
             </p>
           </Prose>
         </div>