@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/features-icons-numbers.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { FeaturesIconCardGrid, featuresIconCardGridCopy } from "./features-icon-card-grid"
+import { FeaturesCompactIconIndex, featuresCompactIconIndexCopy } from "./features-compact-icon-index"
+import { FeaturesNumberedFeatureRows, featuresNumberedFeatureRowsCopy } from "./features-numbered-feature-rows"
+import { FeaturesFeatureChecklistColumns, featuresFeatureChecklistColumnsCopy } from "./features-feature-checklist-columns"
+import { FeaturesColourBlockCards, featuresColourBlockCardsCopy } from "./features-colour-block-cards"
+import { FeaturesStatFeatureBand, featuresStatFeatureBandCopy } from "./features-stat-feature-band"
+
+// What these tests can and cannot prove: jsdom has no layout, so the Figma
+// sizes and the container-query layouts were measured in a browser. These
+// assert the contract around them: one h2 naming the section, the items in
+// Figma's order and count in both languages, the empty state, and the Arabic
+// rules (no dash or middle dot, nothing left in English).
+
+type Block = React.ComponentType<{ locale?: "en" | "ar" } & Record<string, unknown>>
+const TYPES: { name: string; Block: Block; copy: { en: object; ar: object }; items: number; empty: Record<string, unknown> }[] = [
+  { name: "Icon Card Grid", Block: FeaturesIconCardGrid as Block, copy: featuresIconCardGridCopy, items: 6, empty: { cards: [] } },
+  { name: "Compact Icon Index", Block: FeaturesCompactIconIndex as Block, copy: featuresCompactIconIndexCopy, items: 16, empty: { items: [] } },
+  { name: "Numbered Feature Rows", Block: FeaturesNumberedFeatureRows as Block, copy: featuresNumberedFeatureRowsCopy, items: 4, empty: { features: [] } },
+  { name: "Feature Checklist Columns", Block: FeaturesFeatureChecklistColumns as Block, copy: featuresFeatureChecklistColumnsCopy, items: 3, empty: { columns: [] } },
+  { name: "Colour Block Cards", Block: FeaturesColourBlockCards as Block, copy: featuresColourBlockCardsCopy, items: 4, empty: { cards: [] } },
+  { name: "Stat Feature Band", Block: FeaturesStatFeatureBand as Block, copy: featuresStatFeatureBandCopy, items: 4, empty: { stats: [] } },
+]
+
+/** The copy a reader sees: every string except the ids and tones that key an item. */
+const strings = (value: unknown): string[] =>
+  typeof value === "string"
+    ? [value]
+    : value && typeof value === "object"
+      ? Object.entries(value).flatMap(([key, inner]) => (key === "id" || key === "tone" ? [] : strings(inner)))
+      : []
+
+/** The key shape of a copy object, so English and Arabic can be compared. */
+const shape = (value: unknown): unknown =>
+  Array.isArray(value) ? value.map(shape) : value && typeof value === "object" ? Object.fromEntries(Object.entries(value).map(([key, inner]) => [key, shape(inner)])) : typeof value
+
+describe.each(TYPES)("$name", ({ Block, copy, items, empty }) => {
+  it.each(["en", "ar"] as const)("renders one h2 that names the section, and every item, in %s", (locale) => {
+    const { container } = render(<Block locale={locale} />)
+    const headings = screen.getAllByRole("heading", { level: 2 })
+    expect(headings).toHaveLength(1)
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(headings[0]!.id)
+    expect(container.querySelectorAll("ul > li, ol > li, section section").length).toBeGreaterThanOrEqual(items)
+  })
+
+  it("has the same shape in English and Arabic", () => {
+    expect(shape(copy.ar)).toEqual(shape(copy.en))
+  })
+
+  it("writes no em dash or middle dot in the Arabic copy, and no English left in it", () => {
+    for (const text of strings(copy.ar)) {
+      expect(text, text).not.toMatch(/[—·]/)
+      // Latin letters belong only to names that stay Latin: SSO, SCIM, SAML, Okta, Entra, Google, API, REST, JSON, CSV.
+      const latin = text.replace(/\b(SSO|SCIM|SAML|Okta|Entra|Google|API|REST|JSON|CSV|hrs)\b/g, "")
+      expect(latin, text).not.toMatch(/[A-Za-z]{3,}/)
+    }
+  })
+
+  it("keeps Western digits in the Arabic copy", () => {
+    for (const text of strings(copy.ar)) expect(text, text).not.toMatch(/[٠-٩]/)
+  })
+
+  it("shows its heading and no items when it has nothing to show", () => {
+    const { container } = render(<Block locale="en" {...empty} />)
+    expect(screen.getAllByRole("heading", { level: 2 })).toHaveLength(1)
+    expect(container.querySelectorAll("ul, ol").length).toBe(0)
+  })
+
+  it("passes the heading and className through, and lets copy props replace the defaults", () => {
+    const { container } = render(<Block locale="en" heading="Custom heading" className="custom" />)
+    expect(screen.getByRole("heading", { level: 2 }).textContent).toBe("Custom heading")
+    expect(container.querySelector("section")?.className).toContain("custom")
+  })
+})
+
+describe("Feature Checklist Columns", () => {
+  it("renders six checked items in each column, and the button reports presses without a link", () => {
+    let pressed = 0
+    render(<FeaturesFeatureChecklistColumns onCompare={() => pressed++} />)
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(3)
+    expect(document.querySelectorAll("li")).toHaveLength(18)
+    screen.getByRole("button", { name: "Compare plans" }).click()
+    expect(pressed).toBe(1)
+  })
+
+  it("renders the button as a link when it has a href", () => {
+    render(<FeaturesFeatureChecklistColumns compareHref="/pricing" />)
+    expect(screen.getByRole("link", { name: "Compare plans" }).getAttribute("href")).toBe("/pricing")
+  })
+})
+
+describe("Numbered Feature Rows and Colour Block Cards", () => {
+  it("paint with the inverse tokens, as their registry entries say", () => {
+    const { container } = render(<FeaturesNumberedFeatureRows />)
+    expect(container.querySelector("section")?.className).toContain("bg-background-inverse")
+    const cards = render(<FeaturesColourBlockCards />)
+    expect(cards.container.querySelectorAll("li")[3]!.className).toContain("bg-primary")
+  })
+})
+
+describe("Stat Feature Band", () => {
+  it("keeps a figure in order inside Arabic text by isolating it left to right", () => {
+    const { container } = render(<FeaturesStatFeatureBand locale="ar" />)
+    expect(container.querySelectorAll("bdi[dir='ltr']").length).toBeGreaterThanOrEqual(4)
+  })
+})

