Why Join Us

Careers47: Why Join Us

A recruiting section that stacks an optional eyebrow badge and large heading over a four-up stats band on a bordered card, followed by a three-column grid of benefit cards, each with a tinted icon tile that inverts on hover, a title, and a description.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

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

Base UI flavor

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

This installs the block to components/beste/block/careers47.tsx.

Quick start

The installed file exports careers47Demo alongside the block: the exact props behind the preview above. Spread it to get a working benefits section in one line.

import { Careers47, careers47Demo } from "@/components/beste/block/careers47";

export default function CareersPage() {
  return <Careers47 {...careers47Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Globe, Rocket } from "lucide-react";
import { Careers47 } from "@/components/beste/block/careers47";

export default function CareersPage() {
  return (
    <Careers47
      label="Why Join Us"
      heading="We build brave creative with people who like the work."
      stats={[
        { value: "120", suffix: "+", label: "Creatives across four studios" },
        { value: "18", suffix: "mo", label: "Median tenure and climbing" },
      ]}
      benefits={[
        { icon: Rocket, title: "Real ownership, fast", description: "You lead pitches in your first quarter." },
        { icon: Globe, title: "Work from anywhere", description: "Remote-first default with two offsites a year." },
      ]}
    />
  );
}

Props

type Stat = {
  value: string;
  suffix?: string;
  label: string;
};

type Benefit = {
  icon: LucideIcon;
  title: string;
  description: string;
};

Behavior notes

• The block is purely presentational: it renders no interactive controls, has no callbacks, and holds no internal state, so nothing needs to be lifted out.
• Each of the three sections is guarded independently. label and heading render only when truthy, the stats band renders only when stats.length > 0, and the benefit grid renders only when benefits.length > 0, so an empty block collapses to just its outer padding.
• The stats band is a fixed 2-column grid on mobile that becomes 4 columns at md; vertical dividers (md:border-r) appear between stat cells only from md up, and the last cell drops its divider via md:last:border-r-0.
• stat.suffix is optional and, when present, is rendered in the primary color right after stat.value; omit it and only the value shows.
• Each benefit card scopes a named group (group/careers47): on hover the card border shifts to border-primary/40 and the icon tile inverts from bg-primary/10 text-primary to a solid bg-primary text-primary-foreground.
• Both stats and benefits are keyed by array index, so reordering the arrays remounts the affected items rather than moving them.
• heading is rendered as plain text, so unlike some sibling blocks it does not interpret inline <strong> or other HTML markup.