Website: update homepage hero and header styles

[eashaw]

Closes: #45126
Closes: #45128

Changes:

• Updated the styles and layout of the homepage hero to match the latest wireframes
• Removed the box-shadow from the website masthead and added a bottom border.
• Added a new variable to colors.less @core-fleet-black-5

Summary by CodeRabbit

• Style
  • Redesigned homepage hero layout and typography for improved responsive behavior across desktop, tablet, and mobile.
  • Reorganized quote and statistics into a unified responsive block with updated spacing, padding, and stacking.
  • Adjusted hero background sizing and hero-area height/padding for small screens.
  • Updated hero subtitle wording for clarity.
  • Refined header bottom color and removed header shadow.
  • Added a subtle new color token to the site palette.

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7f5b229b-e150-40cf-bddd-c4edca292756

📥 Commits

Reviewing files that changed from the base of the PR and between 7dac043 and 8aeb48e.

📒 Files selected for processing (1)

• website/assets/styles/pages/homepage.less

🚧 Files skipped from review as they are similar to previous changes (1)

• website/assets/styles/pages/homepage.less

---

Walkthrough

This PR adds a new LESS color variable @core-fleet-black-5 (#F2F2F5) and applies it to the masthead border-bottom (the masthead box-shadow is commented out). The homepage markup moves the hero quote into a new quote-and-statistics section and updates the hero subtitle punctuation. Styles for the hero (spacing, quote/profile typography, statistics layout) are refactored under the new wrapper and adjusted across breakpoints, including changes to hero background-image sizing and mobile/desktop heights.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description covers the main changes and references the related issues (#45126, #45128) but does not follow the repository's PR template structure with checklists for validation, testing, and database considerations.	Provide a complete description following the template, including relevant checklist items for manual QA, automated tests, and any applicable sections from the submission checklist.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: updating homepage hero layout and header styles, which matches the file modifications across layout.less, colors.less, homepage.less, and homepage.ejs.
Linked Issues check	✅ Passed	All coding requirements from linked issues are met: #45126 implemented the new @core-fleet-black-5 color variable and applied it to the header border, and #45128 restructured the homepage hero layout and relocated the quote to the social proof section.
Out of Scope Changes check	✅ Passed	All changes are within scope: color variable addition, homepage hero and header styling updates directly address the requirements in issues #45126 and #45128 with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 2026-05-11-update-homepage-hero

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@website/assets/styles/pages/homepage.less`:
- Around line 1476-1478: The h1 font-size is inverted across breakpoints: the
base h1 rule (selector "h1") sets font-size: 24px, but a later media-breakpoint
rule that also targets "h1" increases it to 28px for narrower screens; update
the breakpoint rule so that h1 decreases (e.g., set the narrower-screen h1
font-size smaller than 24px) or refactor to a single responsive scale (adjust
the media query selector that currently overrides h1 to use a smaller value or
remove the override) to ensure headings get smaller on smaller devices.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: ca1f9d9d-fc45-4cf8-ba6d-451a974ff050

📥 Commits

Reviewing files that changed from the base of the PR and between e942e06 and aa4ca99.

📒 Files selected for processing (4)

• website/assets/styles/layout.less
• website/assets/styles/mixins-and-variables/colors.less
• website/assets/styles/pages/homepage.less
• website/views/pages/homepage.ejs

[Copilot]

Pull request overview

Updates the marketing website homepage hero area and global header styling to align with updated wireframes/design system, including moving the testimonial quote out of the hero and adjusting masthead borders.

Changes:

• Moved the homepage hero quote into a new “quote + statistics” section below the logo carousel.
• Refined homepage hero layout and responsive styles (spacing, typography, background image sizing, hero height).
• Replaced header box-shadow with a 1px bottom border using a new shared color token.

Reviewed changes

Copilot reviewed 1 out of 4 changed files in this pull request and generated 4 comments.

File	Description
website/views/pages/homepage.ejs	Restructures hero content and relocates quote + statistics into homepage content section.
website/assets/styles/pages/homepage.less	Updates hero visuals, adds quote/stats layout styles, and adjusts responsive behavior across breakpoints.
website/assets/styles/mixins-and-variables/colors.less	Adds @core-fleet-black-5 color variable for design-system consistency.
website/assets/styles/layout.less	Updates masthead styling to use a bottom border instead of box-shadow.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.