package/registry/blocks/features-interactive.test.tsx

@@ -0,0 +1,175 @@
+import { describe, expect, it, vi } from "vitest"
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import { FeaturesPhotoCarousel, featuresPhotoCarouselCopy } from "./features-photo-carousel"
+import { FeaturesPhotoTabsPanel, featuresPhotoTabsPanelCopy } from "./features-photo-tabs-panel"
+import { FeaturesAccordionPhoto, featuresAccordionPhotoCopy } from "./features-accordion-photo"
+import { FeaturesExpandingStepCards, featuresExpandingStepCardsCopy } from "./features-expanding-step-cards"
+
+// What these tests can and cannot prove: jsdom has no layout or animation, so
+// the Figma sizes, the container-query layouts, the fade and the sliding tab
+// indicator were measured in a browser. These assert the behaviour: what the
+// visitor can operate and what each action changes, in both languages.
+
+type Block = React.ComponentType<{ locale?: "en" | "ar" } & Record<string, unknown>>
+const TYPES: { name: string; Block: Block; copy: { en: object; ar: object } }[] = [
+  { name: "Photo Carousel", Block: FeaturesPhotoCarousel as Block, copy: featuresPhotoCarouselCopy },
+  { name: "Photo Tabs Panel", Block: FeaturesPhotoTabsPanel as Block, copy: featuresPhotoTabsPanelCopy },
+  { name: "Accordion + Photo", Block: FeaturesAccordionPhoto as Block, copy: featuresAccordionPhotoCopy },
+  { name: "Expanding Step Cards", Block: FeaturesExpandingStepCards as Block, copy: featuresExpandingStepCardsCopy },
+]
+
+const strings = (value: unknown): string[] =>
+  typeof value === "string"
+    ? [value]
+    : Array.isArray(value)
+      ? value.flatMap(strings)
+      : value && typeof value === "object" && !("$$typeof" in value)
+        ? Object.entries(value).flatMap(([key, inner]) => (key === "id" || key === "tone" ? [] : strings(inner)))
+        : []
+
+const shape = (value: unknown): unknown =>
+  Array.isArray(value)
+    ? value.map(shape)
+    : value && typeof value === "object" && !("$$typeof" in value)
+      ? Object.fromEntries(Object.entries(value).map(([key, inner]) => [key, shape(inner)]))
+      : typeof value
+
+describe.each(TYPES)("$name", ({ Block, copy }) => {
+  it.each(["en", "ar"] as const)("renders one h2 that names the section in %s", (locale) => {
+    const { container } = render(<Block locale={locale} />)
+    const headings = screen.getAllByRole("heading", { level: 2 })
+    expect(headings).toHaveLength(1)
+    expect(container.querySelector("section")?.getAttribute("aria-labelledby")).toBe(headings[0]!.id)
+  })
+
+  it("has the same shape in English and Arabic", () => {
+    expect(shape(copy.ar)).toEqual(shape(copy.en))
+  })
+
+  it("writes no em dash or middle dot in the Arabic copy, and no English left in it", () => {
+    for (const text of strings(copy.ar)) {
+      expect(text, text).not.toMatch(/[—·]/)
+      const latin = text.replace(/\b(API|REST|CSV|SSO|SCIM)\b/g, "")
+      expect(latin, text).not.toMatch(/[A-Za-z]{3,}/)
+      expect(text, text).not.toMatch(/[٠-٩]/)
+    }
+  })
+
+  it("passes className through", () => {
+    const { container } = render(<Block locale="en" className="custom" />)
+    expect(container.querySelector("section")?.className).toContain("custom")
+  })
+})
+
+describe("Photo Carousel", () => {
+  it("shows the first slide, counts it, and disables previous at the start", () => {
+    render(<FeaturesPhotoCarousel />)
+    expect(screen.getByRole("button", { name: "Previous slide" })).toHaveProperty("disabled", true)
+    expect(screen.getByRole("button", { name: "Next slide" })).toHaveProperty("disabled", false)
+    expect(screen.getAllByText("01 / 04").length).toBeGreaterThan(0)
+  })
+
+  it("moves one slide with the buttons, to any slide with the dots, and stops at the ends", () => {
+    const changes: number[] = []
+    render(<FeaturesPhotoCarousel onIndexChange={(next) => changes.push(next)} />)
+    fireEvent.click(screen.getByRole("button", { name: "Next slide" }))
+    fireEvent.click(screen.getByRole("button", { name: "Next slide" }))
+    expect(changes).toEqual([1, 2])
+    fireEvent.click(screen.getByRole("button", { name: "4 / 4" }))
+    expect(changes.at(-1)).toBe(3)
+    expect(screen.getByRole("button", { name: "Next slide" })).toHaveProperty("disabled", true)
+    fireEvent.click(screen.getByRole("button", { name: "Previous slide" }))
+    expect(changes.at(-1)).toBe(2)
+  })
+
+  it("hides every slide but the shown one from assistive technology and the keyboard", () => {
+    const { container } = render(<FeaturesPhotoCarousel index={1} />)
+    const slides = [...container.querySelectorAll("[aria-roledescription='slide']")]
+    expect(slides).toHaveLength(4)
+    expect(slides.map((slide) => slide.getAttribute("aria-hidden"))).toEqual(["true", null, "true", "true"])
+    expect(slides.map((slide) => slide.hasAttribute("inert"))).toEqual([true, false, true, true])
+  })
+
+  it("never advances by itself", () => {
+    vi.useFakeTimers()
+    const onIndexChange = vi.fn()
+    render(<FeaturesPhotoCarousel onIndexChange={onIndexChange} />)
+    vi.advanceTimersByTime(60_000)
+    expect(onIndexChange).not.toHaveBeenCalled()
+    vi.useRealTimers()
+  })
+
+  it("makes a link of a slide with an href and reports the press of one without", () => {
+    const pressed: string[] = []
+    const { container } = render(<FeaturesPhotoCarousel slides={[{ id: "a", title: "A", description: "a", linkLabel: "Go", href: "/a" }, { id: "b", title: "B", description: "b", linkLabel: "Go" }]} onLinkClick={(id) => pressed.push(id)} />)
+    expect(container.querySelectorAll("a[href='/a']")).toHaveLength(1)
+    fireEvent.click(container.querySelector("button[type='button'].group\\/link")!)
+    expect(pressed).toEqual(["b"])
+  })
+})
+
+describe("Photo Tabs Panel", () => {
+  it("shows the first tab's panel and switches to another when a tab is picked", () => {
+    render(<FeaturesPhotoTabsPanel />)
+    expect(screen.getAllByRole("tab")).toHaveLength(4)
+    expect(screen.getByText("Roadmap, specs and releases on one timeline")).toBeTruthy()
+    fireEvent.click(screen.getByRole("tab", { name: "Finance" }))
+    expect(screen.getByText("Budgets, approvals and audit trails that agree")).toBeTruthy()
+    expect(screen.queryByText("Roadmap, specs and releases on one timeline")).toBeNull()
+  })
+
+  it("reports the picked tab's id and takes a controlled value", () => {
+    const onValueChange = vi.fn()
+    const { rerender } = render(<FeaturesPhotoTabsPanel value="product" onValueChange={onValueChange} />)
+    fireEvent.click(screen.getByRole("tab", { name: "Marketing" }))
+    expect(onValueChange).toHaveBeenCalledWith("marketing")
+    rerender(<FeaturesPhotoTabsPanel value="operations" onValueChange={onValueChange} />)
+    expect(screen.getByText("Recurring work that runs on a template")).toBeTruthy()
+  })
+
+  it("draws three checked bullets in a panel", () => {
+    const { container } = render(<FeaturesPhotoTabsPanel />)
+    expect(container.querySelectorAll("[role='tabpanel'] ul li")).toHaveLength(3)
+  })
+})
+
+describe("Accordion + Photo", () => {
+  it("opens the first question, and opening another closes it", () => {
+    render(<FeaturesAccordionPhoto />)
+    const triggers = screen.getAllByRole("button")
+    expect(triggers).toHaveLength(5)
+    expect(triggers[0]!.getAttribute("aria-expanded")).toBe("true")
+    fireEvent.click(triggers[1]!)
+    expect(screen.getAllByRole("button")[1]!.getAttribute("aria-expanded")).toBe("true")
+    expect(screen.getAllByRole("button")[0]!.getAttribute("aria-expanded")).toBe("false")
+  })
+
+  it("lets several stay open when multiple, and takes its open items from defaultValue", () => {
+    render(<FeaturesAccordionPhoto multiple defaultValue={["api", "arabic"]} />)
+    const open = screen.getAllByRole("button").filter((button) => button.getAttribute("aria-expanded") === "true")
+    expect(open).toHaveLength(2)
+  })
+})
+
+describe("Expanding Step Cards", () => {
+  it("shows four named cards, Plan with three steps, and a button that reports its press", () => {
+    let pressed = 0
+    const { container } = render(<FeaturesExpandingStepCards onStart={() => pressed++} />)
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(4)
+    expect(container.querySelectorAll("section[aria-label='Plan'] ol li")).toHaveLength(3)
+    fireEvent.click(screen.getByRole("button", { name: "Start for free" }))
+    expect(pressed).toBe(1)
+  })
+
+  it("draws a Progress at 40% in the Record card and uses the atoms as drawn", () => {
+    const { container } = render(<FeaturesExpandingStepCards />)
+    const bar = within(container.querySelector("section[aria-label='Record']") as HTMLElement).getByRole("progressbar")
+    expect(bar.getAttribute("aria-valuenow")).toBe("40")
+    for (const text of ["Ready", "Live", "Sent"]) expect(container.textContent).toContain(text)
+  })
+
+  it("renders the button as a link with a startHref", () => {
+    render(<FeaturesExpandingStepCards startHref="/start" />)
+    expect(screen.getByRole("link", { name: "Start for free" }).getAttribute("href")).toBe("/start")
+  })
+})

