Marketing pages

Beginner walkthrough

Prerequisites: Read the two beginner guides below, finish Web local setup, and open this monorepo at its root in your editor. Web settings belong in apps/web/.env.local; Next.js does not read the root .env. /dashboard in the default fake mode is a no-database demo; /auth needs a migrated database.

Quick terms: a workspace is one team's separate users, data, and settings. The server is the trusted backend; keep provider keys out of browser and phone code. A migration is a versioned database change that creates or updates tables. An AI model is the engine that answers; the model catalog is the server's list of available model IDs and prices. A provider is an outside service such as an AI, email, or billing service. An entitlement is a grant that lets a workspace use a feature. A webhook is a message one service sends to another service's URL.

1. Open apps/web/src/marketing/site-config.ts and change the product name, tagline, navigation labels/URLs, and support address to values you own.

2. Replace apps/web/public/og.png and update its alt text and dimensions in apps/web/src/marketing/seo.tsx as one change.

3. Refresh the home, FAQ, footer, and social preview. If old text remains, search this repo for the old name before publishing.

For custom code, start with the supplied prompts/README.md and copy the closest prompt: prompts/new-app-screen.md for an app screen or prompts/new-landing-page.md for a public page. For server, database, or provider work, give your coding agent this guide's task and ask it to read AGENTS.md, .ai/PROJECT_CONTEXT.md, and matching .ai/ mirrors; inspect the exact source files named here; list files and checks before editing; preserve workspace ownership and server-only secrets; and show you the diff. Tell it the behavior you want, input and output fields, allowed roles, expected success and errors, and the test account, provider, or device. Use sample values; never paste a real secret.

• Before you start
• Terminal basics
• Web local setup
• Agent prompts & project memory

Update the site configuration

apps/web/src/marketing/site-config.ts owns brand copy, navigation/footer links, FAQ and optional repository/docs destinations. Update this before scattering product names across components. The kit's own chrome uses this config; the copyable chrome blocks accept product props.

Replace the asset family together

The shared four-tile mark has white top-left/bottom-right and gray top-right/bottom-left tiles with thin outlines. Keep header marks transparent; app icons/favicon use the rounded black backing. Derived products can replace the mark and its associated app/desktop assets together.

The shared public social card is /og.png; update its descriptor in marketing/seo.tsx with the dimensions and alt text. Blog article cards use their separate Next image route.

Check every public surface

Verify header/footer, contact, FAQ, legal pages, localized home copy, titles and social cards. Choose your product's marketing theme mode and only ship support/contact links that work.

• Product styles
• Legal page scaffold
• Metadata and social cards

Setup and configuration

The marketing surface is wired to typed data rather than hardcoded JSX — hero, feature sections, pricing, FAQ, changelog, showcase, contact, and legal pages all read copy and structure from the site configuration and content files.

MARKETING_THEME_MODE (src/theme/marketing-theme.ts) decides whether marketing stays on the kit's locked dark brand, inherits the visitor's theme pack, or pins a specific pack. Derived products choose their own mode.

src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"

Implementation workflow

Compose pages from the block library first; write a new block in the same token-only style when a pattern is missing, and register it in src/kit/blocks.ts. Keep marketing components out of product surfaces — the two chrome systems stay separate.

Localized copy flows through the dictionary and site-content overlays; add keys there rather than forking components per language.

Verification and troubleshooting

Check a marketing page at 320px and desktop, with visible keyboard focus, under at least one light and one dark pack, and with reduced motion. If a marketing claim references a capability, make sure the linked doc page exists.