Faq

The Faq component displays a list of frequently asked questions in an accordion format, allowing users to expand and collapse individual questions to view their answers. It provides a structured, easy-to-navigate layout for common inquiries.

Props

The Faq component does not accept any props.

Dependencies

• Internal Components:

  • Accordion: Used to display each question and answer. Allows toggling visibility to show or hide content.

Key Style Classes

• Container Styles:

  • w-[1250px] h-fit flex justify-center px-3: Sets a constrained width with center alignment and padding for optimal layout on larger screens.

  • border border-transparent rounded-2xl: Provides rounded corners and spacing around the FAQ section for a clean, organized appearance.

• Responsive Layout:

  • flex flex-col md:flex-row gap-10 md:gap-[100px]: Stacks items vertically on smaller screens and divides them horizontally with gaps on larger screens for a well-spaced layout.

• Title and Description:

  • text-3xl md:text-5xl: Configures the title font size responsively.

  • text-neutral-400 font-light: Styles the description text with a light font weight and neutral color to create a subtle, professional look.

Usage Example

// Usage of Faq component within a page layout
<Faq />

Additional Notes

• Accordion Structure:

  • The Accordion component is used to create collapsible sections for each question. Each Accordion instance receives a title for the question and content for the answer.
  • Questions and answers can be customized as needed within the component.

• Expandable Content: Each question can be expanded individually, allowing users to find information quickly without being overwhelmed by visible answers.

---

This documentation should cover all aspects of the Faq component.