Landing pages

The marketing site ships several complete landing pages, one per niche. Each one brings its own home page, header, footer and browser-tab name. You pick one in apps/marketing/config.ts:

export const config = {
	appName: "AlmostShipped",
	landingPage: "restaurant", // "saas" | "restaurant" | "institute" | "travel" | "workspace" | "ai" | "devtool" | "app" | "spend" | "commerce" | "scheduling" | "banking"
	// ...
};

That's the whole switch. Every other marketing page (blog, contact, legal) keeps working and picks up the chosen header and footer.

Available variants

Think of these like the dashboard demos: they show what the boilerplate can do. Every section is self-contained, so keep the ones you need and delete the rest from the variant's landing component.

Making a variant yours

Using the restaurant as the example; every variant has the same layout under apps/marketing/modules/home/variants/<name>/.

• Wording lives in the translations, under home.restaurant in packages/i18n/translations/<locale>/marketing.json. English, German, Spanish and French ship complete, so the language switcher translates the whole page. A test fails if any language is missing a string.
• Business details — name, rating, phone, map link, featured dishes and prices — live in data.ts.
• Photos: set image on a dish (or heroImage / familyImage) to a path under apps/marketing/public/. Until you do, each slot shows a drawn placeholder in your brand colours, so the page never looks broken.
• Colours are the --rest-* tokens in apps/marketing/app/globals.css, with separate light and dark values.
• Headline font is set in fonts.ts. Any next/font font works.
• "Book a table" opens the contact page while the contact form is on (FEATURES.contactForm), and becomes a phone link when it's off.

The SaaS variant works the same way, under home.saas and apps/marketing/modules/home/variants/saas/. Northpeak, its customers and their quotes are made up: change the name and lists in data.ts, the drawn customer wordmarks in components/CustomerLogo.tsx, and the quotes in the strings. "Start free" goes to sign-up in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" opens the contact page and is hidden while the contact form is off (lib/links.ts). The pricing cards are your real plans, read from the payments config, so they never drift from checkout. The product tour's Dashboards tab shows the demo app's own dashboard screenshot (apps/marketing/public/images/dashboard-*.webp); every other product view is drawn in code. Colours are the --saas-* tokens in app/globals.css, and the font is set in fonts.ts.

The travel variant works the same way, under home.travel and apps/marketing/modules/home/variants/travel/. Its trip dates roll forward to the next departure in data.ts, so the demo's countdown never runs out; set a fixed date for a real trip. Every "Reserve" button opens one reservation form that sends through the same handler as the contact form, so requests arrive at CONTACT_EMAIL with every answer listed and the traveller as reply-to. No payment is taken there: reply with how to pay the deposit, or wire your payment provider into lib/send-booking-request.ts.

The workspace variant works the same way, under home.workspace and apps/marketing/modules/home/variants/workspace/. Notewell, its customers, people, quotes and figures are made up: change the name, prices and lists in data.ts, the drawn customer wordmarks in components/CompanyLogo.tsx, and the words in the strings. Every picture is drawn in code, so there are no images to replace: the app window and product mock-ups live in sections/, the ink doodles in components/Doodles.tsx and the story portraits in components/Portrait.tsx. The hero's rotating word stands still for visitors who prefer reduced motion. "Get Notewell free" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Request a demo" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off (lib/links.ts). The pricing table is plain demo data in data.ts, not wired to checkout. Colours are the --work-* tokens in app/globals.css, and the font (Inter) is set in fonts.ts.

The AI variant works the same way, under home.ai and apps/marketing/modules/home/variants/ai/. Echoform, its customers, voices, models, releases and figures are made up: change the name, plans, credits and lists in data.ts, the drawn customer wordmarks in components/CompanyMark.tsx, the code samples in sections/api/samples.ts, and the words in the strings. Every picture is drawn in code, so there are no images or audio files to replace: the orbs in components/Orb.tsx, the painted art in components/GradientArt.tsx, the line drawings in components/LineArt.tsx and the app mock-ups in sections/. The play buttons read a line aloud with the browser's built-in speech (lib/use-speech.ts), in the page's language; where the browser can't speak, the orbs and waveforms still animate. The orbs' shimmer, the carousel and the waveforms stand still for visitors who prefer reduced motion. "Sign up" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Contact sales" and "Talk to sales" open the variant's own contact page, whose form sends through the same handler as every other contact form, and are hidden while the contact form is off; "Read the docs" shows when a docs URL is set (lib/links.ts). The pricing table is plain demo data in data.ts, priced in credits but not wired to checkout or to the credit system. Colours are the --ai-* tokens in app/globals.css, and the fonts (Geist at weight 300 for headings, Inter for text) are set in fonts.ts.

The devtool variant works the same way, under home.devtool and apps/marketing/modules/home/variants/devtool/. Stackline, its customers, people, agents, issues, roadmap, changelog entries and figures are made up: change the name, plans and lists in data.ts, the drawn customer wordmarks in components/CompanyMark.tsx, the diff in sections/review/diff.ts, and the words in the strings. Issue ids, people's names and code stay in data.ts, so they read the same in every language. Every picture is drawn in code, so there are no images to replace: the app mock-ups live in sections/, the isometric line drawings in components/IsoArt.tsx and the status and priority icons in components/IssueIcons.tsx. The page is designed dark-first; the site still opens in config.defaultTheme, so set it to "dark" to greet visitors with the dark version (the light theme is a finished design too, not a fallback). Rows fade in as they scroll into view, the agent's "Thinking…" shimmers, the hero's agent writes out its plan and a teammate's cursor drifts across the board; all of it stands still for visitors who prefer reduced motion. "Sign up", "Log in" and "Get started" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Contact sales" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off; "Changelog" and "View all" open the changelog page while it's on (lib/links.ts). "Learn more" and the feature links point at # until you have pages for them (set them in FEATURE_SECTIONS in data.ts). The pricing table is plain demo data in data.ts, not wired to checkout. Colours are the --dev-* tokens in app/globals.css, and the fonts (Inter, as a variable font so headings can sit at weight 510, and Geist Mono for labels and code) are set in fonts.ts.

