@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/contact-us-hq-feature/ContactUsHqFeature.tsx

@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Button, buttonVariants } from "../../ui/button/button"
+import {
+  ContactUsPhotoSlot,
+  ContactUsSection,
+  openState,
+  splitCopy,
+  useLiveNow,
+  type ContactUsHours,
+  type ContactUsLocale,
+  type ContactUsPhoto,
+  type ContactUsWeek,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=HQ Feature.
+ *
+ * Desktop: a photo (664 × 440, 10px corners) and a 520px details column 64px
+ * apart, 96px of padding. The details, 32px apart: eyebrow, h2 (36px), a line,
+ * the Hours card (a `muted` card, 10px corners, 24px of padding: the label
+ * OPENING HOURS and one row per run of days with its times), the live open or
+ * closed row (an 8px dot and a line) and two buttons. Tablet and Mobile stack the
+ * photo over the details, 64px apart; the photo band is 289px tall on Tablet
+ * and 318px on Mobile (Figma's frame heights). The headline steps 36, 30, 24px; on Mobile both buttons go full width.
+ *
+ * Real vs static: the open or closed row is live. It is computed from `hours`
+ * (a `ContactUsWeek`, Sunday first; the Hours card's rows are that week, a row
+ * per run of days with the same hours), `timeZone` (default Asia/Dubai) and
+ * `now` (freezes the time, for previews and tests). Open reads "Open now ·
+ * closes in 3 hours" (hours rounded down; minutes when under an hour), closed
+ * "Closed · opens today at 09:00", "tomorrow" or a day's name. Arabic uses a
+ * comma for the dot. Before the real time is known (the first render without
+ * `now`) the dot is neutral and the line empty. The photo is static: the
+ * scroll parallax of Figma's motion card is not built. "Get directions" is a
+ * link (`directionsHref`) and "Book a visit" is a link when `bookHref` is
+ * given, else a button that calls `onBook`; both are Figma's Solid Primary and
+ * Outline Secondary Buttons. Figma draws no calendar icon in "Book a visit", so
+ * none is drawn.
+ *
+ * Motion: the dot cross-fades its colour in 180ms when the state changes; the
+ * buttons lift 2px on hover (not with reduced motion). There is no entrance.
+ *
+ * Content limits: heading up to 28 characters, the line up to 140.
+ */
+
+export interface ContactUsHqFeatureCopy {
+  /** The small line above the heading. */
+  eyebrow: string
+  /** The heading, an `h2`. */
+  heading: string
+  /** The line under the heading. */
+  description: string
+  /** The Hours card's label. */
+  hoursLabel: string
+  /** The seven days' names, Sunday first. */
+  dayNames: string[]
+  /** Joins the first and last day of a run: "Sunday – Thursday". */
+  rangeJoin: string
+  /** The word for a closed day. */
+  closedLabel: string
+  /** The live row when open, before the time: "Open now". */
+  openNow: string
+  /** "closes in" (open) */
+  closesIn: string
+  /** "opens" (closed) */
+  opens: string
+  /** "today", "tomorrow" and the word before the time. */
+  today: string
+  tomorrow: string
+  at: string
+  /** Between the state and the rest of the live row: " · " in English, "، " in Arabic. */
+  separator: string
+  /** "Get directions". */
+  directionsLabel: string
+  /** "Book a visit". */
+  bookLabel: string
+}
+
+/** Figma's copy, English and Arabic (Western digits, a comma for the dot, no dash between words). */
+const COPY: Record<ContactUsLocale, ContactUsHqFeatureCopy> = {
+  en: {
+    eyebrow: "HEADQUARTERS",
+    heading: "Boulevard Plaza, Dubai",
+    description: "The studio is open to clients and candidates. Coffee is on us — just tell us you are coming so the front desk can sign you in.",
+    hoursLabel: "OPENING HOURS",
+    dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    rangeJoin: " – ",
+    closedLabel: "Closed",
+    openNow: "Open now",
+    closesIn: "closes in",
+    opens: "opens",
+    today: "today",
+    tomorrow: "tomorrow",
+    at: "at",
+    separator: " · ",
+    directionsLabel: "Get directions",
+    bookLabel: "Book a visit",
+  },
+  ar: {
+    eyebrow: "المقر الرئيسي",
+    heading: "بوليفارد بلازا، دبي",
+    description: "الاستوديو مفتوح للعملاء والمرشحين. القهوة علينا، فقط أخبرنا بقدومك ليسجّلك الاستقبال.",
+    hoursLabel: "ساعات العمل",
+    dayNames: ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"],
+    rangeJoin: " إلى ",
+    closedLabel: "مغلق",
+    openNow: "مفتوح الآن",
+    closesIn: "يغلق خلال",
+    opens: "يفتح",
+    today: "اليوم",
+    tomorrow: "غدًا",
+    at: "عند",
+    separator: "، ",
+    directionsLabel: "احصل على الاتجاهات",
+    bookLabel: "احجز زيارة",
+  },
+}
+
+/** Sunday to Thursday 09:00 – 18:00, Friday 09:00 – 13:00, Saturday closed. */
+const DEFAULT_WEEK: ContactUsWeek = [
+  { open: "09:00", close: "18:00" },
+  { open: "09:00", close: "18:00" },
+  { open: "09:00", close: "18:00" },
+  { open: "09:00", close: "18:00" },
+  { open: "09:00", close: "18:00" },
+  { open: "09:00", close: "13:00" },
+  null,
+]
+
+const same = (a: ContactUsHours, b: ContactUsHours) => (a === null || b === null ? a === b : a.open === b.open && a.close === b.close)
+
+/** The week as runs of neighbouring days with the same hours: Sunday to Thursday, Friday, Saturday. */
+function groupDays(week: ContactUsWeek) {
+  const groups: { from: number; to: number; hours: ContactUsHours }[] = []
+  week.forEach((hours, day) => {
+    const last = groups[groups.length - 1]
+    if (last && same(last.hours, hours)) last.to = day
+    else groups.push({ from: day, to: day, hours })
+  })
+  return groups
+}
+
+/** "3 hours", "1 hour", «3 ساعات», «ساعتين»: whole hours, or minutes under an hour. Western digits. */
+function duration(locale: ContactUsLocale, totalMinutes: number) {
+  const hours = Math.floor(totalMinutes / 60)
+  const value = hours >= 1 ? hours : Math.max(1, totalMinutes)
+  const unit = hours >= 1 ? "hour" : "minute"
+  if (locale === "en") return `${value} ${unit}${value === 1 ? "" : "s"}`
+  const forms = unit === "hour" ? ["ساعة", "ساعتين", "ساعات", "ساعة"] : ["دقيقة", "دقيقتين", "دقائق", "دقيقة"]
+  if (value === 1) return forms[0]
+  if (value === 2) return forms[1]
+  return `${value} ${value >= 3 && value <= 10 ? forms[2] : forms[3]}`
+}
+
+export interface ContactUsHqFeatureProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof ContactUsHqFeatureCopy>, Partial<ContactUsHqFeatureCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: ContactUsLocale
+  /** The photo. A `muted` ground shows without one. */
+  photo?: ContactUsPhoto
+  /** The week's opening hours, Sunday first, in the studio's own time. Drives the Hours card and the live row. */
+  hours?: ContactUsWeek
+  /** The studio's time zone. */
+  timeZone?: string
+  /** Freezes the live row at this moment. Without it the row follows the clock. */
+  now?: Date | number | string
+  /** Where "Get directions" goes. */
+  directionsHref?: string
+  /** Makes "Book a visit" a link to here. Without it, it is a button that calls `onBook`. */
+  bookHref?: string
+  /** Called by "Book a visit" when it is a button. */
+  onBook?: () => void | Promise<void>
+}
+
+const LIFT = "hover:motion-safe:-translate-y-0.5 motion-safe:transition-[transform,background-color,color,opacity] motion-safe:duration-[120ms]"
+
+export function ContactUsHqFeature({ locale = "en", ...given }: ContactUsHqFeatureProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const {
+    photo,
+    hours = DEFAULT_WEEK,
+    timeZone = "Asia/Dubai",
+    now,
+    directionsHref = "https://www.google.com/maps/search/?api=1&query=Boulevard+Plaza+Tower+1+Downtown+Dubai",
+    bookHref,
+    onBook,
+    className,
+    ...html
+  } = rest
+  const headingId = React.useId()
+  const moment = useLiveNow(now)
+  const state = moment ? openState(hours, timeZone, moment) : null
+
+  let status = ""
+  if (state) {
+    if (state.open) status = `${copy.openNow}${copy.separator}${copy.closesIn} ${duration(locale, state.closesInMinutes ?? 0)}`
+    else if (state.next) {
+      const when =
+        state.next.daysAhead === 0 ? copy.today : state.next.daysAhead === 1 ? copy.tomorrow : copy.dayNames[state.next.day]
+      status = `${copy.closedLabel}${copy.separator}${copy.opens} ${when} ${copy.at} ${state.next.time}`
+    } else status = copy.closedLabel
+  }
+
+  const rows = groupDays(hours).map((group) => ({
+    key: group.from,
+    days: group.from === group.to ? copy.dayNames[group.from] : `${copy.dayNames[group.from]}${copy.rangeJoin}${copy.dayNames[group.to]}`,
+    time: group.hours ? `${group.hours.open} – ${group.hours.close}` : copy.closedLabel,
+    closed: !group.hours,
+  }))
+
+  return (
+    <ContactUsSection labelledBy={headingId} gap="none" className={className} {...html}>
+      <div className={cn("flex flex-col gap-16", `[@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-start`)}>
+        <ContactUsPhotoSlot
+          photo={photo}
+          className={cn("h-[19.875rem] w-full rounded-[10px]", `[@container(min-width:40rem)]:h-[18.0625rem]`, `[@container(min-width:64rem)]:h-[27.5rem] [@container(min-width:64rem)]:min-w-0 [@container(min-width:64rem)]:flex-1`)}
+        />
+        <div className={cn("flex min-w-0 flex-col gap-8", `[@container(min-width:64rem)]:w-[32.5rem] [@container(min-width:64rem)]:shrink-0`)}>
+          <p className="text-sm font-semibold text-primary">{copy.eyebrow}</p>
+          <h2
+            id={headingId}
+            className={cn(
+              "text-2xl font-semibold leading-8 text-foreground rtl:leading-10",
+              `[@container(min-width:40rem)]:text-3xl [@container(min-width:40rem)]:leading-[2.75rem] [@container(min-width:40rem)]:rtl:leading-[3.75rem]`,
+              `[@container(min-width:64rem)]:text-4xl [@container(min-width:64rem)]:leading-[2.75rem] [@container(min-width:64rem)]:rtl:leading-[3.75rem]`
+            )}
+          >
+            {copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground">{copy.description}</p>
+
+          <div className="flex flex-col gap-3 rounded-[10px] bg-muted p-6">
+            <p className="text-xs font-semibold text-muted-foreground">{copy.hoursLabel}</p>
+            {rows.map((row) => (
+              <div key={row.key} className="flex items-center justify-between gap-3">
+                <span className="text-sm text-muted-foreground">{row.days}</span>
+                <span className="text-sm font-medium text-foreground">
+                  <bdi dir="ltr">{row.time}</bdi>
+                </span>
+              </div>
+            ))}
+          </div>
+
+          <div role="status" data-state={state ? (state.open ? "open" : "closed") : "unknown"} className="flex min-h-5 items-center gap-2">
+            <span
+              aria-hidden
+              className={cn(
+                "size-2 shrink-0 rounded-full motion-safe:transition-colors motion-safe:duration-[180ms]",
+                state ? (state.open ? "bg-success" : "bg-muted-foreground") : "bg-border"
+              )}
+            />
+            <span className="text-sm font-medium text-foreground">{status}</span>
+          </div>
+
+          <div className={cn("flex flex-col gap-3", `[@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center`)}>
+            <a href={directionsHref} className={buttonVariants({ variant: "default", size: "md", className: cn(LIFT, "w-full", `[@container(min-width:40rem)]:w-auto`) })}>
+              {copy.directionsLabel}
+            </a>
+            {bookHref ? (
+              <a href={bookHref} className={buttonVariants({ variant: "outline", size: "md", className: cn(LIFT, "w-full", `[@container(min-width:40rem)]:w-auto`) })}>
+                {copy.bookLabel}
+              </a>
+            ) : (
+              <Button type="button" variant="outline" size="md" className={cn(LIFT, "w-full", `[@container(min-width:40rem)]:w-auto`)} onClick={() => void onBook?.()}>
+                {copy.bookLabel}
+              </Button>
+            )}
+          </div>
+        </div>
+      </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 contactUsHqFeatureCopy = COPY

package/registry/blocks/contact-us-hq-feature/index.ts

@@ -0,0 +1,5 @@
+export {
+  ContactUsHqFeature,
+  contactUsHqFeatureCopy,
+  type ContactUsHqFeatureProps,
+} from "./ContactUsHqFeature"

package/registry/blocks/contact-us-hq-feature.test.tsx

@@ -0,0 +1,102 @@
+import { describe, expect, it, vi } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { ContactUsHqFeature, contactUsHqFeatureCopy } from "./contact-us-hq-feature"
+
+const NOW = "2026-03-10T10:20:00Z" // Tuesday 14:20 in Dubai, 3 h 40 m before close
+const PHOTO = { src: "/lounge.webp", alt: "A lounge" }
+const strings = (value: unknown): string[] => (typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : [])
+const status = (container: HTMLElement) => container.querySelector("[role=status]")!
+
+describe("HQ Feature", () => {
+  it.each(["en", "ar"] as const)("is a labelled section with an h2, in %s", (locale) => {
+    const { container } = render(<ContactUsHqFeature locale={locale} now={NOW} />)
+    const section = container.querySelector("section")!
+    expect(document.getElementById(section.getAttribute("aria-labelledby")!)?.tagName).toBe("H2")
+  })
+
+  it("has Arabic copy for every English string", () => {
+    expect(Object.keys(contactUsHqFeatureCopy.ar).sort()).toEqual(Object.keys(contactUsHqFeatureCopy.en).sort())
+  })
+
+  it("writes Arabic without a middle dot, a dash outside digits, an Arabic-Indic digit or a percent sign", () => {
+    const arabic = strings(contactUsHqFeatureCopy.ar).join("\n")
+    expect(arabic).not.toMatch(/[·—]|(?<!\d\s?)–|–(?!\s?\d)/)
+    expect(arabic).not.toMatch(/[٠-٩%٪]/)
+  })
+
+  it("reads exactly Figma's live line at the frozen moment, and a different moment changes it", () => {
+    const { container, rerender } = render(<ContactUsHqFeature now={NOW} />)
+    expect(status(container).textContent).toBe("Open now · closes in 3 hours")
+    expect(status(container).getAttribute("data-state")).toBe("open")
+    rerender(<ContactUsHqFeature now="2026-03-10T13:40:00Z" />) // 17:40, 20 minutes before close
+    expect(status(container).textContent).toBe("Open now · closes in 20 minutes")
+    rerender(<ContactUsHqFeature now="2026-03-14T10:20:00Z" />) // Saturday
+    expect(status(container).textContent).toBe("Closed · opens tomorrow at 09:00")
+    expect(status(container).getAttribute("data-state")).toBe("closed")
+    rerender(<ContactUsHqFeature now="2026-03-13T11:00:00Z" />) // Friday 15:00, after 13:00
+    expect(status(container).textContent).toBe("Closed · opens Sunday at 09:00")
+    rerender(<ContactUsHqFeature now="2026-03-10T03:00:00Z" />) // Tuesday 07:00
+    expect(status(container).textContent).toBe("Closed · opens today at 09:00")
+  })
+
+  it("reads the line in Arabic with a comma and Western digits", () => {
+    const { container, rerender } = render(<ContactUsHqFeature locale="ar" now={NOW} />)
+    expect(status(container).textContent).toBe("مفتوح الآن، يغلق خلال 3 ساعات")
+    rerender(<ContactUsHqFeature locale="ar" now="2026-03-10T13:40:00Z" />)
+    expect(status(container).textContent).toBe("مفتوح الآن، يغلق خلال 20 دقيقة")
+    rerender(<ContactUsHqFeature locale="ar" now="2026-03-14T10:20:00Z" />)
+    expect(status(container).textContent).toBe("مغلق، يفتح غدًا عند 09:00")
+  })
+
+  it("uses a green dot when open and a muted one when closed", () => {
+    const { container, rerender } = render(<ContactUsHqFeature now={NOW} />)
+    expect(status(container).firstElementChild!.className).toContain("bg-success")
+    rerender(<ContactUsHqFeature now="2026-03-14T10:20:00Z" />)
+    expect(status(container).firstElementChild!.className).toContain("bg-muted-foreground")
+    expect(status(container).firstElementChild!.className).toContain("duration-[180ms]")
+  })
+
+  it("is neutral, with no countdown, before the time is known", () => {
+    // Without `now` the first render has no time; the live one comes after mount, so read the server render.
+    const { renderToString } = require("react-dom/server") as typeof import("react-dom/server")
+    const html = renderToString(<ContactUsHqFeature />)
+    expect(html).toContain('data-state="unknown"')
+    expect(html).not.toContain("Open now")
+    expect(html).not.toContain("closes in")
+  })
+
+  it("draws the Hours card from the week, one row per run of days", () => {
+    render(<ContactUsHqFeature now={NOW} />)
+    for (const text of ["OPENING HOURS", "Sunday – Thursday", "Friday", "Saturday", "09:00 – 18:00", "09:00 – 13:00", "Closed"]) expect(screen.getByText(text)).toBeTruthy()
+    const { rerender } = render(<ContactUsHqFeature now={NOW} hours={[null, { open: "10:00", close: "16:00" }, { open: "10:00", close: "16:00" }, null, null, null, null]} />)
+    rerender(<ContactUsHqFeature now={NOW} hours={[null, { open: "10:00", close: "16:00" }, { open: "10:00", close: "16:00" }, null, null, null, null]} />)
+    expect(screen.getByText("Monday – Tuesday")).toBeTruthy()
+  })
+
+  it("follows the time zone", () => {
+    // 10:20Z is 11:20 in London, not yet open for a 12:00 opening.
+    const week = Array(7).fill({ open: "12:00", close: "20:00" }) as never
+    const { container } = render(<ContactUsHqFeature now={NOW} timeZone="Europe/London" hours={week} />)
+    expect(status(container).textContent).toBe("Closed · opens today at 12:00")
+  })
+
+  it("links Get directions and offers Book a visit as a button or a link", () => {
+    const onBook = vi.fn()
+    const { rerender } = render(<ContactUsHqFeature now={NOW} directionsHref="https://maps.example/hq" onBook={onBook} />)
+    expect(screen.getByRole("link", { name: "Get directions" }).getAttribute("href")).toBe("https://maps.example/hq")
+    fireEvent.click(screen.getByRole("button", { name: "Book a visit" }))
+    expect(onBook).toHaveBeenCalledTimes(1)
+    rerender(<ContactUsHqFeature now={NOW} bookHref="/book" />)
+    expect(screen.getByRole("link", { name: "Book a visit" }).getAttribute("href")).toBe("/book")
+    expect(screen.getByRole("link", { name: "Book a visit" }).className).toContain("hover:motion-safe:-translate-y-0.5")
+  })
+
+  it("shows a photo when given one, and a quiet ground when not; the photo does not move on scroll", () => {
+    const { container, rerender } = render(<ContactUsHqFeature now={NOW} />)
+    expect(container.querySelector("img")).toBeNull()
+    rerender(<ContactUsHqFeature now={NOW} photo={PHOTO} />)
+    const img = container.querySelector("img")!
+    expect(img.getAttribute("src")).toBe(PHOTO.src)
+    expect(img.getAttribute("data-reveal")).toBeNull()
+  })
+})

package/registry/blocks/contact-us-map-split/ContactUsMapSplit.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+import * as React from "react"
+import { Clock, MapPin, Phone } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+import {
+  ContactUsPhotoSlot,
+  ContactUsSection,
+  splitCopy,
+  useReveal,
+  type ContactUsLocale,
+  type ContactUsPhoto,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Map Split.
+ *
+ * Two columns 48px apart on Desktop (1248px wide, 96px of padding): a photo
+ * slot 720px wide that holds a "Map Pin Card" (a card with a border, 8px
+ * corners and a medium shadow, "Fasla HQ" and its address) 24px in from the
+ * bottom start corner, and a 480px details column: eyebrow, h2 (36px), a line,
+ * three address rows (a 40px `muted` tile with a 20px icon, a small label and its
+ * value) and two buttons. Tablet and Mobile stack the photo over the details;
+ * the photo band is 126px tall on Tablet and Mobile (Figma's frames draw it as a
+ * hug of the pin card: 78px plus 24px above and below), the
+ * headline steps 36, 30, 24px, and on Mobile the address rows stack their value
+ * lines and both buttons go full width.
+ *
+ * Real vs static: there is NO map library. The "map" is a photo slot (`photo`),
+ * a muted ground without one, with the Map Pin Card over it. "Get directions" is a
+ * link (`directionsHref`) and "Email the studio" is a `mailto:` link
+ * (`emailAddress`), both styled with `buttonVariants`, as Figma's Solid Primary
+ * and Outline Secondary Buttons. The phone is a `tel:` link. Figma draws no pin
+ * marker on the photo, so none is drawn.
+ *
+ * Motion: once, when the block is a fifth in view, the photo pans (scale 1.08 to
+ * 1, 260ms) and the Map Pin Card rises 12px and fades in 200ms later. Reduced
+ * motion: only fades.
+ *
+ * Content limits: heading up to 28 characters, the line up to 160, an address
+ * value up to 70, the card's address up to 40.
+ */
+
+export interface ContactUsMapSplitCopy {
+  /** The Map Pin Card's name. */
+  pinName: string
+  /** The Map Pin Card's address line. */
+  pinAddress: string
+  /** The small line above the heading. */
+  eyebrow: string
+  /** The heading, an `h2`. */
+  heading: string
+  /** The line under the heading. */
+  description: string
+  /** The address row's label. */
+  addressLabel: string
+  /** The address row's value. */
+  addressValue: string
+  /** The hours row's label. */
+  hoursLabel: string
+  /** The hours row's value. */
+  hoursValue: string
+  /** The phone row's label. */
+  phoneLabel: string
+  /** The phone row's value, as shown. */
+  phoneValue: string
+  /** "Get directions". */
+  directionsLabel: string
+  /** "Email the studio". */
+  emailLabel: string
+}
+
+/** Figma's copy, English and Arabic (Western digits). */
+const COPY: Record<ContactUsLocale, ContactUsMapSplitCopy> = {
+  en: {
+    pinName: "Fasla HQ",
+    pinAddress: "Level 12, Boulevard Plaza Tower 1",
+    eyebrow: "VISIT US",
+    heading: "Come by the studio",
+    description: "We are on the twelfth floor, opposite the fountain side of Boulevard Plaza. Ring the bell at reception and ask for the Fasla desk.",
+    addressLabel: "Address",
+    addressValue: "Level 12, Boulevard Plaza Tower 1, Downtown Dubai, UAE",
+    hoursLabel: "Opening hours",
+    hoursValue: "Sunday to Thursday, 09:00 – 18:00 GST",
+    phoneLabel: "Reception",
+    phoneValue: "+971 4 512 8800",
+    directionsLabel: "Get directions",
+    emailLabel: "Email the studio",
+  },
+  ar: {
+    pinName: "مقر فاصلة",
+    pinAddress: "الطابق 12، برج بوليفارد بلازا 1",
+    eyebrow: "زُرنا",
+    heading: "مرّ على الاستوديو",
+    description: "نحن في الطابق الثاني عشر، في الجهة المقابلة للنافورة من بوليفارد بلازا. اضغط الجرس عند الاستقبال واسأل عن مكتب فاصلة.",
+    addressLabel: "العنوان",
+    addressValue: "الطابق 12، برج بوليفارد بلازا 1، وسط مدينة دبي، الإمارات",
+    hoursLabel: "ساعات العمل",
+    hoursValue: "الأحد إلى الخميس، 09:00 – 18:00 بتوقيت الخليج",
+    phoneLabel: "الاستقبال",
+    phoneValue: "+971 4 512 8800",
+    directionsLabel: "احصل على الاتجاهات",
+    emailLabel: "راسل الاستوديو",
+  },
+}
+
+export interface ContactUsMapSplitProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof ContactUsMapSplitCopy>, Partial<ContactUsMapSplitCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: ContactUsLocale
+  /** The photo in the map slot. A `muted` ground shows without one. */
+  photo?: ContactUsPhoto
+  /** Where "Get directions" goes. */
+  directionsHref?: string
+  /** The address "Email the studio" writes to. */
+  emailAddress?: string
+}
+
+function Row({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-start gap-4">
+      <span aria-hidden className="flex size-10 shrink-0 items-center justify-center rounded-[var(--radius-md)] bg-muted text-foreground">
+        {icon}
+      </span>
+      <div className="flex min-w-0 flex-col">
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <span className="text-base font-medium text-foreground">{children}</span>
+      </div>
+    </div>
+  )
+}
+
+export function ContactUsMapSplit({ locale = "en", ...given }: ContactUsMapSplitProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const {
+    photo,
+    directionsHref = "https://www.google.com/maps/search/?api=1&query=Boulevard+Plaza+Tower+1+Downtown+Dubai",
+    emailAddress = "hello@fasla.com",
+    className,
+    ...html
+  } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+  const phoneHref = `tel:${copy.phoneValue.replace(/[^\d+]/g, "")}`
+
+  return (
+    <ContactUsSection labelledBy={headingId} gap="none" className={className} {...html}>
+      <div ref={reveal} className={cn("flex flex-col gap-12", `[@container(min-width:64rem)]:flex-row`)}>
+        <ContactUsPhotoSlot
+          photo={photo}
+          photoReveal="pan"
+          className={cn(
+            "h-[7.875rem] w-full rounded-[10px]",
+            `[@container(min-width:64rem)]:h-auto [@container(min-width:64rem)]:min-h-[28.75rem] [@container(min-width:64rem)]:min-w-0 [@container(min-width:64rem)]:flex-1`
+          )}
+        >
+          <div
+            data-reveal="rise"
+            data-reveal-delay="200"
+            className="absolute bottom-6 start-6 flex w-max max-w-[calc(100%-3rem)] flex-col gap-2 rounded-[var(--radius-md)] border border-border bg-card p-4 shadow-md"
+          >
+            <span className="text-sm font-semibold text-foreground">{copy.pinName}</span>
+            <span className="text-xs text-muted-foreground">{copy.pinAddress}</span>
+          </div>
+        </ContactUsPhotoSlot>
+
+        <div className={cn("flex min-w-0 flex-col gap-8", `[@container(min-width:64rem)]:w-[30rem] [@container(min-width:64rem)]:shrink-0`)}>
+          <p className="text-sm font-semibold text-primary">{copy.eyebrow}</p>
+          <h2
+            id={headingId}
+            className={cn(
+              "text-2xl font-semibold leading-8 text-foreground rtl:leading-10",
+              `[@container(min-width:40rem)]:text-3xl [@container(min-width:40rem)]:leading-[2.75rem] [@container(min-width:40rem)]:rtl:leading-[3.75rem]`,
+              `[@container(min-width:64rem)]:text-4xl [@container(min-width:64rem)]:leading-[2.75rem] [@container(min-width:64rem)]:rtl:leading-[3.75rem]`
+            )}
+          >
+            {copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground">{copy.description}</p>
+          <div className="flex flex-col gap-5">
+            <Row icon={<MapPin size={20} strokeWidth={1.5} />} label={copy.addressLabel}>
+              {copy.addressValue}
+            </Row>
+            <Row icon={<Clock size={20} strokeWidth={1.5} />} label={copy.hoursLabel}>
+              {copy.hoursValue}
+            </Row>
+            <Row icon={<Phone size={20} strokeWidth={1.5} />} label={copy.phoneLabel}>
+              <a href={phoneHref} className="rounded-sm underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                <bdi dir="ltr">{copy.phoneValue}</bdi>
+              </a>
+            </Row>
+          </div>
+          <div className={cn("flex flex-col gap-3", `[@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center`)}>
+            <a href={directionsHref} className={buttonVariants({ variant: "default", size: "md", className: cn("w-full", `[@container(min-width:40rem)]:w-auto`) })}>
+              {copy.directionsLabel}
+            </a>
+            <a href={`mailto:${emailAddress}`} className={buttonVariants({ variant: "outline", size: "md", className: cn("w-full", `[@container(min-width:40rem)]:w-auto`) })}>
+              {copy.emailLabel}
+            </a>
+          </div>
+        </div>
+      </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 contactUsMapSplitCopy = COPY

package/registry/blocks/contact-us-map-split/index.ts

@@ -0,0 +1,5 @@
+export {
+  ContactUsMapSplit,
+  contactUsMapSplitCopy,
+  type ContactUsMapSplitProps,
+} from "./ContactUsMapSplit"