Voiceflow

An original Seabright AI-agent page on a pale sea-glass #F2F7F7 page: a 1416px white frame inset 12px with a 1px #E8ECEC border and 16px radius holds the whole first screen. A 91px header carries a looped four-petal mark and the Seabright wordmark at the left, five centred 14px links (Docs, Platform, Resources with a chevron, Customers, Pricing), and a quiet Log in beside a blue 8px-radius Get started button. A centred two-line 72px light serif headline sits at y 181 over a two-line 16px lead; a 331×52px white email capture with an inline blue button straddles the top of a 1390×390px painted coastal landscape — hazy headlands, a lighthouse, a blue bay and a curving guardrailed road — that fades up into the white. A white quote card with a layered soft shadow floats over the painting's right side, and a 40px customer-stories tab strip of five invented grey wordmarks with hairline dividers and a 2px active underline closes the frame. Below the frame: a dotted-field platform statement with a 36px serif heading, three proof figures and a grey Why Seabright button; a two-row testimonial wall of white cards; a channels section; a three-column feature triptych; a closing call to action; and a quiet footer.

• Best forAI agent, conversational AI, customer support automation, contact-centre and CX platforms that want an editorial, trustworthy feel with a painted hero image and real customer proof.
• 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, radius, shadow and spacing token. Render the page as server components; only the customer-stories tabs, the email capture's local confirmation and the mobile menu need small client islands, holding their state in memory. Self-host Source Serif 4 (variable, with the optical-size axis) and Figtree (variable), both SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the Seabright mark, the invented wordmarks, every icon, the painted landscape and the product views as inline SVG and HTML; generate the landscape's brush dabs from a fixed seeded list committed to the repo so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Voiceflow" kickstart — A calm, editorial AI-agent platform homepage: a whisper-weight 72px serif headline, one blue action, an email capture floating over a painted coastal-road landscape, and a quiet customer-stories tab strip, all inside an inset white frame on a pale sea-glass page.

## Design
Build a rebrandable landing page for an AI customer-experience agent platform: software that lets support teams design, test and launch AI agents that answer customers on chat, voice and messaging channels.

Create a complete landing page for Seabright, a fictional AI agent 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: a pale sea-glass page with one white sheet laid on it. Sea Glass #F2F7F7 is the page behind everything. Paper #FFFFFF is the inset frame, the header, the quote card, the email capture and every card. Frame Edge #E8ECEC is the 1px frame border and card borders; Silk #E5E5E5 is the email capture border and the story-tab dividers. Ink #1A1E23 is every headline and the active wordmark; Body #38414A is paragraph copy; Slate #515A63 is the lead, navigation and captions; Label #636D74 is Log in, the email placeholder and small labels; Tab Graphite #3E4852 is the active-tab underline; Mute Grey #8A9396 is the inactive wordmarks. Signal Blue #2D6BEB is the only saturated colour: the primary buttons, the story link and the active nav state, hovering to #2259CC; text on it is #FFFFFF. Never use blue for decoration or large surfaces.

Typography: headings use "Source Serif 4", "Newsreader", Georgia, "Times New Roman", serif and body uses "Figtree", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif. Hero headline 72px/76.32px Source Serif 4, optical size 48, weight 340, letter-spacing -2.16px. Section headings 36px/43.2px weight 340, letter-spacing -0.72px. Quotes 16px/22.4px serif weight 300 at optical size 20. Figtree lead 16px/24.8px weight 400; navigation 14px/24.5px; buttons 14px/19.25px weight 600; wordmark 20px weight 500, letter-spacing -0.4px; labels 12px weight 600. Never bold the serif; below 20px switch to Figtree.

Layout: a 1440px canvas. The whole first screen is one white frame inset 12px from the page edges — 1416px wide, 850px tall, 1px #E8ECEC border, 16px radius, overflow hidden. Coordinates below are page coordinates. Spacing on a 4px base; 120px between sections below the frame. Radii: 16px frame, 10px cards and the email capture, 8px buttons, 12px for the painting's bottom corners.

