Narrative

src/routes/+page.svelte

@@ -191,7 +191,7 @@
     <div class="two-column-layout meet-grid">
       <div class="comma-four-content">
         <h1>meet comma four</h1>
-        <h2>make driving chill with a hands-off, eyes-on driving experience</h2>
+        <h2>replace your car's lane keeping and cruise control with openpilot. hands-free driving on back roads, not just the highway.</h2>
       </div>
 
       <div class="device-gallery">
@@ -243,10 +243,13 @@
         {/each}
       </div>
 
-      <a class="homepage-cta accent-cta" href="/shop/comma-four">
-        <span>buy now for $999</span>
-        <span class="cta-arrow" aria-hidden="true">{@html ArrowRight}</span>
-      </a>
+      <div class="buy">
+        <a class="homepage-cta accent-cta" href="/shop/comma-four">
+          <span>buy now for $999</span>
+          <span class="cta-arrow" aria-hidden="true">{@html ArrowRight}</span>
+        </a>
+        <p class="buy-note">free over-the-air updates, no subscription</p>
+      </div>
     </div>
   </div>
 </section>
@@ -284,7 +287,7 @@
 <section class="dark" id="openpilot">
   <div class="container">
     <h1 class="map-headline">
-      comma runs <a href="/openpilot" class="highlight">open source software,</a>&nbsp;driving all over the world with no subscription needed
+      <a href="/openpilot" class="highlight">openpilot</a>&nbsp;is driving all over the world, right now
     </h1>
     <figure class="activity-map">
       <div class="map-preview">
@@ -592,10 +595,18 @@
       }
     }
 
