bunny.net

An original Kitfox homepage: a floating 20px-radius navy nav inside an 827px illustrated Launch Bay hero — a three-line 54px headline, a 22px lead, a 308×71 orange-to-gold trial button and a fox astronaut riding a rocket past a periwinkle planet with map pins — then a grey wordmark rail, eight white product cards orbiting a central fox engineer, a four-cell metric strip, a navy rocket promotion banner, tabs and checks, big orange network figures over a globe, a support panel, customer stories, a closing call and a footer.

• Best forCDNs, hosting, edge compute and developer infrastructure that want to feel friendly rather than enterprise — any technical product with a mascot, a free trial and hard numbers to show.
• 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 shadow token. Render the page as a server component; it needs no client JavaScript. Self-host Rubik (variable, 300–900, SIL Open Font License) as a woff2 through next/font/local — no remote font request. Draw the sky, planet, fox, rockets, map pins, stars, product mini-illustrations and wordmarks as inline SVG, never a bitmap or canvas, so every render is identical. Provide page metadata. Build and run the production page before capturing its preview.

Build the "bunny.net" kickstart — An edge-network homepage: a pale-blue page, a rounded navy launch bay with an illustrated mascot riding a rocket, an orange-to-gold trial button and white product cards orbiting a central character.

## Design
Build a rebrandable landing page for a global edge platform — CDN, storage, compute and security on one network: one network that bundles a CDN, video streaming, object storage, image optimisation, edge functions, containers, DNS and DDoS protection, sold to developers on speed, price and friendly support.

Create a complete landing page for Kitfox, a fictional edge-cloud company. This is a concept presentation, not a real company — no real product, customer, person, review site or logo. Use original branding, illustration and copy throughout; the mascot is an original fox, never a rabbit.

Color: a pale-blue page punctuated by deep navy launch bays and one warm orange signal. Cloud Canvas #E1F2FF is the page (a 0deg gradient from #E1F2FF up to #E5F4FF), never pure white across the page; Ice Surface #EFF8FF is the pale ring behind the centre mascot. White Surface #FFFFFF fills every product card and the quote card, and is the hero's headline, nav text and Login outline. Mist Divider #D3E2F1 is every vertical rule in the metric strip and outcome row. Edge Navy #183D6D is every heading and body line on light ground, the metric values and the closing panel; Graphite #666666 is secondary outcome text and footer fine print. Launch Bay #051E38 is the hero base and the promotion banner; Network Deep #022E57 is the map strip, the support panel and the footer bar; Signal Blue #8BB3DA is secondary copy on dark panels. Signal Orange #FD8D32 marks the network figures, check bullets, the active tab rule and small mascot details. Conversion buttons alone use the Comet gradient — linear-gradient(85.19deg, #FF2A64 -133.27%, #FFAF48 105.93%), which reads orange to gold — with White #FFFFFF labels. Orange is a signal, never a status system. Shadows: product cards 0 6px 40px rgba(0,0,0,0.04); the quote card 0 4px 11px rgb(212,211,221); the hero 0 24px 50px rgba(5,30,56,0.28). Nothing heavier.

Typography: one family, "Rubik", "Arial Rounded MT Bold", Arial, sans-serif, normal tracking. The hero headline 54px/64.8px at 700; section headings 45px/54px at 700 (the promotion and support headings 45px/58.5px); the hero lead 22px/30.8px at 400; centred section sub-lines 24px/38px at 400; product-card titles 20px/26px at 700 over 18px/29px copy; nav links 16px/19px at 400 and never heavier; conversion labels 20px/24px at 500 (16px/19px in the nav); reassurance lines 14px/22px at 500; metric values 28px/28px at 700 over 22px labels; the big network figures 78px at 700 with 50px units. Body copy is 18px/21.6px.

Layout: a 1440px viewport, content centred in 1140px. Radii: 6px buttons, 10px cards and banners, 20px for the hero's bottom corners, the nav bar and the support panel, 9999px for check bullets.

Navigation: a floating bar inside the hero at x 151, y 21, 1138×72px, 20px radius, rgba(10,13,52,0.55) with a 1px rgba(139,179,218,0.16) border and a 6px backdrop blur. At x 166 a 136×39 logo: an orange fox-face mark with two speed lines, then kitfox in 26px italic Rubik 700 White and a small orange italic edge. Right-aligned, 30px apart from x 507: Network, Pricing, Products, Solutions, Resources — the last three with 13px chevrons — in 16px/19px White. Then Login at x 1047 (38px tall, 1px White border, 6px radius, 9px 20px 8px padding) and, 10px after it, Get Started (38px, the Comet gradient, Rubik 500, 10px 22px 9px padding) ending at x 1274.

