@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/team/team.tsx

@@ -0,0 +1,315 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Team` (46368:243916). The parts every `team-*` block is built from:
+ * the section and its 1280px column, the header, a portrait that stands in
+ * for a photo when none is passed, a hairline, the link arrow, and the one-time
+ * entrance reveal each block's motion card describes.
+ *
+ * Mobile first, and sized by the block's own width, not the window's, as the
+ * Pricing 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 page's `dir` sets the direction; nothing here takes one.
+ *
+ * No block ships with photos. Each person takes a `photo` ({ src, alt }); the
+ * docs site and the Storybook stories pass the ones in public/blocks/team/.
+ */
+
+export type TeamLocale = "en" | "ar"
+
+/** A photo passed in as a prop: the file, and the alt text in the page's language. */
+export interface TeamPhoto {
+  src: string
+  alt: string
+  /**
+   * Where the photo is anchored when its box crops it, as CSS `object-position`
+   * ("50% 20%"). Without one, a portrait is anchored 50% across and 20% down, so
+   * the head and its headroom stay in a box that is wider than the photo. Set it
+   * for a face that sits lower or higher than that.
+   */
+  position?: string
+}
+
+/** The default focal point of a portrait: centred across, 20% down. */
+export const TEAM_FOCUS = "50% 20%"
+
+/** The two lines every Type gives a person. */
+export interface TeamPerson {
+  name: React.ReactNode
+  role: React.ReactNode
+  /** Hidden when empty: a neutral tile with the initials stands in. */
+  photo?: TeamPhoto
+}
+
+const ARABIC = /[؀-ۿ]/
+
+/**
+ * Text with every run of digits in it set in its own left-to-right isolate, so
+ * a count inside an Arabic sentence keeps its order, as Figma's LRM marks do.
+ * Anything but a string passes through untouched.
+ */
+export function TeamFigures({ children }: { children: React.ReactNode }) {
+  if (typeof children !== "string") return <>{children}</>
+  const parts = children.split(/(\d[\d,.]*)/)
+  if (parts.length === 1) return <>{children}</>
+  return (
+    <>
+      {parts.map((part, index) =>
+        index % 2 === 1 ? (
+          <bdi key={index} dir="ltr">
+            {part}
+          </bdi>
+        ) : (
+          <React.Fragment key={index}>{part}</React.Fragment>
+        )
+      )}
+    </>
+  )
+}
+
+/** Up to two initials from a name, for the tile that stands in for a photo. */
+export function initialsOf(name: React.ReactNode) {
+  if (typeof name !== "string") return ""
+  const words = name.trim().split(/\s+/)
+  if (ARABIC.test(name)) return words[0]?.[0] ?? ""
+  return words
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+}
+
+/* ------------------------------------------------------------------ */
+/* The one-time entrance reveal                                        */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Starts a block's entrance once, when it first scrolls into view, and never
+ * again. Nothing is tied to the scroll position: the section only flips from
+ * `pending` to `done`, and the CSS transitions on the parts do the rest.
+ *
+ * With reduced motion the state is never set, so everything is simply there.
+ * Without JavaScript, or before the hook runs, nothing is hidden either.
+ */
+export function useRevealOnce<T extends HTMLElement>() {
+  const ref = React.useRef<T>(null)
+  const [state, setState] = React.useState<"idle" | "pending" | "done">("idle")
+
+  React.useLayoutEffect(() => {
+    const node = ref.current
+    if (!node || typeof window === "undefined") return
+    if (typeof window.matchMedia !== "function" || typeof IntersectionObserver === "undefined") return
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return
+    setState("pending")
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setState("done")
+          observer.disconnect()
+        }
+      },
+      { threshold: 0.12 }
+    )
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [])
+
+  return [ref, state] as const
+}
+
+/**
+ * Classes that give a part its entrance: it sits `--reveal-y` / `--reveal-x`
+ * away and transparent while the section is `pending`, then eases into place.
+ * They are all `motion-safe:`, so reduced motion never sees the hidden state.
+ */
+export const REVEAL =
+  "motion-safe:transition-[opacity,transform] motion-safe:duration-500 motion-safe:ease-out motion-safe:[transition-delay:calc(var(--reveal-i,0)*var(--reveal-step,60ms))] rtl:[--reveal-dir:-1] " +
+  "motion-safe:group-data-[reveal=pending]/team:opacity-0 motion-safe:group-data-[reveal=pending]/team:[transform:translate(calc(var(--reveal-x,0px)*var(--reveal-dir,1)),var(--reveal-y,12px))]"
+
+export interface RevealProps extends React.HTMLAttributes<HTMLElement> {
+  /** Its place in the sequence, for the stagger. */
+  index?: number
+  /** Pixels it rises from. Default 12. */
+  y?: number
+  /** Pixels it slides in from, away from the start of the line (flipped for right-to-left). Default 0. */
+  x?: number
+  /** The gap between two parts of the sequence, in ms. Default 60. */
+  step?: number
+  as?: "div" | "li" | "article" | "header" | "span"
+}
+
+/** A part of a block with the entrance above. `x` follows the page's direction. */
+export function Reveal({ index = 0, y = 12, x = 0, step = 60, as: Tag = "div", className, style, ...props }: RevealProps) {
+  return (
+    <Tag
+      className={cn(REVEAL, className)}
+      style={{ "--reveal-i": index, "--reveal-y": `${y}px`, "--reveal-x": `${x}px`, "--reveal-step": `${step}ms`, ...style } as React.CSSProperties}
+      {...props}
+    />
+  )
+}
+
+/* ------------------------------------------------------------------ */
+/* Section, header, portrait                                           */
+/* ------------------------------------------------------------------ */
+
+export interface TeamSectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** The id of the heading that names the section. */
+  labelledBy?: string
+  /** Paints the section with the inverse tokens, as Hairline Team Grid is. */
+  inverse?: boolean
+  /** Classes for the 1280px column inside the padding. */
+  contentClassName?: string
+}
+
+/**
+ * Figma's section: `background`, padding 96 × 80 on Desktop, 64 × 24 on Tablet
+ * and 32 × 16 on phones, and a 1280px column with 48px between the header and
+ * what follows. It also runs the block's one-time entrance.
+ */
+export function TeamSection({ labelledBy, inverse, className, contentClassName, children, ...props }: TeamSectionProps) {
+  const [ref, reveal] = useRevealOnce<HTMLElement>()
+  return (
+    <section
+      ref={ref}
+      aria-labelledby={labelledBy}
+      data-reveal={reveal}
+      className={cn(
+        "group/team [container-type:inline-size] px-4 py-8 md:px-6 md:py-16 lg:px-20 lg:py-24",
+        inverse ? "bg-background-inverse text-foreground-inverse" : "bg-background text-foreground",
+        className
+      )}
+      {...props}
+    >
+      <div className={cn("mx-auto flex w-full max-w-[1280px] flex-col gap-12", contentClassName)}>{children}</div>
+    </section>
+  )
+}
+
+export interface TeamHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+  /** The id the section's `aria-labelledby` points at. */
+  headingId: string
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow?: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The paragraph under the heading. Hidden when empty. */
+  description?: React.ReactNode
+  /** Centres the header; by default it starts at the start edge. */
+  centered?: boolean
+  /** The inverse tokens, for a block painted with them. */
+  inverse?: boolean
+  /** Classes for the heading, to set its size and weight. */
+  headingClassName?: string
+}
+
+/**
+ * The header: an eyebrow in `muted-foreground`, the heading (3XL on phones, 4XL
+ * from Tablet up) and the description, 12px apart. Anything passed as children,
+ * such as the two buttons of the Roster, follows them.
+ */
+export function TeamHeader({
+  headingId,
+  eyebrow,
+  heading,
+  description,
+  centered,
+  inverse,
+  className,
+  headingClassName,
+  children,
+  ...props
+}: TeamHeaderProps) {
+  const muted = inverse ? "text-muted-foreground-inverse" : "text-muted-foreground"
+  return (
+    <header className={cn("flex w-full flex-col gap-3", centered ? "items-center text-center" : "items-start text-start", className)} {...props}>
+      {eyebrow ? (
+        <Reveal index={0} className={cn("text-sm font-medium", muted)}>
+          {eyebrow}
+        </Reveal>
+      ) : null}
+      <Reveal index={1} as="div" className="w-full">
+        <h2
+          id={headingId}
+          className={cn(
+            "text-3xl font-semibold [@container(min-width:40rem)]:text-4xl",
+            inverse ? "text-foreground-inverse" : "text-foreground",
+            headingClassName
+          )}
+        >
+          <TeamFigures>{heading}</TeamFigures>
+        </h2>
+      </Reveal>
+      {description ? (
+        <Reveal index={2} className={cn("text-base [@container(min-width:40rem)]:text-lg", muted, "max-w-[45rem]")}>
+          <p>
+            <TeamFigures>{description}</TeamFigures>
+          </p>
+        </Reveal>
+      ) : null}
+      {children}
+    </header>
+  )
+}
+
+export interface TeamPortraitProps extends React.HTMLAttributes<HTMLDivElement> {
+  person: Pick<TeamPerson, "name" | "photo">
+  /** Classes for the image, such as `object-top`. */
+  imageClassName?: string
+}
+
+/**
+ * A person's photo filling its box, `object-cover`, or, with no photo, a tile in
+ * `muted` with their initials. The box takes its size from the classes passed.
+ */
+export function TeamPortrait({ person, className, imageClassName, ...props }: TeamPortraitProps) {
+  return (
+    <div className={cn("relative overflow-hidden bg-muted", className)} {...props}>
+      {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}
+          style={{ objectPosition: person.photo.position ?? TEAM_FOCUS }}
+          className={cn("size-full object-cover", imageClassName)}
+        />
+      ) : (
+        <span aria-hidden className="absolute inset-0 flex items-center justify-center text-lg font-medium text-muted-foreground">
+          {initialsOf(person.name)}
+        </span>
+      )}
+    </div>
+  )
+}
+
+/**
+ * For an Avatar that shows a person's photo: the classes and style that anchor
+ * its image at the photo's focal point, since the Avatar crops to its centre.
+ * Spread both onto the Avatar.
+ */
+export function teamAvatarFocus(photo?: TeamPhoto) {
+  return {
+    className: "[&_img]:[object-position:var(--team-focus)]",
+    style: { "--team-focus": photo?.position ?? TEAM_FOCUS } as React.CSSProperties,
+  }
+}
+
+/** A hairline between two groups. Not the Separator component, which Fasla has not built yet. */
+export function TeamRule({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div role="presentation" aria-hidden className={cn("h-px w-full bg-border", className)} {...props} />
+}
+
+/** The up-right arrow that marks a link, mirrored for right-to-left pages. */
+export function TeamLinkArrow({ className, ...props }: React.ComponentProps<typeof ArrowUpRight>) {
+  return <ArrowUpRight aria-hidden className={cn("size-4 shrink-0 rtl:-scale-x-100", className)} {...props} />
+}

package/registry/blocks/team-annotated-portrait-lineup/TeamAnnotatedPortraitLineup.tsx

@@ -0,0 +1,310 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Reveal,
+  TeamHeader,
+  TeamSection,
+  initialsOf,
+  type TeamLocale,
+  type TeamPerson,
+  type TeamPhoto,
+} from "../team/team"
+
+/*
+ * Figma: `Team` (46368:243916), Type=Annotated Portrait Lineup.
+ *
+ * A cut-out Type: a centred header, then exactly five people standing on ONE
+ * shared bottom line. There are no frames and no backgrounds; each photo is a
+ * transparent cut-out. The name and role sit above the head, and a hand-drawn
+ * dashed arrow runs from the text to the head. People differ in height, so the
+ * columns are bottom-aligned (`items-end`) and the arrows land at different
+ * heights.
+ *
+ * Desktop is Figma's row: five columns 224, 262, 168, 284 and 246px wide with
+ * 24px between (1280). Tablet and Mobile are a swipe rail (`overflow-x-auto`,
+ * `snap-x`, no scrollbar, no autoplay): each person is 78% (Tablet) and 60%
+ * (Mobile) of the Desktop size, so about three and two people show and the
+ * next peeks in. In right-to-left pages the rail starts at the end side.
+ * Photos are never mirrored.
+ *
+ * The arrow is drawn in the 42 x 84 box Figma gives it. Odd people (A) curl
+ * with the tip towards the end, even ones (B) are the mirror image; in RTL the
+ * SVG is flipped by CSS and re-placed so its tip still lands on the head.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360),
+ * `[@container(min-width:40rem)]:` its Tablet, and Desktop's full-size row
+ * from a 80rem section (1280px of content, which the five columns need).
+ */
+
+/** The width and height of the cut-out at Desktop size, and where the head is, per person, from Figma. */
+const LAYOUT = [
+  { width: 224, height: 309, aim: 0.45 },
+  { width: 262, height: 381, aim: 0.412 },
+  { width: 168, height: 313, aim: 0.494 },
+  { width: 284, height: 360, aim: 0.564 },
+  { width: 246, height: 376, aim: 0.48 },
+] as const
+
+/** The arrow's box, in px, as Figma draws it. */
+const ARROW_W = 42.47
+const ARROW_H = 84
+
+/** Figma's two curves. A starts top-start and ends bottom-end; B is its mirror. */
+const CURVE = {
+  a: { d: "M 6.47 0 C -11.53 44 10.47 80 42.47 84", tip: [42.47, 84], from: [10.47, 80] },
+  b: { d: "M 36 0 C 54 44 32 80 0 84", tip: [0, 84], from: [32, 80] },
+} as const
+
+/** The open arrowhead (Figma's arrow-lines end cap): two 8px strokes laid back 28 degrees from the tip's direction. */
+function headPath(curl: "a" | "b") {
+  const { tip, from } = CURVE[curl]
+  const dx = tip[0] - from[0]
+  const dy = tip[1] - from[1]
+  const len = Math.hypot(dx, dy)
+  const ux = -dx / len
+  const uy = -dy / len
+  const wing = (angle: number) => {
+    const cos = Math.cos(angle)
+    const sin = Math.sin(angle)
+    const x = tip[0] + 8 * (ux * cos - uy * sin)
+    const y = tip[1] + 8 * (ux * sin + uy * cos)
+    return `M ${x.toFixed(2)} ${y.toFixed(2)} L ${tip[0]} ${tip[1]}`
+  }
+  return `${wing(0.49)} ${wing(-0.49)}`
+}
+
+export interface TeamLineupPhoto extends TeamPhoto {
+  /** The cut-out's own pixel width. With `height`, the column takes its width from the image's aspect. */
+  width?: number
+  /** The cut-out's own pixel height. */
+  height?: number
+}
+
+export interface TeamLineupPerson extends Omit<TeamPerson, "photo"> {
+  /** A transparent cut-out. With none, a tile with the initials stands in. */
+  photo?: TeamLineupPhoto
+  /**
+   * Where the head is, from 0 to 1, as a fraction of the photo's width from its
+   * start edge. The arrow's tip is placed over it. Defaults to Figma's value
+   * for that place in the row.
+   */
+  aim?: number
+}
+
+export interface TeamAnnotatedPortraitLineupCopy {
+  /** The small label above the heading. Hidden when empty. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The paragraph under the heading. Hidden when empty. */
+  description: React.ReactNode
+  /** The five people, in reading order. */
+  people: TeamLineupPerson[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<TeamLocale, TeamAnnotatedPortraitLineupCopy> = {
+  en: {
+    eyebrow: "THE TEAM",
+    heading: "The people behind Fasla",
+    description: "A small, senior team designs, builds and supports every part of the product. These are the people you will hear from first.",
+    people: [
+      { name: "Omar Nasser", role: "Head of Product" },
+      { name: "Rami Aziz", role: "Solutions Architect" },
+      { name: "Sofia Marchetti", role: "Brand Designer" },
+      { name: "Mei Tanaka", role: "Customer Success Lead" },
+      { name: "Chloe Dubois", role: "Content Designer" },
+    ],
+  },
+  ar: {
+    eyebrow: "الفريق",
+    heading: "الفريق الذي يقف وراء فاصلة",
+    description: "فريق صغير من ذوي الخبرة يصمّم كل جزء من المنتج ويبنيه ويدعمه. وهؤلاء أول من يتواصل معك.",
+    people: [
+      { name: "عمر ناصر", role: "رئيس المنتج" },
+      { name: "رامي عزيز", role: "مهندس حلول" },
+      { name: "صوفيا ماركيتي", role: "مصمِّمة هوية" },
+      { name: "ماي تاناكا", role: "قائدة نجاح العملاء" },
+      { name: "كلوي دوبوا", role: "مصمِّمة محتوى" },
+    ],
+  },
+}
+
+export interface TeamAnnotatedPortraitLineupProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<TeamAnnotatedPortraitLineupCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: TeamLocale
+}
+
+/**
+ * Where the arrow's box starts, from the start edge of the column, as a CSS
+ * length. `aim` is the head's centre as a fraction of the column's width from
+ * the photo's left edge; the photo is never mirrored, so the head does not move
+ * between LTR and RTL. W is the column's width, X the offset below.
+ *
+ * LTR, `inset-inline-start` is the left edge. A has its tip on the box's right
+ * edge, so X = aim*W - 42.47; B has its tip on the box's left edge, X = aim*W.
+ * RTL, `inset-inline-start` is the right edge and the SVG is flipped by CSS, so
+ * the tips swap sides. A's tip is now on the box's left edge, which sits at
+ * W - X - 42.47; setting that to aim*W gives X = (1 - aim)*W - 42.47. B's tip is
+ * now on the box's right edge, W - X = aim*W, so X = (1 - aim)*W.
+ */
+function arrowOffsets(curl: "a" | "b", aim: number) {
+  const inset = curl === "a" ? ` - ${ARROW_W}px` : ""
+  return {
+    ltr: `calc(${aim} * 100%${inset})`,
+    rtl: `calc(${(1 - aim).toFixed(4)} * 100%${inset})`,
+  }
+}
+
+function DashedArrow({ curl, aim, order }: { curl: "a" | "b"; aim: number; order: number }) {
+  const maskId = `arrow-${React.useId().replace(/:/g, "")}`
+  const offsets = arrowOffsets(curl, aim)
+  const draw =
+    "[stroke-dashoffset:0] motion-safe:transition-[stroke-dashoffset] motion-safe:duration-[400ms] motion-safe:ease-out motion-safe:group-data-[reveal=pending]/team:[stroke-dashoffset:1]"
+  const delay = { transitionDelay: `${300 + order * 60}ms` }
+  return (
+    <svg
+      aria-hidden
+      focusable="false"
+      width={ARROW_W}
+      height={ARROW_H}
+      viewBox={`0 0 ${ARROW_W} ${ARROW_H}`}
+      fill="none"
+      data-curl={curl}
+      data-aim={aim}
+      className="absolute top-0 overflow-visible [--team-x:var(--team-x-ltr)] [inset-inline-start:var(--team-x)] rtl:[--team-x:var(--team-x-rtl)] rtl:-scale-x-100"
+      style={{ "--team-x-ltr": offsets.ltr, "--team-x-rtl": offsets.rtl } as React.CSSProperties}
+    >
+      <defs>
+        {/* A solid stroke whose dash offset runs 1 to 0 reveals the dashed line beneath it. */}
+        <mask id={maskId} maskUnits="userSpaceOnUse" x={-30} y={-10} width={110} height={110}>
+          <path d={CURVE[curl].d} stroke="white" strokeWidth={6} pathLength={1} strokeDasharray="1 1" className={draw} style={delay} />
+        </mask>
+      </defs>
+      <path
+        d={CURVE[curl].d}
+        mask={`url(#${maskId})`}
+        className="stroke-muted-foreground"
+        strokeWidth={1.5}
+        strokeDasharray="5 5"
+        strokeLinecap="butt"
+      />
+      <path
+        d={headPath(curl)}
+        className="stroke-muted-foreground motion-safe:transition-opacity motion-safe:duration-150 motion-safe:group-data-[reveal=pending]/team:opacity-0"
+        style={{ transitionDelay: `${650 + order * 60}ms` }}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+/**
+ * Five cut-out people on one bottom line, each with a name, a role and a
+ * dashed arrow to the head. A swipe rail below 80rem of width.
+ */
+export function TeamAnnotatedPortraitLineup({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  people,
+  className,
+  ...props
+}: TeamAnnotatedPortraitLineupProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = (people ?? copy.people).slice(0, 5)
+
+  return (
+    <TeamSection labelledBy={headingId} className={className} contentClassName="gap-16" {...props}>
+      <TeamHeader
+        centered
+        headingId={headingId}
+        eyebrow={eyebrow === undefined ? copy.eyebrow : eyebrow}
+        heading={heading ?? copy.heading}
+        description={description === undefined ? copy.description : description}
+      />
+      {list.length > 0 ? (
+        <div
+          // A scroller a keyboard cannot reach fails WCAG 2.1.1, so it is a tab stop with a ring.
+          tabIndex={0}
+          role="region"
+          aria-labelledby={headingId}
+          className={cn(
+            "snap-x overflow-x-auto pt-2 [outline:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+            "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+            "[--team-s:0.6] [@container(min-width:40rem)]:[--team-s:0.78] [@container(min-width:80rem)]:[--team-s:1]"
+          )}
+        >
+          <ul
+            className={cn(
+              "mx-auto flex w-max items-end gap-3 [@container(min-width:40rem)]:gap-4 [@container(min-width:80rem)]:gap-6"
+            )}
+          >
+            {list.map((person, index) => {
+              const base = LAYOUT[index % LAYOUT.length]!
+              const photo = person.photo
+              // With the photo's own size, the column keeps Figma's height and takes its width from the aspect.
+              const width = photo?.width && photo?.height ? Math.round((base.height * photo.width) / photo.height) : base.width
+              const curl = index % 2 === 0 ? "a" : "b"
+              return (
+                <Reveal
+                  as="li"
+                  key={index}
+                  index={index + 3}
+                  y={16}
+                  className="shrink-0 snap-start"
+                  style={{ width: `calc(${width}px * var(--team-s))` }}
+                >
+                  <div
+                    className={cn(
+                      "flex flex-col gap-3 motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out",
+                      "hover:motion-safe:-translate-y-1 focus-within:motion-safe:-translate-y-1"
+                    )}
+                  >
+                    <div className={cn("flex flex-col gap-1", curl === "a" ? "text-start" : "text-end")}>
+                      <p className="text-lg font-medium text-foreground">{person.name}</p>
+                      <p className="text-sm text-muted-foreground">{person.role}</p>
+                    </div>
+                    <div aria-hidden className="relative h-[84px] w-full">
+                      <DashedArrow curl={curl} aim={person.aim ?? base.aim} order={index} />
+                    </div>
+                    <div className="w-full" style={{ aspectRatio: `${width} / ${base.height}` }}>
+                      {photo ? (
+                        // eslint-disable-next-line @next/next/no-img-element -- a registry block can't assume next/image
+                        <img
+                          src={photo.src}
+                          alt={photo.alt}
+                          width={photo.width}
+                          height={photo.height}
+                          loading="lazy"
+                          decoding="async"
+                          draggable={false}
+                          className="block size-full object-contain object-bottom"
+                        />
+                      ) : (
+                        <span aria-hidden className="flex size-full items-center justify-center bg-muted text-lg font-medium text-muted-foreground">
+                          {initialsOf(person.name)}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </Reveal>
+              )
+            })}
+          </ul>
+        </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 teamAnnotatedPortraitLineupCopy = COPY

package/registry/blocks/team-annotated-portrait-lineup/index.ts

@@ -0,0 +1,8 @@
+export {
+  TeamAnnotatedPortraitLineup,
+  teamAnnotatedPortraitLineupCopy,
+  type TeamAnnotatedPortraitLineupCopy,
+  type TeamAnnotatedPortraitLineupProps,
+  type TeamLineupPerson,
+  type TeamLineupPhoto,
+} from "./TeamAnnotatedPortraitLineup"