search

maxellmilay / otakufest-ph

Official website for Otakufest PH
https://otakufest-ph.vercel.app
1 stars 0 forks source link

Arwin/faqs page #32

Closed arwin50 closed 3 months ago

arwin50 commented 3 months ago

The idea/design (available on Figma):

FAQs

The outcome:

https://github.com/maxellmilay/otakufest-ph/assets/112203539/d7067cac-393d-423e-a5b3-f2d0c260d1b2

The transition is not that clear in the video since my laptop was lagging a little bit and snipping tool's fps capture was abt 30 fps. But the icon turns 180 degrees when clicked and the answer div also has a transition like its growing(?).

https://github.com/maxellmilay/otakufest-ph/assets/112203539/109d174a-6af7-4030-a52f-a9535d3adf3b

For the breakpoints, I guess I'm not that sure about the lower ones (eg. sm and lower) .

The code might be messy but it's the only way that I can style the answers in the div (some answers have lists in them) and i did not approach it by using reusable components because this might be the only page that will use it.

Loweso commented 3 months ago

This is amazing, @arwin50 !! I think it's sleek and clean and that the expandable divs provide nice interactivity.

id like to suggest separating each section by color, so that the divisions are clear. like first section red, next white, then red again...

arwin50 commented 3 months ago

thanks for the suggestion, I'll try to incorporate that!

maxellmilay commented 3 months ago

@arwin50 @Loweso I'll merge this, so implement the changes on another PR nalang