The app variant works the same way, under home.app and apps/marketing/modules/home/variants/app/. Pennyleaf, its banks, merchants, funds, reviews, publications, people and figures are made up: change the name, price, trial length and lists in data.ts, the drawn bank marks in components/BankMark.tsx, the publication wordmarks in components/PressMark.tsx, and the words in the strings (swap in real reviews, with permission, before you go live). Merchant, bank and fund names stay in data.ts, so they read the same in every language, and every amount is formatted in pounds by the code. Every picture is drawn in code, so there are no images to replace: the phone in components/PhoneFrame.tsx (it scales with its width), and the app screens and cards in sections/. Each feature row (in the assistant section and the money tabs) shows either two separate cards side by side, one painted and one quiet, or one full-width card, each with a short caption (FeatureRow in components/ShowcaseCard.tsx); which layout a row uses is set in ASSISTANT_ROWS and MONEY_LAYOUTS in data.ts, and on phones every card stacks to full width. The cards float gently, chart lines draw in, the bank row slides and the rating counts up as they scroll into view; all of it stands still for visitors who prefer reduced motion. "Get started" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; the download pills use the store links in APP_INFO.storeLinks once you set them, and sign-up until then (they use plain icons, not the stores' badge artwork); "Get help" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off (lib/links.ts). The plan and its yearly/monthly prices are plain demo data in data.ts, not wired to checkout. Colours are the --app-* tokens in app/globals.css, and the fonts (Plus Jakarta Sans for everything, Geist Mono for the receipt-style labels) are set in fonts.ts.

The spend variant works the same way, under home.spend and apps/marketing/modules/home/variants/spend/. Tallymark, its customers, merchants, suppliers, ledger, people, quotes and figures are made up: change the name, plans, stats and lists in data.ts, the drawn customer wordmarks in components/CompanyMark.tsx, and the words in the strings (swap in real quotes, with permission, and say where your stats come from before you go live). Company, merchant and people's names stay in data.ts, so they read the same in every language, and every amount and date is formatted in pounds by the code. Every picture is drawn in code, so there are no images to replace: the company card in components/CorporateCard.tsx (no card-network logo; add your issuer's artwork if you have it), the phone in components/PhoneFrame.tsx, and the product mock-ups in sections/. The hero's cards float, the customer row slides, the "admin on autopilot" list steps through by itself while it's on screen (picking a job or the pause button stops it), the stats count up and the chart bars grow as they scroll into view; all of it stands still for visitors who prefer reduced motion. The work-email boxes go to sign-up in your SaaS app with the address filled in when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Get started" and "Log in" do the same; "Book a demo" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and falls back to sign-up while the contact form is off (lib/links.ts). The plans and their yearly/monthly prices are plain demo data in data.ts, not wired to checkout. Colours are the --spend-* tokens in app/globals.css, and the fonts (Inter Tight for everything, IBM Plex Mono for the receipt-style labels) are set in fonts.ts.

The scheduling variant works the same way, under home.scheduling and apps/marketing/modules/home/variants/scheduling/. Slotwise, its customers, apps, people, posts, reviews and figures are made up: change the name, figures, team, event types, plans and lists in data.ts, the drawn customer wordmarks in components/CompanyMark.tsx, the made-up app icons in components/AppMark.tsx, the code samples in sections/developers/samples.ts, and the words in the strings. People's, company and app names, handles and slugs stay in data.ts, so they read the same in every language, and every price, date and time is formatted by the code. Every picture is drawn in code, so there are no images to replace. The hero's booking page works: past days, weekends and full days are greyed out, the times are re-told in whichever time zone the visitor picks, in 12 or 24-hour clock, and confirming only shows a "booked" state, with nothing sent or stored (the calendar maths is in lib/calendar.ts). The event-type and availability switches, the team tabs, the routing form, the quote carousel, the code tabs (with a copy button) and the wall's "Show more" work too. Cards rise in as they scroll into view, the logo row slides, the calendar-sync ring turns and the workflow's notifications stack in on a loop; all of it stands still for visitors who prefer reduced motion. "Get started" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" and "Talk to sales" open the variant's own contact page, whose form sends through the same handler as every other contact form, and are hidden while the contact form is off; "Read the docs" shows when a docs URL is set (lib/links.ts). The plans and their monthly/yearly prices are plain demo data in data.ts, not wired to checkout. Colours are the --slot-* tokens in app/globals.css, and the fonts (Outfit for headings, Inter for text and Geist Mono for labels and code) are set in fonts.ts.

