Skip to main content
odebase

marketing-site

Starter

Appears as a one-click chip in the workspace.

Build a multi-page marketing site — home, features, pricing, about, contact — for a startup or product. Use when the user asks for a "company site", "product site", or multi-page marketing presence (not just a single landing page). Prefer scaffold-next for multi-route polish.

Scaffolds

next

Verified dependencies

framer-motion
lucide-react
clsx
tailwind-merge

Example prompts

Prompts this skill is written to handle. Copy one into the workspace to try it.

Build a marketing site for our startup with home, pricing, about

Make a product site with features, pricing, and a contact page

Design a multi-page company site for a design agency

Instructions

The full instruction set the agent receives when this skill is active.

Marketing Site

A multi-page site has to maintain a consistent voice across routes. Pick a design system early and apply it ruthlessly.

Pages

  1. / — Home. See [[landing-page]] for hero patterns.
  2. /features — Feature deep-dive. One section per feature with screenshot/illustration left, copy right (alternate). Avoid the "ten tiny cards" pattern.
  3. /pricing — If applicable. 2-3 tiers max. Highlight the recommended tier with a colored border, not a popup ribbon.
  4. /about — Story, team, values. Keep it tight. A long about page should still feel intentional, not padded.
  5. /contact — Email + form (form can be a mailto: link until a backend is wired).

Cross-page consistency

  • Header: logo left, primary nav center or right, primary CTA pinned far right. Identical on every page.
  • Footer: full sitemap + copyright + small print. Identical on every page.
  • Typography rules: same heading scale across all pages. Don't go bigger on home and smaller on /features.

Routing

Use Next.js App Router. One file per page:

app/ layout.tsx ← shared header + footer page.tsx ← / features/page.tsx pricing/page.tsx about/page.tsx contact/page.tsx

Put header/footer in app/layout.tsx and let route segments handle their own bodies.

SEO basics (do these, they're cheap)

  • Set metadata per route (title + description).
  • Open Graph image — even a generated one beats none. Use app/opengraph-image.tsx if image generation is available.
  • Sitemap: app/sitemap.ts exports a function returning the route list.

Avoid

  • A site that feels like five disconnected pages. Header/footer/typography MUST be identical.
  • Modal popups for "Subscribe to our newsletter" on every page. One CTA in the footer is enough.
  • "Trusted by" rails with public-domain logos the user has no relationship with.

See also: [[landing-page]], [[frontend-design]], [[theme-kit]].

marketing-site skill — Codebase