feat: add multiple faqs

app/_components/faq-structured-data.tsx

@@ -49,6 +49,12 @@ export const FaqStructuredData: React.FC<FAQProps> = ({ items }) => {
                         className="text-neutral-900 dark:text-neutral-100 underline hover:text-neutral-600 dark:hover:text-neutral-400 transition-colors"
                       />
                     ),
+                    ol: ({ node, ...props }) => (
+                      <ol
+                        {...props}
+                        className="list-decimal pl-5 space-y-1"
+                      />
+                    ),
                   }}
                 >
                   {item.answer}

content/en/patterns/content-management/expandable-text.mdx

@@ -6,6 +6,7 @@ status: complete
 ---
 
 import { BuildEffort } from "@app/_components/build-effort";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Expandable Text
 
@@ -292,6 +293,39 @@ flowchart TB
 - [Tooltip](/patterns/content-management/tooltip) – Useful for **brief inline explanations**, where additional information is needed on hover or focus, rather than expanding a large content section.
 - [Modal](/patterns/content-management/modal) – Ideal when **expanded content requires full attention**, such as confirmations, forms, or important details that should block interaction with the rest of the page.
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is expandable text in web design?",
+      answer:
+        "Expandable text is a UI pattern that allows users to reveal or hide additional content on demand, enhancing readability and reducing visual clutter by initially displaying only essential information.",
+    },
+    {
+      question: "When should I use expandable text?",
+      answer:
+        "Use expandable text when you have supplementary information that enhances the user experience but isn't critical for the initial understanding, such as detailed explanations, extended descriptions, or optional content.",
+    },
+    {
+      question: "How can I make expandable text accessible?",
+      answer:
+        "Ensure that the trigger for expanding text is a focusable element, like a button, and manage ARIA attributes such as 'aria-expanded' to indicate the state. Support keyboard navigation and provide clear visual indicators for focus and state changes.",
+    },
+    {
+      question: "What are the benefits of using expandable text?",
+      answer:
+        "Expandable text improves readability by reducing visual clutter, allows users to control the amount of information they see, and enhances the overall user experience by organizing content efficiently.",
+    },
+    {
+      question:
+        "What are common mistakes to avoid when implementing expandable text?",
+      answer:
+        "Avoid hiding essential information by default, requiring excessive user actions to access important content, and neglecting accessibility considerations like proper ARIA roles and keyboard support.",
+    },
+  ]}
+/>
+
 ## Resources
 
 ### Articles

content/en/patterns/content-management/modal.mdx

@@ -7,7 +7,7 @@ status: complete
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
-import { Callout } from "nextra/components";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Modal
 
