# Launch Page > A keynote-style product launch page: giant hero with a tilted drawn app, countdown or live state, keynote, what's new, launch week and FAQ. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add launch-page` - Docs: https://wingo-ui.com/templates/launch-page ## Interaction The hero rises in once on mount over a drawn Acme 3.0 app in the new timeline view, leaning back in perspective with an AI summary, a Cmd K search and a sync toast floating around it (both themes). In the live phase the pill links to the launch post, Try Acme 3.0 goes to sign-up and Watch the keynote scrolls to the keynote. In the upcoming phase a countdown ticks to the keynote (dashes until the clock is known after hydration, then a done message at zero) and the Remind me form validates the email, spins and confirms inline; the closing band repeats the form. The keynote poster and its chapter list open a dialog with a drawn walkthrough (arrow keys skip chapters). Five what's new chapters alternate copy and a drawn mini app (timeline drag, AI summary, offline sync, search palette, automation flow). The numbers roll up once when they scroll into view. Launch week cards mark past days Shipped and the current day Today; those cards are single links to their post. Quotes, the free upgrade panel, FAQ answers (one open at a time) and the footer newsletter follow. Reduced motion keeps everything still. ## Installation ```bash npx wingo-ui@latest add launch-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/launch-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/launch-page.tsx` - `components/templates/launch-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [Hero Section](https://wingo-ui.com/components/hero-section) ([Markdown](https://wingo-ui.com/components/hero-section.md)) - [Video Section](https://wingo-ui.com/components/video-section) ([Markdown](https://wingo-ui.com/components/video-section.md)) - [Stats Section](https://wingo-ui.com/components/stats-section) ([Markdown](https://wingo-ui.com/components/stats-section.md)) - [Testimonials Section](https://wingo-ui.com/components/testimonials-section) ([Markdown](https://wingo-ui.com/components/testimonials-section.md)) - [FAQ Section](https://wingo-ui.com/components/faq-section) ([Markdown](https://wingo-ui.com/components/faq-section.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Countdown](https://wingo-ui.com/components/countdown) ([Markdown](https://wingo-ui.com/components/countdown.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/launch/page.tsx "use client" import Link from "next/link" import { LaunchPage } from "@/components/templates/launch-page" export default function LaunchRoute() { return ( { const response = await fetch("/api/remind", { method: "POST", body: JSON.stringify({ email }) }) if (!response.ok) throw new Error("Could not save the reminder") }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `phase?` | `"upcoming" \| "live"` | `"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. | | `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | 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. | | `keynoteAt?` | `Date \| number \| string` | `"2026-10-19T17:00:00Z"` | 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. | | `today?` | `string` | `"2026-10-21"` | ISO date of the current launch week day in the live phase: earlier days read Shipped, this one Today, later ones Coming. | | `features?` | `LaunchFeature[]` | `"LAUNCH_FEATURES"` | The what's new chapters: { id, icon?, eyebrow, title, description, points?, href?, visual? }; visual is timeline, summaries, offline, search, automations or any node. | | `stats?` | `StatsSectionItem[]` | `"LAUNCH_STATS"` | { value, decimals?, prefix?, suffix?, label, description? } figures for the numbers band. | | `schedule?` | `LaunchDay[]` | `"LAUNCH_SCHEDULE"` | Launch week: { id, date (yyyy-mm-dd), title, description, icon?, href? } per day. | | `keynoteChapters?` | `VideoSectionChapter[]` | `"LAUNCH_KEYNOTE_CHAPTERS"` | The keynote's chapters: { title, description?, start (seconds), scene? }. | | `keynoteDuration?` | `number` | `1560` | The keynote's length in seconds. | | `testimonials?` | `Testimonial[]` | `"LAUNCH_TESTIMONIALS"` | { quote, name, role?, company?, companyIcon?, rating?, metric? } beta customer quotes. | | `plans?` | `LaunchPlan[]` | `"LAUNCH_PLANS"` | The upgrade panel: { id, name, price, includes, featured? } per plan. | | `faq?` | `FaqItem[]` | `"LAUNCH_FAQ"` | { question, answer } pairs about the launch. | | `labels?` | `Partial` | `"DEFAULT_LAUNCH_PAGE_LABELS"` | Every visible string, with live and upcoming variants where the phase changes the copy. | | `hrefs?` | `Partial` | `"DEFAULT_LAUNCH_PAGE_HREFS"` | { try, sales, pricing, notes, post }: sign-up, contact, pricing, release notes and the launch post. | | `featuresLayout?` | `"zigzag" \| "tiles"` | `"zigzag"` | 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. | | `testimonialsLayout?` | `"grid" \| "wall" \| "marquee"` | `"grid"` | The quotes as a three column masonry grid, a dense wall or two drifting rows. Applies to the classic design. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design. | | `showAnnouncement?` | `boolean` | `true` | The strip above the header bar. | | `showKeynote?` | `boolean` | `true` | The keynote (or preview) player. | | `showFeatures?` | `boolean` | `true` | The what's new chapters. | | `showStats?` | `boolean` | `true` | The numbers. | | `showSchedule?` | `boolean` | `true` | The launch week days. | | `showTestimonials?` | `boolean` | `true` | The beta customer quotes. | | `showUpgrade?` | `boolean` | `true` | The free upgrade panel with the plans. | | `showFaq?` | `boolean` | `true` | The FAQ. | | `showCta?` | `boolean` | `true` | The closing call to action. | | `tilt?` | `boolean` | `true` | The product shot leans back in perspective from 768px. Applies to the classic design. | | `alternate?` | `boolean` | `true` | Gray bands on every other visible section. Applies to the classic and bold designs. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Accents across the page: the hero glow, the drawn app, chapter icons and checks, the play button, numbers, the Today card and badges. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Try Acme 3.0, Remind me, See pricing, the header's Get started and the closing band; brand is the marketing orange. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer with its newsletter form. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `keynoteProps?` | `Partial` | | Overrides for the keynote VideoSection (media for a real video, layout, radius...). | | `statsProps?` | `Partial` | | Overrides for the StatsSection. | | `testimonialsProps?` | `Partial` | | Overrides for the TestimonialsSection. | | `faqProps?` | `Partial` | | Overrides for the FaqSection. | | `ctaProps?` | `Partial` | | Overrides for the CtaSection. | | `onRemind?` | `(email: string) => (void \| Promise)` | | 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)` | | The footer newsletter; a rejected promise shows an error. | | `animateIn?` | `boolean` | `true` | The hero rises in once and the numbers roll up; false keeps the page still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the numbers, the countdown and the launch week dates. | | `linkComponent?` | `(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>` | | Classes for header, hero, pill, title, countdown, remind, shot, keynote, features, feature, visual, stats, schedule, day, testimonials, upgrade, faq, cta and footer. | ## Parts ### LAUNCH_PAGE_SAMPLE (constant) All the sample content in one object: features, stats, schedule, keynote chapters, testimonials, plans and faq. ### LAUNCH_FEATURES (constant) Five chapters: timeline view, AI summaries, offline mode, search and Automations 2.0. ### LAUNCH_STATS (constant) Four figures: 2x faster, 40% fewer clicks, 120 ms search and 214 improvements. ### LAUNCH_SCHEDULE (constant) Launch week, Monday Oct 19 to Friday Oct 23, 2026. ### LAUNCH_KEYNOTE_CHAPTERS (constant) Five keynote chapters over 26 minutes. ### LAUNCH_TESTIMONIALS (constant) Six beta customer quotes. ### LAUNCH_PLANS (constant) What Free, Pro and Business get of the release. ### LAUNCH_FAQ (constant) Five questions about price, rollout, upgrading, AI privacy and offline devices. ### DEFAULT_LAUNCH_PAGE_LABELS (constant) The English strings. ### DEFAULT_LAUNCH_PAGE_HREFS (constant) The default link targets. ### LAUNCH_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "bold", "minimal"]. ### LaunchPageProps (type) Props of LaunchPage. ### LaunchPageDesign (type) "classic" | "bold" | "minimal". ### LaunchPagePhase (type) "upcoming" | "live". ### LaunchFeature (type) One what's new chapter. ### LaunchDay (type) One launch week day. ### LaunchPlan (type) One plan row of the upgrade panel. ### LaunchPageLabels (type) The strings labels can override. ### LaunchPageHrefs (type) The link targets hrefs can override. ## Examples - **Before the keynote**: phase="upcoming": a countdown to Oct 19, a Remind me form that validates and confirms, the two-minute preview and a reminder form in the closing band. - **Bold design**: design="bold": a giant stage title on a gradient mesh, feature tiles, a numbers band, a quote wall and a wordmark footer. - **Minimal design**: design="minimal": a transparent header, a flat shot with no glow, outlined panels, no gray bands and a simple footer. - **Brand orange countdown**: The bold design before the keynote with tone and ctaTone brand: orange countdown tiles, accents and Remind me button. - **Last day of launch week**: today on Friday: four days shipped, the API day highlighted; feature tiles and drifting quotes on the classic design. ## See also - [Landing Page](https://wingo-ui.com/templates/landing-page) ([Markdown](https://wingo-ui.com/templates/landing-page.md)) - [Waitlist Page](https://wingo-ui.com/templates/waitlist-page) ([Markdown](https://wingo-ui.com/templates/waitlist-page.md)) - [Changelog Page](https://wingo-ui.com/templates/changelog-page) ([Markdown](https://wingo-ui.com/templates/changelog-page.md)) - [Video Section](https://wingo-ui.com/components/video-section) ([Markdown](https://wingo-ui.com/components/video-section.md)) - [Countdown](https://wingo-ui.com/components/countdown) ([Markdown](https://wingo-ui.com/components/countdown.md)) --- Canonical: https://wingo-ui.com/templates/launch-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt