Task: Refactor homepage hero banner using DaisyUI hero component #149

New issue

Closed

opened 2024-09-08 04:27:51 +00:00 by saltyypanda · 2 comments

saltyypanda commented

2024-09-08 04:27:51 +00:00

(Migrated from github.com)

Description

For maintainability and aesthetic purposes, let's see if we can use DaisyUI's hero component for our homepage hero section

### Description For maintainability and aesthetic purposes, let's see if we can use DaisyUI's hero component for our homepage hero section

AriasLcr commented

2024-11-03 22:28:02 +00:00

(Migrated from github.com)

Pre-changes

Post-refactoring using DaisyUI Hero Component

In short, the biggest change is in the horizontal margin/padding which imo looks less cluttered.

The DaisyUI template includes a solid background color, which highlights the component and makes it distinct. Currently, our page doesn’t use many solid colors to separate sections, which might make it harder for users to distinguish between different components. How could we adjust the visual structure to improve the clarity and flow between sections?

Modern pages often use either a background image or a solid background color to clearly distinguish the hero component. Incorporating a similar approach could help users instantly recognize the hero section and provide a stronger visual hierarchy for the page.

I'll bring this up to the UX Design team. Other than that, this issue can be closed. I'm opening a PR.

## Pre-changes ![Image](https://github.com/user-attachments/assets/1ace0971-7d99-4e0a-89f6-bef7a6b4ff01) ## Post-refactoring using DaisyUI Hero Component In short, the biggest change is in the horizontal margin/padding which imo looks less cluttered. The DaisyUI template includes a solid background color, which highlights the component and makes it distinct. Currently, our page doesn’t use many solid colors to separate sections, which might make it harder for users to distinguish between different components. How could we adjust the visual structure to improve the clarity and flow between sections? Modern pages often use either a background image or a solid background color to clearly distinguish the hero component. Incorporating a similar approach could help users instantly recognize the hero section and provide a stronger visual hierarchy for the page. I'll bring this up to the UX Design team. Other than that, this issue can be closed. I'm opening a PR. ![Image](https://github.com/user-attachments/assets/952ec1af-3a8e-4529-8480-ab63fae0aec0)

2nPlusOne commented

2025-05-19 21:51:22 +00:00

(Migrated from github.com)

Closing this as it appears to have been merged into main