Skip to main content
Clever Ops

Fitness Gym Template

Bespoke strength-club site for Ironmark, Brunswick: plate-math bar calculator, chalkboard record board, day-tab timetable, coach totals, honest membership, free-week form.

Preview & code

Loading Fitness Gym Template preview

Installation

pnpm dlx shadcn@latest add @cleverui/template-fitness-gym

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { TemplateFitnessGym } from '@/components/blocks/template-fitness-gym'
Exampletsx
import { TemplateFitnessGym } from '@/components/blocks/template-fitness-gym'

export default function TemplateFitnessGymDemo() {
  return <TemplateFitnessGym />
}

API reference

TemplateFitnessGym accepts the following props.

PropTypeDefaultDescription
contentIronmarkContentdefaultContentoverride any slice of the page, defaults to the Ironmark fixture above
classNamestring

Referenced types

Typestsx
export interface IronmarkContent {
  /** identity, nav mark, wordmark */
  brand: { name: string; wordmark: string; locality: string }
  nav: { links: IronmarkLink[]; cta: IronmarkLink }
  /** the cover: stacked display, the drawing bar, plate math up front */
  hero: {
    kicker: string
    /** stacked display lines, keep each short */
    titleLines: string[]
    sub: string
    primaryCta: IronmarkLink
    secondaryCta: IronmarkLink
    /** mono fact run under the CTAs */
    facts: string[]
  }
  /** the signature interaction: pick a target, the bar loads itself */
  plateMath: {
    eyebrow: string
    title: string
    note: string
    barKg: number
    minKg: number
    maxKg: number
    /** total-kg jump per stepper press, 5 kg = 2.5 a side */
    stepKg: number
    presets: number[]
    presetsLabel: string
    targetLabel: string
    decreaseLabel: string
    increaseLabel: string
    perSideLabel: string
    emptyBarLine: string
    barWord: string
    totalWord: string
    platesWord: string
    minLabel: string
    maxLabel: string
    unit: string
    footnote: string
  }
  /** 01, the room and the numbers board */
  club: {
    index: string
    eyebrow: string
    title: string
    lede: string
    stats: IronmarkStat[]
    statsNote: string
    manifesto: string[]
    pullLine: string
    floorLabel: string
    floor: string[]
    notFloorLabel: string
    notFloor: string[]
    visit: { label: string; addressLines: string[]; note: string }
  }
  /** 02, the programs as cards, loads and frequency stated */
  programs: {
    index: string
    eyebrow: string
    title: string
    lede: string
    specLabels: { weeks: string; frequency: string; loads: string; entry: string }
    ctaLabel: string
    items: IronmarkProgram[]
  }
  /** 03, the week on the floor, day tabs and honest spots */
  timetable: {
    index: string
    eyebrow: string
    title: string
    lede: string
    tabsLabel: string
    columns: { time: string; name: string; coach: string; spots: string }
    spots: { full: string; few: string; open: string; fewAt: number }
    days: IronmarkDay[]
    note: string
  }
  /** 04, the corner, with the totals under their coaching */
  coaches: {
    index: string
    eyebrow: string
    title: string
    lede: string
    roster: IronmarkCoach[]
    ctaLabel: string
  }
  /** 05, the chalkboard: pick a lift, the table answers */
  board: {
    index: string
    eyebrow: string
    title: string
    lede: string
    filterLabel: string
    columns: { rank: string; lifter: string; weight: string; detail: string; date: string }
    newLabel: string
    lifts: IronmarkLift[]
    note: string
  }
  /** 06, honest money: weekly or annual, no lock-in stated */
  membership: {
    index: string
    eyebrow: string
    title: string
    lede: string
    billingLabel: string
    weeklyLabel: string
    annualLabel: string
    perWeek: string
    weeklyCaption: string
    tiers: IronmarkTier[]
    note: string
    casualNote: string
  }
  /** the closer: seven days on the house, form with a texted code */
  freeWeek: {
    eyebrow: string
    title: string
    lede: string
    plan: { day: string; title: string; detail: string }[]
    honestyLine: string
    form: {
      nameLabel: string
      namePlaceholder: string
      phoneLabel: string
      phonePlaceholder: string
      ageLabel: string
      ages: string[]
      buttonLabel: string
    }
    confirmationTitle: string
    confirmation: string
    note: string
  }
  footer: {
    tagline: string
    exploreLabel: string
    explore: IronmarkLink[]
    contactLabel: string
    contact: IronmarkLink[]
    visitLabel: string
    addressLines: string[]
    visitNote: string
    hoursLabel: string
    hours: { days: string; hours: string }[]
    hoursNote: string
    legal: IronmarkLink[]
    meta: string[]
  }
  /** fixed bottom bar on small screens, the gym trial pattern */
  actionBar: IronmarkLink
}

export interface IronmarkLink {
  label: string
  href: string
}

export interface IronmarkStat {
  /** preformatted, e.g. "486" */
  value: string
  label: string
  /** mono provenance line, e.g. "COUNTED ON THE FIRST" */
  detail: string
  /** at most one across the board, earns the chalk colour */
  accent?: boolean
}

export interface IronmarkProgram {
  name: string
  outcome: string
  /** preformatted specs, e.g. "6 weeks" */
  weeks: string
  frequency: string
  loads: string
  entry: string
}

export interface IronmarkDay {
  day: string
  classes: IronmarkClassSession[]
}

export interface IronmarkCoach {
  name: string
  role: string
  /** the line they say on the platform */
  line: string
  certs: string[]
  /** totals under their coaching, number plus provenance */
  totals: { value: string; label: string }[]
}

export interface IronmarkLift {
  lift: string
  entries: IronmarkBoardEntry[]
}

export interface IronmarkTier {
  name: string
  /** per-week price under each billing mode, preformatted */
  weekly: string
  annual: string
  /** mono captions shown only in annual mode */
  annualBilled: string
  annualSave: string
  commitment: string
  features: string[]
  badge?: string
  ctaLabel: string
}

export interface IronmarkClassSession {
  time: string
  name: string
  coach: string
  duration: string
  spotsLeft: number
}

export interface IronmarkBoardEntry {
  name: string
  /** preformatted, e.g. "227.5" */
  weight: string
  /** bodyweight note, e.g. "@ 76 kg BW" */
  detail: string
  date: string
  /** at most one per lift, the freshest chalk */
  isNew?: boolean
}

Frequently asked questions

How do I install the Fitness Gym Template component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/template-fitness-gym`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Fitness Gym Template require?

Fitness Gym Template uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Fitness Gym Template to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services