Launch page design

website/src/components/features/launch/CardsSection.astro

@@ -0,0 +1,72 @@
+---
+import { createTranslator, getLocaleFromUrl } from "@/utils/i18n";
+
+const locale = getLocaleFromUrl(Astro.url.pathname);
+const t = await createTranslator(locale);
+
+const CARDS = ["quantum_secure", "encrypted", "sound_money"] as const;
+---
+
+<div class="launch-cards">
+  {
+    CARDS.map((card) => (
+      <div class="launch-card">
+        <h3 class="launch-card-title">{t(`launch.cards.${card}.title`)}</h3>
+        <p class="launch-card-body">{t(`launch.cards.${card}.body`)}</p>
+      </div>
+    ))
+  }
+</div>
+
+<style>
+  .launch-cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .launch-card {
+    padding: 56px 40px;
+    border-left: 1px solid var(--color-content-10);
+  }
+
+  .launch-card:first-child {
+    border-left: none;
+  }
+
+  .launch-card-title {
+    margin: 0 0 16px;
+    font-size: 24px;
+    font-weight: 400;
+    letter-spacing: -0.015em;
+  }
+
+  .launch-card-body {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.45;
+    color: var(--color-content-70);
+  }
+
+  /* Stacks earlier than the site's 768px breakpoint: three columns at
+     ~800px leave each card a ~135px measure and wrap the titles. */
+  @media (max-width: 900px) {
+    .launch-cards {
+      grid-template-columns: 1fr;
+    }
+
+    .launch-card {
+      border-left: none;
+      border-top: 1px solid var(--color-content-10);
+    }
+
+    .launch-card:first-child {
+      border-top: none;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .launch-card {
+      padding: 36px 28px;
+    }
+  }
+</style>

website/src/components/features/launch/HeroSection.astro

@@ -1,49 +1,48 @@
 ---
-import LogoLong from "@/assets/brand/logo-long.svg";
+import SignupForm from "./SignupForm.astro";
 import { createTranslator, getLocaleFromUrl } from "@/utils/i18n";
 
 const locale = getLocaleFromUrl(Astro.url.pathname);
 const t = await createTranslator(locale);
 ---
 
-<div class="launch-hero">
-  <LogoLong class="launch-logo" />
-  <span class="launch-eyebrow">{t("launch.hero.eyebrow")}</span>
-</div>
+<section class="launch-hero">
+  {/* The key predates the redesign, when this line was the eyebrow. */}
+  <h1 class="launch-hero-title">{t("launch.hero.eyebrow")}</h1>
+  <p class="launch-hero-sub">{t("launch.hero.sub")}</p>
+  <SignupForm id="launch-hero" note={t("launch.signup.micro")} />
+</section>
 
 <style>
   .launch-hero {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--launch-space-tight);
+    padding: 104px 24px 128px;
+    text-align: center;
   }
 
-  .launch-logo {
-    display: block;
-    height: 28px;
-    width: auto;
+  .launch-hero-title {
+    margin: 0 0 24px;
+    font-size: clamp(34px, 3.6vw, 54px);
+    font-weight: 400;
+    letter-spacing: -0.025em;
+    line-height: 1.05;
   }
 
-  .launch-eyebrow {
-    font-family: "Geist Mono", monospace;
-    font-size: 12px;
-    font-weight: 400;
-    color: rgba(232, 230, 224, 0.45);
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    text-align: center;
+  .launch-hero-sub {
+    max-width: 44ch;
+    margin: 0 auto 44px;
+    font-size: 18px;
     line-height: 1.5;
+    color: var(--color-content-70);
   }
 
   @media (max-width: 768px) {
-    .launch-logo {
-      height: 22px;
+    .launch-hero {
+      padding: 72px 24px 88px;
     }
 
-    .launch-eyebrow {
-      font-size: 11px;
-      letter-spacing: 0.12em;
+    .launch-hero-sub {
+      margin-bottom: 32px;
+      font-size: 15px;
     }
   }
 </style>

website/src/components/features/launch/LaunchField.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Fixed Chladni field behind the /launch frame. Driven by
+ * scripts/launch/field.ts, which is independent of Home's hero field.
+ */
+---
+
+<div class="launch-field" aria-hidden="true">
+  <pre id="launch-field" class="launch-field-glyphs"></pre>
+</div>
+
+<style>
+  .launch-field {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .launch-field-glyphs {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.05;
+    letter-spacing: 0.06em;
+    white-space: pre;
+    color: var(--color-flare);
+    opacity: 0.3;
+    will-change: transform;
+  }
+
+  @media (max-width: 768px) {
+    .launch-field-glyphs {
+      opacity: 0.13;
+    }
+  }
+</style>
+
+<script>
+  import { initLaunchField } from "@/scripts/launch/field";
+
+  const glyphs = document.getElementById("launch-field");
+  if (glyphs) initLaunchField(glyphs);
+</script>