# Rebuild Prompt: "Atlas" AI Agent Workflow Landing Page Paste everything below into an LLM to regenerate this exact single-page marketing site as `index.html` + `styles.css` + `app.js`. > All images are hosted on Cloudflare R2 — the exact URLs are baked into Section 3 below, so this prompt is ready to paste as-is. --- ## 1. Overview Build a single-page marketing site for a fictional B2B SaaS product called **Atlas** — "10x your AI agent workflow." It's a workflow-automation tool that lets teams build, run, and monitor AI agent workflows (triggers → agents → branches → human approvals → actions), similar in spirit to Zapier/n8n but agent-native. Visual style: clean, minimal, high-contrast black/white/gray editorial SaaS design (like Linear/Vercel/Arc marketing pages). Lots of whitespace, thin 1px hairline borders, no heavy shadows, sharp/near-sharp corners (3–8px radius), no bright accent colors anywhere — pure grayscale + pure black CTAs. ## 2. Global setup - Plain HTML + CSS + a tiny vanilla-JS file. No frameworks, no build step. - Fonts (Google Fonts): **DM Sans** (weights 400/500/700, used for all body/UI text) and **DM Serif Display** (used only for a few large decorative numerals/quote marks/headline moments). Load via: ```html ``` - **`.page { overflow-x: hidden; }` — the X-axis only, never the `overflow: hidden` shorthand or `overflow-y: hidden`.** Several elements on this page deliberately bleed outside `.page`'s own box using negative offsets — most notably the hero grid texture (Section 4.2, `top: -268px`) but also others — and rely on the vertical axis being unclipped to render their full extent. If `.page` (or `html`/`body`) clips the Y axis too, the portion of any bleeding element that lands above `.page`'s own top edge is silently cut off, which is exactly what makes the hero grid texture look like it barely covers any of the hero section instead of fading gracefully across it. This is a one-word difference (`overflow: hidden` vs `overflow-x: hidden`) that is easy to introduce by "simplifying" the rule, and it silently breaks multiple unrelated-looking things at once — treat it as a hard constraint, not a stylistic choice. - Design is authored as a **1440px desktop composition** (`.page { width: 100%; max-width: 1440px; margin: 0 auto; }`) — every element still carries its exact desktop pixel values as inline styles (mimicking a Figma/design-tool export), but a layer of CSS custom properties and `clamp()` formulas continuously reduces spacing and type size as the viewport narrows, so the layout scales smoothly rather than snapping between fixed states. Only a few structural changes (nav collapsing, grid column counts, the fixed-pixel dashboard mockup) still use hard breakpoints, because those can't be done with continuous scaling. See Section 8 for the full fluid-token system and the remaining breakpoints. - Color tokens (CSS custom properties on `:root`): ```css --ink: rgb(11, 11, 11); /* primary text / black buttons */ --ink-soft: rgb(58, 58, 58); /* secondary text */ --gray: rgb(90, 90, 90); /* body copy */ --gray-light: rgb(138, 138, 138); /* tertiary/meta text */ --line: rgb(234, 234, 234); /* borders */ --line-soft: rgb(243, 243, 243); --line-mid: rgb(227, 227, 227); --bg: rgb(249, 249, 249); /* page background, off-white */ --white: rgb(255, 255, 255); ``` - `html, body { margin:0; background: var(--bg); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; }` - `* { box-sizing: border-box; }`, `a { color: var(--ink); text-decoration:none; }` - Respect `prefers-reduced-motion: reduce` by disabling all animations. ## 3. Assets needed Use these exact hosted URLs for each asset (do not substitute placeholders or generate replacements — these are live files). **Reference every one of them by its live URL directly in `src`/`url(...)` — do not download, save, copy, or otherwise materialize any of them as a local file, and do not create a local `assets/`, `images/`, `public/`, or similar folder for this project at all.** There is nothing to put in it: every image below is already hosted, and every icon elsewhere in this prompt is either inline SVG markup or a reference to an external icon library (Section 9) — none of it is a local file. If your environment's workflow defaults to fetching and vendoring remote images into a local folder, don't do that here; leave the URLs as remote references in the markup/CSS exactly as given. 1. **Logomark** (`logomark.svg`) — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/6923e7c1-dbca-4884-bf2f-e4f0cc594e23-logomark.svg` — small abstract geometric mark, used at 24×24px next to the wordmark "atlas." (lowercase, with trailing period, 500 weight). 2. **Hero background** (`hero-bg.png`) — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/f1fa1ca2-e1fb-4764-afb4-daa2019db319-hero-bg.png` — a large photographic/abstract background image (dark/neutral tones) used as `background: cover` behind the "product mockup" hero panel (1440×567-ish area, only visible as a base layer behind an app screenshot mockup that's built with real HTML/CSS on top — see Section 5). 3. **Hero grid texture** (`hero-grid.svg`) — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/fbebbb94-31dc-4d55-8155-191d693f094b-hero-grid.svg` — a faint full-bleed grid/graph-paper pattern, opacity ~0.025, positioned behind the hero text as texture. 4. **Press logos** — simple monochrome wordmark logos, ~21–27px tall, evenly spaced in a row: - Forbes — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/1c402684-4625-408c-8e29-514262060495-logo-forbes.png` - TechCrunch — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/3a7a07dc-1cb6-44b6-a806-1164fc2dacf1-logo-techcrunch.png` - Yahoo Finance — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/07a2ce9e-0811-40df-8a9e-e802f6daef71-logo-yahoo-finance.png` - CNN — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/0ec290b7-e296-499f-af80-6bd07628d1e1-logo-cnn.png` - Inc. — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/59fd6b1e-828a-434e-8435-a495ed022de6-logo-inc.png` 5. **Testimonial portrait** (`testimonial-portrait.png`) — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/2f0d6328-f55d-4c49-a0f4-582c9bf4f9b9-testimonial-portrait.png` — a professional headshot/lifestyle photo, used full-bleed inside one testimonial card (person is one of the quoted reviewers). 6. **Footer background** (`footer.png`) — `https://pub-42b45c3a5a704cf880dfeb45a9901c30.r2.dev/34c1d45c-9170-4c89-9331-4656aa8902f8-footer.png` — a large moody background image (dark) used full-bleed behind the final CTA band ("Put your busywork on autopilot"). All other visuals (app mockup screens, icons, diagrams) are built with inline SVG + HTML/CSS, not images — see below. ## 4. Page structure (top to bottom) 1. Sticky header 2. Hero (headline + CTA) 3. Hero product mockup panel (fake app screenshot built in HTML) 4. Press logo row 5. Features section with 4 interactive tabs 6. "About/How it works" bento grid (5 cards) 7. Reviews/testimonials (3 cards) 8. Final CTA band (dark photo background) 9. Footer with giant watermark wordmark Full copy and exact structure for each section below. --- ### 4.1 Header (sticky, `position: sticky; top:0; z-index:30`) - Height 79px, white background, bottom border 1px `var(--line)`, flex row, `justify-content: space-between`, horizontal padding 85px. - Left: logomark (24×24) + "atlas." wordmark, 23px/500 weight, `--ink`. - Center-left nav (margin-left:60px, margin-right:auto, gap 44px, 14px links, color `--ink-soft`, hover → `--gray`): **Features, Reviews, Pricing, About, FAQ** (anchor links to `#features #reviews #pricing #about #faq`). - Right: black pill button "Get Started for Free" (height 44px, padding 0 26px, radius 3px, 16px/500, white text on `--ink` background, hover background `rgb(38,38,38)`) with the 16×16 arrow-up-right SVG icon (exact path given in Section 9's icon note, `stroke="rgb(255,255,255)"`) after the label — not a Unicode arrow character. ### 4.2 Hero section - `padding: 56px 85px 0; text-align:center; position:relative;` - Background texture, exact positioning (do not substitute `inset: 0; width: 100%; height: 100%` — that stretches the pattern to fit only the hero section's own (much shorter) height, which visibly distorts and over-emphasizes it): the `hero-grid.svg` image is `position: absolute; left: -85px; top: -268px; width: calc(100% + 170px); height: 750px; opacity: 0.025; pointer-events: none;` — i.e. it's a fixed 750px-tall region that starts 268px *above* the hero section's own top edge and bleeds 85px past each side, deliberately not scaled to the section's actual content height. Directly on top of it, at the *same* `left: -85px; top: -268px; width: calc(100% + 170px); height: 750px;` box, sits a fade-out overlay `div` with `background: linear-gradient(180deg, rgba(249,249,249,0.1) 0%, rgba(249,249,249,0.55) 58%, rgb(249,249,249) 100%); pointer-events: none;` — this is what makes the already-faint (2.5% opacity) grid pattern fade to fully invisible by the bottom of its 750px box, so in practice the grid only reads as visible texture in a band near the very top of the hero and is completely gone well before the product mockup section begins. Both the opacity and the fade gradient are load-bearing — a build missing either one will show the grid pattern as noticeably more visible, and visible for much longer down the page, than the source. - Badge/pill link above headline: "Not YC backed yet, our story" — white pill, inset 1px border `rgb(229,229,229)`, gray text, the same 14×14 arrow-up-right SVG icon as elsewhere (`stroke="rgb(90,90,90)"`, exact path in Section 9), links to `#about`. - H1 (34px margin-top, 75px/500, line-height 72px, color `--ink`): **"10x your AI agent workflow"** - Subhead paragraph (max-width 560px, 18px/24px, `--gray`): **"Build, run, and monitor AI agent workflows for your team. Connect your tools once — let agents handle the rest."** - Two CTA buttons row (gap 16px, margin-top 30px): - Primary black button, 226×48px, radius 3px, 18px/500, white on black: **"Get Started for Free"** - Secondary outline button, 182×48px, radius 3px, border 1px `--ink`, black text, hover bg `rgba(0,0,0,0.04)`, the 14×14 filled play-triangle SVG icon (exact path in Section 9, `fill="rgb(11,11,11)"`) + **"Watch Demo"** (links out to YouTube). ### 4.3 Hero product mockup panel - Container (`.hero-mock-section`): margin `100px 85px 0`, height 567px, radius 8px, overflow hidden, background `rgb(243,243,243)`, with `hero-bg.png` as a cover background layer filling it, `position: relative` (it is the positioning context for the card inside it). - Inside, an inset "browser window" card (`.hero-mock-inner`): 930×505px, `position: absolute` (**not** `position: relative`), `left: 170px; top: 62px;`, white background, radius 12px on top corners only, subtle white ring shadow (`0 0 0 10px rgba(255,255,255,0.5)`), flex column, overflow hidden. **The bottom-alignment invariant:** `62 (top offset) + 505 (card height) = 567`, exactly equal to the container's own height — the card's bottom edge must land flush against the container's bottom edge with zero gap, so the only visible reveal of the `hero-bg.png` background is a 62px strip above the card; there must be no strip of visible background below the card. `position: absolute` is required for this — `position: relative` does not reliably anchor to the container's bottom this way once any responsive override touches `top`/`margin` (see the ≤1310px breakpoint note in Section 8, which depends on this being absolute). This is a fake screenshot of the Atlas app itself: - **Top bar** (48px tall, border-bottom, padding 0 18px): 3 small gray traffic-light dots, "Draft · edited 2m ago" meta text, then on the right a "Live" status pill with a pulsing black dot (CSS animation, 4.8s loop) and a black "Run" button. - **Left sidebar** (186px wide, border-right, padding 16px 14px, 3 stacked groups each with an uppercase 11px gray label and 3 rows of icon+label at 13px). Every icon here is 15×15, `viewBox="0 0 24 24"`, `stroke="rgb(90,90,90)"`, `stroke-width="1.6"`, round caps/joins, `fill="none"`. Reproduce these exact paths: - **Triggers**: - Inbound ticket — `` - Schedule — `` - Webhook — `` - **Agents**: - Classifier — `` (same double-sparkle glyph as the "Autonomous Agents" tab icon in Section 4.5) - Writer — `` (pen/pencil) - Researcher — `` (magnifying glass) - **Actions**: - Send to Slack — `` (paper airplane) - Create issue — `` (plus inside a rounded square) - Ask a human — `` (person/avatar) - **Center canvas** (flex:1, dotted graph-paper background `radial-gradient(rgb(227,227,227) 1px, transparent 1px)` at 18×18px, plus animated dashed connector SVG lines): six small white "node" cards (rounded 8px, 186px wide, subtle border/shadow), each `position: absolute` at its own exact `left`/`top` pixel coordinate below — **do not** lay these out with CSS grid/flow auto-placement (e.g. a generic 2-column layout); the branching shape only reads correctly at these exact coordinates: 1. Trigger — "New support ticket" — `left: 22px; top: 26px;` — icon: `` (ticket outline only, no internal divider lines) 2. Agent — "Classify intent" — `left: 22px; top: 120px;` — icon: `` (single sparkle only, no small second sparkle) 3. Branch — "Priority is P1?" — `left: 22px; top: 214px;` — icon: `` (git-branch glyph) 4. Agent — "Draft the reply" — `left: 302px; top: 214px;` — same single-sparkle icon as node 2 5. Approval — "Ask Maya to confirm" — `left: 302px; top: 316px;` — icon: `` (shield with a checkmark) 6. Action — "Page on-call in Slack" — `left: 88px; top: 316px;` — icon: `` (paper airplane outline only — single path, no second stroke line, unlike the sidebar's "Send to Slack" icon) The connector lines are a **single literal inline SVG**, absolutely positioned at `left: 0; top: 0;` behind the node cards — not a generic "dashed lines between boxes" left to interpretation, since arbitrary dashed lines won't actually terminate at the node edges above. Use exactly: ```svg ``` These 5 line segments are hand-fitted to connect exactly to the 6 node coordinates above (e.g. the first segment `M115 88 L115 120` runs from node 1's bottom edge, x-centered on its left column, down to node 2's top edge) — if the node positions above are reproduced exactly, these lines will terminate correctly without further adjustment. - **Right inspector panel** (210px wide, border-left, padding 16px): label "Draft the reply", a "Model" field showing a bordered pill "Claude Sonnet 4.5", a "Tools" field with 3 small gray chip tags (Zendesk, Docs, Postgres), and a stats block: "Last 7 days" → big number **"1,284 runs"** (DM Serif Display, 21px→ actually the label is 12px, number 21px/500) and caption "99.2% completed without a human". ### 4.4 Press logo row - `margin: 50px 85px 0; height:38px; display:flex; justify-content:space-between; align-items:center;` - 5 logos in a line: Forbes (23px h), TechCrunch (21px h), Yahoo Finance (27px h), CNN (27px h), Inc. (23px h). Grayscale/monochrome wordmarks, evenly spaced with `justify-content:space-between`. ### 4.5 Features section (`#features`) - `margin: 130px 85px 0;` - Centered heading (55px/500, line-height 54px): **"Built for high performance"** - Centered subhead (max-width 420px, 18px/24px, gray): **"Every workflow runs on infrastructure designed for high-frequency automation."** - **Tab bar** (flex row, margin-top 54px, background `rgb(243,243,243)`, rounded top 8px): 4 tabs, each `flex:1`, 62px tall, icon (19×19, `viewBox="0 0 24 24"`, `stroke="currentColor"`, `stroke-width="1.6"`, round caps/joins) + label, 18px text, inactive = gray/400 weight, active = white background + rounded top corners + black/500 weight text. **Border, exactly:** `.tab-btn.is-active { box-shadow: inset 1px 1px 0 rgb(227,227,227), inset -1px 0 0 rgb(227,227,227); }` — a `box-shadow`, not a `border` property, and in `rgb(227,227,227)` (a very light gray, almost the same tone as the tab's own white background), never in `var(--ink)`/black or any other dark/high-contrast color. This line should be barely perceptible; the active tab is meant to read as distinct mainly because its background is white against the surrounding gray tab bar, not because it has a visible outline. Critically there is **no shadow/border on the bottom edge at all** (top + left + right only) and `border-radius: 8px 8px 0 0` (top corners only, square bottom corners) — this is what makes the active tab flow seamlessly into the white content panel directly beneath it with no seam line, rather than reading as a separate boxed-off tile sitting on top of the panel. Use these **exact SVG icons** (reproduce the path data verbatim — do not substitute a generic icon-font glyph or reinterpret the shape): 1. **Autonomous Agents** (default active tab) — a 4-point sparkle plus a smaller 4-point sparkle at bottom-right: ```svg ``` 2. **Visual Builder** — a rounded rectangle frame divided by one horizontal line (near the top, like a toolbar) and one vertical line (like a sidebar), forming an app-window layout glyph: ```svg ``` 3. **Integrations** — three small rounded squares (top-left, top-right, bottom-left of a 2×2 grid) with a plus/cross glyph standing in for the fourth (bottom-right) square: ```svg ``` 4. **Audit Trail** — three stacked horizontal list lines (the third one short) with a small hollow circle badge sitting at the end of the third line (not a clock — no hands, just a ring): ```svg ``` - **Panel wrap** below tabs: white background, inset 1px border, rounded bottom 8px, min-height 490px, padding 40px 44px, flex row gap 44px. - **Left intro column** (300px fixed): dynamic title (24px/500) + dynamic body copy (16px/24px gray) that change per active tab (via JS, see Section 7) + "See how it works" link with underline, anchors to `#start`. - **Right content column** (flex:1) — different content per tab, only one visible at a time: **Tab 1 — "agents" (default, flex layout):** Title: "Agents that finish the job". Body: "Give an agent a goal and the tools to reach it. It plans, calls what it needs, and stops to ask when the call is yours." Content: a mock run log — - Header row: "Run #48,120 — Weekly revenue digest" | "completed in 41s · 9 tool calls" - 5 timestamped log rows (time / black-or-gray dot / description / duration), each with bottom border: - 00:00 ● Pulled 14 rows from Postgres — 2.1s - 00:02 ● Reconciled against Stripe payouts — 6.4s - 00:09 ● Flagged 2 refunds over threshold — 1.2s - 00:11 ● Wrote the digest and asked Priya to approve — 28s - 00:41 (gray dot) Posted to #finance — 0.4s - Below: two big serif stat numbers side by side: **"41s"** / "median run" and **"6"** / "hours saved this week" (DM Serif Display, 45px). **Tab 2 — "builder" (grid layout, 2 columns):** Title: "Build it in an afternoon". Body: "Lay out the flow, test it against real records, and publish. No branch, no build step, no ticket for engineering." Content: 3 cards — - "Drag a step in" — "Triggers, agents, branches, and human approvals snap onto the canvas." - "Test on real data" — "Replay yesterday's tickets against the draft before anyone sees it." - Full-width card (gray bg) "Version every change" with a 3-row changelog: v14 "Maya added the approval step · 2m ago", v13 "Sam swapped the classifier model · yesterday", v12 "Rolled back a bad prompt · Tuesday". **Tab 3 — "integrations" (block layout):** Title: "Your stack, already wired". Body: "Connect a tool once and every workflow can use it. Credentials stay scoped to the steps that need them." Content: a 4-column grid of 12 integration tiles (each `display:flex; align-items:center; gap:11px; height:62px; padding:0 16px;` bordered box, hover→black border, with a 28×28 icon-wrap + 15px name text). Every tile icon is a **real, recognizable official brand mark** — not a loose abstraction — rendered single-color in `fill="rgb(11,11,11)"` (or `stroke` for line-style marks), sized to fit a 20×20 box. **Source every mark from [Simple Icons](https://simpleicons.org)** (an accurate, actively-maintained, MIT-licensed library of official monochrome brand glyphs, each on a `viewBox="0 0 24 24"`) by the slug given below, rather than freehand-reconstructing a logo from memory or description — that's what produces a recognizable-but-not-quite-right mark. Two of these (Slack, GitHub) are common enough that their exact official paths are given directly since they're unlikely to be misdrawn; source the rest from Simple Icons by slug: 1. **Slack** — Simple Icons slug `slack`. Exact path (the four rounded-pod "hashtag" mark): `` 2. **Notion** — Simple Icons slug `notion`. Use its official glyph (Notion's page-with-"N" mark), not a generic rounded-rect-plus-diagonal-line placeholder. 3. **Linear** — Simple Icons slug `linear`. 4. **Stripe** — Simple Icons slug `stripe`. 5. **Postgres** — Simple Icons slug `postgresql`. 6. **Gmail** — Simple Icons slug `gmail`. 7. **HubSpot** — Simple Icons slug `hubspot`. 8. **Zendesk** — Simple Icons slug `zendesk`. 9. **Drive** — Simple Icons slug `googledrive`. 10. **Jira** — Simple Icons slug `jira`. 11. **Snowflake** — Simple Icons slug `snowflake`. 12. **GitHub** — Simple Icons slug `github`. Exact path (the standard Octocat mark): `` Footer note: "Plus any HTTP endpoint, with credentials scoped per workflow." **Tab 4 — "audit" (block layout, table):** Title: "Answer any question later". Body: "Every run is recorded end to end, so you can show exactly what an agent saw and what it did." Content: a table with header row (Time / Event / Actor / Status) and 7 log rows showing a support-ticket run trace (timestamps 09:12:04–09:14:42, events like "Run started · Support triage", "zendesk.tickets.list · 12 results", "Classified 12 tickets by intent", "Draft reply generated", "Approval requested" (status "waiting", gray dot), "Approved and sent", "slack.postMessage · #support"), each row with a status dot (black=ok, gray=waiting). Footer note: "Every input, output, and tool call retained for 90 days. Exportable as JSON." ### 4.6 About / "See Atlas in action" section (`#about`) - `margin: 130px 85px 0;` - Intro row: left heading "See Atlas in action" (55px/500) + right-aligned paragraph (max-width 340px, right-aligned) "A visual builder, live integrations, and a full audit trail — all in one workspace." - **Bento grid**: `display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 300px 300px 300px; gap: 20px; margin-top: 44px;` — three **equal-width** columns and **three** equal-height rows (not two — the third row exists specifically to hold the wide card full-width, see below). The tall card gets `grid-row: span 2` (occupying column 1, rows 1–2) — no explicit column/row position needed, only the span; normal grid auto-placement then drops the two square cards into row 1's remaining open cells (columns 2 and 3) on its own, since column 1 of row 1 is already claimed by the spanning tall card. The wide card is **not** part of this auto-flowing arrangement: give it an explicit `grid-column: 1 / -1; grid-row: 3;` so it always occupies its own full-width row underneath the other three, regardless of source order in the HTML. (An earlier version of this design had the wide card sharing row 1 with the tall card via `grid-column: span 2`, occupying only 2 of the 3 columns — that's been superseded; the wide card must span the full width now.) Each card's icon sits in a 38×38 rounded square (`background: rgb(249,249,249)`, inset border) and is 20×20, `viewBox="0 0 24 24"`, `stroke="rgb(11,11,11)"`, `stroke-width="1.6"`, `fill="none"`, round caps/joins — each of the 4 icons below reuses the *exact same path data* as an icon already specified elsewhere in this prompt, noted per card: 1. **Tall card** (spans both rows, col 1): icon `` (the git-branch glyph — identical to the "Branch" flow-node icon in Section 4.3), title "One canvas, no glue code", body "Branch on conditions, loop over rows, hand off to a teammate. Ship without a deploy." Below: a vertical mini flow of 4 pill steps connected by short vertical divider lines: "Trigger · New row in Postgres" → "Agent · Enrich the account" → "Branch · ARR over $50k" → "Action · Alert the AE in Slack" (last one styled black/white, others outlined). 2. **Card** (row 1, col 2 — auto-placed): icon `` (the shield-check glyph — identical to the "Approval" flow-node icon in Section 4.3), title "Nothing leaves without approval", body "Put a human in front of any step and Atlas waits." Footer: two small `.pill-btn` buttons "Approve" (black) and "Edit draft" (outline). 3. **Card** (row 1, col 3 — auto-placed): icon `` (identical to the "Audit Trail" tab icon in Section 4.5), title "Read the whole trail", body "Every tool call, input, and output — in order, with timings." Footer: 3 small log lines (09:12 postgres.query · 14 rows / 09:12 stripe.payouts.list · ok / 09:13 slack.postMessage · #finance). 4. **Wide card** (`grid-column: 1 / -1; grid-row: 3;` — its own full-width row below the other three): `display: flex; justify-content: space-between; gap: 28px;` (not `flex: 1` on the text side — let the text block sit at its natural/capped width on the left and the diagram sit fixed-width on the right, with `justify-content: space-between` distributing the now-much-larger leftover horizontal space as a single gap between them; a build that keeps `flex: 1` on the text side instead ends up with a stretched-but-still-left-anchored text column and a large dead gap trailing after it before the diagram, which is the "half the card is empty" failure mode to watch for). Icon `` (the plug/webhook glyph — identical to "Webhook" in Section 4.3's sidebar), title "Connect your tools once", body "Credentials live in one place and every workflow reuses them, scoped to what it actually needs." Footer: "80+ tools, plus any HTTP endpoint." On the right side (336×244px, `position: relative`): a **radial "hub and spoke" diagram** (class `connect-diagram`). Its background rings/spokes are a single literal inline SVG absolutely positioned to fill the 336×244 box — **do not** approximate this with a CSS `radial-gradient`, `border-radius`, or any other CSS-only ring technique; those cannot reproduce the dashed spoke lines at all and additionally risk clipping the box into an unwanted circle. Use exactly: ```svg ``` (two plain solid-stroke concentric circles at radius 58 and 98 from the box's center point 168,122 — note only the 6 spoke lines are dashed, the circles themselves are not.) On top of that SVG sit: a center 60×60 white circle (`position:absolute; left:138px; top:92px`) holding the Atlas logomark (24×24), and 6 floating pill chips (each `height:34px; border-radius:17px; background: rgb(249,249,249)`, inset border, 14×14 icon + 13px/500 name) positioned around the ring at left/right × top:43px/105px/179px. Reproduce these exact brand-mark paths, one per pill, in this position order: - **Zapier** (left, top:43px) — `` - **Gemini** (right, top:179px) — `is about"** (55px/500, two lines). Subhead: "Teams run their busywork through Atlas." - Row of 3 testimonial cards (417×596px each, white, bordered, rounded 8px, gap 10px, centered, margin-top 54px): 1. **Card 1** (text-only top): eyebrow "Ops · 34 workflows live", then a large serif pull-quote statement (45px DM Serif Display, line-height 48px): "We deleted four internal tools the week we shipped this." Bottom-anchored (over a white fade gradient): large serif opening-quote mark, quote paragraph "Impressed by the professionalism and attention to detail from the team at atlas.", attribution "— Rina Okafor, Head of Ops at Skydance". 2. **Card 2** (photo top): full-bleed `testimonial-portrait.png` filling the top square area. Same bottom-anchored quote block: "Our triage queue used to eat a full day a week. Atlas handles it and asks us only when it should." — "— Devi Shankar, Support Lead at Meridian". 3. **Card 3** (stats top): eyebrow "Last 30 days", 4 stat rows (label left, bold value right): Runs completed 38,402 / Escalated to a human 311 / Median latency 39s / Hours returned 1,940. Same bottom quote block: "The audit trail is what got it past our security review. Every call is there." — "— Tom Bregman, CTO at Halvard". All 3 cards share the same bottom construction: a vertical white-fade gradient over the top content (from ~255px down), then an absolutely positioned bottom block (28px inset) with a large gray serif `"` mark, an 18px/24px quote paragraph, and a 14px gray attribution line. ### 4.8 Final CTA band (`#start`) - Full-bleed section, height 645px, `background: footer.png cover`, centered content, with soft gradient fades at the very top and bottom edges back to `--bg`. - White H2 (64px/500, line-height 58px): **"Put your busywork on autopilot"** - White paragraph (max-width 423px, 18px/24px): "Start with one workflow. Connect your tools, run it on real data, and keep the trail." - White pill button (54px tall, padding 0 30px, margin-top 12px, black text, hover bg `rgb(243,243,243)`): **"Get Started Now"** + the same 16×16 arrow-up-right SVG icon (`stroke="rgb(0,0,0)"`, exact path in Section 9). ### 4.9 Footer - `padding: 100px 85px 0; position:relative; overflow:hidden;` - Top row (flex, space-between): - Left column: logomark+wordmark (reuse the exact same `.brand` markup/sizing as the header — 24×24 icon, 23px/500 "atlas." text, unchanged from the header instance), copyright line "©2026 Atlas. All rights reserved.", and Privacy Policy / Terms links. - Right: two link columns, gap 110px: - **Explore**: How it works, Features, Testimonials, Pricing - **Connect**: X / Twitter, Instagram, Linkedin - **Scope the footer's small link text-size with a dedicated `.footer-link` class applied to each individual `` — Privacy Policy, Terms, and the 7 Explore/Connect links — never with a broad descendant selector like `.site-footer > div a` or `.footer-top a`.** The brand/logo link (``) sits inside the same nested `

