Redesign the FAQ section #278
Description
Description:
We need to completely rebuild the FAQ section on intlayer.org based on the new design.
This should not reuse the existing FAQ component but instead create a new, reusable component that implements both desktop and mobile layouts.
Here is the figma design :
https://www.figma.com/design/f9swTKa8efwVdF1SWncLUr/Components-issues?node-id=0-1&t=tC3TmKLp5z23Wn5o-1
Here is the preview for the desktop part :
And for the mobile part :
Current component
apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
Requirements
- Implement the new design for desktop and mobile.
- Create a new component (do not reuse the old FAQ component).
- The component should be flexible to handle different FAQ items dynamically.
- The height/size of each item should expand automatically to display all its content.
- When content is too long and not displayed entirely by default, show a "..." at the end to indicate the user can click or hover to expand and read more.
- Ensure smooth animation for expanding/collapsing items.
- Make sure it’s fully responsive.
Acceptance Criteria
Desktop version matches design.
Mobile version matches design.
Expanding/collapsing works as expected.
"..." correctly appears when text is truncated.
Component is reusable and flexible for future FAQ updates.
Notes
Use design system components where possible, but custom parts should match the new FAQ style.
Ensure accessibility (keyboard navigation + screen readers).