In this challenge, the candidate needs to build the FAQ section/page of a website. If you don't know what is a FAQ section/page then let us explain below > A frequently asked questions page—or an FAQ page for short—is a key part of a knowledge base because it addresses your customers’ most common questions and is useful at all stages of the customer journey. FAQs start with a question and then provide a concise answer. ## Functional Requirements - Create a generic component that can be used on the website at multiple places with different FAQs content. - Users can open multiple FAQs at the same time - Opening and closing of a FAQ should be animated along with status indicator icon (up & down arrows). - The candidate must use Compound Component architecture to achieve this task. To know about Compound Components check out the following

One way to describe Compound Components would be ```js Devtools Tech? 🤔 The aim with Devtools Tech is to create a platform for Frontend Engineers where we all can improve, invest in ourselves, and grow by learning from high quality real world programming content. This is a platform where you can practice actual interview questions, watch courses, read blogs, and keep track of your progress across various domains and topics. Is it Free? Yes, the platform and YouTube both are completely free! ``` - Feel free to extend the functionalities and enhance the component ## Demo

## Mockups - Default State ![Default State](https://ik.imagekit.io/devtoolstech/question-images/faq-section/Screenshot%202023-09-24%20at%203.38.46%20PM_L-sYzRLGR.png?updatedAt=1695550284755) - Open FAQ with highlighted title ![Open State](https://ik.imagekit.io/devtoolstech/question-images/faq-section/Screenshot%202023-09-24%20at%203.39.11%20PM_UO5rDaGYr.png?updatedAt=1695550285384) - Multiple open FAQ ![Multiple Open State](https://ik.imagekit.io/devtoolstech/question-images/faq-section/Screenshot%202023-09-24%20at%203.39.31%20PM_85CsyB1pD.png?updatedAt=1695550284482) ## Resources - Background Color: `#FFF5D9` - Highlighted Title Color: `#146EF6` - Feel free to use any icon library - Can use vanilla css animations or Framer Motion ## Submission Please start the timer before starting and finish your solution within 60 mins. Share your solution with us on [Twitter](https://twitter.com/devtoolstech) or [LinkedIn](https://in.linkedin.com/in/yomeshgupta).

Do you see value in our efforts?

Build a FAQ page | Frontend Coding Challenge | React.js | HTML | CSS | JavaScript

@Himanshu