FAQ Accordion

Expandable FAQ list used on the home, contact, FAQ and UX audit pages — always on a light ground. Single-item expansion with spring animations; HTML answers support inline links, styled with the site's prose-link treatment. Cards rest on a soft static aqua wash; the CTA banner's live aqua silk shows in the hovered card (or the open one), through one shared shader per list (.faq-flow), clipped to the union of the cards' shapes so it never shows in the gaps; switching cards crossfades.

Live Preview

Props

Prop	Type	Default	Description
`faqs`*	`FAQ[]`	-	Array of FAQ items from Sanity. Each needs `_id`, `question`, and `answer` (HTML string). `answer` is rendered via dangerouslySetInnerHTML so links can be embedded.

Data from Sanity

tsx

// Sanity schema type
interface FAQ {
  _id: string
  question: string
  answer: string   // HTML string — inline <a> links get the prose-link style
  category?: string
  order?: number
}

Import

tsx

import { FAQAccordion } from '@/components/ui/FAQAccordion'