[FRONTEND] Reusable hero component

[bryyj-y]

Is your feature request related to a problem? Please describe.

Multiple pages require hero sections with similar structure but different content/layout. Building separate heroes would lead to duplicated code and inconsistent behaviour.

Describe the solution you'd like

• Build a reusable Hero component
• Support:
  - Background video (looping, muted, autoplay) or image fallback
  - Props for title/text content
  - Configurable text positioning/layout (bottom left corner)
  - Optional overlay/gradient for text readability
• Handle fallback:
  - Video → image when autoplay is blocked or connection is slow
  - Mobile defaults to image for performance
• Ensure component matches general Figma styling

Describe alternatives you've considered

Creating separate hero components per page (not scalable, duplicates logic)

Additional context

Design should be flexible enough to support multiple page variations later.

BEFORE MERGING

• Storybooks created where possible
• Tested with react testing library
• Tests written for critical interactions
• PR Reviewed (For non-trivial changes)
• Changes tested after rebasing on master or merging in master (hint: git fetch origin master:master, then git rebase master or git merge master)
• All required PR checks passing