@@ -438,6 +438,39 @@ These design tokens follow the [Design Tokens Format](https://design-tokens.gith
 }
 ```
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is a modal dialog in web design?",
+      answer:
+        "A modal dialog is a user interface element that appears on top of the main content, requiring users to interact with it before returning to the underlying page. It is commonly used to capture user input, display critical information, or prompt for decisions.",
+    },
+    {
+      question: "When should I use a modal dialog?",
+      answer:
+        "Modal dialogs are appropriate when you need to direct the user's attention to important information or require an immediate response. Common scenarios include confirming actions, displaying forms, or presenting critical alerts.",
+    },
+    {
+      question: "How can I make a modal dialog accessible?",
+      answer:
+        "To ensure accessibility, use semantic HTML elements like `<dialog>` or `<div>` with appropriate ARIA roles. Manage focus by moving it to the modal when it opens and returning it to the triggering element upon closure. Provide keyboard support for navigation and actions within the modal.",
+    },
+    {
+      question: "What are the benefits of using modal dialogs?",
+      answer:
+        "Modal dialogs effectively capture user attention, facilitate focused interactions, and can streamline workflows by prompting users to complete specific tasks without navigating away from the current page.",
+    },
+    {
+      question:
+        "What are common mistakes to avoid when implementing modal dialogs?",
+      answer:
+        "Avoid overusing modal dialogs, as they can become intrusive. Ensure they are not used for non-critical information. Always implement proper focus management and keyboard accessibility to prevent trapping users within the modal.",
+    },
+  ]}
+/>
+
 ## Resources
 
 ### Articles

content/en/patterns/content-management/popover.mdx

@@ -7,6 +7,7 @@ status: complete
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Popover
 
@@ -395,6 +396,38 @@ Consider these related patterns when implementing popovers:
 - [Tooltip](/patterns/content-management/tooltip) - Similar in providing contextual information but less interactive.
 - [Selection Input / Dropdown](/patterns/forms/selection-input) - Best for more complex navigation menus.
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is a popover in web design?",
+      answer:
+        "A popover is a small overlay that provides additional information or options related to a specific element on a webpage. It appears upon user interaction, such as a click or hover, and can contain text, images, or interactive elements.",
+    },
+    {
+      question: "When should I use a popover?",
+      answer:
+        "Popovers are ideal for displaying non-critical, contextual information or controls without navigating away from the current page. Common use cases include providing explanations for form fields, offering additional details for UI elements, or presenting settings and options.",
+    },
+    {
+      question: "How can I make a popover accessible?",
+      answer:
+        "To ensure accessibility, use focusable trigger elements like buttons, manage ARIA attributes such as `aria-haspopup` and `aria-expanded`, and support keyboard interactions. Ensure the popover content is accessible to screen readers and that focus management is handled appropriately.",
+    },
+    {
+      question: "What are the benefits of using popovers?",
+      answer:
+        "Popovers enhance user experience by providing relevant information or controls in context, reducing the need for page navigation. They help keep interfaces clean and intuitive by revealing additional content only when needed.",
+    },
+    {
+      question: "What are common mistakes to avoid when implementing popovers?",
+      answer:
+        "Avoid overloading popovers with essential information or complex interactions, as they are meant for supplementary content. Ensure that popovers do not obscure important UI elements and that they are properly dismissed to prevent clutter. Additionally, always consider accessibility to ensure all users can interact with popovers effectively.",
+    },
+  ]}
+/>
+
 ## Resources
 
 ### Articles

content/en/patterns/forms/autocomplete.mdx

@@ -7,6 +7,7 @@ status: complete
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Autocomplete
 
@@ -230,6 +231,39 @@ These design tokens follow the [Design Tokens Format](https://design-tokens.gith
 }
 ```
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is autocomplete in web design?",
+      answer:
+        "Autocomplete is a user interface feature that predicts and displays suggestions as a user types into an input field, helping them complete their input more efficiently.",
+    },
+    {
+      question: "When should I use autocomplete?",
+      answer:
+        "Autocomplete is beneficial when users need to input data that can be predicted or matched from a known set of options, such as search queries, addresses, or product names.",
+    },
+    {
+      question: "How can I make an autocomplete feature accessible?",
+      answer:
+        "Ensure the input field is focusable and supports keyboard navigation. Use ARIA roles and properties like `aria-autocomplete` and `aria-expanded` to convey the state to assistive technologies.",
+    },
+    {
+      question: "What are the benefits of using autocomplete?",
+      answer:
+        "Autocomplete enhances user experience by reducing typing effort, minimizing errors, and providing faster access to relevant information.",
+    },
+    {
+      question:
+        "What are common mistakes to avoid when implementing autocomplete?",
+      answer:
+        "Avoid overwhelming users with too many suggestions, neglecting accessibility considerations, and providing irrelevant or poorly ranked suggestions.",
+    },
+  ]}
+/>
+
 ## Resources
 
 ### Articles

content/en/patterns/forms/button.mdx

@@ -7,6 +7,7 @@ status: complete
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Button
 
