DesignBench

Build a landing page.

CONTEXT
Orrery Systems is a fictional consultancy that designs AI systems for other companies: agent architectures, evaluation harnesses, retrieval pipelines, and the operational plumbing around them. Nine people, based in Lisbon, working remotely. Their line is "We design the systems behind the systems."

TASK
Write the complete code for a one-page marketing site for Orrery Systems.

OUTPUT CONTRACT
- Output ONE file of code and nothing else. No explanation, no notes, no commentary before it or after it.
- Do not wrap the code in markdown fences.
- The file is `app/page.tsx` in a Next.js App Router project. It must be a self-contained, default-exported React function component written in TypeScript. Any helper components, data arrays, and types live in the same file.

TECHNICAL RULES
- Tailwind CSS v4 utility classes only. No CSS files, no `<style>` tags, no inline style objects unless a utility genuinely cannot express the thing.
- No imports except from `react` and `next/*`. No icon packs, no animation libraries, no webfonts from a CDN, no images from a URL. If you want an icon or a graphic, hand-write inline SVG.
- It must work as a server component: no "use client", no hooks, no event handlers. Any interactivity comes from plain HTML and CSS (`<details>`, `:hover`, `:focus-visible`, anchor links).
- Responsive from 360px to 1536px. Build the small screen first, then refine with `sm:` / `md:` / `lg:`.
- Accessible: exactly one `<h1>`, correct heading order, real landmarks (`header`, `nav`, `main`, `footer`), text that meets WCAG AA contrast on its own background, visible focus styles, labels on every form control, and `aria-hidden="true"` on decorative SVG.
- Correct in light and dark mode using Tailwind's `dark:` variants.

CONTENT RULES
- Write real, specific copy in the voice of a small senior consultancy. No lorem ipsum, no filler, no placeholder text of any kind.
- Invent concrete details: named services, named (fictional) clients, named people with real-sounding roles.
- Keep every paragraph under 45 words.

REQUIRED SECTIONS, in this order
1. Sticky header: wordmark, four anchor links, one call-to-action.
2. Hero: the h1, a one-sentence subhead, two buttons, and one piece of proof (a stat row, or a client strip built from inline SVG or set type).
3. Services: four offerings, each a title plus two sentences.
4. How we work: a numbered process of four steps.
5. Case studies: three cards, each with the client, the problem, what was built, and one measurable outcome.
6. Team: four people with name, role, and one line each.
7. FAQ: five question-and-answer pairs.
8. Closing call to action with a contact form (name, email, message) that is fully labelled and needs no JavaScript.
9. Footer: nav links, a fictional Lisbon address, and a copyright line.

QUALITY BAR
Aim for the visual quality of a real agency site: a deliberate type scale, generous spacing, a restrained palette you actually commit to, and at least one memorable layout idea instead of nine identical stacked bands. It will be judged side by side with other studios' attempts at this same brief.

Begin the file now. Output code only.

Brief v1 · fingerprint 19506ecf082b860e