Depot

An original Cargoline homepage: a 60px frosted header with a three-stroke logo, six navigation items and two small mono buttons, a 1px violet-to-azure rule, a 48px announcement band, and an 800px hero where isometric glass beams, hairline bundles and two magenta cargo blocks climb from the lower left while a right-aligned two-line headline, a two-line lead, a short claim and two buttons sit at the right edge. Below: a customer strip, a bottleneck statement, a human-paced versus agent-paced pipeline comparison and a mono footer.

• Best forCI runners, build caches, container registries, sandboxes and other delivery infrastructure that wants a calm, technical first screen with one confident headline.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, gradient, radius and spacing token. Render the page as a server component; only the announcement dismiss needs a small client island holding its state in memory. Self-host Inter Tight (variable, 400–600) and DM Mono (400), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the hero art plate as one committed inline SVG of paths, gradients and two blur filters, never a runtime canvas, WebGL scene or random generator, so every render is identical. Draw the Cargoline mark, the chevrons, the bolt and the dismiss cross as inline SVG. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Depot" kickstart — A build-infrastructure homepage: a pale-steel canvas, isometric glass pipelines in violet and azure, a right-aligned 92px grotesk headline and small mono buttons lit by one violet-to-azure gradient.

## Design
Build a rebrandable landing page for a build, CI and software-delivery platform: fast builds, CI runners, remote caches, sandboxes and registries for teams whose coding agents open more pull requests than people can.

Create a complete landing page for Cargoline, a fictional software-delivery platform. This is a concept presentation, not a real company — no real product, customer, person or logo. Use original branding, artwork and copy throughout.

Color: one light, shadowless plane. Steel #EAECF0 is the page canvas, the header tint and the secondary button fill. Mist #F6F7F9 is the comparison cards' translucent fill. Ink #080808 is the logo, the headlines, the announcement and the secondary button labels. Graphite #636365 is the navigation, the hero lead, the card lists and the footer. Rule #D4D6D9 is every hairline and card border. Haze #DBE0E2 is the announcement band's base. The only saturated colour is the radial button gradient — Violet #A338FF at 0%, #9C3BFC at 30%, #7C48EF at 48%, #3E62D5 at 68% and Azure #007DBC at 88%, centred at 125% 50% with a 112% 300% ellipse — which fills every primary button with #FFFFFF text and, with Cyan #00AAFF, draws the 1px outline of every secondary button. The hero art uses translucent tints of the same family: periwinkle #8FA8FF, iris #7F7BFF, lilac #B08CFF and lavender #C7B8FF beams, and magenta #E26CFF to #F3B9FF cargo blocks.

Typography: headings use "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif — the hero headline at 92px/82.8px weight 500 with -2.76px letter-spacing, right-aligned and trimmed with text-box: trim-both cap alphabetic; the bottleneck statement at 60px/56px (-1.8px); the customer-strip heading at 34px/39px (-1px); card titles 24px/28px. The same family sets navigation (16px/16px weight 400, -0.08px), the announcement (16px, product name weight 500), the hero lead (19px/25.65px, 0.1px, cap-trimmed) and the card lists (17px/30px). Every button label and the footer use "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace at 12px/13.2px weight 400 with 0.24px tracking, typed in capitals. Self-host both families.

Layout: a 1440px viewport with 48px side gutters (content from x 48 to 1392). Radii are 6px for buttons and cards; there are no drop shadows anywhere.

Navigation: a fixed 60px header, rgba(234,236,240,0.75) with a 16px backdrop blur, and under it a 1px rule graded from rgba(0,170,255,0.35) through rgba(124,73,255,0.55) to rgba(163,56,255,0.35). At x 48 the 24px Cargoline logo: three 3px rounded strokes — a straight middle bar and an upper and lower bar that kink outward at their right ends like tracks splitting — then the wordmark Cargoline in 25px weight 600 (-0.9px). From x 222: Platform and Learn with 12px chevrons, then Customers, Changelog, Docs and Pricing, each with 8px side padding. At the right edge, 12px apart, a GET STARTED primary button and a LOG IN secondary button, both 32px tall with 12px side padding.

