Domain:
Frontend / UX / Content
Difficulty:
Intermediate
Problem / steps to reproduce (for bugs)
- New users may have questions about how to use the app, but there is no central FAQ page.
- Currently, there is no way for users to quickly access helpful guidance for common issues.
Expected outcome / task:
- Add a Frequently Asked Questions (FAQ) page that is accessible from the top navigation bar:
- Place a button/link just to the left of the Recording Studio button.
- Clicking the button navigates to the FAQ page.
- The FAQ page should:
- List questions in a collapsible accordion format
- Allow users to expand/collapse individual questions
- Display clear answers for each question
- Be mobile-friendly and responsive
- Styled using Tailwind CSS and accessible components (e.g., Radix UI Accordion)
- Bonus: Ensure that long answers scroll properly and accordions handle large content gracefully.
Any links or references:
- Radix UI Accordion: https://www.radix-ui.com/docs/primitives/components/accordion
- Tailwind CSS for spacing and layout: https://tailwindcss.com/docs/spacing
- UX best practices for FAQ pages: https://www.nngroup.com/articles/faq-usability/
Setup Steps (short):
- Add a button in the top nav to link to the FAQ page.
- Create a new page (/faq) in Next.js.
- Use a Radix Accordion (or similar) to display questions and answers.
- Style the accordions with Tailwind CSS (padding, margins, shadows, rounded corners).
- Populate the page with sample questions and answers.
- Test the page on desktop and mobile for responsiveness and usability.