@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/social-proof-proof-bento/SocialProofProofBento.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import * as React from "react"
+import { Play, X } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import {
+  Isolated,
+  SocialProofAuthor,
+  SocialProofPhoto,
+  SocialProofQuote,
+  SocialProofSection,
+  SocialProofStars,
+  useVideoPlayback,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Proof Bento.
+ *
+ * A header with a `See all case studies` button (Ghost, xs) at its end, over
+ * a bento of five tiles in two rows: a wide `primary` tint holding the
+ * featured quote and its author beside a `primary` stat tile (figure, label,
+ * company); then a `warning` rating tile (five stars, 4.9, the review count),
+ * a `card` quote tile with its author, and a video tile, a photo with a play
+ * button and a pill saying whose story it is and how long. Phones stack the
+ * five tiles in one column.
+ *
+ * Motion (Figma's ⚡ Motion note): the play button on the video tile starts the
+ * story only when the reader clicks or taps it: no hover preview, no autoplay
+ * and no pulse. On click the tile swaps its photo for the video with a fade
+ * (fadeIn, 180ms). The rest of the bento stays still. Reduced motion: opacity
+ * only, 120ms. In RTL the bento mirrors, so on Desktop and Tablet the video
+ * tile moves to the opposite end of its row; on Mobile it stays last. The play
+ * glyph is not mirrored.
+ *
+ * Figma shows the poster only; the playing state, with the video's own
+ * controls and a button that closes it, is the block's. The video plays when
+ * you pass `videoSrc`.
+ */
+
+export interface SocialProofProofBentoCopy {
+  /** Up to 46 characters in English, 40 in Arabic. */
+  heading: React.ReactNode
+  /** Up to 25 characters in English, 26 in Arabic. */
+  button: React.ReactNode
+  /** The wide tile. Its quote is up to 290 characters in English, 284 in Arabic. */
+  featured: { quote: React.ReactNode; author: SocialProofPerson }
+  /** The figure is up to 5 characters in English, 9 in Arabic; the label up to 60 in English, 56 in Arabic; the company up to 20. */
+  stat: { value: string; label: React.ReactNode; company: React.ReactNode }
+  rating: { value: string; label: React.ReactNode }
+  /** The card tile. Its quote is up to 154 characters in English, 136 in Arabic. */
+  quote: { quote: React.ReactNode; author: SocialProofPerson }
+  /** The pill on the video tile: a short title and a duration, one line, about 30 characters in English and 24 in Arabic. */
+  videoLabel: React.ReactNode
+  /** The key in `photos` for the video tile's poster. */
+  posterId: string
+}
+
+const p = (id: string, name: string, role: string): SocialProofPerson => ({ id, name, role })
+
+const COPY: Record<SocialProofLocale, SocialProofProofBentoCopy> = {
+  en: {
+    heading: "Every kind of proof, one glance",
+    button: "See all case studies",
+    featured: {
+      quote: "“We consolidated three design tools and an entire QA checklist into one system. Fasla is the rare platform both our brand team and our engineers call theirs.”",
+      author: p("fahad-salem", "Fahad Salem", "Brand Director, Arvenna Bank"),
+    },
+    stat: { value: "6×", label: "faster brand theming since switching", company: "COBALT SYSTEMS" },
+    rating: { value: "4.9", label: "Average across 812 verified reviews" },
+    quote: { quote: "“Zero regressions in the migration quarter. QA signed off early.”", author: p("khalid-saad", "Khalid Saad", "Frontend Lead, Atlas Freight") },
+    videoLabel: "Watch the story · 2:14",
+    posterId: "proof-bento-video",
+  },
+  ar: {
+    heading: "كل أشكال الإثبات في نظرة واحدة",
+    button: "اعرض كل دراسات الحالة",
+    featured: {
+      quote: "«دمجنا ثلاث أدوات تصميم وقائمة فحص جودة كاملة في نظام واحد. وفاصلة من المنصات النادرة التي يعدّها فريق العلامة والمهندسون أداتهم.»",
+      author: p("fahad-salem", "فهد سالم", "مدير العلامة التجارية، بنك أرفينا"),
+    },
+    stat: { value: "6×", label: "أسرع في تطبيق سمات العلامة منذ الانتقال", company: "كوبالت سيستمز" },
+    rating: { value: "4.9", label: "متوسط 812 تقييمًا موثّقًا" },
+    quote: { quote: "«لا تراجعات في ربع الانتقال، ووافق فريق الجودة مبكرًا.»", author: p("khalid-saad", "خالد سعد", "قائد الواجهات الأمامية، أطلس فريت") },
+    videoLabel: "شاهد القصة، 2:14",
+    posterId: "proof-bento-video",
+  },
+}
+
+export interface SocialProofProofBentoProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<SocialProofProofBentoCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id, and the video tile's poster by its `posterId`. */
+  photos?: SocialProofPhotos
+  /** The video the tile plays. Without it the tile is a still. */
+  videoSrc?: string
+  /** The file's media type, such as "video/mp4". */
+  videoType?: string
+  /** Where the header button goes. */
+  href?: string
+}
+
+export function SocialProofProofBento({
+  locale = "en",
+  heading,
+  button,
+  featured,
+  stat,
+  rating,
+  quote,
+  videoLabel,
+  posterId,
+  photos,
+  videoSrc,
+  videoType,
+  href = "#",
+  className,
+  ...props
+}: SocialProofProofBentoProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const f = featured ?? copy.featured
+  const s = stat ?? copy.stat
+  const r = rating ?? copy.rating
+  const q = quote ?? copy.quote
+  const { videoRef, playRef, started, play, stop, labels, available } = useVideoPlayback(videoSrc, locale)
+  const label = videoLabel ?? copy.videoLabel
+  const poster = photos?.[posterId ?? copy.posterId]
+  const videoId = React.useId()
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="items-stretch gap-10" {...props}>
+      <header className="flex w-full items-center justify-between gap-6 [@container(min-width:64rem)]:gap-12">
+        <h2 id={headingId} className="text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+          {heading ?? copy.heading}
+        </h2>
+        <a href={href} className={buttonVariants({ variant: "ghost", size: "xs", className: "shrink-0" })}>
+          {button ?? copy.button}
+        </a>
+      </header>
+      <div className="flex w-full flex-col gap-6">
+        <div className="flex flex-col gap-6 [@container(min-width:40rem)]:flex-row">
+          <figure className="m-0 flex min-w-0 flex-col justify-between gap-6 rounded-xl bg-primary/10 p-8 [@container(min-width:40rem)]:min-h-[220px] [@container(min-width:40rem)]:flex-[2] [@container(min-width:64rem)]:min-h-[280px] [@container(min-width:64rem)]:flex-[784]">
+            <SocialProofQuote quote={f.quote} className="text-lg font-medium text-foreground [@container(min-width:64rem)]:text-xl" />
+            <SocialProofAuthor person={f.author} photos={photos} />
+          </figure>
+          <div className="flex flex-col justify-between gap-6 rounded-xl bg-primary p-8 text-primary-foreground [@container(min-width:40rem)]:flex-1 [@container(min-width:64rem)]:flex-[408]">
+            <p className="flex flex-col gap-1">
+              <span className="text-6xl font-semibold">
+                <Isolated>{s.value}</Isolated>
+              </span>
+              <span className="text-base">
+                <Isolated>{s.label}</Isolated>
+              </span>
+            </p>
+            <p className="text-xs font-medium">
+              <bdi>{s.company}</bdi>
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-6 [@container(min-width:40rem)]:flex-row [&>*]:min-w-0 [&>*]:flex-1">
+          <div className="flex min-h-[240px] flex-col items-center justify-center gap-3 rounded-xl bg-warning/10 p-6 text-center">
+            <SocialProofStars locale={locale} className="[&_svg]:size-6" />
+            <p className="text-5xl font-semibold text-foreground">
+              <Isolated>{r.value}</Isolated>
+            </p>
+            <p className="text-sm text-muted-foreground">
+              <Isolated>{r.label}</Isolated>
+            </p>
+          </div>
+          <figure className="m-0 flex min-h-[240px] flex-col justify-between gap-6 rounded-xl border border-border bg-card p-6">
+            <SocialProofQuote quote={q.quote} className="text-base text-foreground" />
+            <SocialProofAuthor person={q.author} photos={photos} />
+          </figure>
+          <div className={cn("relative isolate flex min-h-[240px] flex-col items-center justify-between overflow-hidden rounded-xl bg-muted p-5", started && "bg-background-inverse")} role="group" aria-labelledby={videoId}>
+            {started && videoSrc ? (
+              <video ref={videoRef} controls playsInline preload="metadata" aria-labelledby={videoId} className="absolute inset-0 -z-10 size-full object-contain">
+                <source src={videoSrc} type={videoType} />
+              </video>
+            ) : (
+              <SocialProofPhoto src={poster} className="absolute inset-0 -z-10" />
+            )}
+            {started ? (
+              <Button type="button" variant="secondary" size="icon-sm" radius="rounded" aria-label={labels.stop} onClick={stop} className="self-end">
+                <X aria-hidden />
+              </Button>
+            ) : (
+              <>
+                <div className="flex flex-1 items-center justify-center">
+                  <Button ref={playRef} type="button" variant="secondary" size="icon-md" radius="rounded" aria-label={labels.play} aria-describedby={videoId} aria-disabled={available ? undefined : true} onClick={play}>
+                    <Play aria-hidden fill="currentColor" />
+                  </Button>
+                </div>
+                <p id={videoId} className="whitespace-nowrap rounded-lg bg-background px-2.5 py-1.5 text-xs font-medium text-foreground">
+                  <Isolated>{label}</Isolated>
+                </p>
+              </>
+            )}
+            {started ? (
+              <p id={videoId} className="sr-only">
+                {label}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofProofBentoCopy = COPY

package/registry/blocks/social-proof-proof-bento/index.ts

@@ -0,0 +1,6 @@
+export {
+  SocialProofProofBento,
+  socialProofProofBentoCopy,
+  type SocialProofProofBentoCopy,
+  type SocialProofProofBentoProps,
+} from "./SocialProofProofBento"

package/registry/blocks/social-proof-spotlight-carousel/SocialProofSpotlightCarousel.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { CarouselDots } from "../../ui/carousel/carousel"
+import {
+  Isolated,
+  SocialProofQuote,
+  SocialProofSection,
+  SocialProofStepper,
+  stepKeys,
+  useStepper,
+  useSwipeStep,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Spotlight Carousel.
+ *
+ * One quote at a time, centred in 2XL (XL on phones), the author under it
+ * with the Avatar drawn at 56px, previous and next arrows (Icon Button,
+ * Outline xs) either side, and the Carousel dots under it. On phones the
+ * arrows drop below the quote, either side of the dots.
+ *
+ * Motion (Figma's ⚡ Motion note): arrows and dots step through four quotes,
+ * one at a time. Manual only: no autoplay, no timer, and paging stops at the
+ * first and last quote instead of wrapping, so previous is disabled on the
+ * first. On change the outgoing quote fades out and the new quote, avatar and
+ * name slide up 10px with a fade (slideUp, 180ms); the active dot stretches
+ * to a pill. The arrow keys move between quotes; Tab reaches the arrows and
+ * the dots. On phones, swiping the quote also steps. Reduced motion: opacity
+ * only, 120ms. In RTL the first quote is the rightmost dot, and the left
+ * arrow goes to the next quote.
+ *
+ * Figma shows the first quote. The other three are quotes the same people
+ * give elsewhere in the set: Tariq Zaki's from Centered Logo Spotlight, Ziad
+ * Karam's from Overlay Photo Quote and Yousef Amin's from Dark Editorial
+ * Split.
+ */
+
+export interface SocialProofSpotlightCarouselItem {
+  /** Up to 164 characters in English, 133 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+}
+
+export interface SocialProofSpotlightCarouselCopy {
+  /** Names the carousel for assistive tech. */
+  label: string
+  /** The quotes, in order. Four, as Figma's dots count them. */
+  items: SocialProofSpotlightCarouselItem[]
+}
+
+const p = (id: string, name: string, role: string): SocialProofPerson => ({ id, name, role })
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofSpotlightCarouselCopy> = {
+  en: {
+    label: "Customer quotes",
+    items: [
+      {
+        quote: "“Support tickets about visual bugs dropped to almost zero. Our team finally talks about features, not fixes.”",
+        author: p("rashed-al-amri", "Rashed Al-Amri", "Design Ops Manager, Willow & Co"),
+      },
+      {
+        quote: "“Fasla turned our design language into a growth channel. Every launch ships looking exactly like us — on the first try.”",
+        author: p("tariq-zaki", "Tariq Zaki", "Head of Product, Marlow HR"),
+      },
+      {
+        quote: "“Half our team works from the field. Fasla is why the app they carry looks as considered as the site we pitch with.”",
+        author: p("ziad-karam", "Ziad Karam", "CEO, Quillfield"),
+      },
+      {
+        quote: "“Fasla set a new bar for quality — and the team hit it while shipping ahead of schedule.”",
+        author: p("yousef-amin", "Yousef Amin", "Co-founder, Halcyon Games"),
+      },
+    ],
+  },
+  ar: {
+    label: "اقتباسات العملاء",
+    items: [
+      {
+        quote: "«كادت بلاغات الأخطاء البصرية تختفي من الدعم، وصار فريقنا يناقش الميزات أخيرًا لا الإصلاحات.»",
+        author: p("rashed-al-amri", "راشد العمري", "مدير عمليات التصميم، ويلو آند كو"),
+      },
+      {
+        quote: "«جعلت فاصلة هويتنا البصرية مصدرًا للنمو، فكل إطلاق يخرج بصورتنا تمامًا من المحاولة الأولى.»",
+        author: p("tariq-zaki", "طارق زكي", "رئيس المنتج، مارلو إتش آر"),
+      },
+      {
+        quote: "«نصف فريقنا يعمل في الميدان، وبفضل فاصلة يبدو التطبيق الذي يستخدمونه متقنًا كموقعنا الذي نقدّم به عروضنا.»",
+        author: p("ziad-karam", "زياد كرم", "الرئيس التنفيذي، كويلفيلد"),
+      },
+      {
+        quote: "«رفعت فاصلة سقف الجودة، وبلغه الفريق وأطلق قبل موعده.»",
+        author: p("yousef-amin", "يوسف أمين", "شريك مؤسس، هالسيون غيمز"),
+      },
+    ],
+  },
+}
+
+/** Each dot's accessible name, per language. */
+const DOT_LABEL: Record<SocialProofLocale, (index: number, count: number) => string> = {
+  en: (index, count) => `Quote ${index + 1} of ${count}`,
+  ar: (index, count) => `الاقتباس ${index + 1} من ${count}`,
+}
+
+export interface SocialProofSpotlightCarouselProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofSpotlightCarouselCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id. Without them the avatars show initials. */
+  photos?: SocialProofPhotos
+  /** The quote shown, from 0, to control the carousel. */
+  index?: number
+  /** Called when the arrows, dots, keys or a swipe change the quote. */
+  onIndexChange?: (index: number) => void
+}
+
+export function SocialProofSpotlightCarousel({
+  locale = "en",
+  label,
+  items,
+  photos,
+  index: indexProp,
+  onIndexChange,
+  className,
+  ...props
+}: SocialProofSpotlightCarouselProps) {
+  const copy = COPY[locale]
+  const list = items ?? copy.items
+  const slideId = React.useId()
+  const { ref, index, go } = useStepper<HTMLDivElement>({ count: list.length, index: indexProp, onIndexChange })
+  const swipe = useSwipeStep((delta) => go(index + delta))
+  const item = list[index]
+  if (!item) return null
+
+  return (
+    <SocialProofSection
+      aria-label={label ?? copy.label}
+      aria-roledescription="carousel"
+      className={cn("lg:px-24", className)}
+      contentClassName="max-w-[1248px]"
+      onKeyDown={stepKeys(index, list.length, go)}
+      {...props}
+    >
+      <div
+        className={cn(
+          "grid w-full items-center gap-x-5 gap-y-10 [grid-template-areas:'slide_slide_slide_slide_slide'_'._prev_dots_next_.'] [grid-template-columns:1fr_auto_auto_auto_1fr]",
+          "[@container(min-width:40rem)]:gap-x-10 [@container(min-width:40rem)]:px-4 [@container(min-width:40rem)]:[grid-template-areas:'prev_slide_next'_'._dots_.'] [@container(min-width:40rem)]:[grid-template-columns:auto_1fr_auto]",
+          "[@container(min-width:64rem)]:px-16"
+        )}
+      >
+        <SocialProofStepper
+          index={index}
+          count={list.length}
+          onIndexChange={go}
+          locale={locale}
+          variant="outline"
+          controls={slideId}
+          className="contents [&>*:first-child]:[grid-area:prev] [&>*:last-child]:[grid-area:next]"
+        />
+        <div
+          ref={ref}
+          id={slideId}
+          role="group"
+          aria-roledescription="slide"
+          aria-label={DOT_LABEL[locale](index, list.length)}
+          aria-live="polite"
+          tabIndex={0}
+          className="rounded-md [grid-area:slide] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          {...swipe}
+        >
+          <figure className="m-0 flex flex-col items-center gap-8 text-center">
+            <SocialProofQuote
+              key={`quote-${index}`}
+              data-step-item="slide"
+              quote={item.quote}
+              className="text-xl text-foreground [@container(min-width:40rem)]:text-2xl"
+            />
+            <figcaption key={`author-${index}`} data-step-item="slide" className="flex flex-col items-center gap-2">
+              <Avatar aria-hidden size="32" radius="rounded" src={photos?.[item.author.id]} name={item.author.name} className="size-14" />
+              <span className="flex flex-col">
+                <cite className="text-sm font-medium not-italic text-foreground">{item.author.name}</cite>
+                <span className="text-xs text-muted-foreground">
+                  <Isolated>{item.author.role}</Isolated>
+                </span>
+              </span>
+            </figcaption>
+          </figure>
+        </div>
+        <CarouselDots
+          count={list.length}
+          activeIndex={index}
+          onActiveIndexChange={go}
+          label={DOT_LABEL[locale]}
+          className="[grid-area:dots]"
+        />
+      </div>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofSpotlightCarouselCopy = COPY

package/registry/blocks/social-proof-spotlight-carousel/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofSpotlightCarousel,
+  socialProofSpotlightCarouselCopy,
+  type SocialProofSpotlightCarouselCopy,
+  type SocialProofSpotlightCarouselProps,
+  type SocialProofSpotlightCarouselItem,
+} from "./SocialProofSpotlightCarousel"

package/registry/blocks/social-proof-staggered-columns/SocialProofStaggeredColumns.tsx

@@ -0,0 +1,227 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofAuthor,
+  SocialProofQuote,
+  SocialProofSection,
+  STAGGERED_DRIFT_SPEED,
+  driftDuration,
+  toColumns,
+  useCanDrift,
+  useColumnCount,
+  useDrift,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Staggered Columns.
+ *
+ * A header with the heading at the start and a short line at the end, over
+ * six quote cards in staggered columns: the author first, then the quote, on
+ * a `secondary` card. Desktop has three columns of two, the middle column set
+ * 56px lower; Tablet two columns of three, the second set lower, the cards
+ * dealt into them in turn; phones one column. Each column is its own stack,
+ * so a longer quote pushes down only the cards under it.
+ *
+ * Motion (Figma's ⚡ Motion note): the columns drift continuously one way,
+ * alternating by column: the first up, the second down, the third up, linear,
+ * at about 40px per second (`STAGGERED_DRIFT_SPEED`) and looping without a
+ * seam. Each column is its own window, as Figma's column frames are: it clips
+ * what drifts past its top and bottom, and holds its cards again below (the
+ * repeat, hidden from assistive technology and out of the Tab order) so the
+ * wrap is invisible. At the start of a loop the layout is the resting one,
+ * the middle column 56px lower. It
+ * runs only while the block is in the viewport, pauses while the pointer is
+ * over it or focus is inside it, and stands still with reduced motion. Tablet
+ * drifts the same way; phones stack one column, which stays still. In RTL the
+ * column order mirrors and the vertical directions do not change.
+ */
+
+export interface SocialProofStaggeredColumnsItem {
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+}
+
+export interface SocialProofStaggeredColumnsCopy {
+  heading: React.ReactNode
+  /** The line at the end of the header. Hidden when empty. */
+  description: React.ReactNode
+  /** The cards, in reading order. Six, as Figma lays them out. */
+  items: SocialProofStaggeredColumnsItem[]
+}
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofStaggeredColumnsCopy> = {
+  en: {
+    heading: "Word travels between teams",
+    description: "Six teams, six stories — same system underneath.",
+    items: [
+      {
+        quote: "“The theming engine paid for itself the week a client asked for white-label. We said yes in the same meeting.”",
+        author: { id: "bader-al-ghamdi", name: "Bader Al-Ghamdi", role: "CTO, Beacon Analytics" },
+      },
+      {
+        quote: "“Quillfield looks like a company three times our size. Two designers, one system, zero excuses.”",
+        author: { id: "ziad-karam", name: "Ziad Karam", role: "CEO, Quillfield" },
+      },
+      {
+        quote: "“I benchmarked the bundle before and after. Lighter, faster, and somehow prettier.”",
+        author: { id: "hani-jaber", name: "Hani Jaber", role: "Staff Engineer, Clearfen" },
+      },
+      {
+        quote: "“Our game dashboards finally match our brand. Players noticed before the press did.”",
+        author: { id: "yousef-amin", name: "Yousef Amin", role: "Co-founder, Halcyon Games" },
+      },
+      {
+        quote: "“Procurement approved it in record time. Even legal liked the docs.”",
+        author: { id: "tariq-zaki", name: "Tariq Zaki", role: "Head of Product, Marlow HR" },
+      },
+      {
+        quote: "“Every audit finding used to be a design debate. Now it's a token change.”",
+        author: { id: "fahad-salem", name: "Fahad Salem", role: "Brand Director, Arvenna Bank" },
+      },
+    ],
+  },
+  ar: {
+    heading: "سمعة تتناقلها الفرق",
+    description: "ستة فرق وست قصص، ونظام واحد يجمعها.",
+    items: [
+      {
+        quote: "«استردّ محرك السمات كلفته حين طلب عميل نسخة تحمل علامته، فوافقنا في الاجتماع نفسه.»",
+        author: { id: "bader-al-ghamdi", name: "بدر الغامدي", role: "الرئيس التقني، بيكون أناليتكس" },
+      },
+      {
+        quote: "«تبدو كويلفيلد شركة أكبر منا بثلاث مرات: مصممان ونظام واحد، ولا مجال للأعذار.»",
+        author: { id: "ziad-karam", name: "زياد كرم", role: "الرئيس التنفيذي، كويلفيلد" },
+      },
+      {
+        quote: "«قِست حجم الشيفرة قبل الانتقال وبعده، فصارت أخف وأسرع، وأجمل أيضًا.»",
+        author: { id: "hani-jaber", name: "هاني جابر", role: "مهندس أول، كليرفين" },
+      },
+      {
+        quote: "«صارت لوحات ألعابنا تشبه علامتنا أخيرًا، ولاحظ اللاعبون ذلك قبل الصحافة.»",
+        author: { id: "yousef-amin", name: "يوسف أمين", role: "شريك مؤسس، هالسيون غيمز" },
+      },
+      {
+        quote: "«وافق قسم المشتريات في وقت قياسي. حتى القسم القانوني أعجبه التوثيق.»",
+        author: { id: "tariq-zaki", name: "طارق زكي", role: "رئيس المنتج، مارلو إتش آر" },
+      },
+      {
+        quote: "«كانت كل ملاحظة تدقيق تفتح نقاشًا في التصميم، والآن يكفيها تعديل رمز واحد.»",
+        author: { id: "fahad-salem", name: "فهد سالم", role: "مدير العلامة التجارية، بنك أرفينا" },
+      },
+    ],
+  },
+}
+
+export interface SocialProofStaggeredColumnsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofStaggeredColumnsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id. Without them the avatars show initials. */
+  photos?: SocialProofPhotos
+}
+
+/** The gap between a column's cards, `gap-6`, which the loop's distance includes. */
+const CARD_GAP = 24
+
+export function SocialProofStaggeredColumns({
+  locale = "en",
+  heading,
+  description,
+  items,
+  photos,
+  className,
+  ...props
+}: SocialProofStaggeredColumnsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+  const line = description === undefined ? copy.description : description
+  const [gridRef, columnCount] = useColumnCount<HTMLDivElement>()
+  const columns = toColumns(list.map((item, index) => ({ item, index })), columnCount)
+  const canDrift = useCanDrift() && columnCount > 1
+  const driftRef = useDrift<HTMLDivElement>(
+    (root) => {
+      if (columnCount < 2) return []
+      return Array.from(root.querySelectorAll<HTMLElement>("[data-drift]")).flatMap((column, columnIndex) => {
+        const first = column.firstElementChild as HTMLElement | null
+        if (!first || typeof column.animate !== "function") return []
+        // One copy's height and the gap before the repeat: moving that far puts the repeat where the first copy began.
+        // Measured, not `offsetHeight`, which rounds: a fraction of a pixel would show as a jump at the wrap.
+        const distance = first.getBoundingClientRect().height + CARD_GAP
+        return [
+          column.animate([{ transform: "translateY(0)" }, { transform: `translateY(${-distance}px)` }], {
+            duration: driftDuration(distance, STAGGERED_DRIFT_SPEED),
+            iterations: Infinity,
+            easing: "linear",
+            // The first, third... columns climb; the second, fourth... fall. Same in RTL.
+            direction: columnIndex % 2 === 0 ? "normal" : "reverse",
+          }),
+        ]
+      })
+    },
+    [columnCount, canDrift]
+  )
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="gap-12" {...props}>
+      <header className="flex w-full flex-col gap-3 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-end [@container(min-width:64rem)]:gap-12">
+        <h2 id={headingId} className="min-w-0 flex-1 text-2xl font-semibold text-foreground [@container(min-width:40rem)]:text-3xl">
+          <Isolated>{heading ?? copy.heading}</Isolated>
+        </h2>
+        {line ? (
+          <p className="text-base text-muted-foreground [@container(min-width:64rem)]:w-80 [@container(min-width:64rem)]:shrink-0 [@container(min-width:64rem)]:text-end">
+            <Isolated>{line}</Isolated>
+          </p>
+        ) : null}
+      </header>
+      <div ref={driftRef} className="w-full">
+        <div ref={gridRef} className="flex w-full items-start gap-6">
+          {columns.map((column, columnIndex) => {
+            const cards = column.map(({ item, index }) => (
+              <li key={index} className="rounded-xl bg-secondary p-8">
+                <figure className="m-0 flex flex-col gap-5">
+                  <SocialProofAuthor person={item.author} photos={photos} />
+                  <SocialProofQuote quote={item.quote} className="text-base text-foreground" />
+                </figure>
+              </li>
+            ))
+            return (
+              // Each column is its own window, as Figma's column frames are: it clips what drifts past its top and bottom.
+              // The stagger is its margin, so it stays out of the loop's distance.
+              <div key={columnIndex} className={cn("min-w-0 flex-1 overflow-hidden", columnIndex === 1 && "mt-14")}>
+                <div data-drift="" className="relative">
+                  <ul className="m-0 flex list-none flex-col gap-6 p-0">{cards}</ul>
+                  {canDrift ? (
+                    <ul
+                      // The repeat is only there for the loop: hidden from assistive technology and out of the Tab order.
+                      aria-hidden="true"
+                      ref={(el) => el?.setAttribute("inert", "")}
+                      className="absolute inset-x-0 top-full m-0 mt-6 flex list-none flex-col gap-6 p-0"
+                    >
+                      {cards}
+                    </ul>
+                  ) : null}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofStaggeredColumnsCopy = COPY