Feat/homepage design [WIP]

[anqilique]

Description

Implement the new design of the home page.

Events section is not done, and there are still some minor fixes to be made.

Only tested on laptop and one monitor (viewport 1905 × 925 pixels).

Changes

Navbar

• Created an animated navigation bar. Bold yellow bubble shifts to the current page.
• Has an ImageBlock and text logo in the top-left. Editing currently disabled so we can see the logo.
• Top-right displays a button or the user's profile picture depending on auth state.

Hero

• Club name text exists, with mascot displayed to the right of it.
• Mascot uses ImageBlock and can be swapped out with a different image.
• "Join Us!" button placed to the right of mascot.

What We Do

• ImageBlock component on left, paragraph text on the right.
• More text is rendered if the screen size is extra large.
• Button at the bottom links to the "About Us" page.

🚩 Events [WIP 😬 Difficult]

• Kinda functional, displays 3 event photos (also swappable ImageBlock's).
• Buttons allow to rotate through photos in either direction.
• Doesn't look accurate to design yet.

Sponsors

• Two rows of four sponsors each, displays an ImageBlock logo.
• Part of Kaco's tail got amputated and isn't visible here like in the design.
• Button goes to the "Sponsors" page.

Footer

• Hid the content for now as it is incomplete.

Other

• common.css has a little bit of new styling added.

Visual Preview

Next Steps

Navbar

• Page tabs are not sticky.
• User's preferred name is not used.
• ImageBlock to be modified to make editing the tiny logo easier.

Events

• Events have a card-like display, using both a photo and title.
• Margin/padding is not quite right.
• Pill buttons to be swapped for < > style buttons.

Couldn't find a Swiper component that looked similar to design? Or it's premium. 😭

Footer

• To be implemented.

General

• More accurate styling (for margins, padding, font sizes).
• Should be more responsive depending on screen sizes, desktop and larger.
• Home.tsx is very long, could be split into components.

[RLee64]

Great work so far! Looking forward to seeing how this looks once it's done