Professional Development Hero

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button 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/education/education8.tsx instead.

Usage

The file also exports education8Demo, 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 { Education8, education8Demo } from "@/components/blocks/education/education8";

export default function Page() {
  return <Education8 {...education8Demo} />;
}

Props

Types

type CertificationProgram = { name: string; duration: string };

type SuccessStat = { value: string; label: string };

type CtaButton = { label: string; href?: string };

Behavior notes

• Both CTA buttons are decorative: they render as real links via Button's render prop, defaulting to "#" when no href is supplied, and nothing is submitted anywhere on click.
• programs always renders as a 2-column grid on tablet and up, stacking to a single column on mobile; any item count reflows to additional rows.
• stats renders as a wrapping inline row rather than a fixed grid, so 2 to 5 stats all lay out cleanly.
• This section uses the same py-16 sm:py-24 page-section framing as the rest of the category, not a full-viewport min-h-screen hero.