@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/faq-contact-cta-card/FaqContactCtaCard.tsx

@@ -0,0 +1,229 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+import { Avatar } from "../../ui/avatar/avatar"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Contact CTA Card.
+ *
+ * A centred column of questions, closed by a muted card that hands the reader
+ * to a person: the support team's faces, a short promise and two actions.
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440). Direction is the page's `dir`; every
+ * side here is a logical one, so the avatars overlap the same way the text
+ * reads.
+ */
+
+export interface FaqContactCtaCardItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqContactCtaCardPerson {
+  /** The person's name: the photo's alt text, and the initials shown without a photo. */
+  name: string
+  /** A photo. Without one, the avatar shows the name's initials. */
+  src?: string
+}
+
+export interface FaqContactCtaCardAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface FaqContactCtaCardCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The questions, in order. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. */
+  items: FaqContactCtaCardItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+  /** The support team shown on the card. No photos by default: pass your own. */
+  people: FaqContactCtaCardPerson[]
+  /** The heading of the contact card. */
+  ctaTitle: React.ReactNode
+  /** The line of text under the contact card's heading. */
+  ctaDescription: React.ReactNode
+  /** The solid button. */
+  primaryAction: FaqContactCtaCardAction
+  /** The outline button beside it. */
+  secondaryAction: FaqContactCtaCardAction
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqContactCtaCardCopy> = {
+  en: {
+    heading: "Frequently asked questions",
+    items: [
+      {
+        question: "How do I know Fasla is qualified for my product?",
+        answer:
+          "We build and maintain the system used across our own products, and the file ships with the same tests we run internally: token coverage, contrast checks and a live changelog you can audit before you buy.",
+      },
+      {
+        question: "How can I become a Fasla partner?",
+        answer:
+          "Agencies and studios that ship with Fasla can apply through the partner form. Partners get early access to new blocks and a listing in our directory.",
+      },
+      {
+        question: "Do you take on custom design-system work?",
+        answer:
+          "Yes, for a few teams each quarter. We extend Fasla to your brand, then hand over a file and a codebase your team can keep running.",
+      },
+      {
+        question: "Can I hire your team for a workshop?",
+        answer:
+          "Yes. We run half-day and full-day workshops on tokens, RTL layouts and handoff, remotely or on site.",
+      },
+      {
+        question: "Is there a community I can join?",
+        answer: "Yes. Our community channel is open to every licence holder, with release notes, office hours and a place to ask for components.",
+      },
+    ],
+    empty: "No questions yet.",
+    people: [{ name: "Layla Haddad" }, { name: "Omar Khalil" }, { name: "Sara Mansour" }],
+    ctaTitle: "Still have questions?",
+    ctaDescription: "Our team answers every message personally — usually within one business day.",
+    primaryAction: { label: "Get in touch", href: "#contact" },
+    secondaryAction: { label: "Read the docs", href: "#docs" },
+  },
+  ar: {
+    heading: "الأسئلة الأكثر شيوعًا",
+    items: [
+      {
+        question: "كيف أتأكد أن فاصلة مناسبة لمنتجي؟",
+        answer:
+          "نحن نبني النظام ونصونه ونستخدمه في منتجاتنا، ويأتي الملف بالاختبارات نفسها التي نجريها داخليًا: تغطية الرموز، وفحوص التباين، وسجلّ تغييرات حيّ يمكنك مراجعته قبل الشراء.",
+      },
+      {
+        question: "كيف أصبح شريكًا لفاصلة؟",
+        answer:
+          "يمكن للوكالات والاستوديوهات التي تعمل بفاصلة التقدّم عبر نموذج الشركاء. يحصل الشركاء على وصول مبكر إلى الكتل الجديدة وعلى إدراج في دليلنا.",
+      },
+      {
+        question: "هل تنفّذون أعمال أنظمة تصميم مخصّصة؟",
+        answer: "نعم، لعدد قليل من الفرق كل ربع سنة. نوسّع فاصلة لتناسب علامتك، ثم نسلّمك ملفًا وشيفرة يستطيع فريقك مواصلة العمل عليهما.",
+      },
+      {
+        question: "هل يمكنني الاستعانة بفريقكم لورشة عمل؟",
+        answer: "نعم. نقدّم ورش عمل لنصف يوم أو يوم كامل عن الرموز وتخطيطات اليمين إلى اليسار والتسليم، عن بُعد أو في مقرّكم.",
+      },
+      {
+        question: "هل يوجد مجتمع يمكنني الانضمام إليه؟",
+        answer: "نعم. قناة مجتمعنا مفتوحة لكل حاملي التراخيص، وفيها ملاحظات الإصدارات وساعات مكتبية ومكان لطلب المكوّنات.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+    people: [{ name: "ليلى حداد" }, { name: "عمر خليل" }, { name: "سارة منصور" }],
+    ctaTitle: "ما زالت لديك أسئلة؟",
+    ctaDescription: "يجيب فريقنا عن كل رسالة شخصيًا، عادةً خلال يوم عمل واحد.",
+    primaryAction: { label: "تواصل معنا", href: "#contact" },
+    secondaryAction: { label: "اقرأ التوثيق", href: "#docs" },
+  },
+}
+
+export interface FaqContactCtaCardProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqContactCtaCardCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** The items open at first, by `value`. The first item, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqContactCtaCard({
+  locale = "en",
+  heading,
+  items,
+  empty,
+  people,
+  ctaTitle,
+  ctaDescription,
+  primaryAction,
+  secondaryAction,
+  defaultValue = ["0"],
+  multiple,
+  className,
+  ...props
+}: FaqContactCtaCardProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+  const team = people ?? copy.people
+  const primary = primaryAction ?? copy.primaryAction
+  const secondary = secondaryAction ?? copy.secondaryAction
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-12">
+        <h2 id={headingId} className="w-full max-w-[760px] text-center text-3xl font-semibold text-foreground lg:text-4xl">
+          {heading ?? copy.heading}
+        </h2>
+
+        {list.length === 0 ? (
+          <p className="w-full max-w-[800px] text-center text-sm text-muted-foreground">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion className="w-full max-w-[800px]" defaultValue={defaultValue} multiple={multiple}>
+            {list.map((item, index) => (
+              <AccordionItem key={item.value ?? index} value={item.value ?? String(index)}>
+                <AccordionTrigger className="text-base">{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        )}
+
+        <div className="flex w-full max-w-[1024px] flex-col items-center gap-4 rounded-xl bg-muted p-12 text-center">
+          {team.length > 0 && (
+            <ul className="flex [&>li+li]:-ms-3">
+              {team.map((person, index) => (
+                <li key={index}>
+                  <Avatar
+                    src={person.src}
+                    name={person.name}
+                    radius="rounded"
+                    border
+                    className="size-12"
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+          <h3 className="text-xl font-semibold text-foreground md:text-2xl">{ctaTitle ?? copy.ctaTitle}</h3>
+          <p className="text-base text-muted-foreground">{ctaDescription ?? copy.ctaDescription}</p>
+          <div className="flex flex-wrap justify-center gap-3">
+            {/* Links styled as buttons with the Button's own classes, not
+                Button asChild: the shadcn CLI rewrites asChild for Base UI
+                projects, which Fasla's Button doesn't take. */}
+            <a href={primary.href} className={buttonVariants()}>
+              {primary.label}
+            </a>
+            <a href={secondary.href} className={buttonVariants({ variant: "outline" })}>
+              {secondary.label}
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const faqContactCtaCardCopy = COPY

package/registry/blocks/faq-contact-cta-card/index.ts

@@ -0,0 +1,9 @@
+export {
+  FaqContactCtaCard,
+  faqContactCtaCardCopy,
+  type FaqContactCtaCardAction,
+  type FaqContactCtaCardCopy,
+  type FaqContactCtaCardItem,
+  type FaqContactCtaCardPerson,
+  type FaqContactCtaCardProps,
+} from "./FaqContactCtaCard"

package/registry/blocks/faq-dark-panel/FaqDarkPanel.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Dark Panel.
+ *
+ * The questions on an inverted panel: dark in Light, light in Dark. The panel
+ * is painted with the inverse tokens, the only way Fasla inverts a surface,
+ * so it never forces a `.dark` or `.light` class and never borrows
+ * `bg-foreground`. The theme-inverse registry item maps the tokens, falling
+ * back to the page colours swapped in a theme that doesn't define them.
+ *
+ * The Accordion is the library's, untouched: every colour it needs on the
+ * panel (question, answer, outline, chevron, hover and focus ring) is set
+ * here, through its className props.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface FaqDarkPanelItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqDarkPanelCopy {
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The line of text under the heading. */
+  description: React.ReactNode
+  /** The questions, in order. Each item has a `question`, an `answer` and an optional `value` that `defaultValue` opens it by. */
+  items: FaqDarkPanelItem[]
+  /** Shown in place of the questions when `items` is empty. */
+  empty: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqDarkPanelCopy> = {
+  en: {
+    heading: "Frequently Asked Questions",
+    description: "Pricing, billing and everything in between.",
+    items: [
+      {
+        question: "What counts as a seat?",
+        answer:
+          "A seat is one person with edit access to the Fasla library in your Figma organisation. Viewers, developers inspecting specs and stakeholders commenting are all free.",
+      },
+      {
+        question: "How does pricing work for agencies?",
+        answer:
+          "Agencies buy seats for their own designers, not for each client. Every project you deliver with those seats is covered.",
+      },
+      {
+        question: "Can I estimate my seat count before buying?",
+        answer:
+          "Count the people who edit design files each week. Start there; you can add seats at any time and pay only for the rest of the term.",
+      },
+      {
+        question: "What if I go over my prepaid seats?",
+        answer:
+          "Nothing stops working. We bill the extra seats on your next invoice, prorated from the day they were added.",
+      },
+      {
+        question: "We’re a startup — do you offer discounts?",
+        answer: "Yes. Teams under two years old with fewer than 20 people get 50% off their first year.",
+      },
+      {
+        question: "What resources come with the licence?",
+        answer: "The Figma library, the code registry, the documentation in English and Arabic, and access to our support channel.",
+      },
+    ],
+    empty: "No questions yet.",
+  },
+  ar: {
+    heading: "الأسئلة الشائعة",
+    description: "الأسعار والفوترة وكل ما بينهما.",
+    items: [
+      {
+        question: "ما المقصود بالمقعد؟",
+        answer:
+          "المقعد هو شخص واحد لديه صلاحية التحرير على مكتبة فاصلة داخل مؤسستك في Figma. أما المشاهدون والمطوّرون الذين يعاينون المواصفات وأصحاب المصلحة الذين يعلّقون فهم مجانيون جميعًا.",
+      },
+      {
+        question: "كيف تعمل الأسعار للوكالات؟",
+        answer: "تشتري الوكالة مقاعد لمصمميها، لا لكل عميل. وكل مشروع تسلّمه بهذه المقاعد يشمله الترخيص.",
+      },
+      {
+        question: "هل يمكنني تقدير عدد المقاعد قبل الشراء؟",
+        answer: "احسب عدد من يعدّلون ملفات التصميم كل أسبوع وابدأ به. يمكنك إضافة مقاعد في أي وقت، وتدفع عن المدة المتبقية فقط.",
+      },
+      {
+        question: "ماذا لو تجاوزت عدد المقاعد المدفوعة مسبقًا؟",
+        answer: "لن يتوقف شيء عن العمل. نضيف المقاعد الإضافية إلى فاتورتك التالية، محسوبةً من يوم إضافتها.",
+      },
+      {
+        question: "نحن شركة ناشئة، هل تقدّمون خصومات؟",
+        answer: (
+          <>
+            نعم. تحصل الفرق التي يقل عمرها عن سنتين ويقل عدد أفرادها عن <bdi dir="ltr">20</bdi> على خصم <bdi dir="ltr">50%</bdi>{" "}
+            في سنتها الأولى.
+          </>
+        ),
+      },
+      {
+        question: "ما الموارد التي تأتي مع الترخيص؟",
+        answer: "مكتبة Figma، وسجل الشيفرة، والتوثيق بالعربية والإنجليزية، والوصول إلى قناة الدعم لدينا.",
+      },
+    ],
+    empty: "لا توجد أسئلة بعد.",
+  },
+}
+
+export interface FaqDarkPanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, Partial<FaqDarkPanelCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** The items open at first, by `value`. The first item, by default. */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqDarkPanel({
+  locale = "en",
+  heading,
+  description,
+  items,
+  empty,
+  defaultValue = ["0"],
+  multiple,
+  className,
+  ...props
+}: FaqDarkPanelProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const list = items ?? copy.items
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[1248px] flex-col items-center gap-12 rounded-3xl bg-background-inverse px-6 py-20 md:px-16">
+        <header className="flex w-full max-w-[720px] flex-col gap-2 text-center">
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground-inverse lg:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+          <p className="text-base text-muted-foreground-inverse">{description ?? copy.description}</p>
+        </header>
+
+        {list.length === 0 ? (
+          <p className="w-full max-w-[880px] text-center text-sm text-muted-foreground-inverse">{empty ?? copy.empty}</p>
+        ) : (
+          <Accordion className="w-full max-w-[880px] gap-2" defaultValue={defaultValue} multiple={multiple}>
+            {list.map((item, index) => (
+              <AccordionItem
+                key={item.value ?? index}
+                value={item.value ?? String(index)}
+                className="rounded-lg border border-muted-foreground-inverse px-5 py-4 last:border"
+              >
+                <AccordionTrigger className="text-base text-foreground-inverse after:border-foreground-inverse">
+                  {item.question}
+                </AccordionTrigger>
+                <AccordionContent className="text-muted-foreground-inverse">{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        )}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const faqDarkPanelCopy = COPY

package/registry/blocks/faq-dark-panel/index.ts

@@ -0,0 +1 @@
+export { FaqDarkPanel, faqDarkPanelCopy, type FaqDarkPanelCopy, type FaqDarkPanelItem, type FaqDarkPanelProps } from "./FaqDarkPanel"

package/registry/blocks/faq-featured-question/FaqFeaturedQuestion.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../ui/accordion/accordion"
+import { Button } from "../../ui/button/button"
+
+/*
+ * Figma: `FAQ` (42359:9029), Type=Featured Question.
+ *
+ * The question everybody asks, answered in full on a raised card, with a
+ * "Was this helpful?" prompt; the rest of the questions follow in a list.
+ * The prompt reports the answer through `onFeedback` and thanks the reader
+ * once they choose, so it is never asked twice.
+ *
+ * Mobile first: the base classes are Figma's Mobile (360), `md:` its Tablet
+ * (768) and `lg:` its Desktop (1440).
+ */
+
+export interface FaqFeaturedQuestionItem {
+  question: React.ReactNode
+  answer: React.ReactNode
+  /** Identifies the item for `defaultValue`. Defaults to its index, as a string. */
+  value?: string
+}
+
+export interface FaqFeaturedQuestionCopy {
+  /** The short label above the heading. */
+  eyebrow: React.ReactNode
+  /** The section's heading, an `h2`. */
+  heading: React.ReactNode
+  /** The question answered on the card. */
+  featured: { question: React.ReactNode; answer: React.ReactNode }
+  /** The question asking whether the featured answer helped. */
+  helpfulPrompt: React.ReactNode
+  /** The text of the Yes button. */
+  yesLabel: React.ReactNode
+  /** The text of the No button. */
+  noLabel: React.ReactNode
+  /** Replaces the prompt once the reader has answered it. */
+  thanks: React.ReactNode
+  /** The questions under the card. */
+  items: FaqFeaturedQuestionItem[]
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", FaqFeaturedQuestionCopy> = {
+  en: {
+    eyebrow: "MOST ASKED",
+    heading: "Start with the question everybody asks",
+    featured: {
+      question: "Do I have to rebuild my product to adopt Fasla?",
+      answer:
+        "No. Fasla is additive. Start by pointing one screen at the token collections, then swap components in as you touch them. Because every colour, space and radius resolves to a variable, a half-migrated file still renders correctly in both themes — there is no all-or-nothing switch, and nothing breaks while you go.",
+    },
+    helpfulPrompt: "Was this helpful?",
+    yesLabel: "Yes",
+    noLabel: "No",
+    thanks: "Thanks for letting us know.",
+    items: [
+      {
+        question: "How long does a typical migration take?",
+        answer: "Most teams move their core screens in two to four weeks, working screen by screen alongside their usual releases.",
+      },
+      {
+        question: "Can I mix Fasla with my own components?",
+        answer: "Yes. Point your components at the same tokens and they sit beside Fasla’s in both themes.",
+      },
+      {
+        question: "Do you provide a Tailwind config?",
+        answer: "Yes. The theme installs with one command and maps every token to a Tailwind class.",
+      },
+      {
+        question: "What happens to my existing styles?",
+        answer: "Nothing, until you replace them. Your styles keep working while you move screens over one at a time.",
+      },
+      {
+        question: "Is there a migration guide?",
+        answer: "Yes. The docs walk through a migration step by step, from the first token to the last screen.",
+      },
+    ],
+  },
+  ar: {
+    eyebrow: "الأكثر سؤالًا",
+    heading: "ابدأ بالسؤال الذي يطرحه الجميع",
+    featured: {
+      question: "هل عليّ إعادة بناء منتجي لاعتماد فاصلة؟",
+      answer:
+        "لا. فاصلة إضافية بطبيعتها. ابدأ بتوجيه شاشة واحدة إلى مجموعات الرموز، ثم استبدل المكوّنات تدريجيًا كلما عملت عليها. ولأن كل لون ومسافة ونصف قطر يعود إلى متغيّر، يظل الملف المنقول جزئيًا يُعرض بشكل صحيح في الوضعين، فلا يوجد تبديل شامل، ولا ينكسر شيء أثناء الانتقال.",
+    },
+    helpfulPrompt: "هل كان هذا مفيدًا؟",
+    yesLabel: "نعم",
+    noLabel: "لا",
+    thanks: "شكرًا لإخبارنا.",
+    items: [
+      {
+        question: "كم تستغرق عملية الانتقال عادةً؟",
+        answer: "تنقل معظم الفرق شاشاتها الأساسية خلال أسبوعين إلى أربعة أسابيع، شاشةً بعد شاشة إلى جانب إصداراتها المعتادة.",
+      },
+      {
+        question: "هل يمكنني الدمج بين فاصلة ومكوّناتي الخاصة؟",
+        answer: "نعم. اربط مكوّناتك بالرموز نفسها لتظهر بجانب مكوّنات فاصلة في الوضعين.",
+      },
+      {
+        question: "هل توفّرون ملف إعداد Tailwind؟",
+        answer: "نعم. تُثبَّت السمة بأمر واحد، وتربط كل رمز بفئة في Tailwind.",
+      },
+      {
+        question: "ماذا يحدث لأنماطي الحالية؟",
+        answer: "لا شيء حتى تستبدلها. تظل أنماطك تعمل بينما تنقل الشاشات واحدة تلو الأخرى.",
+      },
+      {
+        question: "هل يوجد دليل للانتقال؟",
+        answer: "نعم. يشرح التوثيق الانتقال خطوة بخطوة، من أول رمز حتى آخر شاشة.",
+      },
+    ],
+  },
+}
+
+export interface FaqFeaturedQuestionProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<FaqFeaturedQuestionCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /** Called with the reader's answer to "Was this helpful?". */
+  onFeedback?: (value: "yes" | "no") => void
+  /**
+   * The list items open at first, by `value`. None, as in Figma.
+   * @default none open
+   */
+  defaultValue?: string[]
+  /**
+   * Lets several questions stay open at once.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+export function FaqFeaturedQuestion({
+  locale = "en",
+  eyebrow,
+  heading,
+  featured,
+  helpfulPrompt,
+  yesLabel,
+  noLabel,
+  thanks,
+  items,
+  onFeedback,
+  defaultValue,
+  multiple,
+  className,
+  ...props
+}: FaqFeaturedQuestionProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const card = featured ?? copy.featured
+  const list = items ?? copy.items
+  const [answered, setAnswered] = React.useState(false)
+
+  const answer = (value: "yes" | "no") => {
+    setAnswered(true)
+    onFeedback?.(value)
+  }
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("bg-background px-4 py-8 md:px-6 md:py-16 lg:px-8 lg:py-24", className)}
+      {...props}
+    >
+      <div className="mx-auto flex w-full max-w-[900px] flex-col gap-12">
+        <header className="flex flex-col gap-2 text-center">
+          <p className="text-xs font-semibold text-primary">{eyebrow ?? copy.eyebrow}</p>
+          <h2 id={headingId} className="text-3xl font-semibold text-foreground lg:text-4xl">
+            {heading ?? copy.heading}
+          </h2>
+        </header>
+
+        <article className="flex flex-col gap-5 rounded-xl border border-border bg-card p-8 shadow-md">
+          <h3 className="text-xl font-semibold text-foreground md:text-2xl">{card.question}</h3>
+          <div className="text-base text-muted-foreground">{card.answer}</div>
+          <hr className="border-border" />
+          {/* The prompt and the thanks share one live region, so a screen reader hears the change. */}
+          <div aria-live="polite" className="flex min-h-8 items-center gap-3">
+            {answered ? (
+              <p className="text-sm text-muted-foreground">{thanks ?? copy.thanks}</p>
+            ) : (
+              <>
+                <p className="flex-1 text-sm text-muted-foreground">{helpfulPrompt ?? copy.helpfulPrompt}</p>
+                <Button variant="outline" size="sm" onClick={() => answer("yes")}>
+                  {yesLabel ?? copy.yesLabel}
+                </Button>
+                <Button variant="ghost" size="sm" onClick={() => answer("no")}>
+                  {noLabel ?? copy.noLabel}
+                </Button>
+              </>
+            )}
+          </div>
+        </article>
+
+        {list.length > 0 ? (
+          <Accordion defaultValue={defaultValue} multiple={multiple}>
+            {list.map((item, index) => (
+              <AccordionItem key={item.value ?? index} value={item.value ?? String(index)}>
+                <AccordionTrigger className="text-base">{item.question}</AccordionTrigger>
+                <AccordionContent>{item.answer}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        ) : null}
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const faqFeaturedQuestionCopy = COPY

package/registry/blocks/faq-featured-question/index.ts

@@ -0,0 +1 @@
+export { FaqFeaturedQuestion, faqFeaturedQuestionCopy, type FaqFeaturedQuestionCopy, type FaqFeaturedQuestionItem, type FaqFeaturedQuestionProps } from "./FaqFeaturedQuestion"