@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/social-proof-classic-trio-grid/SocialProofClassicTrioGrid.tsx

@@ -0,0 +1,138 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import {
+  SocialProofAuthor,
+  SocialProofHeader,
+  SocialProofQuote,
+  SocialProofRule,
+  SocialProofSection,
+  SocialProofStars,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Classic Trio Grid.
+ *
+ * A centred header over three testimonial cards. Each card holds five stars,
+ * the quote, a hairline and its author. The cards hug their content: a longer
+ * quote makes its card taller, and the cards in a row share the tallest one's
+ * height.
+ *
+ * Desktop sets the three cards in one row; Tablet two to a row and the third
+ * across the full width; phones one under another.
+ */
+
+export interface SocialProofClassicTrioGridItem {
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+}
+
+export interface SocialProofClassicTrioGridCopy {
+  heading: React.ReactNode
+  description: React.ReactNode
+  /** The cards, in reading order. Three, as Figma lays them out. */
+  items: SocialProofClassicTrioGridItem[]
+}
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofClassicTrioGridCopy> = {
+  en: {
+    heading: "Loved by the teams that ship",
+    description: "Real feedback from designers and engineers building with Fasla every day.",
+    items: [
+      {
+        quote: "“Fasla replaced three tools the day we onboarded. Our design reviews went from hours of nitpicking to actually shipping.”",
+        author: { id: "sami-naji", name: "Sami Naji", role: "Product Lead, Nimbus Labs" },
+      },
+      {
+        quote: "“The tokens map one-to-one with our codebase. Dark mode took an afternoon instead of a quarter.”",
+        author: { id: "khalid-saad", name: "Khalid Saad", role: "Frontend Lead, Atlas Freight" },
+      },
+      {
+        quote: "“Every new hire is productive in week one. The documentation reads like it was written for humans.”",
+        author: { id: "rashed-al-amri", name: "Rashed Al-Amri", role: "Design Ops Manager, Willow & Co" },
+      },
+    ],
+  },
+  ar: {
+    heading: "خيار الفرق التي تُطلق منتجاتها",
+    description: "آراء حقيقية من مصممين ومهندسين يعملون بفاصلة كل يوم.",
+    items: [
+      {
+        quote: "«أغنتنا فاصلة عن ثلاث أدوات من اليوم الأول، وصارت مراجعات التصميم تنتهي بالإطلاق لا بساعات من التدقيق.»",
+        author: { id: "sami-naji", name: "سامي ناجي", role: "قائد المنتج، نيمبوس لابس" },
+      },
+      {
+        quote: "«تتطابق رموز التصميم مع شيفرتنا تطابقًا تامًا، وأنجزنا الوضع الداكن في نصف يوم بدل ربع سنة.»",
+        author: { id: "khalid-saad", name: "خالد سعد", role: "قائد الواجهات الأمامية، أطلس فريت" },
+      },
+      {
+        quote: "«يبدأ كل موظف جديد العمل الفعلي في أسبوعه الأول، فالتوثيق مكتوب بلغة يفهمها الجميع.»",
+        author: { id: "rashed-al-amri", name: "راشد العمري", role: "مدير عمليات التصميم، ويلو آند كو" },
+      },
+    ],
+  },
+}
+
+export interface SocialProofClassicTrioGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofClassicTrioGridCopy> {
+  /** 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 SocialProofClassicTrioGrid({
+  locale = "en",
+  heading,
+  description,
+  items,
+  photos,
+  className,
+  ...props
+}: SocialProofClassicTrioGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <SocialProofSection labelledBy={headingId} className={className} contentClassName="gap-16" {...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) => (
+          <li
+            key={index}
+            className={cn(
+              "min-w-0 rounded-xl bg-card p-8 shadow-sm ring-1 ring-inset ring-border forced-colors:border",
+              "[@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-col gap-5">
+              <SocialProofStars locale={locale} />
+              <SocialProofQuote quote={item.quote} className="text-base text-foreground" />
+              <SocialProofRule />
+              <SocialProofAuthor person={item.author} photos={photos} roleSize="sm" />
+            </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 socialProofClassicTrioGridCopy = COPY

package/registry/blocks/social-proof-classic-trio-grid/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofClassicTrioGrid,
+  socialProofClassicTrioGridCopy,
+  type SocialProofClassicTrioGridCopy,
+  type SocialProofClassicTrioGridProps,
+  type SocialProofClassicTrioGridItem,
+} from "./SocialProofClassicTrioGrid"

package/registry/blocks/social-proof-dark-editorial-split/SocialProofDarkEditorialSplit.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+import { Quote } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofPhoto,
+  SocialProofQuote,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Dark Editorial Split.
+ *
+ * One quote on the inverse band (`background-inverse`, its text
+ * `foreground-inverse`): a quote mark, the quote in 2XL Light (XL on phones)
+ * and the author's name and role on one line, beside a portrait of the
+ * author. Desktop sets the portrait 480px square at the end; Tablet 300 by
+ * 380; phones put it full width above the quote, 340px tall.
+ */
+
+export interface SocialProofDarkEditorialSplitCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** Up to 164 characters in English, 133 in Arabic. */
+  quote: React.ReactNode
+  /** The portrait is `photos[author.id]`. */
+  author: SocialProofPerson
+}
+
+const YOUSEF = { id: "yousef-amin" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofDarkEditorialSplitCopy> = {
+  en: {
+    label: "What customers say",
+    quote: "“Fasla set a new bar for quality — and the team hit it while shipping ahead of schedule.”",
+    author: { ...YOUSEF, name: "Yousef Amin", role: "Co-founder, Halcyon Games" },
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    quote: "«رفعت فاصلة سقف الجودة، وبلغه الفريق وأطلق قبل موعده.»",
+    author: { ...YOUSEF, name: "يوسف أمين", role: "شريك مؤسس، هالسيون غيمز" },
+  },
+}
+
+/** After the name, before the role: a comma in each language. */
+const NAME_SEPARATOR: Record<SocialProofLocale, string> = { en: ",", ar: "،" }
+
+export interface SocialProofDarkEditorialSplitProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofDarkEditorialSplitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** Photos by person id: the portrait is the author's. Without it the slot is empty. */
+  photos?: SocialProofPhotos
+}
+
+export function SocialProofDarkEditorialSplit({
+  locale = "en",
+  label,
+  quote,
+  author,
+  photos,
+  className,
+  ...props
+}: SocialProofDarkEditorialSplitProps) {
+  const copy = COPY[locale]
+  const person = author ?? copy.author
+
+  return (
+    <SocialProofSection
+      aria-label={label ?? copy.label}
+      className={cn("bg-background-inverse", className)}
+      contentClassName="flex-col gap-8 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-10 [@container(min-width:64rem)]:gap-20"
+      {...props}
+    >
+      <figure className="m-0 flex w-full min-w-0 flex-col gap-8 text-foreground-inverse [@container(min-width:40rem)]:w-auto [@container(min-width:40rem)]:flex-1">
+        <Quote aria-hidden size={28} strokeWidth={1.5} absoluteStrokeWidth />
+        <SocialProofQuote quote={quote ?? copy.quote} className="text-xl font-light [@container(min-width:40rem)]:text-2xl" />
+        <figcaption className="text-sm">
+          <cite className="font-medium not-italic">
+            {person.name}
+            {NAME_SEPARATOR[locale]}
+          </cite>{" "}
+          <span>
+            <Isolated>{person.role}</Isolated>
+          </span>
+        </figcaption>
+      </figure>
+      <SocialProofPhoto
+        src={photos?.[person.id]}
+        className={cn(
+          "order-first h-[340px] w-full shrink-0 rounded-xl bg-foreground-inverse/10",
+          "[@container(min-width:40rem)]:order-none [@container(min-width:40rem)]:h-[380px] [@container(min-width:40rem)]:w-[300px]",
+          "[@container(min-width:64rem)]:size-[480px]"
+        )}
+      />
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofDarkEditorialSplitCopy = COPY

package/registry/blocks/social-proof-dark-editorial-split/index.ts

@@ -0,0 +1,6 @@
+export {
+  SocialProofDarkEditorialSplit,
+  socialProofDarkEditorialSplitCopy,
+  type SocialProofDarkEditorialSplitCopy,
+  type SocialProofDarkEditorialSplitProps,
+} from "./SocialProofDarkEditorialSplit"

package/registry/blocks/social-proof-giant-quote-duo/SocialProofGiantQuoteDuo.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight, Quote } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import {
+  Isolated,
+  SocialProofAuthor,
+  SocialProofQuote,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Giant Quote Duo.
+ *
+ * Two large quotes side by side, with no heading: the first on a 10%
+ * `primary` tint, the second on solid `primary` with `primary-foreground`
+ * text. A giant quote mark sits cropped in each card's top end corner at 8%
+ * opacity. The quote is at the top and the author (Avatar 24) at the bottom
+ * of a card at least 420px tall (360 on Tablet, 300 on phones). Under the
+ * pair, a line with a figure and a link to more stories.
+ *
+ * Desktop and Tablet set the two cards side by side, the footer line and the
+ * link at either end; phones stack everything.
+ */
+
+export interface SocialProofGiantQuoteDuoItem {
+  /** Up to 154 characters in English, 136 in Arabic. */
+  quote: React.ReactNode
+  author: SocialProofPerson
+}
+
+export interface SocialProofGiantQuoteDuoLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface SocialProofGiantQuoteDuoCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** The two quotes, light card first. */
+  items: [SocialProofGiantQuoteDuoItem, SocialProofGiantQuoteDuoItem]
+  /** The line under the cards. Hidden when empty. */
+  note: React.ReactNode
+  /** The link at the end of that line. Hidden when empty. Up to 25 characters in English, 26 in Arabic. */
+  link: SocialProofGiantQuoteDuoLink | null
+}
+
+const HANI = { id: "hani-jaber" } as const
+const KHALID = { id: "khalid-saad" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofGiantQuoteDuoCopy> = {
+  en: {
+    label: "What customers say",
+    items: [
+      {
+        quote: "“You just have to build one screen with it. You'll feel it immediately.”",
+        author: { ...HANI, name: "Hani Jaber", role: "Staff Engineer, Clearfen" },
+      },
+      {
+        quote: "“Our speed is intense and Fasla keeps us action-biased.”",
+        author: { ...KHALID, name: "Khalid Saad", role: "Frontend Lead, Atlas Freight" },
+      },
+    ],
+    note: "Fasla powers 2,300+ product teams — from seed startups to global enterprises.",
+    link: { label: "Customer stories", href: "#" },
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    items: [
+      {
+        quote: "«يكفي أن تبني شاشة واحدة بها. ستشعر بالفرق فورًا.»",
+        author: { ...HANI, name: "هاني جابر", role: "مهندس أول، كليرفين" },
+      },
+      {
+        quote: "«نعمل بإيقاع سريع، وفاصلة تُبقي تركيزنا على التنفيذ.»",
+        author: { ...KHALID, name: "خالد سعد", role: "قائد الواجهات الأمامية، أطلس فريت" },
+      },
+    ],
+    note: "يعتمد على فاصلة أكثر من 2,300 فريق منتج، من الشركات الناشئة إلى المؤسسات العالمية.",
+    link: { label: "قصص العملاء", href: "#" },
+  },
+}
+
+export interface SocialProofGiantQuoteDuoProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<SocialProofGiantQuoteDuoCopy> {
+  /** 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 SocialProofGiantQuoteDuo({ locale = "en", label, items, note, link, photos, className, ...props }: SocialProofGiantQuoteDuoProps) {
+  const copy = COPY[locale]
+  const pair = items ?? copy.items
+  const line = note === undefined ? copy.note : note
+  const more = link === undefined ? copy.link : link
+
+  return (
+    <SocialProofSection aria-label={label ?? copy.label} className={className} contentClassName="gap-8" {...props}>
+      <ul className="grid w-full grid-cols-1 gap-5 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:40rem)]:gap-6">
+        {pair.map((item, index) => {
+          const dark = index === 1
+          return (
+            <li
+              key={index}
+              className={cn(
+                "relative flex min-h-[300px] flex-col overflow-hidden rounded-xl p-10 [@container(min-width:40rem)]:min-h-[360px] [@container(min-width:64rem)]:min-h-[420px]",
+                dark ? "bg-primary text-primary-foreground" : "bg-primary/10 text-foreground"
+              )}
+            >
+              <Quote aria-hidden size={180} strokeWidth={1.5} className="pointer-events-none absolute -end-[30px] -top-[30px] opacity-[0.08]" />
+              <figure className="relative m-0 flex flex-1 flex-col justify-between gap-6">
+                <SocialProofQuote quote={item.quote} className="text-xl font-medium" />
+                <SocialProofAuthor
+                  person={item.author}
+                  photos={photos}
+                  avatarSize="24"
+                  gap="2.5"
+                  roleClassName={dark ? "text-primary-foreground" : "text-foreground"}
+                />
+              </figure>
+            </li>
+          )
+        })}
+      </ul>
+      {line || more ? (
+        <div className="flex w-full flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between">
+          {line ? (
+            <p className="text-sm text-muted-foreground">
+              <Isolated>{line}</Isolated>
+            </p>
+          ) : null}
+          {more ? (
+            <a
+              href={more.href}
+              className="inline-flex shrink-0 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"
+            >
+              <Isolated>{more.label}</Isolated>
+              <ArrowRight aria-hidden size={16} className="rtl:rotate-180" />
+            </a>
+          ) : null}
+        </div>
+      ) : null}
+    </SocialProofSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofGiantQuoteDuoCopy = COPY

package/registry/blocks/social-proof-giant-quote-duo/index.ts

@@ -0,0 +1,8 @@
+export {
+  SocialProofGiantQuoteDuo,
+  socialProofGiantQuoteDuoCopy,
+  type SocialProofGiantQuoteDuoCopy,
+  type SocialProofGiantQuoteDuoProps,
+  type SocialProofGiantQuoteDuoItem,
+  type SocialProofGiantQuoteDuoLink,
+} from "./SocialProofGiantQuoteDuo"

package/registry/blocks/social-proof-highlighted-phrase-spotlight/SocialProofHighlightedPhraseSpotlight.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import {
+  Isolated,
+  SocialProofSection,
+  type SocialProofLocale,
+  type SocialProofPerson,
+  type SocialProofPhotos,
+} from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Highlighted-Phrase Spotlight.
+ *
+ * One quote, centred, in 3XL Medium (2XL on phones), with the phrases that
+ * carry the result set in `info`. Under it the author on one line: the Avatar
+ * drawn at 40px, the name, and the role in `muted-foreground`.
+ *
+ * Figma colours the last letter of "finished" `primary`, one letter apart
+ * from the rest of its phrase; that reads as a slip, so the whole phrase is
+ * `info` here.
+ */
+
+/** A run of the quote: plain text, or a phrase set in `info`. */
+export type SocialProofQuotePart = string | { highlight: string }
+
+export interface SocialProofHighlightedPhraseSpotlightCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** The quote as runs, the highlighted phrases as `{ highlight }`. Up to 164 characters in English, 133 in Arabic. */
+  quote: SocialProofQuotePart[]
+  author: SocialProofPerson
+}
+
+const SAMI = { id: "sami-naji" } as const
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofHighlightedPhraseSpotlightCopy> = {
+  en: {
+    label: "What customers say",
+    quote: [
+      "“We didn't buy a component library. We bought back ",
+      { highlight: "two design days a week" },
+      " — and every release ",
+      { highlight: "finally feels finished" },
+      ".”",
+    ],
+    author: { ...SAMI, name: "Sami Naji", role: "Product Lead, Nimbus Labs" },
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    quote: [
+      "«لم نشترِ مكتبة مكوّنات، بل استعدنا ",
+      { highlight: "يومين من التصميم كل أسبوع" },
+      "، وصار كل إصدار ",
+      { highlight: "يبدو مكتملًا" },
+      " أخيرًا.»",
+    ],
+    author: { ...SAMI, name: "سامي ناجي", role: "قائد المنتج، نيمبوس لابس" },
+  },
+}
+
+/** Between the name and the role, as Figma writes it: a middle dot in English, a comma after the name in Arabic. */
+const SEPARATOR: Record<SocialProofLocale, { afterName: string; beforeRole: string }> = {
+  en: { afterName: "", beforeRole: "· " },
+  ar: { afterName: "،", beforeRole: "" },
+}
+
+export interface SocialProofHighlightedPhraseSpotlightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofHighlightedPhraseSpotlightCopy> {
+  /** 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 SocialProofHighlightedPhraseSpotlight({
+  locale = "en",
+  label,
+  quote,
+  author,
+  photos,
+  className,
+  ...props
+}: SocialProofHighlightedPhraseSpotlightProps) {
+  const copy = COPY[locale]
+  const parts = quote ?? copy.quote
+  const person = author ?? copy.author
+  const separator = SEPARATOR[locale]
+
+  return (
+    <SocialProofSection aria-label={label ?? copy.label} className={cn("lg:py-28", className)} contentClassName="gap-10" {...props}>
+      <figure className="m-0 flex w-full flex-col items-center gap-10 text-center">
+        <blockquote className="m-0">
+          <p className="text-2xl font-medium text-foreground [@container(min-width:40rem)]:text-3xl">
+            {parts.map((part, index) =>
+              typeof part === "string" ? (
+                <Isolated key={index}>{part}</Isolated>
+              ) : (
+                <mark key={index} className="bg-transparent text-info">
+                  <Isolated>{part.highlight}</Isolated>
+                </mark>
+              )
+            )}
+          </p>
+        </blockquote>
+        <figcaption className="flex flex-wrap items-center justify-center gap-3 text-sm">
+          <Avatar aria-hidden size="32" radius="rounded" src={photos?.[person.id]} name={person.name} className="size-10 shrink-0" />
+          <cite className="font-medium not-italic text-foreground">
+            {person.name}
+            {separator.afterName}
+          </cite>
+          <span className="text-muted-foreground">
+            {separator.beforeRole}
+            <Isolated>{person.role}</Isolated>
+          </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 socialProofHighlightedPhraseSpotlightCopy = COPY

package/registry/blocks/social-proof-highlighted-phrase-spotlight/index.ts

@@ -0,0 +1,7 @@
+export {
+  SocialProofHighlightedPhraseSpotlight,
+  socialProofHighlightedPhraseSpotlightCopy,
+  type SocialProofHighlightedPhraseSpotlightCopy,
+  type SocialProofHighlightedPhraseSpotlightProps,
+  type SocialProofQuotePart,
+} from "./SocialProofHighlightedPhraseSpotlight"

package/registry/blocks/social-proof-overlay-photo-quote/SocialProofOverlayPhotoQuote.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Isolated, SocialProofQuote, type SocialProofLocale, type SocialProofPhotos } from "../social-proof/social-proof"
+
+/*
+ * Figma: `Social Proof` (46368:3361), Type=Overlay Photo Quote.
+ *
+ * A photograph across the whole section, under a dark scrim, with the quote
+ * at the bottom start: the company in XS Bold, the quote in 2XL Medium (XL
+ * on phones) and the author on one line. The section is at least 560px tall
+ * on Desktop, 440 on Tablet and 480 on phones, and grows with longer copy.
+ *
+ * The scrim is dark and the text light in both modes, as Figma draws them: a
+ * photograph does not change with the theme. Figma's scrim is black at 45%;
+ * here it is the `backdrop-overlay` token at its own strength (60% light, 80%
+ * dark), as Hero's Framed Full-Bleed and Gallery's Full-Bleed Slider set it,
+ * so the light type holds its contrast over a bright photo. The text is the
+ * inverse tokens in light mode and the page's own in dark mode.
+ */
+
+export interface SocialProofOverlayPhotoQuoteCopy {
+  /** Names the section for assistive tech, since the block has no visible heading. */
+  label: string
+  /** The company, above the quote. Up to 20 characters. */
+  company: React.ReactNode
+  /** Up to 164 characters in English, 133 in Arabic. */
+  quote: React.ReactNode
+  /** The author, role and company on one line. Up to 48 characters in English, 50 in Arabic. */
+  author: React.ReactNode
+  /** Describes the photograph. "" when it is only atmosphere. */
+  photoAlt: string
+}
+
+/** Figma's copy, English and Arabic. Every person and company is invented. */
+const COPY: Record<SocialProofLocale, SocialProofOverlayPhotoQuoteCopy> = {
+  en: {
+    label: "What customers say",
+    company: "QUILLFIELD",
+    quote: "“Half our team works from the field. Fasla is why the app they carry looks as considered as the site we pitch with.”",
+    author: "Ziad Karam — CEO, Quillfield",
+    photoAlt: "",
+  },
+  ar: {
+    label: "ما يقوله العملاء",
+    company: "كويلفيلد",
+    quote: "«نصف فريقنا يعمل في الميدان، وبفضل فاصلة يبدو التطبيق الذي يستخدمونه متقنًا كموقعنا الذي نقدّم به عروضنا.»",
+    author: "زياد كرم، الرئيس التنفيذي، كويلفيلد",
+    photoAlt: "",
+  },
+}
+
+/** The key in `photos` for the photograph. */
+export const SOCIAL_PROOF_OVERLAY_PHOTO = "overlay-photo-quote"
+
+export interface SocialProofOverlayPhotoQuoteProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<SocialProofOverlayPhotoQuoteCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: SocialProofLocale
+  /** The photograph is `photos["overlay-photo-quote"]`. Without it the section shows its `muted` ground under the scrim. */
+  photos?: SocialProofPhotos
+}
+
+export function SocialProofOverlayPhotoQuote({
+  locale = "en",
+  label,
+  company,
+  quote,
+  author,
+  photoAlt,
+  photos,
+  className,
+  ...props
+}: SocialProofOverlayPhotoQuoteProps) {
+  const copy = COPY[locale]
+  const src = photos?.[SOCIAL_PROOF_OVERLAY_PHOTO]
+  const name = company === undefined ? copy.company : company
+
+  return (
+    <section
+      aria-label={label ?? copy.label}
+      className={cn(
+        "relative isolate flex min-h-[480px] [container-type:inline-size] flex-col justify-end overflow-hidden bg-muted px-4 py-8 md:min-h-[440px] md:px-6 md:py-14 lg:min-h-[560px] lg:px-28 lg:py-24",
+        className
+      )}
+      {...props}
+    >
+      {src ? <img src={src} alt={photoAlt ?? copy.photoAlt} decoding="async" className="absolute inset-0 -z-10 size-full object-cover" /> : null}
+      <div aria-hidden className="absolute inset-0 -z-10 bg-backdrop-overlay" />
+      <figure className="m-0 flex w-full flex-col gap-4 text-foreground-inverse dark:text-foreground [@container(min-width:40rem)]:max-w-[600px] [@container(min-width:64rem)]:max-w-[760px]">
+        {name ? (
+          <p className="text-xs font-bold">
+            <bdi>{name}</bdi>
+          </p>
+        ) : null}
+        <SocialProofQuote quote={quote ?? copy.quote} className="text-xl font-medium [@container(min-width:40rem)]:text-2xl" />
+        <figcaption className="text-sm">
+          <Isolated>{author ?? copy.author}</Isolated>
+        </figcaption>
+      </figure>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const socialProofOverlayPhotoQuoteCopy = COPY