@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/logo-cloud-scatter-field/LogoCloudScatterField.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Scatter Field.
+ *
+ * Twelve logo tiles scattered over a faint lattice of `muted` squares, around
+ * a centred message on a `background` card: a heading, a line of text and a
+ * button. The lattice is decoration; the tiles are the list of logos.
+ *
+ * From Tablet up the stage is a fixed height and each tile is placed at
+ * Figma's offset. Across the width an offset is a share of the room the tile
+ * can move in (the stage less one tile), so at Figma's 640 and 1248 the tiles
+ * land on Figma's spots, and at any width between they spread or close up
+ * without leaving the stage. The message card narrows with the stage, so the
+ * tiles beside it are never covered. On a phone the tiles sit in two rows of
+ * six, above and below the message, as Figma's Mobile does.
+ *
+ * Offsets are logical (`start`), so in Arabic the field mirrors: the first
+ * tile sits at the top right. The logos themselves are never flipped. Figma's
+ * RTL variants keep the LTR positions; the code mirrors, as every block does.
+ *
+ * The heading breaks where Figma's does, after its first phrase. At Tablet
+ * the Arabic heading is one step smaller, as Figma sets it, so its second
+ * phrase still fits on one line.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudScatterFieldLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its tile, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudScatterFieldAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface LogoCloudScatterFieldCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. Hidden when null. */
+  description: React.ReactNode
+  /** The button under the text. Hidden when null. */
+  action: LogoCloudScatterFieldAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudScatterFieldCopy> = {
+  en: {
+    heading: (
+      <>
+        Seamless integrations
+        <br />
+        with your entire stack
+      </>
+    ),
+    description: "Fasla connects to the tools your team already lives in — no glue code required.",
+    action: { label: "See all integrations", href: "#integrations" },
+  },
+  ar: {
+    heading: (
+      <>
+        تكاملات سلسة
+        <br />
+        مع منظومتك التقنية بالكامل
+      </>
+    ),
+    description: "تتصل فاصلة بالأدوات التي يعمل بها فريقك يوميًا، دون الحاجة إلى شيفرة ربط.",
+    action: { label: "اطّلع على كل التكاملات", href: "#integrations" },
+  },
+}
+
+/*
+ * Each of the twelve spots, in Figma's order. On a phone: six across the top
+ * and six across the bottom, evenly spread. From Tablet up: `start` is the
+ * tile's Figma offset as a share of the stage less one tile (x / 592 at
+ * Tablet, x / 1184 at Desktop), `top` is Figma's offset in pixels.
+ */
+const SPOTS = [
+  "top-2 start-0 md:top-5 md:start-[calc((100%-48px)*0.1166)] lg:top-3 lg:start-[calc((100%-64px)*0.0498)]",
+  "top-2 start-[calc((100%-40px)*0.2)] md:top-5 md:start-[calc((100%-48px)*0.2804)] lg:top-3 lg:start-[calc((100%-64px)*0.2162)]",
+  "top-2 start-[calc((100%-40px)*0.4)] md:top-5 md:start-[calc((100%-48px)*0.5203)] lg:top-3 lg:start-[calc((100%-64px)*0.4578)]",
+  "top-2 start-[calc((100%-40px)*0.6)] md:top-5 md:start-[calc((100%-48px)*0.7601)] lg:top-3 lg:start-[calc((100%-64px)*0.6976)]",
+  "top-2 start-[calc((100%-40px)*0.8)] md:top-5 md:start-[calc((100%-48px)*0.9459)] lg:top-3 lg:start-[calc((100%-64px)*0.9451)]",
+  "top-2 start-[calc(100%-40px)] md:top-[362px] md:start-[calc((100%-48px)*0.0676)] lg:top-[246px] lg:start-[calc((100%-64px)*0.0101)]",
+  "top-[calc(100%-48px)] start-0 md:top-[362px] md:start-[calc((100%-48px)*0.2534)] lg:top-[350px] lg:start-[calc((100%-64px)*0.1723)]",
+  "top-[calc(100%-48px)] start-[calc((100%-40px)*0.2)] md:top-[362px] md:start-[calc((100%-48px)*0.5068)] lg:top-[366px] lg:start-[calc((100%-64px)*0.4527)]",
+  "top-[calc(100%-48px)] start-[calc((100%-40px)*0.4)] md:top-[362px] md:start-[calc((100%-48px)*0.7601)] lg:top-[366px] lg:start-[calc((100%-64px)*0.7069)]",
+  "top-[calc(100%-48px)] start-[calc((100%-40px)*0.6)] md:top-[362px] md:start-[calc((100%-48px)*0.9459)] lg:top-[366px] lg:start-[calc((100%-64px)*0.9451)]",
+  "top-[calc(100%-48px)] start-[calc((100%-40px)*0.8)] md:top-[186px] md:start-[calc((100%-48px)*0.0135)] lg:top-[158px] lg:start-[calc((100%-64px)*0.902)]",
+  "top-[calc(100%-48px)] start-[calc(100%-40px)] md:top-[166px] md:start-[calc((100%-48px)*0.9932)] lg:top-[149px] lg:start-[calc((100%-64px)*0.0921)]",
+]
+
+/** The lattice behind the tiles: Figma's 14 × 5 grid of 72px squares on a 96px pitch. */
+const LATTICE = Array.from({ length: 70 }, (_, index) => index)
+
+const TILE =
+  "absolute flex size-10 items-center justify-center rounded-lg border border-border bg-card shadow md:size-12 lg:size-16"
+
+export interface LogoCloudScatterFieldProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudScatterFieldCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The logos, one per tile, in Figma's order: the five along the top, then
+   * the five along the bottom and the two beside the message (on a phone,
+   * six above the message and six below). Twelve spots; logos past the
+   * twelfth are not shown. None by default: each tile is a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudScatterFieldLogo[]
+}
+
+export function LogoCloudScatterField({
+  locale = "en",
+  heading,
+  description,
+  action,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudScatterFieldProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const text = description === undefined ? copy.description : description
+  const button = action === undefined ? copy.action : action
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:px-24 lg:py-24", className)} {...props}>
+      <div className="relative mx-auto flex min-h-[470px] w-full max-w-[1248px] items-center justify-center overflow-hidden rounded-xl py-14 md:h-[420px] md:min-h-0 md:py-0 lg:h-[440px]">
+        <div aria-hidden="true" className="absolute inset-0 grid grid-cols-[repeat(14,72px)] content-start gap-6 p-2">
+          {LATTICE.map((cell) => (
+            <span key={cell} className="size-[72px] rounded-md bg-muted opacity-[0.55]" />
+          ))}
+        </div>
+
+        {logos.length > 0 ? (
+          <ul className="absolute inset-0">
+            {logos.slice(0, SPOTS.length).map((item, index) => (
+              <li key={index} className={cn(TILE, SPOTS[index])}>
+                <span className="sr-only">{item.name}</span>
+                <span
+                  aria-hidden="true"
+                  className="flex h-3 w-[34px] items-center justify-center text-muted-foreground md:h-[15px] md:w-[41px] lg:h-5 lg:w-[55px] [&>*]:h-auto [&>*]:max-h-full [&>*]:w-full [&>*]:max-w-full [&>img]:object-contain"
+                >
+                  {item.logo}
+                </span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div aria-hidden="true" className="absolute inset-0">
+            {SPOTS.map((spot, index) => (
+              <span key={index} className={cn(TILE, spot)}>
+                <span className="h-2.5 w-[30px] rounded-sm bg-muted md:h-3 md:w-9 lg:h-4 lg:w-12" />
+              </span>
+            ))}
+          </div>
+        )}
+
+        <div className="relative flex w-full flex-col items-center gap-5 rounded-xl bg-background px-8 py-6 text-center md:w-[min(460px,calc(100%-160px))] lg:w-[min(620px,calc(100%-320px))]">
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground md:text-4xl md:[&:dir(rtl)]:text-3xl lg:[&:dir(rtl)]:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+          {text ? <p className="text-base text-muted-foreground">{text}</p> : null}
+          {button ? (
+            <a href={button.href} className={buttonVariants()}>
+              {button.label}
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudScatterFieldCopy = COPY

package/registry/blocks/logo-cloud-scatter-field/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudScatterField,
+  logoCloudScatterFieldCopy,
+  type LogoCloudScatterFieldAction,
+  type LogoCloudScatterFieldCopy,
+  type LogoCloudScatterFieldLogo,
+  type LogoCloudScatterFieldProps,
+} from "./LogoCloudScatterField"

package/registry/blocks/logo-cloud-side-label-rail/LogoCloudSideLabelRail.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { Plus } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Side Label Rail.
+ *
+ * A short label and a Badge, then the marks in a ruled grid: a box with a
+ * hairline between every cell and a crosshair at each outer corner. On a
+ * desktop the label is a narrow column at the start of the row and the grid
+ * holds five marks across; on a tablet and a phone the label sits above a
+ * grid two marks across.
+ *
+ * The rules are each cell's bottom and end border. The grid overhangs its
+ * box by a pixel on every side and the box clips it: the box's border sits
+ * over the grid's edge, as Figma's inside stroke does, so the box is exactly
+ * its rows tall and the last column's and last row's rules disappear under
+ * the border at any count of marks.
+ * Borders, corners and the label column are all logical, so in Arabic the
+ * label moves to the right and the grid fills from the right, as Figma's RTL
+ * variants draw them, with the same list of logos. The marks themselves are
+ * never mirrored.
+ *
+ * No logos come with the block: pass `logos`. Until then each cell shows a
+ * `muted` placeholder of a mark's size.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudSideLabelRailLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudSideLabelRailCopy {
+  /** The small label at the start. With the Badge, it names the section for screen readers. */
+  label: React.ReactNode
+  /** The Badge after the label. Hidden when null. */
+  badge: React.ReactNode | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudSideLabelRailCopy> = {
+  en: {
+    label: "Trusted by",
+    badge: "Leaders",
+  },
+  ar: {
+    label: "موثوق به لدى",
+    badge: "روّاد القطاع",
+  },
+}
+
+/** How many cells Figma draws, and so how many placeholders show without logos. */
+const PLACEHOLDERS = 10
+
+/** Figma's crosshairs: the 14px plus icon with its own 1.5px stroke, centred on each of the box's outer corners. */
+const CORNERS = ["-start-[7px] -top-[7px]", "-end-[7px] -top-[7px]", "-bottom-[7px] -start-[7px]", "-bottom-[7px] -end-[7px]"]
+
+export interface LogoCloudSideLabelRailProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudSideLabelRailCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order: each a `name` and a `logo`. None by default:
+   * each cell shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudSideLabelRailLogo[]
+}
+
+export function LogoCloudSideLabelRail({ locale = "en", label, badge, logos = [], className, ...props }: LogoCloudSideLabelRailProps) {
+  const copy = COPY[locale]
+  const labelId = React.useId()
+  const tag = badge === undefined ? copy.badge : badge
+  const cells = logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+
+  return (
+    <section aria-labelledby={labelId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-6 md:gap-8 lg:flex-row lg:items-center lg:gap-16">
+        <div id={labelId} className="flex flex-wrap items-center gap-3 lg:w-[200px] lg:shrink-0 lg:flex-col lg:items-start">
+          <p className="text-xs font-semibold uppercase text-muted-foreground">{label ?? copy.label}</p>
+          {tag ? (
+            <Badge variant="outline" tone="secondary" radius="standard" className="uppercase">
+              {tag}
+            </Badge>
+          ) : null}
+        </div>
+
+        <div className="relative min-w-0 flex-1">
+          <div className="overflow-hidden rounded-md border border-border">
+            <ul className="-m-px grid grid-cols-2 lg:grid-cols-5">
+              {cells.map((item, index) => (
+                <li key={index} className="flex px-2 h-20 min-w-0 items-center justify-center border-b border-e border-border md:h-[88px] lg:h-[104px]">
+                  {item ? (
+                    <>
+                      <span className="sr-only">{item.name}</span>
+                      <span
+                        aria-hidden="true"
+                        className="flex h-5 max-w-[min(88px,100%)] items-center justify-center text-muted-foreground md:h-6 md:max-w-[min(100px,100%)] lg:h-7 lg:max-w-[min(110px,100%)] [&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+                      >
+                        {item.logo}
+                      </span>
+                    </>
+                  ) : (
+                    <span aria-hidden="true" className="h-5 w-20 max-w-full rounded-md bg-muted md:h-6 md:w-24 lg:h-7" />
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+          {CORNERS.map((corner) => (
+            <Plus
+              key={corner}
+              aria-hidden="true"
+              size={14}
+              strokeWidth={1.5}
+              absoluteStrokeWidth
+              className={cn("absolute text-muted-foreground", corner)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudSideLabelRailCopy = COPY

package/registry/blocks/logo-cloud-side-label-rail/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudSideLabelRail,
+  logoCloudSideLabelRailCopy,
+  type LogoCloudSideLabelRailCopy,
+  type LogoCloudSideLabelRailLogo,
+  type LogoCloudSideLabelRailProps,
+} from "./LogoCloudSideLabelRail"

package/registry/blocks/logo-cloud-stat-rail-above-grid/LogoCloudStatRailAboveGrid.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Stat Rail Above Grid.
+ *
+ * An eyebrow and a heading, a rail of four results, each hung on a short
+ * rule at its start edge, and under them the marks in a ruled grid of
+ * equal cells. The results name no company: the marks are real ones.
+ *
+ * The rail is one column on a phone, two from Tablet and four at Desktop;
+ * the grid is two columns, four at Desktop, and its cells grow from 80 to
+ * 112px tall. The grid's inner rules are each cell's end and bottom
+ * borders, with the last column's and last row's clipped by the box, so any
+ * number of marks keeps a clean frame.
+ *
+ * The rules sit on the start edge and the grid fills from the start, so in
+ * Arabic both follow the page's direction. The marks are never mirrored. A
+ * figure with no Arabic in it keeps Geist and the English line height in
+ * Arabic, as Figma's RTL variants set it.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudStatRailAboveGridLogo {
+  /** The company's name. Screen readers read it; the mark itself is hidden from them. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its slot, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudStatRailAboveGridStat {
+  /** The figure, in display type. */
+  value: React.ReactNode
+  /** What the figure measures. */
+  label: React.ReactNode
+}
+
+export interface LogoCloudStatRailAboveGridCopy {
+  /** The small line above the heading. Hidden when null. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The results in the rail, in order. Each has a `value` and a `label`. */
+  stats: LogoCloudStatRailAboveGridStat[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudStatRailAboveGridCopy> = {
+  en: {
+    eyebrow: "Customer success",
+    heading: "Achieve stronger results with partners",
+    stats: [
+      { value: "100%", label: "improvement in manual collection time" },
+      { value: "16%", label: "uplift in conversion rate" },
+      { value: "150", label: "countries reached after deploying Fasla" },
+      { value: "< 12 mo", label: "to launch a live subscription offering" },
+    ],
+  },
+  ar: {
+    eyebrow: "نجاح العملاء",
+    heading: "حقّق نتائج أقوى مع الشركاء",
+    stats: [
+      { value: "100%", label: "تحسّن في وقت التحصيل اليدوي" },
+      { value: "16%", label: "ارتفاع في معدل التحويل" },
+      { value: "150", label: "دولة تم الوصول إليها بعد اعتماد فاصلة" },
+      {
+        value: (
+          <>
+            أقل من <bdi dir="ltr">12</bdi> شهرًا
+          </>
+        ),
+        label: "لإطلاق خدمة اشتراك فعليّة",
+      },
+    ],
+  },
+}
+
+/** Arabic letters. Text without any is Latin: a figure or a brand name. */
+const ARABIC = /[\u0600-\u06FF]/
+
+/** Figma's grid: eight marks, two rows of four at Desktop. */
+const PLACEHOLDERS = 8
+
+export interface LogoCloudStatRailAboveGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudStatRailAboveGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks in the grid, in reading order. None by default: each cell shows
+   * a `muted` placeholder of a mark's size.
+   * @default none: eight `muted` placeholders
+   */
+  logos?: LogoCloudStatRailAboveGridLogo[]
+}
+
+export function LogoCloudStatRailAboveGrid({
+  locale = "en",
+  eyebrow,
+  heading,
+  stats,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudStatRailAboveGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const kicker = eyebrow === undefined ? copy.eyebrow : eyebrow
+  const rail = stats ?? copy.stats
+  const cells = logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+
+  return (
+    <section aria-labelledby={headingId} className={cn("bg-background p-8 md:p-16 lg:p-24", className)} {...props}>
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col gap-12">
+        <header className="flex flex-col gap-2">
+          {kicker ? <p className="text-sm font-medium text-primary">{kicker}</p> : null}
+          <h2 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl lg:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+        </header>
+
+        {rail.length > 0 ? (
+          <ul className="grid gap-6 md:grid-cols-2 md:gap-x-8 lg:grid-cols-4">
+            {rail.map((stat, index) => (
+              <li key={index} className="flex flex-col gap-1 border-s-2 border-border ps-5">
+                {typeof stat.value === "string" && !ARABIC.test(stat.value) ? (
+                  <p className="font-sans text-xl font-semibold leading-7 text-foreground">
+                    <bdi dir="ltr">{stat.value}</bdi>
+                  </p>
+                ) : (
+                  <p className="text-xl font-semibold text-foreground">{stat.value}</p>
+                )}
+                <p className="text-sm text-muted-foreground">{stat.label}</p>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        <div className="overflow-hidden rounded-md border border-border">
+          <ul aria-hidden={logos.length === 0 || undefined} className="-mb-px -me-px grid grid-cols-2 lg:grid-cols-4">
+            {cells.map((item, index) => (
+              <li key={index} className="flex h-20 items-center justify-center border-b border-e border-border px-4 md:h-24 lg:h-28">
+                {item ? (
+                  <>
+                    <span className="sr-only">{item.name}</span>
+                    <span
+                      aria-hidden="true"
+                      className="flex h-5 max-w-[88px] items-center text-muted-foreground md:h-6 md:max-w-[100px] lg:h-7 lg:max-w-[110px] [&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+                    >
+                      {item.logo}
+                    </span>
+                  </>
+                ) : (
+                  <span aria-hidden="true" className="h-5 w-[72px] rounded-md bg-muted md:h-6 md:w-20 lg:h-7 lg:w-24" />
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudStatRailAboveGridCopy = COPY

package/registry/blocks/logo-cloud-stat-rail-above-grid/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudStatRailAboveGrid,
+  logoCloudStatRailAboveGridCopy,
+  type LogoCloudStatRailAboveGridCopy,
+  type LogoCloudStatRailAboveGridLogo,
+  type LogoCloudStatRailAboveGridProps,
+  type LogoCloudStatRailAboveGridStat,
+} from "./LogoCloudStatRailAboveGrid"