Page sections

1import { Terminal } from '@rchursin/home/Terminal'2
3/** Sample output of a scan, always on a dark panel. Wide lines scroll inside the window, not the page. */4export default function TerminalScan() {5  return <Terminal className="w-full max-w-2xl" />6}

1import { Receipt } from '@rchursin/home/Receipt'2
3/** One task's tokens and cost, printed on paper. The paper stays white in both themes. */4export default function ReceiptTask() {5  return <Receipt className="w-full max-w-sm" />6}

1import { DashboardMock } from '@rchursin/home/DashboardMock'2
3/**4 * A still picture of the app on sample data. It lays itself out by its own width, not the5 * window's: one column when narrow, a sidebar from 656 pixels, and skill runs beside the ledger6 * from 976 pixels. Resize the window to watch it change.7 */8export default function DashboardMockOverview() {9  return <DashboardMock className="w-full" />10}

1import { CutCalculator } from '@rchursin/home/CutCalculator'2
3/** Move either slider: the totals update as you go and are read out politely. */4export default function CutCalculatorEstimate() {5  return <CutCalculator className="w-full" />6}

1import { RunWall } from '@rchursin/home/RunWall'2
3/**4 * Twelve agents over thirty days, on sample data. The highlight that sweeps across the days5 * can be paused, and never moves when reduced motion is on.6 */7export default function RunWallThirtyDays() {8  return <RunWall className="w-full" />9}

1import { Faq } from '@rchursin/home/Faq'2
3const questions = [4  {5    q: 'Is the code on these pages the code that runs?',6    a: 'Yes. Each example’s code view is the example file itself, read as text by the bundler, so the preview and the code can’t drift apart.',7  },8  {9    q: 'Does this accordion need JavaScript?',10    a: 'No. It is the browser’s own <details> element, so it opens, closes and works with a keyboard and a screen reader before any script loads.',11  },12  {13    q: 'Can more than one answer be open at once?',14    a: 'Not in current browsers. The answers share a group name, so opening one closes the other. Older browsers ignore the group and let several stay open.',15  },16  {17    q: 'What is the Library built with?',18    a: 'React 19, TypeScript and Tailwind CSS v4. React and React DOM are its only runtime dependencies.',19  },20]21
22/** Pass your own questions with `items`. Leave it out and you get the sample questions from home/content.ts. */23export default function FaqLibrary() {24  return <Faq items={questions} className="w-full max-w-2xl" />25}

1import { CommandLine } from '@rchursin/home/ui'2
3/**4 * The $ is drawn, not copied: each button puts only its command on the clipboard. With two on5 * one page, each button is named for its own command.6 */7export default function CommandLineBasic() {8  return (9    <div className="flex w-full max-w-md flex-col gap-3">10      <CommandLine command="npm install" label="Copy install command" />11      <CommandLine command="npm run dev" label="Copy dev command" />12    </div>13  )14}