Nile Postgres

An original Oxbow landing page on pure black. A 1208px header row holds a gradient loop mark and the Oxbow wordmark at x 116, seven 16px white links starting at x 369 (Vault, Docs, Pricing, Templates, Blog, Community, About), two 44px square icon buttons and a cyan Sign up button. The hero sits in a 1016px column at x 212: a translucent white Introducing Oxbow Vault · Learn more → pill at y 180, then the 96px headline Ship [Billing▍] / SaaS that scales — the product word filled with a peach-to-lilac-to-sky gradient inside a dashed gradient-bordered box with a blinking caret, cycling through Billing, Analytics, Support and Payroll. A 32px lead and one cyan Start with Oxbow → button follow, and a centred 64px What Builders Are Saying heading lands at y 796, opening a sideways-scrolling row of testimonial cards below the fold.

• Best forDatabase, backend and infrastructure startups, developer platforms selling to SaaS teams, API products with a code-first audience, and any launch that wants a confident dark hero with one memorable typing effect.
• 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, the signature gradient, the type sizes, the 10/14/16/20px radii and the easing curve cubic-bezier(0.2, 0.8, 0.2, 1). Render the page as server components; only the typing word and the testimonial row are small client components, and both render Billing and a static first card set on the server so markup matches before hydration. Self-host Manrope (weights 400, 500, 600, 700) and JetBrains Mono (400), both SIL Open Font License, through next/font — no remote font request at runtime. Draw the logo mark, glyphs, isometric cubes and diagrams as inline SVG; avatars are initials on a #27272A-to-#3F3F46 gradient circle. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Nile Postgres" kickstart — A pure-black developer-database launch page: a two-line 96px headline whose product word sits in a dashed signature-gradient box with a blinking caret, one cyan button, a translucent announcement pill and a centred 64px testimonial heading at the fold.

## Design
Build a rebrandable landing page for a multi-tenant Postgres database service: a dark, developer-first marketing page that sells one database where every customer of your app gets an isolated virtual database of its own.

Create the page for Oxbow, a fictional serverless Postgres company. This is a concept presentation, not a real company — no real product, person, quote or logo. Use original copy and drawn artwork throughout.

Color: Void #000000 is the page background everywhere. Card #16181C is the testimonial and code card fill. Ink #FFFFFF is headings, nav and body text. Soft #D3D3D3 is quote text and glyphs; #D9D9D9 is testimonial names and the typing caret. Muted #A1A1AA is roles, captions and secondary links. Hairline #2F3336 is card borders and ghost buttons; Edge #1C1C1C is the icon-button border. Cyan #6FE2FF is the only action colour — the Sign up and Start with Oxbow buttons — always with Night #0E0E0E text. The signature gradient linear-gradient(100deg, #F4C587, #D6D3E9 60.42%, #99D2EC) (peach, lilac, sky) is the logo mark, the typing word, its dashed frame and the statement band. Feature tiles are solid Apricot #FFBA6A, Lilac #D8D3FF or Cyan #6FE2FF with Night #0E0E0E text. No shadows, no glows, no other accents.

Typography: every heading and all text use "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; code uses "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace at 14px. Hero line one 96px/96px weight 500, line two 96px/96px weight 400, letter-spacing -0.01em. Lead 32px/32px weight 400. Section headings 64px/64px weight 400, -0.01em, centred. Nav, pill and buttons 16px/20px weight 400; header Sign up 14px. Names 14px weight 700, roles 14px/20px, quotes 15px/22.5px.

Layout: a 1440×900 first screen. The header and footer use a 1208px container (x 116 to 1324); the hero and sections use a 1016px column (x 212 to 1228).

Header: 84px tall, not sticky. At x 116 an original 28px loop mark — a single rounded stroke that rises, bends like a river oxbow and runs back up, painted with the signature gradient — followed 6px later by the wordmark Oxbow in 27px weight 700, -0.04em. Seven links start at x 369, each 36px tall with 16px side padding, 16px white: Vault, Docs, Pricing, Templates, Blog, Community, About. At the right, 16px apart: a 44px icon button with a chat-bubble glyph (community), a 44px icon button with a code-brackets glyph (source), and the cyan Sign up button, 87×44.

