Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

Patch faster landing page style fixes (#45338)

Browse Source 
Style fixes, including color and spacing.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Refined spacing and typography across the patch-faster landing page
for improved hierarchy and readability.
* Updated hero text (removed trailing period) and increased H1 size;
removed several section dividers for cleaner flow.
* Restyled proof strip into a light, bordered panel with darker neutral
text and adjusted highlight colors.
* Changed feature icon background to a light neutral; adjusted CTA
gradient start and internal spacing.
* Improved responsive paddings and gaps at tablet and desktop
breakpoints.

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/45338)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Mike Thomas
2026-05-13 10:07:30 -05:00
committed by GitHub
parent b908589849
commit eb64125e3b
2 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/assets/styles/pages/landing-pages/patch-faster.less
Vendored
+29 -21
View File
@@ -13,8 +13,8 @@
@heading-lineheight: 120%;
@text-lineheight: 150%;
@section-gap: 80px;
@inner-gap: 32px;
@section-gap: 120px;
@inner-gap: 48px;
p {
margin-bottom: 0;
@@ -57,17 +57,18 @@
}
[purpose='eyebrow'] {
font-size: 11px;
font-weight: 600;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: @primary;
font-family: 'Roboto Mono';
color: #515774;
}
[purpose='hero'] h1 {
color: @text-dark;
font-family: Inter;
font-size: 48px;
font-size: 64px;
font-weight: 800;
line-height: @heading-lineheight;
letter-spacing: -0.02em;
@@ -226,7 +227,7 @@
font-weight: 800;
line-height: @heading-lineheight;
color: @text-dark;
margin-bottom: 24px;
margin-bottom: 32px;
}
}
@@ -246,7 +247,7 @@
width: 100%;
display: flex;
flex-direction: column;
gap: 48px;
gap: 32px;
}
[purpose='section-intro'] {
@@ -276,7 +277,7 @@
flex-shrink: 0;
width: 44px;
height: 44px;
background: rgba(106, 103, 254, 0.08);
background: #F9FAFC;
border-radius: 10px;
display: flex;
align-items: center;
@@ -298,9 +299,16 @@
}
// ─── PROOF STRIP ───────────────────────────────────────────────
[purpose='proof-strip-container'] {
padding: 0 40px;
}
[purpose='proof-strip'] {
background: @bg-dark;
background: #F9FAFC;
border: 1px solid #E2E4EA;
border-radius: 16px;
max-width: 1072px;
padding: 64px;
margin: 0 auto;
}
[purpose='proof-inner'] {
@@ -315,24 +323,23 @@
[purpose='proof-highlight'] {
font-size: 20px;
font-weight: 700;
color: #FFFFFF;
color: #192147;
margin-bottom: 8px;
}
[purpose='proof-detail'] {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.6);
color: #515774;
}
// ─── BELOW FOLD CONTAINER ──────────────────────────────────────
[purpose='below-fold-container'] {
background: #F8F9FA;
padding: 80px 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
gap: 120px;
}
// ─── PLATFORM SECTION ──────────────────────────────────────────
@@ -346,7 +353,7 @@
font-weight: 800;
line-height: @heading-lineheight;
color: @text-dark;
margin-bottom: 20px;
margin-bottom: 32px;
}
}
@@ -391,7 +398,7 @@
font-weight: 800;
line-height: @heading-lineheight;
color: @text-dark;
margin-bottom: 20px;
margin-bottom: 32px;
}
}
@@ -423,7 +430,7 @@
// ─── CLOSING CTA ───────────────────────────────────────────────
[purpose='closing-cta'] {
background: linear-gradient(180deg, #F8F9FA 0%, #E9F4F4 100%);
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
padding: 80px 64px;
}
@@ -434,7 +441,7 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
gap: 32px;
h2 {
font-family: Inter;
font-size: 32px;
@@ -475,7 +482,7 @@
padding: 64px 40px;
}
[purpose='below-fold-container'] {
padding: 64px 40px;
padding: 120px 40px;
}
[purpose='closing-cta'] {
padding: 64px 40px;
@@ -498,6 +505,7 @@
[purpose='page-container'] {
padding-left: 24px;
padding-right: 24px;
padding-bottom: 80px;
}
[purpose='hero'] h1 {
font-size: 32px;
@@ -511,8 +519,8 @@
padding: 48px 24px;
}
[purpose='below-fold-container'] {
padding: 48px 24px;
gap: 48px;
padding: 80px 24px;
gap: 80px;
}
[purpose='closing-cta'] {
padding: 56px 24px;
website/views/pages/landing-pages/patch-faster.ejs
Vendored
+17 -19
View File
@@ -5,7 +5,7 @@
<div purpose="hero">
<div purpose="hero-copy">
<p purpose="eyebrow">Software management</p>
<h1>Stop waiting on your MDM.</h1>
<h1>Stop waiting on your MDM</h1>
<p purpose="hero-subhead">When a critical patch drops, the bottleneck isn't your team. It's your toolchain. Fleet's maintained app catalog and automated patch policies push updates to your devices on a regular, predictable cadence. No manual repackaging. No osquery queries to write. No waiting.</p>
</div>
<div purpose="hero-form-col">
@@ -63,7 +63,6 @@
<%/* ─── PROBLEM ──────────────────────────────────────── */%>
<div purpose="problem-section">
<div purpose="section-divider"></div>
<h2>Manual patching doesn't scale.</h2>
<div purpose="prose">
<p>When a critical CVE drops, the clock starts. But for most IT and security teams, the bottleneck isn't awareness, it's the toolchain. Someone has to download the new version, validate it, package it, and get it into the catalog before a single device gets updated. If you're doing that manually, you're burning engineering time on work that doesn't have to be manual.</p>
@@ -74,7 +73,6 @@
<%/* ─── SOLUTION ─────────────────────────────────────── */%>
<div purpose="solution-section">
<div purpose="section-intro">
<div purpose="section-divider"></div>
<h2>Fleet automates the parts that slow you down.</h2>
</div>
<div purpose="features-grid">
@@ -125,28 +123,29 @@
</div><%/* page-container */%>
<%/* ─── PROOF STRIP ───────────────────────────────────── */%>
<div purpose="proof-strip">
<div purpose="proof-inner">
<div purpose="proof-item">
<p purpose="proof-highlight">No osquery queries to write</p>
<p purpose="proof-detail">Fleet auto-generates the correct query for each Fleet-maintained app.</p>
<div purpose="proof-strip-container">
<div purpose="proof-strip">
<div purpose="proof-inner">
<div purpose="proof-item">
<p purpose="proof-highlight">No osquery queries to write</p>
<p purpose="proof-detail">Fleet auto-generates the correct query for each Fleet-maintained app.</p>
</div>
<div purpose="proof-item">
<p purpose="proof-highlight">One-hour policy cadence</p>
<p purpose="proof-detail">Policy checks run on a typical one-hour cadence on all online hosts.</p>
</div>
<div purpose="proof-item">
<p purpose="proof-highlight">macOS, Windows, and Linux</p>
<p purpose="proof-detail">One platform for your entire device fleet, regardless of OS mix.</p>
</div>
</div>
<div purpose="proof-item">
<p purpose="proof-highlight">One-hour policy cadence</p>
<p purpose="proof-detail">Policy checks run on a typical one-hour cadence on all online hosts.</p>
</div>
<div purpose="proof-item">
<p purpose="proof-highlight">macOS, Windows, and Linux</p>
<p purpose="proof-detail">One platform for your entire device fleet, regardless of OS mix.</p>
</div>
</div>
</div>
</div><%/* proof-strip */%>
<div purpose="below-fold-container">
<%/* ─── PLATFORM CALLOUT ───────────────────────────────── */%>
<div purpose="platform-section">
<div purpose="section-divider"></div>
<h2>One platform. Every OS.</h2>
<p purpose="platform-body">Fleet manages software across macOS, Windows, and Linux from a single place. The same patch policies, the same catalog, the same automation, whether you're supporting a Mac-first team, a Windows shop, or a mixed environment with Linux servers.</p>
<div purpose="os-pills">
@@ -167,7 +166,6 @@
<%/* ─── INTEGRATIONS ───────────────────────────────────── */%>
<div purpose="integrations-section">
<div purpose="section-divider"></div>
<h2>Works with the tools you already use.</h2>
<p purpose="integrations-body">Use policy automations to trigger app updates, create tickets in Jira or Zendesk, or generate webhooks to connect Fleet to your existing workflows. Patching fits into the process you already have.</p>
<div purpose="integration-pills">