The commerce variant works the same way, under home.commerce and apps/marketing/modules/home/variants/commerce/. Cartloom, its merchants, products, customers, carriers, apps, quotes and figures are made up: change the name, plans, markets, orders and lists in data.ts, the merchants' wordmarks in components/BrandMark.tsx, and the words in the strings (swap in real merchants and quotes, with permission, and say where your stats come from before you go live). Brand, product, carrier, app, customer and town names stay in data.ts, so they read the same in every language, and every amount and date is formatted by the code (pounds, plus each market's own currency on the borders card). Every picture is drawn in code, so there are no images to replace: the products (a mug, candle, trainer, tote, jumper, serum and lamp) in components/ProductArt.tsx, each coloured from one tone in PRODUCTS, the dotted map and globe from the rough land grid in lib/world.ts, the made-up app icons from generic glyphs in sections/Apps.tsx, and the store, admin, checkout and till mock-ups in sections/. No real network, marketplace, carrier or payment brand appears. The header, hero, AI band, green band, closing band and footer stay dark in both themes; the sections between them turn white in light mode. The hero's second line rotates and its orders pop in, the admin's rings turn, the app wall drifts, the AI prompt types itself, the stats count up, chart lines and the globe's arcs draw in, and cards rise as they scroll into view; all of it stands still for visitors who prefer reduced motion. "Start free trial" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Contact" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off (lib/links.ts). The plans and their yearly/monthly prices are plain demo data in data.ts, not wired to checkout. Colours are the --cart-* tokens in app/globals.css, and the fonts (Inter for everything, IBM Plex Mono for the small stat labels) are set in fonts.ts.

The banking variant works the same way, under home.banking and apps/marketing/modules/home/variants/banking/. Harbourline is not a bank: it, its customers, people, quotes, publications, ratings and figures are made up, and the footer's numbered notes say so. Change the name, figures, accounts, plans and lists in data.ts, the customers' wordmarks in components/CompanyMark.tsx, the publications' in components/PressMark.tsx, and the words in the strings. Before you use it for a real financial product, replace the made-up figures and add your own legal and regulatory wording; the page names no regulator, partner bank or deposit-protection scheme, and its savings and exchange-rate mock-ups are labelled illustrative rather than offered. Company, merchant and person names stay in data.ts, so they read the same in every language, and every amount and date is formatted by the code (balances show their pence small and raised, as in the app). Every picture is drawn in code, so there are no images to replace: the hero's harbour scene in sections/hero/HarbourScene.tsx (its colours are the --bank-sky-*, --bank-hill-* and --bank-water-* tokens, dusk in light mode and a moonlit blue hour in dark), the web app's home screen in sections/hero/DashboardWindow.tsx, the cards in components/PayCard.tsx (no real card network's mark), the phone in components/Phone.tsx, and the other mock-ups in sections/. The page runs in bands that change tone as it scrolls (night, warm sand, cool light, night again); each section says which it is with data-bank-tone, and the header follows the band under it. The night bands stay dark in both themes; in dark mode the light bands turn charcoal. The overview and the two split rows open their next item on a timer (FeatureAccordion), pausing under the pointer, and the story carousel fills a progress bar per story and has a pause button; the scene's mist, water and lighthouse move gently, the app window rises as it scrolls into view, the stats count up and cards rise in; all of it stands still for visitors who prefer reduced motion. "Open account" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the plans otherwise; "Talk to sales" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off; the news cards open the blog while it's on (lib/links.ts). The plans and their prices are plain demo data in data.ts, not wired to checkout. Colours are the --bank-* tokens in app/globals.css, and the font (Hanken Grotesk as a variable font, so headings can sit at weight 480) is set in fonts.ts.

The hr variant works the same way, under home.hr and apps/marketing/modules/home/variants/hr/. Crewlane, its customers, people, reviews, payroll figures and exchange rates are made up, and the footer says so. Its contract, payroll and visa mock-ups name local terms without quoting any law, rate or statutory figure, and no page claims a legal entity in a named country: add your own legal wording before you use it for a real service. Change the name, figures, people, countries, plans and lists in data.ts, the drawn customer wordmarks in components/CompanyMark.tsx, and the words in the strings (swap in real reviews, with permission, and say where your stats come from before you go live). People's and company names stay in data.ts, and countries are ISO codes named in the visitor's language by the browser, so none of them need translating; every amount and date is formatted by the code, in pounds for the plans and in each country's own currency in the mock-ups. Every picture is drawn in code, so there are no images to replace: the dotted world map from the rough land outlines in lib/world.ts (one SVG path), and the hero's stage, product cards, payroll dashboard, profile and checklist in sections/. Countries show as two-letter tags rather than flags. The hero's tiles light up their cards, the speed tabs redraw their timeline, the onboarding checklist ticks, and the stories and reviews scroll on arrows; the hero's cards float, the logo and chip rows drift, the map's pins pulse, the payroll bars grow, the stats count up and cards rise in as they scroll into view; all of it stands still for visitors who prefer reduced motion. "Get started" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" and the floating pill's "Talk to us" open the variant's own contact page, whose form sends through the same handler as every other contact form, and go to sign-up while the contact form is off (lib/links.ts). The plans and their prices are plain demo data in data.ts, not wired to checkout. Colours are the --hr-* tokens in app/globals.css, and the fonts (Bricolage Grotesque, narrowed with its width axis, for headings, and Instrument Sans for text) are set in fonts.ts.

