@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/features-solid-colour-cards/FeaturesSolidColourCards.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from "react"
+import { Database, Eye, Layers, Lock, Server, ShieldCheck, Star, Workflow, Zap } from "lucide-react"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { Progress } from "../../ui/progress/progress"
+import { Switch } from "../../ui/switch/switch"
+import { cn } from "../../../src/lib/utils"
+import { FeaturesSection, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Solid Colour Cards.
+ *
+ * A header row: at the start a 12px eyebrow, a 48px heading and an 18px line
+ * (all in `chart-3`), at the end a 340px `info` wash holding a workflow card
+ * (a `card` with a mark, "Weekly review", a Progress and three steps, each an
+ * Avatar, a label and a Badge). Under it four `chart-3` cards, each a bold
+ * lead-in and a line in `primary-foreground`, over a `primary-foreground`
+ * wash holding a product mock-up built from the Badge, Switch, Avatar and
+ * Progress atoms: Protected with two switches, an avatar stack with a trust
+ * badge, three marks with an infrastructure badge, and a Setup progress.
+ *
+ * The switches are live. Desktop sets the four cards across; Tablet two across,
+ * the header's wash under the text; Mobile one across. The cards hold still,
+ * and only lift 4px on hover.
+ *
+ * Content limits: the heading up to 40 characters, a card's lead-in up to 28
+ * and its line up to 80. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesSolidColourCard {
+  /** Keys the card. */
+  id: "secure" | "built" | "agnostic" | "quick"
+  /** The bold lead-in of the card's text. */
+  lead: string
+  /** The rest of its text. */
+  text: string
+}
+
+export interface FeaturesSolidColourCardsCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The four cards, in order. */
+  cards: FeaturesSolidColourCard[]
+  workflow: { title: string; progress: string; steps: { name: string; label: string; status: string; tone: "success" | "info" }[] }
+  protectedMock: { badge: string; rules: string; monitoring: string }
+  trustedMock: { names: string[]; badge: string }
+  infraMock: { badge: string }
+  setupMock: { label: string; badge: string; value: number; percent: string }
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesSolidColourCardsCopy> = {
+  en: {
+    eyebrow: "WHY FASLA?",
+    heading: "Powerful workflows, proven success.",
+    description: "Fasla is uniquely positioned, and proven, to be the single, secure environment for every team’s agents, apps and automations.",
+    cards: [
+      { id: "secure", lead: "Secure by design.", text: "Governance, guardrails and monitoring across every surface." },
+      { id: "built", lead: "Built for the work that matters.", text: "Trusted by organisations with ambitious plans." },
+      { id: "agnostic", lead: "Tool-agnostic.", text: "Works across your whole stack and inside your own infrastructure." },
+      { id: "quick", lead: "Quick to value.", text: "Teams love Fasla for speed, power and ease of use." },
+    ],
+    workflow: {
+      title: "Weekly review",
+      progress: "3 of 4 steps done",
+      steps: [
+        { name: "Alex Rivera", label: "Collect updates", status: "Done", tone: "success" },
+        { name: "Maya Khan", label: "Draft summary", status: "Done", tone: "success" },
+        { name: "Noah Smith", label: "Send to team", status: "Running", tone: "info" },
+      ],
+    },
+    protectedMock: { badge: "Protected", rules: "Access rules", monitoring: "Monitoring" },
+    trustedMock: { names: ["Alex Rivera", "Maya Khan", "Noah Smith", "Lena Brooks"], badge: "Trusted by growing teams" },
+    infraMock: { badge: "Runs in your infrastructure" },
+    setupMock: { label: "Setup", badge: "2 days", value: 85, percent: "85%" },
+  },
+  ar: {
+    eyebrow: "لماذا فاصلة؟",
+    heading: "مسارات عمل قوية، ونجاح مثبت.",
+    description: "فاصلة في موقع فريد، ومثبتة كفاءتها، لتكون البيئة الواحدة الآمنة لوكلاء كل فريق وتطبيقاته وأتمتته.",
+    cards: [
+      { id: "secure", lead: "آمنة بالتصميم.", text: "حوكمة وضوابط ومراقبة عبر كل الأسطح." },
+      { id: "built", lead: "مبنية لما يهم.", text: "موثوقة لدى مؤسسات ذات طموحات كبيرة." },
+      { id: "agnostic", lead: "مرنة مع أي أداة.", text: "تعمل عبر منظومتك كلها وداخل بنيتك التحتية." },
+      { id: "quick", lead: "سريعة القيمة.", text: "تحبها الفرق لسرعتها وقوتها وسهولة استخدامها." },
+    ],
+    workflow: {
+      title: "المراجعة الأسبوعية",
+      progress: "اكتملت 3 من 4 خطوات",
+      steps: [
+        { name: "أمل رشيد", label: "جمع التحديثات", status: "تم", tone: "success" },
+        { name: "مها كريم", label: "صياغة الملخص", status: "تم", tone: "success" },
+        { name: "نورة سالم", label: "إرسال إلى الفريق", status: "قيد التنفيذ", tone: "info" },
+      ],
+    },
+    protectedMock: { badge: "محمي", rules: "قواعد الوصول", monitoring: "المراقبة" },
+    trustedMock: { names: ["أمل رشيد", "مها كريم", "نورة سالم", "ليلى بدر"], badge: "تثق بها الفرق النامية" },
+    infraMock: { badge: "تعمل داخل بنيتك التحتية" },
+    setupMock: { label: "الإعداد", badge: "يومان", value: 85, percent: "85 بالمئة" },
+  },
+}
+
+export interface FeaturesSolidColourCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesSolidColourCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+const CARD = "flex flex-col gap-8 rounded-xl bg-chart-3 p-8 text-primary-foreground motion-safe:transition-transform motion-safe:duration-200 hover:motion-safe:-translate-y-1 [@container(min-width:72rem)]:min-h-[400px] [@container(min-width:72rem)]:justify-between [@container(min-width:72rem)]:gap-0"
+const WASH = "flex flex-col justify-center gap-2 rounded-[10px] bg-primary-foreground/20 p-3"
+const WASH_GAP = "gap-3"
+const CONTROL = "flex items-center gap-2 rounded-[10px] bg-card p-2 text-xs text-card-foreground"
+
+export function FeaturesSolidColourCards({ locale = "en", eyebrow, heading, description, cards, workflow, protectedMock, trustedMock, infraMock, setupMock, className, ...props }: FeaturesSolidColourCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = cards ?? copy.cards
+  const wf = workflow ?? copy.workflow
+  const prot = protectedMock ?? copy.protectedMock
+  const trust = trustedMock ?? copy.trustedMock
+  const infra = infraMock ?? copy.infraMock
+  const setup = setupMock ?? copy.setupMock
+
+  const mock = (id: FeaturesSolidColourCard["id"]) => {
+    if (id === "secure")
+      return (
+        <div className={WASH}>
+          <Badge variant="soft" tone="success" size="md" radius="standard" icon={<ShieldCheck strokeWidth={1.5} />} className="self-center">
+            {prot.badge}
+          </Badge>
+          <ul role="list" className="flex flex-col gap-2">
+            <li className={cn(CONTROL, "justify-between")}>
+              <span className="flex items-center gap-2">
+                <Lock size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                <span>{prot.rules}</span>
+              </span>
+              <Switch size="sm" defaultChecked aria-label={prot.rules} />
+            </li>
+            <li className={cn(CONTROL, "justify-between")}>
+              <span className="flex items-center gap-2">
+                <Eye size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                <span>{prot.monitoring}</span>
+              </span>
+              <Switch size="sm" defaultChecked aria-label={prot.monitoring} />
+            </li>
+          </ul>
+        </div>
+      )
+    if (id === "built")
+      return (
+        <div className={cn(WASH, WASH_GAP)}>
+          <div className="flex justify-center gap-1 rounded-[10px] bg-card p-2 text-card-foreground" aria-hidden="true">
+            {trust.names.map((name, index) => (
+              <Avatar key={index} variant="initials" name={name} size="32" radius="rounded" border />
+            ))}
+          </div>
+          <Badge variant="soft" tone="secondary" size="md" radius="standard" icon={<Star strokeWidth={1.5} />} className="self-center">
+            {trust.badge}
+          </Badge>
+        </div>
+      )
+    if (id === "agnostic")
+      return (
+        <div className={cn(WASH, WASH_GAP)}>
+          <div className="flex items-center justify-center gap-1" aria-hidden="true">
+            <span className="flex size-9 items-center justify-center rounded-[10px] bg-card text-card-foreground">
+              <Database size={18} strokeWidth={1.5} absoluteStrokeWidth />
+            </span>
+            <span className="h-px w-3.5 bg-primary-foreground/20" />
+            <span className="flex size-11 items-center justify-center rounded-xl bg-primary-foreground text-chart-3">
+              <Workflow size={22} strokeWidth={1.5} absoluteStrokeWidth />
+            </span>
+            <span className="h-px w-3.5 bg-primary-foreground/20" />
+            <span className="flex size-9 items-center justify-center rounded-[10px] bg-card text-card-foreground">
+              <Layers size={18} strokeWidth={1.5} absoluteStrokeWidth />
+            </span>
+          </div>
+          <Badge variant="soft" tone="secondary" size="md" radius="standard" icon={<Server strokeWidth={1.5} />} className="self-center">
+            {infra.badge}
+          </Badge>
+        </div>
+      )
+    return (
+      <div className={WASH}>
+        <div className="flex flex-col gap-2 rounded-[10px] bg-card p-3 text-card-foreground">
+          <div className="flex items-center gap-2 text-xs">
+            <Zap size={14} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="text-warning" />
+            <span className="flex-1">{setup.label}</span>
+            <Badge variant="soft" tone="success" size="sm" radius="standard">
+              {setup.badge}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-2 text-xs">
+            <span>{setup.percent}</span>
+            <Progress value={setup.value} size="md" showPercentage={false} aria-label={setup.label} className="flex-1" />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" className={className} {...props}>
+      <div className="flex flex-col gap-8 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:justify-between [@container(min-width:72rem)]:gap-0">
+        <div className="flex min-w-0 flex-col items-start gap-5 [@container(min-width:72rem)]:max-w-[700px] [@container(min-width:72rem)]:self-start">
+          {(eyebrow ?? copy.eyebrow) ? <p className="text-xs font-medium tracking-wide text-chart-3 rtl:tracking-normal">{eyebrow ?? copy.eyebrow}</p> : null}
+          <h2 id={headingId} className="text-3xl font-medium text-chart-3 [@container(min-width:48rem)]:text-5xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="max-w-[560px] text-lg text-chart-3">{description ?? copy.description}</p>
+        </div>
+        <div className="flex h-[260px] w-full flex-col justify-center gap-3 rounded-xl bg-info/10 p-6 [@container(min-width:48rem)]:h-[300px] [@container(min-width:72rem)]:w-[340px] [@container(min-width:72rem)]:shrink-0" aria-hidden="true">
+          <div className="flex flex-col gap-3 rounded-2xl bg-card p-4 text-card-foreground shadow-md">
+            <div className="flex items-center gap-3">
+              <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-info/30">
+                <Workflow size={16} strokeWidth={1.5} absoluteStrokeWidth />
+              </span>
+              <div className="flex min-w-0 flex-col">
+                <span className="text-sm font-semibold">{wf.title}</span>
+                <span className="text-xs text-muted-foreground">{wf.progress}</span>
+              </div>
+            </div>
+            <Progress value={75} size="md" showPercentage={false} aria-label={wf.title} />
+            <ul role="list" className="flex flex-col gap-3">
+              {wf.steps.map((step) => (
+                <li key={step.label} className="flex items-center gap-2 text-xs">
+                  <Avatar variant="initials" name={step.name} size="24" radius="rounded" />
+                  <span className="flex-1">{step.label}</span>
+                  <Badge variant="soft" tone={step.tone} size="sm" radius="standard">
+                    {step.status}
+                  </Badge>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      {list.length > 0 ? (
+        <ul role="list" className="grid grid-cols-1 gap-6 [@container(min-width:48rem)]:grid-cols-2 [@container(min-width:72rem)]:grid-cols-4">
+          {list.map((card) => (
+            <li key={card.id} className={CARD}>
+              <p className="text-xl">
+                <span className="font-semibold">{card.lead}</span> {card.text}
+              </p>
+              {mock(card.id)}
+            </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 featuresSolidColourCardsCopy = COPY

package/registry/blocks/features-solid-colour-cards/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesSolidColourCards,
+  featuresSolidColourCardsCopy,
+  type FeaturesSolidColourCard,
+  type FeaturesSolidColourCardsCopy,
+  type FeaturesSolidColourCardsProps,
+} from "./FeaturesSolidColourCards"

package/registry/blocks/features-split-photo-icon-list/FeaturesSplitPhotoIconList.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import * as React from "react"
+import { Plug, ShieldCheck, Workflow } from "lucide-react"
+import { FeaturesHeader, FeaturesPhotoSlot, FeaturesSection, type FeaturesLocale, type FeaturesPhoto } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Split Photo + Icon List.
+ *
+ * Copy on one side and a photo on the other. The copy is the header (an
+ * eyebrow, the heading and a line under it) over three items; an item is a
+ * 44px `secondary` chip holding a 20px Lucide mark, a 16px title and a 14px
+ * line. The photo is a 592 × 600 box with a 10px radius.
+ *
+ * Desktop sets them side by side, copy at the start and the photo at the end,
+ * 64px apart. Tablet and Mobile stack the photo under the copy, still square.
+ * Without a photo the box stays, as a `muted` placeholder.
+ *
+ * Content limits: an item's title up to 40 characters and its line up to 110.
+ * The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesSplitPhotoIconListItem {
+  /** Keys the item. */
+  id: string
+  /** The item's title. */
+  title: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+  /** The Lucide mark in the chip. */
+  icon?: React.ElementType
+}
+
+export interface FeaturesSplitPhotoIconListCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line under the heading. */
+  description: React.ReactNode
+  /** The items, in order. */
+  items: FeaturesSplitPhotoIconListItem[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesSplitPhotoIconListCopy> = {
+  en: {
+    eyebrow: "PLATFORM",
+    heading: "One platform, every part of the workflow",
+    description: "Replace four disconnected tools with a single system your team can actually keep up to date.",
+    items: [
+      { id: "automations", icon: Workflow, title: "Automations that run themselves", description: "Trigger updates, hand-offs and reminders from the events already happening in your workspace." },
+      { id: "security", icon: ShieldCheck, title: "Security your legal team signs off on", description: "Granular roles, full audit logs, and single sign-on on every paid tier." },
+      { id: "integrations", icon: Plug, title: "Integrations without a project plan", description: "Two hundred connectors, a documented API and webhooks for everything the UI can do." },
+    ],
+  },
+  ar: {
+    eyebrow: "المنصّة",
+    heading: "منصّة واحدة تغطّي كل مراحل سير العمل",
+    description: "استبدل أربع أدوات منفصلة بنظام واحد يستطيع فريقك إبقاءه محدَّثًا فعليًا.",
+    items: [
+      { id: "automations", icon: Workflow, title: "أتمتة تعمل من تلقاء نفسها", description: "أطلِق التحديثات والتسليمات والتذكيرات من الأحداث الجارية أصلًا في مساحة عملك." },
+      { id: "security", icon: ShieldCheck, title: "أمان توافق عليه إدارتك القانونية", description: "أدوار دقيقة، وسجلات تدقيق كاملة، وتسجيل دخول موحّد في كل الباقات المدفوعة." },
+      { id: "integrations", icon: Plug, title: "تكاملات لا تحتاج إلى خطة مشروع", description: "مئتا موصِّل، وواجهة API موثّقة، وخطافات ويب لكل ما تستطيع الواجهة فعله." },
+    ],
+  },
+}
+
+export interface FeaturesSplitPhotoIconListProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesSplitPhotoIconListCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+  /** The photo beside the copy. A `muted` placeholder shows without it. */
+  photo?: FeaturesPhoto
+}
+
+export function FeaturesSplitPhotoIconList({ locale = "en", eyebrow, heading, description, items, photo, className, ...props }: FeaturesSplitPhotoIconListProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <FeaturesSection labelledBy={headingId} gap="md" className={className} {...props}>
+      <div className="flex flex-col gap-10 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:items-center [@container(min-width:72rem)]:gap-16">
+        <div className="flex min-w-0 flex-col gap-10 [@container(min-width:72rem)]:flex-1">
+          <FeaturesHeader headingId={headingId} eyebrow={eyebrow ?? copy.eyebrow} heading={heading ?? copy.heading} description={description ?? copy.description} />
+          {list.length > 0 ? (
+            <ul role="list" className="flex flex-col gap-6">
+              {list.map((item) => {
+                const Icon = item.icon
+                return (
+                  <li key={item.id} className="flex items-start gap-4">
+                    {Icon ? (
+                      <span className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-secondary text-secondary-foreground">
+                        <Icon size={20} strokeWidth={1.5} absoluteStrokeWidth aria-hidden />
+                      </span>
+                    ) : null}
+                    <div className="flex min-w-0 flex-col gap-1">
+                      <h3 className="text-base font-semibold text-foreground">{item.title}</h3>
+                      <p className="text-sm text-muted-foreground">{item.description}</p>
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          ) : null}
+        </div>
+        <FeaturesPhotoSlot photo={photo} className="aspect-[592/600] w-full shrink-0 rounded-lg [@container(min-width:72rem)]:w-[592px] [@container(min-width:72rem)]:max-w-[48%]" />
+      </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 featuresSplitPhotoIconListCopy = COPY

package/registry/blocks/features-split-photo-icon-list/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesSplitPhotoIconList,
+  featuresSplitPhotoIconListCopy,
+  type FeaturesSplitPhotoIconListCopy,
+  type FeaturesSplitPhotoIconListItem,
+  type FeaturesSplitPhotoIconListProps,
+} from "./FeaturesSplitPhotoIconList"

package/registry/blocks/features-stat-feature-band/FeaturesStatFeatureBand.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import * as React from "react"
+import { FeaturesHeader, FeaturesSection, Figures, type FeaturesLocale } from "../features/features"
+
+/*
+ * Figma: `Features` (42367:57765), Type=Stat Feature Band.
+ *
+ * A rounded `secondary` band inside the section: a header row, the section
+ * header at the start and a 14px note at the end on its bottom line, then
+ * four stats. A stat is a large figure (48px on Desktop, 30px below), a 16px
+ * medium label and a 14px line on it.
+ *
+ * Desktop sets the stats four across with the band padded 64px. Tablet sets
+ * two across and pads it 40px, the note under the heading. Mobile stacks
+ * the stats and pads the band 24px. The band holds no state.
+ *
+ * Content limits: a figure up to 8 characters, its label up to 32 and its
+ * line up to 90. The other limits are in the block's documentation page.
+ */
+
+export interface FeaturesStat {
+  /** Keys the stat. */
+  id: string
+  /** The figure, such as "62%" or "3.1 hrs". */
+  figure: React.ReactNode
+  /** What the figure measures. */
+  label: React.ReactNode
+  /** One line on it. */
+  description: React.ReactNode
+}
+
+export interface FeaturesStatFeatureBandCopy {
+  /** The 12px line above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The note beside the heading. */
+  note: React.ReactNode
+  /** The stats, in order. */
+  stats: FeaturesStat[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FeaturesLocale, FeaturesStatFeatureBandCopy> = {
+  en: {
+    eyebrow: "MEASURED, NOT CLAIMED",
+    heading: "What changes in the first ninety days",
+    note: "Averages across 1,240 workspaces that migrated in the last year.",
+    stats: [
+      { id: "meetings", figure: "62%", label: "fewer status meetings", description: "Progress is visible without anyone scheduling a call to describe it." },
+      { id: "handoffs", figure: "4.2×", label: "faster hand-offs", description: "Work moves between teams with its context attached, not in a summary email." },
+      { id: "saved", figure: "3.1 hrs", label: "saved per person, weekly", description: "Recovered from searching, re-asking and rebuilding the same report." },
+      { id: "uptime", figure: "99.99%", label: "uptime, eight quarters", description: "Published on a status page with the full incident history." },
+    ],
+  },
+  ar: {
+    eyebrow: "مقيس لا مُدّعى",
+    heading: "ما الذي يتغيّر في التسعين يومًا الأولى",
+    note: "متوسطات عبر 1,240 مساحة عمل انتقلت خلال العام الماضي.",
+    stats: [
+      { id: "meetings", figure: "62%", label: "أقل في اجتماعات المتابعة", description: "التقدّم مرئي دون أن يحدّد أحد مكالمة لوصفه." },
+      { id: "handoffs", figure: "4.2×", label: "أسرع في التسليم", description: "ينتقل العمل بين الفرق ومعه سياقه، لا في بريد ملخّص." },
+      { id: "saved", figure: "3.1 ساعة", label: "موفَّرة لكل شخص أسبوعيًا", description: "مستردّة من البحث وإعادة السؤال وإعادة بناء التقرير نفسه." },
+      { id: "uptime", figure: "99.99%", label: "جهوزية عبر ثمانية أرباع", description: "منشورة على صفحة حالة مع سجل الحوادث كاملًا." },
+    ],
+  },
+}
+
+export interface FeaturesStatFeatureBandProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FeaturesStatFeatureBandCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FeaturesLocale
+}
+
+export function FeaturesStatFeatureBand({ locale = "en", eyebrow, heading, note, stats, className, ...props }: FeaturesStatFeatureBandProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = stats ?? copy.stats
+
+  return (
+    <FeaturesSection labelledBy={headingId} className={className} {...props}>
+      <div className="flex flex-col gap-8 rounded-2xl bg-secondary p-6 text-secondary-foreground [@container(min-width:48rem)]:gap-10 [@container(min-width:48rem)]:p-10 [@container(min-width:72rem)]:gap-16 [@container(min-width:72rem)]:p-16">
+        <div className="flex flex-col gap-10 [@container(min-width:72rem)]:flex-row [@container(min-width:72rem)]:items-end [@container(min-width:72rem)]:justify-between [@container(min-width:72rem)]:gap-16">
+          <FeaturesHeader
+            headingId={headingId}
+            eyebrow={eyebrow ?? copy.eyebrow}
+            heading={heading ?? copy.heading}
+            className="flex-1 [&_h2]:text-secondary-foreground"
+          />
+          <p className="text-sm text-muted-foreground [@container(min-width:72rem)]:max-w-[17.5rem]">{note ?? copy.note}</p>
+        </div>
+        {list.length > 0 ? (
+          <ul role="list" className="grid grid-cols-1 gap-x-10 gap-y-10 [@container(min-width:72rem)]:grid-cols-4 [@container(min-width:72rem)]:gap-x-12">
+            {list.map((stat) => (
+              <li key={stat.id} className="flex min-w-0 flex-col gap-2 [@container(min-width:48rem)]:max-w-[18.5rem] [@container(min-width:72rem)]:max-w-none">
+                <p className="text-3xl font-semibold leading-[2.75rem] text-secondary-foreground rtl:leading-[3.125rem] [@container(min-width:48rem)]:rtl:leading-[3.75rem] [@container(min-width:72rem)]:text-5xl [@container(min-width:72rem)]:leading-[3.625rem] [@container(min-width:72rem)]:rtl:leading-[4.5rem]">
+                  <Figures>{stat.figure}</Figures>
+                </p>
+                <p className="text-base font-medium text-secondary-foreground">{stat.label}</p>
+                <p className="text-sm text-muted-foreground">{stat.description}</p>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </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 featuresStatFeatureBandCopy = COPY

package/registry/blocks/features-stat-feature-band/index.ts

@@ -0,0 +1,7 @@
+export {
+  FeaturesStatFeatureBand,
+  featuresStatFeatureBandCopy,
+  type FeaturesStat,
+  type FeaturesStatFeatureBandCopy,
+  type FeaturesStatFeatureBandProps,
+} from "./FeaturesStatFeatureBand"