Navigation: a 91px header inside the frame, no background or border. At x 73, y 32 the 24×22px looped four-petal mark (two mirrored loops crossing a vertical stem around a small filled dot, drawn as a 1.7px #1A1E23 stroke) beside the 20px weight 500 wordmark Seabright. Five links centred from x 498 at y 30 — Docs, Platform, Resources (with a small chevron), Customers, Pricing — in 14px #515A63 with 4px 12px padding. At the right, Log in at x 1213 and the 101×37px Get started primary button ending at x 1368, y 27.

Hero (id top): centred. At y 181 a two-line, 760px-wide headline AI agents customers trust. / Answers you can prove. in Ink. At y 356 a 610px-wide, two-line 16px Slate lead The AI agent platform that helps support teams own every conversation, from first reply to resolved ticket. At y 415 the painted landscape begins: a 1390×390px inline SVG spanning x 25 to 1415, its bottom corners rounded 12px and touching the frame's bottom strip; a white-to-transparent gradient over its top 130px makes the sky dissolve into the page. The painting is a gouache coastal scene in muted sage, olive, ochre and slate blue: three hazy layers of distant headlands under a warm cream sky, a blue bay with short pale sparkle strokes, a low green headland with a small white lighthouse and red lantern near the centre, a scrub-covered cliff band made of hundreds of small rotated ellipse brush dabs, a white guardrail with posts, and a grey road curving from mid-left down to the lower right with a dashed cream centre line and faint dappled shadows, all softened by a feTurbulence displacement and a light film grain. Straddling the painting's top edge at x 555, y 435 sits the 331×52px email capture with the inline Get started button. Floating over the painting's right side at x 975, y 568 is the 380px quote card: “Seabright gave our support team one place to build, test and ship agents — we went from pilot to every channel in a single quarter.”, a 28px avatar with Imogen Varga · Head of Support Operations, and the link Kelvin's story →.

Customer stories (id customers): a 40px strip at y 813 along the frame's bottom. At the left a 233px cell with the 12px weight 600 #636D74 label Customer stories; then five 232px tabs separated by 1px #E5E5E5 dividers, each holding an invented wordmark drawn in SVG — Kelvin (white letters on a black arrow tag), Ostrava (a ring and lowercase word), Tallow (a grey rounded tag), Meridel (a solid triangle and bold word), Quaygate (an outlined triangle and spaced serif capitals). The first tab is active: its wordmark is Ink and a 148px × 2px #3E4852 underline sits under its left edge. Choosing a tab swaps the quote card's quote, person and link.

Platform statement (id platform): on the Sea Glass page below the frame, a field of faint 1px rgba(81,90,99,0.22) dots on a 22px grid. Centred: a 128px ring of fine concentric grey hatch lines around a 40px Signal Blue disc holding the white mark; the 880px two-line 36px heading Seabright makes it easy for teams to build and scale AI agents for customer service.; one line of proof figures — 2,400+ teams · 9M+ conversations a month · 41 languages — with the numbers weight 600 Ink and labels #636D74; and the quiet button Why Seabright.

Testimonial wall: two static rows of white testimonial cards with 12px gaps, alternating a 474px quote card (wordmark left, 14px quote right) with 292px result cards (a 22px Figtree result like Under 10 weeks, a 12px caption From pilot to every channel, and a short quote). Every company, person and figure is invented.

Channels (id channels): a second white inset frame. Left-aligned 56px serif heading Help customers across any channel, use case and language., a 16px lead naming web, app, WhatsApp, SMS and voice, and the email capture repeated; at the right a flat HTML chat window showing a short customer conversation with the Seabright agent.

Feature triptych (id platform-features): three equal columns with 24px gaps — Design, Launch, Improve — each a 20px-radius white card with a 1px #E8ECEC border showing a small HTML product view (a flow canvas, a channel list, an analytics chart), then a 20px serif label in #2D6BEB and a 16px/1.55 Slate description.

Closing call to action: a centred 56px serif line Build your first agent this week. with the email capture beneath it.

Footer: on Sea Glass, the mark and wordmark, four 14px Slate link columns (Platform, Solutions, Resources, Company) and the line © Seabright sample · a fictional AI agent platform. Not a real company.

## 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, radius, shadow and spacing token. Render the page as server components; only the customer-stories tabs, the email capture's local confirmation and the mobile menu need small client islands, holding their state in memory. Self-host Source Serif 4 (variable, with the optical-size axis) and Figtree (variable), both SIL Open Font License, as woff2 files through next/font/local — no remote font request. Draw the Seabright mark, the invented wordmarks, every icon, the painted landscape and the product views as inline SVG and HTML; generate the landscape's brush dabs from a fixed seeded list committed to the repo so the markup is identical on every render. 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 Seabright clearly fictional and rebrandable: no real company, product, customer, statistic or person — every logo, quote and figure is invented. Signal Blue appears only on primary buttons, the story link and active navigation — never as decoration. The serif is never bold. Shadows appear only on the quote card floating over the painting; everything else separates by 1px hairlines and tone. Text pairs clear WCAG AA: #1A1E23, #38414A, #515A63 and #636D74 on #FFFFFF and #F2F7F7, and #FFFFFF on #2D6BEB. Every link leads to a real section on the page; the email capture validates locally, shows a short inline thank-you and sends nothing. The page loads no analytics or tracking script and shows no cookie banner. Content is initially visible: no typing effects, counters, parallax, marquees or scroll reveal; hovers take 150ms and every transition stops for prefers-reduced-motion. Every control shows a 2px #2D6BEB focus ring with a 2px offset; the painting is decorative and hidden from assistive technology; the tabs are a proper tablist. At 360px the frame insets 8px, the navigation collapses into a Menu button, the headline drops to 40px/44px and wraps, the lead to 15px, the email capture spans the frame width, the quote card moves below the painting, the story strip scrolls horizontally inside itself, testimonial 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.