Landing page and branding

WordsCopy Anchor Link

Every word on the landing page lives in src/content/landing.ts, one object per section:

The site name, tagline and description used in page titles and share previews are in siteConfig in src/config.ts.

Brand colourCopy Anchor Link

The brand colour is the --primary token in src/app/globals.css. Set it in both places:

:root, .light {
  --primary: #2563eb;
  --primary-foreground: #ffffff;
}

.dark {
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
}

--primary-foreground is the text colour on top of it. Keep at least 4.5:1 contrast between the two (check with any contrast checker), or button text becomes hard to read. For a light brand colour such as yellow, use dark text.

Feature iconsCopy Anchor Link

Each feature has an icon name. Available: lightning, bell, chart, shield, plug, users, clock, sparkle, lock, globe, envelope, receipt.

To add one, for example a rocket from Phosphor Icons:

1. Add "rocket" to the IconName type in src/content/landing.ts.
2. In src/components/landing/sections.tsx, import it from @phosphor-icons/react/dist/ssr and add it to the icons map:

import { RocketLaunch } from '@phosphor-icons/react/dist/ssr';

const icons = {
  // …
  rocket: RocketLaunch,
};

LayoutCopy Anchor Link

The layout is in src/components/landing/sections.tsx. To remove a section, delete its component from src/app/page.tsx. Marketing text uses named styles from globals.css (heading-1, body-3, button-md…), so new sections match.

Always lightCopy Anchor Link

The landing page, blog and legal pages always use the light theme, whatever the visitor's system setting. They're wrapped in LightPage (src/components/landing/light-page.tsx). Keep new marketing pages inside it. The dashboard follows the visitor's theme.

Legal pagesCopy Anchor Link

src/app/(legal)/terms and privacy are templates. Replace every [bracketed] part with your details, including your refund policy, and have them reviewed for the countries you sell in.

The "Acme" bannerCopy Anchor Link

While siteConfig.name is still "Acme", a banner reminds you (in development only) to customise the site. It goes away once you change the name.