@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/contact-us-social-rail/ContactUsSocialRail.tsx

@@ -0,0 +1,270 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, Check, Copy } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Button } from "../../ui/button/button"
+import { SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import { ContactUsSection, splitCopy, useReveal, type ContactUsLocale } from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Social Rail.
+ *
+ * A header, a grid of eight social tiles and a footer, in a 1248px column on
+ * the page's own ground, 48px apart. The header is the eyebrow "SAY HELLO"
+ * (14px, `foreground`), a headline that IS the email address, and a line. The
+ * headline is 60px / 72 on Desktop, 48px / 58 on Tablet and 24px / 44 on
+ * Mobile (Arabic leads at 90, 72 and 60). Each tile is `card` with a 1px
+ * `border`, 10px corners and 24px of padding: the platform's mark (Social Icons
+ * atom, Original colours, 24px) and a trailing arrow-up-right, then the
+ * platform's name (16px, semibold) and its handle (14px, `muted-foreground`).
+ * The grid is four across on Desktop, two across on Tablet and one across on
+ * Mobile (Figma's Mobile frame stacks the eight tiles; its motion note says
+ * two-up: the frame wins, and `grid-cols-1` is the one class to change). The
+ * footer holds "Or drop us a letter" over the postal address, and a Copy email
+ * Button (Outline, Secondary, md): at the end of the row on Desktop and Tablet,
+ * full width under the address on Mobile.
+ *
+ * Real: the headline is a button that copies `email` to the clipboard
+ * (`navigator.clipboard`, with a fallback for browsers without it; nothing is
+ * claimed when neither works), and so is the footer's button. Each tile is a
+ * link to its `href`. Static: the handles, which are data (`socialLinks`).
+ * Social marks are brand artwork and never mirror; the arrows do, and slide
+ * along the reading direction.
+ *
+ * Motion: clicking either copy control swaps the headline's text for a "Copied"
+ * label for 1.6s, a check scaling in from 0.6, then it crossfades back (an
+ * aria-live region says it too). Hovering a tile (160ms, motion-safe) slides
+ * its arrow 4px and crossfades the mark from the Original to the Negative
+ * (monochrome) set. The brand-colour wash of Figma's motion card is not built,
+ * by decision. The tiles rise 12px on a 50ms stagger on first view. Reduced
+ * motion: the copy state swaps without the check animation, and a tile's hover
+ * changes nothing that moves or fades.
+ *
+ * Content limits: the email up to 24 characters (it scales down so the address
+ * never breaks mid-string), the line up to 110, a name up to 14, a handle up
+ * to 20, the address up to 90.
+ */
+
+export interface ContactUsSocialRailLink {
+  /** Which brand's mark. */
+  platform: SocialPlatform
+  /** The name beside the mark, as the brand is written in the design. */
+  name: string
+  /** The handle or path, set as one left-to-right run. */
+  handle: string
+  /** Where the tile goes. */
+  href: string
+}
+
+export interface ContactUsSocialRailCopy {
+  /** The small line above the headline. */
+  eyebrow: string
+  /** The line under the headline. */
+  description: string
+  /** Names the headline button for assistive technology, before the address: "Copy hello@fasla.com". */
+  copyLabel: string
+  /** Said in the headline and on the footer button once the address is copied. */
+  copiedLabel: string
+  /** The footer's small line above the address. */
+  letter: string
+  /** The postal address. */
+  address: string
+  /** The footer button's label. */
+  copyEmail: string
+}
+
+/** Figma's copy, English and Arabic. The Arabic address uses commas where the English uses dots, and Western digits. */
+const COPY: Record<ContactUsLocale, ContactUsSocialRailCopy> = {
+  en: {
+    eyebrow: "SAY HELLO",
+    description: "The inbox is read by the whole studio. For anything faster, we are on every network below.",
+    copyLabel: "Copy",
+    copiedLabel: "Copied",
+    letter: "Or drop us a letter",
+    address: "Fasla Studio · Level 12, Boulevard Plaza Tower 1 · Downtown Dubai · UAE",
+    copyEmail: "Copy email",
+  },
+  ar: {
+    eyebrow: "سلّم علينا",
+    description: "يقرأ الاستوديو بأكمله هذا البريد. وللتواصل الأسرع، نحن على كل الشبكات أدناه.",
+    copyLabel: "انسخ",
+    copiedLabel: "تم النسخ",
+    letter: "أو أرسل لنا رسالة بريدية",
+    address: "استوديو فاصلة، الطابق 12، برج بوليفارد بلازا 1، وسط مدينة دبي، الإمارات",
+    copyEmail: "انسخ البريد",
+  },
+}
+
+const SOCIAL_LINKS: ContactUsSocialRailLink[] = [
+  { platform: "linkedin", name: "LinkedIn", handle: "/company/fasla", href: "https://www.linkedin.com/company/fasla" },
+  { platform: "x", name: "X (Twitter)", handle: "@fasladesign", href: "https://x.com/fasladesign" },
+  { platform: "instagram", name: "Instagram", handle: "@fasla.design", href: "https://www.instagram.com/fasla.design" },
+  { platform: "dribbble", name: "Dribbble", handle: "/fasla", href: "https://dribbble.com/fasla" },
+  { platform: "github", name: "Github", handle: "/fasla", href: "https://github.com/fasla" },
+  { platform: "youtube", name: "YouTube", handle: "@fasla", href: "https://www.youtube.com/@fasla" },
+  { platform: "threads", name: "Threads", handle: "@fasla.design", href: "https://www.threads.net/@fasla.design" },
+  { platform: "medium", name: "Medium", handle: "/fasla", href: "https://medium.com/fasla" },
+]
+
+export interface ContactUsSocialRailProps extends Omit<React.HTMLAttributes<HTMLElement>, "title" | "onCopy">, Partial<ContactUsSocialRailCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: ContactUsLocale
+  /** The address the headline shows and both copy controls put on the clipboard. */
+  email?: string
+  /** The tiles, in reading order. Eight fill Figma's two rows of four. */
+  socialLinks?: ContactUsSocialRailLink[]
+  /** Called with the address after it was copied. */
+  onCopy?: (email: string) => void
+}
+
+const COPIED_MS = 1600
+
+/** Writes `text` to the clipboard. Resolves to whether it worked. */
+async function writeClipboard(text: string) {
+  try {
+    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text)
+      return true
+    }
+  } catch {
+    /* falls through to the older route */
+  }
+  try {
+    if (typeof document === "undefined" || typeof document.execCommand !== "function") return false
+    const field = document.createElement("textarea")
+    field.value = text
+    field.setAttribute("readonly", "")
+    field.style.cssText = "position:fixed;top:0;opacity:0;pointer-events:none"
+    document.body.appendChild(field)
+    field.select()
+    const ok = document.execCommand("copy")
+    field.remove()
+    return ok
+  } catch {
+    return false
+  }
+}
+
+/** The copy action both controls share: `copied` is true for 1.6s after a copy that worked. */
+function useCopyEmail(email: string, onCopy?: (email: string) => void) {
+  const [copied, setCopied] = React.useState(false)
+  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  React.useEffect(() => () => clearTimeout(timer.current), [])
+  const copy = React.useCallback(async () => {
+    if (!(await writeClipboard(email))) return
+    setCopied(true)
+    onCopy?.(email)
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => setCopied(false), COPIED_MS)
+  }, [email, onCopy])
+  return [copied, copy] as const
+}
+
+const EASE = "ease-[cubic-bezier(0.2,0,0,1)]"
+
+export function ContactUsSocialRail({ locale = "en", ...given }: ContactUsSocialRailProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { email = "hello@fasla.com", socialLinks = SOCIAL_LINKS, onCopy, className, ...html } = rest
+  const emailId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+  const [copied, copyEmail] = useCopyEmail(email, onCopy)
+
+  return (
+    <ContactUsSection labelledBy={emailId} className={className} {...html}>
+      <header className="flex w-full flex-col items-start gap-5">
+        <p className="text-sm font-semibold leading-5 text-foreground rtl:leading-6">{copy.eyebrow}</p>
+        <h2 className="w-full text-2xl font-semibold leading-[2.75rem] text-foreground rtl:leading-[3.75rem] [@container(min-width:40rem)]:text-5xl [@container(min-width:40rem)]:leading-[3.625rem] [@container(min-width:40rem)]:rtl:leading-[4.5rem] [@container(min-width:64rem)]:text-6xl [@container(min-width:64rem)]:leading-[4.5rem] [@container(min-width:64rem)]:rtl:leading-[5.625rem]">
+          <button
+            type="button"
+            onClick={copyEmail}
+            aria-label={`${copy.copyLabel} ${email}`}
+            className={cn(
+              "relative inline-grid max-w-full cursor-pointer rounded-md text-start font-[inherit] text-[length:inherit] leading-[inherit] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+              "[&>*]:col-start-1 [&>*]:row-start-1"
+            )}
+          >
+            <bdi
+              dir="ltr"
+              id={emailId}
+              className={cn("min-w-0 break-all motion-safe:transition-opacity motion-safe:duration-[180ms]", EASE, copied ? "opacity-0" : "opacity-100")}
+            >
+              {email}
+            </bdi>
+            <span aria-hidden className={cn("flex items-center gap-[0.25em] motion-safe:transition-opacity motion-safe:duration-[180ms]", EASE, copied ? "opacity-100" : "opacity-0")}>
+              <Check
+                strokeWidth={1.5}
+                className={cn("size-[0.8em] shrink-0 motion-safe:transition-transform motion-safe:duration-[180ms]", EASE, copied ? "scale-100" : "motion-safe:scale-[0.6]")}
+              />
+              {copy.copiedLabel}
+            </span>
+          </button>
+        </h2>
+        <p className="text-base leading-6 text-muted-foreground rtl:leading-7 [@container(min-width:40rem)]:text-lg [@container(min-width:40rem)]:leading-7 [@container(min-width:40rem)]:rtl:leading-8">{copy.description}</p>
+      </header>
+
+      <div ref={reveal} className="grid grid-cols-1 gap-6 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-4">
+        {socialLinks.map((link, index) => (
+          <a
+            key={link.platform + link.handle}
+            href={link.href}
+            data-reveal="rise"
+            data-reveal-delay={index * 50}
+            className="group/tile flex min-w-0 flex-col gap-4 rounded-[10px] border border-border bg-card p-6 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+          >
+            <span className="flex items-center justify-between gap-3">
+              <span className="relative size-6 shrink-0">
+                <SocialIcon
+                  platform={link.platform}
+                  color="original"
+                  className={cn("absolute inset-0 motion-safe:transition-opacity motion-safe:duration-[160ms] group-hover/tile:motion-safe:opacity-0 group-focus-visible/tile:motion-safe:opacity-0", EASE)}
+                />
+                <SocialIcon
+                  platform={link.platform}
+                  color="negative"
+                  className={cn("absolute inset-0 opacity-0 motion-safe:transition-opacity motion-safe:duration-[160ms] group-hover/tile:motion-safe:opacity-100 group-focus-visible/tile:motion-safe:opacity-100", EASE)}
+                />
+              </span>
+              <span
+                aria-hidden
+                className={cn(
+                  "flex shrink-0 motion-safe:transition-transform motion-safe:duration-[160ms] group-hover/tile:motion-safe:translate-x-1 group-focus-visible/tile:motion-safe:translate-x-1 rtl:group-hover/tile:motion-safe:-translate-x-1 rtl:group-focus-visible/tile:motion-safe:-translate-x-1",
+                  EASE
+                )}
+              >
+                <ArrowUpRight strokeWidth={1.5} className="size-4 text-muted-foreground rtl:-scale-x-100" />
+              </span>
+            </span>
+            <span className="flex min-w-0 flex-col">
+              <span className="truncate text-base font-semibold leading-6 text-foreground rtl:leading-7">{link.name}</span>
+              <span className="block truncate text-start text-sm leading-5 text-muted-foreground rtl:leading-6">
+                <bdi dir="ltr" className="inline-block [unicode-bidi:isolate]">{link.handle}</bdi>
+              </span>
+            </span>
+          </a>
+        ))}
+      </div>
+
+      <footer className="flex flex-col items-start gap-8 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between">
+        <div className="flex min-w-0 flex-col gap-1">
+          <p className="text-xs font-semibold leading-4 text-muted-foreground rtl:leading-5">{copy.letter}</p>
+          <p className="text-sm font-medium leading-5 text-foreground rtl:leading-6">{copy.address}</p>
+        </div>
+        <Button type="button" variant="outline" size="md" onClick={copyEmail} className="w-full shrink-0 [@container(min-width:40rem)]:w-auto">
+          {copied ? copy.copiedLabel : copy.copyEmail}
+          {copied ? <Check aria-hidden strokeWidth={1.5} /> : <Copy aria-hidden strokeWidth={1.5} />}
+        </Button>
+      </footer>
+
+      <span role="status" aria-live="polite" className="sr-only">
+        {copied ? `${copy.copiedLabel} ${email}` : ""}
+      </span>
+    </ContactUsSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const contactUsSocialRailCopy = COPY

package/registry/blocks/contact-us-social-rail/index.ts

@@ -0,0 +1,7 @@
+export {
+  ContactUsSocialRail,
+  contactUsSocialRailCopy,
+  type ContactUsSocialRailCopy,
+  type ContactUsSocialRailLink,
+  type ContactUsSocialRailProps,
+} from "./ContactUsSocialRail"

package/registry/blocks/contact-us-social-rail.test.tsx

@@ -0,0 +1,121 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react"
+import { ContactUsSocialRail, contactUsSocialRailCopy } from "./contact-us-social-rail"
+
+const strings = (value: unknown): string[] =>
+  typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : []
+
+afterEach(() => {
+  cleanup()
+  vi.useRealTimers()
+  Object.defineProperty(navigator, "clipboard", { value: undefined, configurable: true })
+})
+
+const withClipboard = () => {
+  const writeText = vi.fn().mockResolvedValue(undefined)
+  Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true })
+  return writeText
+}
+
+describe("Social Rail", () => {
+  it.each(["en", "ar"] as const)("is a labelled section whose heading is the email address, in %s", (locale) => {
+    const { container } = render(<ContactUsSocialRail locale={locale} />)
+    const section = container.querySelector("section")!
+    expect(document.getElementById(section.getAttribute("aria-labelledby")!)?.textContent).toBe("hello@fasla.com")
+    expect(container.querySelector("h2 button")).toBeTruthy()
+  })
+
+  it("has Arabic copy for every English string, written by the Arabic rules", () => {
+    expect(Object.keys(contactUsSocialRailCopy.ar).sort()).toEqual(Object.keys(contactUsSocialRailCopy.en).sort())
+    const arabic = strings(contactUsSocialRailCopy.ar).join("\n")
+    expect(arabic).not.toMatch(/[·—]|(?<!\d)–|–(?!\d)/)
+    expect(arabic).not.toMatch(/[٠-٩%٪]/)
+  })
+
+  it("has no form, so no field is required and no asterisk shows", () => {
+    const { container } = render(<ContactUsSocialRail />)
+    expect(container.querySelector("form, input, textarea")).toBeNull()
+    expect(container.textContent).not.toContain("*")
+  })
+
+  it("draws eight links, four a row on Desktop, each with both mark sets, a name and a handle", () => {
+    const { container } = render(<ContactUsSocialRail />)
+    const tiles = [...container.querySelectorAll("a[href]")]
+    expect(tiles).toHaveLength(8)
+    expect(tiles.map((tile) => tile.querySelector("[data-platform]")?.getAttribute("data-platform"))).toEqual(["linkedin", "x", "instagram", "dribbble", "github", "youtube", "threads", "medium"])
+    for (const tile of tiles) {
+      expect([...tile.querySelectorAll("[data-slot=social-icon]")].map((icon) => icon.getAttribute("data-color"))).toEqual(["original", "negative"])
+      expect(tile.querySelector("bdi")?.getAttribute("dir")).toBe("ltr")
+    }
+    expect(screen.getByRole("link", { name: /LinkedIn/ }).getAttribute("href")).toContain("linkedin.com")
+    expect(container.querySelector("[class*='grid-cols-4']")).toBeTruthy()
+  })
+
+  it("takes its tiles from socialLinks, and never mirrors a mark while the arrow does", () => {
+    const { container } = render(<ContactUsSocialRail socialLinks={[{ platform: "github", name: "Code", handle: "/x", href: "https://example.com" }]} />)
+    expect(container.querySelectorAll("a[href]")).toHaveLength(1)
+    expect(container.querySelector("a svg[data-slot=social-icon]")?.getAttribute("class")).not.toContain("scale-x")
+    expect(container.querySelector("a svg.lucide")?.getAttribute("class")).toContain("rtl:-scale-x-100")
+  })
+
+  it("rises the tiles on a 50ms stagger", () => {
+    const { container } = render(<ContactUsSocialRail />)
+    expect([...container.querySelectorAll("a[data-reveal=rise]")].map((tile) => tile.getAttribute("data-reveal-delay"))).toEqual(["0", "50", "100", "150", "200", "250", "300", "350"])
+  })
+
+  it("moves each mark from Original to Negative and slides the arrow, only when motion is welcome", () => {
+    const { container } = render(<ContactUsSocialRail />)
+    const tile = container.querySelector("a")!
+    const [original, negative] = [...tile.querySelectorAll("[data-slot=social-icon]")]
+    expect(original!.getAttribute("class")).toContain("group-hover/tile:motion-safe:opacity-0")
+    expect(negative!.getAttribute("class")).toContain("group-hover/tile:motion-safe:opacity-100")
+    expect(tile.innerHTML).toContain("group-hover/tile:motion-safe:translate-x-1")
+    expect(tile.innerHTML).toContain("rtl:group-hover/tile:motion-safe:-translate-x-1")
+  })
+
+  it("copies the address from the headline, says Copied for 1.6s with a live announcement, then goes back", async () => {
+    vi.useFakeTimers()
+    const writeText = withClipboard()
+    const onCopy = vi.fn()
+    const { container } = render(<ContactUsSocialRail onCopy={onCopy} />)
+    const headline = screen.getByRole("button", { name: "Copy hello@fasla.com" })
+    await act(async () => {
+      fireEvent.click(headline)
+    })
+    expect(writeText).toHaveBeenCalledWith("hello@fasla.com")
+    expect(onCopy).toHaveBeenCalledWith("hello@fasla.com")
+    expect(container.querySelector("[role=status]")?.textContent).toBe("Copied hello@fasla.com")
+    expect(screen.getByRole("button", { name: /Copied/ })).toBeTruthy()
+    await act(async () => {
+      vi.advanceTimersByTime(1600)
+    })
+    expect(container.querySelector("[role=status]")?.textContent).toBe("")
+    expect(screen.getByRole("button", { name: "Copy email" })).toBeTruthy()
+  })
+
+  it("copies from the Copy email button too, with a custom address, in Arabic", async () => {
+    const writeText = withClipboard()
+    render(<ContactUsSocialRail locale="ar" email="team@fasla.com" />)
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "انسخ البريد" }))
+    })
+    expect(writeText).toHaveBeenCalledWith("team@fasla.com")
+    expect(screen.getByRole("button", { name: /تم النسخ/ })).toBeTruthy()
+  })
+
+  it("claims nothing when there is no clipboard to write to", async () => {
+    const { container } = render(<ContactUsSocialRail />)
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Copy hello@fasla.com" }))
+    })
+    expect(container.querySelector("[role=status]")?.textContent).toBe("")
+  })
+
+  it("sets the footer button as Button Outline Secondary, with no colour of its own", () => {
+    render(<ContactUsSocialRail />)
+    const button = screen.getByRole("button", { name: "Copy email" })
+    expect(button.className).toContain("ring-1")
+    expect(button.className).toContain("text-foreground ring-border")
+    expect(button.className).toContain("w-full shrink-0 [@container(min-width:40rem)]:w-auto")
+  })
+})

