@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/logo-cloud-flanked-heading/LogoCloudFlankedHeading.tsx

@@ -0,0 +1,162 @@
+"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=Flanked Heading.
+ *
+ * A centred heading, a sentence and an outline button, flanked by the marks
+ * in small square cards. On Desktop the first half of the marks sits beside
+ * the copy at the start and the second half at the end, each in two rows of
+ * two with the second row stepped in towards the copy. From Tablet down the
+ * flanks become rows of four above and below the copy; on a phone the four
+ * 64px cards sit 12px apart, as Figma has them, and shrink only on a screen
+ * narrower than that row.
+ *
+ * The rows are in DOM order with logical offsets, so `dir="rtl"` on the page
+ * puts the first half on the right and steps the rows in from the right, as
+ * Figma's RTL variants do. The marks are never mirrored.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudFlankedHeadingLogo {
+  /** 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 card, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudFlankedHeadingAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface LogoCloudFlankedHeadingCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The sentence under the heading. Hidden when null. */
+  description: React.ReactNode
+  /** The outline button under the sentence. Hidden when null. */
+  action: LogoCloudFlankedHeadingAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudFlankedHeadingCopy> = {
+  en: {
+    heading: "Plug into your favourite tools",
+    description: "If your team uses it, Fasla connects to it — over 300 integrations and counting.",
+    action: { label: "Explore integrations", href: "#integrations" },
+  },
+  ar: {
+    heading: "اربط أدواتك المفضّلة",
+    description: (
+      <>
+        إن كان فريقك يستخدمها، فاصلة تتصل بها. أكثر من <bdi dir="ltr">300</bdi> تكامل والعدد في ازدياد.
+      </>
+    ),
+    action: { label: "استكشف التكاملات", href: "#integrations" },
+  },
+}
+
+/** How many marks Figma shows: the number of placeholder cards when no logos are passed. */
+const PLACEHOLDERS = 8
+
+export interface LogoCloudFlankedHeadingProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudFlankedHeadingCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order: the first half flanks the copy at the
+   * start, the rest at the end. Each has a `name` and a `logo`. None by
+   * default: each card shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudFlankedHeadingLogo[]
+}
+
+/** One flank of cards. The second row of each flank steps in towards the copy on Desktop. */
+function Flank({ logos, count, side }: { logos: LogoCloudFlankedHeadingLogo[]; count: number; side: "start" | "end" }) {
+  return (
+    <ul
+      className={cn(
+        "grid w-full max-w-[292px] shrink-0 grid-cols-4 gap-3 md:w-auto md:max-w-none md:grid-cols-[repeat(4,5rem)] md:gap-4 lg:flex lg:w-[200px] lg:flex-wrap",
+        side === "start" ? "lg:justify-start lg:[&>li:nth-child(4n+3)]:ms-6" : "lg:justify-end lg:[&>li:nth-child(4n)]:me-6"
+      )}
+    >
+      {Array.from({ length: count }, (_, index) => {
+        const logo = logos[index]
+        return (
+          <li
+            key={index}
+            aria-hidden={logo ? undefined : true}
+            className="flex aspect-square w-full items-center justify-center rounded-lg border border-border bg-card shadow-sm md:size-20"
+          >
+            {logo ? (
+              <>
+                <span className="sr-only">{logo.name}</span>
+                <span
+                  aria-hidden="true"
+                  className="flex w-[86%] items-center justify-center text-muted-foreground [&>*]:h-auto [&>*]:max-h-5 [&>*]:w-auto [&>*]:max-w-full md:[&>*]:max-h-6 [&>img]:object-contain"
+                >
+                  {logo.logo}
+                </span>
+              </>
+            ) : (
+              <span className="h-4 w-[70%] rounded-md bg-muted md:h-5" />
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export function LogoCloudFlankedHeading({
+  locale = "en",
+  heading,
+  description,
+  action,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudFlankedHeadingProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const sentence = description === undefined ? copy.description : description
+  const button = action === undefined ? copy.action : action
+  const total = logos.length > 0 ? logos.length : PLACEHOLDERS
+  const half = Math.ceil(total / 2)
+
+  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 items-center gap-8 md:gap-10 lg:flex-row lg:gap-12">
+        <Flank logos={logos.slice(0, half)} count={half} side="start" />
+
+        <div className="flex w-full flex-col items-center gap-4 text-center md:px-8 lg:min-w-0 lg:flex-1">
+          <h2 id={headingId} className="text-balance text-3xl font-semibold text-foreground">
+            {heading ?? copy.heading}
+          </h2>
+          {sentence ? <p className="text-base text-muted-foreground">{sentence}</p> : null}
+          {button ? (
+            <a href={button.href} className={buttonVariants({ variant: "outline" })}>
+              {button.label}
+            </a>
+          ) : null}
+        </div>
+
+        <Flank logos={logos.slice(half)} count={total - half} side="end" />
+      </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 logoCloudFlankedHeadingCopy = COPY

package/registry/blocks/logo-cloud-flanked-heading/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudFlankedHeading,
+  logoCloudFlankedHeadingCopy,
+  type LogoCloudFlankedHeadingAction,
+  type LogoCloudFlankedHeadingCopy,
+  type LogoCloudFlankedHeadingLogo,
+  type LogoCloudFlankedHeadingProps,
+} from "./LogoCloudFlankedHeading"

package/registry/blocks/logo-cloud-grid-closing-cta/LogoCloudGridClosingCta.tsx

@@ -0,0 +1,173 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Grid Closing CTA.
+ *
+ * A centred heading over an even grid of logos, closed by a sentence with a
+ * link after it and a button under them. The grid is six columns at Desktop,
+ * three at Tablet and two on a phone, where the button runs full width. When
+ * the sentence and the link don't fit on one line, the link wraps under the
+ * sentence, centred, as Figma's Tablet and Mobile show.
+ *
+ * The link's arrow points along the reading direction, so it flips in Arabic.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudGridClosingCtaLogo {
+  /** 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 cell, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudGridClosingCtaLink {
+  label: React.ReactNode
+  href: string
+}
+
+export interface LogoCloudGridClosingCtaCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The sentence under the logos. Hidden when null. */
+  closing: React.ReactNode
+  /** The text link after the sentence, with an arrow. Hidden when null. */
+  link: LogoCloudGridClosingCtaLink | null
+  /** The button under the sentence. Hidden when null. */
+  action: LogoCloudGridClosingCtaLink | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudGridClosingCtaCopy> = {
+  en: {
+    heading: "Startups and Fortune 500s all build on Fasla",
+    closing: "From startups to Fortune 500s, some of the world’s best teams run on Fasla.",
+    link: { label: "View all customers", href: "#customers" },
+    action: { label: "Start building free", href: "#start" },
+  },
+  ar: {
+    heading: (
+      <>
+        الشركات الناشئة وشركات فورتشن <bdi dir="ltr">500</bdi> جميعها تبني على فاصلة
+      </>
+    ),
+    closing: (
+      <>
+        من الشركات الناشئة إلى شركات فورتشن <bdi dir="ltr">500</bdi>، تعمل بعض أفضل الفرق في العالم على فاصلة.
+      </>
+    ),
+    link: { label: "عرض جميع العملاء", href: "#customers" },
+    action: { label: "ابدأ البناء مجانًا", href: "#start" },
+  },
+}
+
+const CELL = "flex h-16 items-center justify-center md:h-12"
+
+/** Figma's grid holds twelve logos. */
+const PLACEHOLDERS = 12
+
+export interface LogoCloudGridClosingCtaProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudGridClosingCtaCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The logos, in reading order. Figma shows twelve: two rows of six at
+   * Desktop. None by default: each cell is a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudGridClosingCtaLogo[]
+}
+
+export function LogoCloudGridClosingCta({
+  locale = "en",
+  heading,
+  closing,
+  link,
+  action,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudGridClosingCtaProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const sentence = closing === undefined ? copy.closing : closing
+  const more = link === undefined ? copy.link : link
+  const button = action === undefined ? copy.action : action
+
+  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">
+        <h2 id={headingId} className="text-center text-xl font-semibold text-foreground md:text-2xl lg:text-3xl">
+          {heading ?? copy.heading}
+        </h2>
+
+        {logos.length > 0 ? (
+          <ul className="grid grid-cols-2 gap-x-4 gap-y-10 md:grid-cols-3 lg:grid-cols-6">
+            {logos.map((item, index) => (
+              <li key={index} className={CELL}>
+                <span className="sr-only">{item.name}</span>
+                <span
+                  aria-hidden="true"
+                  className="flex h-5 max-w-[88px] items-center justify-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>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div aria-hidden="true" className="grid grid-cols-2 gap-x-4 gap-y-10 md:grid-cols-3 lg:grid-cols-6">
+            {Array.from({ length: PLACEHOLDERS }, (_, index) => (
+              <div key={index} className={CELL}>
+                <span className="h-5 w-16 rounded-md bg-muted md:h-6 md:w-20 lg:h-7 lg:w-24" />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {sentence || more || button ? (
+          <footer className="flex flex-col items-center gap-5 pt-4">
+            {sentence || more ? (
+              <p className="flex flex-wrap items-center justify-center gap-2 text-center text-sm text-muted-foreground">
+                {sentence ? <span>{sentence}</span> : null}
+                {more ? (
+                  <a
+                    href={more.href}
+                    className="inline-flex items-center gap-1 rounded-sm font-semibold text-primary underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+                  >
+                    {more.label}
+                    <ArrowRight
+                      aria-hidden="true"
+                      size={14}
+                      strokeWidth={1.5}
+                      absoluteStrokeWidth
+                      className="size-3.5 shrink-0 [&:dir(rtl)]:-scale-x-100"
+                    />
+                  </a>
+                ) : null}
+              </p>
+            ) : null}
+            {button ? (
+              <a href={button.href} className={buttonVariants({ size: "lg", className: "w-full md:w-auto" })}>
+                {button.label}
+              </a>
+            ) : null}
+          </footer>
+        ) : null}
+      </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 logoCloudGridClosingCtaCopy = COPY

package/registry/blocks/logo-cloud-grid-closing-cta/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudGridClosingCta,
+  logoCloudGridClosingCtaCopy,
+  type LogoCloudGridClosingCtaCopy,
+  type LogoCloudGridClosingCtaLink,
+  type LogoCloudGridClosingCtaLogo,
+  type LogoCloudGridClosingCtaProps,
+} from "./LogoCloudGridClosingCta"

package/registry/blocks/logo-cloud-heading-grid/LogoCloudHeadingGrid.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Heading Grid.
+ *
+ * A centred heading and one supporting line over an even grid of marks, each
+ * centred in its own cell.
+ *
+ * Desktop lays the eight marks out four to a row, Tablet three and Mobile
+ * two, with the cells growing taller as the screen narrows (56px, then 64px on
+ * Mobile). A last row that is not full shares the width between its cells, as
+ * Figma's Tablet does with its last two marks. Each mark sits in a slot as
+ * tall as Figma's (28, 24, 20px) and no wider than its cap (110, 100, 88px).
+ *
+ * The marks come in through `logos`, in reading order; the page's `dir` sets
+ * which side the first one starts on, and the marks themselves are never
+ * flipped. Without logos each cell shows a `muted` placeholder.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudHeadingGridLogo {
+  /** 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 LogoCloudHeadingGridCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. Hidden when null. */
+  description: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudHeadingGridCopy> = {
+  en: {
+    heading: "A few of our customers",
+    description: "Product, design and engineering teams ship faster on Fasla.",
+  },
+  ar: {
+    heading: "نخبة من عملائنا",
+    description: "فرق المنتج والتصميم والهندسة تُطلق أسرع على فاصلة.",
+  },
+}
+
+/** Figma's count of marks, the number of placeholders shown without logos. */
+const PLACEHOLDERS = 8
+
+/** The slot a mark sits in: Figma's height at each breakpoint, and its width cap. */
+const SLOT =
+  "flex h-5 items-center md:h-6 lg:h-7 [&>*]:h-full [&>*]:w-auto [&>*]:max-w-[88px] md:[&>*]:max-w-[100px] lg:[&>*]:max-w-[110px] [&>img]:object-contain"
+
+export interface LogoCloudHeadingGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudHeadingGridCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The marks, in reading order. Each has the company's `name` and its `logo`.
+   * None by default: each cell shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudHeadingGridLogo[]
+}
+
+export function LogoCloudHeadingGrid({
+  locale = "en",
+  heading,
+  description,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudHeadingGridProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const text = description === undefined ? copy.description : description
+  const slots = 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-3 text-center">
+          <h2 id={headingId} className="text-xl font-semibold text-foreground md:text-2xl lg:text-3xl">
+            {heading ?? copy.heading}
+          </h2>
+          {text ? <p className="text-base text-muted-foreground">{text}</p> : null}
+        </header>
+
+        {/* Flex, not grid: a last row that is not full spreads its cells across the width, as Figma's Tablet does. */}
+        <ul aria-hidden={logos.length === 0 || undefined} className="flex flex-wrap gap-x-6 gap-y-10 text-muted-foreground">
+          {slots.map((logo, index) => (
+            <li
+              key={index}
+              className="flex h-16 min-w-0 grow basis-[calc((100%-1.5rem)/2-1px)] items-center justify-center md:h-14 md:basis-[calc((100%-3rem)/3-1px)] lg:basis-[calc((100%-4.5rem)/4-1px)]"
+            >
+              {logo ? (
+                <>
+                  <span className="sr-only">{logo.name}</span>
+                  <span aria-hidden="true" className={SLOT}>
+                    {logo.logo}
+                  </span>
+                </>
+              ) : (
+                <span className="block h-5 w-16 rounded-md bg-muted md:h-6 md:w-20 lg:h-7 lg:w-24" />
+              )}
+            </li>
+          ))}
+        </ul>
+      </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 logoCloudHeadingGridCopy = COPY

package/registry/blocks/logo-cloud-heading-grid/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudHeadingGrid,
+  logoCloudHeadingGridCopy,
+  type LogoCloudHeadingGridCopy,
+  type LogoCloudHeadingGridLogo,
+  type LogoCloudHeadingGridProps,
+} from "./LogoCloudHeadingGrid"

package/registry/blocks/logo-cloud-heading-left-grid-right/LogoCloudHeadingLeftGridRight.tsx

@@ -0,0 +1,172 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Heading Left Grid Right.
+ *
+ * The pitch beside the proof: a Badge, a heading, a line of text and two
+ * buttons in a column at the start, and the marks in a ruled grid at the end,
+ * three across. On a tablet the copy sits above the grid; on a phone the grid
+ * becomes a single column of marks and the buttons stretch to the full width,
+ * one above the other.
+ *
+ * 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.
+ * Everything is logical, so in Arabic the copy 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 LogoCloudHeadingLeftGridRightLogo {
+  /** 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 LogoCloudHeadingLeftGridRightAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface LogoCloudHeadingLeftGridRightCopy {
+  /** The Badge above the heading. Hidden when null. */
+  eyebrow: React.ReactNode | null
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The text under the heading. Hidden when null. */
+  description: React.ReactNode | null
+  /** The solid button: the main next step. */
+  primaryAction: LogoCloudHeadingLeftGridRightAction
+  /** The outline button beside it. Hidden when null. */
+  secondaryAction: LogoCloudHeadingLeftGridRightAction | null
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudHeadingLeftGridRightCopy> = {
+  en: {
+    eyebrow: "Customers",
+    heading: "Built for — and proven by — businesses of all sizes",
+    description:
+      "Over 10,000 companies, from early-stage startups to global enterprises, run their day-to-day work on Fasla.",
+    primaryAction: { label: "See customer stories", href: "#customers" },
+    secondaryAction: { label: "Talk to sales", href: "#contact" },
+  },
+  ar: {
+    eyebrow: "العملاء",
+    heading: "مصمَّم لأعمال بكل الأحجام، ومُثبَت من قِبَلها",
+    description: (
+      <>
+        أكثر من <bdi dir="ltr">10,000</bdi> شركة، من الشركات الناشئة في مراحلها الأولى إلى المؤسسات العالمية، تدير أعمالها
+        اليومية على فاصلة.
+      </>
+    ),
+    primaryAction: { label: "اطّلع على قصص العملاء", href: "#customers" },
+    secondaryAction: { label: "تحدّث إلى المبيعات", href: "#contact" },
+  },
+}
+
+/** How many cells Figma draws, and so how many placeholders show without logos. */
+const PLACEHOLDERS = 9
+
+export interface LogoCloudHeadingLeftGridRightProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudHeadingLeftGridRightCopy> {
+  /** 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?: LogoCloudHeadingLeftGridRightLogo[]
+}
+
+export function LogoCloudHeadingLeftGridRight({
+  locale = "en",
+  eyebrow,
+  heading,
+  description,
+  primaryAction,
+  secondaryAction,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudHeadingLeftGridRightProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const badge = eyebrow === undefined ? copy.eyebrow : eyebrow
+  const text = description === undefined ? copy.description : description
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  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-10 md:gap-12 lg:flex-row lg:items-center lg:gap-20">
+        <div className="flex flex-col items-start gap-5 lg:w-[min(440px,40%)] lg:shrink-0">
+          {badge ? (
+            <Badge variant="soft" tone="primary" radius="standard" className="uppercase">
+              {badge}
+            </Badge>
+          ) : null}
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground">
+            {heading ?? copy.heading}
+          </h2>
+          {text ? <p className="text-base text-muted-foreground">{text}</p> : null}
+          <div className="flex w-full flex-col gap-3 md:w-auto md:flex-row">
+            <a href={primary.href} className={buttonVariants({ className: "w-full md:w-auto" })}>
+              {primary.label}
+            </a>
+            {secondary ? (
+              <a href={secondary.href} className={buttonVariants({ variant: "outline", className: "w-full md:w-auto" })}>
+                {secondary.label}
+              </a>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="min-w-0 flex-1 overflow-hidden rounded-md border border-border">
+          <ul className="-m-px grid grid-cols-1 md:grid-cols-3">
+            {cells.map((item, index) => (
+              <li key={index} className="flex px-2 h-[52px] min-w-0 items-center justify-center border-b border-e border-border md:h-[104px] lg:h-28">
+                {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>
+      </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 logoCloudHeadingLeftGridRightCopy = COPY

package/registry/blocks/logo-cloud-heading-left-grid-right/index.ts

@@ -0,0 +1,8 @@
+export {
+  LogoCloudHeadingLeftGridRight,
+  logoCloudHeadingLeftGridRightCopy,
+  type LogoCloudHeadingLeftGridRightAction,
+  type LogoCloudHeadingLeftGridRightCopy,
+  type LogoCloudHeadingLeftGridRightLogo,
+  type LogoCloudHeadingLeftGridRightProps,
+} from "./LogoCloudHeadingLeftGridRight"