@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/careers-featured-role-spotlight/CareersFeaturedRoleSpotlight.tsx

@@ -0,0 +1,271 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, Share2 } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import {
+  CareersRoleAction,
+  CareersRule,
+  CareersSection,
+  Figures,
+  type CareersLocale,
+  type CareersRole,
+} from "../careers/careers"
+
+/*
+ * Figma: `Careers` (46378:5405), Type=Featured Role Spotlight.
+ *
+ * One role, given the room. On the start side: a small "Featured role" line,
+ * the role's title with its team under it in `muted-foreground`, what the
+ * role is, four small tiles (salary, place, commitment, team), and two
+ * buttons, a solid Apply for this role and an outline Share role. On the end
+ * side, a photo. Under a hairline: "Also hiring in Design" and the team's
+ * other roles as two linked cards.
+ *
+ * Desktop sets the text beside a 480 × 520 photo, the tiles four across.
+ * Tablet puts the photo under the buttons at full width, the tiles two by
+ * two, the other roles two across. Mobile is the same in one column, the
+ * other roles stacked. In Arabic the photo sits at the left.
+ *
+ * Share role really shares: it opens the device's share sheet where there is
+ * one, and copies the link where there is not, then says so. Pass `onShare` to
+ * do it your own way as well.
+ *
+ * Content limits: a role's title up to 27 characters. The other limits are in
+ * the block's documentation page, which the default copy stays inside.
+ */
+
+export interface CareersFeaturedRole extends CareersRole {
+  /** The team's name in the tile, such as "Design Systems". */
+  team?: string
+}
+
+export interface CareersFeaturedRoleSpotlightCopy {
+  /** The small line above the title. */
+  eyebrow: React.ReactNode
+  /** The role in the spotlight: its title, summary, pay, place, commitment, team and link. */
+  featured: CareersFeaturedRole
+  /** The line under the title, such as "Design Systems team". */
+  teamLine: React.ReactNode
+  /** The four tiles' labels: salary, place, commitment, team. */
+  factLabels: [string, string, string, string]
+  /** The solid button's label. */
+  apply: string
+  /** The outline button's label. */
+  share: string
+  /** Said once the link has been copied. */
+  copied: string
+  /** The line before the other roles, such as "Also hiring in Design". */
+  alsoHiring: React.ReactNode
+  /** The team's other roles. */
+  others: CareersRole[]
+  /** What separates a card's place from its commitment. */
+  separator: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<CareersLocale, CareersFeaturedRoleSpotlightCopy> = {
+  en: {
+    eyebrow: "Featured role",
+    featured: {
+      id: "senior-product-designer",
+      title: "Senior Product Designer",
+      summary:
+        "You'll own the design-system surface end to end: the token model, the component anatomy, and the documentation that makes both usable by 40 engineers. It is the most leveraged design role we have.",
+      pay: "$95K–$120K",
+      location: "Remote (EU)",
+      commitment: "Full-time",
+      team: "Design Systems",
+    },
+    teamLine: "Design Systems team",
+    factLabels: ["Salary", "Location", "Commitment", "Team"],
+    apply: "Apply for this role",
+    share: "Share role",
+    copied: "Link copied",
+    alsoHiring: "Also hiring in Design",
+    others: [
+      { id: "motion-designer", title: "Motion Designer", location: "Remote", commitment: "Contract" },
+      { id: "design-ops-lead", title: "Design Ops Lead", location: "Amman", commitment: "Full-time" },
+    ],
+    separator: " · ",
+  },
+  ar: {
+    eyebrow: "وظيفة مميزة",
+    featured: {
+      id: "senior-product-designer",
+      title: "مصمم/ة منتجات أول",
+      summary:
+        "تملّك واجهة نظام التصميم من البداية إلى النهاية: نموذج الرموز وتشريح المكوّنات والتوثيق الذي يجعل الاثنين قابلين للاستخدام من قِبل 40 مهندسًا. إنها أكثر وظائف التصميم تأثيرًا لدينا.",
+      // Figma's form, 16 characters: the tile is narrow, so the pay must fit on one line (limit 19).
+      pay: "95–120 ألف دولار",
+      location: "عن بُعد (الاتحاد الأوروبي)",
+      commitment: "دوام كامل",
+      team: "أنظمة التصميم",
+    },
+    teamLine: "فريق أنظمة التصميم",
+    factLabels: ["الراتب", "الموقع", "الالتزام", "الفريق"],
+    apply: "قدّم على هذه الوظيفة",
+    share: "شارك الوظيفة",
+    copied: "تم نسخ الرابط",
+    alsoHiring: "نوظّف أيضًا في التصميم",
+    others: [
+      { id: "design-ops-lead", title: "قائد/ة عمليات التصميم", location: "عمّان", commitment: "دوام كامل" },
+      { id: "motion-designer", title: "مصمم/ة حركة", location: "عن بُعد", commitment: "عقد" },
+    ],
+    separator: "، ",
+  },
+}
+
+export interface CareersFeaturedRoleSpotlightPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface CareersFeaturedRoleSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<CareersFeaturedRoleSpotlightCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: CareersLocale
+  /** The photo beside the text. A `muted` placeholder shows without it. */
+  photo?: CareersFeaturedRoleSpotlightPhoto
+  /** The link Share role shares. Defaults to the page's own address. */
+  shareUrl?: string
+  /** Called when Share role is pressed, besides sharing. */
+  onShare?: (role: CareersRole) => void
+  /** Called when a role without an `href` has its button or card pressed. */
+  onRoleSelect?: (role: CareersRole) => void
+}
+
+/** A tile: a small label over a value. */
+function Fact({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex min-w-0 flex-col gap-1 rounded-xl border border-border bg-card p-3 text-card-foreground">
+      <dt className="text-xs text-muted-foreground">{label}</dt>
+      <dd className="text-sm font-medium text-foreground">
+        <Figures>{children}</Figures>
+      </dd>
+    </div>
+  )
+}
+
+const CARD =
+  "flex w-full items-center justify-between gap-4 rounded-xl border border-border bg-card p-4 text-start text-card-foreground transition-colors hover:bg-accent motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+
+export function CareersFeaturedRoleSpotlight({
+  locale = "en",
+  eyebrow,
+  featured: featuredProp,
+  teamLine,
+  factLabels,
+  apply,
+  share,
+  copied,
+  alsoHiring,
+  others,
+  separator,
+  photo,
+  shareUrl,
+  onShare,
+  onRoleSelect,
+  className,
+  ...props
+}: CareersFeaturedRoleSpotlightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const featured = featuredProp ?? copy.featured
+  const labels = factLabels ?? copy.factLabels
+  const list = others ?? copy.others
+  const [isCopied, setIsCopied] = React.useState(false)
+
+  const shareRole = async () => {
+    onShare?.(featured)
+    const url = shareUrl ?? (typeof window === "undefined" ? "" : window.location.href)
+    try {
+      if (typeof navigator !== "undefined" && typeof navigator.share === "function") {
+        await navigator.share({ title: typeof featured.title === "string" ? featured.title : undefined, url })
+      } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+        await navigator.clipboard.writeText(url)
+        setIsCopied(true)
+      }
+    } catch {
+      // Closing the share sheet rejects; nothing went wrong.
+    }
+  }
+
+  return (
+    <CareersSection labelledBy={headingId} className={className} {...props}>
+      <div className="grid grid-cols-1 gap-8 [@container(min-width:64rem)]:grid-cols-[minmax(0,1fr)_30rem] [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-12">
+        <div className="flex min-w-0 flex-col items-start gap-6">
+          <p className="text-sm font-medium text-muted-foreground">{eyebrow ?? copy.eyebrow}</p>
+          <h2 id={headingId} className="max-w-[28rem] text-3xl font-semibold text-foreground [@container(min-width:40rem)]:text-4xl">
+            <span className="block">{featured.title}</span>
+            <span className="block text-muted-foreground">{teamLine ?? copy.teamLine}</span>
+          </h2>
+          {featured.summary ? <p className="max-w-[560px] text-lg text-muted-foreground">{featured.summary}</p> : null}
+          <dl className="grid w-full grid-cols-2 gap-3 [@container(min-width:64rem)]:max-w-[40rem] [@container(min-width:64rem)]:grid-cols-4">
+            <Fact label={labels[0]}>{featured.pay}</Fact>
+            <Fact label={labels[1]}>{featured.location}</Fact>
+            <Fact label={labels[2]}>{featured.commitment}</Fact>
+            <Fact label={labels[3]}>{featured.team}</Fact>
+          </dl>
+          <div className="flex flex-wrap items-center gap-3">
+            <CareersRoleAction role={featured} label={apply ?? copy.apply} variant="default" size="md" arrow onSelect={onRoleSelect} />
+            <Button type="button" variant="outline" size="md" onClick={shareRole}>
+              <Share2 aria-hidden strokeWidth={1.5} />
+              <span>{share ?? copy.share}</span>
+            </Button>
+            <p role="status" className="text-sm text-muted-foreground">
+              {isCopied ? (copied ?? copy.copied) : null}
+            </p>
+          </div>
+        </div>
+
+        <div className="relative h-60 overflow-hidden rounded-2xl bg-muted [@container(min-width:40rem)]:h-[16.5rem] [@container(min-width:64rem)]:h-[32.5rem]">
+          {photo ? <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" /> : null}
+        </div>
+      </div>
+
+      <CareersRule />
+
+      <div className="flex flex-col gap-4 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:gap-10">
+        <p className="shrink-0 text-sm text-muted-foreground [@container(min-width:64rem)]:w-40">{alsoHiring ?? copy.alsoHiring}</p>
+        <ul className="grid min-w-0 flex-1 grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2">
+          {list.map((other) => {
+            const body = (
+              <>
+                <span className="flex min-w-0 flex-col gap-1">
+                  <span className="text-sm font-medium text-foreground">{other.title}</span>
+                  <span className="text-xs text-muted-foreground">
+                    {[other.location, other.commitment].filter(Boolean).join(separator ?? copy.separator)}
+                  </span>
+                </span>
+                <ArrowUpRight aria-hidden strokeWidth={1.5} className={cn("size-4 shrink-0 text-muted-foreground [&:dir(rtl)]:-scale-x-100")} />
+              </>
+            )
+            return (
+              <li key={other.id}>
+                {other.href ? (
+                  <a href={other.href} className={CARD}>
+                    {body}
+                  </a>
+                ) : (
+                  <button type="button" onClick={() => onRoleSelect?.(other)} className={CARD}>
+                    {body}
+                  </button>
+                )}
+              </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 careersFeaturedRoleSpotlightCopy = COPY

package/registry/blocks/careers-featured-role-spotlight/index.ts

@@ -0,0 +1,8 @@
+export {
+  CareersFeaturedRoleSpotlight,
+  careersFeaturedRoleSpotlightCopy,
+  type CareersFeaturedRole,
+  type CareersFeaturedRoleSpotlightCopy,
+  type CareersFeaturedRoleSpotlightPhoto,
+  type CareersFeaturedRoleSpotlightProps,
+} from "./CareersFeaturedRoleSpotlight"

package/registry/blocks/careers-no-open-roles-empty-state/CareersNoOpenRolesEmptyState.tsx

@@ -0,0 +1,330 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, Check, Link2, Mail, Search, Send } from "lucide-react"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { Input } from "../../ui/input/input"
+import { CareersRule, CareersSection, useControllableValue, type CareersLocale } from "../careers/careers"
+
+/*
+ * Figma: `Careers` (46378:5405), Type=No Open Roles — Empty State.
+ *
+ * What a careers page says when it has no roles. On the start side: a `muted`
+ * square with a search mark, the heading, what is going on, a one-line email
+ * form with a solid Notify me button, and under it "What would you want to
+ * hear about?" with a row of topic chips. On the end side, a photo. Under a
+ * hairline, two cards: send a speculative application, and follow the team.
+ *
+ * Desktop sets the text beside a 480 × 400 photo and the cards two across.
+ * Tablet puts the photo under the chips at full width, the cards still two
+ * across. Mobile is one column. In Arabic the photo sits at the left.
+ *
+ * The form is real. It checks the address, calls `onSubmit(email, interests)`
+ * and shows the three things that can happen: the address is wrong, the send
+ * fails, or it worked. The chips are a multiple choice; each press calls
+ * `onInterestsChange` with everything chosen so far. The block holds no list
+ * of addresses and sends nothing itself: that is the page's `onSubmit`.
+ *
+ * Content limits: the heading up to 32 characters and a card's title up to
+ * 32. The other limits are in the block's documentation page, which the
+ * default copy stays inside.
+ */
+
+export interface CareersEmptyStateCard {
+  /** The card's title. */
+  title: React.ReactNode
+  /** What it is for. */
+  description: React.ReactNode
+  /** The card's ghost button label. */
+  action: string
+}
+
+export interface CareersNoOpenRolesEmptyStateCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** What is going on, and what the form does. */
+  description: React.ReactNode
+  /** Names the email field for assistive technology. */
+  emailLabel: string
+  /** The email field's placeholder. */
+  emailPlaceholder: string
+  /** The solid button's label. */
+  notify: string
+  /** Shown on the button while the address is sending. */
+  pendingLabel: string
+  /** The line over the topic chips. */
+  interestsLabel: React.ReactNode
+  /** The topics, one chip each. */
+  topics: string[]
+  /** Said once the address is in. */
+  success: React.ReactNode
+  /** Said when the address is not one. */
+  emailError: React.ReactNode
+  /** Said when sending failed. */
+  sendError: React.ReactNode
+  /** The speculative application card. */
+  speculative: CareersEmptyStateCard
+  /** The follow card. */
+  follow: CareersEmptyStateCard
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<CareersLocale, CareersNoOpenRolesEmptyStateCopy> = {
+  en: {
+    heading: "No open roles right now",
+    description: "We hire in waves, and the next one opens in October. Leave an email and we will write to you before the roles go public: one message, no newsletter.",
+    emailLabel: "Email address",
+    emailPlaceholder: "you@example.com",
+    notify: "Notify me",
+    pendingLabel: "Sending",
+    interestsLabel: "What would you want to hear about?",
+    topics: ["Design", "Engineering", "Product", "Go-to-market", "People", "Internships"],
+    success: "Thank you. We will write before the roles go public.",
+    emailError: "Enter a valid email address.",
+    sendError: "We could not send that. Please try again.",
+    speculative: {
+      title: "Send a speculative application",
+      description: "Tell us what you do and where you would fit. We read every one and keep it on file for a year.",
+      action: "Apply speculatively",
+    },
+    follow: {
+      title: "Follow the team",
+      description: "We post new roles on LinkedIn the morning they open, along with the work behind them.",
+      action: "Follow on LinkedIn",
+    },
+  },
+  ar: {
+    heading: "لا توجد وظائف متاحة حاليًا",
+    description: "نوظّف على دفعات، والدفعة القادمة تبدأ في أكتوبر. اترك بريدك وسنكتب إليك قبل نشر الوظائف: رسالة واحدة، بلا نشرة بريدية.",
+    emailLabel: "البريد الإلكتروني",
+    emailPlaceholder: "اكتب بريدك الإلكتروني",
+    notify: "أخبرني",
+    pendingLabel: "جارٍ الإرسال",
+    interestsLabel: "عمّا تريد أن تسمع؟",
+    topics: ["التصميم", "الهندسة", "المنتج", "التسويق والنمو", "الموارد البشرية", "التدريب العملي"],
+    success: "شكرًا لك. سنكتب إليك قبل نشر الوظائف.",
+    emailError: "اكتب بريدًا إلكترونيًا صحيحًا.",
+    sendError: "تعذّر الإرسال. حاول مرة أخرى.",
+    speculative: {
+      title: "أرسل طلبًا بمبادرتك",
+      description: "أخبرنا بما تفعله وأين تناسب. نقرأ كل طلب ونحفظه لمدة عام.",
+      action: "قدّم بمبادرتك",
+    },
+    follow: {
+      title: "تابع الفريق",
+      description: "ننشر الوظائف الجديدة على لينكدإن صباح إتاحتها، مع العمل الذي يقف خلفها.",
+      action: "تابعنا على لينكدإن",
+    },
+  },
+}
+
+export interface CareersNoOpenRolesEmptyStatePhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface CareersNoOpenRolesEmptyStateProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onSubmit">,
+    Partial<CareersNoOpenRolesEmptyStateCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: CareersLocale
+  /** The photo beside the text. A `muted` placeholder shows without it. */
+  photo?: CareersNoOpenRolesEmptyStatePhoto
+  /**
+   * Called with the checked address and the topics chosen. Resolve to show the
+   * thank-you line; reject, or throw, to show the send error.
+   */
+  onSubmit?: (email: string, interests: string[]) => void | Promise<void>
+  /** The topics chosen. Pass it to control the chips. */
+  interests?: string[]
+  /** The topics chosen on first render. */
+  defaultInterests?: string[]
+  /** Called with every topic chosen after a chip is pressed. */
+  onInterestsChange?: (interests: string[]) => void
+  /** Where the speculative application card goes. Without it, the card's button calls `onSpeculative`. */
+  speculativeHref?: string
+  /** Called when the speculative application button is pressed and has no `speculativeHref`. */
+  onSpeculative?: () => void
+  /** Where the follow card goes. Without it, the card's button calls `onFollow`. */
+  followHref?: string
+  /** Called when the follow button is pressed and has no `followHref`. */
+  onFollow?: () => void
+}
+
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+type Status = "idle" | "invalid" | "sending" | "done" | "error"
+
+/** A 40px `muted` square holding a 16px mark, as the cards use. */
+function Tile({ children, size = "sm" }: { children: React.ReactNode; size?: "sm" | "lg" }) {
+  return (
+    <span className={size === "lg" ? "flex size-14 items-center justify-center rounded-xl bg-muted text-muted-foreground" : "flex size-9 items-center justify-center rounded-lg bg-muted text-foreground"}>
+      {children}
+    </span>
+  )
+}
+
+export function CareersNoOpenRolesEmptyState({
+  locale = "en",
+  heading,
+  description,
+  emailLabel,
+  emailPlaceholder,
+  notify,
+  pendingLabel,
+  interestsLabel,
+  topics,
+  success,
+  emailError,
+  sendError,
+  speculative,
+  follow,
+  photo,
+  onSubmit,
+  interests: interestsProp,
+  defaultInterests,
+  onInterestsChange,
+  speculativeHref,
+  onSpeculative,
+  followHref,
+  onFollow,
+  className,
+  ...props
+}: CareersNoOpenRolesEmptyStateProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const [email, setEmail] = React.useState("")
+  const [status, setStatus] = React.useState<Status>("idle")
+  const [chosen, setChosen] = useControllableValue<string[]>(interestsProp, defaultInterests ?? [], onInterestsChange)
+  const list = topics ?? copy.topics
+  const cards = [
+    { card: speculative ?? copy.speculative, icon: Send, href: speculativeHref, onPress: onSpeculative },
+    { card: follow ?? copy.follow, icon: Link2, href: followHref, onPress: onFollow },
+  ]
+  const arrow = <ArrowUpRight aria-hidden strokeWidth={1.5} className="[&:dir(rtl)]:-scale-x-100" />
+
+  const toggle = (topic: string) => setChosen(chosen.includes(topic) ? chosen.filter((item) => item !== topic) : [...chosen, topic])
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    const value = email.trim()
+    if (!EMAIL.test(value)) {
+      setStatus("invalid")
+      return
+    }
+    setStatus("sending")
+    try {
+      await onSubmit?.(value, chosen)
+      setStatus("done")
+    } catch {
+      setStatus("error")
+    }
+  }
+
+  const message = status === "invalid" ? (emailError ?? copy.emailError) : status === "error" ? (sendError ?? copy.sendError) : undefined
+
+  return (
+    <CareersSection labelledBy={headingId} className={className} {...props}>
+      <div className="grid grid-cols-1 gap-8 [@container(min-width:64rem)]:grid-cols-[minmax(0,1fr)_30rem] [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:gap-12">
+        <div className="flex min-w-0 flex-col items-start gap-6">
+          <Tile size="lg">
+            <Search size={20} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+          </Tile>
+          <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="max-w-[560px] text-base text-muted-foreground">{description ?? copy.description}</p>
+
+          {status === "done" ? (
+            <p role="status" className="inline-flex items-center gap-2 text-sm font-medium text-success">
+              <Check aria-hidden size={16} strokeWidth={1.5} />
+              <span>{success ?? copy.success}</span>
+            </p>
+          ) : (
+            <form noValidate onSubmit={submit} className="flex w-full flex-col items-start gap-3 [@container(min-width:40rem)]:flex-row">
+              <Input
+                type="email"
+                size="md"
+                autoComplete="email"
+                aria-label={emailLabel ?? copy.emailLabel}
+                placeholder={emailPlaceholder ?? copy.emailPlaceholder}
+                startIcon={<Mail aria-hidden strokeWidth={1.5} />}
+                value={email}
+                invalid={status === "invalid" || status === "error"}
+                error={message}
+                onChange={(event) => {
+                  setEmail(event.target.value)
+                  if (status === "invalid" || status === "error") setStatus("idle")
+                }}
+                className="w-full [@container(min-width:40rem)]:max-w-[22rem]"
+              />
+              <Button type="submit" variant="default" size="md" loading={status === "sending"} loadingLabel={pendingLabel ?? copy.pendingLabel} className="w-full [@container(min-width:40rem)]:w-auto">
+                <span>{notify ?? copy.notify}</span>
+                {arrow}
+              </Button>
+            </form>
+          )}
+
+          <div role="group" aria-labelledby={`${headingId}-interests`} className="flex flex-col items-start gap-3">
+            <p id={`${headingId}-interests`} className="text-sm font-medium text-foreground">
+              {interestsLabel ?? copy.interestsLabel}
+            </p>
+            <div className="flex flex-wrap gap-2">
+              {list.map((topic) => (
+                <Button
+                  key={topic}
+                  type="button"
+                  size="sm"
+                  radius="rounded"
+                  variant={chosen.includes(topic) ? "secondary" : "outline"}
+                  aria-pressed={chosen.includes(topic)}
+                  onClick={() => toggle(topic)}
+                >
+                  {topic}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="relative h-60 overflow-hidden rounded-2xl bg-muted [@container(min-width:40rem)]:h-[15.75rem] [@container(min-width:64rem)]:h-[25rem]">
+          {photo ? <img src={photo.src} alt={photo.alt} loading="lazy" decoding="async" className="absolute inset-0 size-full object-cover" /> : null}
+        </div>
+      </div>
+
+      <CareersRule />
+
+      <ul className="grid grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2">
+        {cards.map(({ card, icon: Icon, href, onPress }) => (
+          <li key={String(card.title)} className="flex flex-col items-start gap-4 rounded-xl border border-border bg-card p-6 text-card-foreground">
+            <Tile>
+              <Icon size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+            </Tile>
+            <div className="flex flex-col gap-2">
+              <h3 className="text-base font-semibold text-foreground">{card.title}</h3>
+              <p className="text-sm text-muted-foreground">{card.description}</p>
+            </div>
+            {href ? (
+              <a href={href} className={buttonVariants({ variant: "ghost", size: "md" })}>
+                <span>{card.action}</span>
+                {arrow}
+              </a>
+            ) : (
+              <Button type="button" variant="ghost" size="md" onClick={onPress}>
+                <span>{card.action}</span>
+                {arrow}
+              </Button>
+            )}
+          </li>
+        ))}
+      </ul>
+    </CareersSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const careersNoOpenRolesEmptyStateCopy = COPY

package/registry/blocks/careers-no-open-roles-empty-state/index.ts

@@ -0,0 +1,8 @@
+export {
+  CareersNoOpenRolesEmptyState,
+  careersNoOpenRolesEmptyStateCopy,
+  type CareersEmptyStateCard,
+  type CareersNoOpenRolesEmptyStateCopy,
+  type CareersNoOpenRolesEmptyStatePhoto,
+  type CareersNoOpenRolesEmptyStateProps,
+} from "./CareersNoOpenRolesEmptyState"