@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/footer-docs-page/FooterDocsPage.tsx

@@ -0,0 +1,261 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Avatar } from "../../ui/avatar/avatar"
+import { Button } from "../../ui/button/button"
+import { SocialIcon } from "../../ui/social-icons/social-icons"
+import { FOOTER_FORM_COPY, FooterLegalLinks, FooterRule, FooterSection, type FooterLink, type FooterLocale } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Docs Page.
+ *
+ * The foot of a documentation page: a "Was this page helpful?" row (Yes and No
+ * outline buttons) with an "Edit this page in the repo" link at the other end,
+ * a hairline, two pager cards (Previous and Next, each with a chevron, a small
+ * label and the page title), and a meta row (three contributor avatars with a
+ * "Last updated" line, and three links). No logo and no legal bar.
+ *
+ * Desktop (Figma 1440): everything is one row per band, the pager cards 632
+ * wide with 16px between. Tablet (768): the same, the vote row on one line and
+ * two cards side by side. Mobile (360): the vote row stacks (the prompt over
+ * two full-width buttons, then the edit link), the pager cards stack with
+ * Previous above Next, and the meta row stacks. On Mobile the Next card draws
+ * its chevron first, as Figma does.
+ *
+ * Motion: pressing Yes or No makes the pressed button the Button's `default`
+ * variant (its own fill change), disables both, and cross-fades the prompt to
+ * the thank-you line (200ms; the line holds the prompt's room, so nothing
+ * moves). A pager card's border goes `border` to `foreground` (160ms) and its
+ * chevron slides 4px toward the card's outer edge (in Arabic the cards swap
+ * sides and the chevrons are mirrored, so each still slides outward). On touch
+ * the card tints `secondary` for 120ms while pressed and the chevron stays.
+ * The edit link underlines on hover only. Reduced motion swaps the prompt at
+ * once and keeps the border change.
+ */
+
+export interface FooterDocsPagerLink {
+  /** "Previous" or "Next". */
+  kicker: string
+  title: string
+  href?: string
+}
+
+export interface FooterDocsContributor {
+  /** The person's name; the avatar shows its initials. */
+  name: string
+}
+
+export interface FooterDocsPageCopy {
+  prompt: string
+  yes: string
+  no: string
+  /** The line the prompt becomes once a vote is in. */
+  thanks: string
+  editLabel: string
+  pagerLabel: string
+  previous: FooterDocsPagerLink
+  next: FooterDocsPagerLink
+  contributorsLabel: string
+  contributors: FooterDocsContributor[]
+  updated: string
+  links: FooterLink[]
+  linksLabel: string
+}
+
+const COPY: Record<FooterLocale, FooterDocsPageCopy> = {
+  en: {
+    prompt: "Was this page helpful?",
+    yes: "Yes",
+    no: "No",
+    thanks: FOOTER_FORM_COPY.en.docsThanks,
+    editLabel: "Edit this page in the repo",
+    pagerLabel: "Previous and next pages",
+    previous: { kicker: "Previous", title: "Design tokens" },
+    next: { kicker: "Next", title: "Theming and dark mode" },
+    contributorsLabel: "Contributors",
+    contributors: [{ name: "Kai Nolan" }, { name: "Rin Marsh" }, { name: "Lee Hart" }],
+    updated: "Last updated 14 August 2026 by 3 contributors",
+    links: ["Report an issue", "Request a change", "Style guide"].map((label) => ({ label, href: "#" })),
+    linksLabel: "About this page",
+  },
+  ar: {
+    prompt: "هل كانت هذه الصفحة مفيدة؟",
+    yes: "نعم",
+    no: "لا",
+    thanks: FOOTER_FORM_COPY.ar.docsThanks,
+    editLabel: "حرّر هذه الصفحة في المستودع",
+    pagerLabel: "الصفحة السابقة والتالية",
+    previous: { kicker: "السابق", title: "رموز التصميم" },
+    next: { kicker: "التالي", title: "الثيمات والوضع الداكن" },
+    contributorsLabel: "المساهمون",
+    contributors: [{ name: "كمال نبيل" }, { name: "رامي منير" }, { name: "ليلى حسن" }],
+    updated: "آخر تحديث 14 أغسطس 2026 بواسطة 3 مساهمين",
+    links: ["الإبلاغ عن مشكلة", "اطلب تعديلًا", "دليل الأسلوب"].map((label) => ({ label, href: "#" })),
+    linksLabel: "حول هذه الصفحة",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerDocsPageCopy = COPY
+
+export type FooterDocsVote = "yes" | "no"
+
+export interface FooterDocsPageProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterDocsPageCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** Where the edit link goes. */
+  editHref?: string
+  /** Starts the block with a vote already in, for a story or a test. */
+  defaultVote?: FooterDocsVote
+  /** Called once, with the vote. */
+  onVote?: (vote: FooterDocsVote) => void
+}
+
+/** Latin runs (dates, numbers) keep their own order inside Arabic text. */
+function Bidi({ text, active }: { text: string; active: boolean }) {
+  if (!active) return <>{text}</>
+  return (
+    <>
+      {text.split(/([A-Za-z0-9+][A-Za-z0-9:.–@+/ ]*[A-Za-z0-9]|[A-Za-z0-9])/).map((part, i) =>
+        i % 2 ? (
+          <bdi key={i} dir="ltr">
+            {part}
+          </bdi>
+        ) : (
+          part
+        )
+      )}
+    </>
+  )
+}
+
+const CARD =
+  "group/card flex min-w-0 flex-1 items-center gap-2 rounded-lg border border-border bg-card p-3 [@container(min-width:40rem)]:gap-3 [@container(min-width:40rem)]:p-4 [@container(min-width:64rem)]:p-5 " +
+  "transition-[border-color,background-color] duration-[160ms] motion-reduce:transition-none [outline:none] focus-visible:border-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring " +
+  "hover:[@container(min-width:40rem)]:border-foreground [@media(hover:none)]:duration-[120ms] active:[@media(hover:none)]:bg-secondary"
+
+export function FooterDocsPage({
+  locale = "en",
+  prompt,
+  yes,
+  no,
+  thanks,
+  editLabel,
+  pagerLabel,
+  previous,
+  next,
+  contributorsLabel,
+  contributors,
+  updated,
+  links,
+  linksLabel,
+  editHref,
+  defaultVote,
+  onVote,
+  className,
+  ...props
+}: FooterDocsPageProps) {
+  const copy = COPY[locale]
+  const ar = locale === "ar"
+  const [vote, setVote] = React.useState<FooterDocsVote | undefined>(defaultVote)
+  const voted = vote !== undefined
+  const prev = previous ?? copy.previous
+  const nxt = next ?? copy.next
+  const people = contributors ?? copy.contributors
+  const docLinks = links ?? copy.links
+  const choose = (value: FooterDocsVote) => {
+    if (voted) return
+    setVote(value)
+    onVote?.(value)
+  }
+  const updatedText = updated ?? copy.updated
+  return (
+    <FooterSection
+      className={cn("py-8 md:py-16 lg:pb-10 lg:pt-12", className)}
+      contentClassName="gap-4 [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:gap-8"
+      {...props}
+    >
+      <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">
+        <div className="grid">
+          <div
+            aria-hidden={voted ? true : undefined}
+            className={cn(
+              "col-start-1 row-start-1 flex flex-col gap-2 transition-opacity duration-200 ease-out motion-reduce:transition-none [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-3 [@container(min-width:64rem)]:gap-4",
+              voted && "opacity-0"
+            )}
+          >
+            <p className="text-sm font-medium text-foreground">{prompt ?? copy.prompt}</p>
+            <div role="group" aria-label={prompt ?? copy.prompt} className="flex flex-col gap-2 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-3 [@container(min-width:64rem)]:gap-4">
+              <Button type="button" size="sm" variant={vote === "yes" ? "default" : "outline"} disabled={voted} aria-pressed={vote === "yes"} onClick={() => choose("yes")} className="w-full [@container(min-width:40rem)]:w-auto">
+                {yes ?? copy.yes}
+              </Button>
+              <Button type="button" size="sm" variant={vote === "no" ? "default" : "outline"} disabled={voted} aria-pressed={vote === "no"} onClick={() => choose("no")} className="w-full [@container(min-width:40rem)]:w-auto">
+                {no ?? copy.no}
+              </Button>
+            </div>
+          </div>
+          <p
+            role="status"
+            className={cn(
+              "pointer-events-none col-start-1 row-start-1 flex items-center text-sm font-medium text-foreground transition-opacity duration-200 ease-out motion-reduce:transition-none",
+              voted ? "opacity-100" : "opacity-0"
+            )}
+          >
+            {voted ? (thanks ?? copy.thanks) : null}
+          </p>
+        </div>
+        <a
+          href={editHref ?? "#"}
+          className="relative inline-flex items-center gap-2 rounded-sm text-sm text-muted-foreground transition-colors duration-[120ms] motion-reduce:transition-none [outline:none] hover:text-foreground hover:underline focus-visible:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-x-1 after:-inset-y-2.5 after:content-['']"
+        >
+          <SocialIcon platform="github" color="negative" className="size-4 shrink-0" />
+          {editLabel ?? copy.editLabel}
+        </a>
+      </div>
+      <FooterRule />
+      <nav aria-label={pagerLabel ?? copy.pagerLabel} className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:64rem)]:gap-4">
+        <a href={prev.href ?? "#"} rel="prev" className={CARD}>
+          <ChevronLeftIcon
+            aria-hidden="true"
+            className="size-[18px] shrink-0 text-foreground transition-transform duration-[160ms] motion-reduce:transition-none rtl:-scale-x-100 group-hover/card:motion-safe:[@container(min-width:40rem)]:-translate-x-1 group-hover/card:motion-safe:rtl:[@container(min-width:40rem)]:translate-x-1"
+          />
+          <span className="flex min-w-0 flex-1 flex-col gap-1">
+            <span className="text-xs text-muted-foreground">{prev.kicker}</span>
+            <span className="text-base font-medium text-card-foreground">{prev.title}</span>
+          </span>
+        </a>
+        <a href={nxt.href ?? "#"} rel="next" className={CARD}>
+          <span className="flex min-w-0 flex-1 flex-col gap-1 text-start [@container(min-width:40rem)]:text-end">
+            <span className="text-xs text-muted-foreground">{nxt.kicker}</span>
+            <span className="text-base font-medium text-card-foreground">{nxt.title}</span>
+          </span>
+          <ChevronRightIcon
+            aria-hidden="true"
+            className="order-first size-[18px] shrink-0 text-foreground transition-transform duration-[160ms] motion-reduce:transition-none rtl:-scale-x-100 group-hover/card:motion-safe:[@container(min-width:40rem)]:translate-x-1 group-hover/card:motion-safe:rtl:[@container(min-width:40rem)]:-translate-x-1 [@container(min-width:40rem)]:order-last"
+          />
+        </a>
+      </nav>
+      <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 [@container(min-width:40rem)]:gap-6">
+        <div className="flex flex-wrap items-center gap-2">
+          {people.length > 0 ? (
+            <ul aria-label={contributorsLabel ?? copy.contributorsLabel} className="flex items-center gap-2">
+              {people.map((person) => (
+                <li key={person.name} className="flex">
+                  <Avatar variant="initials" size="32" radius="rounded" border name={person.name} />
+                </li>
+              ))}
+            </ul>
+          ) : null}
+          {updatedText ? (
+            <p className="text-xs text-muted-foreground">
+              <Bidi text={updatedText} active={ar} />
+            </p>
+          ) : null}
+        </div>
+        {docLinks.length ? <FooterLegalLinks links={docLinks} label={linksLabel ?? copy.linksLabel} /> : null}
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-docs-page/index.ts

@@ -0,0 +1,9 @@
+export {
+  FooterDocsPage,
+  footerDocsPageCopy,
+  type FooterDocsContributor,
+  type FooterDocsPageCopy,
+  type FooterDocsPageProps,
+  type FooterDocsPagerLink,
+  type FooterDocsVote,
+} from "./FooterDocsPage"

package/registry/blocks/footer-ecommerce-mega/FooterEcommerceMega.tsx

@@ -0,0 +1,289 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Select, type SelectOption } from "../../ui/select/select"
+import type { SocialPlatform } from "../../ui/social-icons/social-icons"
+import {
+  FOOTER_FORM_COPY,
+  FooterCopyright,
+  FooterLegalLinks,
+  FooterLinkColumn,
+  FooterLogo,
+  FooterNewsletterForm,
+  FooterRule,
+  FooterSection,
+  FooterSocial,
+  type FooterColumn,
+  type FooterLink,
+  type FooterLocale,
+} from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Ecommerce Mega.
+ *
+ * A full-width band on `secondary` (a welcome-offer title and line, and the
+ * shared newsletter form at size md), then the body on the page background:
+ * the brand block (logo, one line, five social marks) beside four link columns,
+ * a hairline, a utility row (a region Select and a currency Select, six
+ * payment names as small text pills) and the legal bar.
+ *
+ * Desktop (Figma 1440): the band is one row, copy at the start and the 410px
+ * form at the end; the brand is 280 wide with the four columns filling the
+ * rest, 40px apart; the selects and the pills share one row. Tablet (768): the
+ * band copy stacks above the form; the brand has its own row, then the columns
+ * three across (3 + 1); the selects share a row and the pills wrap under them.
+ * Mobile (360): the form stacks (field over button), the columns go two across
+ * and the selects stack.
+ *
+ * Motion: Sign up shows the button's own spinner and disables the field
+ * (150ms), then the form cross-fades to the confirmation (200ms ease-out)
+ * without changing the band's height (the shared form holds it). The field's
+ * focus ring is the Input atom's. The Selects keep their own menus. The payment
+ * pills do not animate. Reduced motion swaps at once.
+ *
+ * The payment names are text pills drawn here, since the library has no payment
+ * marks: VISA, Mastercard, Amex, PayPal, Apple Pay and Klarna stay as words.
+ */
+
+export interface FooterEcommerceMegaCopy {
+  /** The band title. */
+  bandTitle: string
+  /** The line under the band title. */
+  bandSub: string
+  /** The one line under the logo. */
+  blurb: string
+  /** The four link columns. */
+  columns: FooterColumn[]
+  /** Accessible name of the region Select. */
+  regionLabel: string
+  /** Accessible name of the currency Select. */
+  currencyLabel: string
+  regions: SelectOption[]
+  currencies: SelectOption[]
+  /** Accessible name of the payment list. */
+  paymentLabel: string
+  payments: string[]
+  copyright: string
+  legal: FooterLink[]
+  legalLabel: string
+  form: {
+    placeholder: string
+    emailLabel: string
+    submit: string
+    sent: string
+    error: string
+    invalid: string
+  }
+}
+
+const COPY: Record<FooterLocale, FooterEcommerceMegaCopy> = {
+  en: {
+    bandTitle: "A welcome offer on your first order",
+    bandSub: "Join our members for early access to drops and restocks.",
+    blurb: "Design tools and studio goods, shipped worldwide.",
+    columns: [
+      { title: "Shop", links: ["New arrivals", "Best sellers", "Desk & tools", "Print & paper", "Gift cards"].map((label) => ({ label, href: "#" })) },
+      { title: "Collections", links: ["Studio essentials", "Type specimens", "Limited editions", "Collaborations", "Sale"].map((label) => ({ label, href: "#" })) },
+      { title: "Help", links: ["Shipping & delivery", "Returns & exchanges", "Size guide", "Order tracking", "Contact us"].map((label) => ({ label, href: "#" })) },
+      { title: "About", links: ["Our story", "Sustainability", "Stockists", "Press", "Careers"].map((label) => ({ label, href: "#" })) },
+    ],
+    regionLabel: "Region",
+    currencyLabel: "Currency",
+    regions: [
+      { value: "europe", label: "Europe" },
+      { value: "north-america", label: "North America" },
+      { value: "mena", label: "Middle East & North Africa" },
+      { value: "asia-pacific", label: "Asia Pacific" },
+    ],
+    currencies: [
+      { value: "eur", label: "EUR — Euro" },
+      { value: "usd", label: "USD — US dollar" },
+      { value: "gbp", label: "GBP — Pound sterling" },
+      { value: "aed", label: "AED — Dirham" },
+    ],
+    paymentLabel: "Accepted payment methods",
+    payments: ["VISA", "Mastercard", "Amex", "PayPal", "Apple Pay", "Klarna"],
+    copyright: "© 2026 Fasla. All rights reserved.",
+    legal: ["Privacy", "Terms", "Cookies", "Accessibility"].map((label) => ({ label, href: "#" })),
+    legalLabel: "Legal links",
+    form: {
+      placeholder: "you@company.com",
+      emailLabel: "Email address",
+      submit: "Sign up",
+      sent: FOOTER_FORM_COPY.en.ecommerceSent,
+      error: FOOTER_FORM_COPY.en.ecommerceError,
+      invalid: FOOTER_FORM_COPY.en.invalid,
+    },
+  },
+  ar: {
+    bandTitle: "عرض ترحيبي على طلبك الأول",
+    bandSub: "انضم إلى أعضائنا للوصول المبكر إلى الإصدارات وإعادة التوفر.",
+    blurb: "أدوات تصميم ومنتجات استوديو، تُشحن إلى جميع أنحاء العالم.",
+    columns: [
+      { title: "المتجر", links: ["وصل حديثًا", "الأكثر مبيعًا", "المكتب والأدوات", "مطبوعات وورق", "بطاقات هدايا"].map((label) => ({ label, href: "#" })) },
+      { title: "التشكيلات", links: ["أساسيات الاستوديو", "نماذج الخطوط", "إصدارات محدودة", "تعاونات", "التخفيضات"].map((label) => ({ label, href: "#" })) },
+      { title: "المساعدة", links: ["الشحن والتوصيل", "الإرجاع والاستبدال", "دليل المقاسات", "تتبع الطلب", "اتصل بنا"].map((label) => ({ label, href: "#" })) },
+      { title: "من نحن", links: ["قصتنا", "الاستدامة", "نقاط البيع", "الصحافة", "الوظائف"].map((label) => ({ label, href: "#" })) },
+    ],
+    regionLabel: "المنطقة",
+    currencyLabel: "العملة",
+    regions: [
+      { value: "europe", label: "أوروبا" },
+      { value: "north-america", label: "أمريكا الشمالية" },
+      { value: "mena", label: "الشرق الأوسط وشمال أفريقيا" },
+      { value: "asia-pacific", label: "آسيا والمحيط الهادئ" },
+    ],
+    currencies: [
+      { value: "eur", label: "EUR، يورو" },
+      { value: "usd", label: "USD، دولار أمريكي" },
+      { value: "gbp", label: "GBP، جنيه إسترليني" },
+      { value: "aed", label: "AED، درهم" },
+    ],
+    paymentLabel: "طرق الدفع المقبولة",
+    payments: ["VISA", "Mastercard", "Amex", "PayPal", "Apple Pay", "Klarna"],
+    copyright: "© 2026 فاصلة. جميع الحقوق محفوظة.",
+    legal: ["الخصوصية", "الشروط", "ملفات تعريف الارتباط", "إمكانية الوصول"].map((label) => ({ label, href: "#" })),
+    legalLabel: "روابط قانونية",
+    form: {
+      placeholder: "you@company.com",
+      emailLabel: "البريد الإلكتروني",
+      submit: "سجّل",
+      sent: FOOTER_FORM_COPY.ar.ecommerceSent,
+      error: FOOTER_FORM_COPY.ar.ecommerceError,
+      invalid: FOOTER_FORM_COPY.ar.invalid,
+    },
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerEcommerceMegaCopy = COPY
+
+export interface FooterEcommerceMegaProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<Omit<FooterEcommerceMegaCopy, "form">> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** Overrides for the band form's words. */
+  form?: Partial<FooterEcommerceMegaCopy["form"]>
+  /** The social marks, in order. */
+  socials?: SocialPlatform[]
+  /** Called with the address when Sign up is pressed. Return a promise to show the spinner until it settles. */
+  onSubscribe?: (email: string) => void | Promise<void>
+}
+
+const DEFAULT_SOCIALS: SocialPlatform[] = ["instagram", "tiktok", "pinterest", "x", "youtube"]
+
+const COLUMN_GAP = "[@container(min-width:40rem)]:gap-3 [@container(min-width:64rem)]:gap-4"
+
+export function FooterEcommerceMega({
+  locale = "en",
+  bandTitle,
+  bandSub,
+  blurb,
+  columns,
+  regionLabel,
+  currencyLabel,
+  regions,
+  currencies,
+  paymentLabel,
+  payments,
+  copyright,
+  legal,
+  legalLabel,
+  form,
+  socials = DEFAULT_SOCIALS,
+  onSubscribe,
+  className,
+  ...props
+}: FooterEcommerceMegaProps) {
+  const copy = COPY[locale]
+  const formCopy = { ...copy.form, ...form }
+  const cols = columns ?? copy.columns
+  const regionItems = regions ?? copy.regions
+  const currencyItems = currencies ?? copy.currencies
+  const pills = payments ?? copy.payments
+  const links = legal ?? copy.legal
+  const title = bandTitle ?? copy.bandTitle
+  const sub = bandSub ?? copy.bandSub
+  const text = blurb ?? copy.blurb
+  const hasUtility = regionItems.length > 0 || currencyItems.length > 0 || pills.length > 0
+  return (
+    <FooterSection className={cn("px-0 md:px-0 lg:px-0", className)} contentClassName="max-w-none" {...props}>
+      <div className="bg-secondary px-4 py-4 md:px-6 md:py-6 lg:px-20 lg:py-8">
+        <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-5 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between [@container(min-width:64rem)]:gap-10">
+          <div className="flex min-w-0 flex-col gap-1 [@container(min-width:64rem)]:max-w-[680px]">
+            <h2 className="text-xl font-semibold text-secondary-foreground">{title}</h2>
+            {sub ? <p className="text-sm text-muted-foreground">{sub}</p> : null}
+          </div>
+          <FooterNewsletterForm
+            placeholder={formCopy.placeholder}
+            emailLabel={formCopy.emailLabel}
+            submitLabel={formCopy.submit}
+            sentMessage={formCopy.sent}
+            errorMessage={formCopy.error}
+            invalidMessage={formCopy.invalid}
+            size="md"
+            onSubscribe={onSubscribe}
+            className="w-full [@container(min-width:64rem)]:w-[410px] [@container(min-width:64rem)]:shrink-0 [@container(min-width:40rem)_and_(max-width:63.99rem)]:[&_form_button]:grow [@container(min-width:40rem)_and_(max-width:63.99rem)]:[&_form_button]:basis-0"
+          />
+        </div>
+      </div>
+      <div className="px-4 pb-4 pt-8 md:px-6 md:pb-16 md:pt-16 lg:px-20 lg:pb-8">
+        <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10">
+          <div className="grid grid-cols-2 gap-x-4 gap-y-6 [@container(min-width:40rem)]:grid-cols-3 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:grid-cols-[280px_repeat(4,minmax(0,1fr))] [@container(min-width:64rem)]:gap-x-10">
+            <div className="col-span-2 flex flex-col items-start gap-3 [@container(min-width:40rem)]:col-span-3 [@container(min-width:40rem)]:gap-4 [@container(min-width:64rem)]:col-span-1 [@container(min-width:64rem)]:gap-5">
+              <FooterLogo />
+              {text ? <p className="text-sm text-muted-foreground">{text}</p> : null}
+              {socials.length ? <FooterSocial platforms={socials} /> : null}
+            </div>
+            {cols.map((column) => (
+              <FooterLinkColumn key={column.title} title={column.title} links={column.links} className={COLUMN_GAP} />
+            ))}
+          </div>
+          <FooterRule />
+          {hasUtility ? (
+            <div className="flex flex-col gap-4 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between [@container(min-width:64rem)]:gap-6">
+              {regionItems.length > 0 || currencyItems.length > 0 ? (
+                <div className="flex flex-col gap-2 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:gap-3">
+                  {regionItems.length > 0 ? (
+                    <Select
+                      size="sm"
+                      aria-label={regionLabel ?? copy.regionLabel}
+                      items={regionItems}
+                      defaultValue={regionItems[0]?.value}
+                      className="w-full [@container(min-width:40rem)]:flex-1 [@container(min-width:64rem)]:w-[190px] [@container(min-width:64rem)]:flex-none"
+                    />
+                  ) : null}
+                  {currencyItems.length > 0 ? (
+                    <Select
+                      size="sm"
+                      aria-label={currencyLabel ?? copy.currencyLabel}
+                      items={currencyItems}
+                      defaultValue={currencyItems[0]?.value}
+                      className="w-full [@container(min-width:40rem)]:flex-1 [@container(min-width:64rem)]:w-[150px] [@container(min-width:64rem)]:flex-none"
+                    />
+                  ) : null}
+                </div>
+              ) : null}
+              {pills.length > 0 ? (
+                <ul aria-label={paymentLabel ?? copy.paymentLabel} className="flex flex-wrap items-center gap-2">
+                  {pills.map((name) => (
+                    <li
+                      key={name}
+                      className="inline-flex h-8 items-center justify-center rounded-sm border border-border bg-card px-2 text-xs font-semibold text-muted-foreground [@container(min-width:40rem)]:px-3"
+                    >
+                      {name}
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          ) : null}
+          <div className="flex flex-col gap-3 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-start [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-6">
+            <FooterCopyright>{copyright ?? copy.copyright}</FooterCopyright>
+            {links.length ? <FooterLegalLinks links={links} label={legalLabel ?? copy.legalLabel} /> : null}
+          </div>
+        </div>
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-ecommerce-mega/index.ts

@@ -0,0 +1,6 @@
+export {
+  FooterEcommerceMega,
+  footerEcommerceMegaCopy,
+  type FooterEcommerceMegaCopy,
+  type FooterEcommerceMegaProps,
+} from "./FooterEcommerceMega"