Transformation Gallery

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/fitness5.tsx instead.

Usage

The file also exports fitness5Demo, 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 { Fitness5, fitness5Demo } from "@/components/blocks/fitness/fitness5";

export default function Page() {
  return <Fitness5 {...fitness5Demo} />;
}

Props

Types

type TransformationItem = {
  name: string;
  stat: string;
  quote: string;
  before?: { src: string; alt: string };
  after?: { src: string; alt: string };
};

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

• This is a static grid, not a slider or before/after drag comparison; each card shows its before and after photos side by side at all times.
• before and after are each independently optional; the demo props intentionally omit both so every card shows MediaSlot's placeholder gradient rather than shipping unverified stock photos as if they were real member transformations.
• The heading/badge/description block and the grid render independently of each other, matching about1's header/body split; buttons is a third independent block below the grid.
• Start your transformation is a static link (render={<Link/>}) with no signup logic behind it.