Staaarter

Fitness Studio Founding List

A two-column pre-launch screen for a fitness studio. One side has the studio name, an eyebrow, heading, and a working founding-membership email form with a success state. The other side shows a bordered card previewing a week of the class schedule, listing each class with its day and time.

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/fitness-studio-founding-list.json

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

Usage

The file also exports comingsoon67Demo, 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 { ComingSoon67, comingsoon67Demo } from "@/components/blocks/coming-soon/comingsoon67";

export default function Page() {
  return <ComingSoon67 {...comingsoon67Demo} />;
}

Props

PropTypeDefaultDescription
studioNamestringnoneName of the studio, shown above the eyebrow.
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Founding members get lifetime rates"Main heading.
descriptionstring"We open our doors next month..."Supporting copy under the heading.
scheduleHeadingstring"This week's schedule"Heading above the schedule card.
scheduleScheduleSession[]noneClass sessions rendered in the schedule preview card.
classNamestringnoneExtra classes for the outer section element.

Types

export interface ScheduleSession {
  day: string;
  time: string;
  className: string;
}

Behavior notes

  • The founding-membership email form is real client state (useState): submitting swaps it for a confirmation message, nothing is sent to a server.
  • The weekly class schedule card is fully static preview content, not a real calendar.