@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/logo-cloud-bento-logo-wall/LogoCloudBentoLogoWall.tsx

@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Bento Logo Wall.
+ *
+ * A heading and a line of text above a bento of `card` tiles: one large tile
+ * that features the first logo with the company's name and a caption, then a
+ * tile per logo for the rest. At Desktop the featured tile takes half the
+ * width and two rows, with four logos in a 2 × 2 block beside it and the rest
+ * in rows of four below. At Tablet the featured tile runs full width over two
+ * columns of tiles; on a phone every tile is full width. Every small tile's
+ * mark has one height per breakpoint (16, 20 and 28px), its width in
+ * proportion, as Figma sizes them.
+ *
+ * One grid holds every tile, so the layout follows the page's direction: in
+ * Arabic the featured tile sits on the right. The company's name is a Latin
+ * brand name, so it keeps Geist's face and line height in Arabic too, as
+ * Figma sets it. Figma's featured tile is 12px
+ * shorter than the 2 × 2 block beside it; here it stretches to match.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudBentoLogoWallLogo {
+  /** The company's name. Screen readers read it; the featured tile also shows it. */
+  name: string
+  /** The mark: an `svg` or an `img`. The block sizes it to its tile, keeping its proportions. */
+  logo: React.ReactNode
+}
+
+export interface LogoCloudBentoLogoWallCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. Hidden when null. */
+  description: React.ReactNode
+  /** The line under the featured company's name: what it does. Hidden when null. */
+  featuredCaption: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudBentoLogoWallCopy> = {
+  en: {
+    heading: "The companies we build alongside",
+    description: "From two-person studios to listed enterprises.",
+    featuredCaption: "Search, cloud and workplace tools.",
+  },
+  ar: {
+    heading: "الشركات التي نبني إلى جانبها",
+    description: "من استوديوهات من شخصين إلى مؤسسات مُدرَجة.",
+    featuredCaption: "البحث والحوسبة السحابية وأدوات العمل.",
+  },
+}
+
+const TILE = "rounded-lg bg-card ring-1 ring-inset ring-border forced-colors:border"
+
+/** The featured tile: half the bento and two rows at Desktop, full width below. */
+const FEATURED = cn(TILE, "flex flex-col p-5 md:col-span-2 lg:row-span-2 lg:justify-between lg:gap-3")
+
+/** A tile's own row height: the four beside the featured tile are taller at Desktop. */
+const tileHeight = (index: number) => cn("h-14 md:h-[88px]", index <= 4 ? "lg:h-[114px]" : "lg:h-[104px]")
+
+const SIZED = "[&>*]:h-full [&>*]:w-auto [&>*]:max-w-full [&>img]:object-contain"
+
+/** Figma draws a featured tile and eight others. */
+const PLACEHOLDERS = 9
+
+export interface LogoCloudBentoLogoWallProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudBentoLogoWallCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The logos, in order. The first is featured, with its `name` and the
+   * caption; the next four sit beside it at Desktop, and the rest fill rows
+   * below. Figma shows nine. None by default: each tile is a `muted`
+   * placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudBentoLogoWallLogo[]
+}
+
+export function LogoCloudBentoLogoWall({
+  locale = "en",
+  heading,
+  description,
+  featuredCaption,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudBentoLogoWallProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const text = description === undefined ? copy.description : description
+  const caption = featuredCaption === undefined ? copy.featuredCaption : featuredCaption
+  const [featured, ...rest] = logos
+
+  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">
+          <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>
+
+        {featured ? (
+          <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <li className={FEATURED}>
+              <span
+                aria-hidden="true"
+                className={cn("flex h-8 max-w-[200px] items-center text-muted-foreground md:h-10 lg:h-12", SIZED)}
+              >
+                {featured.logo}
+              </span>
+              <div className="flex flex-col gap-1">
+                <p className="font-sans text-xl font-semibold leading-7 text-foreground">{featured.name}</p>
+                {caption ? <p className="text-sm text-muted-foreground">{caption}</p> : null}
+              </div>
+            </li>
+            {rest.map((item, index) => (
+              <li key={index} className={cn(TILE, "flex items-center justify-center p-5", tileHeight(index + 1))}>
+                <span className="sr-only">{item.name}</span>
+                <span
+                  aria-hidden="true"
+                  className={cn("flex h-4 items-center justify-center text-muted-foreground md:h-5 lg:h-7", SIZED)}
+                >
+                  {item.logo}
+                </span>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div aria-hidden="true" className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className={FEATURED}>
+              <span className="h-8 w-24 rounded-md bg-muted md:h-10 md:w-32 lg:h-12 lg:w-36" />
+              <span className="mt-2 h-5 w-32 rounded-sm bg-muted" />
+            </div>
+            {Array.from({ length: PLACEHOLDERS - 1 }, (_, index) => (
+              <div key={index} className={cn(TILE, "flex items-center justify-center p-5", tileHeight(index + 1))}>
+                <span className="h-5 w-16 rounded-md bg-muted md:h-6 md:w-24 lg:h-8 lg:w-28" />
+              </div>
+            ))}
+          </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 logoCloudBentoLogoWallCopy = COPY

package/registry/blocks/logo-cloud-bento-logo-wall/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudBentoLogoWall,
+  logoCloudBentoLogoWallCopy,
+  type LogoCloudBentoLogoWallCopy,
+  type LogoCloudBentoLogoWallLogo,
+  type LogoCloudBentoLogoWallProps,
+} from "./LogoCloudBentoLogoWall"

package/registry/blocks/logo-cloud-bordered-cell-grid/LogoCloudBorderedCellGrid.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Bordered Cell Grid.
+ *
+ * A small caption over one card ruled into equal cells, a mark centred in
+ * each. No heading: the caption names the section.
+ *
+ * Desktop rules the ten marks into five columns of 116px cells; Tablet and
+ * Mobile into two columns, 88px and then 80px tall. Only the inner lines are
+ * drawn: every cell carries a line on its end and bottom side, and the card
+ * clips the ones on its outer edges. The lines are logical, so they follow
+ * the page's `dir`. Each mark sits in a slot as tall as Figma's (28, 24, 20px)
+ * and no wider than its cap (110, 100, 88px).
+ *
+ * The caption is Figma's uppercase in English only: Arabic has no capitals,
+ * so the English copy is written in sentence case and set uppercase in a
+ * left-to-right block.
+ *
+ * The marks come in through `logos`, in reading order, and 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 LogoCloudBorderedCellGridLogo {
+  /** 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 LogoCloudBorderedCellGridCopy {
+  /** The small line above the card. It names the section for assistive tech. */
+  caption: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudBorderedCellGridCopy> = {
+  en: {
+    caption: "Trusted by 4,000+ teams worldwide",
+  },
+  ar: {
+    caption: (
+      <>
+        موثوق به لدى أكثر من <bdi dir="ltr">4,000</bdi> فريق حول العالم
+      </>
+    ),
+  },
+}
+
+/** Figma's count of marks, the number of placeholders shown without logos. */
+const PLACEHOLDERS = 10
+
+/** 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 LogoCloudBorderedCellGridProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudBorderedCellGridCopy> {
+  /** 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?: LogoCloudBorderedCellGridLogo[]
+}
+
+export function LogoCloudBorderedCellGrid({
+  locale = "en",
+  caption,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudBorderedCellGridProps) {
+  const copy = COPY[locale]
+  const captionId = React.useId()
+  const slots = logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+
+  return (
+    <section aria-labelledby={captionId} 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">
+        <p id={captionId} className="text-center text-xs font-semibold text-muted-foreground [&:dir(ltr)]:uppercase">
+          {caption ?? copy.caption}
+        </p>
+
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
+          {/*
+            Pulled out by a pixel on every side but the start, so the card clips the outer cells' lines
+            and its border sits over the first row, as Figma's inside stroke does: the card is the rows'
+            height, not a pixel taller.
+          */}
+          <ul
+            aria-hidden={logos.length === 0 || undefined}
+            className="-mb-px -me-px -mt-px grid grid-cols-2 text-muted-foreground lg:grid-cols-5"
+          >
+            {slots.map((logo, index) => (
+              <li
+                key={index}
+                className="flex h-20 min-w-0 items-center justify-center border-b border-e border-border px-4 md:h-[88px] lg:h-[116px]"
+              >
+                {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>
+      </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 logoCloudBorderedCellGridCopy = COPY

package/registry/blocks/logo-cloud-bordered-cell-grid/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudBorderedCellGrid,
+  logoCloudBorderedCellGridCopy,
+  type LogoCloudBorderedCellGridCopy,
+  type LogoCloudBorderedCellGridLogo,
+  type LogoCloudBorderedCellGridProps,
+} from "./LogoCloudBorderedCellGrid"

package/registry/blocks/logo-cloud-centered-caption-row/LogoCloudCenteredCaptionRow.tsx

@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Centered Caption Row.
+ *
+ * One quiet line of text over a row of marks, the lightest way to say "these
+ * teams use us". No heading: the caption names the section.
+ *
+ * Desktop holds the six marks in one row, spread from edge to edge inside a
+ * 64px inset; the inset starts at 1280, so a narrow desktop gives the gaps
+ * that room instead. Tablet breaks them into two rows of three, the outer marks
+ * flush with the edges, and Mobile into three rows of two, each pair centred
+ * on its own. Each mark sits in a slot as tall as Figma's (28, 24, 20px) and
+ * no wider than its cap (110, 100, 88px), keeping its own proportions.
+ *
+ * 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 slot shows a `muted` placeholder of its size.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface LogoCloudCenteredCaptionRowLogo {
+  /** 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 LogoCloudCenteredCaptionRowCopy {
+  /** The line above the marks. It names the section for assistive tech. */
+  caption: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudCenteredCaptionRowCopy> = {
+  en: {
+    caption: "Trusted by teams building on Fasla",
+  },
+  ar: {
+    caption: "موثوق به لدى فرق تبني على فاصلة",
+  },
+}
+
+/** Figma's count of marks, the number of placeholders shown without logos. */
+const PLACEHOLDERS = 6
+
+/** 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 LogoCloudCenteredCaptionRowProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudCenteredCaptionRowCopy> {
+  /** 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 slot shows a `muted` placeholder.
+   * @default none: `muted` placeholders
+   */
+  logos?: LogoCloudCenteredCaptionRowLogo[]
+}
+
+export function LogoCloudCenteredCaptionRow({
+  locale = "en",
+  caption,
+  logos = [],
+  className,
+  ...props
+}: LogoCloudCenteredCaptionRowProps) {
+  const copy = COPY[locale]
+  const captionId = React.useId()
+  const slots = logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+  const pairs = Array.from({ length: Math.ceil(slots.length / 2) }, (_, row) => slots.slice(row * 2, row * 2 + 2))
+
+  return (
+    <section aria-labelledby={captionId} 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">
+        <p id={captionId} className="text-center text-sm font-medium text-muted-foreground">
+          {caption ?? copy.caption}
+        </p>
+
+        {/*
+          On a phone each row of two is centred on its own, as Figma's Mobile rows are, so the
+          marks sit in pairs, not in shared columns. From Tablet up the pairs dissolve
+          (`display: contents`) and every mark is a cell of one grid. The wrappers are `role="none"`,
+          so the list still reads as one list of marks.
+        */}
+        <div
+          role={logos.length > 0 ? "list" : undefined}
+          aria-hidden={logos.length === 0 || undefined}
+          className="flex flex-col items-center gap-y-6 text-muted-foreground md:grid md:grid-cols-[repeat(3,auto)] md:items-center md:justify-between md:gap-x-6 md:gap-y-8 lg:grid-cols-[repeat(6,auto)] xl:px-16"
+        >
+          {pairs.map((pair, row) => (
+            <div key={row} role="none" className="flex items-center justify-center gap-x-8 md:contents">
+              {pair.map((logo, offset) => {
+                const index = row * 2 + offset
+                return (
+                  <div
+                    key={index}
+                    role={logo ? "listitem" : undefined}
+                    className={cn(
+                      "flex justify-center",
+                      // Tablet: the outer marks of each row of three sit on the edges, as Figma's space-between rows do.
+                      index % 3 === 0 && "md:justify-self-start",
+                      index % 3 === 1 && "md:justify-self-center",
+                      index % 3 === 2 && "md:justify-self-end",
+                      "lg:!justify-self-center"
+                    )}
+                  >
+                    {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" />
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+        </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 logoCloudCenteredCaptionRowCopy = COPY

package/registry/blocks/logo-cloud-centered-caption-row/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudCenteredCaptionRow,
+  logoCloudCenteredCaptionRowCopy,
+  type LogoCloudCenteredCaptionRowCopy,
+  type LogoCloudCenteredCaptionRowLogo,
+  type LogoCloudCenteredCaptionRowProps,
+} from "./LogoCloudCenteredCaptionRow"

package/registry/blocks/logo-cloud-contained-card/LogoCloudContainedCard.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Logo Cloud` (42806:232717), Type=Contained Card.
+ *
+ * A small caption and a grid of marks inside a bordered card: six marks
+ * across on a desktop, three on a tablet and two on a phone. Every cell has
+ * the same width and the mark sits in its middle, so a wide wordmark and a
+ * square glyph line up on one grid.
+ *
+ * The card's border is an inset ring, drawn inside its edge as Figma's inside
+ * stroke is, so it adds nothing to the card's size. Its corners are 10px on a
+ * phone and 14px from Tablet up, as Figma draws them.
+ *
+ * The grid fills in reading order, so in Arabic the first mark sits at the
+ * right of the first row, where Figma's RTL variants place it, 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 LogoCloudContainedCardLogo {
+  /** 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 LogoCloudContainedCardCopy {
+  /** The small line above the marks. It names the section for screen readers. */
+  caption: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", LogoCloudContainedCardCopy> = {
+  en: {
+    caption: "Trusted by industry innovators",
+  },
+  ar: {
+    caption: "موثوق به لدى روّاد القطاع",
+  },
+}
+
+/** How many cells Figma draws, and so how many placeholders show without logos. */
+const PLACEHOLDERS = 12
+
+export interface LogoCloudContainedCardProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<LogoCloudContainedCardCopy> {
+  /** 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?: LogoCloudContainedCardLogo[]
+}
+
+export function LogoCloudContainedCard({ locale = "en", caption, logos = [], className, ...props }: LogoCloudContainedCardProps) {
+  const copy = COPY[locale]
+  const captionId = React.useId()
+  const cells = logos.length > 0 ? logos : Array.from({ length: PLACEHOLDERS }, () => null)
+
+  return (
+    <section aria-labelledby={captionId} 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-12 rounded-lg bg-card px-5 py-6 ring-1 ring-inset ring-border forced-colors:border md:rounded-xl md:p-8 lg:px-16 lg:py-14">
+        <p id={captionId} className="w-full text-center text-xs font-semibold uppercase text-muted-foreground">
+          {caption ?? copy.caption}
+        </p>
+        <ul className="grid w-full grid-cols-2 gap-x-4 gap-y-10 md:grid-cols-3 lg:grid-cols-6">
+          {cells.map((item, index) => (
+            <li key={index} className="flex px-2 h-16 min-w-0 items-center justify-center md:h-12 lg:h-11">
+              {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>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const logoCloudContainedCardCopy = COPY

package/registry/blocks/logo-cloud-contained-card/index.ts

@@ -0,0 +1,7 @@
+export {
+  LogoCloudContainedCard,
+  logoCloudContainedCardCopy,
+  type LogoCloudContainedCardCopy,
+  type LogoCloudContainedCardLogo,
+  type LogoCloudContainedCardProps,
+} from "./LogoCloudContainedCard"