@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/features-perforated-photo-strip/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesPerforatedPhotoStrip,
+  featuresPerforatedPhotoStripCopy,
+  type FeaturesPerforatedColumn,
+  type FeaturesPerforatedPhotoStripCopy,
+  type FeaturesPerforatedPhotoStripProps,
+} from "./FeaturesPerforatedPhotoStrip"

package/registry/blocks/features-photo-bento/FeaturesPhotoBento.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Workflow, Zap } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { FeaturesHeader, FeaturesPhotoSlot, FeaturesSection, Figures, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Photo Bento.
+ *
+ * A header row, the section header at the start and an outline Take the tour
+ * button at the end, over a bento of four cards in two rows: a photo card
+ * (the planning canvas) with a stat card, then a copy card with a second
+ * photo card (reporting). A photo card is the photo over a title and a line;
+ * the stat and copy cards each hold a 40px mark chip with their text at the
+ * bottom.
+ *
+ * Desktop sets 760px photo cards beside 464px cards, in two rows that
+ * mirror each other. Tablet sets the four two across, equal. Mobile stacks
+ * them, and the button takes the full width under the header.
+ *
+ * Content limits: a card's title up to 36 characters and its line up to 100.
+ * The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesBentoText {
+  /** The card's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+}
+
+export interface FeaturesPhotoBentoStat {
+  /** The large figure, such as "4.2×". */
+  figure: React.ReactNode
+  /** What it measures. */
+  label: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+}
+
+export interface FeaturesPhotoBentoCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The header button's label. */
+  tour: string
+  /** The first photo card. */
+  planning: FeaturesBentoText
+  /** The stat card. */
+  stat: FeaturesPhotoBentoStat
+  /** The copy card. */
+  rules: FeaturesBentoText
+  /** The second photo card. */
+  reporting: FeaturesBentoText
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesPhotoBentoCopy> = {
+  en: {
+    eyebrow: "INSIDE THE PRODUCT",
+    heading: "A workspace shaped like your team",
+    tour: "Take the tour",
+    planning: { title: "Shared planning canvas", description: "Everyone edits the same board — roadmap, sprint and backlog stay in step automatically." },
+    stat: { figure: "4.2×", label: "faster hand-offs", description: "Measured across 900 teams in their first quarter on the platform." },
+    rules: { title: "Rules instead of reminders", description: "Build the routing once and the right person is notified every time, without anyone chasing." },
+    reporting: { title: "Reporting for every audience", description: "One source of truth, rendered as a board for the team and a summary for the exec review." },
+  },
+  ar: {
+    eyebrow: "داخل المنتج",
+    heading: "مساحة عمل تتشكّل حسب فريقك",
+    tour: "ابدأ الجولة",
+    planning: { title: "لوحة تخطيط مشتركة", description: "الجميع يحرّرون اللوحة نفسها، وتبقى خارطة الطريق والسبرنت وقائمة الأعمال متوافقة تلقائيًا." },
+    stat: { figure: "4.2×", label: "أسرع في التسليم", description: "مقيسة عبر 900 فريق في ربعهم الأول على المنصّة." },
+    rules: { title: "قواعد بدل التذكيرات", description: "اضبط التوجيه مرة واحدة ليصل الإشعار إلى الشخص المناسب في كل مرة، دون أن يلاحق أحد أحدًا." },
+    reporting: { title: "تقارير تناسب كل جمهور", description: "مصدر واحد للحقيقة، يُعرض كلوحة للفريق وكملخّص لمراجعة الإدارة التنفيذية." },
+  },
+}
+
+export interface FeaturesPhotoBentoProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesPhotoBentoCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** The two photos, the planning card's first. A `muted` placeholder shows for any left out. */
+  photos?: FeaturesPhoto[]
+  /** Where the header button goes. Without it, the button calls `onTour`. */
+  tourHref?: string
+  /** Called when the header button is pressed and has no `tourHref`. */
+  onTour?: () => void
+}
+
+function PhotoCard({ photo, text, className }: { photo?: FeaturesPhoto; text: FeaturesBentoText; className?: string }) {
+  return (
+    <li className={cn("group flex min-w-0 flex-col overflow-hidden rounded-lg border border-border bg-card text-card-foreground", className)}>
+      <FeaturesPhotoSlot photo={photo} className="aspect-[1.547] shrink-0 [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:h-[260px]" imageClassName="motion-safe:transition-transform motion-safe:duration-300 motion-safe:group-hover:scale-[1.03]" />
+      <div className="flex flex-col gap-1.5 p-6">
+        <h3 className="text-lg font-semibold text-card-foreground">{text.title}</h3>
+        <p className="text-sm text-muted-foreground">{text.description}</p>
+      </div>
+    </li>
+  )
+}
+
+export function FeaturesPhotoBento({ locale = "en", eyebrow, heading, tour, planning, stat, rules, reporting, photos, tourHref, onTour, className, ...props }: FeaturesPhotoBentoProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const label = tour ?? copy.tour
+  const buttonClass = "w-full shrink-0 [@container(min-width:48rem)]:w-auto"
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" className={className} {...props}>
+      <div className="flex flex-col gap-4 [@container(min-width:48rem)]:flex-row [@container(min-width:48rem)]:items-end [@container(min-width:48rem)]:justify-between [@container(min-width:48rem)]:gap-4 [@container(min-width:72rem)]:gap-16">
+        <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} className="flex-1" />
+        {tourHref ? (
+          <a href={tourHref} className={buttonVariants({ variant: "outline", size: "md", className: buttonClass })}>
+            {label}
+          </a>
+        ) : (
+          <Button type="button" variant="outline" size="md" onClick={onTour} className={buttonClass}>
+            {label}
+          </Button>
+        )}
+      </div>
+      <ul role="list" className="grid grid-cols-1 gap-6 [@container(min-width:48rem)]:flex [@container(min-width:48rem)]:flex-wrap [@container(min-width:72rem)]:grid [@container(min-width:72rem)]:grid-cols-[464fr_272fr_464fr]">
+        <PhotoCard photo={photos?.[0]} text={planning ?? copy.planning} className="[@container(min-width:48rem)]:w-[calc((100%-24px)*285/616)] [@container(min-width:72rem)]:w-auto [@container(min-width:72rem)]:col-span-2" />
+        <li className="flex min-w-0 flex-col justify-between gap-0 [@container(min-width:48rem)]:gap-4 rounded-lg bg-secondary p-6 text-secondary-foreground [@container(min-width:48rem)]:w-[calc((100%-24px)*331/616)] [@container(min-width:72rem)]:w-auto [@container(min-width:72rem)]:col-start-3">
+          <span className="flex size-10 items-center justify-center rounded-md bg-card text-card-foreground">
+            <Zap size={18} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+          </span>
+          <div className="flex flex-col gap-1.5">
+            <p className="text-3xl font-semibold [@container(min-width:72rem)]:text-5xl text-secondary-foreground">
+              <Figures>{(stat ?? copy.stat).figure}</Figures>
+            </p>
+            <p className="text-base font-medium text-secondary-foreground">{(stat ?? copy.stat).label}</p>
+            <p className="text-sm text-muted-foreground">
+              <Figures>{(stat ?? copy.stat).description}</Figures>
+            </p>
+          </div>
+        </li>
+        <li className="flex min-w-0 flex-col justify-between gap-0 [@container(min-width:48rem)]:gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground [@container(min-width:48rem)]:w-[calc((100%-24px)*332/616)] [@container(min-width:72rem)]:w-auto [@container(min-width:72rem)]:col-start-1">
+          <span className="flex size-10 items-center justify-center rounded-md bg-secondary text-secondary-foreground">
+            <Workflow size={18} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+          </span>
+          <div className="flex flex-col gap-1.5">
+            <h3 className="text-lg font-semibold text-card-foreground">{(rules ?? copy.rules).title}</h3>
+            <p className="text-sm text-muted-foreground">{(rules ?? copy.rules).description}</p>
+          </div>
+        </li>
+        <PhotoCard photo={photos?.[1]} text={reporting ?? copy.reporting} className="[@container(min-width:48rem)]:w-[calc((100%-24px)*284/616)] [@container(min-width:72rem)]:w-auto [@container(min-width:72rem)]:col-span-2" />
+      </ul>
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresPhotoBentoCopy = COPY

