Launch Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/launch/page.tsx
"use client"

import Link from "next/link"
import { LaunchPage } from "@/components/templates/launch-page"

export default function LaunchRoute() {
  return (
    <LaunchPage
      linkComponent={Link}
      phase="upcoming"
      keynoteAt="2026-10-19T17:00:00Z"
      ctaTone="brand"
      onRemind={async (email) => {
        const response = await fetch("/api/remind", { method: "POST", body: JSON.stringify({ email }) })
        if (!response.ok) throw new Error("Could not save the reminder")
      }}
    />
  )
}

Props

• phasedefault "live"
  "upcoming" | "live"

  upcoming: a countdown to the keynote and a Remind me form, a two-minute preview in place of the keynote, every launch day still ahead and a reminder form in the closing band. live: Available now, Try Acme 3.0 and Watch the keynote, the full keynote with chapters and Shipped / Today days.

• designdefault "classic"
  "classic" | "bold" | "minimal"

  The whole page's look. classic follows the layout props; bold: a pill header, a giant start-aligned stage title on a gradient mesh, solid countdown tiles, feature tiles with the visual on top, an inverted numbers band, a quote wall, FAQ cards, an image band and a wordmark footer; minimal: a transparent header, no glow, a flat shot without floating cards, outlined panels, no gray bands, extra air and a simple footer. The *Props overrides still win.

• keynoteAtdefault "2026-10-19T17:00:00Z"
  Date | number | string

  When the keynote starts, for the countdown in the upcoming phase. A fixed default keeps server and client markup equal.

• now
  Date | number

  Pins the countdown's clock (screenshots, tests). Left out, the live clock takes over after hydration.

• todaydefault "2026-10-21"
  string

  ISO date of the current launch week day in the live phase: earlier days read Shipped, this one Today, later ones Coming.

• featuresdefault "LAUNCH_FEATURES"
  LaunchFeature[]

  The what's new chapters: { id, icon?, eyebrow, title, description, points?, href?, visual? }; visual is timeline, summaries, offline, search, automations or any node.

• statsdefault "LAUNCH_STATS"
  StatsSectionItem[]

  { value, decimals?, prefix?, suffix?, label, description? } figures for the numbers band.

• scheduledefault "LAUNCH_SCHEDULE"
  LaunchDay[]

  Launch week: { id, date (yyyy-mm-dd), title, description, icon?, href? } per day.

• keynoteChaptersdefault "LAUNCH_KEYNOTE_CHAPTERS"
  VideoSectionChapter[]

  The keynote's chapters: { title, description?, start (seconds), scene? }.

• keynoteDurationdefault 1560
  number

  The keynote's length in seconds.

• testimonialsdefault "LAUNCH_TESTIMONIALS"
  Testimonial[]

  { quote, name, role?, company?, companyIcon?, rating?, metric? } beta customer quotes.

• plansdefault "LAUNCH_PLANS"
  LaunchPlan[]

  The upgrade panel: { id, name, price, includes, featured? } per plan.

• faqdefault "LAUNCH_FAQ"
  FaqItem[]

  { question, answer } pairs about the launch.

• labelsdefault "DEFAULT_LAUNCH_PAGE_LABELS"
  Partial<LaunchPageLabels>

  Every visible string, with live and upcoming variants where the phase changes the copy.

• hrefsdefault "DEFAULT_LAUNCH_PAGE_HREFS"
  Partial<LaunchPageHrefs>

  { try, sales, pricing, notes, post }: sign-up, contact, pricing, release notes and the launch post.

• featuresLayoutdefault "zigzag"
  "zigzag" | "tiles"

  The what's new chapters as alternating rows of copy and visual, or tiles with the visual on top (the first one wide). Applies to the classic design.

• testimonialsLayoutdefault "grid"
  "grid" | "wall" | "marquee"

  The quotes as a three column masonry grid, a dense wall or two drifting rows. Applies to the classic design.

• ctaVariantdefault "inverted"
  "inverted" | "soft" | "split"

  The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design.

• showAnnouncementdefault true
  boolean

  The strip above the header bar.

• showKeynotedefault true
  boolean

  The keynote (or preview) player.

• showFeaturesdefault true
  boolean

  The what's new chapters.

• showStatsdefault true
  boolean

  The numbers.

• showScheduledefault true
  boolean

  The launch week days.

• showTestimonialsdefault true
  boolean

  The beta customer quotes.

• showUpgradedefault true
  boolean

  The free upgrade panel with the plans.

• showFaqdefault true
  boolean

  The FAQ.

• showCtadefault true
  boolean

  The closing call to action.

• tiltdefault true
  boolean

  The product shot leans back in perspective from 768px. Applies to the classic design.

• alternatedefault true
  boolean

  Gray bands on every other visible section. Applies to the classic and bold designs.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents across the page: the hero glow, the drawn app, chapter icons and checks, the play button, numbers, the Today card and badges.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Try Acme 3.0, Remind me, See pricing, the header's Get started and the closing band; brand is the marketing orange.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer with its newsletter form.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• keynoteProps
  Partial<VideoSectionProps>

  Overrides for the keynote VideoSection (media for a real video, layout, radius...).

• statsProps
  Partial<StatsSectionProps>

  Overrides for the StatsSection.

• testimonialsProps
  Partial<TestimonialsSectionProps>

  Overrides for the TestimonialsSection.

• faqProps
  Partial<FaqSectionProps>

  Overrides for the FaqSection.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the CtaSection.

• onRemind
  (email: string) => (void | Promise<unknown>)

  The Remind me forms of the upcoming phase; a rejected promise shows an error. Without it the form waits 900 ms and confirms.

• onKeynoteOpenChange
  (open: boolean) => void

  Runs when the keynote dialog opens or closes.

• onSubscribe
  (email: string) => (void | Promise<unknown>)

  The footer newsletter; a rejected promise shows an error.

• animateIndefault true
  boolean

  The hero rises in once and the numbers roll up; false keeps the page still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the numbers, the countdown and the launch week dates.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every link on the page (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<LaunchPageSlot, string>>

  Classes for header, hero, pill, title, countdown, remind, shot, keynote, features, feature, visual, stats, schedule, day, testimonials, upgrade, faq, cta and footer.

Parts