Create Campaign Hero to replace Campaign Banner

[troychaplin]

Summary

Replace the existing Campaign Banner with a richer, image-led Campaign Hero section. The component should introduce a campaign and make its fundraising progress and primary action easy to understand at a glance. The attached design reference shows the intended content and visual hierarchy.

Proposed content

• Campaign category or department label, campaign title, and short descriptive copy.
• A prominent campaign image paired with the introduction.
• A fundraising summary with amount raised, goal, percentage of goal reached, and time remaining.
• A progress bar that visualizes fundraising progress.
• A clear primary call to action (shown as “Fund this project” in the reference).

Behavior and layout

• Use the supplied screenshot as the visual reference: introduction on the left and image on the right on wide screens, with the fundraising summary, progress bar, and call to action below.
• Reflow cleanly on smaller screens without clipping or losing the relationship between the campaign introduction and its fundraising details.
• Keep fundraising figures and time remaining consistent with the campaign data supplied to the component.
• Provide accessible text alternatives for the campaign image and preserve semantic heading and action-link behavior.

Acceptance criteria

• The current Campaign Banner is replaced by the Campaign Hero design and presents the campaign category, title, description, and image.
• The fundraising summary displays amount raised, goal, percent funded, and time remaining.
• The progress bar and summary reflect the same campaign values.
• The primary funding action is visible and usable.
• The layout adapts to narrow viewports and remains readable and accessible.
• Storybook documentation/examples are updated to demonstrate the new component and its content.

Design reference

The screenshot will be attached to this issue.