The agency variant works the same way, under home.agency and apps/marketing/modules/home/variants/agency/. Plotline, its studios, clients, people, apps, review sites and figures are made up, and the footer says so. Change the name, people, projects, bookings, plans and lists in data.ts, the drawn studio wordmarks and app marks in components/StudioMark.tsx and components/AppMark.tsx, and the words in the strings (swap in real quotes, with permission, and say where your stats come from before you go live). People's, studios', clients' and apps' names stay in data.ts, so none of them need translating; every amount, hour and date is formatted by the code. Every picture is drawn in code: the working schedule in sections/hero/ScheduleDemo.tsx (its rules, such as which day a bar may move to and who's over capacity, are plain functions in lib/schedule.ts), and the heatmap, burn chart, report, timesheet, calendar and hub in sections/. The schedule's bars drag (or move with the arrow keys) and snap to days, the status line and person card update as you go, the leave request can be approved or declined and undone, and the pricing switch flips the plans; the story's media cross-fades as you scroll, the hero's cards float, the studio and quote rows drift, the burn line draws in, the stats count up and cards rise in; all of it stands still for visitors who prefer reduced motion. "Start free" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" and "Book a walkthrough" open the variant's own contact page, whose form sends through the same handler as every other contact form, and go to the pricing section while the contact form is off (lib/links.ts). The plans and their prices are plain demo data in data.ts, not wired to checkout. Colours are the --plot-* tokens in app/globals.css, and the fonts (Sora for headings and Onest for text) are set in fonts.ts.

The crm variant works the same way, under home.crm and apps/marketing/modules/home/variants/crm/. Kinfold, its customers, the companies and people in the mock-ups, the deals, quotes and figures are made up: change the name, companies, deals, plans, changelog and lists in data.ts, the customer wordmarks in components/CustomerMark.tsx, the little company logos in components/CompanyBadge.tsx, and the words in the strings (swap in real customers and quotes, with permission, and say where your stats come from before you go live). People's and company names, domains and towns stay in data.ts, so they read the same in every language, and every amount and date is formatted in pounds by the code. Every picture is drawn in code, so there are no images to replace: the app mock-ups are in sections/ (the hero's table in sections/hero/, one folder per chapter's mock-ups in sections/chapters/, the sync card and record page in sections/sync/, the black band's horizon, tunnel, code card and line drawing in sections/memory/), and the integration tiles are generic icons, not real brands. The board/table switch, the pricing switch, the story tabs and the black band's list work; the research agent ticks through its steps and fills in the record, the sync feed files new messages and its totals tick up, and the black band's list advances by itself, all only while they're on screen; the hero's last row shimmers until it's enriched, dashes flow along the workflow's edges, the integration row slides, the quote fills in from grey to ink as you scroll, the growth curve draws in and the stats count up. All of it stands still for visitors who prefer reduced motion. The header turns dark over the black band and the footer. "Start for free" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Talk to sales" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off; "Browse integrations" opens the docs when a docs URL is set (lib/links.ts). The plans and their yearly/monthly prices are plain demo data in data.ts, not wired to checkout. Colours are the --crm-* tokens in app/globals.css, and the fonts (Instrument Sans for everything, Newsreader for the quote and JetBrains Mono for code and small labels) are set in fonts.ts.

