@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/team-founder-spotlight/TeamFounderSpotlight.tsx

@@ -0,0 +1,176 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Reveal, TeamHeader, TeamPortrait, TeamSection, type TeamLocale, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Founder Spotlight.
+ *
+ * A header (eyebrow and heading), then a wide feature card, the portrait of one
+ * founder beside a pull-quote in a large light style with the name and role,
+ * next to a column of three support cards, each with a small portrait, a name,
+ * a role and a one-line description.
+ *
+ * Desktop is Figma's row: the feature card 760px, the column 488px, 32px
+ * apart; the portrait is 300px wide and the card as tall as the column.
+ * Tablet puts the support cards under the feature card in three columns, each
+ * a stacked card, with the feature card's portrait 280px wide. Mobile stacks
+ * everything: the portrait across the top of the feature card, then the quote,
+ * then the support cards one under another. In RTL the feature card sits at
+ * the start (the right) and its portrait on the right of the card.
+ *
+ * Entrance (one time): the portrait fades in while it settles from 1.04 to
+ * 1.0 (600ms), the quote fades up, then the support cards slide in from the end
+ * side on Desktop, rising 12px on Tablet and Mobile, 80ms apart. Hovering a
+ * support card tints it with `muted`.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop.
+ */
+
+export interface TeamFounder extends TeamPerson {
+  /** The pull-quote, with its quotation marks. */
+  quote: React.ReactNode
+}
+
+export interface TeamSupportingFounder extends TeamPerson {
+  /** The one-line description under the role. Hidden when empty. */
+  description?: React.ReactNode
+}
+
+export interface TeamFounderSpotlightCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The founder on the feature card. */
+  feature: TeamFounder
+  /** The three people on the support cards, in reading order. */
+  supporters: TeamSupportingFounder[]
+}
+
+/**
+ * Figma's copy, English and Arabic. Figma's second support card is Nadia
+ * Rahman, whose photo can't ship: Sofia Marchetti stands in, with her own role.
+ */
+const COPY: Record<TeamLocale, TeamFounderSpotlightCopy> = {
+  en: {
+    eyebrow: "FOUNDERS",
+    heading: "Why we started Fasla",
+    feature: {
+      name: "Layla Mansour",
+      role: "Co-founder & Chief Executive",
+      quote: "“Every design system I had worked on died the moment it left the design file. Fasla exists so that handoff is not where the work stops.”",
+    },
+    supporters: [
+      { name: "Karim Haddad", role: "Co-founder & Chief Technology", description: "Owns the pipeline from token to shipped code." },
+      { name: "Sofia Marchetti", role: "Brand Designer", description: "Built the first component library and its rules." },
+      { name: "Tomas Vidal", role: "VP of Engineering", description: "Keeps the platform fast and the releases boring." },
+    ],
+  },
+  ar: {
+    eyebrow: "المؤسِّسون",
+    heading: "لماذا أنشأنا فاصلة",
+    feature: {
+      name: "ليلى منصور",
+      role: "شريكة مؤسِّسة والرئيسة التنفيذية",
+      quote: "«كل نظام تصميم عملت عليه كان يموت لحظة خروجه من ملف التصميم. فاصلة موجود ليكون التسليم ليس نهاية العمل.»",
+    },
+    supporters: [
+      { name: "كريم حداد", role: "شريك مؤسِّس ورئيس التقنية", description: "يدير المسار من الرمز التصميمي إلى الكود المنشور." },
+      { name: "صوفيا ماركيتي", role: "مصمِّمة هوية", description: "أنشأت أول مكتبة مكوّنات وقواعدها." },
+      { name: "توماس فيدال", role: "نائب رئيس الهندسة", description: "يحافظ على سرعة المنصة وهدوء الإصدارات." },
+    ],
+  },
+}
+
+export interface TeamFounderSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<Omit<TeamFounderSpotlightCopy, "feature">> {
+  /** The founder on the feature card. `null` leaves the card off; left out, Figma's founder shows. */
+  feature?: TeamFounder | null
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+}
+
+/** A founder on the feature card, with up to three supporting people beside or under it. */
+export function TeamFounderSpotlight({ locale = "en", eyebrow, heading, feature, supporters, className, ...props }: TeamFounderSpotlightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const main = feature === undefined ? copy.feature : feature
+  const others = (supporters ?? copy.supporters).slice(0, 3)
+
+  return (
+    <TeamSection labelledBy={headingId} className={className} contentClassName="gap-16" {...props}>
+      <TeamHeader headingId={headingId} eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow} heading={heading ?? copy.heading} />
+      {main || others.length > 0 ? (
+      <div
+        className={cn(
+          "grid w-full grid-cols-1 gap-6 [@container(min-width:40rem)]:gap-8",
+          main && "[@container(min-width:64rem)]:grid-cols-[minmax(0,760fr)_minmax(0,488fr)]"
+        )}
+      >
+        {main ? (
+          <article className="flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-md [@container(min-width:40rem)]:flex-row">
+            {/* The portrait fades in while it settles from 1.04; the box clips the scale. */}
+            <Reveal
+              y={0}
+              className="relative h-[300px] w-full shrink-0 motion-safe:duration-[600ms] [@container(min-width:40rem)]:h-auto [@container(min-width:40rem)]:w-[280px] [@container(min-width:64rem)]:w-[300px]"
+            >
+              <TeamPortrait
+                person={main}
+                className="size-full min-h-[260px] [@container(min-width:40rem)]:absolute [@container(min-width:40rem)]:inset-0"
+                imageClassName="motion-safe:transition-transform motion-safe:duration-[600ms] motion-safe:ease-out motion-safe:group-data-[reveal=pending]/team:scale-[1.04]"
+              />
+            </Reveal>
+            <div className="flex min-w-0 flex-1 flex-col gap-6 p-10">
+              <Reveal index={1} className="flex flex-col gap-6">
+                <blockquote className="text-lg font-light text-foreground [@container(min-width:40rem)]:text-xl">{main.quote}</blockquote>
+                <div className="flex flex-col">
+                  <span className="text-base font-semibold text-foreground">{main.name}</span>
+                  <span className="text-sm text-muted-foreground">{main.role}</span>
+                </div>
+              </Reveal>
+            </div>
+          </article>
+        ) : null}
+
+        {others.length > 0 ? (
+          <ul className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-3 [@container(min-width:64rem)]:grid-cols-1 [@container(min-width:64rem)]:gap-5">
+            {others.map((person, index) => (
+              <Reveal
+                as="li"
+                key={index}
+                index={index + 2}
+                step={80}
+                x={0}
+                y={12}
+                // From Desktop the card slides in from the end side instead of rising.
+                className={cn(
+                  "flex items-center gap-4 rounded-lg border border-border bg-card p-6 hover:bg-muted focus-within:bg-muted",
+                  "motion-safe:transition-[opacity,transform,background-color]",
+                  // Tablet stacks the portrait over the text, in three columns; Desktop and Mobile set it beside.
+                  "[@container(min-width:40rem)]:flex-col [@container(min-width:40rem)]:items-start [@container(min-width:40rem)]:gap-3",
+                  "[@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:gap-4 [@container(min-width:64rem)]:![--reveal-x:16px] [@container(min-width:64rem)]:![--reveal-y:0px]"
+                )}
+              >
+                <TeamPortrait person={person} className="size-[76px] shrink-0 rounded-md" />
+                <div className="flex min-w-0 flex-col gap-1">
+                  <span className="text-base font-medium text-foreground">{person.name}</span>
+                  <span className="text-sm text-muted-foreground">{person.role}</span>
+                  {person.description ? <span className="text-xs text-muted-foreground">{person.description}</span> : null}
+                </div>
+              </Reveal>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+      ) : null}
+    </TeamSection>
+  )
+}
+
+/** The default copy, English and Arabic, as `locale` picks it. Spread it to change a few strings and keep the rest. */
+export const teamFounderSpotlightCopy = COPY

package/registry/blocks/team-founder-spotlight/index.ts

@@ -0,0 +1,8 @@
+export {
+  TeamFounderSpotlight,
+  teamFounderSpotlightCopy,
+  type TeamFounder,
+  type TeamFounderSpotlightCopy,
+  type TeamFounderSpotlightProps,
+  type TeamSupportingFounder,
+} from "./TeamFounderSpotlight"

package/registry/blocks/team-founder-spotlight/team-founder-spotlight.test.tsx

@@ -0,0 +1,70 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest"
+import { cleanup, render, screen } from "@testing-library/react"
+import { TeamFounderSpotlight, teamFounderSpotlightCopy } from "./TeamFounderSpotlight"
+
+beforeEach(() => {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+    onchange: null,
+    dispatchEvent: () => false,
+  })) as typeof window.matchMedia
+})
+afterEach(() => cleanup())
+
+describe("Team Founder Spotlight", () => {
+  it.each(["en", "ar"] as const)("renders one feature and three support cards under an h2 that names the section in %s", (locale) => {
+    const { container } = render(<TeamFounderSpotlight locale={locale} />)
+    const copy = teamFounderSpotlightCopy[locale]
+    expect(container.querySelectorAll("article")).toHaveLength(1)
+    expect(container.querySelectorAll("li")).toHaveLength(3)
+    const heading = screen.getByRole("heading", { level: 2 })
+    expect(heading.textContent).toBe(copy.heading)
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(heading.id)
+    expect(container.querySelector("blockquote")?.textContent).toBe(copy.feature.quote)
+    for (const person of copy.supporters) {
+      expect(screen.getByText(person.name as string)).toBeTruthy()
+      expect(screen.getByText(person.description as string)).toBeTruthy()
+    }
+  })
+
+  it("takes photos from the people, with initials when there is none, and the alt text given", () => {
+    const base = teamFounderSpotlightCopy.en
+    render(
+      <TeamFounderSpotlight
+        feature={{ ...base.feature, photo: { src: "/layla.jpg", alt: "Layla Mansour smiling" } }}
+        supporters={base.supporters.slice(0, 2)}
+      />
+    )
+    expect(screen.getByAltText("Layla Mansour smiling")).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(2)
+    expect(screen.getByText("KH")).toBeTruthy()
+  })
+
+  it("has its entrance only as motion-safe classes, so reduced motion shows it at rest", () => {
+    const { container } = render(<TeamFounderSpotlight />)
+    const classes = [...container.querySelectorAll("[class]")].map((node) => node.getAttribute("class") ?? "").join(" ")
+    const hidden = classes.match(/\S*group-data-\[reveal=pending\]\/team:\S+/g) ?? []
+    expect(hidden.length).toBeGreaterThan(0)
+    expect(hidden.every((name) => name.startsWith("motion-safe:"))).toBe(true)
+  })
+
+  it("leaves the support column off when there are no supporters", () => {
+    const { container } = render(<TeamFounderSpotlight supporters={[]} />)
+    expect(container.querySelector("ul")).toBeNull()
+  })
+
+  it("leaves the feature card off with feature={null}, and draws nothing but the heading when there are no supporters either", () => {
+    const { container, rerender } = render(<TeamFounderSpotlight feature={null} />)
+    expect(container.querySelector("article")).toBeNull()
+    expect(container.querySelectorAll("li").length).toBe(3)
+    rerender(<TeamFounderSpotlight feature={null} supporters={[]} />)
+    expect(container.querySelector("article")).toBeNull()
+    expect(container.querySelector("ul")).toBeNull()
+    expect(screen.getByRole("heading", { level: 2 })).toBeTruthy()
+  })
+})

package/registry/blocks/team-grid-backdrop-roster/TeamGridBackdropRoster.tsx

@@ -0,0 +1,234 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { REVEAL, Reveal, TeamHeader, TeamLinkArrow, TeamSection, initialsOf, type TeamPerson } from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Grid Backdrop Roster.
+ *
+ * Grid paper behind a centred header: hairlines in the `border` token every
+ * 41px, fading out under the headline so the tiles sit on a clean page (an
+ * overlay of `background`, so Dark mode works). The headline is 5XL on Desktop,
+ * 4XL on Tablet, 3XL on phones, with two buttons under it: Outline "Read our
+ * story" and Solid "See open roles", side by side from Tablet, stacked and
+ * full width on phones.
+ *
+ * Eight tiles follow, four to a row on Desktop, three on Tablet (3, 3, 2), two
+ * on phones. Each is a `soft-info` tile with a transparent cut-out photo
+ * standing on its bottom edge, then the name with a link arrow and the role.
+ * A person with an `href` is a link and the whole tile is its focus target;
+ * without one it is a plain `div`. Hover and focus lay a second `soft-info`
+ * layer over the tile (soft tokens have one step, so two layers make the
+ * next) and nudge the arrow 2px up and toward the end.
+ *
+ * Motion: the backdrop fades in, the headline and buttons rise, then the tiles
+ * reveal row by row with each cut-out rising 8px. Once, never scroll-linked.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet and
+ * `[@container(min-width:64rem)]:` its Desktop, by the block's own width.
+ */
+
+/** A person in the roster. */
+export interface TeamRosterPerson extends TeamPerson {
+  /** Makes the whole tile a link to their profile. Without it the tile is not interactive. */
+  href?: string
+}
+
+/** One of the two buttons under the headline. */
+export interface TeamRosterAction {
+  label: React.ReactNode
+  /** Renders the button as a link. */
+  href?: string
+}
+
+export interface TeamGridBackdropRosterCopy {
+  /** The headline, an `h2`. */
+  heading: React.ReactNode
+  /** The Outline button. Hidden when absent. */
+  secondaryAction: TeamRosterAction | null
+  /** The Solid button. Hidden when absent. */
+  primaryAction: TeamRosterAction | null
+  /** The people, in reading order. Figma has eight. */
+  people: TeamRosterPerson[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", TeamGridBackdropRosterCopy> = {
+  en: {
+    heading: "We are the people who make up Fasla",
+    secondaryAction: { label: "Read our story" },
+    primaryAction: { label: "See open roles" },
+    people: [
+      { name: "Clara Weiss", role: "Accessibility Lead" },
+      { name: "Karim Haddad", role: "Co-founder & CTO" },
+      { name: "Hana Kobayashi", role: "Motion Designer" },
+      { name: "Tomas Vidal", role: "VP of Engineering" },
+      { name: "Yara Khalil", role: "Product Manager" },
+      { name: "Marcus Boateng", role: "Head of Marketing" },
+      { name: "Mei Tanaka", role: "Customer Success Lead" },
+      { name: "Lukas Berg", role: "Design Systems Lead" },
+    ],
+  },
+  ar: {
+    heading: "الفريق الذي يصنع فاصلة",
+    secondaryAction: { label: "اقرأ قصتنا" },
+    primaryAction: { label: "تصفَّح الوظائف" },
+    people: [
+      { name: "كلارا فايس", role: "قائدة إمكانية الوصول" },
+      { name: "كريم حداد", role: "شريك مؤسِّس ورئيس التقنية" },
+      { name: "هانا كوباياشي", role: "مصمِّمة حركة" },
+      { name: "توماس فيدال", role: "نائب رئيس الهندسة" },
+      { name: "يارا خليل", role: "مديرة المنتج" },
+      { name: "ماركوس بواتينغ", role: "رئيس التسويق" },
+      { name: "ماي تاناكا", role: "قائدة نجاح العملاء" },
+      { name: "لوكاس بيرغ", role: "قائد أنظمة التصميم" },
+    ],
+  },
+}
+
+export const teamGridBackdropRosterCopy = COPY
+
+function ActionButton({ action, variant }: { action: TeamRosterAction; variant: "outline" | "default" }) {
+  const width = "w-full [@container(min-width:40rem)]:w-auto"
+  if (action.href) {
+    return (
+      <a href={action.href} className={buttonVariants({ variant, className: width })}>
+        {action.label}
+      </a>
+    )
+  }
+  return (
+    <Button type="button" variant={variant} className={width}>
+      {action.label}
+    </Button>
+  )
+}
+
+export interface TeamGridBackdropRosterProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<TeamGridBackdropRosterCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+}
+
+export function TeamGridBackdropRoster({
+  locale = "en",
+  heading,
+  secondaryAction,
+  primaryAction,
+  people,
+  className,
+  ...props
+}: TeamGridBackdropRosterProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = people ?? copy.people
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const primary = primaryAction === undefined ? copy.primaryAction : primaryAction
+
+  return (
+    <TeamSection labelledBy={headingId} className={cn("relative overflow-hidden", className)} contentClassName="items-center gap-16" {...props}>
+      {/* Grid paper: 1px lines every 41px (Figma's 40px gap), fading out under the headline. */}
+      <div
+        aria-hidden
+        data-slot="grid-backdrop"
+        className={cn(
+          "pointer-events-none absolute inset-x-0 top-0 h-[412px] [@container(min-width:40rem)]:h-[404px] [@container(min-width:64rem)]:h-[493px]",
+          "motion-safe:transition-opacity motion-safe:duration-200 motion-safe:ease-out motion-safe:group-data-[reveal=pending]/team:opacity-0"
+        )}
+      >
+        <div className="absolute inset-0 [background-image:linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] [background-size:41px_41px]" />
+        <div className="absolute inset-x-0 bottom-0 top-[22%] bg-gradient-to-b from-transparent via-background via-60% to-background" />
+      </div>
+
+      <TeamHeader
+        centered
+        headingId={headingId}
+        heading={heading ?? copy.heading}
+        className="relative gap-8"
+        headingClassName={cn(
+          "text-balance [@container(min-width:64rem)]:text-5xl",
+          "mx-auto max-w-full [@container(min-width:40rem)]:max-w-[25rem]",
+          locale === "ar" ? "[@container(min-width:64rem)]:max-w-[40rem]" : "[@container(min-width:64rem)]:max-w-[30rem]"
+        )}
+      >
+        {secondary || primary ? (
+          <Reveal index={3} y={8} className="flex w-full flex-col gap-3 [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:flex-row">
+            {secondary ? <ActionButton action={secondary} variant="outline" /> : null}
+            {primary ? <ActionButton action={primary} variant="default" /> : null}
+          </Reveal>
+        ) : null}
+      </TeamHeader>
+
+      {list.length > 0 ? (
+        <ul className="relative grid w-full grid-cols-2 gap-x-3 gap-y-6 [@container(min-width:40rem)]:grid-cols-3 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:40rem)]:gap-y-8 [@container(min-width:64rem)]:grid-cols-4 [@container(min-width:64rem)]:gap-x-6 [@container(min-width:64rem)]:gap-y-10">
+          {list.map((person, index) => {
+            const Tag: React.ElementType = person.href ? "a" : "div"
+            return (
+              <li
+                key={index}
+                className={cn(
+                  REVEAL,
+                  // Row by row: the row index, for whichever column count is showing.
+                  "[--reveal-i:var(--team-row-2)] [@container(min-width:40rem)]:[--reveal-i:var(--team-row-3)] [@container(min-width:64rem)]:[--reveal-i:var(--team-row-4)]"
+                )}
+                style={
+                  {
+                    "--reveal-y": "0px",
+                    "--reveal-step": "50ms",
+                    "--team-row-2": Math.floor(index / 2),
+                    "--team-row-3": Math.floor(index / 3),
+                    "--team-row-4": Math.floor(index / 4),
+                  } as React.CSSProperties
+                }
+              >
+                <Tag
+                  {...(person.href ? { href: person.href } : {})}
+                  className="group/tile flex flex-col gap-4 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                >
+                  <div className="relative aspect-[302/320] w-full overflow-hidden bg-soft-info">
+                    {/* The second soft-info layer: hover, focus and tap fade it in. */}
+                    <span
+                      aria-hidden
+                      className="absolute inset-0 bg-soft-info opacity-0 motion-safe:transition-opacity motion-safe:duration-200 group-hover/tile:opacity-100 group-focus-visible/tile:opacity-100 motion-reduce:transition-none"
+                    />
+                    {person.photo ? (
+                      // eslint-disable-next-line @next/next/no-img-element -- a registry block can't assume next/image
+                      <img
+                        src={person.photo.src}
+                        alt={person.photo.alt}
+                        loading="lazy"
+                        decoding="async"
+                        draggable={false}
+                        className={cn("absolute inset-0 size-full object-cover object-bottom", REVEAL)}
+                        style={{ "--reveal-y": "8px" } as React.CSSProperties}
+                      />
+                    ) : (
+                      <span aria-hidden className="absolute inset-0 flex items-center justify-center text-lg font-medium text-muted-foreground">
+                        {initialsOf(person.name)}
+                      </span>
+                    )}
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <span className="flex items-center gap-2">
+                      <span className="min-w-0 flex-1 text-base font-medium text-foreground">{person.name}</span>
+                      <TeamLinkArrow
+                        className={cn(
+                          "text-foreground motion-safe:transition-transform motion-safe:duration-200 motion-reduce:transition-none",
+                          "group-hover/tile:-translate-y-0.5 group-hover/tile:translate-x-0.5 rtl:group-hover/tile:-translate-x-0.5",
+                          "group-focus-visible/tile:-translate-y-0.5 group-focus-visible/tile:translate-x-0.5 rtl:group-focus-visible/tile:-translate-x-0.5"
+                        )}
+                      />
+                    </span>
+                    <span className="text-sm text-muted-foreground">{person.role}</span>
+                  </div>
+                </Tag>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </TeamSection>
+  )
+}

package/registry/blocks/team-grid-backdrop-roster/grid-backdrop-roster.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { TeamGridBackdropRoster } from "./TeamGridBackdropRoster"
+
+describe("Team Grid Backdrop Roster", () => {
+  it("renders Figma's English copy: an h2 naming the section, two buttons and eight tiles", () => {
+    render(<TeamGridBackdropRoster />)
+    expect(screen.getByRole("heading", { level: 2, name: "We are the people who make up Fasla" })).toBeTruthy()
+    expect(screen.getByRole("region", { name: "We are the people who make up Fasla" })).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(8)
+    expect(screen.getByRole("button", { name: "Read our story" })).toBeTruthy()
+    expect(screen.getByRole("button", { name: "See open roles" })).toBeTruthy()
+  })
+
+  it("puts the two buttons in Figma's order: Outline first, Solid second", () => {
+    render(<TeamGridBackdropRoster />)
+    const buttons = screen.getAllByRole("button")
+    expect(buttons.map((b) => b.textContent)).toEqual(["Read our story", "See open roles"])
+    expect(buttons[0]!.getAttribute("data-variant")).toBe("outline")
+    expect(buttons[1]!.getAttribute("data-variant")).toBe("default")
+  })
+
+  it("renders the Arabic copy", () => {
+    render(<TeamGridBackdropRoster locale="ar" />)
+    expect(screen.getByRole("heading", { level: 2, name: "الفريق الذي يصنع فاصلة" })).toBeTruthy()
+    expect(screen.getAllByRole("listitem")).toHaveLength(8)
+    expect(screen.getByRole("button", { name: "اقرأ قصتنا" })).toBeTruthy()
+    expect(screen.getByText("شريك مؤسِّس ورئيس التقنية")).toBeTruthy()
+  })
+
+  it("renders a link only for a person with an href, and a plain div otherwise", () => {
+    render(
+      <TeamGridBackdropRoster
+        people={[
+          { name: "Clara Weiss", role: "Lead", href: "/people/clara" },
+          { name: "Karim Haddad", role: "CTO" },
+        ]}
+      />
+    )
+    const link = screen.getByRole("link", { name: /Clara Weiss/ })
+    expect(link.getAttribute("href")).toBe("/people/clara")
+    expect(screen.getAllByRole("link")).toHaveLength(1)
+    expect(screen.getByText("Karim Haddad").closest("a")).toBeNull()
+  })
+
+  it("stands the cut-out on the tile's bottom edge and lays the second tint layer over the tile", () => {
+    const { container } = render(<TeamGridBackdropRoster people={[{ name: "A B", role: "x", photo: { src: "/a.webp", alt: "A" } }]} />)
+    expect(screen.getByAltText("A").className).toContain("object-bottom")
+    expect(container.querySelector(".bg-soft-info")).toBeTruthy()
+    expect(container.querySelectorAll(".bg-soft-info").length).toBe(2)
+  })
+
+  it("fades the grid backdrop out with a background overlay", () => {
+    const { container } = render(<TeamGridBackdropRoster />)
+    const backdrop = container.querySelector('[data-slot="grid-backdrop"]')!
+    expect(backdrop.innerHTML).toContain("to-background")
+    expect(backdrop.getAttribute("aria-hidden")).toBe("true")
+  })
+
+  it("renders no list for an empty roster", () => {
+    render(<TeamGridBackdropRoster people={[]} />)
+    expect(screen.queryByRole("list")).toBeNull()
+  })
+
+  it("centres its capped heading in its box, so it sits on the buttons' axis in both directions", () => {
+    for (const locale of ["en", "ar"] as const) {
+      const { container, unmount } = render(<TeamGridBackdropRoster locale={locale} />)
+      expect(container.querySelector("h2")?.className).toContain("mx-auto")
+      unmount()
+    }
+  })
+})

package/registry/blocks/team-grid-backdrop-roster/index.ts

@@ -0,0 +1,8 @@
+export {
+  TeamGridBackdropRoster,
+  teamGridBackdropRosterCopy,
+  type TeamGridBackdropRosterCopy,
+  type TeamGridBackdropRosterProps,
+  type TeamRosterAction,
+  type TeamRosterPerson,
+} from "./TeamGridBackdropRoster"