Skip to content

Align homepage and header to the live design#3

Merged
benpeter merged 1 commit into
mainfrom
conti-design-align
Jul 24, 2026
Merged

Align homepage and header to the live design#3
benpeter merged 1 commit into
mainfrom
conti-design-align

Conversation

@benpeter

Copy link
Copy Markdown
Collaborator

Align the homepage and header to the live continentaltire.com after a side-by-side review.

Before / After

Homepage:

What changed

  • Fonts: headings are Stag Sans light (weight 300), matching live. They were bold.
  • Header: nav items are vertically centered in the bar. An intermediate wrapper had no height, so they sat at the top.
  • Category tiles: no borders, fill three across at full width, larger tire image.
  • Perfect-fit bar: new black bar under the hero with By Vehicle, By Tire Size, By Plate.
  • Confidence on the Road: rebuilt centered on the dark band, with a shield badge, six icon-over-label coverage items, and a centered Learn More button.
  • Footer: CTA pills stacked as a left column next to the link groups, and icons added to the Search for Tire links.

Testing

Verified side by side against the live homepage at desktop. eslint and stylelint pass.

Notes

  • The coverage and perfect-fit icons are simple placeholders. Real Continental artwork can replace them (the live SVG badge is 110KB, over the pipeline's 40KB image cap, so it cannot be hotlinked as-is).

Address side-by-side review feedback against continentaltire.com.

- fonts: headings are Stag Sans light (weight 300) to match live, not
  bold.
- header: nav items vertically centered in the bar (an intermediate
  wrapper had no height, so they sat at the top).
- category tiles: no borders, fill three across full width, larger tire
  image.
- perfect-fit bar: new black bar under the hero with By Vehicle, By Tire
  Size, By Plate.
- Confidence on the Road: rebuilt centered on the dark band with a
  shield badge, six icon-over-label coverage items, and a centered
  Learn More button.
- footer: CTA pills stacked as a left column next to the link groups,
  and icons added to the Search for Tire links.

New block: perfect-fit. New icons for the coverage and search items.
Icons are simple placeholders; real Continental artwork can replace
them. Verified side by side against the live homepage at desktop.
@aem-code-sync

aem-code-sync Bot commented Jul 24, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@benpeter
benpeter merged commit 370b037 into main Jul 24, 2026
2 of 3 checks passed
@benpeter
benpeter deleted the conti-design-align branch July 24, 2026 14:33
@aem-code-sync

aem-code-sync Bot commented Jul 24, 2026

Copy link
Copy Markdown
Page Scores Audits Google
📱 / Timeout Exceeded PSI
🖥️ / Timeout Exceeded PSI

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant