Landing Page

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.

Announcement bar

One line above the header for the release, the event or the outage. Banner on its own — no <Banners> queue — renders in the page flow, so closing it moves the header up and nothing ever floats over the page.

On its own, the bar reports its close button through onOpenChange(false) — that is where the dismissal gets written. onDismiss reads like the right hook and never fires here: it belongs to banners queued inside <Banners>. Keep the dismissal in a cookie the server reads; a localStorage check after mount paints the bar for every returning visitor, then collapses the page under them.

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.

One trap in that file: 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. The sheet’s close button needs nothing: since 3.0.0 its accessible name follows ComitorLocaleProvider — “Close” on this site, “Đóng” under locale="vi".

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.

How it works

Three steps from install to first screen, as a Timeline: a list whose order is the content, with the dots and the rule between them drawn for you. The band stays a server component — every prop it passes is data.

TimelineTime renders a real <time> and formats nothing: the words are yours, and dateTime takes the machine-readable form — an ISO 8601 duration such as PT5M is as valid there as a date. Leave activeIndex off a static band like this one: written in a Server Component, the items are out of the timeline’s sight, so the server renders every dot as pending and the browser recolours the finished ones after hydration.

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 landing-page 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. The stars are Rating, read-only and in half steps; 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.

A read-only Rating is still a radiogroup, one Tab stop, so it takes an aria-label with the figure. In half steps the checked star is the one the value rounds up to — 4.5 checks the fifth — and the package names that star with the exact value, “4.5 stars”. Every prop here is data, so the server component renders Rating itself; only a function prop, such as a custom itemLabel, would need a client file.

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.

Sales form

Where “Talk to sales” leads. FormField wires every label, description and error, and PhoneInput takes a number the way people dial it at home and hands back E.164. Live: submit it empty to see the errors, then type 0912 345 678 and see what arrives.

The country is region, not language: this page is English, and its visitors may be in Hanoi. PhoneInput has no default country, so pass defaultCountry — from where the request says the visitor is, or from the market the page sells to. With one, a domestic 0912 345 678 drops its trunk zero and becomes +84912345678; without one, the same keystrokes become +0912345678, a number no phone answers. Start with + and the field switches to international entry, the flag following the dialling code.

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-border keeps the band from dissolving into the page background in dark mode, which is ink itself. Its text breaks from role tokens on purpose: on a surface that never changes, text-primary and text-ash-300 hold in both palettes, where the high-contrast palette would take text-primary-ink down to 2.90:1 on ink in light 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 sections that own state, never on the route. The route itself reads one cookie, to leave out an announcement the visitor has already closed. Which exports cross that line, and how they fail when they cannot, is in Server and client.

import type { Metadata } from 'next'
import { cookies } from 'next/headers'
import { ANNOUNCEMENT_ID } from '@/components/landing/announcement'
import { AnnouncementBar } from '@/components/landing/announcement-bar'
import { SiteHeader } from '@/components/landing/site-header'
import { Hero } from '@/components/landing/hero'
import { LogoCloud } from '@/components/landing/logo-cloud'
import { Features } from '@/components/landing/features'
import { HowItWorks } from '@/components/landing/how-it-works'
import { Stats } from '@/components/landing/stats'
import { Testimonials } from '@/components/landing/testimonials'
import { Pricing } from '@/components/landing/pricing'
import { ContactSales } from '@/components/landing/contact-sales'
import { Faq } from '@/components/landing/faq'
import { Newsletter } from '@/components/landing/newsletter'
import { CallToAction } from '@/components/landing/call-to-action'
import { SiteFooter } from '@/components/landing/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. The sections that own state carry the directive
 * themselves — the announcement bar, the header's sheet and nav menu, pricing,
 * the sales form, the newsletter. Hoisting it up here would ship the hero, the
 * timeline, 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 public site and the product share one left margin.
 */
export default async function HomePage() {
  // Reading cookies() renders this route per request. A home page that must stay
  // fully static leaves the bar out instead — a bar that flashes is worse.
  const dismissed = (await cookies()).get('announcement')?.value === ANNOUNCEMENT_ID

  return (
    <>
      <AnnouncementBar dismissed={dismissed} />
      <SiteHeader />
      <main>
        <Hero />
        <LogoCloud />
        <Features />
        <HowItWorks />
        <Stats />
        <Testimonials />
        <Pricing />
        <ContactSales />
        <Faq />
        <Newsletter />
        <CallToAction />
      </main>
      <SiteFooter />
    </>
  )
}

Best practices