Trustlab: Enhance Hero component with responsive design, new button functionality, and SVG icon integration

[koechkevin]

Description

This PR enhances Hero Component to match new designs

Fixes # (issue)

Type of change

• New feature (non-breaking change which adds functionality)

Screenshots

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation

[kelvinkipruto]

Looks good @koechkevin, just a few observations.

1. We need to change the block image to match the new design
2. When we have only one slide, perhaps we can hide the Next and Previous buttons instead of disabling them.
3. When navigating to the next slide, there is a big delay before the content appears compared to navigating back. This causes the entire hero to just be "white"

[kilemensi]

Heita @koechkevin ... pulled this locally and image doesn't appear to be a required field. Is this correct?

[koechkevin]

Heita @koechkevin ... pulled this locally and image doesn't appear to be a required field. Is this correct?

It should be required

[kilemensi]

👍🏽

Running it locally:

1. Reuse the current hero animation (i.e. those running at https://trustlab.dev.codeforafrica.org). The hero animation in this PR seem off to me.
2. The hero is a bit too big to me. I can't see anything else on the screen on first page load.

[kelvinkipruto]

LGTM

[kilemensi]

If hero size is fixed @koechkevin, lets deploy this!