The creator variant works the same way, under home.creator and apps/marketing/modules/home/variants/creator/. Thrivecast, its creators, quotes, stats and earnings are made up, and the page says so wherever it shows earnings (under the hero's figures, under the spotlight and the stories, in the pricing note and in the footer). Change the name, creators, figures, plans and lists in data.ts and the words in the strings (swap in real stories, with permission, and say where your figures come from before you go live). People's names stay in data.ts, so they read the same in every language, and every amount, count and date is formatted by the code, in pounds. Every picture is drawn in code, so there are no photos to replace: the people are flat illustrated portraits (components/Portrait.tsx, one look per person in data.ts) on warm studio scenes (components/Scene.tsx), and the product mock-ups are in sections/ (the spotlight's cards in sections/hero/, the five product cards in sections/products/, the dashboard, checkout and funnel in sections/platform/, the new-tool drawings in sections/releases/). The spotlight moves on by itself (it pauses while hovered or focused) and has arrows; the product tabs slide their carousel (and the header's product links open the right card); the stories move on arrows; the pricing switch flips the plans; the funnel's and network's dashes flow, Spark's prompt types itself, the revenue line draws in, the stats count up and rows rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start free trial" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a walkthrough" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and goes to sign-up while the contact form is off (lib/links.ts). There's no email box anywhere, so nothing personal ends up in a URL. The plans and their prices are plain demo data in data.ts, not wired to checkout. Colours are the --thrive-* tokens in app/globals.css, and the fonts (Host Grotesk for everything and Red Hat Mono for the small figures in the mock-ups) are set in fonts.ts.

The design variant works the same way, under home.design and apps/marketing/modules/home/variants/design/. Tessel, its customers, the sites in the showcase, the templates, plugins and creators in the marketplace, the people and every figure are made up: change the name, lists, plans and figures in data.ts, the customer wordmarks in components/CompanyMark.tsx, and the words in the strings (swap in real customers and stories, with permission, before you go live). Brand, site, template and people's names, domains and the localisation card's little bakery page (written in each language on purpose) stay in data.ts, so they read the same in every language, and every price, count and date is formatted by the code, in pounds. Every picture is drawn in code, so there are no screenshots to replace: the editor in sections/hero/HeroCanvas.tsx, the miniature sites in components/SiteThumb.tsx (one art direction per site), and the other mock-ups in sections/ (the AI build in sections/ai/, the timeline, components and effects in sections/tools/, the CMS, languages and SEO in sections/content/, the platform cards in sections/platform/, the marketplace window in sections/marketplace/). The hero's breakpoint switcher works (it cycles Desktop, Tablet and Phone by itself until you pick one, and the drawn site reflows with container queries) while a cursor drags an image into place; the AI prompt types itself and the page assembles section by section, with Replay; the timeline plays with a pause button; the CMS posts' Live/Draft switches update the journal beside them; the language tabs flip the page; the Publish button runs the domain steps; the marketplace tabs, the pricing switch and the closing prompt box (which types example prompts and is a link to sign-up, not a form) all work; the showcase rows drift and pause on hover, the stories' figures count up and sections rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Sign up", "Start for free" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Talk to sales" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off (lib/links.ts). The plans and their yearly/monthly prices are plain demo data in data.ts, not wired to checkout. Colours are the --tess-* tokens in app/globals.css (dark-first, with a light theme of its own), and the fonts (Albert Sans for everything and DM Mono for the small labels in the mock-ups) are set in fonts.ts.

The email variant works the same way, under home.email and apps/marketing/modules/home/variants/email/. Postwire, its customers, the people, domains, addresses, IPs and every figure are made up: change the name, lists, plans and figures in data.ts, the customer wordmarks in components/CompanyMark.tsx, and the words in the strings (swap in real customers and stories, with permission, before you go live). Code samples, event names, DNS values, brand and people's names stay in data.ts, so they read the same in every language; the template studio builds its TSX from the translated words, so the code and the rendered email always match, and every price, count, percentage and time is formatted by the code, in pounds. Every picture is drawn in code: the hero's glass envelopes in sections/hero/EnvelopeStack.tsx, the glossy section icons in components/IconTile.tsx, and the product mock-ups in sections/ (the code card in sections/integrate/, the sandbox and webhook log in sections/developers/, the composer, audience cards, template studio, DNS, warm-up and reputation cards, dashboard and pricing in their own folders). The language tabs, the sandbox's Send button, the template files and preview switches, "Check again", the dashboard tabs and the pricing switch all work; the webhook log adds an event every few seconds while it is on screen, the stories drift and pause on hover, and sections rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Get started" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Read the docs" goes to NEXT_PUBLIC_DOCS_URL when it is set and to the code sample otherwise; "Talk to sales" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and is hidden while the contact form is off (lib/links.ts). The plans are plain demo data in data.ts, not wired to checkout. Colours are the --post-* tokens in app/globals.css (dark-first, with a light theme of its own; the code windows stay dark in both), and the fonts (Instrument Serif for the hero, Space Grotesk for headings, Golos Text for text and Fragment Mono for code) are set in fonts.ts.

The support variant works the same way, under home.support and apps/marketing/modules/home/variants/support/. Calmdesk, its customers, the people, threads, quotes and every figure are made up: change the name, threads, lists, plans and figures in data.ts, the customer wordmarks in components/CompanyMark.tsx, and the words in the strings (swap in real customers and quotes, with permission, before you go live). Company, person and agent names, ticket numbers, endpoints and code stay in data.ts (the code samples in sections/developers/samples.ts), so they read the same in every language, and every amount, count, date and time is formatted by the code, in pounds. Every picture is drawn in code, so there are no screenshots to replace: the app window in sections/hero/InboxWindow.tsx, the platform band's green drawings in sections/platform/Glyphs.tsx, and the other mock-ups in sections/ (the agent player in sections/agents/, the routing workflow in sections/workflows/, the timeline and SLA cards in sections/context/, the article in sections/help/, the chart in sections/insights/, the code window and composer in sections/developers/). Channels and integrations are generic icons, not any chat app's or tracker's logo. The inbox's threads open on click and their SLA timers tick down live; the agent player plays its ticket when it scrolls into view, with a switch between a resolution and a handoff and a Replay button; the routing workflow cycles its example threads while it's on screen (the chips pick one by hand); the chart's view switch, the code tabs (with copy) and the pricing switch work; the SLA ring counts down, chart bars grow, lines draw in, the stories' results count up and sections rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start free trial" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and goes to sign-up while the contact form is off (lib/links.ts). The plans, their yearly/monthly prices and the price per AI resolution are plain demo data in data.ts, not wired to checkout. Colours are the --calm-* tokens in app/globals.css, and the fonts (Funnel Sans for everything and Fragment Mono for the buttons, small labels, timers and code) are set in fonts.ts.

The healthcare variant works the same way, under home.healthcare and apps/marketing/modules/home/variants/healthcare/. Wellroom, its clinics, practitioners, patients, stories and every figure are made up, and nothing on the page is medical advice (the footer says so): change the name, people, appointments, plans and figures in data.ts and the words in the strings (swap in real clinics and stories, with permission, before you go live). Insurance claims stay generic, with no insurer named. People's, clinics' and towns' names stay in data.ts, so they read the same in every language, and every amount, date and time is formatted by the code, in pounds and British order. There are no photos to replace: the practitioners and patients are flat drawings in components/Person.tsx (skin tone, hair or head scarf, glasses and clothes set per person in PEOPLE), the calendar is components/DayCalendar.tsx, the video call components/VideoCall.tsx, the feature mock-ups are in sections/features/, and the rooms, round "why" pictures, support scenes and desk are in sections/stories/, sections/why/, sections/support/ and sections/FinalCta.tsx. The feature tabs switch on click and with the arrow keys, and a /#feature-<tab> link (the header's Features menu, the footer) opens that tab; the stories carousel steps with its arrows and dots, the pricing switch works, the video timers tick, the hero's cards float, chart bars grow, lines draw in, figures count up and sections rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start free trial" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and goes to sign-up while the contact form is off. The journal strip links to the blog and hides while the blog is off; it has no email field (lib/links.ts). The plans and their monthly/yearly prices per practitioner are plain demo data in data.ts, not wired to checkout. Colours are the --well-* tokens in app/globals.css, and the fonts (Fraunces for headings, softened with its SOFT axis, and Nunito Sans for everything else) are set in fonts.ts.

