@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/contact-us-office-cards/ContactUsOfficeCards.tsx

@@ -0,0 +1,235 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import {
+  ContactUsHeader,
+  ContactUsPhotoSlot,
+  ContactUsRule,
+  ContactUsSection,
+  splitCopy,
+  useReveal,
+  type ContactUsLocale,
+  type ContactUsPhoto,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Office Cards.
+ *
+ * A centred header (eyebrow, h2 at 36, 30 and 24px, a line, in a 720px column)
+ * over three office cards 24px apart: Desktop three across, Tablet two-up with
+ * the third wrapping, Mobile one per row. A card is a `card` surface with a 1px
+ * border, 10px corners and an extra-small shadow; at its top a 200px photo,
+ * under it 24px of padding around: the city (an h3, 20px) with a Soft
+ * Secondary small Rounded Badge at the end, the address, a 1px divider, and a
+ * row with the phone (a `tel:` link) and a "Directions" link with an up-right
+ * arrow in `primary`. In Arabic the card mirrors in order and the arrow flips
+ * to point up-left; on Tablet and Mobile Figma's Arabic frames also stack the
+ * phone over Directions (its English frames keep them in one row).
+ *
+ * Real vs static: `offices` is the data (city, badge, address, phone and the
+ * `directionsHref` of each), `photos` the photos, aligned to the cards: an
+ * entry may be undefined, which leaves a quiet `muted` slot. Figma's motion card
+ * also describes a live local-time chip on each card: no frame draws one, so
+ * there is none.
+ *
+ * Motion: the cards rise 12px and fade in once, 80ms apart, when the block is
+ * in view. On a pointer (hover only, not reduced motion) the photo scales to
+ * 1.06 inside its clipped box over 260ms, the card lifts 4px while its shadow
+ * goes from extra small to medium, and the arrow slides 4px along the reading
+ * direction. Reduced motion: only fades.
+ *
+ * Content limits: heading up to 28 characters, the line up to 70, a city up to
+ * 16, a badge up to 18, an address up to 56.
+ */
+
+export interface ContactUsOffice {
+  /** The city, the card's h3. */
+  city: string
+  /** The badge beside the city. */
+  badge: string
+  /** The address, one line of up to about 56 characters. */
+  address: string
+  /** The phone, as shown. The link is made from its digits. */
+  phone: string
+  /** Where "Directions" goes. */
+  directionsHref?: string
+}
+
+export interface ContactUsOfficeCardsCopy {
+  /** The small line above the heading. */
+  eyebrow: string
+  /** The heading, an `h2`. */
+  heading: string
+  /** The line under the heading. */
+  description: string
+  /** Each card's link. Its accessible name adds the city. */
+  directionsLabel: string
+  /** The cards, in order. */
+  offices: ContactUsOffice[]
+}
+
+/** Figma's copy, English and Arabic (Western digits). */
+const COPY: Record<ContactUsLocale, ContactUsOfficeCardsCopy> = {
+  en: {
+    eyebrow: "OUR STUDIOS",
+    heading: "Three places to find us",
+    description: "Drop in, or write ahead so someone is expecting you.",
+    directionsLabel: "Directions",
+    offices: [
+      {
+        city: "Dubai",
+        badge: "Headquarters",
+        address: "Level 12, Boulevard Plaza Tower 1, Downtown Dubai",
+        phone: "+971 4 512 8800",
+        directionsHref: "https://www.google.com/maps/search/?api=1&query=Boulevard+Plaza+Tower+1+Downtown+Dubai",
+      },
+      {
+        city: "Riyadh",
+        badge: "Client studio",
+        address: "King Fahd Road, Olaya District, Riyadh 12333",
+        phone: "+966 11 288 4100",
+        directionsHref: "https://www.google.com/maps/search/?api=1&query=King+Fahd+Road+Olaya+District+Riyadh",
+      },
+      {
+        city: "Amman",
+        badge: "Engineering",
+        address: "Zahran Street, Abdoun, Amman 11183",
+        phone: "+962 6 592 7700",
+        directionsHref: "https://www.google.com/maps/search/?api=1&query=Zahran+Street+Abdoun+Amman",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "استوديوهاتنا",
+    heading: "ثلاثة أماكن تجدنا فيها",
+    description: "مرّ علينا، أو راسلنا مسبقًا ليكون أحدهم بانتظارك.",
+    directionsLabel: "الاتجاهات",
+    offices: [
+      {
+        city: "دبي",
+        badge: "المقر الرئيسي",
+        address: "الطابق 12، برج بوليفارد بلازا 1، وسط مدينة دبي",
+        phone: "+971 4 512 8800",
+        directionsHref: "https://www.google.com/maps/search/?api=1&query=Boulevard+Plaza+Tower+1+Downtown+Dubai",
+      },
+      {
+        city: "الرياض",
+        badge: "استوديو العملاء",
+        address: "طريق الملك فهد، حي العليا، الرياض 12333",
+        phone: "+966 11 288 4100",
+        directionsHref: "https://www.google.com/maps/search/?api=1&query=King+Fahd+Road+Olaya+District+Riyadh",
+      },
+      {
+        city: "عمّان",
+        badge: "الهندسة",
+        address: "شارع زهران، عبدون، عمّان 11183",
+        phone: "+962 6 592 7700",
+        directionsHref: "https://www.google.com/maps/search/?api=1&query=Zahran+Street+Abdoun+Amman",
+      },
+    ],
+  },
+}
+
+export interface ContactUsOfficeCardsProps extends Omit<React.HTMLAttributes<HTMLElement>, keyof ContactUsOfficeCardsCopy>, Partial<ContactUsOfficeCardsCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: ContactUsLocale
+  /** One photo per card, in the cards' order. An undefined entry leaves that card's quiet `muted` slot. */
+  photos?: (ContactUsPhoto | undefined)[]
+}
+
+export function ContactUsOfficeCards({ locale = "en", ...given }: ContactUsOfficeCardsProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { photos, className, ...html } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+
+  return (
+    <ContactUsSection labelledBy={headingId} className={className} {...html}>
+      <div ref={reveal} className="flex flex-col gap-12">
+        <ContactUsHeader
+          headingId={headingId}
+          align="center"
+          eyebrow={copy.eyebrow}
+          heading={copy.heading}
+          description={copy.description}
+          className="mx-auto max-w-[45rem]"
+          eyebrowClassName="text-sm font-semibold text-primary"
+          headingClassName={cn(
+            "text-2xl leading-8 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]`
+          )}
+        />
+        <ul className={cn("grid grid-cols-1 gap-6", `[@container(min-width:40rem)]:grid-cols-2`, `[@container(min-width:64rem)]:grid-cols-3`)}>
+          {copy.offices.map((office, index) => (
+            <li
+              key={office.city}
+              data-reveal="rise"
+              data-reveal-delay={index * 80}
+              className={cn(
+                "group/card flex min-w-0 flex-col overflow-hidden rounded-[10px] border border-border bg-card shadow-sm",
+                "motion-safe:transition-[transform,box-shadow] motion-safe:duration-[260ms] motion-safe:ease-[cubic-bezier(0.2,0,0,1)]",
+                "hover:motion-safe:-translate-y-1 hover:motion-safe:shadow-md"
+              )}
+            >
+              <ContactUsPhotoSlot
+                photo={photos?.[index]}
+                className={cn(
+                  "h-[12.5rem] w-full shrink-0",
+                  "[&_img]:motion-safe:transition-transform [&_img]:motion-safe:duration-[260ms] [&_img]:motion-safe:ease-[cubic-bezier(0.2,0,0,1)]",
+                  "group-hover/card:motion-safe:[&_img]:scale-[1.06]"
+                )}
+              />
+              <div className="flex flex-1 flex-col gap-4 p-6">
+                <div className="flex items-center gap-3">
+                  <h3 className="min-w-0 flex-1 text-xl font-semibold text-foreground">{office.city}</h3>
+                  <Badge variant="soft" tone="secondary" size="sm" radius="rounded">
+                    {office.badge}
+                  </Badge>
+                </div>
+                <p className="text-sm text-muted-foreground">{office.address}</p>
+                <ContactUsRule />
+                <div
+                  className={cn(
+                    "mt-auto flex items-center justify-between gap-3",
+                    "rtl:flex-col rtl:items-start rtl:justify-start",
+                    `[@container(min-width:64rem)]:rtl:flex-row [@container(min-width:64rem)]:rtl:items-center [@container(min-width:64rem)]:rtl:justify-between`
+                  )}
+                >
+                  <a
+                    href={`tel:${office.phone.replace(/[^\d+]/g, "")}`}
+                    className="rounded-sm text-sm font-medium text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                  >
+                    <bdi dir="ltr">{office.phone}</bdi>
+                  </a>
+                  <a
+                    href={office.directionsHref ?? "#"}
+                    aria-label={`${copy.directionsLabel}${locale === "ar" ? "،" : ","} ${office.city}`}
+                    className="group/dir inline-flex items-center gap-2 rounded-sm text-sm font-semibold text-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+                  >
+                    {copy.directionsLabel}
+                    <span
+                      aria-hidden
+                      className="inline-flex motion-safe:transition-transform motion-safe:duration-[180ms] motion-safe:ease-[cubic-bezier(0.2,0,0,1)] group-hover/dir:motion-safe:ltr:translate-x-1 group-hover/dir:motion-safe:rtl:-translate-x-1"
+                    >
+                      <ArrowUpRight size={16} strokeWidth={1.5} className="[&:dir(rtl)]:-scale-x-100" />
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </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 contactUsOfficeCardsCopy = COPY

package/registry/blocks/contact-us-office-cards/index.ts

@@ -0,0 +1,5 @@
+export {
+  ContactUsOfficeCards,
+  contactUsOfficeCardsCopy,
+  type ContactUsOfficeCardsProps,
+} from "./ContactUsOfficeCards"

package/registry/blocks/contact-us-office-cards.test.tsx

@@ -0,0 +1,71 @@
+import { describe, expect, it } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { ContactUsOfficeCards, contactUsOfficeCardsCopy } from "./contact-us-office-cards"
+
+const PHOTO = { src: "/dubai.webp", alt: "Dubai coast" }
+const strings = (value: unknown): string[] => (typeof value === "string" ? [value] : value && typeof value === "object" ? Object.values(value).flatMap(strings) : [])
+
+describe("Office Cards", () => {
+  it.each(["en", "ar"] as const)("is a labelled section with an h2 and three h3 cities, in %s", (locale) => {
+    const { container } = render(<ContactUsOfficeCards locale={locale} />)
+    const section = container.querySelector("section")!
+    expect(document.getElementById(section.getAttribute("aria-labelledby")!)?.tagName).toBe("H2")
+    expect(screen.getAllByRole("heading", { level: 3 }).map((h) => h.textContent)).toEqual(contactUsOfficeCardsCopy[locale].offices.map((o) => o.city))
+  })
+
+  it("orders the cities Dubai, Riyadh, Amman", () => {
+    render(<ContactUsOfficeCards />)
+    expect(screen.getAllByRole("heading", { level: 3 }).map((h) => h.textContent)).toEqual(["Dubai", "Riyadh", "Amman"])
+  })
+
+  it("has Arabic copy for every English string, and every office has the same fields", () => {
+    expect(Object.keys(contactUsOfficeCardsCopy.ar).sort()).toEqual(Object.keys(contactUsOfficeCardsCopy.en).sort())
+    expect(contactUsOfficeCardsCopy.ar.offices).toHaveLength(3)
+    for (const [i, office] of contactUsOfficeCardsCopy.ar.offices.entries()) expect(Object.keys(office).sort()).toEqual(Object.keys(contactUsOfficeCardsCopy.en.offices[i]!).sort())
+  })
+
+  it("writes Arabic without a middle dot, a dash outside digits, an Arabic-Indic digit or a percent sign", () => {
+    const arabic = strings(contactUsOfficeCardsCopy.ar).join("\n")
+    expect(arabic).not.toMatch(/[·—]|(?<!\d\s?)–|–(?!\s?\d)/)
+    expect(arabic).not.toMatch(/[٠-٩%٪]/)
+  })
+
+  it("aligns photos to the cards: an undefined entry leaves a quiet ground", () => {
+    const { container } = render(<ContactUsOfficeCards photos={[PHOTO, undefined, undefined]} />)
+    const cards = container.querySelectorAll("li")
+    expect(cards[0]!.querySelector("img")?.getAttribute("src")).toBe(PHOTO.src)
+    expect(cards[1]!.querySelector("img")).toBeNull()
+    expect(cards[2]!.querySelector("img")).toBeNull()
+  })
+
+  it("rises the cards 80ms apart", () => {
+    const { container } = render(<ContactUsOfficeCards />)
+    expect([...container.querySelectorAll("li")].map((li) => li.getAttribute("data-reveal-delay"))).toEqual(["0", "80", "160"])
+  })
+
+  it("makes phones tel links and Directions links named with the city", () => {
+    render(<ContactUsOfficeCards />)
+    expect(screen.getByRole("link", { name: "+966 11 288 4100" }).getAttribute("href")).toBe("tel:+966112884100")
+    const links = screen.getAllByRole("link", { name: /^Directions, / })
+    expect(links.map((l) => l.getAttribute("aria-label"))).toEqual(["Directions, Dubai", "Directions, Riyadh", "Directions, Amman"])
+    for (const link of links) expect(link.getAttribute("href")).toMatch(/^https:/)
+  })
+
+  it("flips the arrow in a right-to-left page and draws no local-time chip", () => {
+    const { container } = render(<ContactUsOfficeCards />)
+    expect(container.querySelector("svg.lucide-arrow-up-right")!.getAttribute("class")).toContain("[&:dir(rtl)]:-scale-x-100")
+    expect(container.textContent).not.toMatch(/\d{1,2}:\d{2}/)
+  })
+
+  it("sets the badge as Badge Soft Secondary small Rounded, with no colour of its own", () => {
+    render(<ContactUsOfficeCards />)
+    const badge = screen.getByText("Headquarters").closest("[class*=rounded-full]")!
+    expect(badge.className).toContain("from-soft-secondary")
+    expect(badge.className).toContain("rounded-full")
+  })
+
+  it("takes its own offices", () => {
+    render(<ContactUsOfficeCards offices={[{ city: "Cairo", badge: "Sales", address: "Zamalek", phone: "+20 2 000 0000" }]} />)
+    expect(screen.getAllByRole("heading", { level: 3 })).toHaveLength(1)
+  })
+})

package/registry/blocks/contact-us-oversized-wordmark/ContactUsOversizedWordmark.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContactUsField,
+  ContactUsForm,
+  ContactUsRule,
+  ContactUsSection,
+  ContactUsSubmit,
+  contactUsFormMessages,
+  splitCopy,
+  useContactUsForm,
+  useReveal,
+  type ContactUsFieldDef,
+  type ContactUsFormBlockProps,
+  type ContactUsFormMessages,
+  type ContactUsLocale,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Oversized Wordmark.
+ *
+ * The word "Contact" set as large as the page allows (9XL on Desktop), a
+ * hairline under it, then a narrow intro beside a long form. The intro is a
+ * line of invitation over the direct details: the address in `primary`, the
+ * phone and the hours in `muted-foreground`. The form has eight fields:
+ * name and email, phone and company, two selects, the message and a terms
+ * checkbox, above a Send your message button.
+ *
+ * Desktop sets the intro 360px wide beside the form, the paired fields two
+ * across. Tablet keeps them side by side (the form is then 296px, so its
+ * pairs stack) and the wordmark steps to 7XL. Mobile stacks intro over form
+ * and the wordmark is 5XL; the button spans the width.
+ *
+ * The form is real. It calls `onSubmit(values)` with name, email, phone,
+ * company, interest, source, message and terms. On first view the wordmark
+ * scales in as it opens from its start edge, the rule draws, and the fields
+ * rise one after another.
+ *
+ * Content limits: the wordmark up to 9 characters (it is set at 9XL), the
+ * intro up to 105 characters, a label up to 32. The other limits are in the
+ * block's documentation page, which the default copy stays inside.
+ */
+
+export interface ContactUsOversizedWordmarkCopy extends ContactUsFormMessages {
+  /** The wordmark, an `h2`. Keep it to one short word. */
+  heading: string
+  /** The invitation beside the form. */
+  intro: string
+  /** The hours, under the address and phone. */
+  hours: 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 phone field's label. */
+  phone: string
+  /** The phone field's placeholder. */
+  phonePlaceholder: string
+  /** The company field's label. */
+  company: string
+  /** The company field's placeholder. */
+  companyPlaceholder: string
+  /** The area of interest select's label. */
+  interest: string
+  /** The area of interest select's placeholder. */
+  interestPlaceholder: string
+  /** The areas to choose from. */
+  interests: string[]
+  /** The source select's label. */
+  source: string
+  /** The source select's placeholder. */
+  sourcePlaceholder: string
+  /** The ways to have found you. */
+  sources: string[]
+  /** The message field's label. */
+  message: string
+  /** The message field's placeholder. */
+  messagePlaceholder: string
+  /** The terms checkbox's label. */
+  terms: string
+  /** The button's label. */
+  send: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsOversizedWordmarkCopy> = {
+  en: {
+    ...contactUsFormMessages.en,
+    heading: "CONTACT",
+    intro: "Ready for change? Contact Fasla today and together we will take your product from vision to reality.",
+    hours: "Sun–Thu · 09:00–18:00 GST",
+    name: "Name",
+    namePlaceholder: "Your name",
+    email: "E-mail",
+    emailPlaceholder: "Corporate email",
+    phone: "Phone number",
+    phonePlaceholder: "Your phone number",
+    company: "Company",
+    companyPlaceholder: "Company name",
+    interest: "Area of interest",
+    interestPlaceholder: "I want to know more about…",
+    interests: ["Design systems", "Product design", "Brand identity", "Something else"],
+    source: "How did you find out about us?",
+    sourcePlaceholder: "Choose an alternative",
+    sources: ["A search", "A friend or colleague", "Social media", "An event", "Other"],
+    message: "Message",
+    messagePlaceholder: "Write your message here",
+    terms: "I accept the Fasla terms.",
+    send: "Send your message",
+  },
+  ar: {
+    ...contactUsFormMessages.ar,
+    heading: "تواصل",
+    intro: "مستعد للتغيير؟ تواصل مع فاصلة اليوم ولننقل منتجك معًا من الرؤية إلى الواقع.",
+    hours: "من الأحد إلى الخميس، من 09:00 إلى 18:00 بتوقيت الخليج",
+    name: "الاسم",
+    namePlaceholder: "اسمك",
+    email: "البريد الإلكتروني",
+    emailPlaceholder: "البريد المؤسسي",
+    phone: "رقم الهاتف",
+    phonePlaceholder: "رقم هاتفك",
+    company: "الشركة",
+    companyPlaceholder: "اسم الشركة",
+    interest: "مجال الاهتمام",
+    interestPlaceholder: "أريد معرفة المزيد عن…",
+    interests: ["أنظمة التصميم", "تصميم المنتجات", "الهوية البصرية", "موضوع آخر"],
+    source: "كيف عرفت عنّا؟",
+    sourcePlaceholder: "اختر خيارًا",
+    sources: ["بحث على الإنترنت", "صديق أو زميل", "وسائل التواصل الاجتماعي", "فعالية", "غير ذلك"],
+    message: "الرسالة",
+    messagePlaceholder: "اكتب رسالتك هنا",
+    terms: "أوافق على شروط فاصلة.",
+    send: "أرسل رسالتك",
+  },
+}
+
+export interface ContactUsOversizedWordmarkProps extends ContactUsFormBlockProps, Partial<ContactUsOversizedWordmarkCopy> {
+  /** The address under the intro. */
+  emailAddress?: string
+  /** The phone number under the address. */
+  phoneNumber?: string
+}
+
+export function ContactUsOversizedWordmark({ locale = "en", ...given }: ContactUsOversizedWordmarkProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { onSubmit, disabled, emailAddress: address = "hello@fasla.com", phoneNumber: phone = "+971 4 512 8800", className, ...html } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+  const options = (list: string[]) => list.map((item) => ({ value: item, label: item }))
+
+  const f = {
+    name: { name: "name", kind: "text", label: copy.name, placeholder: copy.namePlaceholder, autoComplete: "name", required: true },
+    email: { name: "email", kind: "email", label: copy.email, placeholder: copy.emailPlaceholder, autoComplete: "email", required: true },
+    phone: { name: "phone", kind: "tel", label: copy.phone, placeholder: copy.phonePlaceholder, autoComplete: "tel" },
+    company: { name: "company", kind: "text", label: copy.company, placeholder: copy.companyPlaceholder, autoComplete: "organization", required: true },
+    interest: { name: "interest", kind: "select", label: copy.interest, placeholder: copy.interestPlaceholder, options: options(copy.interests) },
+    source: { name: "source", kind: "select", label: copy.source, placeholder: copy.sourcePlaceholder, options: options(copy.sources), required: true },
+    message: { name: "message", kind: "textarea", label: copy.message, placeholder: copy.messagePlaceholder, required: true },
+    terms: { name: "terms", kind: "checkbox", label: copy.terms, size: "sm", required: true },
+  } satisfies Record<string, ContactUsFieldDef>
+  const form = useContactUsForm({ fields: Object.values(f), messages: copy, onSubmit, disabled })
+
+  return (
+    <ContactUsSection labelledBy={headingId} className={className} {...html}>
+      <div ref={reveal} className="flex flex-col gap-12">
+        <h2
+          id={headingId}
+          data-reveal="wipe"
+          className="text-center text-5xl font-semibold text-foreground [@container(min-width:40rem)]:text-7xl [@container(min-width:64rem)]:text-9xl"
+        >
+          {copy.heading}
+        </h2>
+        <ContactUsRule data-reveal="draw-x" className="ltr:origin-left rtl:origin-right" />
+        <div className="flex flex-col gap-16 [@container(min-width:40rem)]:flex-row">
+          <div className="flex shrink-0 flex-col gap-6 [@container(min-width:40rem)]:w-[22.5rem]">
+            <p className="text-lg font-medium text-foreground">{copy.intro}</p>
+            <div className="flex flex-col gap-2">
+              <a href={`mailto:${address}`} className="w-fit rounded-sm text-base font-medium text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                <bdi dir="ltr">{address}</bdi>
+              </a>
+              <a href={`tel:${phone.replace(/\s+/g, "")}`} className="w-fit rounded-sm text-base font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                <bdi dir="ltr">{phone}</bdi>
+              </a>
+              <p className="text-sm text-muted-foreground">{copy.hours}</p>
+            </div>
+          </div>
+
+          <ContactUsForm form={form} className="flex min-w-0 flex-1 flex-col gap-5">
+            <div className="grid grid-cols-1 gap-4 [@container(min-width:64rem)]:grid-cols-2">
+              <ContactUsField field={f.name} reveal />
+              <ContactUsField field={f.email} reveal />
+            </div>
+            <div className="grid grid-cols-1 gap-4 [@container(min-width:64rem)]:grid-cols-2">
+              <ContactUsField field={f.phone} reveal />
+              <ContactUsField field={f.company} reveal />
+            </div>
+            <ContactUsField field={f.interest} reveal />
+            <ContactUsField field={f.source} reveal />
+            <ContactUsField field={f.message} reveal />
+            <ContactUsField field={f.terms} reveal />
+            <div className="flex justify-end">
+              <ContactUsSubmit size="md" className="w-full [@container(min-width:64rem)]:w-auto">
+                {copy.send}
+              </ContactUsSubmit>
+            </div>
+          </ContactUsForm>
+        </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 contactUsOversizedWordmarkCopy = COPY

package/registry/blocks/contact-us-oversized-wordmark/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContactUsOversizedWordmark,
+  contactUsOversizedWordmarkCopy,
+  type ContactUsOversizedWordmarkCopy,
+  type ContactUsOversizedWordmarkProps,
+} from "./ContactUsOversizedWordmark"