Full-Bleed Launch CountdownPRO

Comingsoon77: Full-Bleed Launch Countdown

A pre-launch section on a full-bleed photograph under a dark gradient, with a light display heading, four oversized countdown figures between hairline rules and a working email capture card.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/comingsoon77?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/comingsoon77?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/comingsoon77.tsx, the form36 capture piece it centers under the countdown (installed to components/beste/piece/form36.tsx), and the badge23 component it uses for the eyebrow.

Quick start

The installed file exports comingsoon77Demo alongside the block: the exact props behind the preview above. Spread it to get a working landing page in one line.

import { Comingsoon77, comingsoon77Demo } from "@/components/beste/block/comingsoon77";

export default function LaunchPage() {
  return <Comingsoon77 {...comingsoon77Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Comingsoon77 } from "@/components/beste/block/comingsoon77";
import { Form36 } from "@/components/beste/piece/form36";

export default function LaunchPage() {
  return (
    <Comingsoon77
      badge={{ label: "Opening soon" }}
      heading="We open to every practice on 1 June"
      description="Eleven clinics have been running on it for a year."
      units={[
        { value: "12", label: "days" },
        { value: "06", label: "hours" },
        { value: "48", label: "minutes" },
        { value: "31", label: "seconds" },
      ]}
      media={
        <Form36
          label="Get the launch note"
          placeholder="you@practice.com"
          submitLabel="Join"
          finePrint="One email when we open."
        />
      }
      image={{ src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" }}
      note="2,140 practice leads are already on the list."
    />
  );
}

Props

type BandImage = {
  src: string;
  alt: string;
};

type CountdownUnit = {
  value: string;
  label: string;
};

Behavior notes

• The countdown is static copy. units holds strings, and the block runs no timer, which keeps it safe to server-render with no hydration mismatch between the server's clock and the browser's. Wiring a live counter means adding state around this block.
• Because the values are strings, pad them yourself. The demo passes "06" rather than 6, and tabular-nums keeps the columns from shifting as digits change.
• The section is bg-foreground under the photograph, so a missing or slow image still leaves white text on a dark surface rather than an unreadable flash.
• The gradient runs bottom-up (from-foreground/95 to to-foreground/60), which is heaviest where the capture card sits, so the form stays legible over the busiest part of most photographs.
• The countdown row uses border-y on the container and gap-px between cells, so the figures sit between two rules rather than inside a boxed table.
• Units go two-up on mobile and four-up from sm, so a four-unit countdown never leaves a single orphan on its own line.
• This block sets its own vertical rhythm (py-20, then md:py-32) rather than the set's usual py-16 md:py-24, since it is designed to be the whole page rather than a section of one.