The nonprofit variant works the same way, under home.nonprofit and apps/marketing/modules/home/variants/nonprofit/. Hearthfund, its charities, campaigns, donors, supporters, bank and every figure and story are made up (the footer says so): change the name, people, plans and figures in data.ts and the words in the strings (swap in real charities and stories, with permission, before you go live). Tax wording stays generic on purpose ("tax relief", "tax-back claims on eligible gifts"), with no real scheme named: name the one your country has. People's, charities' and place names stay in data.ts, so they read the same in every language, and every amount and date is formatted by the code, in pounds and British order. There are no photos to replace: the people are flat drawings in components/Person.tsx (skin tone, hair or head scarf, glasses and clothes set per person in PEOPLE), the hero, carousel and story scenes are in sections/hero/, sections/tools/ and sections/stories/, the textured colour fields in components/FieldPanel.tsx and components/Grain.tsx, the two-tone icons in components/TwoToneIcon.tsx, and the product mock-ups in sections/. The donation form works (pick one-off or monthly and an amount, tick the fees and the total changes, though nothing is sent), the carousel steps with its arrows, dots, swipes and arrow keys, the pricing switch works, the counters count up, progress bars fill, chart bars grow, the hero's bunting sways and its card floats, and rows rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start free" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" and "Talk to our team" open the variant's own contact page, whose form sends through the same handler as every other contact form, and hide while the contact form is off. The stories link to the blog while it's on; the footer's call to action has no email field (lib/links.ts). The plans are plain demo data in data.ts, not wired to checkout. Colours are the --hearth-* tokens in app/globals.css, and the fonts (Crimson Pro for headings, Montserrat for text and Barlow Condensed for the small capitals) are set in fonts.ts.

The invoicing variant works the same way, under home.invoicing and apps/marketing/modules/home/variants/invoicing/. Paperlane, its freelancers, clients, reviews, studio wordmarks and every figure are made up (the footer says so): change the name, clients, invoices, plans and figures in data.ts and the words in the strings (swap in real customers and reviews, with permission, before you go live). The setting is British (pounds, VAT at 20%), and the tax wording stays generic on purpose: the tax pot and VAT figures are labelled as estimates to help plan, not tax advice, in the report, the questions and the footer. People's, companies' and file names, invoice numbers and amounts stay in data.ts, so they read the same in every language, and every amount, date and time is formatted by the code. Every picture is drawn in code: the app window in components/AppWindow.tsx, the paper-art backdrops in components/PaperArt.tsx, the wordmarks in components/CompanyMark.tsx, the dot-matrix icons in components/DotIcon.tsx, the seven tool views in sections/tour/, the chapter cards in sections/chapters/ and the automation and bank-feed cards in sections/smarter/. Integrations are generic icons, not any other company's logo. The tour plays through its tabs while it's on screen (paused on hover, stopped once you pick a tab), the contract's signature writes itself, the "Pay now" button gets tapped and the payment lands, the timer ticks, a scan line sweeps the receipt, chart bars grow and lines wipe in, the wordmarks drift, the pricing switch works and sections rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start free" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Talk to us" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and hides while the contact form is off; "Read more stories" shows while the blog is on (lib/links.ts). The plans are plain demo data in data.ts, not wired to checkout. Colours are the --paper-* tokens in app/globals.css, and the fonts (Rethink Sans for everything and Mrs Saint Delafield for the signatures) are set in fonts.ts.

The fitness variant works the same way, under home.fitness and apps/marketing/modules/home/variants/fitness/. Nimbus Ring is a fictional demo product, and its members, quotes, publications, survey and every figure are made up (the footer and the press footnotes say so): change the name, prices, finishes, figures and lists in data.ts and the words in the strings (swap in real reviews and coverage, with permission, before you go live). The health wording stays on general wellbeing on purpose: trends, patterns and "your usual range", no diagnoses, conditions or regulatory claims, cycle insights kept generic, and Coach, the questions and the footer all say that nothing here is medical advice. Have your own wording checked before you put a real product here. People's and publications' names stay in data.ts, so they read the same in every language, and every price, duration, time and temperature is formatted by the code, in pounds and British style. There are no photos to replace: the ring is drawn in components/RingRender.tsx (the finishes are colour ramps in FINISHES), the painted scenes in components/Scene.tsx, the phone in components/PhoneFrame.tsx, the five app screens in sections/app/, the day's cards in sections/day/ and the Coach chat in sections/coach/. The topic cards widen on "+" (and scroll with their arrows, a swipe or the keyboard; /#topic-sleep and friends jump to one), Coach answers whichever prompt you pick, the finish switch recolours the ring, the pricing switch works, the header slides away as you read down and returns as a floating bar, light sweeps across the ring, the metric tiles drift, score rings and charts draw in and rows rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Shop the ring", "Start membership" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Nimbus Care" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and hides while the contact form is off. The footer has no email field: it links to the journal (while the blog is on) and to sign-up instead (lib/links.ts). Prices are plain demo data in data.ts, not wired to checkout. Colours are the --nimbus-* tokens in app/globals.css, and the fonts (Noto Serif Display, set narrow and light, for the display lines and Public Sans for everything else) are set in fonts.ts.

