Build a Collapsible FAQ Section

You'll be building a simple, interactive Frequently Asked Questions (FAQ) section. This project will help you practice component creation, managing local component state, and mapping over data in React.

What to Build

A web page displaying a list of questions. When a user clicks on a question, its corresponding answer should appear below it. Clicking the same question again should hide the answer.

Specific Requirements/Acceptance Criteria

• The project must be built using React components, within a Next.js project.
• Create a main page component (e.g., pages/index.js or app/page.js if using App Router) that renders the FAQ section.
• Implement an FAQItem component that takes a question and an answer as props.
• Each FAQItem should manage its own open/closed state.
• Initially, all answers should be hidden.
• Clicking the question part of an FAQItem should toggle the visibility of its answer.
• Include at least 3 distinct FAQ items.
• The questions and answers can be hardcoded within the main component or imported from a simple JavaScript array.
• Apply basic styling (CSS, Tailwind CSS, or any preferred styling method) to visually distinguish questions from answers and to indicate whether an item is open or closed (e.g., a simple arrow icon that rotates, different text styling for the question).
• Ensure the component is responsive enough to be viewable on common screen sizes.

What to Include in Your Submission

• A link to your GitHub repository containing the complete project code.
• Clear instructions in the README.md file on how to set up and run the project locally.
• A brief explanation in the README.md of any significant design choices or React concepts you implemented.