@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/hero-textured-dark/HeroTexturedDark.tsx

@@ -0,0 +1,378 @@
+"use client"
+
+import * as React from "react"
+import { Play } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Textured Dark Hero.
+ *
+ * A dark band under a texture photo at 45%, carrying the pitch: a light
+ * first line, the headline under it, a paragraph and a "watch the tour"
+ * link behind a round `chart-5` disc. A round sticker in `chart-5`, tilted,
+ * announces the release; under the copy a row of tabs, then a product
+ * window rising out of the band: two boards of rows, each with a status
+ * badge.
+ *
+ * Desktop sets the copy 900px wide with the sticker at the end side, and
+ * the window 40px in from the content's edges, its foot running past the
+ * section's bottom edge, which crops its empty last 40px; below the band
+ * the page's own background shows. Tablet keeps the boards side by side and
+ * the window whole; Mobile stacks the boards and steps the type down. On
+ * both the band's colour runs on under the window.
+ *
+ * The tabs are drawn, not working: a plain list with the first one lit, as
+ * Figma draws them. The disc is a link, not a player; its play glyph is
+ * decoration. The navigation row Figma draws above the copy (a "Get
+ * started" button) is left out: the page's own navbar does that job.
+ *
+ * The band is dark and its text light in both modes, as Figma draws them:
+ * a photograph does not change with the theme. In light mode that is the
+ * inverse tokens; in dark mode the page's own `background` and
+ * `foreground` hold the same colours, so `dark:` switches to them, as
+ * Framed Full-Bleed does. Figma's paragraph and tabs are muted; here they
+ * are full `foreground`, since muted text fails over the grain's bright
+ * flecks. Dark `foreground` is a touch dimmer than white, so in dark mode
+ * the texture drops from 45% to 40% to keep the same contrast. The sticker
+ * and the disc are `chart-5` surfaces, not the photo, and keep the inverse
+ * tokens Figma binds.
+ *
+ * In Arabic the copy, the sticker, the tabs and the boards mirror: the
+ * sticker moves to the left and tilts the other way. The play glyph does not
+ * flip, and numbers stay left to right. The photo is never flipped.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at, and the switch every Hero block shares, so
+ * Tablet's layout covers 768 to 1439.
+ */
+
+export interface HeroTexturedDarkAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface HeroTexturedDarkPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroTexturedDarkRow {
+  /** The row's name. */
+  label: React.ReactNode
+  /** Its status, on a soft badge. */
+  status: React.ReactNode
+  /** The badge's tone. */
+  tone: "success" | "info"
+}
+
+export interface HeroTexturedDarkBoard {
+  /** The board's title, an `h2`. */
+  title: React.ReactNode
+  /** The board's rows. Figma shows three. */
+  rows: HeroTexturedDarkRow[]
+}
+
+export interface HeroTexturedDarkCopy {
+  /** The headline, an `h1`: a light first line, then the main line. A line break in the string breaks the line. */
+  headline: { lead: React.ReactNode; main: React.ReactNode }
+  /** The paragraph under the headline. */
+  description: React.ReactNode
+  /** The text link behind the play disc. Hidden when null. */
+  tourAction: HeroTexturedDarkAction | null
+  /** The tilted round sticker. A line break in the string breaks the line. Hidden when empty. */
+  sticker: React.ReactNode
+  /** The tabs above the window, drawn, not working. Figma shows four. Hidden when empty. */
+  tabs: React.ReactNode[]
+  /** The boards in the product window. Figma shows two. */
+  boards: HeroTexturedDarkBoard[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroTexturedDarkCopy> = {
+  en: {
+    headline: { lead: "One workspace to", main: "Plan, write and ship\nyour next release" },
+    description: "Roadmaps, docs and feedback in one place, connected so nothing slips through the cracks.",
+    tourAction: {
+      label: (
+        <>
+          Watch the <bdi dir="ltr">3</bdi>-minute tour
+        </>
+      ),
+      href: "#tour",
+    },
+    sticker: (
+      <>
+        {"NEW IN\nVERSION "}
+        <bdi dir="ltr">2</bdi>
+      </>
+    ),
+    tabs: ["Roadmap", "Docs", "Feedback", "Releases"],
+    boards: [
+      {
+        title: "Planned",
+        rows: [
+          { label: "Search filters", status: "Ready", tone: "success" },
+          { label: "Bulk export", status: "Ready", tone: "success" },
+          { label: "Dark mode", status: "Review", tone: "info" },
+        ],
+      },
+      {
+        title: "In progress",
+        rows: [
+          { label: "Onboarding", status: "Ready", tone: "success" },
+          { label: "Billing page", status: "Review", tone: "info" },
+          { label: "Mobile app", status: "Ready", tone: "success" },
+        ],
+      },
+    ],
+  },
+  ar: {
+    headline: { lead: "مساحة عمل واحدة", main: "لتخطط وتكتب وتطلق\nإصدارك القادم" },
+    description: "خطط الطريق والمستندات والملاحظات في مكان واحد، مترابطة حتى لا يضيع شيء.",
+    tourAction: {
+      label: (
+        <>
+          شاهد جولة في <bdi dir="ltr">3</bdi> دقائق
+        </>
+      ),
+      href: "#tour",
+    },
+    sticker: (
+      <>
+        {"جديد في\nالإصدار "}
+        <bdi dir="ltr">2</bdi>
+      </>
+    ),
+    tabs: ["خطة الطريق", "المستندات", "الملاحظات", "الإصدارات"],
+    boards: [
+      {
+        title: "مخطط لها",
+        rows: [
+          { label: "عوامل تصفية البحث", status: "جاهز", tone: "success" },
+          { label: "تصدير جماعي", status: "جاهز", tone: "success" },
+          { label: "الوضع الداكن", status: "مراجعة", tone: "info" },
+        ],
+      },
+      {
+        title: "قيد التنفيذ",
+        rows: [
+          { label: "تهيئة المستخدمين", status: "جاهز", tone: "success" },
+          { label: "صفحة الفوترة", status: "مراجعة", tone: "info" },
+          { label: "تطبيق الجوال", status: "جاهز", tone: "success" },
+        ],
+      },
+    ],
+  },
+}
+
+export interface HeroTexturedDarkProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroTexturedDarkCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The texture laid over the band at 45%. None by default: the band shows
+   * its plain dark colour, so the copy stays readable.
+   * @default none: the plain dark band
+   */
+  photo?: HeroTexturedDarkPhoto
+  /** Which tab is drawn lit, counting from 0. Nothing switches: the tabs are drawn, not working. */
+  activeTab?: number
+}
+
+export function HeroTexturedDark({
+  locale = "en",
+  headline,
+  description,
+  tourAction,
+  sticker,
+  tabs,
+  boards,
+  photo,
+  activeTab = 0,
+  className,
+  ...props
+}: HeroTexturedDarkProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const title = headline ?? copy.headline
+  const tour = tourAction === undefined ? copy.tourAction : tourAction
+  const badge = sticker ?? copy.sticker
+  const tabList = tabs ?? copy.tabs
+
+  // Whether the tab row overflows and scrolls: only then is it a stop for the keyboard.
+  const tabsRef = React.useRef<HTMLUListElement>(null)
+  const [tabsScroll, setTabsScroll] = React.useState(false)
+  React.useEffect(() => {
+    const list = tabsRef.current
+    if (!list || typeof ResizeObserver === "undefined") return
+    const check = () => setTabsScroll(list.scrollWidth > list.clientWidth + 1)
+    check()
+    // The row for its width, each tab for its text (a font that loads late widens it).
+    const observer = new ResizeObserver(check)
+    observer.observe(list)
+    for (const item of Array.from(list.children)) observer.observe(item)
+    return () => observer.disconnect()
+  }, [tabList.length])
+  const boardList = boards ?? copy.boards
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn(
+        "[container-type:inline-size] relative isolate overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      {/*
+       * The section's own colour, on a layer: the band's colour on Mobile and
+       * Tablet, where it runs on under the window, and the page's on Desktop,
+       * below the band. A container query sizes against the container's
+       * ancestors, never the container itself, so the Desktop switch cannot
+       * sit on the section.
+       */}
+      <div aria-hidden className="absolute inset-0 -z-10 bg-background-inverse dark:bg-background [@container(min-width:90rem)]:bg-background" />
+      {/*
+       * The section's colour fills the whole width; its content does not.
+       * From Tablet up to Desktop the content keeps Figma's Tablet width,
+       * 720px inside 24px padding, and centres, so a wide container shows
+       * Figma's Tablet layout rather than a stretched one.
+       */}
+      <div className="mx-auto flex w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] flex-col px-4 py-8 [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:py-16 [@container(min-width:90rem)]:px-[120px] [@container(min-width:90rem)]:pb-0 [@container(min-width:90rem)]:pt-24">
+        {/*
+         * The band: the copy and the tabs, then room for the top of the
+         * window, which rises into it (80px on Mobile, 168 on Tablet, 100 on
+         * Desktop, as Figma's texture ends).
+         */}
+        <div className="relative isolate flex flex-col pb-[120px] [@container(min-width:48rem)]:pb-[216px] [@container(min-width:90rem)]:pb-[132px]">
+          {/*
+           * The band's colour and texture run edge to edge of the section,
+           * from its top: out of the content's padding and past its sides.
+           */}
+          <div className="absolute inset-x-[calc(50%-50cqw)] -top-8 bottom-0 -z-10 overflow-hidden bg-background-inverse dark:bg-background [@container(min-width:48rem)]:-top-16 [@container(min-width:90rem)]:-top-24">
+            {photo ? (
+              <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 size-full object-cover opacity-[0.45] dark:opacity-40" />
+            ) : null}
+          </div>
+
+          <div className="relative flex flex-col items-start gap-4">
+            <h1 id={headingId} className="flex max-w-[900px] flex-col gap-4 text-foreground-inverse dark:text-foreground">
+              <span className="text-3xl font-light [@container(min-width:48rem)]:text-4xl">{title.lead}</span>
+              <span className="whitespace-pre-line text-3xl font-semibold [@container(min-width:48rem)]:text-6xl [@container(min-width:90rem)]:text-7xl">
+                {title.main}
+              </span>
+            </h1>
+            <p className="text-pretty text-base text-foreground-inverse dark:text-foreground [@container(min-width:48rem)]:max-w-[560px] [@container(min-width:48rem)]:text-lg">
+              {description ?? copy.description}
+            </p>
+            {tour ? (
+              <a
+                href={tour.href}
+                className="relative inline-flex items-center gap-3 rounded-sm before:absolute before:-inset-x-1 before:-inset-y-2 text-base font-medium text-foreground-inverse [outline:none] dark:text-foreground hover:underline hover:underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-inverse focus-visible:dark:outline-foreground"
+              >
+                {/* Figma's disc. The play glyph is ours, and decoration: the link opens the tour, it plays nothing here. */}
+                <span aria-hidden className="inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-chart-5 text-foreground-inverse">
+                  <Play size={12} strokeWidth={1.5} absoluteStrokeWidth className="fill-current" />
+                </span>
+                <span className="whitespace-nowrap">{tour.label}</span>
+              </a>
+            ) : null}
+
+            {/*
+             * The sticker sits where Figma places it against the copy's foot:
+             * at the end side, tilted 12° (the other way in Arabic). On Tablet
+             * and Mobile it hangs below the copy, into the gap above the tabs.
+             * On Mobile the tabs sit 72px below the copy, not 40, so the
+             * sticker clears them, as Figma's Arabic Mobile variant spaces
+             * them: over its edge a tab could not keep its contrast.
+             */}
+            {badge ? (
+              <p className="absolute bottom-[-55px] end-0 flex size-[92px] rotate-12 items-center justify-center whitespace-pre-line rounded-full bg-chart-5 text-center text-xxs font-bold text-foreground-inverse [&:dir(rtl)]:-rotate-12 [@container(min-width:48rem)]:-bottom-9 [@container(min-width:48rem)]:end-[23px] [@container(min-width:48rem)]:size-[132px] [@container(min-width:48rem)]:text-sm [@container(min-width:90rem)]:bottom-2 [@container(min-width:90rem)]:end-[43px]">
+                <span>{badge}</span>
+              </p>
+            ) : null}
+          </div>
+
+          {tabList.length > 0 ? (
+            /*
+             * One line, as Figma draws it: 24px apart on Mobile (12 in Arabic,
+             * whose words run wider), 48 from Tablet up. Should the tabs ever
+             * outgrow the row, it scrolls sideways rather than wrapping, and
+             * takes keyboard focus then so the hidden tabs can be reached.
+             * A scrolling box clips, so 4px of bottom padding, taken back by
+             * the margin, keeps the underline in view.
+             */
+            <ul
+              ref={tabsRef}
+              tabIndex={tabsScroll ? 0 : undefined}
+              className={cn(
+                badge ? "mt-[72px]" : "mt-10",
+                "-mb-1 flex gap-x-6 overflow-x-auto pb-1 text-base font-medium [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-inverse focus-visible:dark:outline-foreground [&:dir(rtl)]:gap-x-3 [@container(min-width:48rem)]:mt-12 [@container(min-width:48rem)]:gap-x-12 [@container(min-width:48rem)]:text-lg [@container(min-width:48rem)]:[&:dir(rtl)]:gap-x-12 [@container(min-width:90rem)]:mt-[108px]"
+              )}
+            >
+              {tabList.map((tab, index) => (
+                <li
+                  key={index}
+                  aria-current={index === activeTab ? "true" : undefined}
+                  className={cn(
+                    "shrink-0 whitespace-nowrap",
+                    // Every tab is the same light colour, for contrast on the
+                    // texture; the underline marks the active one.
+                    index === activeTab
+                      ? "text-foreground-inverse underline decoration-2 underline-offset-8 dark:text-foreground"
+                      : "text-foreground-inverse dark:text-foreground"
+                  )}
+                >
+                  {tab}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+
+        {/*
+         * The window rises into the band. On Desktop it sits 40px in from the
+         * content's edges and runs 40px past the section's foot, which crops
+         * it; that is only its empty padding, whatever the rows.
+         */}
+        <div className="relative -mt-20 flex flex-col gap-4 rounded-xl bg-card p-4 shadow-2xl [@container(min-width:48rem)]:-mt-[168px] [@container(min-width:48rem)]:flex-row [@container(min-width:48rem)]:gap-8 [@container(min-width:48rem)]:p-8 [@container(min-width:90rem)]:-mb-10 [@container(min-width:90rem)]:-mt-[100px] [@container(min-width:90rem)]:mx-10">
+          {boardList.map((board, index) => (
+            <div
+              key={index}
+              className="flex min-w-0 flex-1 flex-col gap-3 rounded-lg bg-muted p-5 [@container(min-width:90rem)]:min-h-[256px]"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <h2 className="text-base font-semibold text-foreground">{board.title}</h2>
+                {/* Figma's "+": an add control drawn, not working. */}
+                <span aria-hidden className="text-base font-medium text-info">
+                  +
+                </span>
+              </div>
+              <ul className="flex flex-col gap-3">
+                {board.rows.map((row, rowIndex) => (
+                  <li key={rowIndex} className="flex min-h-9 items-center justify-between gap-3 rounded-md bg-card px-3">
+                    <span className="min-w-0 text-sm font-medium text-foreground">{row.label}</span>
+                    <Badge variant="soft" tone={row.tone} size="sm" radius="rounded" className="shrink-0 whitespace-nowrap">
+                      {row.status}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroTexturedDarkCopy = COPY

package/registry/blocks/hero-textured-dark/index.ts

@@ -0,0 +1,10 @@
+export {
+  HeroTexturedDark,
+  heroTexturedDarkCopy,
+  type HeroTexturedDarkAction,
+  type HeroTexturedDarkBoard,
+  type HeroTexturedDarkCopy,
+  type HeroTexturedDarkPhoto,
+  type HeroTexturedDarkProps,
+  type HeroTexturedDarkRow,
+} from "./HeroTexturedDark"

package/registry/blocks/hero-twin-panels/HeroTwinPanels.tsx

@@ -0,0 +1,231 @@
+"use client"
+
+import * as React from "react"
+import { Plus } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Twin Panels Hero.
+ *
+ * Two offers side by side, each on its own rounded `muted` panel: a loose
+ * cluster of photo tiles at the top, some running off the panel's edges, and
+ * the copy underneath, a two-line title whose second line is muted and a
+ * short paragraph. A round `background` button with a plus sits in a corner
+ * of each panel. The first panel shows five tiles, the second three.
+ *
+ * Desktop sets the two panels side by side, each 684 × 852, with the plus at
+ * the bottom end. Tablet and Mobile stack them, 720 × 620 and 328 × 520, with
+ * the plus at the top end; the tiles shrink with the panel and the titles step
+ * down from 5XL to 4XL and 3XL.
+ *
+ * In Arabic the panels swap sides and each cluster mirrors, the tiles placed
+ * from the right edge; the plus moves to the other corner. The photographs
+ * themselves are never flipped.
+ *
+ * Each tile's place is Figma's, in px from the panel's top and inline start,
+ * held in the tile's own `--hero-twin-*` variables. The tiles are drawn on a
+ * layer of Figma's panel width, centred in the panel, so a wider Mobile panel
+ * shows more `muted` around the same cluster rather than a stretched one.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container and everything inside, its padding included, follows it. Mobile
+ * is the base; `[@container(min-width:48rem)]:` is Figma's Tablet (768) and
+ * `[@container(min-width:90rem)]:` its Desktop, from 1440px, the width Figma
+ * draws it at. Narrower, the two panels squeeze their clusters, so Tablet's
+ * layout covers 768 to 1439.
+ */
+
+export interface HeroTwinPanelsAction {
+  /** The link's accessible name: the button shows only a plus. */
+  label: string
+  href: string
+}
+
+export interface HeroTwinPanelsPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroTwinPanelsPanel {
+  /** The panel's title in its two lines: the second is set muted. */
+  title: { start: React.ReactNode; accent: React.ReactNode }
+  /** The paragraph under the title. */
+  description: React.ReactNode
+  /** The round plus button in the panel's corner. */
+  action: HeroTwinPanelsAction
+}
+
+export interface HeroTwinPanelsCopy {
+  /**
+   * The two panels, in order from the start side. The first title is the
+   * block's `h1`, the second an `h2`.
+   */
+  panels: [HeroTwinPanelsPanel, HeroTwinPanelsPanel]
+}
+
+/**
+ * Figma's copy, English and Arabic. The plus buttons draw no text: their
+ * names are the two offers as Figma's menu names them, Photos and Video.
+ */
+const COPY: Record<"en" | "ar", HeroTwinPanelsCopy> = {
+  en: {
+    panels: [
+      {
+        title: { start: "Your product,", accent: "in any setting." },
+        description: "Upload one photo and place it in studio, home or outdoor scenes that match your brand.",
+        action: { label: "Photos", href: "#photos" },
+      },
+      {
+        title: { start: "Motion,", accent: "without a shoot." },
+        description: "Turn still images into short clips for ads, stories and product pages.",
+        action: { label: "Video", href: "#video" },
+      },
+    ],
+  },
+  ar: {
+    panels: [
+      {
+        title: { start: "منتجك،", accent: "في أي مكان." },
+        description: "ارفع صورة واحدة وضعها في مشاهد استوديو أو منزل أو طبيعة تناسب علامتك.",
+        action: { label: "الصور", href: "#photos" },
+      },
+      {
+        title: { start: "حركة،", accent: "من دون تصوير." },
+        description: "حوّل الصور الثابتة إلى مقاطع قصيرة للإعلانات والقصص وصفحات المنتجات.",
+        action: { label: "الفيديو", href: "#video" },
+      },
+    ],
+  },
+}
+
+/** A tile's box in px: its start and top offsets in the panel, then its size. */
+type Box = readonly [x: number, y: number, width: number, height: number]
+
+/**
+ * Each panel's tiles in Figma's order, measured on its 328 (Mobile), 720
+ * (Tablet) and 684px (Desktop) panels. A negative start, or a box past the
+ * panel's width, runs off the edge, as Figma's do.
+ */
+const TILES: { mobile: Box; tablet: Box; desktop: Box }[][] = [
+  [
+    { mobile: [-29, 99, 82, 143], tablet: [-63, 128, 179, 184], desktop: [-60, 160, 170, 230] },
+    { mobile: [62, 55, 144, 161], tablet: [137, 70, 316, 208], desktop: [130, 88, 300, 260] },
+    { mobile: [62, 226, 68, 112], tablet: [137, 291, 149, 144], desktop: [130, 364, 142, 180] },
+    { mobile: [138, 226, 68, 112], tablet: [303, 291, 149, 144], desktop: [288, 364, 142, 180] },
+    { mobile: [214, 99, 134, 143], tablet: [469, 128, 295, 184], desktop: [446, 160, 280, 230] },
+  ],
+  [
+    { mobile: [-24, 99, 72, 143], tablet: [-53, 128, 158, 184], desktop: [-50, 160, 150, 230] },
+    { mobile: [58, 55, 144, 283], tablet: [126, 70, 316, 365], desktop: [120, 88, 300, 456] },
+    { mobile: [211, 99, 134, 143], tablet: [463, 128, 295, 184], desktop: [440, 160, 280, 230] },
+  ],
+]
+
+/** A breakpoint's box as the tile's custom properties. */
+function boxVars(prefix: string, [x, y, width, height]: Box): Record<string, string> {
+  return {
+    [`--hero-twin-${prefix}x`]: `${x}px`,
+    [`--hero-twin-${prefix}y`]: `${y}px`,
+    [`--hero-twin-${prefix}w`]: `${width}px`,
+    [`--hero-twin-${prefix}h`]: `${height}px`,
+  }
+}
+
+export interface HeroTwinPanelsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroTwinPanelsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The eight tile photos in Figma's order: the first panel's five, then the
+   * second panel's three. Photos past the eighth are not shown. None by
+   * default: `background` tiles on the `muted` panels.
+   * @default none: `background` placeholders
+   */
+  photos?: HeroTwinPanelsPhoto[]
+}
+
+export function HeroTwinPanels({ locale = "en", panels, photos, className, ...props }: HeroTwinPanelsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const items = panels ?? copy.panels
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background", className)} {...props}>
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="mx-auto flex w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] flex-col gap-4 p-4 [@container(min-width:48rem)]:gap-6 [@container(min-width:48rem)]:p-6 [@container(min-width:90rem)]:flex-row">
+        {items.map((panel, panelIndex) => {
+          const Heading = panelIndex === 0 ? "h1" : "h2"
+          // The first panel's tiles take the first five photos, the second's the next three.
+          const offset = TILES.slice(0, panelIndex).reduce((sum, tiles) => sum + tiles.length, 0)
+          return (
+            <div
+              key={panelIndex}
+              // Figma's panel height is a minimum: the copy sits where Figma puts it, and longer copy grows the panel.
+              className="relative flex min-h-[520px] min-w-0 flex-col overflow-hidden rounded-[2rem] bg-muted [@container(min-width:48rem)]:min-h-[620px] [@container(min-width:90rem)]:min-h-[852px] [@container(min-width:90rem)]:flex-1"
+            >
+              <div className="flex flex-col gap-1 px-5 pb-4 [@container(min-width:48rem)]:px-10 [@container(min-width:48rem)]:pb-9 [@container(min-width:90rem)]:pb-8 [@container(min-width:90rem)]:pe-7 [@container(min-width:90rem)]:ps-14">
+                <Heading
+                  id={panelIndex === 0 ? headingId : undefined}
+                  className="flex flex-col gap-1 text-3xl font-medium text-foreground [@container(min-width:48rem)]:text-4xl [@container(min-width:90rem)]:text-5xl"
+                >
+                  <span>{panel.title.start}</span>
+                  <span className="text-muted-foreground">{panel.title.accent}</span>
+                </Heading>
+                <p className="text-pretty text-sm text-muted-foreground [@container(min-width:90rem)]:max-w-80">{panel.description}</p>
+              </div>
+
+              {/*
+               * The tiles: a layer of Figma's panel width, centred. It comes
+               * after the copy in the source, so a screen reader reaches the
+               * title before the photos, and `order-first` draws it on top.
+               */}
+              <div className="relative order-first mx-auto h-[356px] w-[328px] shrink-0 [@container(min-width:48rem)]:h-[468px] [@container(min-width:48rem)]:w-[720px] [@container(min-width:90rem)]:h-[616px] [@container(min-width:90rem)]:w-[684px]">
+                {(TILES[panelIndex] ?? []).map((tile, tileIndex) => {
+                  const photo = photos?.[offset + tileIndex]
+                  return (
+                    <div
+                      key={tileIndex}
+                      style={{ ...boxVars("m", tile.mobile), ...boxVars("t", tile.tablet), ...boxVars("d", tile.desktop) } as React.CSSProperties}
+                      className={cn(
+                        "absolute overflow-hidden rounded-3xl bg-background",
+                        "start-[var(--hero-twin-mx)] top-[var(--hero-twin-my)] h-[var(--hero-twin-mh)] w-[var(--hero-twin-mw)]",
+                        "[@container(min-width:48rem)]:start-[var(--hero-twin-tx)] [@container(min-width:48rem)]:top-[var(--hero-twin-ty)] [@container(min-width:48rem)]:h-[var(--hero-twin-th)] [@container(min-width:48rem)]:w-[var(--hero-twin-tw)]",
+                        "[@container(min-width:90rem)]:start-[var(--hero-twin-dx)] [@container(min-width:90rem)]:top-[var(--hero-twin-dy)] [@container(min-width:90rem)]:h-[var(--hero-twin-dh)] [@container(min-width:90rem)]:w-[var(--hero-twin-dw)]"
+                      )}
+                    >
+                      {photo ? (
+                        <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+                      ) : null}
+                    </div>
+                  )
+                })}
+              </div>
+
+              {/* Figma draws a 48px `background` circle with a plus: top end on Mobile and Tablet, bottom end on Desktop. */}
+              <a
+                href={panel.action.href}
+                aria-label={panel.action.label}
+                className="absolute end-4 top-4 inline-flex size-12 items-center justify-center rounded-full bg-background text-foreground [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [@container(min-width:48rem)]:end-6 [@container(min-width:48rem)]:top-6 [@container(min-width:90rem)]:bottom-8 [@container(min-width:90rem)]:end-8 [@container(min-width:90rem)]:top-auto"
+              >
+                <Plus size={20} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+              </a>
+            </div>
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroTwinPanelsCopy = COPY

package/registry/blocks/hero-twin-panels/index.ts

@@ -0,0 +1,9 @@
+export {
+  HeroTwinPanels,
+  heroTwinPanelsCopy,
+  type HeroTwinPanelsAction,
+  type HeroTwinPanelsCopy,
+  type HeroTwinPanelsPanel,
+  type HeroTwinPanelsPhoto,
+  type HeroTwinPanelsProps,
+} from "./HeroTwinPanels"