Landing Page: FAQ Section

[anhduy1202]

File Location

Here's the component file location so you can start coding FAQ Component

Design

Refer to this Figma

Image

The cat image is cat3.svg you can use it as image by simply:

 <img src="/cat3.svg" className=""/>

API Data

Modify this file to get new data for new faq (this data will be passed as props to FAQ Component which I've already implemented, so you only need to change this file)

/pages/api/faqs

If you have question about any FAQ, please ask me, it subject to change to not really a big deal, the UI/UX is more important

Reference

• All of custom colors, font size is labeled according to tailwind.config.js, feel free to change it since the color was from 2023
• TailwindCSS home page to learn how to use TailwindCSS for styling Ex:

  <div className='text-light_blue text-3xl font-bold'>

  will give you light blue text color, font size = 3xl = 2rem according to tailwind.config.js and bolded

Icons

• All of the icons can be imported from React-icons (Refer to it to find the icon name) Ex:

  import {AiOutlineSearch} from 'react-icons/ai';

  Then you can use it as a component and customize color + size

  <div className=''>
  <AiOutlineSearch size={34} color='#00000'/>
  </div>

  Contributing

  1. git pull for latest change if there's any
  2. git checkout -b "landing-page/faq" to create new branch
  3. npm run format to run formatter before commit + push your change
  4. Assign reviewer before merging code + attach screenshot to make sure it works