The marketplace variant works the same way, under home.marketplace and apps/marketing/modules/home/variants/marketplace/. Talentry, its independents, studios, clients, reviews and every figure are made up: change the name, people, work, stories, plans and figures in data.ts and the words in the strings (swap in real people and reviews, with permission, before you go live). People's, studios' and clients' names, the brand words drawn inside the artwork and the trending hashtags stay in data.ts, so they read the same in every language, and every amount, rate, date and count is formatted by the code, in pounds and British style. The payment wording stays generic on purpose: milestones are "funded and held" by a payments partner until the client approves, with no legal escrow claims, and the fee comparison is against "a typical marketplace" and "an agency", not named companies. There are no photos to replace: the portfolio pieces are drawn in components/Artwork.tsx (eleven kinds, from brand marks and websites to film frames and 3D, in the fixed palettes in data.ts), the illustrated faces in components/Avatar.tsx (each person's look is in PEOPLE), the app windows in components/AppWindow.tsx and the product views in sections/. The hero's switch changes its line, the typed examples and the chips; the discovery switch and tabs swap the tiles and cards; the search chips filter the results; the pricing switches work; the trending row scrolls with its arrows; match rings draw in, budget and milestone bars grow, figures count up and rows rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Sign up", "Post a brief", "Let's go" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; nothing a visitor types is carried along. "Get help" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and hides while the contact form is off (lib/links.ts). The plans are plain demo data in data.ts, not wired to checkout. Colours are the --tal-* tokens in app/globals.css, and the fonts (Wix Madefor Display for headings and Wix Madefor Text for everything else) are set in fonts.ts.

The forms variant works the same way, under home.forms and apps/marketing/modules/home/variants/forms/. Formlark, its studio, bakery, customers, reviewers, team and every figure are made up (the footer says so): change the name, people, responses, prices and figures in data.ts and the words in the strings (swap in real customers and reviews, with permission, before you go live). People's, company and file names, links and amounts stay in data.ts, so they read the same in every language, and every amount, date, time and file size is formatted by the code, in pounds and British order. There are no photos or screenshots to replace: the doodles are our own SVG drawings in components/Doodles.tsx (the lark, bubbles, a paper plane, one cluster per section, the hills and the laptop), the people are line-drawn faces in components/DoodleFace.tsx, the wordmarks and integration tiles are in components/CompanyMark.tsx and components/AppMark.tsx (plain icons on coloured tiles, never another company's logo), and the product mock-ups are in sections/. Most of it works: the hero's editor types a form by itself while it's on screen, the "Just type" line is a real combobox (type /, filter, pick with the arrow keys and Enter), the AI card drafts any of its three prompts, the respondent window steps through its questions (pick options, dates, stars and scores, and draw a signature), the logic rule follows your score and can be switched off, the bakery total and its Pay button add up as you change the order, the hidden-field link switches person, the responses filter, the theme switcher re-dresses the form, the popup opens, "Copy link" copies, the pricing switch works, squiggles draw themselves under heading words, doodles wiggle on hover and cards rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Create a form" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Contact us" opens the variant's own contact page (a Formlark-style form whose message sends through the same handler as every other contact form) and hides while the contact form is off (lib/links.ts). The plans are plain demo data in data.ts, not wired to checkout. Colours are the --lark-* tokens in app/globals.css, and the fonts (Reddit Sans for everything, Caveat for the handwritten notes and Reddit Mono for links and code) are set in fonts.ts.

