# Waitlist Launch

> A pre-launch waitlist page with an aurora backdrop, gradient headline, email signup, animated counters and backer logos.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/waitlist-launch
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/waitlist-launch.json
```

Adds the page at `app/waitlist-launch/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [Aurora Background](https://chromotion.dev/r/aurora-background.md): `@/components/aurora-background`
- [Gradient Text](https://chromotion.dev/r/gradient-text.md): `@/components/gradient-text`
- [Newsletter Signup](https://chromotion.dev/r/newsletter-signup.md): `@/components/newsletter-signup`
- [Number Ticker](https://chromotion.dev/r/number-ticker.md): `@/components/number-ticker`
- [Logo Cloud](https://chromotion.dev/r/logo-cloud.md): `@/components/logo-cloud`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/waitlist-launch/page.tsx"
"use client"

import { Command, Feather, Hexagon, Layers, Mountain, Orbit, Triangle, Zap } from "lucide-react"

import { AuroraBackground } from "@/components/aurora-background"
import { GradientText } from "@/components/gradient-text"
import { LogoCloud } from "@/components/logo-cloud"
import { NewsletterSignup } from "@/components/newsletter-signup"
import { NumberTicker } from "@/components/number-ticker"

const backers = [
  { name: "Vertex", icon: Triangle },
  { name: "Boltshift", icon: Zap },
  { name: "Layerstack", icon: Layers },
  { name: "Keystone", icon: Command },
  { name: "Quill", icon: Feather },
  { name: "Summit", icon: Mountain },
  { name: "Orbital", icon: Orbit },
]

const stats = [
  { label: "On the waitlist", value: 12480, suffix: "+" },
  { label: "Teams in beta", value: 340 },
  { label: "Raised", value: 4.2, prefix: "$", suffix: "M", decimals: 1 },
]

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))

export default function WaitlistLaunch() {
  return (
    <AuroraBackground
      colors={["var(--ring)", "#a855f7", "#06b6d4"]}
      className="flex min-h-svh flex-col"
    >
      <header className="mx-auto flex w-full max-w-5xl items-center justify-between px-6 py-5">
        <a href="#" className="flex items-center gap-2 font-semibold">
          <Hexagon className="size-5 fill-primary text-primary" /> Hexa
        </a>
        <span className="rounded-full border bg-background/60 px-3 py-1 text-xs text-muted-foreground backdrop-blur">
          Launching Q1 2027
        </span>
      </header>

      <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center gap-6 px-6 py-16 text-center">
        <h1 className="text-5xl font-semibold tracking-tight text-balance sm:text-7xl">
          Deploys that feel <GradientText colors={["var(--ring)", "#a855f7", "#06b6d4", "var(--ring)"]}>instant</GradientText>
        </h1>
        <p className="max-w-xl text-lg text-pretty text-muted-foreground">
          Hexa is a new deployment platform built for the edge. Join the waitlist and be the first to try it.
        </p>
        <NewsletterSignup
          className="w-full max-w-md"
          buttonLabel="Join waitlist"
          successMessage="You're on the list. We'll email you when your invite is ready."
          hint="We'll only email you about the launch."
          onSubscribe={() => wait(1200)}
        />

        <dl className="mt-8 grid w-full max-w-2xl grid-cols-3 divide-x rounded-2xl border bg-background/60 backdrop-blur">
          {stats.map(({ label, ...stat }) => (
            <div key={label} className="flex flex-col items-center gap-1 px-3 py-6">
              <dd className="text-2xl font-semibold tracking-tight sm:text-3xl">
                <NumberTicker {...stat} />
              </dd>
              <dt className="text-xs text-muted-foreground sm:text-sm">{label}</dt>
            </div>
          ))}
        </dl>
      </main>

      <footer className="mx-auto w-full max-w-4xl px-6 pb-10">
        <LogoCloud logos={backers} title="Backed by people who built" />
      </footer>
    </AuroraBackground>
  )
}
```