Studio Careers Page

Jobs1: Studio Careers Page

A careers page in seven sections: a hiring hero with the open roles listed, a culture band with studio photographs, an icon grid of benefits, a roles table with published pay bands, the hiring process step by step, an open-application call to action, and a CTA footer. Eight blocks, one install.

Installation

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

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

This installs the page to components/beste/page/jobs1.tsx and everything behind it: the eight blocks it composes (navbar44, careers48, careers42, careers41, careers40, careers43, cta66, footer104), the button1 and badge6 components they use, and the shadcn/ui button primitive. Eleven files, no follow-up installs.

Quick start

The installed file exports jobs1Demo alongside the page: the exact props behind the preview above. Spread it to get a working page in one line.

import { Jobs1, jobs1Demo } from "@/components/beste/page/jobs1";

export default function Page() {
  return <Jobs1 {...jobs1Demo} />;
}

Each section is a separate prop, so the usual next step is to keep the demo and replace one section at a time. The roles table is the one that changes most often.

import { Jobs1, jobs1Demo } from "@/components/beste/page/jobs1";

export default function Page() {
  return (
    <Jobs1
      {...jobs1Demo}
      roles={{
        label: "Open roles",
        heading: "Three, and the band is published.",
        roles: [
          { title: "Senior Brand Designer", team: "Design", location: "Lisbon or remote in CET", salary: "€62k to €74k" },
          { title: "Design Engineer", team: "Build", location: "Lisbon", salary: "€58k to €70k" },
          { title: "Studio Producer", team: "Operations", location: "Lisbon, three days on site", salary: "€48k to €56k" },
        ],
      }}
    />
  );
}

Props

Every prop is the full prop object of the block that renders that section, so anything the block accepts is accepted here.

Sections

Behavior notes

• Every section is conditional on its own prop, so omitting culture removes that section entirely rather than rendering an empty one.
• Five of the eight blocks are careers* variants doing different jobs, so the page holds up when a section is dropped; the hero and the roles table are the two worth keeping.
• The navbar is given sticky top-0 z-50 by the page, which works because the block carries its own opaque band.
• The page sets className="bg-muted/50" on both the benefits and process sections after spreading their props, so a className passed inside those props is overridden. Tint from the page, not through the prop.
• There is no dark band on this page. A careers page reads as an invitation, and the two tinted bands supply enough rhythm without one section shouting.
• The hero lists the same roles as the table below it, so the two are kept in step by hand. Changing roles without changing hero is the easiest inconsistency to ship here.
• The whole page is a client component, since the blocks it composes are. It fetches nothing and holds no state above the blocks.
• The page is Pro because blocks inside it are, which is why the licence parameters are on the command above.