62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
// 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. 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 (
|
|
<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>
|
|
);
|
|
}
|