Staaarter

Learning & Development

A grid of program cards describing the company's learning and development offerings: conference budget, online courses, 1:1 mentorship, and weekly tech talks. Each card has an icon, a title, and a short description of the offering.

By Staaarter Team
Careers
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/learning-development.json

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

Usage

The file also exports careers28Demo, 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 { Careers28, careers28Demo } from "@/components/blocks/careers/careers28";

export default function Page() {
  return <Careers28 {...careers28Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Learning & development"Section heading.
descriptionstring"We invest in your growth..."Section subheading.
programsLearningProgram[]noneProgram cards to render.
classNamestringnoneExtra classes for the outer section element.

Types

interface LearningProgram {
  title: string;
  description: string;
}

Behavior notes

  • Fully static: icons are chosen internally by array position (Ticket, BookOpen, Users, Mic2), not passed as prop data.