Component: Hero Section (Home and Community) - Image and code refactoring

[henryajisegiri]

Overview

Implement hero section illustrations for homepage and community page across all three breakpoints (desktop, tablet, mobile). This follows the agreed design spec: foreground character positioned right (unless a UI element occupies that space), proportional scaling, padding built into images.

Design References
Homepage Hero

Desktop: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1245-35274&t=TrhWkQh9soHmbvfd-4
Tablet: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1245-35274&t=TrhWkQh9soHmbvfd-4
Mobile: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1245-35274&t=TrhWkQh9soHmbvfd-4

Community Page Hero

Desktop: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1644-117435&t=TrhWkQh9soHmbvfd-4
Tablet: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1644-117435&t=TrhWkQh9soHmbvfd-4
Mobile: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1644-117435&t=TrhWkQh9soHmbvfd-4

Spike Document

---

Layout

Desktop / Tablet

The foreground is a row of 2–3 columns:

• Column 1 (text) — headers, descriptive paragraphs, buttons, content tags
• Column 2 (mascot) — one or more transparent PNG mascot characters
• Column 3 (optional) — a card component (e.g. InstallPanel, CommunityJoinCard)

Space between columns 1 and 2 should be maximised, pushing the mascot toward the right edge.

Mobile

At the established mobile breakpoint (< 768px), the layout switches to a single column stack. The background image should scale to contain the new column layout.

---

Background Image Behaviour

• Foreground/background separation: characters (foreground) anchored; background handles breakpoint movement

• Character positioning: right side by default, unless a UI element (card, form, etc.) occupies that space — then position right

• Proportional scaling across all three breakpoints

• Padding built into images (not CSS)

• No external padding applied at component level

• On mobile, scale the existing image to contain the column layout

---

Props

Prop	Type	Required	Description
backgroundImage	string	Yes	Background image asset URL
headline	string	Yes	Main heading text
subheading	string	No	Supporting paragraph text
ctaButtons	array	No	Array of CTA button objects (label, href, variant)
tags	array	No	Array of content tag strings
mascotImages	array	Yes	Array of transparent PNG image URLs; displays one or more mascots
cardSlot	node	No	Optional card component rendered in the third column

---

Acceptance Criteria

• Homepage hero: character positioned left (no competing UI on homepage hero)
• Community page hero: character positioned left (confirm no UI element conflict with Figma)
• All three breakpoints responsive; padding from image assets maintained
• No CSS-applied padding at hero component level
• Desktop, tablet, and mobile render with proportional scaling — no unexpected cropping or distortion
• Foreground text is always left-aligned against the background image across all viewports
• Light and dark mode render correctly
• No layout overflow or clipping at 320px, 768px, 1280px, 1440px
• Tested in Chrome, Safari, Firefox

---

Out of Scope

• Page-level assembly (separate tickets per page)
• Apply to homepage hero and community page hero only, Library sub-pages: do not implement yet (separate illustrations pending from Rob)

[herzog0]

Dev note

The ticket also includes the refactoring and better code organization of the hero components and their stylesheet files.
A full rewrite is not out of question in this case.