Website: bring back CTA buttons on homepage#45089
Conversation
fleet-release
added
the
~ga4-annotation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
WalkthroughThis PR updates the Fleet homepage styling and feature content. A new CSS rule for Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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/views/pages/homepage.ejs`:
- Around line 82-99: The markup now uses purpose="feature-list" but the CSS and
responsive breakpoints target purpose="feature-list-block", causing layout
regressions; fix by either changing the markup back to
purpose="feature-list-block" (replace purpose="feature-list" with
purpose="feature-list-block" on the container elements) or update the stylesheet
to include an alias selector for purpose="feature-list" alongside
purpose="feature-list-block"; ensure you also check sibling elements with
purpose="feature-text" and purpose="feature-block" for consistency and apply the
same change to the other two occurrences referenced in the PR.
🪄 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: f954c02e-9045-4a02-8547-e5416fcd43c5
📒 Files selected for processing (2)
website/assets/styles/pages/homepage.lesswebsite/views/pages/homepage.ejs
| <div purpose="feature-list"> | ||
|
|
||
| <div purpose="feature-text"> | ||
| <div purpose="feature-block"> | ||
| <h5>One platform for every OS — even Linux</h5> | ||
| <p>Manage macOS, Linux, Windows, iOS, and Android from a single console, without compromising management and security.</p> | ||
| </div> | ||
| <div purpose="feature-block"> | ||
| <h5>UI, API, or infrastructure as code</h5> | ||
| <p>Work in the UI, automate with the API, or manage settings as code.</p> | ||
| </div> | ||
| <div purpose="feature-block"> | ||
| <h5>All features, flexible deployment</h5> | ||
| <p>Unlike other solutions, you can let us host Fleet for you or deploy it yourself. You get the same experience either way.</p> | ||
| </div> | ||
| </div> | ||
| <!-- <a purpose="cta-button" href="/device-management">Explore device management</a> --> | ||
| <a purpose="platform-button" href="/device-management">Explore device management</a> | ||
| </div> |
There was a problem hiding this comment.
feature-list markup no longer matches the existing responsive selectors.
The updated sections now use purpose="feature-list", but homepage styles (including breakpoint behavior) are wired to purpose="feature-list-block". This can cause layout regressions across desktop/mobile in these three blocks.
Proposed CSS alias fix
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
@@
- [purpose='feature-list-block'] {
+ [purpose='feature-list-block'],
+ [purpose='feature-list'] {
display: flex;
flex-direction: row;
gap: 24px;
@@
- [purpose='feature-list-block'] {
+ [purpose='feature-list-block'],
+ [purpose='feature-list'] {
flex-direction: column;
width: 33%;
}
@@
- [purpose='feature-list-block'] {
+ [purpose='feature-list-block'],
+ [purpose='feature-list'] {
flex-direction: row;
width: 100%;
}Also applies to: 109-125, 135-157
🤖 Prompt for 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.
In `@website/views/pages/homepage.ejs` around lines 82 - 99, The markup now uses
purpose="feature-list" but the CSS and responsive breakpoints target
purpose="feature-list-block", causing layout regressions; fix by either changing
the markup back to purpose="feature-list-block" (replace purpose="feature-list"
with purpose="feature-list-block" on the container elements) or update the
stylesheet to include an alias selector for purpose="feature-list" alongside
purpose="feature-list-block"; ensure you also check sibling elements with
purpose="feature-text" and purpose="feature-block" for consistency and apply the
same change to the other two occurrences referenced in the PR.
There was a problem hiding this comment.
Pull request overview
This PR reintroduces and restyles homepage call-to-action (CTA) links, adjusting the homepage feature-section markup to support the new button placement and reversing one feature-with-image layout to match the intended section order.
Changes:
- Replaced previously commented-out homepage CTAs with new links using
purpose="platform-button"and reorganized feature section markup. - Updated homepage layout ordering by adding
class="reverse"to a feature-with-image section. - Removed stale script includes from the global website layout.
Reviewed changes
Copilot reviewed 1 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| website/views/pages/homepage.ejs | Adds back CTA links and wraps feature text/buttons in a new feature-list container; reverses one section layout. |
| website/views/layouts/layout.ejs | Removes script tags for JS assets that no longer exist in the repo. |
| website/assets/styles/pages/homepage.less | Adds styling for the new platform-button CTA on the homepage. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Changes:
Summary by CodeRabbit
Style
New Features