@@ -476,6 +477,38 @@ These design tokens follow the [Design Tokens Format](https://design-tokens.gith
 }
 ```
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is a button in web design?",
+      answer:
+        "A button is a UI element that allows users to perform actions or trigger events, such as submitting a form or opening a dialog.",
+    },
+    {
+      question: "When should I use a button?",
+      answer:
+        "Use a button when you want to initiate an action, like submitting data, opening a modal, or performing interactive tasks within your application.",
+    },
+    {
+      question: "How can I make a button accessible?",
+      answer:
+        "Ensure buttons are focusable, provide descriptive labels, support keyboard interactions, and have sufficient color contrast. Use semantic HTML elements like `<button>` and manage ARIA attributes appropriately.",
+    },
+    {
+      question: "What are the different types of buttons?",
+      answer:
+        "Common types include primary buttons for main actions, secondary buttons for less important actions, and tertiary buttons for minimal emphasis. Variants like text, contained, and outlined buttons offer different visual styles.",
+    },
+    {
+      question: "What are common mistakes to avoid when implementing buttons?",
+      answer:
+        "Avoid using non-semantic elements for buttons, neglecting accessibility features, overloading buttons with too many styles, and failing to provide clear visual feedback for different states.",
+    },
+  ]}
+/>
+
 ## Resources
 
 ### Articles

content/en/patterns/forms/text-field.mdx

@@ -7,6 +7,7 @@ status: complete
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Text Field
 
@@ -529,6 +530,38 @@ Text fields should support **standard keyboard navigation and interactions** to
 - [ ] Test behavior when **users press the "back" button on mobile browsers**—does the input persist?
 - [ ] Ensure users **can undo accidental deletions** (via `Ctrl+Z` or long press on mobile).
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is a text field in web design?",
+      answer:
+        "A text field is an input element that allows users to enter and edit text in forms or interfaces, commonly used for data entry such as names, emails, or search queries.",
+    },
+    {
+      question: "What are best practices for designing text fields?",
+      answer:
+        "Best practices include using clear and visible labels, providing appropriate input types, ensuring sufficient contrast, supporting keyboard navigation, and offering helpful placeholder text when necessary.",
+    },
+    {
+      question: "How can I make text fields accessible?",
+      answer:
+        "Ensure that each text field has a visible label, supports keyboard navigation, provides sufficient color contrast, and includes clear instructions or error messages to assist users with disabilities.",
+    },
+    {
+      question: "What is the difference between a text field and a text area?",
+      answer:
+        "A text field is typically a single-line input for short text, while a text area is a multi-line input designed for longer text entries, such as comments or messages.",
+    },
+    {
+      question: "Should I use placeholder text as a label?",
+      answer:
+        "No, placeholder text should not replace labels. Placeholders can provide examples or hints but should not be used as the primary label, as they disappear when users start typing, potentially causing confusion.",
+    },
+  ]}
+/>
+
 ## Related Patterns
 
 - [Autocomplete](/patterns/forms/autocomplete) – Suggests options as users type.

content/en/patterns/navigation/back-to-top.mdx

@@ -7,6 +7,7 @@ status: complete
 
 import { BrowserSupport } from "@app/_components/browser-support";
 import { BuildEffort } from "@app/_components/build-effort";
+import { FaqStructuredData } from "@app/_components/faq-structured-data";
 
 # Back to Top
 
@@ -340,6 +341,39 @@ These design tokens follow the [Design Tokens Format](https://design-tokens.gith
 }
 ```
 
+## Frequently Asked Questions
+
+<FaqStructuredData
+  items={[
+    {
+      question: "What is a 'Back to Top' button?",
+      answer:
+        "A 'Back to Top' button is a user interface element that allows users to quickly return to the top of a webpage without manually scrolling, enhancing navigation on long pages.",
+    },
+    {
+      question: "When should I use a 'Back to Top' button?",
+      answer:
+        "Implement a 'Back to Top' button on pages that require significant scrolling, typically more than two screens of content. This feature is especially beneficial for mobile users and those with accessibility needs.",
+    },
+    {
+      question: "Where should the 'Back to Top' button be placed?",
+      answer:
+        "The button is typically positioned in the bottom right corner of the page, where users expect to find it. This placement keeps it accessible yet unobtrusive.",
+    },
+    {
+      question: "How can I make a 'Back to Top' button accessible?",
+      answer:
+        "Ensure the button is keyboard navigable by using a standard `<button>` element, provide a descriptive label like 'Back to Top', and implement visible focus indicators for users navigating via keyboard.",
+    },
+    {
+      question:
+        "What are the best practices for designing a 'Back to Top' button?",
+      answer:
+        "Use clear labeling, maintain a consistent position, ensure the button is appropriately sized for both desktop and mobile devices, and avoid covering important content. The button should appear after users have scrolled down a significant portion of the page.",
+    },
+  ]}
+/>
+
 ## Resources
 
 ### Articles