@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/features-expanding-step-cards/FeaturesExpandingStepCards.tsx

@@ -0,0 +1,300 @@
+"use client"
+
+import * as React from "react"
+import { CircleCheck, CreditCard, Hourglass, Mic, NotebookText, Send, Sparkles } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { Progress } from "../../ui/progress/progress"
+import { SkeletonText } from "../../ui/skeleton/skeleton"
+import { FeaturesSection, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Expanding Step Cards.
+ *
+ * On a `muted` section, a centred header (a 36px heading, a 16px line and a
+ * solid Primary lg button) over four 24px-radius `card` cards, each a 30px
+ * title, a 14px line and a mock-up of the product clipped at its bottom edge.
+ * The first, Plan, is the featured card: wider (401px against 258px) and open,
+ * with a list of three steps (28px tinted tiles joined by a 1px connector) and
+ * a message from an assistant over an `info` wash. The other three show a
+ * Briefing, a Recording (a Progress at 40%) and a Follow-up checklist on a
+ * neutral wash, using the Badge, Avatar, Progress and Skeleton atoms.
+ *
+ * The first, Plan, has its message card flush with the bottom edge; the
+ * three static cards centre their mock-up in a `soft-neutral` wash with
+ * 16px top corners, and the
+ * marks in the tiles take their tone's colour.
+ *
+ * Desktop sets the four across. Tablet gives Plan and Next steps a full row
+ * and sets Ready and Record side by side. Mobile stacks all four. Plan stays
+ * the featured card at every width; the others are static, and every card
+ * only lifts 4px on hover. (Figma draws no expanded state for the other three,
+ * so they do not take over from Plan.)
+ *
+ * Content limits: a card's title up to 14 characters and its line up to 90,
+ * a step up to 36 characters. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesExpandingStep {
+  /** Keys the step. */
+  id: string
+  /** The step's text. */
+  label: React.ReactNode
+  /** The tile's tint. */
+  tone: "success" | "info" | "warning"
+}
+
+export interface FeaturesExpandingStepCardsCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The button's label. */
+  cta: string
+  plan: {
+    title: React.ReactNode
+    description: React.ReactNode
+    steps: FeaturesExpandingStep[]
+    /** The assistant's message, in the mock-up. */
+    message: { sender: string; to: string; text: string; times: string[] }
+  }
+  ready: { title: React.ReactNode; description: React.ReactNode; label: string; badge: string; attendee: string }
+  record: { title: React.ReactNode; description: React.ReactNode; label: string; badge: string; note: string }
+  next: { title: React.ReactNode; description: React.ReactNode; label: string; badge: string; items: string[] }
+}
+
+const STEP_ICONS = [Sparkles, Hourglass, CreditCard]
+
+const TILE_TONE = {
+  success: "bg-soft-success-30",
+  info: "bg-soft-info-30",
+  warning: "bg-soft-warning-30",
+} as const
+
+/** The mark in a tile is painted in the tone's own colour, as Figma binds it. */
+const ICON_TONE = {
+  success: "text-success",
+  info: "text-info",
+  warning: "text-warning",
+} as const
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesExpandingStepCardsCopy> = {
+  en: {
+    heading: "Everything around the meeting, handled",
+    description: "Meetings move work forward, but the work around them can slow you down. Fasla takes care of the tasks before, during and after, so you have more room for what matters.",
+    cta: "Start for free",
+    plan: {
+      title: "Plan",
+      description: "A client emails asking to meet. Share a booking link, or ask your assistant to find times that work for everyone.",
+      steps: [
+        { id: "reply", tone: "success", label: "Assistant replies with times to meet" },
+        { id: "pick", tone: "info", label: "Client picks Tuesday at 2 p.m." },
+        { id: "pay", tone: "warning", label: "Client pays a deposit upfront" },
+      ],
+      message: {
+        sender: "Fasla Assistant",
+        to: "to you, Dominic Mills",
+        text: "Happy to set up a call for you with Dominic. Here are a few times you are both available.",
+        times: ["10:00 AM", "2:30 PM", "3:00 PM"],
+      },
+    },
+    ready: { title: "Ready", description: "Never walk into a meeting cold.", label: "Briefing", badge: "Ready", attendee: "Dominic Mills" },
+    record: { title: "Record", description: "Focus on the conversation while notes take care of themselves.", label: "Recording", badge: "Live", note: "Notes are written as you talk." },
+    next: { title: "Next steps", description: "Work keeps moving after the meeting ends.", label: "Follow-up", badge: "Sent", items: ["Recap shared", "Task assigned"] },
+  },
+  ar: {
+    heading: "كل ما يحيط بالاجتماع، منجَز",
+    description: "الاجتماعات تدفع العمل إلى الأمام، لكن العمل المحيط بها قد يبطئك. تتولى فاصلة المهام قبلها وأثناءها وبعدها، فيتسع وقتك لما يهم.",
+    cta: "ابدأ مجانًا",
+    plan: {
+      title: "التخطيط",
+      description: "يراسلك عميل طالبًا لقاءً. شارك رابط الحجز، أو اطلب من مساعدك إيجاد أوقات تناسب الجميع.",
+      steps: [
+        { id: "reply", tone: "success", label: "يردّ المساعد بأوقات مقترحة للقاء" },
+        { id: "pick", tone: "info", label: "يختار العميل الثلاثاء الساعة 2 ظهرًا" },
+        { id: "pay", tone: "warning", label: "يدفع العميل عربونًا مقدمًا" },
+      ],
+      message: {
+        sender: "مساعد فاصلة",
+        to: "إليك، محمد حسين",
+        text: "يسعدني ترتيب مكالمة لك مع محمد. إليك بعض الأوقات المناسبة لكما.",
+        times: ["10:00 ص", "2:30 م", "3:00 م"],
+      },
+    },
+    ready: { title: "الاستعداد", description: "لا تدخل اجتماعًا دون استعداد.", label: "الإحاطة", badge: "جاهزة", attendee: "محمد حسين" },
+    record: { title: "التسجيل", description: "ركّز على الحوار بينما تتكفّل الملاحظات بنفسها.", label: "جارٍ التسجيل", badge: "مباشرة", note: "تُكتب الملاحظات أثناء حديثك." },
+    next: { title: "الخطوات التالية", description: "يستمر العمل بعد انتهاء الاجتماع.", label: "المتابعة", badge: "أُرسلت", items: ["شُوركت الخلاصة", "أُسندت المهمة"] },
+  },
+}
+
+export interface FeaturesExpandingStepCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesExpandingStepCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** Where the header button goes. Without it, the button calls `onStart`. */
+  startHref?: string
+  /** Called when the header button is pressed and has no `startHref`. */
+  onStart?: () => void
+}
+
+const CARD = "group flex flex-col gap-4 overflow-hidden rounded-3xl bg-card p-6 text-card-foreground motion-safe:transition-transform motion-safe:duration-200 hover:motion-safe:-translate-y-1 [@container(min-width:48rem)]:p-8 [@container(min-width:48rem)]:pb-0 pb-0"
+const TITLE = "text-3xl font-medium text-foreground"
+const BODY = "text-sm text-muted-foreground"
+
+/** A small mock-up card sitting on a wash, as the three static cards show. */
+function MockCard({ tone, icon: Icon, label, children }: { tone: keyof typeof TILE_TONE; icon: React.ElementType; label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex w-full flex-col gap-2 rounded-2xl bg-card p-4 text-card-foreground">
+      <div className="flex items-center gap-2">
+        <span className={cn("flex size-7 items-center justify-center rounded-[10px]", TILE_TONE[tone])}>
+          <Icon size={14} strokeWidth={1.5} aria-hidden className={ICON_TONE[tone]} />
+        </span>
+        <span className="text-sm font-semibold text-card-foreground">{label}</span>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+export function FeaturesExpandingStepCards({ locale = "en", heading, description, cta, plan, ready, record, next, startHref, onStart, className, ...props }: FeaturesExpandingStepCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const planCopy = plan ?? copy.plan
+  const readyCopy = ready ?? copy.ready
+  const recordCopy = record ?? copy.record
+  const nextCopy = next ?? copy.next
+  const label = cta ?? copy.cta
+  const attendee = readyCopy.attendee
+  const buttonClass = "w-full [@container(min-width:48rem)]:w-auto"
+
+  return (
+    <FeaturesSection labelledBy={headingId} contentClassName="gap-10 [@container(min-width:48rem)]:gap-12" className={cn("bg-muted", className)} {...props}>
+      <header className="mx-auto flex w-full max-w-[760px] flex-col items-center gap-5 text-center">
+        <h2 id={headingId} className="max-w-[290px] text-3xl font-medium text-foreground [@container(min-width:48rem)]:max-w-none [@container(min-width:48rem)]:leading-[44px] [@container(min-width:48rem)]:rtl:leading-[60px] [@container(min-width:72rem)]:text-4xl">
+          {heading ?? copy.heading}
+        </h2>
+        <p className="text-base text-muted-foreground [@container(min-width:72rem)]:max-w-[560px]">{description ?? copy.description}</p>
+        {startHref ? (
+          <a href={startHref} className={buttonVariants({ variant: "default", size: "lg", className: buttonClass })}>
+            {label}
+          </a>
+        ) : (
+          <Button type="button" variant="default" size="lg" onClick={onStart} className={buttonClass}>
+            {label}
+          </Button>
+        )}
+      </header>
+
+      <div className="grid grid-cols-1 gap-6 [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:72rem)]:grid-cols-[401fr_258fr_258fr_258fr]">
+        <section aria-label={String(planCopy.title)} className={cn(CARD, "[@container(min-width:48rem)]:col-span-2 [@container(min-width:72rem)]:col-span-1 [@container(min-width:72rem)]:h-[560px]")}>
+          <div className="flex flex-col gap-3">
+            <h3 className={TITLE}>{planCopy.title}</h3>
+            <p className={BODY}>{planCopy.description}</p>
+          </div>
+          <ol role="list" className="flex flex-col">
+            {planCopy.steps.map((step, position) => {
+              const Icon = STEP_ICONS[position % STEP_ICONS.length]!
+              return (
+                <li key={step.id} className="flex flex-col">
+                  {position > 0 ? <span aria-hidden="true" className="ms-3.5 h-2.5 w-px bg-border" /> : null}
+                  <div className="flex items-center gap-3">
+                    <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-[10px]", TILE_TONE[step.tone])}>
+                      <Icon size={14} strokeWidth={1.5} aria-hidden className={ICON_TONE[step.tone]} />
+                    </span>
+                    <span className={cn(BODY, "min-w-0")}>{step.label}</span>
+                  </div>
+                </li>
+              )
+            })}
+          </ol>
+          <div className="flex flex-col justify-end bg-soft-info-20 px-4 pt-4 [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:pt-6 [@container(min-width:72rem)]:min-h-0 [@container(min-width:72rem)]:flex-1">
+            <div className="flex flex-col gap-3 rounded-t-2xl bg-card p-4 text-card-foreground shadow-lg">
+              <div className="flex items-center gap-3">
+                <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-soft-success-30">
+                  <Sparkles size={20} strokeWidth={1.5} aria-hidden className="text-success" />
+                </span>
+                <div className="flex min-w-0 flex-col">
+                  <span className="text-sm font-semibold text-card-foreground">{planCopy.message.sender}</span>
+                  <span className="text-xs text-muted-foreground">{planCopy.message.to}</span>
+                </div>
+              </div>
+              <p className="text-sm text-card-foreground">{planCopy.message.text}</p>
+              <div className="flex flex-wrap gap-2 rounded-lg bg-soft-info p-2">
+                {planCopy.message.times.map((time) => (
+                  <Button key={time} type="button" variant="soft" size="xs" tabIndex={-1}>
+                    <bdi dir="ltr">{time}</bdi>
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section aria-label={String(readyCopy.title)} className={cn(CARD, "[@container(min-width:72rem)]:h-[560px]")}>
+          <div className="flex flex-col gap-3">
+            <h3 className={TITLE}>{readyCopy.title}</h3>
+            <p className={BODY}>{readyCopy.description}</p>
+          </div>
+          <div className="flex flex-col justify-center rounded-t-[16px] bg-soft-neutral p-4 [@container(min-width:72rem)]:min-h-0 [@container(min-width:72rem)]:flex-1">
+            <MockCard tone="info" icon={NotebookText} label={readyCopy.label}>
+              <Badge variant="soft" tone="info" size="sm" radius="standard" className="self-start">
+                {readyCopy.badge}
+              </Badge>
+              <div className="flex items-center gap-2">
+                <Avatar variant="initials" name={attendee} size="24" radius="rounded" />
+                <span className="text-xs text-card-foreground">{attendee}</span>
+              </div>
+              <SkeletonText lines={2} />
+            </MockCard>
+          </div>
+        </section>
+
+        <section aria-label={String(recordCopy.title)} className={cn(CARD, "[@container(min-width:72rem)]:h-[560px]")}>
+          <div className="flex flex-col gap-3">
+            <h3 className={TITLE}>{recordCopy.title}</h3>
+            <p className={BODY}>{recordCopy.description}</p>
+          </div>
+          <div className="flex flex-col justify-center rounded-t-[16px] bg-soft-neutral p-4 [@container(min-width:72rem)]:min-h-0 [@container(min-width:72rem)]:flex-1">
+            <MockCard tone="info" icon={Mic} label={recordCopy.label}>
+              <Badge variant="soft" tone="info" size="sm" radius="standard" className="self-start">
+                {recordCopy.badge}
+              </Badge>
+              <Progress value={40} size="md" showPercentage={false} aria-label={recordCopy.label} />
+              <p className="text-xs text-muted-foreground">{recordCopy.note}</p>
+            </MockCard>
+          </div>
+        </section>
+
+        <section aria-label={String(nextCopy.title)} className={cn(CARD, "[@container(min-width:48rem)]:col-span-2 [@container(min-width:72rem)]:col-span-1 [@container(min-width:72rem)]:h-[560px]")}>
+          <div className="flex flex-col gap-3">
+            <h3 className={TITLE}>{nextCopy.title}</h3>
+            <p className={BODY}>{nextCopy.description}</p>
+          </div>
+          <div className="flex flex-col justify-center rounded-t-[16px] bg-soft-neutral p-4 [@container(min-width:72rem)]:min-h-0 [@container(min-width:72rem)]:flex-1">
+            <MockCard tone="success" icon={Send} label={nextCopy.label}>
+              <Badge variant="soft" tone="success" size="sm" radius="standard" className="self-start">
+                {nextCopy.badge}
+              </Badge>
+              <ul role="list" className="flex flex-col gap-2">
+                {nextCopy.items.map((item) => (
+                  <li key={item} className="flex items-center gap-2 text-xs text-card-foreground">
+                    <CircleCheck size={14} strokeWidth={1.5} aria-hidden className="shrink-0 text-success" />
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </MockCard>
+          </div>
+        </section>
+      </div>
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresExpandingStepCardsCopy = COPY

package/registry/blocks/features-expanding-step-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesExpandingStepCards,
+  featuresExpandingStepCardsCopy,
+  type FeaturesExpandingStep,
+  type FeaturesExpandingStepCardsCopy,
+  type FeaturesExpandingStepCardsProps,
+} from "./FeaturesExpandingStepCards"

package/registry/blocks/features-feature-checklist-columns/FeaturesFeatureChecklistColumns.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { Check } from "lucide-react"
+import { Button, buttonVariants } from "../../ui/button/button"
+import { FeaturesHeader, FeaturesRule, FeaturesSection, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Feature Checklist Columns.
+ *
+ * A top row, the section header at the start and a primary Compare plans
+ * button at the end, then three columns. A column is a 16px title, a
+ * hairline and six items; an item is a 16px Lucide check in `primary` and a
+ * 14px line in `muted-foreground`.
+ *
+ * Desktop sets the three columns across with 64px between them. Tablet sets
+ * two across, the third beneath. Mobile stacks them with 40px between, and
+ * the button takes the full width under the header.
+ *
+ * Content limits: a column's title up to 24 characters, an item up to 45.
+ * The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesChecklistColumn {
+  /** Keys the column. */
+  id: string
+  /** The column's title. */
+  title: React.ReactNode
+  /** The checked items, in order. */
+  items: React.ReactNode[]
+}
+
+export interface FeaturesFeatureChecklistColumnsCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The columns, in order. */
+  columns: FeaturesChecklistColumn[]
+  /** The button's label. */
+  compare: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesFeatureChecklistColumnsCopy> = {
+  en: {
+    eyebrow: "WHAT IS INCLUDED",
+    heading: "The whole list",
+    compare: "Compare plans",
+    columns: [
+      {
+        id: "core",
+        title: "Core",
+        items: ["Unlimited projects", "Board, table and timeline views", "Custom fields and formulas", "Saved and shared filters", "Templates for every project type", "Full-text search across the workspace"],
+      },
+      {
+        id: "collaboration",
+        title: "Collaboration",
+        items: ["Free guest accounts", "Threaded comments and mentions", "Real-time multiplayer editing", "Shared inbox for requests", "Approval and review workflows", "Public share links with expiry"],
+      },
+      {
+        id: "admin",
+        title: "Admin & security",
+        items: ["SSO, SCIM and SAML", "Field-level permissions", "Complete audit log", "Regional data residency", "Ninety-day version history", "One-click full data export"],
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "ما المشمول",
+    heading: "القائمة كاملة",
+    compare: "قارن الباقات",
+    columns: [
+      {
+        id: "core",
+        title: "الأساسيات",
+        items: ["مشاريع بلا حدود", "عروض اللوحة والجدول والجدول الزمني", "حقول ومعادلات مخصّصة", "مرشّحات محفوظة ومشتركة", "قوالب لكل نوع مشروع", "بحث نصّي كامل عبر مساحة العمل"],
+      },
+      {
+        id: "collaboration",
+        title: "التعاون",
+        items: ["حسابات ضيوف مجانية", "تعليقات متسلسلة وإشارات", "تحرير لحظي متعدد المستخدمين", "صندوق وارد مشترك للطلبات", "مسارات الموافقة والمراجعة", "روابط مشاركة عامة بتاريخ انتهاء"],
+      },
+      {
+        id: "admin",
+        title: "الإدارة والأمان",
+        items: ["SSO و SCIM و SAML", "صلاحيات على مستوى الحقل", "سجل تدقيق كامل", "إقامة إقليمية للبيانات", "سجل إصدارات لتسعين يومًا", "تصدير كامل للبيانات بنقرة واحدة"],
+      },
+    ],
+  },
+}
+
+export interface FeaturesFeatureChecklistColumnsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesFeatureChecklistColumnsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** Where the Compare plans button goes. Without it, the button calls `onCompare`. */
+  compareHref?: string
+  /** Called when the button is pressed and has no `compareHref`. */
+  onCompare?: () => void
+}
+
+export function FeaturesFeatureChecklistColumns({
+  locale = "en",
+  eyebrow,
+  heading,
+  columns,
+  compare,
+  compareHref,
+  onCompare,
+  className,
+  ...props
+}: FeaturesFeatureChecklistColumnsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = columns ?? copy.columns
+  const label = compare ?? copy.compare
+  const buttonClass = "w-full shrink-0 [@container(min-width:48rem)]:w-auto"
+
+  return (
+    <FeaturesSection labelledBy={headingId} 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-10 [@container(min-width:72rem)]:gap-16">
+        <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} className="flex-1" />
+        {compareHref ? (
+          <a href={compareHref} className={buttonVariants({ variant: "default", size: "md", className: `${buttonClass}` })}>
+            {label}
+          </a>
+        ) : (
+          <Button type="button" variant="default" size="md" onClick={onCompare} className={`${buttonClass}`}>
+            {label}
+          </Button>
+        )}
+      </div>
+      {list.length > 0 ? (
+        <div className="grid grid-cols-1 gap-10 [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:72rem)]:grid-cols-3 [@container(min-width:72rem)]:gap-x-16">
+          {list.map((column) => (
+            <section key={column.id} className="flex min-w-0 flex-col gap-5">
+              <h3 className="text-base font-semibold text-foreground">{column.title}</h3>
+              <FeaturesRule />
+              <ul role="list" className="flex flex-col gap-3">
+                {column.items.map((item, index) => (
+                  <li key={index} className="flex items-start gap-2.5 text-sm text-muted-foreground">
+                    <Check size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="mt-0.5 shrink-0 text-primary" />
+                    <span className="min-w-0">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </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 featuresFeatureChecklistColumnsCopy = COPY

package/registry/blocks/features-feature-checklist-columns/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesFeatureChecklistColumns,
+  featuresFeatureChecklistColumnsCopy,
+  type FeaturesChecklistColumn,
+  type FeaturesFeatureChecklistColumnsCopy,
+  type FeaturesFeatureChecklistColumnsProps,
+} from "./FeaturesFeatureChecklistColumns"

package/registry/blocks/features-feature-list-thumbnails/FeaturesFeatureListThumbnails.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { FeaturesHeader, FeaturesPhotoSlot, FeaturesRule, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Feature List + Thumbnails.
+ *
+ * A header (an eyebrow and the heading), then four rows divided by hairlines.
+ * A row is a thumbnail (200 × 132, 8px radius), a 20px title over a 14px
+ * line, and a Learn more link in `primary` with an arrow that nudges along
+ * the reading direction on hover.
+ *
+ * Desktop sets the thumbnail, the text and the link on one line. Tablet
+ * shrinks the thumbnail to 180 × 119 and leaves the link out, as Figma's
+ * Tablet does. Mobile and Desktop show it.
+ * Mobile stacks the full-width thumbnail, the text and the link.
+ *
+ * Content limits: a row's title up to 28 characters and its line up to 130.
+ * The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesThumbnailRow {
+  /** Keys the row. */
+  id: string
+  /** The row's title. */
+  title: React.ReactNode
+  /** The line under it. */
+  description: React.ReactNode
+  /** The row's thumbnail. */
+  image?: FeaturesPhoto
+  /** Where the link goes. Without it, the link calls `onLearnMore` with the row's `id`. */
+  href?: string
+}
+
+export interface FeaturesFeatureListThumbnailsCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The rows, in order. */
+  rows: FeaturesThumbnailRow[]
+  /** The link's label. */
+  learnMore: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesFeatureListThumbnailsCopy> = {
+  en: {
+    eyebrow: "WHAT YOU GET",
+    heading: "Four things that stop being your problem",
+    learnMore: "Learn more",
+    rows: [
+      { id: "onboarding", title: "Onboarding new people", description: "Templates, sample data and role-based views mean a new hire is productive on day one instead of week three." },
+      { id: "status", title: "Chasing status updates", description: "Progress is computed from the work itself, so the roll-up is always current without anyone filing a report." },
+      { id: "numbers", title: "Reconciling numbers", description: "One definition per metric, applied everywhere it appears — the dashboard and the board deck finally agree." },
+      { id: "access", title: "Managing access", description: "Permissions follow the org chart you already sync, and revoke themselves when someone changes team." },
+    ],
+  },
+  ar: {
+    eyebrow: "ما الذي تحصل عليه",
+    heading: "أربعة أمور تتوقف عن كونها مشكلتك",
+    learnMore: "اعرف المزيد",
+    rows: [
+      { id: "onboarding", title: "تهيئة الموظفين الجدد", description: "القوالب والبيانات النموذجية والعروض المرتبطة بالأدوار تجعل الموظف الجديد منتجًا في يومه الأول بدل أسبوعه الثالث." },
+      { id: "status", title: "ملاحقة تحديثات الحالة", description: "يُحتسب التقدّم من العمل نفسه، فيبقى التجميع محدَّثًا دائمًا دون أن يرفع أحد تقريرًا." },
+      { id: "numbers", title: "تسوية الأرقام", description: "تعريف واحد لكل مؤشر يُطبَّق أينما ظهر، فتتفق أخيرًا لوحة المعلومات مع عرض مجلس الإدارة." },
+      { id: "access", title: "إدارة الوصول", description: "تتبع الصلاحيات الهيكل التنظيمي الذي تزامنه أصلًا، وتُلغى تلقائيًا عند انتقال أحدهم إلى فريق آخر." },
+    ],
+  },
+}
+
+export interface FeaturesFeatureListThumbnailsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesFeatureListThumbnailsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** Called with the row's `id` when its link is pressed and the row has no `href`. */
+  onLearnMore?: (id: string) => void
+}
+
+export function FeaturesFeatureListThumbnails({ locale = "en", eyebrow, heading, rows, learnMore, onLearnMore, className, ...props }: FeaturesFeatureListThumbnailsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = rows ?? copy.rows
+  const label = learnMore ?? copy.learnMore
+  const linkClass = "group/link inline-flex items-center gap-2 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" className={className} {...props}>
+      <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} />
+      {list.length > 0 ? (
+        <ul role="list" className="flex flex-col">
+          {list.map((row, index) => (
+            <li key={row.id} className="flex flex-col">
+              {index > 0 ? <FeaturesRule /> : null}
+              <div className="grid grid-cols-1 gap-4 py-6 [@container(min-width:48rem)]:grid-cols-[180px_1fr] [@container(min-width:48rem)]:gap-x-8 [@container(min-width:48rem)]:gap-y-3 [@container(min-width:72rem)]:grid-cols-[200px_1fr_auto] [@container(min-width:72rem)]:items-center">
+                <FeaturesPhotoSlot photo={row.image} className="aspect-[296/196] w-full rounded-lg [@container(min-width:48rem)]:row-span-2 [@container(min-width:48rem)]:aspect-auto [@container(min-width:48rem)]:h-[119px] [@container(min-width:48rem)]:self-center [@container(min-width:72rem)]:row-span-1 [@container(min-width:72rem)]:h-[132px]" />
+                <div className="flex min-w-0 flex-col gap-1.5 [@container(min-width:48rem)]:col-start-2 [@container(min-width:48rem)]:row-start-1 [@container(min-width:48rem)]:self-end [@container(min-width:72rem)]:self-center">
+                  <h3 className="text-xl font-semibold text-foreground">{row.title}</h3>
+                  <p className="text-sm text-muted-foreground">{row.description}</p>
+                </div>
+                <div className="self-start [@container(min-width:48rem)_and_(max-width:71.99rem)]:hidden [@container(min-width:48rem)]:col-start-2 [@container(min-width:48rem)]:row-start-2 [@container(min-width:72rem)]:col-start-3 [@container(min-width:72rem)]:row-start-1 [@container(min-width:72rem)]:self-center">
+                  {row.href ? (
+                    <a href={row.href} className={linkClass}>
+                      {label}
+                      {arrow}
+                    </a>
+                  ) : (
+                    <button type="button" onClick={() => onLearnMore?.(row.id)} className={linkClass}>
+                      {label}
+                      {arrow}
+                    </button>
+                  )}
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </FeaturesSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const featuresFeatureListThumbnailsCopy = COPY

package/registry/blocks/features-feature-list-thumbnails/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesFeatureListThumbnails,
+  featuresFeatureListThumbnailsCopy,
+  type FeaturesFeatureListThumbnailsCopy,
+  type FeaturesFeatureListThumbnailsProps,
+  type FeaturesThumbnailRow,
+} from "./FeaturesFeatureListThumbnails"