@smicolon/fasla-ui 0.5.1 → 0.7.0

package/registry/blocks/social-proof-benefit-title-cards/SocialProofBenefitTitleCards.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+import * as React from "react"
+import { Sparkles, TrendingUp, Zap, type LucideIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofAuthor,
+  SocialProofHeader,
+  SocialProofQuote,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Benefit-Title Cards.
+ *
+ * A centred header over three cards, each led by a benefit: a round icon chip
+ * in a 10% tint of its colour (`info`, `success`, `warning`), the benefit as a
+ * title, then the quote that backs it and its author. The cards are at least
+ * 300px tall (240px on Tablet) and grow with their copy.
+ *
+ * Desktop sets the three cards in one row; Tablet two to a row and the third
+ * across the full width; phones one under another.
+ */
+
+/** The icon chip's three tones, as Figma colours them. */
+export type SocialProofBenefitTone = "info" | "success" | "warning"
+
+export interface SocialProofBenefitTitleCardsItem {
+  /** The benefit. Up to 30 characters in English, 25 in Arabic. */
+  title: React.ReactNode
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+  /** A Lucide icon for the chip. */
+  icon: LucideIcon
+  tone: SocialProofBenefitTone
+}
+
+export interface SocialProofBenefitTitleCardsCopy {
+  heading: React.ReactNode
+  description: React.ReactNode
+  /** The cards, in reading order. Three, as Figma lays them out. */
+  items: SocialProofBenefitTitleCardsItem[]
+}
+
+const TONE: Record<SocialProofBenefitTone, string> = {
+  info: "bg-info/10 text-info",
+  success: "bg-success/10 text-success",
+  warning: "bg-warning/10 text-warning",
+}
+
+const BADER = { id: "bader-al-ghamdi" } as const
+const ADEL = { id: "adel-qasim" } as const
+const MAJED = { id: "majed-nouri" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofBenefitTitleCardsCopy> = {
+  en: {
+    heading: "Why teams stay",
+    description: "Three benefits customers bring up unprompted.",
+    items: [
+      {
+        icon: Zap,
+        tone: "info",
+        title: "Fast where it matters",
+        quote: "“Set-up took one morning. The kit compiles straight into our stack with nothing bolted on.”",
+        author: { ...BADER, name: "Bader Al-Ghamdi", role: "CTO, Beacon Analytics" },
+      },
+      {
+        icon: Sparkles,
+        tone: "success",
+        title: "Cleaner, calmer screens",
+        quote: "“We cut a third of our custom CSS. The UI feels lighter to use and to maintain.”",
+        author: { ...ADEL, name: "Adel Qasim", role: "Head of Design, Forma Studio" },
+      },
+      {
+        icon: TrendingUp,
+        tone: "warning",
+        title: "Momentum you can measure",
+        quote: "“Feature cycle time dropped 28% in the first quarter. The numbers convinced the board.”",
+        author: { ...MAJED, name: "Majed Nouri", role: "COO, Arcadia Health" },
+      },
+    ],
+  },
+  ar: {
+    heading: "ما يُبقي الفرق معنا",
+    description: "ثلاث فوائد يذكرها العملاء دون أن نسألهم.",
+    items: [
+      {
+        icon: Zap,
+        tone: "info",
+        title: "سرعة حيث تحتاجها",
+        quote: "«أنهينا الإعداد في صباح واحد، وتعمل المكتبة مباشرة ضمن أدواتنا دون أي إضافات.»",
+        author: { ...BADER, name: "بدر الغامدي", role: "الرئيس التقني، بيكون أناليتكس" },
+      },
+      {
+        icon: Sparkles,
+        tone: "success",
+        title: "شاشات أنظف وأهدأ",
+        quote: "«حذفنا ثلث شيفرة CSS المخصصة، فصارت الواجهة أخف في الاستخدام والصيانة.»",
+        author: { ...ADEL, name: "عادل قاسم", role: "رئيس التصميم، فورما ستوديو" },
+      },
+      {
+        icon: TrendingUp,
+        tone: "warning",
+        title: "تقدّم تقيسه بالأرقام",
+        quote: "«انخفض وقت تطوير الميزة بنسبة 28% في الربع الأول، والأرقام أقنعت مجلس الإدارة.»",
+        author: { ...MAJED, name: "ماجد نوري", role: "الرئيس التنفيذي للعمليات، أركاديا هيلث" },
+      },
+    ],
+  },
+}
+
+export interface SocialProofBenefitTitleCardsProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofBenefitTitleCardsCopy> {
+  /** 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
+}
+
+export function SocialProofBenefitTitleCards({
+  locale = "en",
+  heading,
+  description,
+  items,
+  photos,
+  className,
+  ...props
+}: SocialProofBenefitTitleCardsProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="gap-12" {...props}>
+      <SocialProofHeader headingId={headingId} heading={heading ?? copy.heading} description={description === undefined ? copy.description : description} />
+      <ul
+        className={cn(
+          "grid w-full grid-cols-1 gap-5",
+          "[@container(min-width:40rem)]:grid-cols-2 [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:grid-flow-col [@container(min-width:64rem)]:grid-cols-none [@container(min-width:64rem)]:auto-cols-fr"
+        )}
+      >
+        {list.map((item, index) => {
+          const Icon = item.icon
+          return (
+            <li
+              key={index}
+              className={cn(
+                "flex min-h-[300px] min-w-0 flex-col rounded-xl bg-card p-8 shadow-sm ring-1 ring-inset ring-border forced-colors:border",
+                "[@container(min-width:40rem)]:min-h-[240px] [@container(min-width:64rem)]:min-h-[300px]",
+                "[@container(min-width:40rem)]:[&:last-child:nth-child(odd)]:col-span-2 [@container(min-width:64rem)]:[&:last-child:nth-child(odd)]:col-span-1"
+              )}
+            >
+              <figure className="m-0 flex flex-1 flex-col gap-5">
+                <span aria-hidden className={cn("flex size-10 items-center justify-center rounded-full", TONE[item.tone])}>
+                  <Icon size={20} strokeWidth={1.5} absoluteStrokeWidth />
+                </span>
+                <h3 className="text-lg font-semibold text-foreground">
+                  <Isolated>{item.title}</Isolated>
+                </h3>
+                <SocialProofQuote quote={item.quote} className="text-base text-muted-foreground" />
+                <SocialProofAuthor person={item.author} photos={photos} className="mt-auto" />
+              </figure>
+            </li>
+          )
+        })}
+      </ul>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofBenefitTitleCardsCopy = COPY

package/registry/blocks/social-proof-benefit-title-cards/index.ts

@@ -0,0 +1,8 @@
+export {
+  SocialProofBenefitTitleCards,
+  socialProofBenefitTitleCardsCopy,
+  type SocialProofBenefitTitleCardsCopy,
+  type SocialProofBenefitTitleCardsProps,
+  type SocialProofBenefitTitleCardsItem,
+  type SocialProofBenefitTone,
+} from "./SocialProofBenefitTitleCards"

package/registry/blocks/social-proof-bracket-framed-quote/SocialProofBracketFramedQuote.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Isolated, SocialProofQuote, SocialProofSection, type SocialProofLocale } from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Bracket-Framed Quote.
+ *
+ * One quote on a `card` panel, up to 800px wide, framed by four 20px corner
+ * brackets drawn in 2px `foreground`: a label above the quote naming the
+ * customer, the quote in LG, the author in `primary`, and a figure in 5XL
+ * Light (4XL on phones) with what it measures. Desktop and Tablet set the
+ * figure at the start and its label at the end; phones stack them.
+ */
+
+export interface SocialProofBracketFramedQuoteCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** The line above the quote. Up to 41 characters in English, 31 in Arabic. */
+  eyebrow: React.ReactNode
+  /** Up to 290 characters in English, 284 in Arabic. */
+  quote: React.ReactNode
+  /** The author and role, in `primary`. Up to 48 characters in English, 50 in Arabic. */
+  author: React.ReactNode
+  /** The figure. Up to 5 characters in English, 9 in Arabic. */
+  stat: React.ReactNode
+  /** What the figure measures. Up to 60 characters in English, 56 in Arabic. */
+  statLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofBracketFramedQuoteCopy> = {
+  en: {
+    label: "What customers say",
+    eyebrow: "VERIFIED CUSTOMER — ARVENNA BANK",
+    quote: "“I've found Fasla to be a genuinely valuable thought partner. The relationship is as much about how we execute near-term as it is about where design is going.”",
+    author: "FAHAD SALEM · BRAND DIRECTOR",
+    stat: "99%",
+    statLabel: "OF SCREENS PASS BRAND REVIEW ON FIRST SUBMISSION",
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    eyebrow: "عميل موثّق: بنك أرفينا",
+    quote: "«وجدت في فاصلة شريكًا نتبادل معه الأفكار بحق، فعلاقتنا تشمل طريقة تنفيذنا اليوم بقدر ما تشمل مستقبل التصميم.»",
+    author: "فهد سالم، مدير العلامة التجارية",
+    stat: "99%",
+    statLabel: "من الشاشات تجتاز مراجعة العلامة من أول محاولة",
+  },
+}
+
+/** The four corner brackets, each drawing its two outer edges. */
+const CORNERS = [
+  "top-0 start-0 border-s-2 border-t-2",
+  "top-0 end-0 border-e-2 border-t-2",
+  "bottom-0 start-0 border-b-2 border-s-2",
+  "bottom-0 end-0 border-b-2 border-e-2",
+]
+
+export interface SocialProofBracketFramedQuoteProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofBracketFramedQuoteCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+}
+
+export function SocialProofBracketFramedQuote({
+  locale = "en",
+  label,
+  eyebrow,
+  quote,
+  author,
+  stat,
+  statLabel,
+  className,
+  ...props
+}: SocialProofBracketFramedQuoteProps) {
+  const copy = COPY[locale]
+  const line = eyebrow === undefined ? copy.eyebrow : eyebrow
+  const figure = stat === undefined ? copy.stat : stat
+
+  return (
+    <SocialProofSection aria-label={label ?? copy.label} className={cn("lg:px-24", className)} contentClassName="max-w-[800px]" {...props}>
+      <div className="relative flex w-full flex-col gap-6 bg-card p-12">
+        {CORNERS.map((corner) => (
+          <span key={corner} aria-hidden className={cn("pointer-events-none absolute size-5 border-foreground", corner)} />
+        ))}
+        {line ? (
+          <p className="text-xs font-medium text-muted-foreground">
+            <Isolated>{line}</Isolated>
+          </p>
+        ) : null}
+        <figure className="m-0 flex flex-col gap-6">
+          <SocialProofQuote quote={quote ?? copy.quote} className="text-lg text-foreground" />
+          <figcaption className="text-xs font-medium text-primary">
+            <cite className="not-italic">
+              <Isolated>{author ?? copy.author}</Isolated>
+            </cite>
+          </figcaption>
+        </figure>
+        {figure ? (
+          <p className="flex flex-col gap-2 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-end [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-6">
+            <span className="text-4xl font-light text-foreground [@container(min-width:40rem)]:text-5xl">
+              <bdi dir="ltr">{figure}</bdi>
+            </span>
+            <span className="text-xs font-medium text-muted-foreground [@container(min-width:40rem)]:text-end">
+              <Isolated>{statLabel ?? copy.statLabel}</Isolated>
+            </span>
+          </p>
+        ) : null}
+      </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 socialProofBracketFramedQuoteCopy = COPY

package/registry/blocks/social-proof-bracket-framed-quote/index.ts

@@ -0,0 +1,6 @@
+export {
+  SocialProofBracketFramedQuote,
+  socialProofBracketFramedQuoteCopy,
+  type SocialProofBracketFramedQuoteCopy,
+  type SocialProofBracketFramedQuoteProps,
+} from "./SocialProofBracketFramedQuote"

package/registry/blocks/social-proof-case-study-row/SocialProofCaseStudyRow.tsx

@@ -0,0 +1,210 @@
+import * as React from "react"
+import { ArrowRight, ArrowUpRight, Quote } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Case-Study Row.
+ *
+ * A header with an `All case studies` link at its end, over two tinted case
+ * rows. Each row has a portrait cut to a leaf (two opposite corners fully
+ * round), the company's wordmark in a `card` chip, two key figures with a
+ * hairline between them, a quote with its mark, the author and a `Read more`
+ * link. The second row is mirrored: its portrait is at the end. On Mobile the
+ * portrait sits above the copy and the second row is no longer mirrored.
+ *
+ * Static: no motion, nothing to press but the links.
+ */
+
+export interface SocialProofCaseStudy {
+  /** The key in `photos` for the portrait. */
+  id: string
+  /** The wordmark, in capitals. Up to 20 characters. */
+  company: string
+  /** Two key figures. */
+  kpis: { value: string; label: React.ReactNode }[]
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  /** Up to 19 characters in English, 19 in Arabic. */
+  name: string
+  role: React.ReactNode
+  /** The `info`, `success` tint. */
+  tone?: "info" | "success"
+}
+
+export interface SocialProofCaseStudyRowCopy {
+  /** Up to 46 characters in English, 40 in Arabic. */
+  heading: React.ReactNode
+  /** Up to 25 characters in English, 26 in Arabic. */
+  allLink: React.ReactNode
+  /** Up to 25 characters in English, 26 in Arabic. */
+  readMore: React.ReactNode
+  items: SocialProofCaseStudy[]
+}
+
+const COPY: Record<SocialProofLocale, SocialProofCaseStudyRowCopy> = {
+  en: {
+    heading: "Proof that compounds",
+    allLink: "All case studies",
+    readMore: "Read more",
+    items: [
+      {
+        id: "bader-al-ghamdi",
+        company: "BEACON ANALYTICS",
+        kpis: [
+          { value: "28%", label: "increase in activation rate" },
+          { value: "2.1×", label: "faster dashboard delivery" },
+        ],
+        quote: "“Fasla became the heartbeat of our product UI — every squad speaks the same visual language now.”",
+        name: "Bader Al-Ghamdi",
+        role: "Chief Technology Officer",
+        tone: "info",
+      },
+      {
+        id: "majed-nouri",
+        company: "ARCADIA HEALTH",
+        kpis: [
+          { value: "3.4×", label: "faster clinical screen reviews" },
+          { value: "97%", label: "accessibility audit pass rate" },
+        ],
+        quote: "“Because every screen flows through one system, our patient tools adapt to what each clinic actually needs.”",
+        name: "Majed Nouri",
+        role: "Chief Operating Officer",
+        tone: "success",
+      },
+    ],
+  },
+  ar: {
+    heading: "نتائج تتضاعف",
+    allLink: "كل دراسات الحالة",
+    readMore: "اقرأ المزيد",
+    items: [
+      {
+        id: "bader-al-ghamdi",
+        company: "BEACON ANALYTICS",
+        kpis: [
+          { value: "28%", label: "زيادة في معدل التفعيل" },
+          { value: "2.1×", label: "أسرع في تسليم لوحات المعلومات" },
+        ],
+        quote: "«صارت فاصلة أساس واجهة منتجنا، وصارت فرقنا كلها تتحدث اللغة البصرية نفسها.»",
+        name: "بدر الغامدي",
+        role: "الرئيس التقني",
+        tone: "info",
+      },
+      {
+        id: "majed-nouri",
+        company: "ARCADIA HEALTH",
+        kpis: [
+          { value: "3.4×", label: "أسرع في مراجعة الشاشات السريرية" },
+          { value: "97%", label: "معدل اجتياز تدقيق إمكانية الوصول" },
+        ],
+        quote: "«لأن كل شاشة تمر عبر نظام واحد، تتكيّف أدوات المرضى لدينا مع ما تحتاجه كل عيادة فعلًا.»",
+        name: "ماجد نوري",
+        role: "الرئيس التنفيذي للعمليات",
+        tone: "success",
+      },
+    ],
+  },
+}
+
+const TINT = { info: "bg-info/10", success: "bg-success/10" }
+
+export interface SocialProofCaseStudyRowProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofCaseStudyRowCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Portraits by person id. Without them the leaf shows its `muted` ground. */
+  photos?: SocialProofPhotos
+  /** Where the links go. */
+  href?: string
+}
+
+export function SocialProofCaseStudyRow({ locale = "en", heading, allLink, readMore, items, photos, href = "#", className, ...props }: SocialProofCaseStudyRowProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const link = "inline-flex items-center gap-1.5 rounded-sm text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  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={cn(link, "shrink-0")}>
+          {allLink ?? copy.allLink}
+          <ArrowUpRight aria-hidden size={16} className="rtl:-scale-x-100" />
+        </a>
+      </header>
+      <div className="flex w-full flex-col gap-10">
+        {(items ?? copy.items).map((item, i) => (
+          <article
+            key={item.id}
+            className={cn(
+              "flex flex-col gap-6 rounded-xl p-6 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-10 [@container(min-width:40rem)]:p-8",
+              TINT[item.tone ?? "info"],
+              i % 2 === 1 && "[@container(min-width:40rem)]:flex-row-reverse"
+            )}
+          >
+            <SocialProofPhoto
+              src={photos?.[item.id]}
+              className={cn(
+                "h-[140px] w-[180px] shrink-0 [@container(min-width:40rem)]:size-[200px] [@container(min-width:64rem)]:size-[280px]",
+                // A leaf: two opposite corners fully round. It mirrors with the row.
+                i % 2 === 0 ? "rounded-es-[100%] rounded-se-[100%]" : "rounded-ee-[100%] rounded-ss-[100%]"
+              )}
+            />
+            <div className="flex min-w-0 flex-1 flex-col gap-5">
+              <div className="flex flex-col gap-4 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start [@container(min-width:64rem)]:justify-between">
+                <p className="w-fit rounded-md bg-card px-3 py-1.5 text-xs font-bold text-foreground">
+                  <bdi dir="ltr">{item.company}</bdi>
+                </p>
+                <ul className="m-0 flex list-none gap-5 p-0">
+                  {item.kpis.map((kpi, k) => (
+                    <li key={k} className={cn("flex w-[140px] flex-col gap-0.5", k > 0 && "border-s border-border ps-5")}>
+                      <span className="text-xl font-semibold text-foreground">
+                        <Isolated>{kpi.value}</Isolated>
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        <Isolated>{kpi.label}</Isolated>
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <figure className="m-0 flex flex-col gap-5">
+                <Quote aria-hidden size={20} strokeWidth={1.5} className="text-foreground rtl:-scale-x-100" />
+                <blockquote className="m-0 text-base text-foreground [@container(min-width:40rem)]:text-lg">
+                  <p>
+                    <Isolated>{item.quote}</Isolated>
+                  </p>
+                </blockquote>
+                <figcaption className="flex items-end justify-between gap-4">
+                  <span className="flex min-w-0 flex-col">
+                    <cite className="text-sm font-medium not-italic text-foreground">{item.name}</cite>
+                    <span className="text-xs text-muted-foreground">{item.role}</span>
+                  </span>
+                  <a href={href} className={cn(link, "shrink-0")}>
+                    {readMore ?? copy.readMore}
+                    <ArrowRight aria-hidden size={16} className="rtl:rotate-180" />
+                  </a>
+                </figcaption>
+              </figure>
+            </div>
+          </article>
+        ))}
+      </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 socialProofCaseStudyRowCopy = COPY

package/registry/blocks/social-proof-case-study-row/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofCaseStudyRow,
+  socialProofCaseStudyRowCopy,
+  type SocialProofCaseStudy,
+  type SocialProofCaseStudyRowCopy,
+  type SocialProofCaseStudyRowProps,
+} from "./SocialProofCaseStudyRow"

package/registry/blocks/social-proof-centered-logo-spotlight/SocialProofCenteredLogoSpotlight.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import {
+  Isolated,
+  SocialProofQuote,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Centered Logo Spotlight.
+ *
+ * One quote, centred in a 768px column: the customer's wordmark (a `primary`
+ * logomark and the name in SM Bold) above the quote in 2XL Light (XL on
+ * phones), and the author under it, the Avatar drawn at 48px over the name
+ * and role. There is no heading; the quote is the section.
+ */
+
+export interface SocialProofCenteredLogoSpotlightCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** The company's wordmark, set beside the logomark. Up to 20 characters. */
+  company: React.ReactNode
+  /** Up to 164 characters in English, 133 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+}
+
+const TARIQ = { id: "tariq-zaki" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofCenteredLogoSpotlightCopy> = {
+  en: {
+    label: "What customers say",
+    company: "MARLOW HR",
+    quote: "“Fasla turned our design language into a growth channel. Every launch ships looking exactly like us — on the first try.”",
+    author: { ...TARIQ, name: "Tariq Zaki", role: "Head of Product, Marlow HR" },
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    company: "MARLOW HR",
+    quote: "«جعلت فاصلة هويتنا البصرية مصدرًا للنمو، فكل إطلاق يخرج بصورتنا تمامًا من المحاولة الأولى.»",
+    author: { ...TARIQ, name: "طارق زكي", role: "رئيس المنتج، مارلو إتش آر" },
+  },
+}
+
+export interface SocialProofCenteredLogoSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofCenteredLogoSpotlightCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Avatar photos by person id. Without them the avatar shows initials. */
+  photos?: SocialProofPhotos
+}
+
+export function SocialProofCenteredLogoSpotlight({
+  locale = "en",
+  label,
+  company,
+  quote,
+  author,
+  photos,
+  className,
+  ...props
+}: SocialProofCenteredLogoSpotlightProps) {
+  const copy = COPY[locale]
+  const person = author ?? copy.author
+  const wordmark = company === undefined ? copy.company : company
+
+  return (
+    <SocialProofSection aria-label={label ?? copy.label} className={cn("lg:py-28", className)} contentClassName="max-w-[768px]" {...props}>
+      <figure className="m-0 flex w-full flex-col items-center gap-8 text-center">
+        {wordmark ? (
+          <p className="flex items-center gap-2 text-sm font-bold text-foreground">
+            <span aria-hidden className="size-6 shrink-0 rounded-sm bg-primary" />
+            <bdi>{wordmark}</bdi>
+          </p>
+        ) : null}
+        <SocialProofQuote quote={quote ?? copy.quote} className="text-xl font-light text-foreground [@container(min-width:40rem)]:text-2xl" />
+        <figcaption className="flex flex-col items-center gap-2">
+          <Avatar aria-hidden size="32" radius="rounded" src={photos?.[person.id]} name={person.name} className="size-12" />
+          <span className="flex flex-col gap-0.5">
+            <cite className="text-sm font-medium not-italic text-foreground">{person.name}</cite>
+            <span className="text-xs text-muted-foreground">
+              <Isolated>{person.role}</Isolated>
+            </span>
+          </span>
+        </figcaption>
+      </figure>
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofCenteredLogoSpotlightCopy = COPY

package/registry/blocks/social-proof-centered-logo-spotlight/index.ts

@@ -0,0 +1,6 @@
+export {
+  SocialProofCenteredLogoSpotlight,
+  socialProofCenteredLogoSpotlightCopy,
+  type SocialProofCenteredLogoSpotlightCopy,
+  type SocialProofCenteredLogoSpotlightProps,
+} from "./SocialProofCenteredLogoSpotlight"