✨ Hero page - Make hero page consistent with Figma design

[joshbermanssw]

Cc: @calumjs @ricksu978 @adamcogan
Hi Calum Simpson

▶️ Watch the video (00:34)

Pain

The YakShaver Desktop app “hero” page UI is currently not consistent with the latest Figma design, which creates a mismatch between the designed experience and the implemented product.

Suggested Solution

Update the hero page layout, typography, spacing, colors, and component styling to match the latest Figma mockups/spec.

Acceptance Criteria

Acceptance Criteria defines the requirements that must be met for the story to be completed. This is WHAT must be done.

See https://www.ssw.com.au/rules/acceptance-criteria.

1. Hero page matches the Figma design (layout, spacing, typography, colors, and component styling).

Tasks

Tasks help developers to track small bits of work needed to meet the ACs. This is HOW the work will be done.

• Locate the hero page implementation in the YakShaver Desktop app.
• Compare the current hero page UI against the latest Figma design.
• Update the hero page layout to match Figma.
• Update the hero page typography styles to match Figma.
• Update the hero page spacing to match Figma.
• Update the hero page color styles to match Figma.
• Update the hero page component styling to match Figma.
• Verify the updated hero page visually matches Figma.

More Information

Figma design: refer to the latest designer-provided hero page mockups/spec.

Screenshots

Thanks!

[joshbermanssw]

Introduced router, with homepage = myShaves page

Figure: Home page is My Shaves page