Porcelain FAQ Tower
A clean, refined FAQ component designed for legal and professional services.
Features
- Porcelain white (#FAFAF9) background with warm gray (#78716C) text
- Newsreader font for questions, Source Serif 4 for body text
- Manual accordion built with useState (no Accordion component import)
- Decorative section numbers (01, 02, 03...) on each item
- Animated toggle indicator with rotation transition
- Scale/justice icon motif throughout the design
- Thin hairline borders between FAQ items
- 7 legal-themed FAQ items with detailed answers
- Contact CTA section with consultation and phone options
- Legal disclaimer footer note
- Dark mode: warm dark (#292524) with light text
- WCAG AA compliant contrast ratios
Dependencies
lucide-react for icons- Shadcn UI: Separator
Customization
- Replace FAQ content with your own questions and answers
- Update contact CTA with real phone number and booking link
- Adjust the warm stone palette to match your firm's branding
- Add or remove FAQ items as needed
- Swap icons per question to match topic categories
