Marketing

Where the package stops

Worth being explicit, because the temptation on a page like this is to reach for a composite that was designed for a different job. Every band below leans on the package for structure, surface and colour; the arrangement is yours.

Navbar

Sticky bar with the lockup, a NavigationMenu whose own documentation names public sites as its job, and the two account actions. Below md the same links move into a Sheet. Both previews are live — open the Product menu, then open the sheet.

Two traps in that file. SheetContent defaults closeLabel to the Vietnamese "Đóng", and that string is the accessible name of the close button — pass an English one. And NavigationMenuLink renders a plain anchor unless you hand it asChild with next/link; the package deliberately never imports next/* so the entry keeps resolving outside Next.

Hero

Badge, headline, one sentence, and a primary + secondary pair. The container is PageContainer at width="md" — the same component the product screens use, which is what keeps the two sides of the funnel on one grid.

The code sample uses Button asChild so the CTA is a real link. Note what that costs: Radix Slot accepts exactly one child, so leftIcon and rightIcon are dropped without warning — the arrow has to move inside the <Link>. The preview above keeps rightIcon precisely because its buttons go nowhere.

Logo cloud

Social proof directly under the hero. Pure layout: the package ships no logo component and should not, since customer marks are assets on a CDN rather than UI.

Features grid

Three benefits as real Cards rather than bordered <div>s. That single swap buys the surface, radius, border and shadow tokens, so these cards age with the system instead of drifting from it.

The icon chip follows the colour contract the rest of the system uses: the accent tints the background (bg-primary/15) and the glyph sits on it at text-foreground. Gold-on-gold measures about 1.7:1 against the 3:1 that WCAG 1.4.11 asks of graphical objects.

Stats band

Four figures with short labels. This is the clearest case on the page for not reaching for a composite — the reasoning is in the code sample, and it is worth reading before the next time a marketing band tempts you toward a dashboard component.

Marked up as a description list so each figure keeps its label as data, and set in tabular-nums so the four columns line up on the digits.

Testimonials

Quote, rating, attribution. Authors use LetterAvatar, which derives both the initials and the colour behind them from the name — so the same person is the same colour here, in the app and in an exported PDF.

A quote wants <figure> semantics and Card renders a <div>, so the card look arrives through the exported cardVariants() instead. Reach for the variant function whenever you need a component's appearance on a different element — copying its class string is how two cards end up one pixel apart.

Pricing table

Three tiers with a working billing switch — flip it and the Pro column moves from $29 to $23. Both columns are per user per month; the discount is the unit price, never a yearly total dressed up as one.

The recommended tier is signalled three ways — Badge variant="primary", a filled button and a border-primary-ink ring — because gold on a white card measures 1.86:1 and cannot carry the meaning alone. Note also the onValueChange guard: Radix ToggleGroup emits an empty string when you press the active item again, and without the guard the table would render a plan with no price.

FAQ

Objection handling immediately before the last conversion step. Accordion with type="single" and collapsible: one answer open at a time, and it can be closed again.

Newsletter signup

For the visitor who is not ready to convert. Live: submit an empty or malformed address to see the error, a valid one to see the confirmation.

InputGroup puts the icon and the submit button inside the field's own border, so one control reads as one target. Field carries the invalid state for the row and FieldError renders role="alert", which is what makes the message audible rather than merely red. noValidate hands validation to your code so the copy is yours and not the browser's.

Call to action

The last band before the footer: brand ink, gold headline, one button. It is the only surface on the page that does not follow the theme, because a brand band is a brand band in both.

No re-coloured button here. The default gold Button is already correct on ink, and a ring-white/10 keeps the band from dissolving into the near-black page background in dark mode.

Footer

Brand mark, three link columns, legal bar. The mark is ComitorLockup at variant="auto", which follows the theme and keeps the gold rule and slogan at their brand-book proportions — a re-typed wordmark gets none of that.

Composing the page

Each band is one file exporting one section; the route stacks them. Note where 'use client' lives — on the three sections that own state, never on the route.

import type { Metadata } from 'next'
import { SiteHeader } from '@/components/marketing/site-header'
import { Hero } from '@/components/marketing/hero'
import { LogoCloud } from '@/components/marketing/logo-cloud'
import { Features } from '@/components/marketing/features'
import { Stats } from '@/components/marketing/stats'
import { Testimonials } from '@/components/marketing/testimonials'
import { Pricing } from '@/components/marketing/pricing'
import { Faq } from '@/components/marketing/faq'
import { Newsletter } from '@/components/marketing/newsletter'
import { CallToAction } from '@/components/marketing/call-to-action'
import { SiteFooter } from '@/components/marketing/site-footer'

export const metadata: Metadata = {
  title: 'Comitor — design systems that ship',
  description: 'Components, patterns and tokens in one package.',
}

/*
 * NO 'use client' on the page. Only three sections here own state — the header's
 * sheet and nav menu, the pricing toggle, the newsletter form — and each of those
 * files carries the directive itself. Hoisting it up here would ship the hero,
 * the logo cloud, the stats and the footer to the browser to do nothing.
 *
 * Every band is <section> + PageContainer: the section paints edge-to-edge, the
 * container clamps and pads the content. Same container the app screens use, so
 * the marketing site and the product share one left margin.
 */
export default function HomePage() {
  return (
    <>
      <SiteHeader />
      <main>
        <Hero />
        <LogoCloud />
        <Features />
        <Stats />
        <Testimonials />
        <Pricing />
        <Faq />
        <Newsletter />
        <CallToAction />
      </main>
      <SiteFooter />
    </>
  )
}

Best practices