From 0b302ea1e1ef1a63284722f11e848bc2e739bf61 Mon Sep 17 00:00:00 2001
From: Ben Stull <ben.stull@wiggleverse.org>
Date: Wed, 10 Jun 2026 22:39:57 -0700
Subject: [PATCH] =?UTF-8?q?feat(slice-3):=20Landing=20re-skinned=20to=20th?=
 =?UTF-8?q?e=20Claude=20Design=20export=20(=C2=A75.1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/screens/Landing.tsx | 66 ++++++++++++++++++++++++--------
 1 file changed, 50 insertions(+), 16 deletions(-)

diff --git a/frontend/src/screens/Landing.tsx b/frontend/src/screens/Landing.tsx
index f1b54e5..7e5ca5d 100644
--- a/frontend/src/screens/Landing.tsx
+++ b/frontend/src/screens/Landing.tsx
@@ -1,27 +1,61 @@
 // Landing (SD-0001 §5.1) — a Visitor learns what ecomm is and picks a door. Honest voice,
 // no trial/pricing/fee (corpus 14.01.0011). Both doors open the same sign-in flow (§5.2);
-// they differ only in framing.
+// they differ only in framing. Visuals per the ui/designs export (hf-landing, Direction A).
+import { Eyebrow, Footer, PrimaryButton, Screen, TopBar, Wordmark } from "../ui/kit";
+
 interface Props {
   onGetStarted: () => void;
   onLogIn: () => void;
 }
 
+const PROMISES: Array<[string, string]> = [
+  ["No trial clock", "Your storefront never expires or locks."],
+  ["No plan wall", "We take only what it takes to run."],
+  ["Your data, yours", "Nothing collected you didn't agree to give."],
+];
+
 export default function Landing({ onGetStarted, onLogIn }: Props) {
   return (
-    <main>
-      <header>
-        <strong>ecomm</strong>
-        <button type="button" onClick={onLogIn}>
-          Log in
-        </button>
-      </header>
-      <section>
-        <h1>Honest commerce. Your storefront is yours.</h1>
-        <p>Sell online on a platform that treats you straight — no dark patterns, no lock-in.</p>
-        <button type="button" onClick={onGetStarted}>
-          Create your storefront
-        </button>
-      </section>
-    </main>
+    <Screen horizon>
+      <TopBar
+        left={<Wordmark />}
+        right={
+          <button type="button" className="lk lk--nav" onClick={onLogIn}>
+            Log in
+          </button>
+        }
+      />
+      <main className="screen__main">
+        <div className="hero">
+          <Eyebrow>One storefront, fully yours</Eyebrow>
+          <h1>
+            Sell online,
+            <br />
+            <em>honestly.</em>
+          </h1>
+          <p className="hero__lead">
+            Claim the one storefront that's yours on a platform that takes only what it takes
+            to run — no trial countdown, no plan wall, no data you didn't agree to give.
+          </p>
+          <div className="hero__actions">
+            <PrimaryButton type="button" onClick={onGetStarted}>
+              Create your storefront →
+            </PrimaryButton>
+            <button type="button" className="lk lk--mute" onClick={onLogIn}>
+              Already selling with us? <span style={{ color: "var(--wv-lilac)" }}>Log in</span>
+            </button>
+          </div>
+          <div className="promises">
+            {PROMISES.map(([title, copy]) => (
+              <div key={title}>
+                <div className="promises__title">{title}</div>
+                <p>{copy}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+      <Footer />
+    </Screen>
   );
 }