One Command
StableA developer-first home page: one command to copy, a terminal that types out the scan, a sample report and pricing.
Home concept 02, self-serve and light-first, for individual developers and small teams. A split hero with the command, a prompt to paste to your coding agent and a terminal that plays the scan line by line; what the scan reads; a sample report table with keep, cut, merge or fix verdicts; tabs for terminal, agent or CI; local against team mode; three pricing tiers; an FAQ.
One Command home page
import { HomeOneCommand } from '@rchursin/home'
/** * Home concept 02, developer-first and self-serve: one command, a terminal that types out the * scan, a sample report, a comparison table, pricing and an FAQ. Complete page: skip link, * header, <main> with one <h1>, footer. */export default function OneCommandPage() { return <HomeOneCommand />}Usage
import { HomeOneCommand } from '@rchursin/home'<HomeOneCommand />Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | The first stop is “Skip to content”, then the header’s logo, links and button, then the page in reading order. |
| Enter | On “Skip to content”: jump past the header to the page’s <main>. |
| EnterSpace | On an FAQ question: open or close its answer. Opening one closes the one that was open. |
| EnterSpace | Below 768 pixels, on the menu button: open or close the header’s links. |
| Left arrowRight arrow | In “Run it your way”: the previous or next tab (it wraps). |
| HomeEnd | In those tabs: the first or last tab. |
| EnterSpace | On a copy button: copy the command or the agent prompt; the button says “Copied”. |
- One <h1>, a skip link to <main id="main">, a <header> with a navigation named “Main”, and a <footer>. Every section is labelled by its own heading.
- Arrivals (lux-reveal) start hidden only when motion is allowed and the script has run; with reduced motion or before hydration, everything is simply there.
- Numbers from a workspace are marked “Sample data” on the page. Bracketed text such as [YOUR PRICE] or [CONFIRM BEFORE LAUNCH] is a placeholder to replace before launch.
- The install options are tabs with one Tab stop and arrow keys; the CI example is a focusable <pre>, so it can be scrolled from the keyboard.
- The report and the comparison are real tables with row and column headers. The report sits in a focusable region named “Sample report”, so it can scroll sideways on a phone.
Guidelines
Do
- Keep the command and the agent prompt the first two things on the page.
- Say what runs locally and what is sent, as the hero eyebrow does.
- Fill in the Team price before launch; the tier shows [YOUR PRICE] until then.
Don’t
- Don’t publish it with the sample numbers or bracketed placeholders still in.
- Don’t add a second <h1>; every section below the hero uses <h2>.
- Don’t force a theme on it: it is drawn for both and follows the page’s dark class.
In use
Related
- TerminalA dark terminal window with sample scan output: usage bars, a context cost and a verdict per item, printed line by line.
- Command lineA one-line shell command with a $ prompt and a Copy command button.
- Copy buttonCopy text to the clipboard with one press: a pearl button that says “Copied”, a quiet one for code, and the helper under both.
- Verdict badgeKeep, fix, merge or cut: a mono badge where each verdict has its own shape, and the word is always there.
- FAQQuestions and answers on native <details>: one answer open at a time, with no JavaScript required.
- Site headerThe home pages’ sticky header in three styles: a full bar, a floating glass pill and a minimal mono row.
Source
The component’s own files, exactly as they run on this site.
/** * Home 02 · One Command — developer-first and self-serve: first report in a minute, no sales call. * For individual developers and small teams. Default theme: light. * * Mix: Tailwind Plus "split with code example" hero, pricing (three tiers) and simple footer · * shadcn/ui-style tabs, table and buttons · Magic UI Terminal (line-by-line reveal) + * Grid Pattern · "Paste to your agent" onboarding (2026 pattern from Clerk, Vercel, PostHog). */import { cx } from "../../components/cx"import { useLuxe } from "../../components/motion"import { SiteFooter, SiteHeader, SkipLink } from "../Chrome"import { brand, ledger, pricing } from "../content"import { formatCost } from "../DashboardMock"import { Faq } from "../Faq"import { Tabs } from "../Tabs"import { Terminal } from "../Terminal"import { ButtonLink, CommandLine, Container,