[refactor]: make responsive community section

[nehagup]

Is there an existing feature request for this?

• I have searched the existing issues

Summary

The current community section is inspired from k6, however, due to a lack of responsiveness the cards doesn't appear on the outer circular lines. Also the bunny image should be visible (small size) in the sm screen size at the top of the cards.

We should also add hover animation on cards and parallax animation on the bunny image.

Why should this be worked on?

for better UX

Repository

website

[hanzili]

Hey there! I'm excited to tackle this issue – I'll get started on it right away and aim to have a pull request ready for review very soon. Looking forward to contributing to a better UX! 😊

[hanzili]

Hi,

I've reviewed the circular cards layout in the community section of k6.io and observed that it relies on absolute and relative positioning. This strategy ensures a consistent arrangement but unfortunately makes the section less responsive and extensible due to the fixed sizes of images and cards.

In search of a solution, I discovered an approach combining Pug templates with trigonometry to dynamically position the cards. This method promises both flexibility and responsiveness, allowing the layout to adapt more effectively to different screen sizes.

I'm keen to know the community's preference on this matter. Do we see value in exploring this approach to enhance the layout's responsiveness?

Looking forward to your feedback.

Thank you.

[nehagup]

@hanzili very nicely put! definitely, flexibility and responsiveness play a crucial role in user experience while designing any section. I think we can explore the later approach, the only limitation I see right now is that we don't have an SVG for the central bunny image, so responsiveness needs to be maintained on the image size there. For the rest of the cards, sub-icons can be put into the Pug templates with trigonometry.