-    & .homepage-cta {
+    & .buy {
       grid-area: cta;
     }
 
+    & .buy-note {
+      color: var(--color-foreground);
+      font-size: 0.9375rem;
+      letter-spacing: -0.04em;
+      margin: 0.75rem 0 0;
+      opacity: 0.65;
+    }
+
     @media screen and (max-width: 599px) {
       & .meet-grid {
         grid-template-areas:

src/routes/preview/home/+page.svelte

@@ -0,0 +1,118 @@
+<script>
+  const variants = [
+    {
+      href: "/preview/home/01",
+      name: "01 — my car already has that",
+      strategy: "meets the objection head on with a side by side against factory lane keeping",
+      section: "“but my car already has that”",
+    },
+    {
+      href: "/preview/home/02",
+      name: "02 — what a drive looks like",
+      strategy: "walks through one drive, beat by beat, and ends on arriving less tired",
+      section: "what a drive actually looks like",
+    },
+    {
+      href: "/preview/home/03",
+      name: "03 — it learned from people",
+      strategy: "explains the end to end model in plain words: a rulebook versus watching people",
+      section: "nobody told it how to drive",
+    },
+    {
+      href: "/preview/home/04",
+      name: "04 — more than driving",
+      strategy: "surfaces the phone half: live cameras, location, recordings, clips",
+      section: "half of what you get isn't driving",
+    },
+    {
+      href: "/preview/home/05",
+      name: "05 — the questions",
+      strategy: "blunt Q&A in the voice we use on X, placed just before the testimonials",
+      section: "the questions everyone asks",
+    },
+  ];
+</script>
+
+<section class="light">
+  <div class="container">
+    <h1>home page variants</h1>
+    <p class="lede">
+      every variant keeps the hero, the setup section, the map, the testimonials and the closing
+      cta. what changes is the meet comma four copy, the four feature callouts, and one new
+      section that argues the product.
+    </p>
+
+    <ul>
+      {#each variants as variant}
+        <li>
+          <a href={variant.href}>
+            <span class="name">{variant.name}</span>
+            <span class="strategy">{variant.strategy}</span>
+            <span class="section">new section: {variant.section}</span>
+          </a>
+        </li>
+      {/each}
+    </ul>
+
+    <p class="foot">
+      <a class="highlight" href="/">the current home page</a>
+    </p>
+  </div>
+</section>
+
+<style>
+  section {
+    padding-block: 5rem;
+  }
+
+  .lede {
+    font-size: 1.25rem;
+    line-height: 1.3;
+    margin: 0 0 3rem;
+    max-width: 44rem;
+    opacity: 0.6;
+  }
+
+  ul {
+    display: grid;
+    gap: 1rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    border: 1px solid #000;
+    display: flex;
+    flex-flow: column;
+    gap: 0.375rem;
+    padding: 1.5rem;
+    transition: background-color 0.2s;
+  }
+
+  .name {
+    font-size: 1.5rem;
+    font-weight: 500;
+  }
+
+  .strategy {
+    opacity: 0.6;
+  }
+
+  .section {
+    color: var(--color-muted);
+    font-family: JetBrains Mono, monospace;
+    font-size: 0.8125rem;
+    letter-spacing: normal;
+  }
+
+  .foot {
+    margin-top: 3rem;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    a:hover {
+      background-color: var(--color-card-background-hover);
+    }
+  }
+</style>

src/routes/preview/home/01/+page.svelte

@@ -0,0 +1,43 @@
+<script>
+  import HomeVariant from "../_HomeVariant.svelte";
+  import Comparison from "../_Comparison.svelte";
+
+  import SteerIcon from "$lib/icons/features/steer.svg?raw";
+  import RoadIcon from "$lib/icons/features/road.svg?raw";
+  import UpdatesIcon from "$lib/icons/features/ota-updates.svg?raw";
+  import RecordingsIcon from "$lib/icons/features/recordings.svg?raw";
+
+  const features = [
+    {
+      icon: SteerIcon,
+      label: "hands off the wheel",
+      note: "a camera watches your eyes, not your grip",
+    },
+    {
+      icon: RoadIcon,
+      label: "any road, not just the highway",
+      note: "worn lines, no lines, construction, dark",
+    },
+    {
+      icon: UpdatesIcon,
+      label: "better every couple of months",
+      note: "free updates, over your own wifi",
+    },
+    {
+      icon: RecordingsIcon,
+      label: "three cameras always rolling",
+      note: "check the car from your phone, save a clip",
+    },
+  ];
+</script>
+
+<svelte:head>
+  <title>comma.ai — variant 01</title>
+</svelte:head>
+
+<HomeVariant
+  {features}
+  meetSub="openpilot replaces the lane keeping and cruise control your car came with. same buttons, completely different driver."
+>
+  <Comparison slot="after-hero" />
+</HomeVariant>

src/routes/preview/home/02/+page.svelte

@@ -0,0 +1,43 @@
+<script>
+  import HomeVariant from "../_HomeVariant.svelte";
+  import Drive from "../_Drive.svelte";
+
+  import SteerIcon from "$lib/icons/features/steer.svg?raw";
+  import RoadIcon from "$lib/icons/features/road.svg?raw";
+  import MoonIcon from "$lib/icons/features/moon.svg?raw";
+  import CruiseIcon from "$lib/icons/features/adaptive-cruise.svg?raw";
+
+  const features = [
+    {
+      icon: SteerIcon,
+      label: "hands off the wheel",
+      note: "for the whole drive, not 15 seconds at a time",
+    },
+    {
+      icon: RoadIcon,
+      label: "highways and back roads",
+      note: "it doesn't need fresh paint to keep going",
+    },
+    {
+      icon: CruiseIcon,
+      label: "stop and go traffic",
+      note: "it stops, waits, and pulls away with everyone else",
+    },
+    {
+      icon: MoonIcon,
+      label: "you get out less wrecked",
+      note: "all the small constant corrections are gone",
+    },
+  ];
+</script>
+
+<svelte:head>
+  <title>comma.ai — variant 02</title>
+</svelte:head>
+
+<HomeVariant
+  {features}
+  meetSub="openpilot does the steering and the pedals so you can just watch the road. a ten hour drive stops feeling like ten hours."
+>
+  <Drive slot="after-hero" />
+</HomeVariant>

src/routes/preview/home/03/+page.svelte

@@ -0,0 +1,43 @@
+<script>
+  import HomeVariant from "../_HomeVariant.svelte";
+  import Brain from "../_Brain.svelte";
+
+  import VisionIcon from "$lib/icons/features/360-vision.svg?raw";
+  import RoadIcon from "$lib/icons/features/road.svg?raw";
+  import SteerIcon from "$lib/icons/features/steer.svg?raw";
+  import UpdatesIcon from "$lib/icons/features/ota-updates.svg?raw";
+
+  const features = [
+    {
+      icon: RoadIcon,
+      label: "no lane lines needed",
+      note: "it reads the whole road, not two stripes",
+    },
+    {
+      icon: SteerIcon,
+      label: "hands off the wheel",
+      note: "the camera pointed at you keeps you honest",
+    },
+    {
+      icon: VisionIcon,
+      label: "three cameras",
+      note: "watching ahead, out to the sides, and you",
+    },
+    {
+      icon: UpdatesIcon,
+      label: "a smarter model every couple of months",
+      note: "free, over your own wifi",
+    },
+  ];
+</script>
+
+<svelte:head>
+  <title>comma.ai — variant 03</title>
+</svelte:head>
+
+<HomeVariant
+  {features}
+  meetSub="openpilot replaces your car's lane keeping and cruise control. it drives like a person because it learned from people."
+>
+  <Brain slot="after-hero" />
+</HomeVariant>

src/routes/preview/home/04/+page.svelte

@@ -0,0 +1,43 @@
+<script>
+  import HomeVariant from "../_HomeVariant.svelte";
+  import More from "../_More.svelte";
+
+  import SteerIcon from "$lib/icons/features/steer.svg?raw";
+  import RoadIcon from "$lib/icons/features/road.svg?raw";
+  import RecordingsIcon from "$lib/icons/features/recordings.svg?raw";
+  import ConnectivityIcon from "$lib/icons/features/connectivity.svg?raw";
+
+  const features = [
+    {
+      icon: SteerIcon,
+      label: "hands off the wheel",
+      note: "a camera watches your eyes instead",
+    },
+    {
+      icon: RoadIcon,
+      label: "back roads too",
+      note: "not just the highway, and not just in daylight",
+    },
+    {
+      icon: RecordingsIcon,
+      label: "every drive recorded",
+      note: "three cameras, saved and clippable",
+    },
+    {
+      icon: ConnectivityIcon,
+      label: "watch it live from your phone",
+      note: "and see where the car is parked",
+    },
+  ];
+</script>
+
+<svelte:head>
+  <title>comma.ai — variant 04</title>
+</svelte:head>
+
+<HomeVariant
+  {features}
+  meetSub="openpilot replaces your car's lane keeping and cruise control. then it keeps going: three cameras rolling, live from your phone, better every couple of months."
+>
+  <More slot="after-hero" />
+</HomeVariant>

src/routes/preview/home/05/+page.svelte

@@ -0,0 +1,44 @@
+<script>
+  import HomeVariant from "../_HomeVariant.svelte";
+  import Questions from "../_Questions.svelte";
+
+  import SteerIcon from "$lib/icons/features/steer.svg?raw";
+  import RoadIcon from "$lib/icons/features/road.svg?raw";
+  import CruiseIcon from "$lib/icons/features/adaptive-cruise.svg?raw";
+  import UpdatesIcon from "$lib/icons/features/ota-updates.svg?raw";
+
+  const features = [
+    {
+      icon: SteerIcon,
+      label: "hands off the wheel",
+      note: "a camera watches your eyes instead",
+    },
+    {
+      icon: RoadIcon,
+      label: "highways and back roads",
+      note: "worn lines, no lines, rain, dark",
+    },
+    {
+      icon: CruiseIcon,
+      label: "stop and go traffic",
+      note: "it stops and pulls away with everyone else",
+    },
+    {
+      icon: UpdatesIcon,
+      label: "free updates forever",
+      note: "a new version every couple of months",
+    },
+  ];
+</script>
+
+<svelte:head>
+  <title>comma.ai — variant 05</title>
+</svelte:head>
+
+<HomeVariant
+  {features}
+  buyNote="$999 once. no subscription, ever."
+  meetSub="openpilot replaces your car's lane keeping and cruise control. plugs in behind the mirror in 15 minutes."
+>
+  <Questions slot="before-proof" />
+</HomeVariant>