Thirty Day MilestonesPRO

npx shadcn add "https://ui.beste.co/r/onboarding39?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/onboarding39?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Onboarding39, onboarding39Demo } from "@/components/beste/block/onboarding39";

export default function MilestonesPage() {
  return <Onboarding39 {...onboarding39Demo} />;
}

import { Onboarding39 } from "@/components/beste/block/onboarding39";
import { Stats16 } from "@/components/beste/piece/stats16";

export default function MilestonesPage() {
  return (
    <Onboarding39
      badge={{ label: "What good looks like" }}
      heading="The numbers we expect you to hit, and when"
      description="Published in advance so you can hold us to them."
      milestones={[
        {
          when: "End of day one",
          title: "A real clinic has run on it",
          description: "Every appointment that happened is on the record.",
          target: "100%",
          targetLabel: "of the day's appointments recorded",
        },
        {
          when: "Day thirty",
          title: "Month-end takes an afternoon",
          description: "Billing reconciles from the appointment record.",
          target: "< 4 hrs",
          targetLabel: "to close the month",
        },
      ]}
      media={
        <Stats16
          label="Appointments recorded"
          value="1,284"
          delta="12.4%"
          direction="up"
          caption="in the first thirty days on the platform"
          bars={[18, 32, 44, 51, 60, 71, 79, 92]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      mediaTitle="Measured from your own records"
      mediaBody="Nothing here is self-reported."
      button={{ label: "Ask about your practice", href: "/contact" }}
    />
  );
}

type ActionLink = {
  label: string;
  href: string;
};

type Milestone = {
  when: string;
  title: string;
  description: string;
  target: string;
  targetLabel: string;
};