@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/features-numbered-feature-rows/FeaturesNumberedFeatureRows.tsx

@@ -0,0 +1,107 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { FeaturesHeader, FeaturesSection, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Numbered Feature Rows.
+ *
+ * A dark band (`background-inverse`): the header, then four features. A
+ * feature is a 14px number (1.0, 2.0), a 24px title and a 14px line, 40px
+ * apart, with a 1px rule on its start side between neighbours.
+ *
+ * Desktop sets the four across with rules between them. Tablet sets two
+ * across, a rule before each second one. Mobile stacks them with a rule
+ * between rows and a 20px title. The band holds no state.
+ *
+ * Content limits: a title up to 20 characters and its line up to 90. The
+ * other limits are in the block's documentation page.
+ */
+
+export interface FeaturesNumberedFeatureRow {
+  /** Keys the feature. */
+  id: string
+  /** The number, such as "1.0". */
+  number: React.ReactNode
+  /** The feature's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+}
+
+export interface FeaturesNumberedFeatureRowsCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The features, in order. */
+  features: FeaturesNumberedFeatureRow[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesNumberedFeatureRowsCopy> = {
+  en: {
+    eyebrow: "THE SHORT VERSION",
+    heading: "Four reasons teams stay",
+    features: [
+      { id: "adoption", number: "1.0", title: "Adoption", description: "People use it without being told to, so the data stays complete." },
+      { id: "speed", number: "2.0", title: "Speed", description: "Views open instantly at any size, on any plan, in any region." },
+      { id: "clarity", number: "3.0", title: "Clarity", description: "One definition per metric means the numbers never need a caveat." },
+      { id: "control", number: "4.0", title: "Control", description: "Access, retention and residency are yours to set and to prove." },
+    ],
+  },
+  ar: {
+    eyebrow: "باختصار",
+    heading: "أربعة أسباب تبقي الفرق معنا",
+    features: [
+      { id: "adoption", number: "1.0", title: "التبنّي", description: "يستخدمه الناس دون أن يُطلب منهم، فتبقى البيانات كاملة." },
+      { id: "speed", number: "2.0", title: "السرعة", description: "تُفتح العروض فورًا عند أي حجم، وفي أي باقة، وفي أي منطقة." },
+      { id: "clarity", number: "3.0", title: "الوضوح", description: "تعريف واحد لكل مؤشر يعني أن الأرقام لا تحتاج إلى تحفّظ." },
+      { id: "control", number: "4.0", title: "التحكّم", description: "الوصول والاحتفاظ والإقامة أمورٌ تقع على عاتقك لتحديدها وإثباتها." },
+    ],
+  },
+}
+
+export interface FeaturesNumberedFeatureRowsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesNumberedFeatureRowsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+export function FeaturesNumberedFeatureRows({ locale = "en", eyebrow, heading, features, className, ...props }: FeaturesNumberedFeatureRowsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = features ?? copy.features
+
+  return (
+    <FeaturesSection labelledBy={headingId} className={cn("bg-background-inverse text-foreground-inverse", className)} {...props}>
+      <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} inverse />
+      {list.length > 0 ? (
+        <ol role="list" className="grid grid-cols-1 [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:48rem)]:gap-10 [@container(min-width:72rem)]:grid-cols-4 [@container(min-width:72rem)]:gap-0">
+          {list.map((feature) => (
+            <li
+              key={feature.id}
+              className={cn(
+                "flex min-w-0 flex-col gap-4 border-foreground-inverse/20 py-6 first:pt-0 [&:not(:first-child)]:border-t",
+                "[@container(min-width:48rem)]:gap-10 [@container(min-width:48rem)]:py-0 [@container(min-width:48rem)]:first:pt-0 [@container(min-width:48rem)]:[&:not(:first-child)]:border-t-0 [@container(min-width:48rem)]:even:border-s [@container(min-width:48rem)]:even:ps-8",
+                "[@container(min-width:72rem)]:py-8 [@container(min-width:72rem)]:first:pt-8 [@container(min-width:72rem)]:[&:not(:first-child)]:border-s [@container(min-width:72rem)]:[&:not(:first-child)]:ps-8 [@container(min-width:72rem)]:pe-8"
+              )}
+            >
+              <p className="text-sm text-muted-foreground-inverse">{feature.number}</p>
+              <div className="flex flex-col gap-2.5">
+                <h3 className="text-xl font-semibold text-foreground-inverse [@container(min-width:48rem)]:text-2xl">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground-inverse">{feature.description}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      ) : 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 featuresNumberedFeatureRowsCopy = COPY

package/registry/blocks/features-numbered-feature-rows/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesNumberedFeatureRows,
+  featuresNumberedFeatureRowsCopy,
+  type FeaturesNumberedFeatureRow,
+  type FeaturesNumberedFeatureRowsCopy,
+  type FeaturesNumberedFeatureRowsProps,
+} from "./FeaturesNumberedFeatureRows"

package/registry/blocks/features-numbered-steps-floating-cards/FeaturesNumberedStepsFloatingCards.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+import * as React from "react"
+import { ChartLine, Database, FolderOpen } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { FeaturesRule, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Numbered Steps + Floating Cards.
+ *
+ * A header (a 12px eyebrow, a two-tone heading in `foreground` and
+ * `muted-foreground`, and a 16px line), then the steps beside a visual. The
+ * steps are three rows divided by hairlines; a row is a 24px number and a 24px
+ * title, and the open one adds a soft destructive "Without it" Badge and a
+ * line. The visual is a 608 × 480 blurred photo under a half-strength
+ * `background-inverse` scrim, with a numbered tag, a pill holding an
+ * Avatar and the question, a connector, and two `card` file cards.
+ *
+ * Pressing a row opens it (closing the open one) and crossfades the visual to
+ * that step's question and files in 200ms (at once under reduced motion);
+ * nothing moves by itself. Figma draws only step 02 open, so steps 01 and 03
+ * have details and files written for the code. File names stay Latin in Arabic.
+ *
+ * Desktop sets the steps (640px) beside the visual. Tablet and Mobile put the
+ * visual under the steps.
+ *
+ * Content limits: a step's title up to 28 characters, its detail up to 50,
+ * the question up to 48. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesStepFile {
+  /** The file's name, which stays Latin. */
+  name: string
+  /** The line under it, such as "3 touchpoints", or the time when `version` is set. */
+  meta: string
+  /** A version tag such as "v112". Figma draws it as its own text node, a dot, then the time in `meta`. */
+  version?: string
+  /** `chart` and `database` set the mark; the tile's tint follows. */
+  kind: "chart" | "database"
+}
+
+export interface FeaturesNumberedStep {
+  /** Keys the step. */
+  id: string
+  /** The number, such as "01". */
+  number: string
+  /** The step's title. */
+  title: React.ReactNode
+  /** The badge on the open step, such as "Without it". */
+  badge: string
+  /** The line under the badge. */
+  detail: React.ReactNode
+  /** The question on the visual while this step is open. */
+  question: string
+  /** The two file cards on the visual while this step is open. */
+  files: [FeaturesStepFile, FeaturesStepFile]
+}
+
+export interface FeaturesNumberedStepsFloatingCardsCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The heading's first part, in `foreground`. An `h2` with the rest. */
+  heading: React.ReactNode
+  /** The heading's second part, in `muted-foreground`. */
+  headingMuted: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The steps, in order. */
+  steps: FeaturesNumberedStep[]
+}
+
+/** Figma's copy, English and Arabic. Step 02's open state is Figma's; the other two are written for the code. */
+const COPY: Record<FeaturesLocale, FeaturesNumberedStepsFloatingCardsCopy> = {
+  en: {
+    eyebrow: "WHAT A GOOD ANSWER NEEDS",
+    heading: "Three things have to be in place",
+    headingMuted: "before a question can be answered well.",
+    description: "Give the model two of the three and it will not stop to ask for the third. It fills the gap and answers anyway, in the same tone it uses when it is right.",
+    steps: [
+      {
+        id: "true",
+        number: "01",
+        title: "What is true today",
+        badge: "Without it",
+        detail: "A confident answer about last quarter, not this one.",
+        question: "Where does the pipeline stand this week?",
+        files: [
+          { name: "/pipeline/q3-forecast.md", meta: "updated just now", kind: "chart" },
+          { name: "/crm/open-deals.table", version: "v208", meta: "2 min ago", kind: "database" },
+        ],
+      },
+      {
+        id: "done",
+        number: "02",
+        title: "How the work is done",
+        badge: "Without it",
+        detail: "A plausible answer, not your process.",
+        question: "Should we shift more budget behind this?",
+        files: [
+          { name: "/playbooks/handoff-checklist.md", meta: "3 touchpoints", kind: "chart" },
+          { name: "/campaigns/regional-rollup.table", version: "v112", meta: "4 min ago", kind: "database" },
+        ],
+      },
+      {
+        id: "decided",
+        number: "03",
+        title: "Why it was decided",
+        badge: "Without it",
+        detail: "A conclusion with no reasoning behind it.",
+        question: "Why did we change the pricing last quarter?",
+        files: [
+          { name: "/decisions/pricing-change.md", meta: "signed off 12 Mar", kind: "chart" },
+          { name: "/meetings/q3-review.notes", version: "v31", meta: "1 week ago", kind: "database" },
+        ],
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "ما تحتاجه الإجابة الجيدة",
+    heading: "ثلاثة أمور يجب أن تتوافر",
+    headingMuted: "قبل أن يُجاب عن السؤال إجابة جيدة.",
+    description: "أعطِ النموذج اثنين من الثلاثة ولن يتوقف ليسأل عن الثالث. سيملأ الفراغ ويجيب على أي حال، بالنبرة نفسها التي يستخدمها حين يكون محقًا.",
+    steps: [
+      {
+        id: "true",
+        number: "01",
+        title: "ما هو صحيح اليوم",
+        badge: "بدونه",
+        detail: "إجابة واثقة عن الربع الماضي لا عن هذا الربع.",
+        question: "أين وصل خط المبيعات هذا الأسبوع؟",
+        files: [
+          { name: "/pipeline/q3-forecast.md", meta: "حُدّث الآن", kind: "chart" },
+          { name: "/crm/open-deals.table", version: "v208", meta: "قبل دقيقتين", kind: "database" },
+        ],
+      },
+      {
+        id: "done",
+        number: "02",
+        title: "كيف يُنجَز العمل",
+        badge: "بدونه",
+        detail: "إجابة معقولة، لا عمليتك الفعلية.",
+        question: "هل ننقل ميزانية أكبر لدعم هذا؟",
+        files: [
+          { name: "/playbooks/handoff-checklist.md", meta: "3 نقاط تواصل", kind: "chart" },
+          { name: "/campaigns/regional-rollup.table", version: "v112", meta: "قبل 4 دقائق", kind: "database" },
+        ],
+      },
+      {
+        id: "decided",
+        number: "03",
+        title: "لماذا اتُّخذ القرار",
+        badge: "بدونه",
+        detail: "خلاصة لا تسندها أي أسباب.",
+        question: "لماذا غيّرنا التسعير في الربع الماضي؟",
+        files: [
+          { name: "/decisions/pricing-change.md", meta: "اعتُمد في 12 مارس", kind: "chart" },
+          { name: "/meetings/q3-review.notes", version: "v31", meta: "قبل أسبوع", kind: "database" },
+        ],
+      },
+    ],
+  },
+}
+
+export interface FeaturesNumberedStepsFloatingCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "defaultValue">, Partial<FeaturesNumberedStepsFloatingCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** The photo behind the visual, shown blurred. A `muted` placeholder shows without it. */
+  photo?: FeaturesPhoto
+  /** The photo in the question pill's Avatar. The Avatar's icon shows without it. */
+  avatar?: FeaturesPhoto
+  /** The `id` of the open step, when you control it. */
+  value?: string
+  /** The `id` of the step open first, when you do not. The second by default, as Figma draws it. */
+  defaultValue?: string
+  /** Called with the step's `id` when the visitor opens another. */
+  onValueChange?: (value: string) => void
+}
+
+export function FeaturesNumberedStepsFloatingCards({
+  locale = "en",
+  eyebrow,
+  heading,
+  headingMuted,
+  description,
+  steps,
+  photo,
+  avatar,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  ...props
+}: FeaturesNumberedStepsFloatingCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = steps ?? copy.steps
+  const [inner, setInner] = React.useState(defaultValue ?? list[Math.min(1, list.length - 1)]?.id)
+  const openId = value ?? inner
+  const baseId = React.useId()
+  const choose = (id: string) => {
+    if (id === openId) return
+    if (value === undefined) setInner(id)
+    onValueChange?.(id)
+  }
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" className={className} {...props}>
+      <header className="flex flex-col items-start gap-4">
+        {(eyebrow ?? copy.eyebrow) ? <p className="text-xs font-medium tracking-wide text-muted-foreground rtl:tracking-normal">{eyebrow ?? copy.eyebrow}</p> : null}
+        <h2 id={headingId} className="max-w-[760px] text-3xl font-semibold text-foreground [@container(min-width:72rem)]:text-4xl">
+          {heading ?? copy.heading} <span className="text-muted-foreground">{headingMuted ?? copy.headingMuted}</span>
+        </h2>
+        <p className="max-w-[620px] text-base text-muted-foreground">{description ?? copy.description}</p>
+      </header>
+
+      {list.length > 0 ? (
+        <div className="flex flex-col gap-6 [@container(min-width:48rem)]:gap-8 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:gap-0">
+          <div className="flex min-w-0 flex-col [@container(min-width:72rem)]:w-[640px] [@container(min-width:72rem)]:shrink-0">
+            <FeaturesRule />
+            {list.map((step) => {
+              const open = step.id === openId
+              return (
+                <React.Fragment key={step.id}>
+                  <div className={cn("flex flex-col gap-4 py-5", open && "[@container(min-width:72rem)]:flex-1")}>
+                    <h3 className="text-xl font-medium [@container(min-width:48rem)]:text-2xl">
+                      <button
+                        type="button"
+                        id={`${baseId}-${step.id}-trigger`}
+                        aria-expanded={open}
+                        aria-controls={`${baseId}-${step.id}-panel`}
+                        onClick={() => choose(step.id)}
+                        className={cn(
+                          "flex w-full items-baseline gap-4 rounded-sm text-start transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                          open ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                        )}
+                      >
+                        <span className={open ? "font-medium" : "font-normal"}>{step.number}</span>
+                        <span>{step.title}</span>
+                      </button>
+                    </h3>
+                    <div
+                      id={`${baseId}-${step.id}-panel`}
+                      role="region"
+                      aria-labelledby={`${baseId}-${step.id}-trigger`}
+                      hidden={!open}
+                      className={cn("flex-wrap items-center gap-3 text-base text-foreground [@container(min-width:48rem)]:text-xl", open ? "flex" : "hidden")}
+                    >
+                      <Badge variant="soft" tone="destructive" size="md" radius="standard">
+                        {step.badge}
+                      </Badge>
+                      <span>{step.detail}</span>
+                    </div>
+                  </div>
+                  <FeaturesRule />
+                </React.Fragment>
+              )
+            })}
+          </div>
+
+          <div className="relative isolate flex min-h-[400px] min-w-0 flex-1 items-center justify-center overflow-hidden bg-background-inverse p-4 [@container(min-width:48rem)]:min-h-[440px] [@container(min-width:72rem)]:min-h-[480px]">
+            {photo ? <img src={photo.src} alt="" loading="lazy" decoding="async" className="absolute inset-0 -z-20 size-full scale-110 object-cover blur-[6px]" /> : null}
+            <div aria-hidden="true" className="absolute inset-0 -z-10 bg-background-inverse/25" />
+            <p className="absolute start-4 top-4 rounded-sm border border-foreground-inverse px-1 py-0.5 text-[10px] font-medium leading-[14px] text-foreground-inverse">
+              {list.find((step) => step.id === openId)?.number}
+            </p>
+            <div className="grid w-full max-w-[440px] grid-cols-[minmax(0,1fr)] justify-items-center">
+              {list.map((step) => (
+                <div
+                  key={step.id}
+                  aria-hidden={step.id === openId ? undefined : true}
+                  className={cn(
+                    "col-start-1 row-start-1 flex w-full flex-col items-center gap-4 motion-safe:transition-opacity motion-safe:duration-200",
+                    step.id === openId ? "opacity-100" : "pointer-events-none opacity-0"
+                  )}
+                >
+                  <div className="flex max-w-full items-center gap-2 rounded-full border border-foreground-inverse p-1 pe-4 text-sm font-medium text-foreground-inverse">
+                    <Avatar variant={avatar ? "image" : "icon"} src={avatar?.src} size="32" radius="rounded" />
+                    <span className="min-w-0">{step.question}</span>
+                  </div>
+                  <span aria-hidden="true" className="h-7 w-px bg-foreground-inverse" />
+                  <ul role="list" className="flex w-full flex-col gap-4">
+                    {step.files.map((file) => {
+                      const Icon = file.kind === "chart" ? ChartLine : Database
+                      return (
+                        <li key={file.name} className="flex items-center bg-card text-card-foreground">
+                          <span className={cn("flex size-[4.5rem] shrink-0 items-center justify-center", file.kind === "chart" ? "bg-success/20 text-success" : "bg-info/20 text-info")}>
+                            <Icon size={28} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                          </span>
+                          <span className="flex min-w-0 flex-col gap-1 p-4 py-3">
+                            <span className="break-all text-sm font-medium" dir="ltr">
+                              {file.name}
+                            </span>
+                            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                              <FolderOpen size={12} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                              {file.version ? (
+                                <>
+                                  <span dir="ltr">{file.version}</span>
+                                  <span aria-hidden="true" className="size-1.5 rounded-full bg-success" />
+                                </>
+                              ) : null}
+                              {file.meta}
+                            </span>
+                          </span>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </div>
+        </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 featuresNumberedStepsFloatingCardsCopy = COPY

package/registry/blocks/features-numbered-steps-floating-cards/index.ts

@@ -0,0 +1,8 @@
+export {
+  FeaturesNumberedStepsFloatingCards,
+  featuresNumberedStepsFloatingCardsCopy,
+  type FeaturesNumberedStep,
+  type FeaturesNumberedStepsFloatingCardsCopy,
+  type FeaturesNumberedStepsFloatingCardsProps,
+  type FeaturesStepFile,
+} from "./FeaturesNumberedStepsFloatingCards"

package/registry/blocks/features-perforated-photo-strip/FeaturesPerforatedPhotoStrip.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import * as React from "react"
+import { Globe } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Perforated Photo Strip.
+ *
+ * A `muted` section with a centred header (an eyebrow with a globe mark, a 48px
+ * heading and a line under it), a strip of ten postage stamps and three
+ * columns. A stamp is a 164 × 214 `card` frame with 12px of padding around a
+ * 140 × 190 photo and a perforated edge, cut with a CSS mask of scallops. The
+ * columns are an 18px title over a 14px line.
+ *
+ * The strip scrolls sideways and snaps stamp by stamp: drag it with a mouse,
+ * swipe it, or focus it and use the arrow keys. A stamp lifts 4px on hover.
+ * The columns sit three across on Desktop and stack on Tablet and Mobile.
+ *
+ * Content limits: the heading up to 50 characters, a column's title up to 32
+ * and its line up to 110. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesPerforatedColumn {
+  /** Keys the column. */
+  id: string
+  /** The column's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+}
+
+export interface FeaturesPerforatedPhotoStripCopy {
+  /** The line beside the globe mark. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The columns under the strip, in order. */
+  columns: FeaturesPerforatedColumn[]
+  /** Names the scrolling strip for assistive technology. */
+  stripLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesPerforatedPhotoStripCopy> = {
+  en: {
+    eyebrow: "Works in every region",
+    heading: "Built for teams that work everywhere.",
+    description: "Your customers are in one country. Your team is in another. Your suppliers are somewhere else entirely. Fasla gives you a shared workspace across all of them, wherever you are based.",
+    stripLabel: "Photos from around the world",
+    columns: [
+      { id: "region", title: "One workspace, every region", description: "Run revenue, payroll and day-to-day operations in the currency and language your business works in." },
+      { id: "tools", title: "Grow without extra tools", description: "Manage accounts, approvals and reporting from one place so you can scale without adding another subscription." },
+      { id: "borders", title: "Borderless by default", description: "Pay suppliers, collect from customers and run payroll across borders without a local team in every country." },
+    ],
+  },
+  ar: {
+    eyebrow: "تعمل في كل منطقة",
+    heading: "مصممة للفرق التي تعمل في كل مكان.",
+    description: "عملاؤك في بلد وفريقك في بلد آخر وموردوك في مكان مختلف تمامًا. تمنحك فاصلة مساحة عمل مشتركة تجمعهم جميعًا، أينما كان مقرك.",
+    stripLabel: "صور من أنحاء العالم",
+    columns: [
+      { id: "region", title: "مساحة عمل واحدة لكل منطقة", description: "أدِر الإيرادات والرواتب والعمليات اليومية بالعملة واللغة اللتين يعمل بهما نشاطك." },
+      { id: "tools", title: "انمُ دون أدوات إضافية", description: "أدِر الحسابات والموافقات والتقارير من مكان واحد لتتوسع دون إضافة اشتراك آخر." },
+      { id: "borders", title: "بلا حدود منذ البداية", description: "ادفع للموردين وحصّل من العملاء وأدِر الرواتب عبر الحدود دون فريق محلي في كل بلد." },
+    ],
+  },
+}
+
+/** The ten stamps hold ten photos; a stamp left without one stays a `muted` placeholder. */
+const STAMPS = 10
+
+/** Stamp width plus the 20px between stamps: how far an arrow key moves the strip. */
+const STEP = 184
+
+/**
+ * A scalloped edge: a 20px row of 4px bites along each side, joined by
+ * intersecting four masks, one per edge.
+ */
+const SCALLOP_BITE = "transparent 97%, black"
+const SCALLOP: React.CSSProperties = {
+  WebkitMaskImage: [
+    `radial-gradient(circle 4px at 10px 0, ${SCALLOP_BITE})`,
+    `radial-gradient(circle 4px at 10px 100%, ${SCALLOP_BITE})`,
+    `radial-gradient(circle 4px at 0 10px, ${SCALLOP_BITE})`,
+    `radial-gradient(circle 4px at 100% 10px, ${SCALLOP_BITE})`,
+  ].join(", "),
+  WebkitMaskSize: "20px 100%, 20px 100%, 100% 20px, 100% 20px",
+  WebkitMaskRepeat: "repeat-x, repeat-x, repeat-y, repeat-y",
+  WebkitMaskComposite: "source-in",
+  maskImage: [
+    `radial-gradient(circle 4px at 10px 0, ${SCALLOP_BITE})`,
+    `radial-gradient(circle 4px at 10px 100%, ${SCALLOP_BITE})`,
+    `radial-gradient(circle 4px at 0 10px, ${SCALLOP_BITE})`,
+    `radial-gradient(circle 4px at 100% 10px, ${SCALLOP_BITE})`,
+  ].join(", "),
+  maskSize: "20px 100%, 20px 100%, 100% 20px, 100% 20px",
+  maskRepeat: "repeat-x, repeat-x, repeat-y, repeat-y",
+  maskComposite: "intersect",
+}
+
+export interface FeaturesPerforatedPhotoStripProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesPerforatedPhotoStripCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** Up to ten photos, one per stamp. A `muted` placeholder shows for any left out. */
+  photos?: FeaturesPhoto[]
+}
+
+export function FeaturesPerforatedPhotoStrip({ locale = "en", eyebrow, heading, description, columns, stripLabel, photos, className, ...props }: FeaturesPerforatedPhotoStripProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = columns ?? copy.columns
+  const strip = React.useRef<HTMLUListElement>(null)
+  const drag = React.useRef<{ x: number; left: number } | null>(null)
+  const [dragging, setDragging] = React.useState(false)
+
+  // Figma draws the strip already scrolled: the first stamp sits off the leading edge.
+  React.useLayoutEffect(() => {
+    const node = strip.current
+    if (!node) return
+    const steps = node.clientWidth >= 768 ? 1 : 4
+    const sign = getComputedStyle(node).direction === "rtl" ? -1 : 1
+    node.scrollLeft = sign * steps * STEP
+  }, [])
+
+  const scrollBySteps = (steps: number) => {
+    const reduced = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+    strip.current?.scrollBy({ left: steps * STEP, behavior: reduced ? "auto" : "smooth" })
+  }
+
+  return (
+    <FeaturesSection labelledBy={headingId} className={cn("bg-muted", className)} contentClassName="gap-10 [@container(min-width:48rem)]:gap-12" {...props}>
+      <header className="mx-auto flex w-full max-w-[800px] flex-col items-center gap-4 text-center">
+        <p className="inline-flex items-center gap-2 text-sm text-foreground">
+          <Globe size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+          {eyebrow ?? copy.eyebrow}
+        </p>
+        <h2 id={headingId} className="max-w-[760px] text-3xl font-semibold text-foreground [@container(min-width:48rem)]:text-5xl">
+          {heading ?? copy.heading}
+        </h2>
+        <p className="text-base text-foreground">{description ?? copy.description}</p>
+      </header>
+
+      <ul
+        ref={strip}
+        role="list"
+        tabIndex={0}
+        aria-label={stripLabel ?? copy.stripLabel}
+        onKeyDown={(event) => {
+          if (event.key === "ArrowRight") {
+            event.preventDefault()
+            scrollBySteps(1)
+          } else if (event.key === "ArrowLeft") {
+            event.preventDefault()
+            scrollBySteps(-1)
+          }
+        }}
+        onPointerDown={(event) => {
+          if (event.pointerType !== "mouse" || !strip.current) return
+          drag.current = { x: event.clientX, left: strip.current.scrollLeft }
+          setDragging(true)
+          strip.current.setPointerCapture(event.pointerId)
+        }}
+        onPointerMove={(event) => {
+          if (!drag.current || !strip.current) return
+          strip.current.scrollLeft = drag.current.left - (event.clientX - drag.current.x)
+        }}
+        onPointerUp={() => {
+          drag.current = null
+          setDragging(false)
+        }}
+        onPointerCancel={() => {
+          drag.current = null
+          setDragging(false)
+        }}
+        onLostPointerCapture={() => {
+          drag.current = null
+          setDragging(false)
+        }}
+        className={cn(
+          "-mx-8 -my-1 flex ps-[106px] pe-[106px] scroll-ps-[106px] gap-5 overflow-x-auto overscroll-x-contain py-1 [scrollbar-width:none] [touch-action:pan-x_pan-y] [&::-webkit-scrollbar]:hidden [@container(min-width:48rem)]:-mx-16 [@container(min-width:48rem)]:ps-[62px] [@container(min-width:48rem)]:pe-[62px] [@container(min-width:48rem)]:scroll-ps-[62px] [@container(min-width:72rem)]:-mx-24 [@container(min-width:72rem)]:ps-[94px] [@container(min-width:72rem)]:pe-[94px] [@container(min-width:72rem)]:scroll-ps-[94px]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          dragging ? "cursor-grabbing select-none" : "cursor-grab snap-x snap-mandatory"
+        )}
+      >
+        {Array.from({ length: STAMPS }, (_, index) => (
+          <li
+            key={index}
+            style={SCALLOP}
+            className="w-[164px] shrink-0 snap-start bg-card p-3 motion-safe:transition-transform motion-safe:duration-200 hover:motion-safe:-translate-y-1"
+          >
+            <FeaturesPhotoSlot photo={photos?.[index]} className="h-[190px] w-[140px]" imageClassName="pointer-events-none select-none" />
+          </li>
+        ))}
+      </ul>
+
+      {list.length > 0 ? (
+        <ul role="list" className="grid grid-cols-1 gap-8 [@container(min-width:72rem)]:grid-cols-3 [@container(min-width:72rem)]:gap-12">
+          {list.map((column) => (
+            <li key={column.id} className="flex min-w-0 flex-col gap-3 text-center">
+              <h3 className="text-lg font-semibold text-foreground">{column.title}</h3>
+              <p className="text-sm text-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 featuresPerforatedPhotoStripCopy = COPY