Frontend: Create and Import the "FAQs" Section #5
Description
🎯 Objective
Develop a "FAQs" (Frequently Asked Questions) Section that provides quick answers to common questions about LogiQuest. The section should match the Figma design and be responsive, user-friendly, and accessible.
🔍 Context
This section will improve user experience by addressing common concerns or queries in a structured and visually appealing manner. The questions and answers should be collapsible to keep the section clean and organized.
📋 Tasks
- Create a
FaqsSection.tsxcomponent insidecomponents/. - Implement a collapsible accordion UI for displaying questions and answers.
- Ensure the section is fully responsive and accessible.
- Import and display it in
Home.tsx.
💻 Technical Implementation
1️⃣ Create FaqsSection.tsx inside components/
const FaqsSection = () => {
return (
<section className="">
{/* content goes here*/}
</section>
);
};
export default FaqsSection;
2️⃣ Import FaqsSection.tsx into Home.tsx
import FaqsSection from "../components/FaqsSection";
const Home = () => {
return (
<>
{/* paste your page component below here */}
<FaqsSection />
{/* paste your page component above here*/}
</>
);
};
export default Home;
📝 Acceptance Criteria
✅ The "FAQs" section matches the Figma design.
✅ Questions are clickable and expand to reveal answers.
✅ The section is responsive and visually appealing.
✅ The component is correctly imported and displayed on the Home Page.
✅ Accessibility is considered (keyboard navigation and proper HTML semantics).
💪 Skills Required
- React
- State Management (useState)
- Tailwind CSS
- Responsive Design
- Accessibility
📈 Difficulty
Medium