Website: Update homepage hero & content (#32570)

Closes: https://github.com/fleetdm/confidential/issues/12074
Closes: https://github.com/fleetdm/confidential/issues/12018

Changes:
- Updated the homepage hero to have a quote from Wes Whetstone
- Updated the homepage layout to match the latest wireframes
This commit is contained in:
Eric 2025-09-03 22:12:24 -05:00 committed by GitHub
parent 990eb3041b
commit 2cb83a1cd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 200 additions and 252 deletions

View file

@ -20,12 +20,58 @@ module.exports = {
description: 'Requesting user is logged in, so redirect to the internal welcome page.'
},
badConfig: {
responseType: 'badConfig'
},
},
fn: async function () {
return {};
if (!_.isObject(sails.config.builtStaticContent) || !_.isArray(sails.config.builtStaticContent.testimonials) || !sails.config.builtStaticContent.compiledPagePartialsAppPath) {
throw {badConfig: 'builtStaticContent.testimonials'};
}
// Get testimonials for the <scrolalble-tweets> component.
let testimonialsForScrollableTweets = _.clone(sails.config.builtStaticContent.testimonials);
// Specify an order for the testimonials on this page using the last names of quote authors
let testimonialOrderForThisPage = [
'Bart Reardon',
'Scott MacVicar',
'Mike Meyer',
'Luis Madrigal',
'Tom Larkin',
'Kenny Botelho',
'Erik Gomez',
'Chandra Majumdar',
'Eric Tan',
'Matt Carr',
'Nico Waisman',
'Dan Grzelak',
'Philip Chotipradit',
'Roger Cantrell',
'Chayce O\'Neal'
];
// Filter the testimonials by product category
testimonialsForScrollableTweets = _.filter(testimonialsForScrollableTweets, (testimonial)=>{
return _.contains(testimonial.productCategories, 'Device management') && _.contains(testimonialOrderForThisPage, testimonial.quoteAuthorName);
});
testimonialsForScrollableTweets.sort((a, b)=>{
if(testimonialOrderForThisPage.indexOf(a.quoteAuthorName) === -1){
return 1;
} else if(testimonialOrderForThisPage.indexOf(b.quoteAuthorName) === -1) {
return -1;
}
return testimonialOrderForThisPage.indexOf(a.quoteAuthorName) - testimonialOrderForThisPage.indexOf(b.quoteAuthorName);
});
return {
testimonialsForScrollableTweets
};
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View file

@ -21,7 +21,7 @@
text-transform: uppercase;
font-family: 'Roboto Mono';
font-weight: 400;
font-size: 14px;
font-size: 16px;
line-height: 120%;
color: @core-fleet-black-75;
margin-bottom: 8px;
@ -48,11 +48,11 @@
}
[purpose='homepage-hero'] {
padding-top: 120px;
padding-top: 64px;
padding-left: 64px;
padding-bottom: 120px;
max-width: 1200px;
height: 498px;
height: 448px;
}
[purpose='ticker-container'] {
overflow: hidden;
@ -82,12 +82,21 @@
}
}
[purpose='hero-text'] {
max-width: 474px;
max-width: 500px;
text-align: left;
h1 {
max-width: 640px;
margin-bottom: 16px;
}
h4 {
color: #515774;
font-feature-settings: 'salt' on, 'ss01' on, 'ss02' on;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
text-transform: uppercase;
}
p {
max-width: 412px;
margin-bottom: 32px;
@ -99,6 +108,43 @@
}
}
[purpose='hero-quote-author'] {
margin-top: 24px;
margin-bottom: 32px;
[purpose='hero-quote-profile-image'] {
margin-right: 16px;
img {
height: 72px;
}
}
[purpose='quote-author-info'] {
[purpose='quote-author-name'] {
color: var(--text-text-brand, #192147);
/* Body XS (bold) */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 18px; /* 150% */
margin-bottom: 0px;
}
[purpose='quote-author-title'] {
color: var(--text-text-primary, #515774);
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px;
margin-bottom: 0px;
}
}
}
[purpose='button-row'] {
display: flex;
flex-direction: row;
@ -116,7 +162,7 @@
border-radius: 8px;
padding-left: 32px;
padding-right: 32px;
height: 40px;
height: 44px;
display: flex;
justify-content: center;
align-items: center;
@ -147,7 +193,7 @@
padding-left: 60px;
padding-right: 60px;
margin-top: 24px;
margin-bottom: 120px;
margin-bottom: 64px;
[parasails-component='logo-carousel'] {
margin-bottom: 0px;
}
@ -293,7 +339,7 @@
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 128px;
margin-bottom: 160px;
[purpose='feature-image'] {
img {
width: 578px;
@ -337,7 +383,7 @@
flex-direction: row;
justify-content: center;
margin-top: 48px;
margin-bottom: 48px;
margin-bottom: 120px;
text-decoration: none;
h4 {
color: #192147;
@ -389,65 +435,18 @@
align-items: center;
}
}
[purpose='quote'] {
max-width: 580px;
margin-left: auto;
margin-right: auto;
padding-bottom: 80px;
padding-top: 32px;
[purpose='testimonials-header'] {
margin-top: 80px;
text-align: center;
text-decoration: none;
}
[purpose='quote-logo'] {
height: 32px;
// margin-bottom: 16px;
margin-left: auto;
margin-right: auto;
}
[purpose='quote-text'] {
color: @core-fleet-black-75;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 400;
line-height: 150%;
margin-bottom: 0px;
padding: 24px 0px;
}
[purpose='quote-attribution'] {
display: flex;
flex-direction: column;
align-items: center;
[purpose='quote-author-image'] {
height: 48px;
margin-bottom: 16px;
border-radius: 50%;
}
[purpose='name'] {
color: @core-fleet-black-75;
text-align: center;
font-size: 12px;
font-weight: 700;
line-height: 150%;
margin-bottom: 0px;
}
[purpose='job-title'] {
color: @core-fleet-black-75;
margin-bottom: 0px;
font-size: 12px;
font-weight: 400;
line-height: 150%;
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
margin-top: 40px;
}
}
[purpose='comparison-section'] {
padding-bottom: 80px;
@ -927,8 +926,8 @@
}
[purpose='homepage-hero'] {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
padding-top: 64px;
padding-bottom: 32px;
height: 418px;
}
[purpose='hero-background-image'] {
@ -1114,13 +1113,41 @@
}
[purpose='hero-logos'] {
margin-bottom: 64px;
}
[purpose='statistics'] {
margin-bottom: 80px;
[purpose='statistics-column'] {
display: flex;
flex-direction: column;
width: 227px;
}
[purpose='countries'] {
border-right: none;
padding: 16px 32px;
}
[purpose='customers'] {
padding: 16px 32px;
}
[purpose='devices'] {
padding: 16px 32px;
}
[purpose='response-time'] {
padding: 16px 32px;
}
}
[purpose='hero-text'] {
min-width: unset;
p {
max-width: 465px;
}
[purpose='button-row'] {
[purpose='cta-button'] {
width: 45%;
}
}
}
[purpose='page-section'] {
margin-bottom: 80px;
@ -1154,36 +1181,6 @@
}
}
[purpose='quote'] {
padding-bottom: 32px;
}
[purpose='statistics'] {
[purpose='statistics-column'] {
display: flex;
flex-direction: column;
width: 227px;
}
[purpose='countries'] {
border-right: none;
padding: 16px 32px;
}
[purpose='customers'] {
padding: 16px 32px;
}
[purpose='devices'] {
padding: 16px 32px;
}
[purpose='response-time'] {
padding: 16px 32px;
}
}
[purpose='three-column-features'] {
margin-bottom: 120px;
}
@ -1289,9 +1286,6 @@
h1 {
font-size: 32px;
}
h4 {
font-size: 14px;
}
[purpose='option-container'] {
height: 38.4px;
}
@ -1317,6 +1311,11 @@
[purpose='hero-text'] {
width: 100%;
max-width: 100%;
[purpose='button-row'] {
[purpose='cta-button'] {
width: unset;
}
}
}
[purpose='feature-with-image'] {
flex-direction: column;
@ -1469,9 +1468,9 @@
font-size: 28px;
line-height: 120%;
}
h4 {
font-size: 12px;
}
// h4 {
// font-size: 12px;
// }
[purpose='announcement-banner'] {
br {
display: block;
@ -1490,8 +1489,7 @@
padding-top: 44px;
padding-left: 16px;
padding-right: 17px;
padding-bottom: 187px;
height: 520px;
padding-bottom: 217px;
[purpose='option-container'] {
height: 33.6px;
}

View file

@ -6,37 +6,19 @@
<div class="d-flex flex-row justify-content-start justify-content-sm-center justify-content-md-start align-items-start">
<%/* Hero text */%>
<div purpose="hero-text" class="d-flex flex-column justify-content-start">
<h1>One agent for <br>
<div purpose="ticker-container" class="d-flex align-items-center flex-row text-nowrap">
every
<div purpose="option-container" class="pl-2 d-flex flex-column">
<span purpose="hero-ticker-option" class="visible">OS</span>
<span purpose="hero-ticker-option">audit</span>
<span purpose="hero-ticker-option">script</span>
<span purpose="hero-ticker-option">config</span>
<span purpose="hero-ticker-option">question</span>
<span purpose="hero-ticker-option">laptop</span>
<span purpose="hero-ticker-option">desktop</span>
<span purpose="hero-ticker-option">phone</span>
<span purpose="hero-ticker-option">server</span>
<span purpose="hero-ticker-option">cloud instance</span>
<span purpose="hero-ticker-option">container</span>
<span purpose="hero-ticker-option">tablet</span>
<span purpose="hero-ticker-option">hospital</span>
<span purpose="hero-ticker-option">factory</span>
<span purpose="hero-ticker-option">report</span>
<span purpose="hero-ticker-option">new hire</span>
<span purpose="hero-ticker-option">offboard</span>
<span purpose="hero-ticker-option">employee</span>
<span purpose="hero-ticker-option">agent</span>
<span purpose="hero-ticker-option">robot</span>
<span purpose="hero-ticker-option">satellite</span>
<span purpose="hero-ticker-option">telescope</span>
<span purpose="hero-ticker-option">computer</span>
</div>
</div>
<h4>Open device management</h4>
<h1>“I just moved 13,000<br> Macs to Fleet”
</h1>
<p>Replace the sprawl with lightning fast device management that puts you back in control.</p>
<div purpose="hero-quote-author" class="d-flex flex-row align-items-center">
<div purpose="hero-quote-profile-image">
<img alt="Wes Whetstone" src="/images/homepage-hero-wes-whetstone-86x72@2x.png">
</div>
<div purpose="quote-author-info">
<p purpose="quote-author-name">Wes Whetstone</p>
<p purpose="quote-author-title">Client Platform Engineer at Stripe</p>
</div>
</div>
<div purpose="button-row" class="d-flex justify-content-start align-items-center">
<a purpose="cta-button" href="/contact">Get a demo</a>
<a purpose="video-button" @click="clickOpenVideoModal('fleet-in-three-minutes')"><img alt="Play" class="d-inline" src="/images/icon-play-video-32x32@2x.png">See Fleet in action<span>3 mins</span></a>
@ -50,83 +32,39 @@
<div purpose="hero-logos" class="mx-auto">
<logo-carousel></logo-carousel>
</div>
<a purpose="statistics" class="d-flex" href="/testimonials" no-underline>
<div purpose="statistics-column">
<div purpose="customers" class="d-none d-sm-block">
<h4>100+</h4>
<p>customers</p>
</div>
<div purpose="countries" class="d-block d-sm-none">
<h4>90+</h4>
<p>countries</p>
</div>
<div purpose="devices">
<h4>2,000,000+</h4>
<p>computing devices</p>
</div>
</div>
<div purpose="statistics-column">
<div purpose="countries" class="d-none d-sm-block">
<h4>90+</h4>
<p>countries</p>
</div>
<div purpose="customers" class="d-block d-sm-none">
<h4>100+</h4>
<p>customers</p>
</div>
<div purpose="response-time">
<h4>8 minutes</h4>
<p>avg support response time</p>
</div>
</div>
</a>
<%/* Homepage content */%>
<div purpose="homepage-content" class="container">
<div purpose="page-section">
<div purpose="homepage-text-block" class="mt-0">
<h2>Everything in one place</h2>
<p>Manage devices consistently in a single, open platform for Apple, Linux, and Windows.</p>
</div>
<div purpose="feature-cards" class="card-deck">
<a purpose="feature-card" class="card" href="/device-management">
<div purpose="card-content">
<h5>Multi-platform MDM</h5>
<p>Remotely manage, and protect laptops and mobile devices.</p>
</div>
<div purpose="card-chevron">
<svg purpose="chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</a>
<a purpose="feature-card" class="card" href="/orchestration">
<div purpose="card-content">
<h5>Orchestration</h5>
<p>Automate tasks across devices, from app installs to scripts.</p>
</div>
<div purpose="card-chevron">
<svg purpose="chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</a>
<a purpose="feature-card" class="card" href="/software-management">
<div purpose="card-content">
<h5>Software management</h5>
<p>Inventory, patch, and manage installed software.</p>
</div>
<div purpose="card-chevron">
<svg purpose="chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</a>
<a purpose="feature-card" class="card" href="/announcements/large-gaming-company-enhances-server-observability-with-fleet">
<div purpose="card-content">
<h5>Security</h5>
<p>Monitor activity, spot anomalies, and get situational awareness.</p>
</div>
<div purpose="card-chevron">
<svg purpose="chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</a>
<a purpose="feature-card" class="card" href="/announcements/vehicle-manufacturer-transitions-to-fleet-for-endpoint-security">
<div purpose="card-content">
<h5>Vulnerability management</h5>
<p>Detect, prioritize, and understand security risks and flaws.</p>
</div>
<div purpose="card-chevron">
<svg purpose="chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</a>
<a purpose="feature-card" class="card" href="https://www.linkedin.com/pulse/managing-santa-via-gitops-skip-sync-server-allen-houchins-3ni1c" target="_blank" no-icon>
<div purpose="card-content">
<h5>Binary authorization <span>Coming soon</span></h5>
<p>Only allow trusted, pre-approved software to run.</p>
</div>
<div purpose="card-chevron">
<svg purpose="chevron" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
<path d="M1.35712 1L5.64283 6L1.35712 11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</a>
</div>
<div purpose="page-section" class="mb-0">
<div purpose="homepage-text-block">
<h2>Freedom at every level</h2>
<p>Manage devices your way, without vendor limits. Fleet gives you full control and supports the choices that work for your organization.</p>
@ -138,8 +76,8 @@
<div purpose="feature-text">
<div purpose="feature-block">
<h5>All features, any deployment</h5>
<p>Let us host Fleet for you or deploy it yourself. You get the same experience either way.</p>
<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 purpose="feature-block">
<h5>UI, API, or GitOps</h5>
@ -153,52 +91,18 @@
</div>
<a purpose="statistics" class="d-flex" href="/testimonials" no-underline>
<div purpose="statistics-column">
<div purpose="customers" class="d-none d-sm-block">
<h4>100+</h4>
<p>customers</p>
</div>
<div purpose="countries" class="d-block d-sm-none">
<h4>90+</h4>
<p>countries</p>
</div>
<div purpose="devices">
<h4>2,000,000+</h4>
<p>computing devices</p>
</div>
</div>
<div purpose="statistics-column">
<div purpose="countries" class="d-none d-sm-block">
<h4>90+</h4>
<p>countries</p>
</div>
<div purpose="customers" class="d-block d-sm-none">
<h4>100+</h4>
<p>customers</p>
</div>
<div purpose="response-time">
<h4>8 minutes</h4>
<p>avg support response time</p>
</div>
</div>
</a>
<a purpose="quote" class="d-block" href="/announcements/consolidate-multiple-tools-with-fleet" no-underline>
<img purpose="quote-logo" alt="Stripe logo" src="/images/social-proof-logo-stripe-67x32@2x.png">
<p purpose="quote-text">
Fleet helped us avoid being forced to the cloud by our current MDM provider. We were able to migrate everything over to Fleet a few weeks ahead of our renewal, and now Stripe is in control.
</p>
<div purpose="quote-attribution">
<img alt="Scott MacVicar" purpose="quote-author-image" src="/images/testimonial-author-scott-macvicar-100x100@2x.png">
<p purpose="name">Scott MacVicar</p>
<p purpose="job-title">Head of Developer Infrastructure and Corporate Technology</p>
</div>
</a>
<div purpose="testimonials-header">
<h2>What people are saying</h2>
</div>
</div>
</div>
<scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
<div purpose="homepage-content" class="container">
<div purpose="page-section">
<div purpose="comparison-section">
<h2>How does Fleet compare?</h2>
<p>Considering a move to Fleet? See how we compare:</p>
<h2>Moving to Fleet?</h2>
<p>See how Fleet compares with your other options.</p>
<div purpose="comparison-table-switch" class="d-flex d-sm-none">
<div purpose="comparison-table-switch-option" :class="[comparisonTableMode === 'it' ? 'selected' : '']" @click="clickSwitchComparisonMode('it')">IT</div>
<div purpose="comparison-table-switch-option" :class="[comparisonTableMode === 'security' ? 'selected' : '']" @click="clickSwitchComparisonMode('security')">Security</div>