@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/contact-us-classic-centered/ContactUsClassicCentered.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { Send } from "lucide-react"
+import {
+  ContactUsField,
+  ContactUsForm,
+  ContactUsHeader,
+  ContactUsSection,
+  ContactUsSubmit,
+  contactUsFormMessages,
+  splitCopy,
+  useContactUsForm,
+  type ContactUsFieldDef,
+  type ContactUsFormBlockProps,
+  type ContactUsFormMessages,
+  type ContactUsLocale,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Classic Centered.
+ *
+ * The plain contact page. A centred header (an eyebrow, the heading, one line
+ * of what to expect), then a 768px card holding the form: first and last
+ * name side by side, work email, a topic select, the message, the privacy
+ * checkbox, and under them a one-line reply promise beside the Send message
+ * button. A line below the card offers the email address instead.
+ *
+ * Desktop and Tablet set the names side by side and the promise beside the
+ * button; Mobile stacks both, the heading drops from 4XL to 2XL and the
+ * button spans the card. The card is 32px padded at every size.
+ *
+ * The form is real. It checks the email and the required fields, calls
+ * `onSubmit(values)` with firstName, lastName, email, topic, message and
+ * consent, and shows the three things that can happen: a field is wrong, the
+ * send fails, or it worked. Fields marked `*` are required; the privacy
+ * checkbox is too.
+ *
+ * Content limits: the heading up to 31 characters, the description up to
+ * 90, a label up to 20 and the button label up to 25. The other limits are
+ * in the block's documentation page, which the default copy stays inside.
+ */
+
+export interface ContactUsClassicCenteredCopy extends ContactUsFormMessages {
+  /** The small line above the heading. */
+  eyebrow: string
+  /** The section's heading, an `h2`. */
+  heading: string
+  /** What happens after sending. */
+  description: string
+  /** The first name field's label. */
+  firstName: string
+  /** The first name field's placeholder. */
+  firstNamePlaceholder: string
+  /** The last name field's label. */
+  lastName: string
+  /** The last name field's placeholder. */
+  lastNamePlaceholder: string
+  /** The email field's label. */
+  email: string
+  /** The email field's placeholder. */
+  emailPlaceholder: string
+  /** The topic select's label. */
+  topic: string
+  /** The topic select's placeholder. */
+  topicPlaceholder: string
+  /** The topics to choose from. */
+  topics: string[]
+  /** The message field's label. */
+  message: string
+  /** The message field's placeholder. */
+  messagePlaceholder: string
+  /** The checkbox's label. */
+  consent: string
+  /** The reply promise beside the button. */
+  replyNote: string
+  /** The button's label. */
+  send: string
+  /** The line under the card, before the address. */
+  alternative: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsClassicCenteredCopy> = {
+  en: {
+    ...contactUsFormMessages.en,
+    eyebrow: "CONTACT",
+    heading: "Talk to the Fasla team",
+    description: "Tell us what you need and the right person will get back to you within one business day.",
+    firstName: "First name",
+    firstNamePlaceholder: "Sara",
+    lastName: "Last name",
+    lastNamePlaceholder: "Al Mansouri",
+    email: "Work email",
+    emailPlaceholder: "sara@company.com",
+    topic: "What is this about?",
+    topicPlaceholder: "Choose a topic",
+    topics: ["A project", "A partnership", "Support", "Something else"],
+    message: "Message",
+    messagePlaceholder: "Tell us a little about your project, timeline and budget.",
+    consent: "I agree to the Fasla privacy policy.",
+    replyNote: "We reply in under 24 hours.",
+    send: "Send message",
+    alternative: "Prefer email?",
+  },
+  ar: {
+    ...contactUsFormMessages.ar,
+    eyebrow: "تواصل",
+    heading: "تحدّث إلى فريق فاصلة",
+    description: "أخبرنا بما تحتاجه وسيعود إليك الشخص المناسب خلال يوم عمل واحد.",
+    firstName: "الاسم الأول",
+    firstNamePlaceholder: "سارة",
+    lastName: "اسم العائلة",
+    lastNamePlaceholder: "المنصوري",
+    email: "بريد العمل",
+    emailPlaceholder: "sara@company.com",
+    topic: "عن ماذا تريد التحدث؟",
+    topicPlaceholder: "اختر موضوعًا",
+    topics: ["مشروع", "شراكة", "دعم", "موضوع آخر"],
+    message: "الرسالة",
+    messagePlaceholder: "أخبرنا قليلًا عن مشروعك وجدولك وميزانيتك.",
+    consent: "أوافق على سياسة الخصوصية في فاصلة.",
+    replyNote: "نردّ خلال أقل من 24 ساعة.",
+    send: "أرسل الرسالة",
+    alternative: "تفضّل البريد؟",
+  },
+}
+
+export interface ContactUsClassicCenteredProps extends ContactUsFormBlockProps, Partial<ContactUsClassicCenteredCopy> {
+  /** The address offered under the card. */
+  emailAddress?: string
+}
+
+const EMAIL_LINK =
+  "font-medium text-foreground underline underline-offset-4 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 rounded-sm"
+
+export function ContactUsClassicCentered({ locale = "en", ...given }: ContactUsClassicCenteredProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { onSubmit, disabled, emailAddress: address = "hello@fasla.com", className, ...html } = rest
+  const headingId = React.useId()
+
+  const f = {
+    firstName: { name: "firstName", kind: "text", label: copy.firstName, placeholder: copy.firstNamePlaceholder, autoComplete: "given-name" },
+    lastName: { name: "lastName", kind: "text", label: copy.lastName, placeholder: copy.lastNamePlaceholder, autoComplete: "family-name" },
+    email: { name: "email", kind: "email", label: copy.email, placeholder: copy.emailPlaceholder, autoComplete: "email", required: true },
+    topic: { name: "topic", kind: "select", label: copy.topic, placeholder: copy.topicPlaceholder, options: copy.topics.map((topic) => ({ value: topic, label: topic })) },
+    message: { name: "message", kind: "textarea", label: copy.message, placeholder: copy.messagePlaceholder, required: true },
+    consent: { name: "consent", kind: "checkbox", label: copy.consent, 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} contentClassName="items-center" {...html}>
+      <ContactUsHeader
+        headingId={headingId}
+        align="center"
+        eyebrow={copy.eyebrow}
+        heading={copy.heading}
+        description={copy.description}
+        className="max-w-3xl"
+        headingClassName="text-2xl [@container(min-width:40rem)]:text-3xl [@container(min-width:64rem)]:text-4xl"
+        eyebrowClassName="text-sm font-semibold text-primary"
+      />
+
+      <ContactUsForm form={form} className="w-full max-w-3xl rounded-lg border border-border bg-card p-8 text-card-foreground shadow-sm">
+        <div className="flex flex-col gap-5">
+          <div className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2">
+            <ContactUsField field={f.firstName} />
+            <ContactUsField field={f.lastName} />
+          </div>
+          <ContactUsField field={f.email} />
+          <ContactUsField field={f.topic} />
+          <ContactUsField field={f.message} />
+          <ContactUsField field={f.consent} />
+          <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between">
+            <p className="text-xs text-muted-foreground">{copy.replyNote}</p>
+            <ContactUsSubmit size="md" className="w-full [@container(min-width:40rem)]:w-auto">
+              <span>{copy.send}</span>
+              <Send aria-hidden className="[&:dir(rtl)]:-scale-x-100" />
+            </ContactUsSubmit>
+          </div>
+        </div>
+      </ContactUsForm>
+
+      <p className="text-sm text-muted-foreground">
+        {copy.alternative}{" "}
+        <a href={`mailto:${address}`} className={EMAIL_LINK}>
+          <bdi dir="ltr">{address}</bdi>
+        </a>
+      </p>
+    </ContactUsSection>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const contactUsClassicCenteredCopy = COPY

package/registry/blocks/contact-us-classic-centered/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContactUsClassicCentered,
+  contactUsClassicCenteredCopy,
+  type ContactUsClassicCenteredCopy,
+  type ContactUsClassicCenteredProps,
+} from "./ContactUsClassicCentered"

package/registry/blocks/contact-us-dark-statement/ContactUsDarkStatement.tsx

@@ -0,0 +1,218 @@
+"use client"
+
+import * as React from "react"
+import {
+  ContactUsField,
+  ContactUsForm,
+  ContactUsSection,
+  ContactUsSocialLinks,
+  ContactUsSubmit,
+  contactUsFormMessages,
+  splitCopy,
+  useContactUsForm,
+  useReveal,
+  type ContactUsFieldDef,
+  type ContactUsFormBlockProps,
+  type ContactUsFormMessages,
+  type ContactUsLocale,
+  type ContactUsSocialLink,
+} from "../contact-us/contact-us"
+
+/*
+ * Figma: `Contact Us` (42334:293941), Type=Dark Statement.
+ *
+ * A statement and a form, side by side and with no card. On the start side:
+ * an eyebrow, a large headline, a paragraph, three facts (the studio, the
+ * hours, a direct address) and a row of social marks. On the end side: the
+ * form, with first and last name side by side, email, company, the project
+ * and a privacy checkbox above a large Submit button.
+ *
+ * It is called Dark Statement in Figma, but its ground is `background`: it
+ * reads light in Light and dark in Dark, as the frames do.
+ *
+ * Desktop sets the statement 560px wide beside the form. Tablet and Mobile
+ * stack them, 80px apart; the headline steps from 5XL to 3XL, the
+ * facts become label over value on Mobile, and the button spans the width.
+ *
+ * The form is real. It calls `onSubmit(values)` with firstName, lastName,
+ * email, company, project and consent. The headline rises into place once.
+ *
+ * Content limits: the heading up to 54 characters, the paragraph up to 150,
+ * a fact's value up to 52. The other limits are in the block's documentation
+ * page, which the default copy stays inside.
+ */
+
+export interface ContactUsDarkStatementFact {
+  /** The fact's name, such as "Hours". */
+  label: string
+  /** What it says. */
+  value: string
+  /** Makes the value a link, such as `mailto:hello@fasla.com`. */
+  href?: string
+}
+
+export interface ContactUsDarkStatementCopy extends ContactUsFormMessages {
+  /** The small line above the headline. */
+  eyebrow: string
+  /** The headline, an `h2`. */
+  heading: string
+  /** The paragraph under the headline. */
+  description: string
+  /** The three facts under the paragraph. */
+  facts: ContactUsDarkStatementFact[]
+  /** The first name field's label. */
+  firstName: string
+  /** The first name field's placeholder. */
+  firstNamePlaceholder: string
+  /** The last name field's label. */
+  lastName: string
+  /** The last name field's placeholder. */
+  lastNamePlaceholder: string
+  /** The email field's label. */
+  email: string
+  /** The email field's placeholder. */
+  emailPlaceholder: string
+  /** The company field's label. */
+  company: string
+  /** The company field's placeholder. */
+  companyPlaceholder: string
+  /** The project field's label. */
+  project: string
+  /** The project field's placeholder. */
+  projectPlaceholder: string
+  /** The checkbox's label. */
+  consent: string
+  /** The button's label. */
+  submit: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsDarkStatementCopy> = {
+  en: {
+    ...contactUsFormMessages.en,
+    eyebrow: "CONTACT",
+    heading: "Let us make something worth talking about.",
+    description: "Fasla partners with product teams who care about craft. Tell us where you are and we will tell you honestly whether we are the right fit.",
+    facts: [
+      { label: "Studio", value: "Dubai · Riyadh · remote" },
+      { label: "Hours", value: "Sun–Thu, 09:00–18:00 GST" },
+      { label: "Direct", value: "hello@fasla.com", href: "mailto:hello@fasla.com" },
+    ],
+    firstName: "First name",
+    firstNamePlaceholder: "Sara",
+    lastName: "Last name",
+    lastNamePlaceholder: "Al Mansouri",
+    email: "Email",
+    emailPlaceholder: "sara@company.com",
+    company: "Company",
+    companyPlaceholder: "Where do you work?",
+    project: "Tell us about the project",
+    projectPlaceholder: "Scope, timeline, budget range — whatever you have so far.",
+    consent: "I have read the privacy statement.",
+    submit: "Submit",
+  },
+  ar: {
+    ...contactUsFormMessages.ar,
+    eyebrow: "تواصل",
+    heading: "لنصنع شيئًا يستحق الحديث عنه.",
+    description: "تعمل فاصلة مع فرق المنتجات التي تهتم بالحِرفية. أخبرنا أين أنت وسنخبرك بصراحة إن كنّا الخيار المناسب.",
+    facts: [
+      { label: "الاستوديو", value: "دبي والرياض وعن بُعد" },
+      { label: "ساعات العمل", value: "من الأحد إلى الخميس، من 09:00 إلى 18:00 بتوقيت الخليج" },
+      { label: "مباشر", value: "hello@fasla.com", href: "mailto:hello@fasla.com" },
+    ],
+    firstName: "الاسم الأول",
+    firstNamePlaceholder: "سارة",
+    lastName: "اسم العائلة",
+    lastNamePlaceholder: "المنصوري",
+    email: "البريد الإلكتروني",
+    emailPlaceholder: "sara@company.com",
+    company: "الشركة",
+    companyPlaceholder: "أين تعمل؟",
+    project: "أخبرنا عن المشروع",
+    projectPlaceholder: "النطاق والجدول والميزانية: كل ما لديك حتى الآن.",
+    consent: "قرأت بيان الخصوصية.",
+    submit: "إرسال",
+  },
+}
+
+export interface ContactUsDarkStatementProps extends ContactUsFormBlockProps, Partial<ContactUsDarkStatementCopy> {
+  /** The marks under the facts. Each goes to `href`; the defaults go nowhere, so pass your own. */
+  socialLinks?: ContactUsSocialLink[]
+}
+
+const DEFAULT_SOCIAL: ContactUsSocialLink[] = [
+  { platform: "linkedin", href: "#" },
+  { platform: "x", href: "#" },
+  { platform: "dribbble", href: "#" },
+]
+
+export function ContactUsDarkStatement({ locale = "en", ...given }: ContactUsDarkStatementProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { onSubmit, disabled, socialLinks = DEFAULT_SOCIAL, className, ...html } = rest
+  const headingId = React.useId()
+  const reveal = useReveal<HTMLDivElement>()
+
+  const f = {
+    firstName: { name: "firstName", kind: "text", label: copy.firstName, placeholder: copy.firstNamePlaceholder, autoComplete: "given-name" },
+    lastName: { name: "lastName", kind: "text", label: copy.lastName, placeholder: copy.lastNamePlaceholder, autoComplete: "family-name" },
+    email: { name: "email", kind: "email", label: copy.email, placeholder: copy.emailPlaceholder, autoComplete: "email", required: true },
+    company: { name: "company", kind: "text", label: copy.company, placeholder: copy.companyPlaceholder, autoComplete: "organization" },
+    project: { name: "project", kind: "textarea", label: copy.project, placeholder: copy.projectPlaceholder, required: true },
+    consent: { name: "consent", kind: "checkbox", label: copy.consent, 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="grid grid-cols-1 gap-20 [@container(min-width:64rem)]:grid-cols-[35rem_minmax(0,1fr)]">
+        <div className="flex min-w-0 flex-col items-start gap-8">
+          <p className="text-sm font-semibold text-muted-foreground">{copy.eyebrow}</p>
+          <h2 id={headingId} data-reveal="rise" className="text-3xl font-semibold text-foreground [@container(min-width:64rem)]:text-5xl">
+            {copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground [@container(min-width:40rem)]:text-lg">{copy.description}</p>
+          <dl className="flex w-full flex-col gap-4">
+            {copy.facts.map((fact) => (
+              <div key={fact.label} className="flex flex-col gap-4 text-sm font-medium [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:justify-between">
+                <dt className="text-muted-foreground">{fact.label}</dt>
+                <dd className="text-end text-foreground">
+                  {fact.href ? (
+                    <a href={fact.href} className="rounded-sm underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                      <bdi dir="ltr">{fact.value}</bdi>
+                    </a>
+                  ) : (
+                    fact.value
+                  )}
+                </dd>
+              </div>
+            ))}
+          </dl>
+          <ContactUsSocialLinks links={socialLinks} />
+        </div>
+
+        <ContactUsForm form={form} className="flex min-w-0 flex-col gap-5">
+          <div className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2">
+            <ContactUsField field={f.firstName} />
+            <ContactUsField field={f.lastName} />
+          </div>
+          <ContactUsField field={f.email} />
+          <ContactUsField field={f.company} />
+          <ContactUsField field={f.project} />
+          <ContactUsField field={f.consent} />
+          <div className="flex justify-end">
+            <ContactUsSubmit size="lg" className="w-full [@container(min-width:40rem)]:w-auto">
+              {copy.submit}
+            </ContactUsSubmit>
+          </div>
+        </ContactUsForm>
+      </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 contactUsDarkStatementCopy = COPY

package/registry/blocks/contact-us-dark-statement/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContactUsDarkStatement,
+  contactUsDarkStatementCopy,
+  type ContactUsDarkStatementCopy,
+  type ContactUsDarkStatementProps,
+} from "./ContactUsDarkStatement"

package/registry/blocks/contact-us-editorial-and-address-card/ContactUsEditorialAndAddressCard.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Badge } from "../../ui/badge/badge"
+import {
+  CONTACT_US_TEXTAREA_88,
+  ContactUsField,
+  ContactUsForm,
+  ContactUsPhotoSlot,
+  ContactUsRule,
+  ContactUsSection,
+  ContactUsSubmit,
+  ContactUsWords,
+  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=Editorial & Address Card.
+ *
+ * The section's ground is a tint of `success` (`soft-success`), 16px of
+ * padding all round. On it, two columns 16px apart: a white form card and, 520px
+ * wide on Desktop, a photo over an info card. The form card (48px of padding
+ * on Desktop, 32 on Tablet, 24 on Mobile) holds a large bold headline, a line
+ * in the foreground colour, a form (name, mail, a message, a terms checkbox,
+ * then Send) and a note for people who are not robots. The
+ * info card is a white card with three 1px lines and, between them, an
+ * ADDRESS row (three lines) and a MAIL row, each led by a soft badge.
+ *
+ * Tablet and Mobile stack the form card over the photo (300px on Tablet,
+ * 220px on Mobile) and the info card. The headline is 60px on Desktop, 48px
+ * on Tablet and 24px on Mobile. The field labels are capitals in English, as
+ * Figma writes them.
+ *
+ * The form is real. It calls `onSubmit(values)` with name, mail, message and
+ * terms. The mail field is required (the attribute, `aria-required` and the
+ * error on submit) and shows no asterisk anywhere: Figma's field has no label to
+ * carry one. The terms checkbox is required, with no asterisk, like the other
+ * checkboxes. No other field is required. The "leave this field blank" note is text only: the block adds no
+ * hidden field.
+ *
+ * Motion: once, when the block is in view, the headline reveals word by word,
+ * each field rises with its label, the info rows slide 16px in from the end
+ * 80ms apart and the three lines draw across. The Send button lifts 2px on
+ * hover. Reduced motion: only fades.
+ *
+ * Content limits: the headline up to 24 characters, the line up to 140, an
+ * address line up to 36.
+ */
+
+export interface ContactUsEditorialAndAddressCardCopy extends ContactUsFormMessages {
+  /** The headline, an `h2`. */
+  heading: string
+  /** The line under the headline. */
+  description: string
+  /** The name field's label. */
+  name: string
+  /** The name field's placeholder. */
+  namePlaceholder: string
+  /** The mail field's label. */
+  mail: string
+  /** The mail field's placeholder. */
+  mailPlaceholder: 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. */
+  submit: string
+  /** The note under the form. */
+  note: string
+  /** The badge that leads the address row. */
+  addressTag: string
+  /** The badge that leads the mail row. */
+  mailTag: string
+  /** The three lines of the address. */
+  addressLines: string[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<ContactUsLocale, ContactUsEditorialAndAddressCardCopy> = {
+  en: {
+    ...contactUsFormMessages.en,
+    heading: "Have a seat!",
+    description: "We would love to hear from you! Whether you are a partner, a founder or a researcher, drop us a line and have a seat at our table!",
+    name: "NAME",
+    namePlaceholder: "Your name",
+    mail: "MAIL",
+    mailPlaceholder: "you@company.com",
+    message: "MESSAGE",
+    messagePlaceholder: "Tell us what you have in mind",
+    terms: "I ACCEPT THE TERMS OF USE",
+    submit: "Send",
+    note: "If you are human, leave this field blank.",
+    addressTag: "ADDRESS",
+    mailTag: "MAIL",
+    addressLines: ["Level 12, Boulevard Plaza", "Sheikh Mohammed Bin Rashid Blvd", "Dubai, UAE"],
+  },
+  ar: {
+    ...contactUsFormMessages.ar,
+    heading: "لك مقعد معنا!",
+    description: "يسعدنا أن نسمع منك! سواء كنت شريكًا أو مؤسسًا أو باحثًا، راسلنا وتفضّل بمقعدك على طاولتنا!",
+    name: "الاسم",
+    namePlaceholder: "اسمك",
+    mail: "البريد",
+    mailPlaceholder: "you@company.com",
+    message: "الرسالة",
+    messagePlaceholder: "أخبرنا بما يدور في ذهنك",
+    terms: "أوافق على شروط الاستخدام",
+    submit: "إرسال",
+    note: "إذا كنت إنسانًا فاترك هذا الحقل فارغًا.",
+    addressTag: "العنوان",
+    mailTag: "البريد",
+    addressLines: ["الطابق 12، بوليفارد بلازا", "شارع الشيخ محمد بن راشد", "دبي، الإمارات"],
+  },
+}
+
+export interface ContactUsEditorialAndAddressCardProps extends ContactUsFormBlockProps, Partial<ContactUsEditorialAndAddressCardCopy> {
+  /** The photo over the info card. A `muted` ground shows without one. */
+  photo?: ContactUsPhoto
+  /** The address in the mail row. */
+  emailAddress?: string
+}
+
+const SEND = "from-soft-success-20 to-soft-success-20 hover:from-soft-success-30 hover:to-soft-success-30 active:from-soft-success-30 active:to-soft-success-30 hover:motion-safe:-translate-y-0.5"
+
+export function ContactUsEditorialAndAddressCard({ locale = "en", ...given }: ContactUsEditorialAndAddressCardProps) {
+  const { copy, rest } = splitCopy(COPY[locale], given)
+  const { onSubmit, disabled, photo, emailAddress: address = "hello@fasla.com", 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" },
+    mail: { name: "mail", kind: "email", label: copy.mail, placeholder: copy.mailPlaceholder, autoComplete: "email", required: true },
+    message: { name: "message", kind: "textarea", label: copy.message, placeholder: copy.messagePlaceholder, groupClassName: CONTACT_US_TEXTAREA_88 },
+    terms: { name: "terms", kind: "checkbox", label: copy.terms, required: true },
+  } satisfies Record<string, ContactUsFieldDef>
+  const form = useContactUsForm({ fields: Object.values(f), messages: copy, onSubmit, disabled })
+
+  const line = <ContactUsRule data-reveal="draw-x" className="-mb-px ltr:origin-left rtl:origin-right" />
+
+  return (
+    <ContactUsSection labelledBy={headingId} gap="none" className={cn("bg-soft-success 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 min-w-0 flex-1 flex-col gap-8 rounded-[14px] bg-background p-6 [@container(min-width:40rem)]:p-8 [@container(min-width:64rem)]:p-12">
+          <div className="flex flex-col gap-4">
+            <h2 id={headingId} className="text-2xl font-bold leading-[2.75rem] rtl:leading-[3.75rem] text-foreground [@container(min-width:40rem)]:text-5xl [@container(min-width:64rem)]:text-6xl">
+              <ContactUsWords>{copy.heading}</ContactUsWords>
+            </h2>
+            <p className="text-xl text-foreground">{copy.description}</p>
+          </div>
+          <ContactUsForm form={form} className="flex flex-col gap-3">
+            <ContactUsField field={f.name} reveal />
+            <ContactUsField field={f.mail} reveal />
+            <ContactUsField field={f.message} reveal />
+            <ContactUsField field={f.terms} className="flex flex-col items-start" />
+            <div className="flex items-center">
+              <ContactUsSubmit variant="soft" tone="secondary" radius="rounded" size="md" className={SEND}>
+                {copy.submit}
+              </ContactUsSubmit>
+            </div>
+          </ContactUsForm>
+          <p className="text-sm text-muted-foreground">{copy.note}</p>
+        </div>
+
+        <div className="flex flex-col gap-4 [@container(min-width:64rem)]:w-[32.5rem] [@container(min-width:64rem)]:shrink-0">
+          <ContactUsPhotoSlot photo={photo} className="h-[13.75rem] rounded-[14px] [@container(min-width:40rem)]:h-[18.75rem] [@container(min-width:64rem)]:h-[25.125rem]" />
+          <div className="flex flex-col gap-4 rounded-[14px] bg-background p-8">
+            {line}
+            <div data-reveal="slide" data-reveal-delay="0" className="flex items-start justify-between gap-4">
+              <Badge variant="soft" tone="secondary" radius="standard" size="lg" className="shrink-0">
+                {copy.addressTag}
+              </Badge>
+              <address className="flex min-w-0 flex-col text-end text-base not-italic text-foreground">
+                {copy.addressLines.map((text) => (
+                  <span key={text}>{text}</span>
+                ))}
+              </address>
+            </div>
+            {line}
+            <div data-reveal="slide" data-reveal-delay="80" className="flex items-start justify-between gap-4">
+              <Badge variant="soft" tone="secondary" radius="standard" size="lg" className="shrink-0">
+                {copy.mailTag}
+              </Badge>
+              <a href={`mailto:${address}`} className="min-w-0 rounded-sm text-end text-base text-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+                <bdi dir="ltr">{address}</bdi>
+              </a>
+            </div>
+            {line}
+          </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 contactUsEditorialAndAddressCardCopy = COPY

package/registry/blocks/contact-us-editorial-and-address-card/index.ts

@@ -0,0 +1,6 @@
+export {
+  ContactUsEditorialAndAddressCard,
+  contactUsEditorialAndAddressCardCopy,
+  type ContactUsEditorialAndAddressCardCopy,
+  type ContactUsEditorialAndAddressCardProps,
+} from "./ContactUsEditorialAndAddressCard"