@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/careers/careers.tsx

@@ -0,0 +1,391 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, Banknote, Clock, MapPin, Users } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Button, buttonVariants, type ButtonProps } from "../../ui/button/button"
+
+/*
+ * Figma: `Careers` (46378:5405). The parts every `careers-*` block is built
+ * from, one per thing the Figma set repeats: the section and its 1248px
+ * column, the left-aligned header, a role's meta line (place, commitment and
+ * pay, each after a Lucide mark), the New badge, a role's action, the plain
+ * hairline, and the small helpers that filter and count roles.
+ *
+ * Mobile first, and sized by the block's own width, not the window's, as the
+ * Pricing and Gallery blocks are: the section is a query container, so a
+ * block lays out for the room it is given, such as a docs preview narrower
+ * than the screen. The base classes are Figma's Mobile (360);
+ * `[@container(min-width:40rem)]:` is its Tablet, from 640px of content
+ * (Figma's Tablet, 768 less its padding), and `[@container(min-width:64rem)]:`
+ * its Desktop, from 1024px of content. The section's own padding still
+ * follows the window, since an element can't query itself. The page's `dir`
+ * sets the direction; nothing here takes one.
+ */
+
+export type CareersLocale = "en" | "ar"
+
+/** The value every "all" filter holds. */
+export const CAREERS_ALL = "all"
+
+/**
+ * One open role. Blocks take a list of these; the fields a block does not
+ * draw are simply left out.
+ */
+export interface CareersRole {
+  /** Keys the role, and names it for filters and callbacks. */
+  id: string
+  /** The role's title. */
+  title: React.ReactNode
+  /** The team, such as "Design". Filters on this value, so write it the way the filter shows it. */
+  department?: string
+  /** One line on what the role does. */
+  summary?: React.ReactNode
+  /** Where the role is, such as "Remote (EU)". Filters on this value. */
+  location?: string
+  /** How the role is worked, such as "Full-time". Filters on this value. */
+  commitment?: string
+  /** The pay, such as `$95K–$120K`. */
+  pay?: React.ReactNode
+  /** Shows the New badge beside the title. */
+  isNew?: boolean
+  /** When the role was posted, such as "Posted 2 days ago". */
+  posted?: React.ReactNode
+  /** Where the role's page is. A role without one calls the block's `onRoleSelect`. */
+  href?: string
+}
+
+const ARABIC = /[؀-ۿ]/
+
+/** Whether a string has no Arabic letters, such as a pay range, which Figma keeps on its English style in Arabic too. */
+export const isLatin = (text: React.ReactNode) => typeof text === "string" && !ARABIC.test(text)
+
+/**
+ * A pay range and the figures around it: `$95K–$120K` stays one run, and a
+ * number inside an Arabic sentence, `من 95 إلى 120 ألف دولار`, keeps its
+ * order. Each figure is set in its own left-to-right isolate, as Figma's
+ * LRI…PDI marks do. Anything but a string passes through untouched.
+ */
+const FIGURE = /(\$?\d[\d,.]*K?(?:[–-]\$?\d[\d,.]*K?)?)/
+
+export function Figures({ children }: { children: React.ReactNode }) {
+  if (typeof children !== "string") return <>{children}</>
+  const parts = children.split(FIGURE)
+  if (parts.length === 1) return <>{children}</>
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? (
+          <bdi key={index} dir="ltr" className="whitespace-nowrap">
+            {part}
+          </bdi>
+        ) : (
+          <React.Fragment key={index}>{part}</React.Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+export interface CareersSectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** The id of the heading that names the section. */
+  labelledBy?: string
+  /** Classes for the 1248px column inside the padding. */
+  contentClassName?: string
+  /** The space between the header and what follows: 48px (`lg`) or 40px (`md`), as Figma sets each Type. */
+  gap?: "lg" | "md"
+}
+
+/**
+ * Figma's section: `theme/background`, padding 80 × 96 on Desktop, 64 × 24
+ * on Tablet and 32 × 16 on phones, and a 1248px column.
+ */
+export function CareersSection({ labelledBy, className, contentClassName, gap = "lg", children, ...props }: CareersSectionProps) {
+  return (
+    <section
+      aria-labelledby={labelledBy}
+      className={cn("[container-type:inline-size] bg-background px-4 py-8 md:px-6 md:py-16 lg:px-24 lg:py-20", className)}
+      {...props}
+    >
+      <div className={cn("mx-auto flex w-full max-w-[1248px] flex-col", gap === "lg" ? "gap-12" : "gap-10", contentClassName)}>{children}</div>
+    </section>
+  )
+}
+
+export interface CareersHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** The id the section's `aria-labelledby` points at. */
+  headingId: string
+  /** The small line above the heading, or a Soft badge when `eyebrowBadge` is set. Hidden when empty. */
+  eyebrow?: React.ReactNode
+  /** Sets the eyebrow in a Soft badge rather than as a line of text. */
+  eyebrowBadge?: boolean
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. Hidden when empty. */
+  description?: React.ReactNode
+  /** Figma's two heading sizes: 3XL on phones and 4XL from Tablet (`lg`), or 2XL and 3XL (`md`). */
+  size?: "lg" | "md"
+}
+
+/**
+ * The header, set from the start: an optional eyebrow, the heading and its
+ * description in `muted-foreground`, 12px apart. Anything passed as children
+ * follows them.
+ */
+export function CareersHeader({ headingId, eyebrow, eyebrowBadge = false, heading, description, size = "lg", className, children, ...props }: CareersHeaderProps) {
+  return (
+    <header className={cn("flex w-full flex-col items-start gap-3", className)} {...props}>
+      {eyebrow ? (
+        eyebrowBadge ? (
+          <Badge variant="soft" tone="secondary" size="md" radius="rounded">
+            {eyebrow}
+          </Badge>
+        ) : (
+          <p className="text-sm font-medium text-muted-foreground">{eyebrow}</p>
+        )
+      ) : null}
+      <h2
+        id={headingId}
+        className={cn(
+          "font-semibold text-foreground",
+          size === "lg" ? "text-3xl [@container(min-width:40rem)]:text-4xl" : "text-2xl [@container(min-width:40rem)]:text-3xl"
+        )}
+      >
+        {heading}
+      </h2>
+      {description ? <p className={cn("max-w-[720px] text-muted-foreground", size === "lg" ? "text-lg" : "text-base")}>{description}</p> : null}
+      {children}
+    </header>
+  )
+}
+
+/**
+ * Figma's `Separator`: a 1px `border` line across its container. The code
+ * library has no Separator component yet; swap this for it once it does.
+ */
+export function CareersRule({ className }: { className?: string }) {
+  return <div role="presentation" className={cn("w-full border-t border-border", className)} />
+}
+
+/** The "New" badge beside a role's title: Soft, `success`, small and pill-shaped, as Figma draws it. */
+export function CareersNewBadge({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <Badge variant="soft" tone="success" size="sm" radius="rounded" className={cn("shrink-0", className)}>
+      {children}
+    </Badge>
+  )
+}
+
+export interface CareersMetaItemProps extends React.HTMLAttributes<HTMLSpanElement> {
+  icon: React.ElementType
+  children: React.ReactNode
+}
+
+/** One fact about a role: a 16px Lucide mark and its text, in `muted-foreground`. */
+export function CareersMetaItem({ icon: Icon, children, className, ...props }: CareersMetaItemProps) {
+  return (
+    <span className={cn("inline-flex items-center gap-1.5 text-sm text-muted-foreground", className)} {...props}>
+      <Icon size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="shrink-0" />
+      <span className="min-w-0">
+        <Figures>{children}</Figures>
+      </span>
+    </span>
+  )
+}
+
+export interface CareersRoleMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
+  role: Pick<CareersRole, "location" | "commitment" | "pay">
+  /** The team, such as "Design Systems team", after a people mark, when a block shows it among the facts. */
+  team?: React.ReactNode
+  /** Lays the facts out in a column, as the card does, rather than in a wrapping row. */
+  stacked?: boolean
+}
+
+/** A role's place, commitment and pay, each after its mark (map pin, clock, banknote), and its team when given. */
+export function CareersRoleMeta({ role, team, stacked = false, className, ...props }: CareersRoleMetaProps) {
+  const { location, commitment, pay } = role
+  if (!location && !commitment && !pay && !team) return null
+  return (
+    <div className={cn("flex", stacked ? "flex-col gap-2" : "flex-wrap gap-x-4 gap-y-1", className)} {...props}>
+      {location ? <CareersMetaItem icon={MapPin}>{location}</CareersMetaItem> : null}
+      {commitment ? <CareersMetaItem icon={Clock}>{commitment}</CareersMetaItem> : null}
+      {pay ? <CareersMetaItem icon={Banknote}>{pay}</CareersMetaItem> : null}
+      {team ? <CareersMetaItem icon={Users}>{team}</CareersMetaItem> : null}
+    </div>
+  )
+}
+
+export interface CareersRoleActionProps {
+  role: CareersRole
+  /** The button's label, such as "View role". */
+  label: React.ReactNode
+  /** Figma's Button type: Outline on the list rows, Ghost on the cards, Solid on the featured role. */
+  variant?: ButtonProps["variant"]
+  size?: ButtonProps["size"]
+  /** Draws Figma's arrow-up-right after the label, mirrored in RTL. */
+  arrow?: boolean
+  /** Called when a role without an `href` is pressed. */
+  onSelect?: (role: CareersRole) => void
+  className?: string
+}
+
+/**
+ * A role's button: a link styled as one when the role has an `href`, a
+ * button that calls `onSelect` when it hasn't. Its accessible name adds the
+ * role's title, so a list of "View role" buttons is not eight of the same.
+ */
+export function CareersRoleAction({ role, label, variant = "outline", size = "md", arrow = false, onSelect, className }: CareersRoleActionProps) {
+  const text = typeof label === "string" ? label : undefined
+  const ariaLabel = text && typeof role.title === "string" ? `${text}: ${role.title}` : undefined
+  const content = (
+    <>
+      <span>{label}</span>
+      {arrow ? <ArrowUpRight aria-hidden strokeWidth={1.5} className="[&:dir(rtl)]:-scale-x-100" /> : null}
+    </>
+  )
+  if (role.href) {
+    return (
+      <a href={role.href} aria-label={ariaLabel} className={buttonVariants({ variant, size, className })}>
+        {content}
+      </a>
+    )
+  }
+  return (
+    <Button type="button" variant={variant} size={size} aria-label={ariaLabel} onClick={() => onSelect?.(role)} className={className}>
+      {content}
+    </Button>
+  )
+}
+
+export interface CareersRoleFilters {
+  department?: string
+  location?: string
+  commitment?: string
+  /** Matches the title, summary and team, ignoring case. */
+  query?: string
+}
+
+const textOf = (node: React.ReactNode): string => {
+  if (typeof node === "string" || typeof node === "number") return String(node)
+  if (Array.isArray(node)) return node.map(textOf).join(" ")
+  if (React.isValidElement<{ children?: React.ReactNode }>(node)) return textOf(node.props.children)
+  return ""
+}
+
+/** Whether a filter value narrows anything: empty, or the "all" value, does not. */
+const active = (value: string | undefined) => !!value && value !== CAREERS_ALL
+
+/** The roles a set of filters leaves, in their own order. */
+export function filterRoles(roles: readonly CareersRole[], filters: CareersRoleFilters = {}): CareersRole[] {
+  const query = filters.query?.trim().toLowerCase()
+  return roles.filter((role) => {
+    if (active(filters.department) && role.department !== filters.department) return false
+    if (active(filters.location) && role.location !== filters.location) return false
+    if (active(filters.commitment) && role.commitment !== filters.commitment) return false
+    if (query) {
+      const haystack = [textOf(role.title), textOf(role.summary), role.department ?? ""].join(" ").toLowerCase()
+      if (!haystack.includes(query)) return false
+    }
+    return true
+  })
+}
+
+/** The distinct values a field takes across the roles, in order of first appearance. */
+export function distinctValues(roles: readonly CareersRole[], field: "department" | "location" | "commitment"): string[] {
+  const seen = new Set<string>()
+  for (const role of roles) {
+    const value = role[field]
+    if (value) seen.add(value)
+  }
+  return Array.from(seen)
+}
+
+/**
+ * A count in Arabic, which agrees with its noun: one and two have their own
+ * forms, 3 to 10 take the plural, 11 and over the singular. Each form is a
+ * string with `{n}` where the number goes; the number is written in Western
+ * digits. English needs none of this: `n === 1 ? "role" : "roles"`.
+ */
+export function arabicCount(n: number, forms: { zero: string; one: string; two: string; few: string; many: string }): string {
+  const form = n === 0 ? forms.zero : n === 1 ? forms.one : n === 2 ? forms.two : n <= 10 ? forms.few : forms.many
+  return form.replace("{n}", String(n))
+}
+
+/**
+ * A value that is controlled when `value` is passed and held here when it is
+ * not, so a block filters on its own and still takes `onChange` and a value
+ * from the page that owns it.
+ */
+export function useControllableValue<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T) => void] {
+  const [inner, setInner] = React.useState<T>(defaultValue)
+  const controlled = value !== undefined
+  const current = controlled ? value : inner
+  const set = React.useCallback(
+    (next: T) => {
+      if (!controlled) setInner(next)
+      onChange?.(next)
+    },
+    [controlled, onChange]
+  )
+  return [current, set]
+}
+
+/**
+ * A role with its description, for the blocks that read a whole posting: the
+ * panel and the page. Every field after `team` is optional; a block draws only
+ * the sections it has.
+ */
+export interface CareersPosting extends CareersRole {
+  /** The team's name, such as "Design Systems". */
+  team?: string
+  /** The paragraph under "About the role". */
+  about?: React.ReactNode
+  /** What the person will do, one bullet each. */
+  responsibilities?: string[]
+  /** What the team is looking for, one bullet each. */
+  requirements?: string[]
+  /** How the team hires, as a paragraph. */
+  hiring?: React.ReactNode
+}
+
+/** A heading over what it names: Figma's section of a posting. */
+export function CareersPostingSection({
+  heading,
+  level = 3,
+  className,
+  children,
+}: {
+  heading: React.ReactNode
+  /** The heading's level, 2 on a page that has no `h2` of its own above it and 3 under one. */
+  level?: 2 | 3
+  className?: string
+  children: React.ReactNode
+}) {
+  const Heading = level === 2 ? "h2" : "h3"
+  return (
+    <section className={cn("flex flex-col gap-3", className)}>
+      <Heading className="text-base font-semibold text-foreground">{heading}</Heading>
+      {children}
+    </section>
+  )
+}
+
+/** A bulleted list in `muted-foreground`, in one column or two from Tablet. */
+export function CareersBullets({ items, columns = 1, className }: { items: readonly React.ReactNode[]; columns?: 1 | 2; className?: string }) {
+  return (
+    <ul
+      className={cn(
+        "list-disc space-y-2 ps-5 text-sm text-muted-foreground marker:text-muted-foreground",
+        columns === 2 && "[@container(min-width:40rem)]:columns-2 [@container(min-width:40rem)]:gap-8 [@container(min-width:40rem)]:space-y-0 [&>li]:break-inside-avoid [&>li]:pb-2",
+        className
+      )}
+    >
+      {items.map((item, index) => (
+        <li key={index}>
+          <Figures>{item}</Figures>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/registry/blocks/careers/index.ts

@@ -0,0 +1,27 @@
+export {
+  CAREERS_ALL,
+  CareersBullets,
+  CareersHeader,
+  CareersMetaItem,
+  CareersNewBadge,
+  CareersPostingSection,
+  CareersRoleAction,
+  CareersRoleMeta,
+  CareersRule,
+  CareersSection,
+  arabicCount,
+  Figures,
+  distinctValues,
+  filterRoles,
+  isLatin,
+  useControllableValue,
+  type CareersHeaderProps,
+  type CareersLocale,
+  type CareersMetaItemProps,
+  type CareersPosting,
+  type CareersRole,
+  type CareersRoleActionProps,
+  type CareersRoleFilters,
+  type CareersRoleMetaProps,
+  type CareersSectionProps,
+} from "./careers"

package/registry/blocks/careers-about-card-role-list/CareersAboutCardRoleList.tsx

@@ -0,0 +1,235 @@
+"use client"
+
+import * as React from "react"
+import { CalendarDays, Play } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import {
+  CareersHeader,
+  CareersMetaItem,
+  CareersRoleAction,
+  CareersSection,
+  Figures,
+  type CareersLocale,
+  type CareersRole,
+} from "../careers/careers"
+
+/*
+ * Figma: `Careers` (46378:5405), Type=About Card + Role List.
+ *
+ * On a `muted` band: a header with a Soft badge above its heading, then an
+ * About us card beside a list of roles. The card is a dash and its title, a
+ * line about the team, a photo with a round play button over it, and an
+ * outline Learn More button. A role is its title, its place, its pay and the
+ * experience it asks for, with a solid Apply Now button at the end, ruled off
+ * from the next by a hairline.
+ *
+ * Desktop sets the card 320px wide beside the list, the photo under the text.
+ * Tablet puts the card above the list at full width, the photo at its start
+ * and the text and button beside it. Mobile stacks everything: the photo,
+ * the text, the button, and each role over its full-width Apply Now. In
+ * Arabic the card sits on the right and each Apply Now at the left edge.
+ *
+ * The photo is cropped as Figma crops it: the full width, starting 7% down
+ * the image, which is `object-position: 50% 15%` and keeps the head in frame.
+ *
+ * The play button calls `onPlay`; the block draws no video of its own, and
+ * does not autoplay anything.
+ *
+ * The band is `muted`, so the lines that are usually `muted-foreground` are
+ * `foreground` here: the grey falls under 4.5:1 on it.
+ *
+ * Content limits: a role's title up to 27 characters, with its New badge.
+ * The other limits are in the block's documentation page, which the default
+ * copy stays inside.
+ */
+
+export interface CareersAboutCardRole extends CareersRole {
+  /** What the role asks for, such as "3+ years". */
+  experience?: React.ReactNode
+}
+
+export interface CareersAboutCardPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface CareersAboutCardRoleListCopy {
+  /** The small badge above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The card's title. */
+  cardTitle: React.ReactNode
+  /** The card's paragraph about the team. */
+  cardBody: React.ReactNode
+  /** The card's outline button. */
+  learnMore: string
+  /** Names the play button for assistive technology. */
+  playLabel: string
+  /** The roles, in order. */
+  roles: CareersAboutCardRole[]
+  /** The label of every role's button. */
+  apply: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<CareersLocale, CareersAboutCardRoleListCopy> = {
+  en: {
+    eyebrow: "We are hiring",
+    heading: "Open Positions",
+    description: "Join a small team building the design system that product teams ship on.",
+    cardTitle: "About us",
+    cardBody: "Fasla is a small, remote-first team. We give people room to do their best work and the support to grow.",
+    learnMore: "Learn More",
+    playLabel: "Play the team video",
+    roles: [
+      { id: "product-designer", title: "Product Designer", location: "Remote (US)", pay: "$120K – $150K", experience: "3+ years" },
+      { id: "support-specialist", title: "Support Specialist", location: "Remote (EU)", pay: "$65K – $85K", experience: "2+ years" },
+      { id: "content-editor", title: "Content Editor", location: "London, UK", pay: "$75K – $95K", experience: "4+ years" },
+      { id: "data-analyst", title: "Data Analyst", location: "Remote (Worldwide)", pay: "$110K – $140K", experience: "3+ years" },
+    ],
+    apply: "Apply Now",
+  },
+  ar: {
+    eyebrow: "نوظّف الآن",
+    heading: "الوظائف المتاحة",
+    description: "انضم إلى فريق صغير يبني نظام التصميم الذي تُطلق به فرق المنتجات أعمالها.",
+    cardTitle: "من نحن",
+    cardBody: "فاصلة فريق صغير يعمل عن بُعد. نمنح كل شخص مساحة ليقدّم أفضل ما عنده، ودعمًا ليتطوّر.",
+    learnMore: "اعرف المزيد",
+    playLabel: "تشغيل فيديو الفريق",
+    roles: [
+      { id: "product-designer", title: "مصمم/ة منتجات", location: "عن بُعد من الولايات المتحدة", pay: "من 120 إلى 150 ألف دولار", experience: "3 سنوات فأكثر" },
+      { id: "support-specialist", title: "أخصائي/ة دعم العملاء", location: "عن بُعد من الاتحاد الأوروبي", pay: "من 65 إلى 85 ألف دولار", experience: "سنتان فأكثر" },
+      { id: "content-editor", title: "محرر/ة محتوى", location: "لندن، المملكة المتحدة", pay: "من 75 إلى 95 ألف دولار", experience: "4 سنوات فأكثر" },
+      { id: "data-analyst", title: "محلل/ة بيانات", location: "عن بُعد من أي مكان في العالم", pay: "من 110 إلى 140 ألف دولار", experience: "3 سنوات فأكثر" },
+    ],
+    apply: "قدّم الآن",
+  },
+}
+
+export interface CareersAboutCardRoleListProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<CareersAboutCardRoleListCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: CareersLocale
+  /** The card's photo. A `background` placeholder shows without it. */
+  photo?: CareersAboutCardPhoto
+  /** Called when the play button is pressed. */
+  onPlay?: () => void
+  /** Where the Learn More button goes. Without it, the button calls `onLearnMore`. */
+  learnMoreHref?: string
+  /** Called when Learn More is pressed and has no `learnMoreHref`. */
+  onLearnMore?: () => void
+  /** Called when a role without an `href` has its Apply Now button pressed. */
+  onRoleSelect?: (role: CareersRole) => void
+}
+
+export function CareersAboutCardRoleList({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  cardTitle,
+  cardBody,
+  learnMore,
+  playLabel,
+  roles,
+  apply,
+  photo,
+  onPlay,
+  learnMoreHref,
+  onLearnMore,
+  onRoleSelect,
+  className,
+  ...props
+}: CareersAboutCardRoleListProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = roles ?? copy.roles
+  const learn = learnMore ?? copy.learnMore
+
+  return (
+    <CareersSection labelledBy={headingId} className={cn("bg-muted", className)} {...props}>
+      <CareersHeader
+        headingId={headingId}
+        eyebrow={eyebrow ?? copy.eyebrow}
+        eyebrowBadge
+        heading={heading ?? copy.heading}
+        description={description ?? copy.description}
+        className="[&>p:last-child]:text-foreground"
+      />
+
+      <div className="flex flex-col gap-8 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-12">
+        <div className="grid w-full grid-cols-1 gap-x-6 gap-y-4 rounded-2xl border border-border bg-card p-5 text-card-foreground shadow-sm [@container(min-width:40rem)]:grid-cols-[16.375rem_minmax(0,1fr)] [@container(min-width:64rem)]:w-80 [@container(min-width:64rem)]:shrink-0 [@container(min-width:64rem)]:grid-cols-1">
+          <div className="flex items-center gap-3 [@container(min-width:40rem)]:col-start-2 [@container(min-width:64rem)]:col-start-1">
+            <span aria-hidden className="h-px w-4 bg-foreground" />
+            <h3 className="text-sm font-medium text-foreground">{cardTitle ?? copy.cardTitle}</h3>
+          </div>
+          <p className="text-sm text-muted-foreground [@container(min-width:40rem)]:col-start-2 [@container(min-width:64rem)]:col-start-1">{cardBody ?? copy.cardBody}</p>
+          <div className="relative order-first aspect-[3/2] w-full overflow-hidden rounded-xl bg-background [@container(min-width:40rem)]:col-start-1 [@container(min-width:40rem)]:row-span-3 [@container(min-width:40rem)]:row-start-1 [@container(min-width:40rem)]:aspect-auto [@container(min-width:40rem)]:h-44 [@container(min-width:64rem)]:order-none [@container(min-width:64rem)]:row-auto [@container(min-width:64rem)]:row-span-1 [@container(min-width:64rem)]:aspect-[3/2] [@container(min-width:64rem)]:h-auto">
+            {photo ? <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover object-[50%_15%]" /> : null}
+            <Button
+              type="button"
+              variant="default"
+              size="icon-lg"
+              radius="rounded"
+              aria-label={playLabel ?? copy.playLabel}
+              onClick={onPlay}
+              className="absolute inset-0 m-auto"
+            >
+              <Play aria-hidden strokeWidth={1.5} className="fill-current" />
+            </Button>
+          </div>
+          {learnMoreHref ? (
+            <a
+              href={learnMoreHref}
+              className={buttonVariants({ variant: "outline", size: "md", className: "w-fit [@container(min-width:40rem)]:col-start-2 [@container(min-width:64rem)]:col-start-1" })}
+            >
+              {learn}
+            </a>
+          ) : (
+            <Button type="button" variant="outline" size="md" onClick={onLearnMore} className="w-fit [@container(min-width:40rem)]:col-start-2 [@container(min-width:64rem)]:col-start-1">
+              {learn}
+            </Button>
+          )}
+        </div>
+
+        <ul className="flex min-w-0 flex-1 flex-col">
+          {list.map((role) => (
+            <li
+              key={role.id}
+              className="flex flex-col gap-4 border-b border-border py-6 first:pt-0 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-8"
+            >
+              <div className="flex min-w-0 flex-col gap-1">
+                <h3 className="text-xl font-medium text-foreground">{role.title}</h3>
+                {role.location ? <p className="text-sm text-foreground">{role.location}</p> : null}
+                {role.pay ? (
+                  <p className="text-sm text-foreground">
+                    <Figures>{role.pay}</Figures>
+                  </p>
+                ) : null}
+                {role.experience ? (
+                  <CareersMetaItem icon={CalendarDays} className="text-foreground">
+                    {role.experience}
+                  </CareersMetaItem>
+                ) : null}
+              </div>
+              <CareersRoleAction role={role} label={apply ?? copy.apply} variant="default" size="md" onSelect={onRoleSelect} className="w-full shrink-0 [@container(min-width:40rem)]:w-auto" />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </CareersSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const careersAboutCardRoleListCopy = COPY

package/registry/blocks/careers-about-card-role-list/index.ts

@@ -0,0 +1,8 @@
+export {
+  CareersAboutCardRoleList,
+  careersAboutCardRoleListCopy,
+  type CareersAboutCardPhoto,
+  type CareersAboutCardRole,
+  type CareersAboutCardRoleListCopy,
+  type CareersAboutCardRoleListProps,
+} from "./CareersAboutCardRoleList"