@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/hero-framed-full-bleed/HeroFramedFullBleed.tsx

@@ -0,0 +1,226 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Framed Full-Bleed Hero.
+ *
+ * One large photo in a rounded frame, darkened by the backdrop overlay, with
+ * the pitch laid over its lower half: a pill, the headline, a
+ * paragraph, a light button and a text link. A frosted card on the end side
+ * holds the proof: a row of faces, a figure and a line about it.
+ *
+ * Desktop sets the copy at the bottom start of the frame and the card at the
+ * bottom end. Tablet and Mobile stack the card under the copy at full width,
+ * both at the foot of the frame; Mobile also stacks the button over the link.
+ *
+ * The photo spans the frame at every width. From Tablet up to Desktop the
+ * copy and the card keep Figma's Tablet width, 640px inside the frame's
+ * 40px padding, and centre in it, so a wide frame isn't a stretched one.
+ *
+ * The scrim is dark and the text light in both modes, as Figma draws them:
+ * a photograph does not change with the theme. In light mode that is the
+ * inverse tokens; in dark mode the page's own `foreground` and
+ * `muted-foreground` hold the same colours, so `dark:` switches to them, as
+ * Gallery's Full-Bleed Slider and Error State's Full-Bleed Photo do.
+ *
+ * The frame is Figma's height at each width, 852px on Desktop, 820 on
+ * Tablet and 640 on Mobile, and grows past it only for longer copy. The photo fills it and is cropped,
+ * never flipped. In Arabic the copy and the card swap sides and the link's
+ * arrow points left; figures stay left to right.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at, and the switch every Hero block shares, so
+ * Tablet's layout covers 768 to 1439.
+ */
+
+export interface HeroFramedFullBleedAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface HeroFramedFullBleedPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroFramedFullBleedPerson {
+  /** The face. Without it the avatar shows the name's initials. */
+  src?: string
+  /** The person's name: the photo's `alt` and the source of the initials. */
+  name: string
+}
+
+export interface HeroFramedFullBleedCopy {
+  /** The pill above the headline, on the backdrop overlay. Hidden when empty. */
+  label: React.ReactNode
+  /** The headline, an `h1`. A line break in the string breaks the line. */
+  headline: React.ReactNode
+  /** The paragraph under the headline. */
+  description: React.ReactNode
+  /** The light button. */
+  primaryAction: HeroFramedFullBleedAction
+  /** The text link beside it, with an arrow. Hidden when null. */
+  secondaryAction: HeroFramedFullBleedAction | null
+  /** The card's figure. Shown left to right in either language. */
+  statValue: React.ReactNode
+  /** The line under the figure. */
+  statLabel: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroFramedFullBleedCopy> = {
+  en: {
+    label: (
+      <>
+        New collection · Autumn <bdi dir="ltr">2026</bdi>
+      </>
+    ),
+    headline: "Spaces that feel\nlike home.",
+    description: "Interior design and furnishing for homes that are calm, warm and made to be lived in.",
+    primaryAction: { label: "Book a consultation", href: "#consultation" },
+    secondaryAction: { label: "See our projects", href: "#projects" },
+    statValue: "1,200+",
+    statLabel: "Homes designed and furnished since we opened our doors.",
+  },
+  ar: {
+    label: (
+      <>
+        مجموعة جديدة، خريف <bdi dir="ltr">2026</bdi>
+      </>
+    ),
+    headline: "مساحات تشعرك\nبأنك في بيتك.",
+    description: "تصميم داخلي وتأثيث لبيوت هادئة ودافئة، صُممت لتُعاش.",
+    primaryAction: { label: "احجز استشارة", href: "#consultation" },
+    secondaryAction: { label: "شاهد مشاريعنا", href: "#projects" },
+    statValue: "1,200+",
+    statLabel: "بيت صممناه وأثثناه منذ أن فتحنا أبوابنا.",
+  },
+}
+
+/**
+ * The frosted surface Figma lays under the card: the light foreground at 20%,
+ * light in both modes. Figma lays it under the pill too; there it lit the
+ * pill over a bright sky until white type failed, so the pill sits on the
+ * backdrop overlay instead.
+ */
+const GLASS = "bg-primary-foreground/20 dark:bg-primary/20"
+
+export interface HeroFramedFullBleedProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroFramedFullBleedCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The photo that fills the frame. None by default: the frame shows the
+   * inverse background under the overlay, so the copy stays readable.
+   * @default none: an inverse placeholder
+   */
+  photo?: HeroFramedFullBleedPhoto
+  /**
+   * The faces on the card. Figma shows three. None by default: the row is
+   * left out.
+   * @default none
+   */
+  people?: HeroFramedFullBleedPerson[]
+}
+
+export function HeroFramedFullBleed({
+  locale = "en",
+  label,
+  headline,
+  description,
+  primaryAction,
+  secondaryAction,
+  statValue,
+  statLabel,
+  photo,
+  people,
+  className,
+  ...props
+}: HeroFramedFullBleedProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const pill = label ?? copy.label
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+
+  return (
+    <section aria-labelledby={headingId} className={cn("[container-type:inline-size] bg-background", className)} {...props}>
+      <div className="mx-auto w-full max-w-[1440px] p-4 [@container(min-width:48rem)]:p-6">
+        <div className="relative isolate flex min-h-[640px] flex-col justify-end gap-8 overflow-hidden rounded-[2rem] bg-background-inverse p-6 dark:bg-muted [@container(min-width:48rem)]:min-h-[820px] [@container(min-width:48rem)]:p-10 [@container(min-width:90rem)]:min-h-[852px] [@container(min-width:90rem)]:flex-row [@container(min-width:90rem)]:items-end [@container(min-width:90rem)]:justify-between [@container(min-width:90rem)]:p-[72px]">
+          {photo ? (
+            <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 -z-10 size-full object-cover" />
+          ) : null}
+          {/*
+           * The scrim: the backdrop overlay over the whole photo, at the
+           * token's own strength (60% light, 80% dark). Weaker, white type
+           * fails over a bright window.
+           */}
+          <div aria-hidden className="absolute inset-0 -z-10 bg-backdrop-overlay" />
+
+          <div className="flex w-full min-w-0 flex-col items-start gap-6 [@container(min-width:48rem)]:mx-auto [@container(min-width:48rem)]:max-w-[40rem] [@container(min-width:90rem)]:mx-0 [@container(min-width:90rem)]:max-w-[760px]">
+            {pill ? (
+              <p className="rounded-full bg-backdrop-overlay px-3 text-xs font-medium text-foreground-inverse dark:text-foreground">{pill}</p>
+            ) : null}
+            <h1
+              id={headingId}
+              className="whitespace-pre-line text-3xl font-semibold text-foreground-inverse dark:text-foreground [@container(min-width:48rem)]:text-6xl [@container(min-width:90rem)]:text-7xl"
+            >
+              {headline ?? copy.headline}
+            </h1>
+            <p className="text-pretty text-base text-muted-foreground-inverse dark:text-muted-foreground [@container(min-width:48rem)]:text-lg [@container(min-width:90rem)]:max-w-[480px]">
+              {description ?? copy.description}
+            </p>
+            <div className="flex w-full flex-col gap-5 [@container(min-width:48rem)]:w-auto [@container(min-width:48rem)]:flex-row [@container(min-width:48rem)]:items-center">
+              <a href={primary.href} className={buttonVariants({ variant: "secondary", size: "lg", radius: "rounded", className: "dark:bg-primary dark:text-primary-foreground" })}>
+                {primary.label}
+              </a>
+              {secondary ? (
+                <a
+                  href={secondary.href}
+                  className="relative inline-flex items-center gap-1 self-start rounded-sm before:absolute before:-inset-x-1 before:-inset-y-3 text-sm font-medium text-foreground-inverse [outline:none] dark:text-foreground hover:underline hover:underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-inverse focus-visible:dark:outline-foreground [@container(min-width:48rem)]:self-auto"
+                >
+                  {secondary.label}
+                  <ArrowRight size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+                </a>
+              ) : null}
+            </div>
+          </div>
+
+          <div
+            className={cn(
+              "flex w-full shrink-0 flex-col gap-3 rounded-3xl p-6 backdrop-blur-xl [@container(min-width:48rem)]:mx-auto [@container(min-width:48rem)]:max-w-[40rem] [@container(min-width:90rem)]:mx-0 [@container(min-width:90rem)]:w-[280px] [@container(min-width:90rem)]:max-w-none",
+              GLASS
+            )}
+          >
+            {people && people.length > 0 ? (
+              <div className="flex gap-1">
+                {people.map((person, index) => (
+                  <Avatar key={index} variant="image" size="32" radius="rounded" border src={person.src} name={person.name} />
+                ))}
+              </div>
+            ) : null}
+            <p className="text-3xl font-semibold text-foreground-inverse dark:text-foreground [@container(min-width:48rem)]:text-4xl">
+              <bdi dir="ltr">{statValue ?? copy.statValue}</bdi>
+            </p>
+            <p className="text-sm text-foreground-inverse dark:text-foreground">{statLabel ?? copy.statLabel}</p>
+          </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 heroFramedFullBleedCopy = COPY

package/registry/blocks/hero-framed-full-bleed/index.ts

@@ -0,0 +1,9 @@
+export {
+  HeroFramedFullBleed,
+  heroFramedFullBleedCopy,
+  type HeroFramedFullBleedAction,
+  type HeroFramedFullBleedCopy,
+  type HeroFramedFullBleedPerson,
+  type HeroFramedFullBleedPhoto,
+  type HeroFramedFullBleedProps,
+} from "./HeroFramedFullBleed"

package/registry/blocks/hero-framed-studio-card/HeroFramedStudioCard.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Badge } from "../../ui/badge/badge"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Framed Studio Card Hero.
+ *
+ * A studio's pitch on one white card set on a `muted` ground, like a print
+ * proof: an outline badge, the headline, a client's word on the work (the
+ * client's name, a "read the story" link, the quote and who said it, with
+ * their face), two buttons and a photo. A thin line closes the card off from
+ * a strip of client wordmarks, set as text.
+ *
+ * Desktop sets the copy and the photo side by side and the wordmarks in one
+ * row; thin guide lines run along the card's edges out to the block's, and a
+ * small crop mark sits on each corner. Both are decoration and Desktop only.
+ * Tablet and Mobile stack the copy over the photo and wrap the wordmarks;
+ * Mobile also stacks the buttons at full width and puts the strip's label on
+ * a line of its own.
+ *
+ * Figma draws a nav row at the top of the card (the studio's wordmark, links
+ * and a "Contact us" button). It is left out: a hero is not a navbar.
+ *
+ * In Arabic the copy moves to the right and the photo to the left, the
+ * strip's label leads from the right and the link's arrow points up and to
+ * the left. The photo is never flipped.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at, and the switch every Hero block shares, so
+ * Tablet's layout covers 768 to 1439.
+ */
+
+export interface HeroFramedStudioCardAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface HeroFramedStudioCardPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroFramedStudioCardCopy {
+  /** The outline badge above the headline, after its dot. Hidden when empty. */
+  badge: React.ReactNode
+  /** The headline, an `h1`. A line break in the string breaks the line. */
+  headline: React.ReactNode
+  /** The client whose words follow, set as a wordmark. */
+  client: React.ReactNode
+  /** The link beside the client's name, with an arrow. Hidden when null. */
+  storyAction: HeroFramedStudioCardAction | null
+  /** The client's words, quotation marks included. */
+  quote: React.ReactNode
+  /** Who said it. */
+  authorName: React.ReactNode
+  /** Their role, under the name. */
+  authorRole: React.ReactNode
+  /** The solid button. */
+  primaryAction: HeroFramedStudioCardAction
+  /** The soft button beside it. Hidden when null. */
+  secondaryAction: HeroFramedStudioCardAction | null
+  /** The label that leads the strip. A line break in the string breaks the line, from Tablet up. */
+  clientsLabel: React.ReactNode
+  /** The client wordmarks in the strip, set as text. Figma shows five. */
+  clients: React.ReactNode[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroFramedStudioCardCopy> = {
+  en: {
+    badge: "Full-service digital studio",
+    headline: "Designing digital products people return to",
+    client: "Tessaro",
+    storyAction: { label: "Read story", href: "#story" },
+    quote: "“Our new site launched on time, and sign-ups doubled in the first month.”",
+    authorName: "Lina K.",
+    authorRole: "Founder, Tessaro",
+    primaryAction: { label: "Book a call", href: "#call" },
+    secondaryAction: { label: "See our work", href: "#work" },
+    clientsLabel: "TRUSTED BY STARTUPS AND\nGROWING TEAMS",
+    clients: ["Corvane", "Halcyn", "Nuvra", "Oblique", "Marloe"],
+  },
+  ar: {
+    badge: "استوديو رقمي متكامل",
+    headline: "نصمم منتجات رقمية يعود إليها الناس",
+    client: "رواق",
+    storyAction: { label: "اقرأ القصة", href: "#story" },
+    quote: "«أُطلق موقعنا الجديد في موعده، وتضاعفت التسجيلات في الشهر الأول.»",
+    authorName: "لينا خالد",
+    authorRole: "مؤسسة رواق",
+    primaryAction: { label: "احجز مكالمة", href: "#call" },
+    secondaryAction: { label: "شاهد أعمالنا", href: "#work" },
+    clientsLabel: "تثق بنا الشركات الناشئة\nوالفرق النامية",
+    clients: ["كروان", "سراج", "وهج", "مرآة", "أفق"],
+  },
+}
+
+export interface HeroFramedStudioCardProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroFramedStudioCardCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The photo beside the copy. None by default: a `muted` placeholder of the
+   * same size.
+   * @default none: a `muted` placeholder
+   */
+  photo?: HeroFramedStudioCardPhoto
+  /**
+   * The face beside the quote's author. Its `alt` can be "": the name
+   * beside it already says who it is. None by default: the avatar shows its
+   * icon.
+   * @default none: the avatar's icon
+   */
+  authorPhoto?: HeroFramedStudioCardPhoto
+}
+
+export function HeroFramedStudioCard({
+  locale = "en",
+  badge,
+  headline,
+  client,
+  storyAction,
+  quote,
+  authorName,
+  authorRole,
+  primaryAction,
+  secondaryAction,
+  clientsLabel,
+  clients,
+  photo,
+  authorPhoto,
+  className,
+  ...props
+}: HeroFramedStudioCardProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const label = badge ?? copy.badge
+  const story = storyAction === undefined ? copy.storyAction : storyAction
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction === undefined ? copy.secondaryAction : secondaryAction
+  const marks = clients ?? copy.clients
+
+  return (
+    <section aria-labelledby={headingId} className={cn("relative isolate [container-type:inline-size] bg-muted", className)} {...props}>
+      {/* Figma's guides along the card's top and bottom edges, out to the block's sides. Desktop only. */}
+      <span aria-hidden className="absolute inset-x-0 top-12 -z-10 hidden h-px bg-border [@container(min-width:90rem)]:block" />
+      <span aria-hidden className="absolute inset-x-0 bottom-12 -z-10 hidden h-px bg-border [@container(min-width:90rem)]:block" />
+
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="mx-auto w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] p-4 [@container(min-width:48rem)]:p-6 [@container(min-width:90rem)]:px-16 [@container(min-width:90rem)]:py-12">
+        {/*
+           * On Desktop Figma pads the card 56px at the start and 48 at the
+           * end: the photo runs to 48, the strip stops at 56 (its `me-2`).
+           */}
+        <div className="relative flex flex-col gap-8 bg-background p-5 [@container(min-width:48rem)]:gap-10 [@container(min-width:48rem)]:p-10 [@container(min-width:90rem)]:gap-8 [@container(min-width:90rem)]:pb-16 [@container(min-width:90rem)]:pe-12 [@container(min-width:90rem)]:ps-14 [@container(min-width:90rem)]:pt-10">
+          {/* The guides down the card's sides, behind it, and a crop mark on each corner. Desktop only. */}
+          <span aria-hidden className="absolute -inset-y-12 start-0 -z-10 hidden w-px bg-border [@container(min-width:90rem)]:block" />
+          <span aria-hidden className="absolute -inset-y-12 end-0 -z-10 hidden w-px bg-border [@container(min-width:90rem)]:block" />
+          <span aria-hidden className="absolute -start-1 -top-1 hidden size-[9px] bg-ring [@container(min-width:90rem)]:block" />
+          <span aria-hidden className="absolute -end-1 -top-1 hidden size-[9px] bg-ring [@container(min-width:90rem)]:block" />
+          <span aria-hidden className="absolute -bottom-1 -start-1 hidden size-[9px] bg-ring [@container(min-width:90rem)]:block" />
+          <span aria-hidden className="absolute -bottom-1 -end-1 hidden size-[9px] bg-ring [@container(min-width:90rem)]:block" />
+
+          <div className="flex flex-col gap-8 [@container(min-width:48rem)]:gap-10 [@container(min-width:90rem)]:flex-row [@container(min-width:90rem)]:items-center [@container(min-width:90rem)]:gap-12">
+            <div className="flex w-full flex-col items-start gap-8 [@container(min-width:90rem)]:w-[560px] [@container(min-width:90rem)]:shrink-0">
+              {label ? (
+                <Badge variant="outline" tone="secondary" size="md" radius="rounded">
+                  <span aria-hidden>●</span> {label}
+                </Badge>
+              ) : null}
+              <h1
+                id={headingId}
+                className="whitespace-pre-line text-3xl font-semibold text-foreground [@container(min-width:48rem)]:text-4xl [@container(min-width:90rem)]:text-5xl"
+              >
+                {headline ?? copy.headline}
+              </h1>
+
+              <figure className="flex w-full flex-col gap-3">
+                <div className="flex items-start justify-between gap-4">
+                  <p className="text-base font-semibold text-foreground [@container(min-width:48rem)]:text-lg">{client ?? copy.client}</p>
+                  {story ? (
+                    <a
+                      href={story.href}
+                      className="relative inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm before:absolute before:-inset-x-1 before:-inset-y-3 text-sm font-medium text-foreground [outline:none] hover:underline hover:underline-offset-4 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                    >
+                      {story.label}
+                      <ArrowUpRight size={16} strokeWidth={1.5} absoluteStrokeWidth aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+                    </a>
+                  ) : null}
+                </div>
+                <blockquote className="text-pretty text-base text-muted-foreground">{quote ?? copy.quote}</blockquote>
+                <figcaption className="flex items-center gap-3">
+                  <Avatar variant="image" size="32" radius="rounded" src={authorPhoto?.src} name={authorPhoto?.alt ?? ""} />
+                  <span className="flex flex-col">
+                    <span className="text-sm font-semibold text-foreground">{authorName ?? copy.authorName}</span>
+                    <span className="text-xs text-muted-foreground">{authorRole ?? copy.authorRole}</span>
+                  </span>
+                </figcaption>
+              </figure>
+
+              <div className="flex w-full flex-col gap-3 [@container(min-width:48rem)]:w-auto [@container(min-width:48rem)]:flex-row">
+                <a href={primary.href} className={buttonVariants({ size: "lg" })}>
+                  {primary.label}
+                </a>
+                {secondary ? (
+                  <a href={secondary.href} className={buttonVariants({ variant: "soft", size: "lg" })}>
+                    {secondary.label}
+                  </a>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="relative h-60 w-full overflow-hidden rounded-3xl bg-muted [@container(min-width:48rem)]:h-[360px] [@container(min-width:90rem)]:h-[596px] [@container(min-width:90rem)]:min-w-0 [@container(min-width:90rem)]:flex-1">
+              {photo ? (
+                <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+              ) : null}
+            </div>
+          </div>
+
+          {/*
+             * A plain 1px line where Figma draws its Separator. Swap in
+             * Separator once it is built. On Desktop it runs edge to edge
+             * across the card, 40px under the photo.
+             */}
+          <div aria-hidden className="h-px bg-border [@container(min-width:90rem)]:-me-12 [@container(min-width:90rem)]:-ms-14 [@container(min-width:90rem)]:mt-2" />
+
+          <div className="flex flex-wrap items-center gap-x-6 gap-y-4 text-muted-foreground [@container(min-width:48rem)]:gap-x-10 [@container(min-width:90rem)]:me-2 [@container(min-width:90rem)]:flex-nowrap [@container(min-width:90rem)]:justify-between [@container(min-width:90rem)]:gap-x-6">
+            <p className="w-full text-xs font-medium [@container(min-width:48rem)]:w-auto [@container(min-width:48rem)]:whitespace-pre-line">
+              {clientsLabel ?? copy.clientsLabel}
+            </p>
+            {/* `contents` lets the wordmarks wrap in one flow with the label, as Figma's strip does. */}
+            <ul role="list" className="contents">
+              {marks.map((mark, index) => (
+                <li key={index} className="whitespace-nowrap text-lg font-semibold [@container(min-width:48rem)]:text-2xl">
+                  {mark}
+                </li>
+              ))}
+            </ul>
+          </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 heroFramedStudioCardCopy = COPY

package/registry/blocks/hero-framed-studio-card/index.ts

@@ -0,0 +1,8 @@
+export {
+  HeroFramedStudioCard,
+  heroFramedStudioCardCopy,
+  type HeroFramedStudioCardAction,
+  type HeroFramedStudioCardCopy,
+  type HeroFramedStudioCardPhoto,
+  type HeroFramedStudioCardProps,
+} from "./HeroFramedStudioCard"