Website: bring back CTA buttons on homepage (#45089)

Changes:
- Uncommented and updated the styles of the CTA buttons on the homepage,
updated the order of the section added in
https://github.com/fleetdm/fleet/pull/45001
This commit is contained in:
Eric
2026-05-08 17:52:26 -05:00
committed by GitHub
parent 0193891f1b
commit e8f013942e
2 changed files with 60 additions and 46 deletions
+8 -1
View File
@@ -316,7 +316,14 @@
}
}
[purpose='platform-button'] {
.cta-button();
padding: 8px 16px;
height: 36px;
font-size: 14px;
width: fit-content;
margin-top: 32px;
}
[purpose='feature-with-image'] {
+52 -45
View File
@@ -79,20 +79,23 @@
<div purpose="feature-image">
<video autoplay loop playsinline muted purpose="calendar-video"><source src="/videos/features-loop.mp4" type="video/mp4"></video>
</div>
<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 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>
<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>
<!-- <a purpose="cta-button" href="/device-management">Explore device management</a> -->
<a purpose="platform-button" href="/device-management">Explore device management</a>
</div>
</div>
<div purpose="homepage-text-block">
@@ -103,50 +106,54 @@
<div purpose="feature-image">
<img alt="See reality clearly" src="/images/see-reality-clearly-688x516@2x.png">
</div>
<div purpose="feature-text">
<div purpose="feature-block">
<h5>Cut the busywork</h5>
<p>Get answers instantly with live reports. No waiting hours for scripts or manual data collection.</p>
<div purpose="feature-list">
<div purpose="feature-text">
<div purpose="feature-block">
<h5>Cut the busywork</h5>
<p>Get answers instantly with live reports. No waiting hours for scripts or manual data collection.</p>
</div>
<div purpose="feature-block">
<h5>Enroll any device</h5>
<p>Get instant visibility into devices from subsidiaries, partners, or acquisitions. Enroll endpoints without forcing teams to migrate tools.</p>
</div>
<div purpose="feature-block">
<h5>Tell your story</h5>
<p>Track AI usage, shadow IT, vulnerabilities, patch SLAs, and security posture with clear reports.</p>
</div>
</div>
<div purpose="feature-block">
<h5>Enroll any device</h5>
<p>Get instant visibility into devices from subsidiaries, partners, or acquisitions. Enroll endpoints without forcing teams to migrate tools.</p>
</div>
<div purpose="feature-block">
<h5>Tell your story</h5>
<p>Track AI usage, shadow IT, vulnerabilities, patch SLAs, and security posture with clear reports.</p>
</div>
<!-- <a purpose="cta-button" href="/orchestration">More about visibility</a> -->
<a purpose="platform-button" href="/orchestration">More about visibility</a>
</div>
</div>
<div purpose="homepage-text-block">
<h2>Get things done faster</h2>
<p>The world is changing rapidly, and traditional device management systems were built for computer labs. In Fleet, you can become a power user in the UI, manage infrastructure as code, or adopt new ways of working. For example:</p>
</div>
<div purpose="feature-with-image">
<div purpose="feature-with-image" class="reverse">
<div purpose="feature-image">
<img alt="Modern change management" src="/images/mdm-modern-change-management-600x435@2x.png">
</div>
<div purpose="feature-text">
<div purpose="feature-list-block">
<div purpose="feature-text-content">
<h5>Propose a change</h5>
<p>Describe a configuration change, CVE fix, or other improvement in natural language using your existing AI.</p>
<div purpose="feature-list">
<div purpose="feature-text">
<div purpose="feature-block">
<div purpose="feature-text-content">
<h5>Propose a change</h5>
<p>Describe a configuration change, CVE fix, or other improvement in natural language using your existing AI.</p>
</div>
</div>
<div purpose="feature-block">
<div purpose="feature-text-content">
<h5>Human review</h5>
<p>Review changes from your team (or your bots) before they reach your devices. Inspect the configuration, make edits if needed, then approve it.</p>
</div>
</div>
<div purpose="feature-block">
<div purpose="feature-text-content">
<h5>Apply across your fleet</h5>
<p>Merge the change and let Fleet apply it across your devices. Roll back instantly if needed.</p>
</div>
</div>
</div>
<div purpose="feature-list-block">
<div purpose="feature-text-content">
<h5>Human review</h5>
<p>Review changes from your team (or your bots) before they reach your devices. Inspect the configuration, make edits if needed, then approve it.</p>
</div>
</div>
<div purpose="feature-list-block">
<div purpose="feature-text-content">
<h5>Apply across your fleet</h5>
<p>Merge the change and let Fleet apply it across your devices. Roll back instantly if needed.</p>
</div>
</div>
<!-- <a purpose="cta-button" href="/infrastructure-as-code">Manage devices as code</a> -->
<a purpose="platform-button" href="/infrastructure-as-code">Manage devices as code</a>
</div>
</div>
<div purpose="testimonials-header">