The cloud variant works the same way, under home.cloud and apps/marketing/modules/home/variants/cloud/. Rootbase, its customers, people, posts, stories and every figure are made up (the footer says so): change the name, figures, tables, stories, posts and plans in data.ts, the client-library samples in sections/libraries/samples.ts, and the words in the strings (swap in real customers and quotes, with permission, before you go live). Company, people's and framework names, handles, code, table and column names stay in the data, so they read the same in every language, and every price, size, count and percentage is formatted by the code, in pounds and British style. There are no screenshots or third-party logos to replace: the product tiles' drawings are in sections/hero/, the dashboard windows in sections/dashboard/, the branching diagram in sections/workflow/, the made-up logos in components/CompanyMark.tsx, the framework marks in components/QuickstartMark.tsx (generic shapes, never the frameworks' own logos), the language tabs are plain monograms and the community posts are generic cards with no social network's branding. The dashboard tabs swap their windows, the language tabs swap the sample, the heading and the install line (and "Copy" copies), the story strips widen on hover, focus or click (and open in place on phones), the realtime cursors wander, the sign-ins drift, the schema and branch lines flow, the SQL caret blinks, the dot-matrix display lights up and cards rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start your project" and "Sign in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Book a demo" and "Talk to the team" open the variant's own contact page, whose form sends through the same handler as every other contact form, and hide while the contact form is off; "Docs" and the guide links use NEXT_PUBLIC_DOCS_URL when it is set (lib/links.ts). The footer has no email field. The plans are plain demo data in data.ts, not wired to checkout. Colours are the --root-* tokens in app/globals.css, and the fonts (DM Sans for everything and Source Code Pro for code) are set in fonts.ts.

The events variant works the same way, under home.events and apps/marketing/modules/home/variants/events/. Invitely, its hosts, guests, events, venues, publications, reviews and every figure are made up (the footer says so): change the name, people, invites, guest list, poll, tickets, reviews and plans in data.ts and the words in the strings (swap in real reviews and coverage, with permission, before you go live). People's, venues' and publications' names stay in data.ts, so they read the same in every language, and every price, fee, date, time and count is formatted by the code, in pounds and British style. There are no photos to replace: the invite covers are drawn in components/InviteArt.tsx (twelve themes built from gradients, patterns and SVG doodles; a long word shrinks the title rather than breaking it), the faces in components/Avatar.tsx (each person's look is in PEOPLE), the party "photos" in components/PhotoArt.tsx, the phone in components/PhoneFrame.tsx, the ticket's code in components/QrCode.tsx (it looks the part but doesn't scan) and the app screens in sections/. The hero's pile deals a new cover to the front every few seconds, the RSVP picker counts you in and fires confetti for "Going", the theme studio restyles the invite (and "Surprise me" rolls all three choices), the dark band's phone swaps screens as each step passes (the blast types itself, the poll's bars grow and the bell rings), the guest list tabs, pricing switch and review arrows work, the occasions fan and the closing rings drift, and cards rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Start an invite" and "Log in" go to sign-up and the app in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Download the app" scrolls to the store pills, which use your store links once they're set in data.ts; "Say hello" and "For venues and clubs" open the variant's own contact page, whose form sends through the same handler as every other contact form, and hide or fall back to sign-up while the contact form is off (lib/links.ts). The plans are plain demo data in data.ts, not wired to checkout. Colours are the --invite-* tokens in app/globals.css, and the fonts (Anybody, squeezed narrow for the poster headings, and Schibsted Grotesk for everything else) are set in fonts.ts.

The desktop variant works the same way, under home.desktop and apps/marketing/modules/home/variants/desktop/. Flint, its extensions, authors, team, people, quotes and every figure are made up (the footer says so): change the name, search results, clipboard entries, layouts, extensions, people, themes and plans in data.ts and the words in the strings (swap in real extensions and quotes, with permission, before you go live). Extension, people's and company names, links, file names and code stay in data.ts, so they read the same in every language, and every price, count, time, percentage and unit is formatted by the code, in pounds and British style. There are no screenshots or third-party logos to replace: the light bars are CSS in components/Beams.tsx, the hero keycap is sections/hero/HeroKeycap.tsx, the keyboards are components/Keyboard.tsx and the values grid, the icon tiles are plain glyphs on gradients in components/AppTile.tsx (never another company's logo), people are initials in components/Avatar.tsx, the blueprint's drawings are sections/developers/IsoFigure.tsx, and the app windows are in sections/. No Apple logo or trademark is used: the menu bar carries Flint's own mark. Most of it works: the command bar types its demo query once it's on screen, then filters as you type (lib/search.ts), moves with the arrow keys, runs with return (a stage tool opens that tool) and opens actions with ⌘K; the clipboard filters and previews entries; the calculator types and answers its examples (the exchange rate is a demo rate); the window layouts glide into place; the AI chat ticks its steps and streams the answer, Quick AI types its prompts and AI Commands runs its steps; the store tabs, the Huebox palette, the people row, the theme picker and the pricing switch work; snippets expand, the quicklink fills its link, the hotkeys press and cards rise in as they scroll into view. All of it stands still for visitors who prefer reduced motion. "Download for Mac" uses DESKTOP_INFO.downloadUrl once you set it, and sign-up in your SaaS app (or the pricing section) until then; "Get Pro" and "Log in" go to sign-up and the app when NEXT_PUBLIC_SAAS_URL is set, and to the pricing section otherwise; "Talk to us" opens the variant's own contact page, whose form sends through the same handler as every other contact form, and falls back to sign-up while the contact form is off; "Read the docs" shows when NEXT_PUBLIC_DOCS_URL is set (lib/links.ts). The footer has no email field. The plans are plain demo data in data.ts, not wired to checkout. Colours are the --flint-* tokens in app/globals.css, and the fonts (Be Vietnam Pro for everything and Azeret Mono for the small print, keys and blueprint) are set in fonts.ts.

The institute works the same way, under home.institute and apps/marketing/modules/home/variants/institute/. Its "Enrol" and "Start learning" buttons go to sign-up in your SaaS app when NEXT_PUBLIC_SAAS_URL is set, to the contact page otherwise, and to the pricing section if the contact form is off too, so they never lead to a 404. Its "Become a teacher" form sends through the same handler as the contact form, so applications arrive at CONTACT_EMAIL with the applicant as reply-to.

Adding your own niche

1. Create apps/marketing/modules/home/variants/<name>/ with a page, a header and a footer component. Optionally add a Contact component too: the /contact page then shows it, in your variant's style, instead of the plain contact page. Put the shared ContactForm inside it (its fieldClassName and submitClassName props restyle the fields and button), so messages still go through the one handler. The institute variant does this.
2. Register it in apps/marketing/modules/home/variants/registry.ts.
3. Set landingPage: "<name>" in the config.

The registry's keys are the config's type, so a misspelled variant name fails the build instead of rendering a blank page. Delete the folders for the niches you don't use.