Staaarter

Founding Member Offer

A bordered pre-launch offer card aimed at converting visitors into founding members. It lists the offer's benefits with check icons, shows how many founding seats have already been claimed via a progress bar, and closes with a working email-capture form with a success state.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/founding-member-offer.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon23.tsx instead.

Usage

The file also exports comingsoon23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon23, comingsoon23Demo } from "@/components/blocks/coming-soon/comingsoon23";

export default function Page() {
  return <ComingSoon23 {...comingsoon23Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Become a founding member"Card heading.
descriptionstring"Lock in early-adopter pricing for life..."Supporting copy under the heading.
benefitsstring[]noneBenefit lines rendered with a check icon each.
seatsClaimednumbernoneNumber of founding seats already claimed.
seatsTotalnumbernoneTotal founding seats available.
classNamestringnoneExtra classes for the outer section element.

Behavior notes

  • The email form is real client state: typing updates a controlled input, and submitting swaps the form for a success message (useState only, nothing is sent over the network).
  • The seats-claimed progress bar is fully static: its width and the "X of Y claimed" label are derived directly from the `seatsClaimed`/`seatsTotal` props at render time, with `seatsClaimed` clamped into range.