` structure as those footer links, so any selector that matches "any `` inside a footer div" will also match the brand link and override its 23px wordmark size down to the smaller footer-link size — exactly the bug that makes the footer logo's text shrink to ~12px while its icon stays fixed at 24px, breaking their proportion. A one-off broad selector is higher specificity (class + 2 type selectors) than `.brand`'s own rule (1 class), so it silently wins even though nothing about it looks wrong in isolation. - Below: a giant, low-opacity (0.1) watermark repeating the wordmark **"atlas."** at 330px font size, centered, clipped inside a 200px-tall overflow-hidden wrapper (so only the top portion of the giant text shows, bleeding off the bottom of the page). --- ## 5. Interactivity (app.js) Vanilla JS, one small IIFE: - A `copy` object maps each tab key (`agents`, `builder`, `integrations`, `audit`) to `[title, body]` text pairs (see Section 4.5 for exact strings). - On click of any `.tab-btn`: toggle `.is-active` on the clicked button (and remove from others), toggle `.is-active` + `display` (each panel stores its own natural `display` value, e.g. `flex`/`grid`/`block`, in a `data-display` attribute) on the matching `.tab-panel`, and update the `#panel-title` / `#panel-body` text nodes to the copy pair for that tab. - Default active tab on load: `agents`. ## 6. Animations - `@keyframes atlasDash { to { stroke-dashoffset: -24; } }` — animates dashed connector lines in the hero mockup, infinite linear loop. - `@keyframes atlasNode` — each flow node's box-shadow briefly switches from a bold black 1px ring + soft drop shadow (0–12% of a 4.8s cycle) back to the resting thin gray ring (22–100%), creating a sequential "pulse" effect when staggered with `animation-delay`. - `@keyframes atlasTick` — the "Live" status dot fades opacity 1→0.25 on the same 4.8s cycle/stagger pattern, mimicking a heartbeat. - Respect `@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }`. ## 7. Interactive/hover states (all transition 0.15s ease) - `.btn-dark`: black bg → hover `rgb(38,38,38)` - `.btn-outline`: bordered → hover fills `rgba(0,0,0,0.04)` - `.badge-link`: white pill → hover bg `--bg` - `.cta-white-btn`: white → hover `rgb(243,243,243)` - `.nav-link` / `.footer-link`: `--ink-soft` → hover `--gray` - `.integration-tile`: gray border → hover black border - `.see-how-link`: black text with a `1px solid rgb(193,193,193)` underline ## 8. Responsive behavior Responsiveness is **fluid-first**, not breakpoint-first (not present in the original scope — added for real-world use). Almost everything scales continuously with the viewport via CSS custom properties and `clamp()`; only a handful of structural, binary layout switches remain as hard breakpoints, because a bento grid's column count, a sidebar stacking above its content, or a fixed-pixel dashboard mockup can't be interpolated continuously. **Fluid tokens** (declared on `:root`, layered on top of the fixed color tokens from Section 2): ```css --gutter: clamp(20px, 6vw, 85px); /* replaces the old fixed 85px side padding/margins */ --space-2xl: clamp(60px, 9vw, 130px); /* section-to-section vertical rhythm */ --space-xl: clamp(56px, 7vw, 100px); --space-lg: clamp(32px, 4.5vw, 56px); --space-md: clamp(24px, 3.5vw, 50px); --fs-h1: clamp(42px, 3.1vw + 30px, 75px); /* hero heading */ --fs-h2: clamp(28px, 2.54vw + 18px, 55px); /* section headings */ --fs-cta: clamp(34px, 2.82vw + 23px, 64px); /* final CTA heading */ ``` Apply `--gutter` as the left/right padding or margin on the header, hero, hero-mock section, press row, features section, about section, reviews row, cta section, and footer (all `!important` so they win over the section's own inline desktop-px style). Apply the `--space-*` tokens to the vertical margins between those same sections, and the `--fs-*` tokens (with `!important`) to `.hero-heading`, `.section-heading`, `.cta-heading` respectively, each with a tightened `line-height` (1.08–1.1) appropriate for the smaller sizes. Also make these continuously fluid rather than breakpoint-only: - Nav gap/margin and link font-size shrink via `clamp()` (nav gap `clamp(14px,2vw,44px)`, margin-left `clamp(20px,4vw,60px)`, link size `clamp(12px, 1vw + 9px, 14px)`). - **Header CTA button** (`.header-cta`) — shrink this continuously in lockstep with the nav, not just at the ≤640px breakpoint: `height: clamp(38px, 3vw + 20px, 44px)`, `padding: 0 clamp(14px, 2.5vw, 26px)`, `font-size: clamp(13px, 1vw + 8px, 16px)`, `gap: clamp(6px, 1vw, 12px)`, and its arrow icon `width/height: clamp(12px, 1vw + 8px, 16px)`. This closes the gap that otherwise exists between where the nav has finished shrinking and where the old fixed-breakpoint shrink used to kick in at 640px — without it, the header CTA stays full-size while the nav and gutters keep shrinking underneath it, and the row runs out of space before either breakpoint saves it. - Feature tabs: `.tabs-intro` width `clamp(200px,22vw,300px)`; `.tab-btn` height/font-size/gap and its icon size all use `clamp()`; `.tabs-panel-wrap` padding/gap use the space tokens. - Rows reflow by wrapping instead of snapping: press-row, tabs-row, reviews-row all get `flex-wrap: wrap` with a `row-gap`; `.tab-btn` uses `flex: 1 1 160px`; `.review-card` uses `flex: 1 1 280px` with `max-width: 417px` (instead of a fixed 417px width); `.integrations-grid` uses `grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))` instead of a fixed 4-column grid that drops columns at breakpoints; hero action buttons switch from fixed pixel widths to `flex: 0 1 auto` with `padding: 0 16px` so they can shrink; the footer watermark font-size becomes `clamp(140px, 22vw, 330px)`. - The final CTA section drops its fixed 645px height in favor of `height: auto; min-height: 420px` with fluid top/bottom padding from the space tokens, so it never clips content at narrow widths. **Header overflow invariant (non-negotiable):** the header CTA button must *never*, at any viewport width from 320px to 1440px, (a) wrap its label onto a second line, (b) overflow past the right edge of the viewport, (c) get visually clipped by `.page`'s or `html`'s `overflow-x: hidden`, or (d) drift away from the right edge leaving a dead gap of empty space beside it. To guarantee this: keep `white-space: nowrap` on both `.header-cta` and its inner label ``; give `.header-cta` `flex: none` (it must shrink via its own `clamp()` rules above, never by being squeezed by the flex layout below its content size); give `.site-nav` `min-width: 0` so *it* is the element that absorbs any remaining space pressure (via its own already-fluid gap/margin/font-size), not the CTA or the logo. **Put the right-alignment mechanism on `.header-cta` itself, not on `.site-nav`.** The nav collapses to `display: none` at the ≤640px breakpoint (see below) — once it's removed from the flex flow, any auto-margin trick living *on the nav* (e.g. `.site-nav { margin-right: auto }`) disappears along with it, and the header silently reverts to left-packed flow with the CTA sitting flush against the logo and a dead strip of empty space filling the rest of the row on the right. This is a real failure mode, not a hypothetical one — it is exactly what produces a header where the CTA sits right after the logo with a large gap of unused space after it. The fix is to make the mechanism independent of whether the nav is present at all: set `.header-cta { margin-left: auto; }` directly. An auto left-margin on the CTA itself consumes all remaining flex space and pins it flush right unconditionally, whether the nav is full width, fluid-shrunk, or `display: none`. (`.site-nav { margin-right: auto }` can still be kept too for the header-cta's benefit when both are present, but `.header-cta { margin-left: auto }` is the one that must never be omitted, since it is the only mechanism that survives the nav disappearing.) Test this specifically at 700–1000px (where the old two-breakpoint version broke) and again at ≤640px (where the nav itself disappears) to confirm the button stays flush right in both cases. **Remaining hard (structural) breakpoints:** - **≤900px**: `.tabs-panel-wrap` switches from row to column layout (intro block stacks above the tab content instead of beside it); `.tabs-intro` becomes full width. - **≤1310px** (the point where the 930px-wide fixed dashboard mockup plus its own padding no longer fits): `.hero-mock-section` drops its fixed 567px height for `height: auto` and becomes horizontally scrollable (`overflow-x: auto` with momentum scrolling). **Preserve the bottom-flush relationship from Section 4.3 at this tier too — don't switch to symmetric/centered padding.** Concretely: `.hero-mock-section` becomes `display: flex; align-items: flex-end; justify-content: center;` with padding only on the top and sides (e.g. `padding: 24px 24px 0`, no bottom padding), so the card's bottom edge still sits flush against the section's bottom edge — the same "reveal strip only above, none below" look as the fixed-size desktop version, just reached via flex alignment instead of the `top:62px` math (which stops being meaningful once the card's real height changes with `zoom`). The inner mockup card keeps `position: relative; left: auto; top: auto; margin: 0 auto;` (its own position is now irrelevant since the flex container is doing the bottom-anchoring) and is scaled down with `zoom`, using `zoom: min(0.7, calc((100vw - 2 * var(--gutter) - 60px) / 930px))` — i.e. it never zooms above 0.7 but shrinks further on narrower screens so it keeps fitting without needing more scroll breakpoints. A build that instead centers the card with equal padding on all sides (or vertically centers it) is wrong even if every other value matches — the card must never float with visible background both above and below it. The audit table becomes horizontally scrollable. The about bento grid drops to 2 columns / auto row height (tall card no longer spans rows; the wide card keeps spanning the full row width via `grid-column: 1 / -1`, which at 2 columns still means both of them, so no change needed there). The wide "Connect your tools once" card (`.about-card-wide`) switches from a row layout to a centered column layout (`flex-direction: column; align-items: center;`) and becomes a CSS containment context (`container-type: inline-size`) so its child can query *its* width rather than the viewport's. The radial `.connect-diagram` is no longer hidden at this tier — instead it stays visible and shrinks itself via a **container query zoom**: `zoom: min(1, calc((100cqw - 56px) / 336px))` — i.e. it renders at full size only if the card is wide enough to fit its native 336px width plus 56px of breathing room, and scales down proportionally as the card narrows, rather than snapping to `display:none`. - **≤640px (mobile)**: nav links hidden entirely (once they're gone, the header CTA has the row to itself, already at its fluid-clamped floor size — roughly 38px tall / 13px text per the header-cta clamp values above, not a separate hard-coded shrink). About intro stacks vertically and left-aligns (paragraph no longer right-aligned/width-capped). About bento grid becomes a single column; the wide card's icon+diagram block switches from row to column layout. The small "Approve"/"Edit draft" pill buttons (`.pill-btn`) shrink their padding/font-size. The audit table's inner content gets a `480px` min-width so it scrolls cleanly instead of squashing. Footer top row stacks vertically (logo block above link columns). Press-row logos get individual per-logo height overrides (roughly 14–18px each, tuned per logo's natural aspect ratio) with a tightened column gap, since a single scale factor doesn't keep every logo's optical weight balanced at small sizes. Everything not called out in a breakpoint above (hero copy, buttons, tab panel content, reviews cards, CTA content, footer link columns) is expected to already look right from the fluid tokens/wrapping alone — don't add extra breakpoint-only overrides for things the clamp/wrap system already handles continuously. ## 9. Deliverable format Three files: `index.html` (all markup + inline `style` attributes matching the exact desktop pixel values, colors, and spacing given above — the original was built this way, essentially with per-element inline styles rather than semantic CSS classes, except for the small set of hover/layout/responsive classes named throughout Sections 4, 7, and 8 — e.g. `.hero-heading`, `.section-heading`, `.cta-heading`, `.tabs-intro`, `.tab-btn`, `.review-card`, `.pill-btn`, `.integrations-grid`, `.about-grid`, `.about-card-tall`, `.about-card-wide`, `.connect-diagram`, `.audit-table`, `.hero-mock-section`/`.hero-mock-inner`, `.press-row`, `.hero-actions`, `.footer-watermark`), `styles.css` (the fixed color tokens plus the fluid spacing/type tokens from Section 8, global resets, keyframes, the hover-state classes, the tab-panel show/hide classes, the fluid `!important` overrides, and the three structural media queries), and `app.js` (the tab-switching script from Section 5). All `` `src` and CSS `url(...)` references should point directly at the hosted R2 URLs given in Section 3 — do not use relative local paths like `assets/...`, and do not create an `assets/` folder (or any local image folder) in the project at all. **The finished deliverable is exactly three files — `index.html`, `styles.css`, `app.js` — and nothing else.** No local copies of images, no downloaded fonts (Google Fonts is loaded via the `` tag in Section 2, not self-hosted), no vendored icon-library files (brand icons in Section 9 are either literal inline `

Take the quiz

What kind of site are you building?