Task: Refactor homepage hero banner using DaisyUI hero component

[saltyypanda]

Description

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

[AriasLcr]

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.