Hero: 96px below the header. At y 180 the announcement pill: Introducing Oxbow Vault, then Learn more, then a 16px arrow. 32px below it the headline in two lines. Line one, 144px tall, is Ship followed 12px later by the typing word box: a 144px-tall box with a 2px dashed signature-gradient border and 14px radius, holding the word in gradient-filled text and a 6×92px caret; the word cycles Billing, Analytics, Support, Payroll. Line two, 8px below, is SaaS that scales. At y 528 the lead Postgres rebuilt for apps with many customers, and at y 592 the Start with Oxbow → button.

Testimonials: 160px below the button, the centred heading What Builders Are Saying (top at y 796), then 48px below it a single row of 400×250 testimonial cards, 24px apart, bleeding off both edges and drifting left: avatar, name and role, an X-shaped close glyph at top right, a two- to four-line quote and a Read the post ghost button. Use six invented builders such as Rhea Lindqvist, CTO at Fernway.

Statement: a full-width 1016px band, 20px radius, filled with the signature gradient at 0.85 opacity, 64px padding: the Oxbow mark and wordmark in Night #0E0E0E inline with a 32px sentence — is Postgres rebuilt for B2B apps. Ship multi-tenant products that are secure, affordable and scale without effort.

Tenants: the two-line centred heading One Postgres database / Unlimited virtual tenant databases, a large isometric line drawing of six cubes on a tilted platform with edges in peach, lilac and sky on black, then three benefit columns with coloured 2px left rules.

Vectors: the heading Per-tenant vector search at a fraction of the cost and a 20px #D3D3D3 subline, then three stacked feature tiles (Apricot Cost first, Lilac Built for billions, Cyan Close to your users) beside a code card showing a CREATE TABLE, INSERT and nearest-neighbour SELECT.

Isolation: the heading Secure isolation for every customer's data, a query-console card with a Run button over a striped results table whose header row carries the signature gradient, then three feature tiles: Tenant virtualization, No hand-rolled security, Shared tables.

Autoscale: the heading Scale to millions of tenants, a line diagram of three dashed compute boxes feeding a Load balancer card, and three benefit columns.

Footer: a 1px Hairline rule, the mark and wordmark, four 14px Muted link columns (Product, Developers, Company, Legal) and a small © Oxbow line.

## 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, the signature gradient, the type sizes, the 10/14/16/20px radii and the easing curve cubic-bezier(0.2, 0.8, 0.2, 1). Render the page as server components; only the typing word and the testimonial row are small client components, and both render Billing and a static first card set on the server so markup matches before hydration. Self-host Manrope (weights 400, 500, 600, 700) and JetBrains Mono (400), both SIL Open Font License, through next/font — no remote font request at runtime. Draw the logo mark, glyphs, isometric cubes and diagrams as inline SVG; avatars are initials on a #27272A-to-#3F3F46 gradient circle. 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 Oxbow, Oxbow Vault and every testimonial author and company clearly fictional and rebrandable: no real company, product, person, quote, statistic or logo, and no third-party brand icons in the header. No analytics, tracking, chat widget or cookie banner. Never introduce a second action colour, shadows or glows; cyan stays on buttons, the gradient stays on the mark, the typing word and its frame, the statement band and table header. White, #D3D3D3 and #A1A1AA on #000000 and #16181C, and #0E0E0E on #6FE2FF, #FFBA6A and #D8D3FF, all clear WCAG AA. Every link and button shows a 2px #6FE2FF focus ring with a 2px offset. The typing word is announced once as a static phrase (aria-label Ship billing, analytics, support and payroll SaaS that scales) and the caret is aria-hidden; the drifting testimonial row has a pause control and is keyboard-scrollable. Content stays readable with JavaScript off and under prefers-reduced-motion. At 360px the header collapses to the mark and a menu button, the headline drops to 48px with the box shrinking to fit, sections stack to one column with 16px gutters, 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.