package/registry/blocks/features-media-rail/FeaturesMediaRail.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import { FeaturesHeader, FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Media Rail.
+ *
+ * A header row, the section header at the start and a 14px note at the end on
+ * its bottom line, then four tiles. A tile is a tall photo (297 × 400, 8px
+ * radius) over a 16px title and a 14px line. A photo grows slightly on hover.
+ *
+ * Desktop sets the four tiles in one row, 20px apart. Tablet sets them two
+ * across. Mobile makes a rail: 220px tiles that scroll sideways and snap, and
+ * stay reachable from the keyboard.
+ *
+ * Content limits: a tile's title up to 20 characters and its line up to 70.
+ * The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesMediaTile {
+  /** Keys the tile. */
+  id: string
+  /** The tile's title. */
+  title: React.ReactNode
+  /** The line under it. */
+  description: React.ReactNode
+  /** The tile's photo. */
+  image?: FeaturesPhoto
+}
+
+export interface FeaturesMediaRailCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The note beside the heading. */
+  note: React.ReactNode
+  /** The tiles, in order. */
+  tiles: FeaturesMediaTile[]
+  /** Names the scrolling rail on Mobile for assistive technology. */
+  railLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesMediaRailCopy> = {
+  en: {
+    eyebrow: "HOW IT FEELS",
+    heading: "Where form follows the work",
+    note: "Four surfaces, one model underneath.",
+    railLabel: "Surfaces",
+    tiles: [
+      { id: "board", title: "Board", description: "Drag work between states and every dependent date recalculates." },
+      { id: "chart", title: "Chart", description: "Any view becomes a chart without exporting a single row." },
+      { id: "docs", title: "Docs", description: "Specs live beside the tickets they describe, not in another tool." },
+      { id: "spaces", title: "Spaces", description: "Give each team a home that still rolls into the company view." },
+    ],
+  },
+  ar: {
+    eyebrow: "كيف يبدو الاستخدام",
+    heading: "حيث يتبع الشكلُ العملَ",
+    note: "أربع واجهات، ونموذج واحد تحتها.",
+    railLabel: "الواجهات",
+    tiles: [
+      { id: "board", title: "اللوحة", description: "اسحب العمل بين الحالات فتُعاد حساب كل تاريخ مرتبط به." },
+      { id: "chart", title: "الرسم البياني", description: "يتحوّل أي عرض إلى رسم بياني دون تصدير صف واحد." },
+      { id: "docs", title: "المستندات", description: "تعيش المواصفات إلى جانب التذاكر التي تصفها، لا في أداة أخرى." },
+      { id: "spaces", title: "المساحات", description: "امنح كل فريق مساحته الخاصة مع بقائها ضمن عرض الشركة." },
+    ],
+  },
+}
+
+export interface FeaturesMediaRailProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesMediaRailCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+export function FeaturesMediaRail({ locale = "en", eyebrow, heading, note, tiles, railLabel, className, ...props }: FeaturesMediaRailProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = tiles ?? copy.tiles
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" className={className} {...props}>
+      <div className="flex flex-col gap-3 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:items-end [@container(min-width:72rem)]:justify-between [@container(min-width:72rem)]:gap-16">
+        <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} className="flex-1" />
+        <p className="text-sm text-muted-foreground">{note ?? copy.note}</p>
+      </div>
+      {list.length > 0 ? (
+        <ul
+          role="list"
+          tabIndex={0}
+          aria-label={railLabel ?? copy.railLabel}
+          className="flex snap-x snap-mandatory gap-5 overflow-x-auto overscroll-x-contain pb-1 [touch-action:pan-x_pan-y] focus-visible:rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [@container(min-width:48rem)]:grid [@container(min-width:48rem)]:snap-none [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:48rem)]:gap-x-6 [@container(min-width:48rem)]:gap-y-5 [@container(min-width:48rem)]:overflow-visible [@container(min-width:72rem)]:grid-cols-4 [@container(min-width:72rem)]:gap-x-5"
+        >
+          {list.map((tile) => (
+            <li key={tile.id} className="group flex w-[220px] shrink-0 snap-start flex-col gap-4 [@container(min-width:48rem)]:w-auto">
+              <FeaturesPhotoSlot
+                photo={tile.image}
+                className="aspect-[220/297] w-full rounded-lg [@container(min-width:48rem)]:aspect-[310/419] [@container(min-width:72rem)]:aspect-[297/400]"
+                imageClassName="motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]"
+              />
+              <div className="flex flex-col gap-1">
+                <h3 className="text-base font-semibold text-foreground">{tile.title}</h3>
+                <p className="text-sm text-muted-foreground">{tile.description}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresMediaRailCopy = COPY

package/registry/blocks/features-media-rail/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesMediaRail,
+  featuresMediaRailCopy,
+  type FeaturesMediaRailCopy,
+  type FeaturesMediaRailProps,
+  type FeaturesMediaTile,
+} from "./FeaturesMediaRail"

package/registry/blocks/features-notched-photo-columns/FeaturesNotchedPhotoColumns.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import * as React from "react"
+import { Archive, Bell, Database, FileText, Layers, Mail, MessageSquare, NotebookText, RefreshCw } from "lucide-react"
+import { Badge } from "../../ui/badge/badge"
+import { FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Notched Photo Columns.
+ *
+ * A two-tone heading (the first sentence in `foreground`, the second in
+ * `muted-foreground`), then three columns in one 1px `border` frame. A column
+ * is a photo with a corner notch cut from its top end, a numbered tag in the
+ * top start corner, then a body: an 18px two-line title, a 14px line and
+ * three outline Badges (Primary, small, standard radius) each with a mark.
+ *
+ * The photo is dimmed by a `background-inverse` scrim, 380px tall on
+ * Desktop, 300px on Tablet and 240px on Mobile. Desktop sets the three
+ * columns across; Tablet and Mobile stack them. A photo grows 3% on hover.
+ *
+ * Content limits: the heading up to 60 characters, a column's tag up to 22,
+ * its two title lines up to 28 each and its line up to 130. The other limits
+ * are in the block's documentation page.
+ */
+
+export interface FeaturesNotchedColumn {
+  /** Keys the column. */
+  id: string
+  /** The number in the tag, such as "01". */
+  number: React.ReactNode
+  /** The words after the number on the photo. */
+  tag: React.ReactNode
+  /** The two lines of the title. */
+  title: [React.ReactNode, React.ReactNode]
+  /** One line under the title. */
+  description: React.ReactNode
+  /** The Badges, each a label and a Lucide mark. */
+  chips: { id: string; label: string; icon: React.ElementType }[]
+  /** The column's photo. */
+  image?: FeaturesPhoto
+}
+
+export interface FeaturesNotchedPhotoColumnsCopy {
+  /** The heading's first sentence, in `foreground`. An `h2` with the second. */
+  heading: React.ReactNode
+  /** The heading's second sentence, in `muted-foreground`. */
+  headingMuted: React.ReactNode
+  /** The columns, in order. */
+  columns: FeaturesNotchedColumn[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesNotchedPhotoColumnsCopy> = {
+  en: {
+    heading: "Your records are already in order.",
+    headingMuted: "Your answers are not.",
+    columns: [
+      {
+        id: "records",
+        number: "01",
+        tag: "Your records.",
+        title: ["Organised in tidy folders.", "Missing the full picture."],
+        description: "Files are easy to store and hard to connect. Most of what a team knows was never written down in one place.",
+        chips: [
+          { id: "records", label: "Records", icon: Database },
+          { id: "reports", label: "Reports", icon: FileText },
+          { id: "archive", label: "Archive", icon: Archive },
+        ],
+      },
+      {
+        id: "seat",
+        number: "02",
+        tag: "A seat for everyone.",
+        title: ["Everyone has access.", "Nobody shares context."],
+        description: "The right tool reached every desk first. What it could not give anyone was a common memory of the work.",
+        chips: [
+          { id: "chat", label: "Chat", icon: MessageSquare },
+          { id: "notes", label: "Notes", icon: NotebookText },
+          { id: "mail", label: "Mail", icon: Mail },
+        ],
+      },
+      {
+        id: "summary",
+        number: "03",
+        tag: "A living summary.",
+        title: ["Written once.", "Fresh every morning."],
+        description: "It reads from live files and writes back as work happens, so the summary never waits for someone to rebuild it.",
+        chips: [
+          { id: "alerts", label: "Alerts", icon: Bell },
+          { id: "digests", label: "Digests", icon: Layers },
+          { id: "sync", label: "Sync", icon: RefreshCw },
+        ],
+      },
+    ],
+  },
+  ar: {
+    heading: "سجلاتك مرتبة بالفعل.",
+    headingMuted: "أما إجاباتك فلا.",
+    columns: [
+      {
+        id: "records",
+        number: "01",
+        tag: "سجلاتك.",
+        title: ["منظَّمة في مجلدات مرتبة.", "تفتقر إلى الصورة الكاملة."],
+        description: "من السهل تخزين الملفات ومن الصعب ربطها. معظم ما يعرفه الفريق لم يُدوَّن يومًا في مكان واحد.",
+        chips: [
+          { id: "records", label: "السجلات", icon: Database },
+          { id: "reports", label: "التقارير", icon: FileText },
+          { id: "archive", label: "الأرشيف", icon: Archive },
+        ],
+      },
+      {
+        id: "seat",
+        number: "02",
+        tag: "مقعد للجميع.",
+        title: ["الجميع يملك صلاحية الوصول.", "ولا أحد يشارك السياق."],
+        description: "وصلت الأداة المناسبة إلى كل مكتب أولًا. أما ما عجزت عن منحه لأحد فهو ذاكرة مشتركة للعمل.",
+        chips: [
+          { id: "chat", label: "المحادثة", icon: MessageSquare },
+          { id: "notes", label: "الملاحظات", icon: NotebookText },
+          { id: "mail", label: "البريد", icon: Mail },
+        ],
+      },
+      {
+        id: "summary",
+        number: "03",
+        tag: "ملخص حيّ.",
+        title: ["تُكتب مرة واحدة.", "وتتجدد كل صباح."],
+        description: "تقرأ من الملفات الحية وتكتب فيها فور حدوث العمل، فلا ينتظر الملخص أحدًا ليعيد بناءه.",
+        chips: [
+          { id: "alerts", label: "التنبيهات", icon: Bell },
+          { id: "digests", label: "الملخصات", icon: Layers },
+          { id: "sync", label: "المزامنة", icon: RefreshCw },
+        ],
+      },
+    ],
+  },
+}
+
+export interface FeaturesNotchedPhotoColumnsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesNotchedPhotoColumnsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+/**
+ * The photo with its top end cut away: 70px across and 52px down, a slanted
+ * edge for the first 50px. The cut is at the top end, so it mirrors in Arabic.
+ */
+const NOTCH =
+  "[clip-path:polygon(0_0,calc(100%_-_70px)_0,calc(100%_-_20px)_52px,100%_52px,100%_100%,0_100%)] rtl:[clip-path:polygon(100%_0,70px_0,20px_52px,0_52px,0_100%,100%_100%)]"
+
+export function FeaturesNotchedPhotoColumns({ locale = "en", heading, headingMuted, columns, className, ...props }: FeaturesNotchedPhotoColumnsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = columns ?? copy.columns
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" contentClassName="[@container(min-width:48rem)]:gap-12" className={className} {...props}>
+      <h2 id={headingId} className="max-w-[640px] text-3xl font-medium leading-10 text-foreground [@container(min-width:48rem)]:leading-[44px] [@container(min-width:72rem)]:text-4xl [@container(min-width:72rem)]:leading-[44px]">
+        {heading ?? copy.heading} <span className="text-muted-foreground">{headingMuted ?? copy.headingMuted}</span>
+      </h2>
+      {list.length > 0 ? (
+        <ul role="list" className="grid grid-cols-1 overflow-hidden rounded-lg border border-border [@container(min-width:72rem)]:grid-cols-3">
+          {list.map((column) => (
+            <li key={column.id} className="group flex min-w-0 flex-col border-border [&:not(:first-child)]:border-t [@container(min-width:72rem)]:[&:not(:first-child)]:border-s [@container(min-width:72rem)]:[&:not(:first-child)]:border-t-0">
+              <FeaturesPhotoSlot
+                photo={column.image}
+                className={`relative isolate h-60 bg-background-inverse [@container(min-width:48rem)]:h-[300px] [@container(min-width:72rem)]:h-[380px] ${NOTCH}`}
+                imageClassName="motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]"
+              >
+                <div aria-hidden="true" className="absolute inset-0 bg-background-inverse/[0.35]" />
+                <p className="absolute start-6 top-5 flex items-center gap-2 text-sm font-medium text-foreground-inverse">
+                  <span className="rounded-sm border border-foreground-inverse px-1 py-0.5 text-[10px] leading-[14px]">{column.number}</span>
+                  {column.tag}
+                </p>
+              </FeaturesPhotoSlot>
+              <div className="flex flex-1 flex-col gap-3 p-6">
+                <h3 className="text-lg font-medium text-foreground">
+                  {column.title[0]}
+                  <br />
+                  {column.title[1]}
+                </h3>
+                <p className="text-sm text-muted-foreground">{column.description}</p>
+                <ul role="list" className="mt-auto flex flex-wrap gap-2">
+                  {column.chips.map((chip) => {
+                    const Icon = chip.icon
+                    return (
+                      <li key={chip.id} className="flex">
+                        <Badge variant="outline" tone="primary" size="sm" radius="standard" icon={<Icon strokeWidth={1.5} />}>
+                          {chip.label}
+                        </Badge>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresNotchedPhotoColumnsCopy = COPY

package/registry/blocks/features-notched-photo-columns/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesNotchedPhotoColumns,
+  featuresNotchedPhotoColumnsCopy,
+  type FeaturesNotchedColumn,
+  type FeaturesNotchedPhotoColumnsCopy,
+  type FeaturesNotchedPhotoColumnsProps,
+} from "./FeaturesNotchedPhotoColumns"