package/registry/blocks/contact-us-split-photo-dark/ContactUsSplitPhotoDark.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { FaslaLogo } from "../../ui/fasla-logo/fasla-logo"
+import {
+  ContactUsField,
+  ContactUsForm,
+  ContactUsPhotoSlot,
+  ContactUsSection,
+  ContactUsSubmit,
+  contactUsFormMessages,
+  splitCopy,
+  useContactUsForm,
+  useReveal,
+  type ContactUsFieldDef,
+  type ContactUsFormBlockProps,
+  type ContactUsFormMessages,
+  type ContactUsLocale,
+  type ContactUsPhoto,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Split Photo Dark.
+ *
+ * Two boxes 16px apart inside 16px of padding: a form side and a photo, both
+ * 731px tall on Desktop. The form side is 48px of padding around a 400px
+ * column, centred, with the Fasla logo at the foot: a small heading ("Book a
+ * demo" and a line under it), five pill fields (name, work email, role,
+ * company, team size), a full-width Request demo button and a 12px privacy
+ * note. The photo sits at the end, so in Arabic it moves to the left.
+ *
+ * Tablet puts the form side above the photo, the column filling it, the
+ * photo a 360px band; Mobile does the same with the photo 280px. The padding
+ * stays 48px, so on a phone the column is 232px wide, as Figma draws it.
+ *
+ * "Dark" is the Type's name, not its colour: the surfaces are the page's
+ * own, so the block is light in Light mode and dark in Dark mode.
+ *
+ * The form is real. It calls `onSubmit(values)` with name, email, role,
+ * company and teamSize. The work email is the one required field and its
+ * label ends in " *" (Figma does not draw that asterisk yet).
+ *
+ * Motion: once, when the block is in view, the photo settles from 1.04 scale
+ * to 1 and the form column rises 12px and fades. Reduced motion: both only
+ * fade.
+ *
+ * Content limits: the heading up to 24 characters, its line up to 40, the
+ * privacy note up to 170.
+ */
+
+export interface ContactUsSplitPhotoDarkCopy extends ContactUsFormMessages {
+  /** The form's heading, an `h2`. */
+  heading: string
+  /** The line under the heading. */
+  description: string
+  /** The name field's label. */
+  name: string
+  /** The name field's placeholder. */
+  namePlaceholder: string
+  /** The email field's label. */
+  email: string
+  /** The email field's placeholder. */
+  emailPlaceholder: string
+  /** The role field's label. Not `role`, which is an HTML attribute. */
+  jobTitle: string
+  /** The role field's placeholder. */
+  jobTitlePlaceholder: string
+  /** The company field's label. */
+  company: string
+  /** The company field's placeholder. */
+  companyPlaceholder: string
+  /** The team size select's label. */
+  teamSize: string
+  /** The team size select's placeholder. */
+  teamSizePlaceholder: string
+  /** The team sizes to choose from. */
+  teamSizes: string[]
+  /** The button's label. */
+  submit: string
+  /** The note under the button. */
+  note: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsSplitPhotoDarkCopy> = {
+  en: {
+    ...contactUsFormMessages.en,
+    heading: "Book a demo",
+    description: "See how Fasla fits your team.",
+    name: "Your name",
+    namePlaceholder: "Sara Al Mansouri",
+    email: "Work email",
+    emailPlaceholder: "you@company.com",
+    jobTitle: "Your role",
+    jobTitlePlaceholder: "e.g. Founder, CTO, Design lead",
+    company: "Company",
+    companyPlaceholder: "Fasla Studio",
+    teamSize: "Team size",
+    teamSizePlaceholder: "Team size",
+    teamSizes: ["1–10 people", "11–50 people", "51–200 people", "More than 200 people"],
+    submit: "Request demo",
+    note: "By submitting, you consent to receive product updates and invitations to events from Fasla. You can unsubscribe at any time. See our Privacy Policy for details.",
+  },
+  ar: {
+    ...contactUsFormMessages.ar,
+    heading: "احجز عرضًا تجريبيًا",
+    description: "اكتشف كيف تناسب فاصلة فريقك.",
+    name: "اسمك",
+    namePlaceholder: "سارة المنصوري",
+    email: "بريد العمل",
+    emailPlaceholder: "you@company.com",
+    jobTitle: "دورك الوظيفي",
+    jobTitlePlaceholder: "مثال: مؤسس، مدير تقني، قائد تصميم",
+    company: "الشركة",
+    companyPlaceholder: "استوديو فاصلة",
+    teamSize: "حجم الفريق",
+    teamSizePlaceholder: "حجم الفريق",
+    teamSizes: ["من 1 إلى 10 أشخاص", "من 11 إلى 50 شخصًا", "من 51 إلى 200 شخص", "أكثر من 200 شخص"],
+    submit: "اطلب العرض",
+    note: "بإرسالك هذا النموذج، توافق على استلام تحديثات المنتج ودعوات الفعاليات من فاصلة. يمكنك إلغاء الاشتراك في أي وقت. اطّلع على سياسة الخصوصية لمزيد من التفاصيل.",
+  },
+}
+
+export interface ContactUsSplitPhotoDarkProps extends ContactUsFormBlockProps, Partial<ContactUsSplitPhotoDarkCopy> {
+  /** The photo beside (or under) the form side. A `muted` ground shows without one. */
+  photo?: ContactUsPhoto
+}
+
+export function ContactUsSplitPhotoDark({ locale = "en", ...given }: ContactUsSplitPhotoDarkProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { onSubmit, disabled, photo, className, ...html } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+
+  const f = {
+    name: { name: "name", kind: "text", label: copy.name, placeholder: copy.namePlaceholder, autoComplete: "name", radius: "rounded" },
+    email: { name: "email", kind: "email", label: copy.email, placeholder: copy.emailPlaceholder, autoComplete: "email", radius: "rounded", required: true },
+    role: { name: "role", kind: "text", label: copy.jobTitle, placeholder: copy.jobTitlePlaceholder, autoComplete: "organization-title", radius: "rounded" },
+    company: { name: "company", kind: "text", label: copy.company, placeholder: copy.companyPlaceholder, autoComplete: "organization", radius: "rounded" },
+    teamSize: { name: "teamSize", kind: "select", label: copy.teamSize, placeholder: copy.teamSizePlaceholder, options: copy.teamSizes.map((item) => ({ value: item, label: item })), radius: "rounded" },
+  } satisfies Record<string, ContactUsFieldDef>
+  const form = useContactUsForm({ fields: Object.values(f), messages: copy, onSubmit, disabled })
+
+  return (
+    <ContactUsSection labelledBy={headingId} gap="none" className={cn("p-4 md:p-4 lg:p-4", className)} contentClassName="max-w-none" {...html}>
+      <div ref={reveal} className="flex flex-col gap-4 [@container(min-width:64rem)]:flex-row">
+        <div className="flex flex-col items-center gap-8 p-12 [@container(min-width:64rem)]:w-[43.25rem] [@container(min-width:64rem)]:shrink-0 [@container(min-width:64rem)]:justify-between [@container(min-width:64rem)]:gap-0">
+          <div data-reveal="rise" data-reveal-delay="100" className="flex w-full flex-col gap-5 [@container(min-width:64rem)]:w-[25rem]">
+            <div className="flex flex-col gap-1 text-center">
+              <h2 id={headingId} className="text-lg font-medium text-foreground">
+                {copy.heading}
+              </h2>
+              <p className="text-sm text-muted-foreground">{copy.description}</p>
+            </div>
+            <ContactUsForm form={form} className="flex flex-col gap-5">
+              <ContactUsField field={f.name} />
+              <ContactUsField field={f.email} />
+              <ContactUsField field={f.role} />
+              <ContactUsField field={f.company} />
+              <ContactUsField field={f.teamSize} />
+              <ContactUsSubmit variant="soft" tone="secondary" radius="rounded" size="lg" className="w-full">
+                {copy.submit}
+              </ContactUsSubmit>
+              <p className="text-center text-xs text-muted-foreground">{copy.note}</p>
+            </ContactUsForm>
+          </div>
+          <FaslaLogo title="Fasla" className="h-[2.1875rem] w-auto shrink-0" />
+        </div>
+
+        <ContactUsPhotoSlot
+          photo={photo}
+          photoReveal="settle"
+          className="h-[17.5rem] shrink-0 rounded-[14px] [@container(min-width:40rem)]:h-[22.5rem] [@container(min-width:64rem)]:h-auto [@container(min-width:64rem)]:min-w-0 [@container(min-width:64rem)]:flex-1"
+        />
+      </div>
+    </ContactUsSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const contactUsSplitPhotoDarkCopy = COPY

package/registry/blocks/contact-us-split-photo-dark/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContactUsSplitPhotoDark,
+  contactUsSplitPhotoDarkCopy,
+  type ContactUsSplitPhotoDarkCopy,
+  type ContactUsSplitPhotoDarkProps,
+} from "./ContactUsSplitPhotoDark"