Hero (id top): an 827px Launch Bay panel inset 6px from each viewport edge with 20px bottom corners, painted as an illustrated night sky — #16123F to #131544 indigo with purple nebula glows (#2A1658), a pale orbit ring cutting off the left edge, scattered star dust and three rounded orange stars. Headline top at y 130, x 150, 555px wide: The global edge cloud built to outfox latency in three White lines. At y 356 the lead Give your users pages that load before they blink, defences that never doze and uptime they can set a watch by. Kitfox folds CDN, security and compute into one quick-footed platform, so every request takes the shortest path home. At y 558 a 308×71 Comet button Try free for 14 days with 24px 80px 23px 32px padding and a double chevron 32px from its right edge; at y 651 the reassurance line No card needed. Live on the edge in about two minutes. The right half holds the illustration: a 232px-radius periwinkle planet centred at x 1110, y 358 with lighter continents, three orange map pins and a fox astronaut in a glass bubble helmet with a headset, riding a big blue rocket with a gold lightning badge and orange fins, cream exhaust puffs trailing to the lower left, and two small orange rockets with fading trails crossing the edges. At y 699, centred, two invented proof marks 38px apart: Excellent underlined beside five green star squares and the word Reviewly, and an orange disc with 4.9 and on Peerboard. At y 765 the centred line Join 900,000+ websites already running on Kitfox.

Logo rail: directly under the hero, logos 30px tall at y 877, 60px apart, in #4A5058 and running off the right edge — ORBITAL, harbor.io, TESSERA, brightly, PARCELO, Quarry Foods, VELO, lumen&co, NORTHWEAVE — set in type with simple glyphs, never a real logo.

Product constellation (id products): Get to the edge and stay there, then Speed without a single trade-off. Below, a 1250×692 arrangement: a 570px fox engineer with visor and two tablets standing in Ice Surface and Cloud Canvas rings at the centre, flanked by eight 415×124 White Surface cards in two staggered columns — Edge CDN, Stream, Vault Storage, Optimizer, Edge Functions, Den Containers, DNS, Shield — each with 18px 20px 18px 32px padding, a 64px colourful mini-illustration and a 20px title over one 18px line.

Metric strip: four centred cells across 1040px split by Mist Divider rules — 131 Edge locations, 2 million+ Requests per second, 310 Tbps+ Network capacity, 21 ms Avg. worldwide latency.

Promotion banner: 160px lower, a 1110×352 Launch Bay banner with 10px radius and 60px 70px padding — Race ahead of the competition in White 45px, the Comet button, a Signal Blue Set up in seconds. No card needed. — and a white rocket carrying the fox breaking out of its top-right edge on an orange trail.

Built to scale (id scale): Simple to start. Built to scale. over a centred sub-line; three stacked tabs on the left (Connect faster. Anywhere. active with a 3px Signal Orange left rule and a white fade; Protect against the worst; Ship smarter. Everywhere.) in 30px Rubik 500, an illustration on the right, then a 4×2 grid of 18px bold checks with orange discs: From $1/month, No hidden fees, Smart caching, Real-time monitoring, DDoS protection, Free TLS certificates, Tuned for video, Pay-as-you-go pricing.

Global network (id network): A global network built for more than speed over a 24px paragraph, three Signal Orange figures 90px apart — 21 ms, 131+, 0.9+ mil — with 22px labels, a 960px white globe cap with Signal Blue land and orange PoP dots, and a 160px Network Deep strip: Reach every corner of the map with a Comet Start a 14-day free trial button.

Support (id pricing): a 1150×545 Network Deep panel with 20px radius — The friendliest support at the edge, an 18px paragraph, and 4 min, 2 hrs, 24/7 with uppercase 12px captions — beside a fox agent surrounded by floating screens.

Customer stories (id stories): Join 90k+ happy teams in 45px Rubik 300 with 90k+ bold, a White quote card, and four outcome columns split by Mist Divider rules, each a 24px Graphite outcome over an invented customer name.

Closing call (id closing): a 1140×330 Edge Navy panel with 20px radius — Take the fastest route, a 24px sentence, the Comet button and a White-outlined Talk to a Kitfox expert.

Footer: four Edge Navy link columns — Company, Products, Developers, Support — on Cloud Canvas, then a 136px Network Deep bar with 2026 All Rights Reserved © Kitfox Edge, Inc. and four small links.

## 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 shadow token. Render the page as a server component; it needs no client JavaScript. Self-host Rubik (variable, 300–900, SIL Open Font License) as a woff2 through next/font/local — no remote font request. Draw the sky, planet, fox, rockets, map pins, stars, product mini-illustrations and wordmarks as inline SVG, never a bitmap or canvas, so every render is identical. 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 Kitfox clearly fictional and rebrandable: no real company, customer, review site or person; the mascot is an original fox and never a rabbit, and no source logo, illustration, product name or copy is reproduced. The Comet gradient is only for conversion buttons; Signal Orange #FD8D32 is only for figures, bullets and small accents. Headings on light ground are always Edge Navy #183D6D, never black. Text pairs clear WCAG AA: #183D6D and #666666 on #E1F2FF and #FFFFFF, #FFFFFF and #8BB3DA on #051E38 and #022E57; button labels are White #FFFFFF at 20px/500 on the gradient, as the source does — darken the gradient's gold end if a stricter brand needs AA there. Every link leads to a real anchor on the page; the page loads no analytics or tracking script and shows no cookie banner or hiring widget. Content is initially visible; buttons and cards shift by at most 2px over 150ms on hover, and every transition stops for prefers-reduced-motion. Every control shows a 2px #FD8D32 focus ring with a 2px offset. Decorative SVG is hidden from assistive technology. At 360px the nav keeps the logo, Get Started and a Menu button, the headline drops to 36px/43px, the hero illustration moves under the copy at 320px wide, the logo rail scrolls inside itself, the constellation becomes one column of cards under the mascot, every grid stacks, 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.