package/registry/blocks/features-photo-bento/index.ts

@@ -0,0 +1,8 @@
+export {
+  FeaturesPhotoBento,
+  featuresPhotoBentoCopy,
+  type FeaturesBentoText,
+  type FeaturesPhotoBentoCopy,
+  type FeaturesPhotoBentoProps,
+  type FeaturesPhotoBentoStat,
+} from "./FeaturesPhotoBento"

package/registry/blocks/features-photo-carousel/FeaturesPhotoCarousel.tsx

@@ -0,0 +1,249 @@
+"use client"
+
+import * as React from "react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { Button } from "../../ui/button/button"
+import { CarouselDots } from "../../ui/carousel/carousel"
+import { FeaturesHeader, FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Photo Carousel.
+ *
+ * A header row, the section header at the start and two outline icon buttons
+ * (Secondary, md, rounded: previous and next) at the end (under the heading on
+ * Tablet and Mobile), then one slide at a
+ * time inside a 1px `border` frame, then the dot stepper. A slide is a photo
+ * and a `secondary` panel: a solid Primary counter Badge ("01 / 04"), a 30px
+ * title, a 16px line and a primary link with an arrow.
+ *
+ * Desktop sets the photo (60%) and the panel side by side at 460px; Tablet
+ * and Mobile stack them. Only the visitor advances it: there is no autoplay,
+ * no timer and no loop. The previous and next buttons disable at the ends,
+ * the dots step to any slide, and a change fades the slide in 300ms (at once
+ * under reduced motion). All slides sit in one cell, so the height never
+ * jumps between slides.
+ *
+ * Content limits: a slide's title up to 40 characters, its line up to 190
+ * and its link up to 24. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesCarouselSlide {
+  /** Keys the slide. */
+  id: string
+  /** The slide's title. */
+  title: React.ReactNode
+  /** The line under it. */
+  description: React.ReactNode
+  /** The link's label. */
+  linkLabel: React.ReactNode
+  /** Where the link goes. Without it, the link calls `onLinkClick` with the slide's `id`. */
+  href?: string
+  /** The slide's photo. */
+  image?: FeaturesPhoto
+}
+
+export interface FeaturesPhotoCarouselCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The slides, in order. */
+  slides: FeaturesCarouselSlide[]
+  /** Names the previous button. */
+  previousLabel: string
+  /** Names the next button. */
+  nextLabel: string
+  /** Names the slide group for assistive technology. */
+  carouselLabel: string
+}
+
+/** Figma's copy for the first slide, English and Arabic; the other three are written for the code, in the same voice. */
+const COPY: Record<FeaturesLocale, FeaturesPhotoCarouselCopy> = {
+  en: {
+    eyebrow: "FEATURE TOUR",
+    heading: "See it on a real project",
+    previousLabel: "Previous slide",
+    nextLabel: "Next slide",
+    carouselLabel: "Feature tour",
+    slides: [
+      {
+        id: "templates",
+        title: "Every project starts from a template",
+        description: "Pick a shape that matches the work — launch, sprint, campaign, intake — and the views, fields and automations come with it. Adjust once and every future project inherits the change.",
+        linkLabel: "Browse templates",
+      },
+      {
+        id: "views",
+        title: "Views that follow the work",
+        description: "Switch between board, table, timeline and chart without rebuilding anything. Every view reads the same records, so a change in one shows up in all of them.",
+        linkLabel: "See the views",
+      },
+      {
+        id: "automations",
+        title: "Automations you can read",
+        description: "Each rule is a sentence: when this happens, do that. Turn one on for a single project or roll it out to every team at once.",
+        linkLabel: "Explore automations",
+      },
+      {
+        id: "reports",
+        title: "Reports without exports",
+        description: "Build a dashboard from the same data the team works in. Share it as a live link and it stays current without anyone refreshing a spreadsheet.",
+        linkLabel: "Browse reports",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "جولة في الميزات",
+    heading: "شاهده على مشروع حقيقي",
+    previousLabel: "الشريحة السابقة",
+    nextLabel: "الشريحة التالية",
+    carouselLabel: "جولة في الميزات",
+    slides: [
+      {
+        id: "templates",
+        title: "كل مشروع يبدأ من قالب",
+        description: "اختر شكلًا يناسب العمل، سواء إطلاق أو سبرنت أو حملة أو استقبال طلبات، فتأتي معه العروض والحقول والأتمتة. عدّله مرة واحدة ليرث كل مشروع لاحق التغيير.",
+        linkLabel: "تصفّح القوالب",
+      },
+      {
+        id: "views",
+        title: "عروض تتبع العمل",
+        description: "بدّل بين اللوحة والجدول والجدول الزمني والرسم البياني دون إعادة بناء أي شيء. كل عرض يقرأ السجلات نفسها، فيظهر التغيير في أحدها في جميعها.",
+        linkLabel: "شاهد العروض",
+      },
+      {
+        id: "automations",
+        title: "أتمتة يمكنك قراءتها",
+        description: "كل قاعدة جملة واحدة: عندما يحدث هذا، افعل ذلك. فعّلها لمشروع واحد أو عمّمها على كل الفرق دفعة واحدة.",
+        linkLabel: "استكشف الأتمتة",
+      },
+      {
+        id: "reports",
+        title: "تقارير دون تصدير",
+        description: "ابنِ لوحة معلومات من البيانات نفسها التي يعمل عليها الفريق. شاركها برابط حي فتبقى محدَّثة دون أن يحدّث أحد جدول بيانات.",
+        linkLabel: "تصفّح التقارير",
+      },
+    ],
+  },
+}
+
+export interface FeaturesPhotoCarouselProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "defaultValue">, Partial<FeaturesPhotoCarouselCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** The shown slide, when you control it. */
+  index?: number
+  /** The slide shown first, when you do not. */
+  defaultIndex?: number
+  /** Called with the new slide's index when a button or a dot changes it. */
+  onIndexChange?: (index: number) => void
+  /** Called with the slide's `id` when its link is pressed and the slide has no `href`. */
+  onLinkClick?: (id: string) => void
+}
+
+export function FeaturesPhotoCarousel({
+  locale = "en",
+  eyebrow,
+  heading,
+  slides,
+  previousLabel,
+  nextLabel,
+  carouselLabel,
+  index: indexProp,
+  defaultIndex = 0,
+  onIndexChange,
+  onLinkClick,
+  className,
+  ...props
+}: FeaturesPhotoCarouselProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = slides ?? copy.slides
+  const [inner, setInner] = React.useState(defaultIndex)
+  const index = Math.min(Math.max(indexProp ?? inner, 0), Math.max(list.length - 1, 0))
+  const go = (next: number) => {
+    const clamped = Math.min(Math.max(next, 0), list.length - 1)
+    if (clamped === index) return
+    if (indexProp === undefined) setInner(clamped)
+    onIndexChange?.(clamped)
+  }
+  const count = list.length
+  const linkClass = "group/link inline-flex items-center gap-2 self-start text-sm font-medium text-primary hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  const arrow = (
+    <ArrowRight
+      size={16}
+      strokeWidth={1.5}
+      absoluteStrokeWidth
+      aria-hidden
+      className="[&:dir(rtl)]:-scale-x-100 motion-safe:transition-transform motion-safe:group-hover/link:translate-x-0.5 motion-safe:rtl:group-hover/link:-translate-x-0.5"
+    />
+  )
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" contentClassName="gap-12" className={className} {...props}>
+      <div className="flex flex-col gap-4 [@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" />
+        <div className="flex shrink-0 gap-2">
+          <Button type="button" variant="outline" tone="secondary" size="icon-md" radius="rounded" aria-label={previousLabel ?? copy.previousLabel} disabled={index <= 0} onClick={() => go(index - 1)}>
+            <ArrowLeft aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+          </Button>
+          <Button type="button" variant="outline" tone="secondary" size="icon-md" radius="rounded" aria-label={nextLabel ?? copy.nextLabel} disabled={index >= count - 1} onClick={() => go(index + 1)}>
+            <ArrowRight aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+          </Button>
+        </div>
+      </div>
+
+      {count > 0 ? (
+        <div role="group" aria-roledescription="carousel" aria-label={carouselLabel ?? copy.carouselLabel} className="flex flex-col items-center gap-12">
+          <div aria-live="polite" className="grid w-full overflow-hidden rounded-lg border border-border">
+            {list.map((slide, position) => {
+              const active = position === index
+              return (
+                <div
+                  key={slide.id}
+                  role="group"
+                  aria-roledescription="slide"
+                  aria-label={`${position + 1} / ${count}`}
+                  aria-hidden={active ? undefined : true}
+                  {...(active ? {} : ({ inert: "" } as object))}
+                  className={cn(
+                    "col-start-1 row-start-1 flex flex-col motion-safe:transition-opacity motion-safe:duration-300 [@container(min-width:72rem)]:flex-row",
+                    active ? "opacity-100" : "pointer-events-none opacity-0"
+                  )}
+                >
+                  <FeaturesPhotoSlot photo={slide.image} className="aspect-[294/182] w-full shrink-0 [@container(min-width:48rem)]:aspect-[638/393] [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:min-h-[458px] [@container(min-width:72rem)]:w-[60%]" />
+                  <div className="flex flex-1 flex-col items-start justify-center gap-5 bg-secondary p-6 [@container(min-width:48rem)]:p-10 [@container(min-width:72rem)]:p-12">
+                    <Badge variant="solid" tone="primary" size="sm" radius="rounded">
+                      <bdi dir="ltr">{`${String(position + 1).padStart(2, "0")} / ${String(count).padStart(2, "0")}`}</bdi>
+                    </Badge>
+                    <h3 className="text-2xl leading-8 font-semibold text-secondary-foreground [@container(min-width:48rem)]:text-3xl [@container(min-width:48rem)]:leading-10">{slide.title}</h3>
+                    <p className="text-base text-muted-foreground">{slide.description}</p>
+                    {slide.href ? (
+                      <a href={slide.href} className={linkClass} tabIndex={active ? undefined : -1}>
+                        {slide.linkLabel}
+                        {arrow}
+                      </a>
+                    ) : (
+                      <button type="button" onClick={() => onLinkClick?.(slide.id)} className={linkClass} tabIndex={active ? undefined : -1}>
+                        {slide.linkLabel}
+                        {arrow}
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          <CarouselDots count={count} activeIndex={index} onActiveIndexChange={go} />
+        </div>
+      ) : 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 featuresPhotoCarouselCopy = COPY

package/registry/blocks/features-photo-carousel/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesPhotoCarousel,
+  featuresPhotoCarouselCopy,
+  type FeaturesCarouselSlide,
+  type FeaturesPhotoCarouselCopy,
+  type FeaturesPhotoCarouselProps,
+} from "./FeaturesPhotoCarousel"

package/registry/blocks/features-photo-collage/FeaturesPhotoCollage.tsx

@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Photo Collage.
+ *
+ * A rounded `secondary` board (14px) holding seven photos scattered at slight
+ * angles (-4° to 4°) with a `card` caption card laid over the middle, then
+ * three short columns under it. A column is a 16px title over a 14px line.
+ *
+ * Desktop scatters seven photos across the board, positioned as a share of
+ * its size so the scatter scales with the block. In Arabic the positions stay
+ * and each tilt turns the other way, as Figma's Arabic variant does. Tablet lays six photos in
+ * two columns with the caption below; Mobile lays four in one column.
+ * Photos hold still; they never animate.
+ *
+ * Content limits: the caption's title up to 36 characters and its line up to
+ * 130, a column's title up to 26 and its line up to 130. The other limits
+ * are in the block's documentation page.
+ */
+
+export interface FeaturesCollageColumn {
+  /** Keys the column. */
+  id: string
+  /** The column's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+}
+
+export interface FeaturesPhotoCollageCopy {
+  /** The caption card's title. */
+  captionTitle: React.ReactNode
+  /** The caption card's line. */
+  captionDescription: React.ReactNode
+  /** The columns under the board, in order. */
+  columns: FeaturesCollageColumn[]
+}
+
+/**
+ * Where each photo sits on the Desktop board (1248 × 520), as a share of the
+ * board, and how it is turned (-4° to 4°). Written out as whole classes so
+ * Tailwind finds them.
+ */
+const SCATTER = [
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[3.21%] [@container(min-width:72rem)]:top-[11.54%] [@container(min-width:72rem)]:w-[19.23%] [@container(min-width:72rem)]:h-[32.69%] [@container(min-width:72rem)]:rotate-[-4deg] [@container(min-width:72rem)]:rtl:rotate-[4deg]",
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[20.03%] [@container(min-width:72rem)]:top-[5.77%] [@container(min-width:72rem)]:w-[16.83%] [@container(min-width:72rem)]:h-[50%] [@container(min-width:72rem)]:rotate-[3deg] [@container(min-width:72rem)]:rtl:rotate-[-3deg]",
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[24.04%] [@container(min-width:72rem)]:top-[61.54%] [@container(min-width:72rem)]:w-[18.43%] [@container(min-width:72rem)]:h-[30.77%] [@container(min-width:72rem)]:rotate-[-2deg] [@container(min-width:72rem)]:rtl:rotate-[2deg]",
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[38.46%] [@container(min-width:72rem)]:top-[17.31%] [@container(min-width:72rem)]:w-[24.04%] [@container(min-width:72rem)]:h-[38.46%] [@container(min-width:72rem)]:rotate-[2deg] [@container(min-width:72rem)]:rtl:rotate-[-2deg]",
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[64.1%] [@container(min-width:72rem)]:top-[7.69%] [@container(min-width:72rem)]:w-[16.83%] [@container(min-width:72rem)]:h-[53.85%] [@container(min-width:72rem)]:rotate-[-3deg] [@container(min-width:72rem)]:rtl:rotate-[3deg]",
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[64.9%] [@container(min-width:72rem)]:top-[65.38%] [@container(min-width:72rem)]:w-[20.03%] [@container(min-width:72rem)]:h-[30.77%] [@container(min-width:72rem)]:rotate-[4deg] [@container(min-width:72rem)]:rtl:rotate-[-4deg]",
+  "[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:aspect-auto [@container(min-width:72rem)]:left-[83.33%] [@container(min-width:72rem)]:top-[23.08%] [@container(min-width:72rem)]:w-[15.22%] [@container(min-width:72rem)]:h-[48.08%] [@container(min-width:72rem)]:rotate-[2deg] [@container(min-width:72rem)]:rtl:rotate-[-2deg]",
+] as const
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesPhotoCollageCopy> = {
+  en: {
+    captionTitle: "Built by a team that ships on it",
+    captionDescription: "Every release is planned, reviewed and shipped inside the product itself — the roadmap you see is the one we work from.",
+    columns: [
+      { id: "model", title: "One model, many views", description: "Boards, tables, timelines and charts all read the same records — switching view never means migrating data." },
+      { id: "teams", title: "Made for real teams", description: "Guests, contractors and part-time reviewers all fit without a licence conversation or a shared login." },
+      { id: "leave", title: "Yours to leave with", description: "A complete export of every object, attachment and revision is one click away, on every plan." },
+    ],
+  },
+  ar: {
+    captionTitle: "بناه فريق يستخدمه في عمله",
+    captionDescription: "كل إصدار يُخطَّط ويُراجَع ويُطلَق داخل المنتج نفسه، وخارطة الطريق التي تراها هي التي نعمل بها.",
+    columns: [
+      { id: "model", title: "نموذج واحد وعروض متعددة", description: "اللوحات والجداول والجداول الزمنية والرسوم البيانية تقرأ السجلات نفسها، وتبديل العرض لا يعني ترحيل البيانات." },
+      { id: "teams", title: "مصمَّم لفرق حقيقية", description: "الضيوف والمتعاقدون والمراجعون بدوام جزئي يتسع لهم الاستفادة من هذه الميزة دون الحاجة إلى محادثة ترخيص أو تسجيل دخول مشترك." },
+      { id: "leave", title: "لك أن تأخذها معك", description: "أصبح تصدير كل عنصر ومرفق ومراجعة بالكامل متاحًا بنقرة واحدة، في كل خطة." },
+    ],
+  },
+}
+
+export interface FeaturesPhotoCollageProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesPhotoCollageCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** Up to seven photos, in Figma's order. Placeholders show for any left out; Tablet draws the first six and Mobile the first four. */
+  photos?: FeaturesPhoto[]
+  /** The section's heading for assistive technology: the caption's title by default. */
+  heading?: React.ReactNode
+}
+
+export function FeaturesPhotoCollage({ locale = "en", captionTitle, captionDescription, columns, photos, heading, className, ...props }: FeaturesPhotoCollageProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = columns ?? copy.columns
+  const caption = (
+    <div className="flex flex-col gap-2 rounded-lg bg-card p-6 text-card-foreground shadow-md">
+      <h2 id={headingId} className="text-xl font-semibold text-card-foreground">
+        {heading ?? captionTitle ?? copy.captionTitle}
+      </h2>
+      <p className="text-sm text-muted-foreground">{captionDescription ?? copy.captionDescription}</p>
+    </div>
+  )
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" contentClassName="gap-12" className={className} {...props}>
+      <div className="contents [@container(min-width:72rem)]:relative [@container(min-width:72rem)]:block">
+      <div className="relative rounded-2xl bg-secondary p-4 [@container(min-width:72rem)]:aspect-[1248/520] [@container(min-width:72rem)]:p-0">
+        <div className="grid grid-cols-1 gap-4 [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:72rem)]:block">
+          {SCATTER.map((spot, index) => (
+            <FeaturesPhotoSlot
+              key={index}
+              photo={photos?.[index]}
+              className={cn(
+                "aspect-[264/180] w-full rounded-lg shadow-md [@container(min-width:48rem)]:aspect-[296/200]",
+                index >= 4 && "hidden [@container(min-width:48rem)]:block",
+                index >= 6 && "[@container(min-width:48rem)]:hidden [@container(min-width:72rem)]:block",
+                spot
+              )}
+            />
+          ))}
+        </div>
+      </div>
+        <div className="[@container(min-width:72rem)]:absolute [@container(min-width:72rem)]:left-[33.17%] [@container(min-width:72rem)]:top-[57.7%] [@container(min-width:72rem)]:z-10 [@container(min-width:72rem)]:w-[33.65%]">
+          {caption}
+        </div>
+      </div>
+      {list.length > 0 ? (
+        <ul role="list" className="grid grid-cols-1 gap-16 [@container(min-width:48rem)]:grid-cols-3">
+          {list.map((column) => (
+            <li key={column.id} className="flex min-w-0 flex-col gap-2">
+              <h3 className="text-base font-semibold text-foreground">{column.title}</h3>
+              <p className="text-sm text-muted-foreground">{column.description}</p>
+            </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 featuresPhotoCollageCopy = COPY

package/registry/blocks/features-photo-collage/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesPhotoCollage,
+  featuresPhotoCollageCopy,
+  type FeaturesCollageColumn,
+  type FeaturesPhotoCollageCopy,
+  type FeaturesPhotoCollageProps,
+} from "./FeaturesPhotoCollage"