Announcement bar: directly below the header rule, a 48px band filled with radial-gradient(40% 100% at 50% 50%, rgba(186,198,236,0.55) 0%, #DBE0E2 140%). Centred: a 16px outlined bolt glyph, Introducing, and Cargoline Forge in weight 500, 8px apart; a 12px dismiss cross sits 48px from the right edge.

Hero (id top): 752px below the band, the page's own canvas. On the left, a 1000×860px inline SVG art plate starting 48px above the hero: isometric beams at thirty degrees rising from the lower left to the upper right — two broad translucent violet ribbons, one bending through a soft S-curve, a narrower iris beam lower down, and a pale periwinkle one high up — each a linear gradient from transparent at its foot to 0.75–0.9 opacity mid-run and fading at its head; beside them three bundles of 0.6–0.7px hairlines spaced 6px apart; three lavender pipes bending up from the floor; a pale grey legacy pipe running in from the left at y 270 and kinking onto the tracks; and two glass cargo blocks — flat isometric boxes with a light #F3B9FF top, a #E26CFF end and a #C86BFF side — riding the upper ribbon at x 450 and the lower one at x 554. Mask the plate to transparent over its last 30% downward and its last 17% rightward so it never touches the copy. On the right, a 900px copy column flush to x 1392, right-aligned: the headline Shipping pipelines / built for agent speed with its cap top at y 466; 32px lower the 700px lead Cargoline gives platform teams the fast builds, CI runners, remote caches, sandboxes and registries they need to merge what their agents write, as fast as they write it.; 32px lower the short claim All on one Cargoline cluster.; and 32px lower, 24px apart, a START SHIPPING FOR FREE primary button and a TALK TO AN ENGINEER secondary button.

Customer strip (id teams): 224px below the hero, a 340px band whose top-left glows with radial-gradient(60% 120% at 10% 0%, rgba(158,172,240,0.45), transparent 70%): on the left Trusted by teams that / merge all day long. in 34px weight 500; on the right four original text wordmarks — northwind, Halvard, quill_ and OSPREY — in 28px weight 600 #3A3A3C, spread evenly.

Bottleneck statement (id platform): 160px top padding, the 60px heading The bottleneck moved from writing code to everything after. at 760px wide, then a 19px #636365 paragraph about agents opening more pull requests than a team can build, test and review by hand.

Pipeline comparison: two equal cards 24px apart, each at least 420px tall. Human-paced pipeline lists Shared, undersized runners; Cold image builds; Caches split per branch; Full pipeline reruns — each beside a 14px open-ring spinner bullet in #C5C7CB. Agent-paced pipeline lists Dedicated runners per job; Warm layer cache; One shared remote cache; Rerun only what changed — each beside a 14px gradient dot, inside a violet-tinted border.

Footer: a 1px #D4D6D9 top rule and 40px 48px padding: © 2026 Cargoline Systems on the left and Docs · Changelog · Status · Pricing on the right, in 12px DM Mono capitals #636365.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, gradient, radius and spacing token. Render the page as a server component; only the announcement dismiss needs a small client island holding its state in memory. Self-host Inter Tight (variable, 400–600) and DM Mono (400), both under the SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the hero art plate as one committed inline SVG of paths, gradients and two blur filters, never a runtime canvas, WebGL scene or random generator, so every render is identical. Draw the Cargoline mark, the chevrons, the bolt and the dismiss cross as inline SVG. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Cargoline clearly fictional and rebrandable: no real company, CI product, customer, statistic or person — every name and wordmark is invented. Keep the system light, flat and shadowless with one accent: the violet-to-azure gradient appears only on buttons, their outlines, the header rule and the agent-paced card, and its text is always #FFFFFF. Text pairs clear WCAG AA: #080808 and #636365 on #EAECF0 and #F6F7F9, #080808 on the announcement band, and #FFFFFF on the button gradient. Every link leads to a real anchor on the page, and the page loads no analytics or tracking script and shows no cookie banner. Content is initially visible; the cargo blocks are static at rest and may drift only when motion is allowed — every animation and transition stops for prefers-reduced-motion. Every control shows a 2px #7C48EF focus ring with a 2px offset. The art plate is hidden from assistive technology, and the button labels keep their capitals in the markup rather than through text-transform. At 360px the header keeps the logo, GET STARTED and a Menu button, the announcement wraps to two lines, the art plate sits behind the copy at 40% opacity, the headline drops to 44px/42px and left-aligns, the buttons stack full width, the comparison cards stack, and the page never overflows horizontally.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.