Training Program Cards

Installation

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

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/fitness/fitness3.tsx instead.

Usage

The file also exports fitness3Demo, 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 { Fitness3, fitness3Demo } from "@/components/blocks/fitness/fitness3";

export default function Page() {
  return <Fitness3 {...fitness3Demo} />;
}

Props

Types

type ProgramItem = {
  title: string;
  description: string;
  image?: { src: string; alt: string };
  duration: string;
  frequency: string;
  level: "Beginner" | "Intermediate" | "Advanced";
  href?: string;
};

Behavior notes

• The heading/badge/description block only renders when at least one of the three is set; the program grid only renders when programs has entries. The two are independent, matching about1's header/body split.
• level drives the badge variant via a fixed lookup (Beginner: secondary, Intermediate: outline, Advanced: default), not a variant field on the item itself.
• Each program's image is optional; when omitted, MediaSlot renders its own placeholder gradient instead of a blank card top.
• Enroll now is a static link (render={<Link/>}) when href is set, and an inert non-navigating button otherwise; there is no real cart or checkout flow behind it.
• programs always renders as a responsive grid (1 column on mobile, 2 on small screens, 3 on large) regardless of item count.