Marketing
A landing page in sections, from the navbar to the footer.
How do I announce something above the site?
An announcement bar for a release, an offer or a maintenance window, each with its own glyph, colour and leading word, with a link, an optional deadline and a dismiss button; sits above the navigation or stays pinned with sticky.
A BentoGrid of product proof where each tile shows the thing: a live AreaChart, a Meter, a Sparkline, status badges.
What happens on the call, and when can we do it?
Taken slots stay visible but cannot be picked; booking ends in a confirmation that repeats the slot and the address.
The closing ask: one primary action, one quieter alternative and what trying it costs.
What does the first call look like?
A developer hero that shows the code before it explains it: the pitch and a package-manager install chip on one side, curl / TypeScript / Python tabs over a highlighted, copyable CodeBlock on the other, and three reasons a developer can verify underneath — typed SDKs, a written uptime promise, a sandbox that fails on purpose. Every string, snippet and fact is a prop, so the same layout sells any API.
Why this instead of what we use today?
Us against the alternatives, honestly: a row per criterion with a yes, partly or no mark and a sentence of verdict per column, including the rows a spreadsheet wins, and a last row that says who each option is best for. A table when the container is wide, one card per criterion when it is not.
A short validated contact form with a topic Select, a personal confirmation and the other ways to reach the team.
Which cookies may we set?
Cookie consent that treats the visitor as an adult: two sentences on what the cookies do, then Accept all, Reject non-essential and Manage side by side, none hidden or greyed. Manage opens a dialog with one switch per category, Essential visibly locked on and a running count of what is on; the block reports the decision through onDecision and hides itself. Default and compact variants, fixed to the viewport or sticky in its container.
What do I do next, and is anyone else doing it?
The closing ask as a full-width band on the primary plate: a headline, one thing to do, one quieter alternative, and a proof card with a live number and its two-week trend on a sparkline. The band’s gradient comes from the primary tokens, so it re-tints with every theme.
How do I show a feature rather than describe it?
Three zig-zag feature rows, copy on one side and the feature on the other: a runs table with status badges, a run timeline and a card of sparklines — the product, not a picture of it. Rows stack below the 2xl container width.
How do I let visitors explore features one at a time?
A tabbed feature explorer: features down the left with a glyph and a one-liner, the chosen one rendered live on the right — a work board, an assistant conversation and metric tiles. Arrow keys move through the list; it stacks above the preview when narrow.
What does the product actually look like?
A split hero: the claim, two calls to action and a row of trust facts beside the product itself — KPI tiles, a live area chart and a service status list inside a browser frame, built from real components rather than a screenshot.
How do I capture an email right in the hero?
A centred hero with the sign-up inline: an email field that validates on submit, a pending state on the button and a confirmation naming the address, then three benefits and the people already in — stacked avatars, a count and a rating.
Does it work with what we already use?
The integrations wall: a search box and category toggles with counts that filter a grid of sixteen tiles, each with a glyph, the product, one line on what it does and a Native or Via API badge. The match count is announced as it changes, and an empty result says what to try and where to ask for a connector.
Who else uses this?
A logo cloud of text wordmarks in distinct typographic voices, muted until hovered — as a wrapping grid or a looping marquee that pauses on hover and focus and stands still under reduced motion, with an optional stat line.
Site navigation: links inline when there is room and in a Sheet when there is not, aria-current on the active route, container-query layout.
One field, a promise about frequency, validation and a confirmation that names the address.
Three plans named for who they are for, a billing toggle that recomputes every price, locale-aware currency and a featured plan marked in words.
Which plan has the thing I need?
The full feature matrix: four plans with price and a button in a header row that stays in view while the feature groups (Core, Collaboration, Security, Support) scroll past, cells that say included, not included or the limit in words, and a billing toggle that recomputes every price. The popular plan is named as such and framed; below @3xl the rows stack into one card per plan.
How does it work, step by step?
How it works in four numbered steps along a rail that fades at both ends; each step has a glyph, a title, a sentence or two and a chip naming what the visitor sees on screen. A row when wide, a column when not.
How big is this, really?
Four very large numbers with unit, one line of meaning and a twelve-month sparkline each, tied together by a headline sentence. Trends that improved or worsened say so with a glyph and a word, never colour alone.
What did one customer actually say?
One customer at a time at full size: the quote, who said it, the company wordmark, their rating and the number the quote is about. Previous, next, the dots and the arrow keys move between quotes; the strip of wordmarks jumps straight to a customer. Nothing advances on its own, and the quote is announced politely when it changes.
Will security sign this off?
Compliance and security stated plainly: the standards as text badges with a shield rather than borrowed certifier logos, four facts about how data is handled with the uptime figure on a real Meter, and a TrustStrip of proofs each linking to the document behind it, with the trust centre one click away.
How do I get in early, and who else is waiting?
A launch waitlist: the pitch, one email field that validates and shows a pending state, and on success the place in line with a referral link and a copy button (clipboard behind a try/catch, with a fallback message). The faces and count show who is already waiting; three dated milestones say what has shipped and what is coming.