@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/blocks/footer-support-contact/FooterSupportContact.tsx

@@ -0,0 +1,204 @@
+"use client"
+
+import * as React from "react"
+import { ArrowRightIcon, MailIcon, MessageCircleIcon, PhoneIcon, SearchIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { Input } from "../../ui/input/input"
+import { FooterLegalBar, FooterRule, FooterSection, useFooterReveal, type FooterLink, type FooterLocale } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Support & Contact. Motion chip: 41974:3871.
+ *
+ * A help footer: a centred title, a search field (Default Input, lg, rounded,
+ * with a search icon) and six topic links; three channel cards (live chat, email,
+ * the enterprise line) each with an icon, a title, a line, its availability and
+ * a link with an arrow; a hairline; a short legal bar.
+ *
+ * Motion (the chip): the topic links come in on first view, 40ms apart. A channel
+ * card lifts on hover: its shadow goes xs to md and it rises 2px, 160ms, and the
+ * arrow slides 4px towards the end of the line (mirrored in Arabic: it points
+ * left and slides left). On touch, hover becomes :active elevation and the arrow
+ * does not slide. Reduced motion keeps the shadow change only and plays no entrance.
+ * The search field's focus ring is the Input atom's own.
+ *
+ * Desktop (1440) sets the title at 2XL, the field 680px wide, the cards three
+ * across. Tablet (768) makes the field fill the width and the cards 2-up. Mobile
+ * (360) sets the title at XL and stacks the cards. In Arabic everything mirrors
+ * by the page's `dir`.
+ */
+
+export interface FooterChannel {
+  /** Which icon the card shows. */
+  icon: "chat" | "email" | "phone"
+  title: string
+  description: string
+  /** When it is answered: hours, or a promise. */
+  availability: string
+  /** The link's label. */
+  action: string
+  href: string
+}
+
+export interface FooterSupportContactCopy {
+  /** The title above the search field. */
+  title: string
+  /** The field's placeholder (it also names the field). */
+  placeholder: string
+  /** The help topics under the field. Hidden when empty. */
+  topics: FooterLink[]
+  /** The accessible name of the topics. */
+  topicsLabel: string
+  /** The channel cards. */
+  channels: FooterChannel[]
+  /** The accessible name of the channels. */
+  channelsLabel: string
+  /** The copyright line. */
+  copyright: string
+  /** The legal links. */
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterSupportContactCopy> = {
+  en: {
+    title: "How can we help?",
+    placeholder: "Search the help centre — tokens, RTL, billing…",
+    topics: ["Getting started", "Design tokens", "RTL & Arabic", "Billing", "API keys", "Migration"].map((label) => ({ label, href: "#" })),
+    topicsLabel: "Help topics",
+    channels: [
+      { icon: "chat", title: "Live chat", description: "Quick first replies from our team.", availability: "Mon–Fri, 09:00–18:00 CET", action: "Start a chat", href: "#" },
+      { icon: "email", title: "Email support", description: "Attach a file or a design link and we'll take a look.", availability: "Replies within one business day", action: "you@company.com", href: "mailto:you@company.com" },
+      { icon: "phone", title: "Enterprise line", description: "Dedicated engineer for Scale and Enterprise plans.", availability: "24/7 for Sev-1 incidents", action: "company.com/contact", href: "#" },
+    ],
+    channelsLabel: "Contact channels",
+    copyright: "© 2026 Fasla. All rights reserved.",
+    legal: ["Privacy", "Terms", "Cookies", "Status"].map((label) => ({ label, href: "#" })),
+    legalLabel: "Legal links",
+  },
+  ar: {
+    title: "كيف نساعدك؟",
+    placeholder: "ابحث في مركز المساعدة: الرموز، RTL، الفوترة…",
+    topics: ["البداية", "رموز التصميم", "RTL والعربية", "الفوترة", "مفاتيح API", "الترحيل"].map((label) => ({ label, href: "#" })),
+    topicsLabel: "مواضيع المساعدة",
+    channels: [
+      { icon: "chat", title: "دردشة مباشرة", description: "ردود أولى سريعة من فريقنا.", availability: "الاثنين إلى الجمعة، 09:00 إلى 18:00 CET", action: "ابدأ دردشة", href: "#" },
+      { icon: "email", title: "الدعم عبر البريد", description: "أرفق ملفًا أو رابط تصميم وسنلقي نظرة.", availability: "الرد خلال يوم عمل واحد", action: "you@company.com", href: "mailto:you@company.com" },
+      { icon: "phone", title: "خط المؤسسات", description: "مهندس مخصص لعملاء المؤسسات والخطط الكبرى.", availability: "24/7 لحوادث Sev-1", action: "company.com/contact", href: "#" },
+    ],
+    channelsLabel: "قنوات التواصل",
+    copyright: "© 2026 فاصلة. جميع الحقوق محفوظة.",
+    legal: ["الخصوصية", "الشروط", "ملفات تعريف الارتباط", "الحالة"].map((label) => ({ label, href: "#" })),
+    legalLabel: "روابط قانونية",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerSupportContactCopy = COPY
+
+export interface FooterSupportContactProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title">, Partial<FooterSupportContactCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+}
+
+const ICONS = { chat: MessageCircleIcon, email: MailIcon, phone: PhoneIcon }
+
+/** Latin and digit runs inside Arabic text keep their own direction. */
+const LATIN = /([A-Za-z0-9][A-Za-z0-9@.:/+_–-]*(?:\s[A-Za-z0-9][A-Za-z0-9@.:/+_–-]*)*)/g
+function bidi(text: string, on: boolean): React.ReactNode {
+  if (!on) return text
+  return text.split(LATIN).map((part, index) =>
+    index % 2 ? (
+      <bdi key={index} dir="ltr">
+        {part}
+      </bdi>
+    ) : (
+      part
+    )
+  )
+}
+
+export function FooterSupportContact({ locale = "en", title, placeholder, topics, topicsLabel, channels, channelsLabel, copyright, legal, legalLabel, className, ...props }: FooterSupportContactProps) {
+  const copy = COPY[locale]
+  const ar = locale === "ar"
+  const ref = React.useRef<HTMLElement>(null)
+  // The topic links come in 40ms apart on first view; reduced motion plays nothing.
+  useFooterReveal(ref, { selector: "[data-reveal]", stagger: 40, duration: 240, rise: 8, threshold: 0.15 })
+  const heading = title ?? copy.title
+  const field = placeholder ?? copy.placeholder
+  const topicList = topics ?? copy.topics
+  const cards = channels ?? copy.channels
+  return (
+    <FooterSection
+      ref={ref}
+      className={cn("border-t border-border py-8 md:py-16 lg:pb-8 lg:pt-16", className)}
+      contentClassName="gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10"
+      {...props}
+    >
+      <div className="flex flex-col items-center gap-3 [@container(min-width:64rem)]:gap-4">
+        {heading ? <h2 className="text-center text-xl font-semibold text-foreground [@container(min-width:40rem)]:text-2xl">{heading}</h2> : null}
+        <Input
+          type="search"
+          size="lg"
+          radius="rounded"
+          startIcon={<SearchIcon aria-hidden="true" />}
+          aria-label={field}
+          placeholder={field}
+          className="w-full [@container(min-width:64rem)]:max-w-[680px]"
+        />
+        {topicList.length ? (
+          <nav aria-label={topicsLabel ?? copy.topicsLabel}>
+            <ul className="flex flex-wrap items-center justify-center gap-x-3 gap-y-2 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:64rem)]:gap-x-5">
+              {topicList.map((topic) => (
+                <li key={`${topic.label}-${topic.href}`} data-reveal="" className="flex">
+                  <a
+                    href={topic.href}
+                    className="relative inline-flex items-center rounded-sm text-sm text-muted-foreground transition-colors duration-[120ms] motion-reduce:transition-none [outline:none] hover:text-foreground focus-visible:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:text-foreground after:absolute after:-inset-x-1 after:-inset-y-2.5 after:content-['']"
+                  >
+                    {bidi(topic.label, ar)}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+      {cards.length ? (
+        <ul aria-label={channelsLabel ?? copy.channelsLabel} className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-3">
+          {cards.map((card) => {
+            const Icon = ICONS[card.icon]
+            return (
+              <li key={`${card.title}-${card.href}`} className="flex">
+                <div className="group/card relative flex w-full flex-col justify-between gap-3 rounded-xl border border-border bg-card p-4 text-card-foreground shadow-sm transition-[box-shadow,transform] duration-[160ms] ease-out motion-reduce:transition-none motion-reduce:transform-none [@container(min-width:40rem)]:p-5 [@container(min-width:64rem)]:p-6 hover:[@container(min-width:40rem)]:shadow-md hover:motion-safe:[@container(min-width:40rem)]:-translate-y-0.5 active:shadow-md active:motion-safe:-translate-y-0.5">
+                  <div className="flex flex-col gap-2 [@container(min-width:40rem)]:gap-3">
+                    <span aria-hidden="true" className="flex size-9 items-center justify-center rounded-[var(--radius-md)] bg-secondary text-secondary-foreground">
+                      <Icon className="size-[18px]" />
+                    </span>
+                    <h3 className="text-base font-semibold text-card-foreground">{card.title}</h3>
+                    <p className="text-sm text-muted-foreground">{bidi(card.description, ar)}</p>
+                    <p className="text-xs text-muted-foreground">{bidi(card.availability, ar)}</p>
+                  </div>
+                  <a
+                    href={card.href}
+                    className="inline-flex w-fit items-center gap-2 rounded-sm text-sm font-medium text-card-foreground [outline:none] focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-ring after:absolute after:inset-0 after:rounded-xl after:content-['']"
+                  >
+                    <span>{bidi(card.action, ar)}</span>
+                    <span
+                      aria-hidden="true"
+                      className="inline-flex shrink-0 transition-transform duration-[160ms] ease-out motion-reduce:transition-none 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"
+                    >
+                      <ArrowRightIcon className="size-3.5 rtl:-scale-x-100" />
+                    </span>
+                  </a>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+      <FooterRule />
+      <FooterLegalBar copyright={copyright ?? copy.copyright} links={legal ?? copy.legal} label={legalLabel ?? copy.legalLabel} />
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-support-contact/index.ts

@@ -0,0 +1,7 @@
+export {
+  FooterSupportContact,
+  footerSupportContactCopy,
+  type FooterChannel,
+  type FooterSupportContactCopy,
+  type FooterSupportContactProps,
+} from "./FooterSupportContact"

package/registry/blocks/footer-trust-compliance/FooterTrustCompliance.tsx

@@ -0,0 +1,234 @@
+import * as React from "react"
+import { ArrowRightIcon, BadgeCheckIcon, CreditCardIcon, LockIcon, ShieldIcon, UsersIcon } from "lucide-react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+import { FooterCopyright, FooterLinkItem, FooterLogo, FooterRule, FooterSection, type FooterLink, type FooterLocale } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Trust & Compliance. Motion chip: 47356:8539.
+ *
+ * A trust footer: a title and a sentence with an Outline sm Button beside them,
+ * four certification cards (a shield, a lock, a badge-check and a users icon,
+ * each with a title, a line and a link with an arrow), a payments note with five
+ * payment names as text pills, a hairline, and the legal bar (logo, copyright,
+ * six legal links).
+ *
+ * Motion (the chip): a card lifts on hover: its border goes `border` to
+ * `foreground` and it rises 2px, 160ms, while the link's arrow slides 4px towards
+ * the end of the line (mirrored in Arabic: it points left and slides left). On
+ * touch, hover is replaced by active:: the card tints `secondary` for 120ms and
+ * the arrow does not slide. Reduced motion keeps the border change only. The
+ * Button and the links keep their own states.
+ *
+ * Desktop (1440) sets the cards four across, the head in one row. Tablet (768)
+ * sets the cards 2-up and the head in a column. Mobile (360) stacks the cards and
+ * tightens the cards' padding to 12px. In Arabic everything mirrors by the
+ * page's `dir`.
+ */
+
+export interface FooterCertification {
+  /** Which icon the card shows. */
+  icon: "shield" | "lock" | "badge-check" | "users"
+  title: string
+  line: string
+  /** The link's label. */
+  link: string
+  href: string
+}
+
+export interface FooterTrustComplianceCopy {
+  title: string
+  /** The sentence under the title. Hidden when empty. */
+  sub: string
+  /** The Outline button's label. Hidden when empty. */
+  trustLabel: string
+  /** Where the button goes. */
+  trustHref: string
+  /** The certification cards. */
+  certifications: FooterCertification[]
+  /** The accessible name of the cards. */
+  certificationsLabel: string
+  /** The payments note. Hidden with the marks when both are empty. */
+  paymentNote: string
+  /** The payment names, drawn as text pills. */
+  payments: string[]
+  /** The accessible name of the payment names. */
+  paymentsLabel: string
+  /** The copyright line. */
+  copyright: string
+  /** The legal links. Hidden when empty. */
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterTrustComplianceCopy> = {
+  en: {
+    title: "Built to pass your security review.",
+    sub: "Audit reports, subprocessor lists and our accessibility conformance statement are available without an NDA.",
+    trustLabel: "Visit the trust centre",
+    trustHref: "#",
+    certifications: [
+      { icon: "shield", title: "Security certification", line: "Audited annually by an independent CPA firm.", link: "Request the report", href: "#" },
+      { icon: "lock", title: "Management certification", line: "Information security management, certified.", link: "View certificate", href: "#" },
+      { icon: "badge-check", title: "Privacy compliance", line: "Standard contractual clauses and EU data residency.", link: "Read the data terms", href: "#" },
+      { icon: "users", title: "Accessibility statement", line: "Every component tested with screen readers and keyboard only.", link: "See the accessibility report", href: "#" },
+    ],
+    certificationsLabel: "Certifications",
+    paymentNote: "Payments processed by a certified provider — card details never touch our servers.",
+    payments: ["VISA", "Mastercard", "Amex", "PayPal", "Apple Pay"],
+    paymentsLabel: "Accepted payments",
+    copyright: "© 2026 Fasla. All rights reserved.",
+    legal: ["Privacy", "Terms", "Data terms", "Subprocessors", "Security", "Responsible disclosure"].map((label) => ({ label, href: "#" })),
+    legalLabel: "Legal links",
+  },
+  ar: {
+    title: "مبني ليجتاز مراجعتك الأمنية.",
+    sub: "تقارير التدقيق وقوائم المعالجين الفرعيين وبيان مطابقة إمكانية الوصول متاحة دون اتفاقية سرية.",
+    trustLabel: "زيارة مركز الثقة",
+    trustHref: "#",
+    certifications: [
+      { icon: "shield", title: "شهادة الأمان", line: "يُدقَّق سنويًا من قبل شركة محاسبة مستقلة.", link: "اطلب التقرير", href: "#" },
+      { icon: "lock", title: "شهادة الإدارة", line: "إدارة أمن المعلومات، معتمدة.", link: "عرض الشهادة", href: "#" },
+      { icon: "badge-check", title: "الامتثال للخصوصية", line: "بنود تعاقدية قياسية وإقامة البيانات في الاتحاد الأوروبي.", link: "اقرأ شروط البيانات", href: "#" },
+      { icon: "users", title: "بيان إمكانية الوصول", line: "كل مكوّن مُختبَر بقارئات الشاشة وبلوحة المفاتيح فقط.", link: "اطّلع على تقرير إمكانية الوصول", href: "#" },
+    ],
+    certificationsLabel: "الشهادات",
+    paymentNote: "تُعالج المدفوعات عبر مزوّد معتمد، وبيانات البطاقات لا تمر بخوادمنا أبدًا.",
+    payments: ["VISA", "Mastercard", "Amex", "PayPal", "Apple Pay"],
+    paymentsLabel: "وسائل الدفع المقبولة",
+    copyright: "© 2026 فاصلة. جميع الحقوق محفوظة.",
+    legal: ["الخصوصية", "الشروط", "شروط البيانات", "المعالجون الفرعيون", "الأمان", "الإفصاح المسؤول"].map((label) => ({ label, href: "#" })),
+    legalLabel: "روابط قانونية",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerTrustComplianceCopy = COPY
+
+export interface FooterTrustComplianceProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "title">, Partial<FooterTrustComplianceCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+}
+
+const ICONS = { shield: ShieldIcon, lock: LockIcon, "badge-check": BadgeCheckIcon, users: UsersIcon }
+
+export function FooterTrustCompliance({
+  locale = "en",
+  title,
+  sub,
+  trustLabel,
+  trustHref,
+  certifications,
+  certificationsLabel,
+  paymentNote,
+  payments,
+  paymentsLabel,
+  copyright,
+  legal,
+  legalLabel,
+  className,
+  ...props
+}: FooterTrustComplianceProps) {
+  const copy = COPY[locale]
+  const heading = title ?? copy.title
+  const text = sub ?? copy.sub
+  const button = trustLabel ?? copy.trustLabel
+  const cards = certifications ?? copy.certifications
+  const note = paymentNote ?? copy.paymentNote
+  const marks = payments ?? copy.payments
+  const links = legal ?? copy.legal
+  return (
+    <FooterSection
+      className={cn("border-t border-border py-8 md:py-16 lg:pb-8 lg:pt-16", className)}
+      contentClassName="gap-5 [@container(min-width:40rem)]:gap-8 [@container(min-width:64rem)]:gap-10"
+      {...props}
+    >
+      {heading || text || button ? (
+        <div className="flex 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 max-w-[620px] flex-col gap-2">
+            {heading ? <h2 className="text-xl font-semibold text-foreground">{heading}</h2> : null}
+            {text ? <p className="text-sm text-muted-foreground">{text}</p> : null}
+          </div>
+          {button ? (
+            <div className="flex shrink-0">
+              <a href={trustHref ?? copy.trustHref} className={buttonVariants({ variant: "outline", size: "sm" })}>{button}</a>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      {cards.length ? (
+        <ul aria-label={certificationsLabel ?? copy.certificationsLabel} className="grid grid-cols-1 gap-4 [@container(min-width:40rem)]:grid-cols-2 [@container(min-width:64rem)]:grid-cols-4">
+          {cards.map((card) => {
+            const Icon = ICONS[card.icon]
+            return (
+              <li key={`${card.title}-${card.href}`} className="flex">
+                <div className="group/card relative flex w-full flex-col justify-between gap-2 rounded-lg border border-border bg-card p-3 text-card-foreground transition-[border-color,transform,background-color] duration-[160ms] ease-out motion-reduce:transition-none motion-reduce:transform-none active:bg-secondary [@container(min-width:40rem)]:gap-3 [@container(min-width:40rem)]:p-4 [@container(min-width:64rem)]:p-5 hover:[@container(min-width:40rem)]:border-foreground hover:motion-safe:[@container(min-width:40rem)]:-translate-y-0.5">
+                  <div className="flex flex-col gap-2 [@container(min-width:40rem)]:gap-3">
+                    <span aria-hidden="true" className="flex size-8 items-center justify-center rounded-[var(--radius-md)] bg-secondary text-secondary-foreground">
+                      <Icon className="size-4" />
+                    </span>
+                    <h3 className="text-sm font-semibold text-card-foreground">{card.title}</h3>
+                    <p className="text-xs text-muted-foreground">{card.line}</p>
+                  </div>
+                  <a
+                    href={card.href}
+                    className="inline-flex w-fit items-center gap-2 rounded-sm text-xs font-medium text-card-foreground [outline:none] focus-visible:after:outline focus-visible:after:outline-2 focus-visible:after:outline-offset-2 focus-visible:after:outline-ring after:absolute after:inset-0 after:rounded-lg after:content-['']"
+                  >
+                    <span>{card.link}</span>
+                    <span
+                      aria-hidden="true"
+                      className="inline-flex shrink-0 transition-transform duration-[160ms] ease-out motion-reduce:transition-none 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"
+                    >
+                      <ArrowRightIcon className="size-3 rtl:-scale-x-100" />
+                    </span>
+                  </a>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+      {note || marks.length ? (
+        <div className="flex flex-col gap-4 pt-2 [@container(min-width:64rem)]:flex-row [@container(min-width:64rem)]:items-center [@container(min-width:64rem)]:justify-between [@container(min-width:64rem)]:gap-6">
+          {note ? (
+            <p className="flex items-start gap-2 text-sm text-muted-foreground [@container(min-width:64rem)]:items-center">
+              <CreditCardIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 [@container(min-width:64rem)]:mt-0" />
+              <span>{note}</span>
+            </p>
+          ) : null}
+          {marks.length ? (
+            <ul aria-label={paymentsLabel ?? copy.paymentsLabel} className="flex flex-wrap items-center gap-2">
+              {marks.map((mark) => (
+                <li key={mark} className="flex">
+                  <span dir="ltr" className="inline-flex items-center justify-center rounded-[var(--radius-sm)] border border-border bg-card px-2 py-2 text-xs font-semibold text-muted-foreground [@container(min-width:40rem)]:px-3">
+                    {mark}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      ) : null}
+      <FooterRule />
+      <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between [@container(min-width:40rem)]:gap-5">
+        <div className="flex flex-col items-start gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-5 [@container(min-width:64rem)]:gap-6">
+          <FooterLogo className="h-6" />
+          <FooterCopyright>{copyright ?? copy.copyright}</FooterCopyright>
+        </div>
+        {links.length ? (
+          <nav aria-label={legalLabel ?? copy.legalLabel}>
+            <ul className="flex flex-wrap items-center gap-x-3 gap-y-2 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:64rem)]:gap-x-5">
+              {links.map((link) => (
+                <li key={`${link.label}-${link.href}`} className="flex">
+                  <FooterLinkItem link={link} className="text-xs" />
+                </li>
+              ))}
+            </ul>
+          </nav>
+        ) : null}
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-trust-compliance/index.ts

@@ -0,0 +1,7 @@
+export {
+  FooterTrustCompliance,
+  footerTrustComplianceCopy,
+  type FooterCertification,
+  type FooterTrustComplianceCopy,
+  type FooterTrustComplianceProps,
+} from "./FooterTrustCompliance"

package/registry/blocks/footer-two-row-compact/FooterTwoRowCompact.tsx

@@ -0,0 +1,124 @@
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { SOCIAL_PLATFORM_NAMES, SocialIcon, type SocialPlatform } from "../../ui/social-icons/social-icons"
+import { FooterCopyright, FooterLinkItem, FooterLogo, FooterRule, FooterSection, type FooterLink, type FooterLocale } from "../footer/footer"
+
+/*
+ * Figma: `Footer` (46380:22515), Type=Two-Row Compact.
+ *
+ * A rounded `secondary` card on the page: the first row holds the logo, five
+ * links in Medium and four social marks; a hairline; the second row holds the
+ * copyright and five legal links. No motion: Figma has no chip for this Type.
+ *
+ * Desktop (1440) keeps both rows as rows, 32px of padding either side of the
+ * card's content and 20px between the rows. Tablet (768) lets the links wrap.
+ * Mobile (360) stacks: the logo, the links, the marks, the hairline, then the
+ * copyright and the legal links. In Arabic everything mirrors by the page's `dir`.
+ */
+
+export interface FooterTwoRowCompactCopy {
+  /** The links beside the logo. Hidden when empty. */
+  links: FooterLink[]
+  /** The accessible name of those links. */
+  navLabel: string
+  /** The copyright line. */
+  copyright: string
+  /** The legal links. Hidden when empty. */
+  legal: FooterLink[]
+  /** The accessible name of the legal links. */
+  legalLabel: string
+  /** The accessible name of the social marks. */
+  socialLabel: string
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<FooterLocale, FooterTwoRowCompactCopy> = {
+  en: {
+    links: ["Components", "Blocks", "Templates", "Documentation", "Pricing"].map((label) => ({ label, href: "#" })),
+    navLabel: "Footer",
+    copyright: "© 2026 Fasla. All rights reserved.",
+    legal: ["Privacy", "Terms", "Cookies", "Accessibility", "Sitemap"].map((label) => ({ label, href: "#" })),
+    legalLabel: "Legal links",
+    socialLabel: "Social",
+  },
+  ar: {
+    links: ["المكوّنات", "الكتل", "القوالب", "التوثيق", "الأسعار"].map((label) => ({ label, href: "#" })),
+    navLabel: "التذييل",
+    copyright: "© 2026 فاصلة. جميع الحقوق محفوظة.",
+    legal: ["الخصوصية", "الشروط", "ملفات تعريف الارتباط", "إمكانية الوصول", "خريطة الموقع"].map((label) => ({ label, href: "#" })),
+    legalLabel: "روابط قانونية",
+    socialLabel: "التواصل الاجتماعي",
+  },
+}
+
+/** The block's English and Arabic copy, for stories and previews. */
+export const footerTwoRowCompactCopy = COPY
+
+export interface FooterTwoRowCompactProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, Partial<FooterTwoRowCompactCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: FooterLocale
+  /** The social marks, in order. */
+  socials?: SocialPlatform[]
+}
+
+const DEFAULT_SOCIALS: SocialPlatform[] = ["linkedin", "x", "github", "youtube"]
+
+export function FooterTwoRowCompact({ locale = "en", links, navLabel, copyright, legal, legalLabel, socialLabel, socials = DEFAULT_SOCIALS, className, ...props }: FooterTwoRowCompactProps) {
+  const copy = COPY[locale]
+  const nav = links ?? copy.links
+  const legalLinks = legal ?? copy.legal
+  return (
+    <FooterSection className={cn("py-5 md:py-8 lg:py-10", className)} {...props}>
+      <div className="flex flex-col gap-3 rounded-2xl bg-secondary p-4 [@container(min-width:40rem)]:gap-4 [@container(min-width:40rem)]:px-6 [@container(min-width:40rem)]:py-5 [@container(min-width:64rem)]:gap-5 [@container(min-width:64rem)]:px-8 [@container(min-width:64rem)]:py-6">
+        <div className="flex flex-col gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:justify-between">
+          <div className="flex flex-col items-start gap-4 [@container(min-width:40rem)]:flex-row [@container(min-width:40rem)]:items-center [@container(min-width:40rem)]:gap-6 [@container(min-width:64rem)]:gap-8">
+            <FooterLogo className="h-[26px]" />
+            {nav.length ? (
+              <nav aria-label={navLabel ?? copy.navLabel}>
+                <ul className="flex flex-wrap items-center gap-x-4 gap-y-2 [@container(min-width:40rem)]:gap-x-5 [@container(min-width:64rem)]:gap-x-6">
+                  {nav.map((link) => (
+                    <li key={`${link.label}-${link.href}`} className="flex">
+                      <FooterLinkItem link={link} className="font-medium text-secondary-foreground" />
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            ) : null}
+          </div>
+          {socials.length ? (
+            <nav aria-label={socialLabel ?? copy.socialLabel}>
+              <ul className="flex items-center gap-3 [@container(min-width:64rem)]:gap-4">
+                {socials.map((platform) => (
+                  <li key={platform} className="flex">
+                    <a
+                      href="#"
+                      aria-label={SOCIAL_PLATFORM_NAMES[platform]}
+                      className="relative inline-flex rounded-sm [outline:none] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring after:absolute after:-inset-3.5 after:content-['']"
+                    >
+                      <SocialIcon platform={platform} color="negative" className="size-[18px]" />
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+        <FooterRule />
+        <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">
+          <FooterCopyright>{copyright ?? copy.copyright}</FooterCopyright>
+          {legalLinks.length ? (
+            <nav aria-label={legalLabel ?? copy.legalLabel}>
+              <ul className="flex flex-wrap items-center gap-x-3 gap-y-2 [@container(min-width:40rem)]:gap-x-4 [@container(min-width:64rem)]:gap-x-5">
+                {legalLinks.map((link) => (
+                  <li key={`${link.label}-${link.href}`} className="flex">
+                    <FooterLinkItem link={link} className="text-xs" />
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ) : null}
+        </div>
+      </div>
+    </FooterSection>
+  )
+}

package/registry/blocks/footer-two-row-compact/index.ts

@@ -0,0 +1,6 @@
+export {
+  FooterTwoRowCompact,
+  footerTwoRowCompactCopy,
+  type FooterTwoRowCompactCopy,
+  type FooterTwoRowCompactProps,
+} from "./FooterTwoRowCompact"