Q4 landing page update (#24694)

Closes https://github.com/fleetdm/confidential/issues/9117

Updated /software-management and /observability landing pages to align
with Fleet's positioning and narrative.

Next steps when Mike T returns from PTO:

- Find a home for the content we removed
https://github.com/fleetdm/fleet/issues/24701
- Improve the software management hero to focus on differentiators
https://github.com/fleetdm/fleet/issues/24700
- Remove marketing fluff from /observability for security engineers
https://github.com/fleetdm/fleet/issues/24640

---------

Co-authored-by: Eric <eashaw@sailsjs.com>
This commit is contained in:
Mike Thomas 2024-12-13 08:54:17 +09:00 committed by GitHub
parent 42186b1ad9
commit 4551d11b73
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 104 additions and 137 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

View file

@ -16,7 +16,7 @@
h3 {
font-size: 32px;
font-weight: 800;
line-height: 38.4px;
line-height: @heading-line-height;
margin-bottom: 24px;
}
h4 {
@ -51,7 +51,7 @@
margin-right: auto;
}
[purpose='page-content'] {
max-width: 960px;
max-width: 1072px;
}
[purpose='page-headline'] {
padding-bottom: 80px;
@ -61,12 +61,11 @@
padding-bottom: 80px;
}
[purpose='hero-image'] {
max-width: 360px;
max-width: 528px;
img {
padding-left: 25px;
max-width: 100%;
max-height: 100%;
width: 360px;
width: 528px;
}
}
[purpose='hero-text'] {
@ -383,7 +382,7 @@
[purpose='feature-item'] {
padding-right: 24px;
padding-left: 24px;
margin-bottom: 64px;
margin-bottom: 80px;
h5 {
font-size: 16px;
line-height: 1.2;
@ -420,7 +419,10 @@
[purpose='feature'] {
margin-bottom: 160px;
h3 {
margin-bottom: 24px;
font-size: 24px;
font-weight: 800;
line-height: @heading-line-height;
margin-bottom: 32px;
}
}
[purpose='feature'].flex-column {
@ -434,11 +436,11 @@
}
}
[purpose='feature-image'] {
max-width: 380px;
max-width: 528px;
img {
max-width: 100%;
max-height: 100%;
width: 380px;
width: 528px;
}
}
[purpose='feature-text'] {
@ -448,7 +450,7 @@
[purpose='feature-footnote'] {
max-width: 480px;
font-size: 12px;
padding-top: 60px;
padding-top: 80px;
line-height: 1.5;
}
@ -479,6 +481,10 @@
}
}
[purpose='feature-link'] {
padding-top: 32px;
}
[purpose='tweets-container'] {
margin-top: 200px;
max-width: 960px;
@ -560,7 +566,7 @@
[purpose='feature-item'] {
padding-right: 24px;
padding-left: 24px;
margin-bottom: 64px;
margin-bottom: 80px;
p {
font-size: 14px;
font-weight: 400;
@ -604,14 +610,7 @@
width: unset;
margin-left: auto;
}
[purpose='button-row'] {
max-width: 100%;
[purpose='cta-button'] {
margin-right: 0px;
width: 100%;
margin-bottom: 24px;
}
}
[purpose='calendar-section'] {
padding: 0px 32px 40px 32px;
}
@ -695,6 +694,9 @@
}
@media (max-width: 575px) {
h1 {
font-size: 36px;
}
[purpose='page-container'] {
padding-left: 40px;
padding-right: 40px;
@ -703,6 +705,15 @@
padding-left: 40px;
padding-right: 40px;
}
[purpose='button-row'] {
max-width: 100%;
white-space: nowrap;
[purpose='cta-button'] {
margin-right: 0px;
width: 100%;
margin-bottom: 24px;
}
}
[purpose='feature-image'] {
img {
max-width: 100%;
@ -754,9 +765,7 @@
}
}
@media (max-width: 472px) {
h1 {
font-size: 36px;
}
[purpose='testimonial-videos'] {
flex-direction: column;
}

View file

@ -3,12 +3,12 @@
<div purpose="page-content" class="mx-auto">
<div purpose="hero">
<div purpose="page-headline">
<h4>Observability <%= ['eo-security', 'vm'].includes(pagePersonalization) ? 'for security' : ['eo-it', 'mdm'].includes(pagePersonalization) ? 'for IT' : '' %></h4>
<h4>Observability</h4>
<h1><%= pagePersonalization==='eo-security'? 'Deeper, faster visibility for every OS' : 'Talk to your computers'%></h1>
</div>
<div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
<div purpose="hero-image">
<img alt="A device verifying compliance for every endpoint" src="/images/endpoint-operations-hero-image-380x380@2x.png">
<img alt="A device verifying compliance for every endpoint" src="/images/observability-hero-image-528x428@2x.png">
</div>
<div purpose="hero-text">
<% if(['eo-security', 'vm'].includes(pagePersonalization)) { %>
@ -16,17 +16,17 @@
<p>Build the agent in "read-only" mode or enable remote scripting to automatically mitigate misconfigurations and vulnerabilities.</p>
<strong>Pulse check anything</strong>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
<strong>Ship data to any platform</strong>
<p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<strong>Data portability</strong>
<p>Ship data to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<% } else { %>
<strong>Automate anything</strong>
<p>Remotely run scripts and prompts to complete tasks on every kind of computer, including Linux.</p>
<strong>Pulse check anything</strong>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
<strong>Ship data to any platform</strong>
<p>Ship logs to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<strong>Deep context from your environment</strong>
<p>Get data down to the chip level on every endpoint to help you make the right decisions from IT to InfoSec and beyond.</p>
<strong>Data portability</strong>
<p>Ship data to any platform like Splunk, Snowflake, or <a href="/docs/using-fleet/log-destinations">any streaming infrastructure</a> like AWS Kinesis and Apache Kafka.</p>
<% }%>
<div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-start align-items-center">
<a purpose="cta-button" href="/contact">Take a tour</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
</div>
@ -70,23 +70,6 @@
</div>
<logo-carousel></logo-carousel>
<% if(!pagePersonalization || ['mdm', 'eo-it'].includes(pagePersonalization)){%>
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
<div purpose="feature-text" class="d-flex flex-column">
<h3>Automate anything</h3>
<p>Remote-control IT tasks on every kind of computer even you, Linux.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Write and run scripts remotely, report progress, and replay queued up tasks on computers that went offline.</p>
<p>Optionally integrate Google Calendar to make changes when certain users devices are actually free.</p>
</div>
</div>
<div purpose="feature-image">
<img alt="Ship data to any platform" src="/images/device-management-clickops-or-devops-380x280@2x.png">
</div>
</div>
<% } %>
<div purpose="feature-headline" class="mr-auto">
<h3>Pulse check anything</h3>
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
@ -135,18 +118,37 @@
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
<div purpose="feature-text" class="d-flex flex-column">
<h3>Ship data to any platform</h3>
<p>Export anything. Ship data to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.</p>
<h3>On-demand data</h3>
<p>Get device context down to the chip level on every endpoint to help you make the right decisions.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Gather real-time data by executing lightweight queries across all devices.</p>
<p>Access over 300 tables of system state data. Use presets or create your own queries.</p>
</div>
<div purpose="feature-link">
<animated-arrow-button href="/tables">Explore data</animated-arrow-button>
</div>
</div>
<div purpose="feature-image">
<img alt="On-demand data" src="/images/feature-image-on-demand-data-528x377@2x.png">
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="feature-image">
<img alt="Data portability" src="/images/feature-image-data-portability-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Data portability</h3>
<p>Ship data to any platform like Splunk, Snowflake, or any streaming infrastructure like AWS Kinesis and Apache Kafka.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Extract data and correlate it with your log aggregator, SIEM, or data lake.</p>
<p>Ease your logging burden, pull the data you need.</p>
</div>
</div>
<div purpose="feature-image">
<img alt="Ship data to any platform" src="/images/endpoint-ops-feature-image-1-381x282@2x.png">
</div>
</div>
<%/* Implement “zero trust” faster section */%>
<% if(!pagePersonalization || ['vm', 'eo-security'].includes(pagePersonalization)) {%>
<div purpose="page-section">
<div purpose="feature-headline" style="max-width: 580px;">
<h3>“Zero” trust, fewer tickets</h3>
@ -174,13 +176,14 @@
</div>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="feature-image">
<img alt="Ship data to any platform" src="/images/endpoint-ops-feature-image-2-380x380@2x.png">
<img alt="Osquery on easy mode" src="/images/endpoint-ops-feature-image-2-380x380@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Osquery on easy mode</h3>
<p>Accelerate deployment and get more out of osquery. You dont need to be an osquery expert to get the answers you need from your <%= ['vm', 'eo-security'].includes(pagePersonalization) ? 'endpoints' : 'devices' %>.</p>
<p>Accelerate deployment and get more out of osquery. You dont need to be an osquery expert to get the answers you need from your endpoints.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Remotely disable/enable agent features, choose plugins, and keep osquery up to date.</p>
<p>Import community queries from other security teams at top brands like Palantir and Fastly.</p>
@ -190,7 +193,6 @@
</div>
</div>
<% if(!pagePersonalization || ['vm', 'eo-security'].includes(pagePersonalization)) {%>
<div purpose="feature-headline" class="mr-auto">
<h3>Open security tooling</h3>
<p>Consolidate your security tooling on top of open data standards like YAML, SQL, and JSON.</p>
@ -253,7 +255,7 @@
<div purpose="section-heading" class="text-center">
<h4>Observability</h4>
<h3><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h3>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-md-row flex-column justify-content-center align-items-center mx-auto">
<div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/register">Start now</a>
<animated-arrow-button href="/contact">Talk to an engineer</animated-arrow-button>
</div>

View file

@ -59,61 +59,47 @@
<p purpose="job-title">CIO & Chief Security Officer at Flock Safety</p>
</div>
</div>
<div purpose="feature-slides">
<div purpose="feature-switch" class="d-flex flex-md-row flex-column justify-content-md-center justify-content-start">
<div purpose="feature-option" :class="[visibleFeature === 'mitigate-cves-automatically' ? 'active' : '']" @click="clickSwitchFeature('mitigate-cves-automatically')">
Mitigate CVEs automatically
</div>
<div purpose="feature-option" :class="[visibleFeature === 'on-demand-data' ? 'active' : '']" @click="clickSwitchFeature('on-demand-data')">
On-demand data
</div>
<div purpose="feature-option" :class="[visibleFeature === 'out-of-the-box-reporting' ? 'active' : '']" @click="clickSwitchFeature('out-of-the-box-reporting')">
Out-of-the-box reporting
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-center mx-auto align-items-center">
<div purpose="feature-image">
<img alt="Deploy software your own way" src="/images/feature-image-fleet-maintained-software-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Deploy software your own way</h3>
<p>Deploy software from any source using the method that works best for you—whether it's through the UI, API, or GitOps.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Install from a built-in catalog of Fleet-maintained apps without the need for additional configuration.</p>
<p>Upload any third-party software as a custom package to deploy all of the tools your end users need.</p>
<p>Manage app deployments and updates for your computers and mobile devices from app stores.</p>
</div>
</div>
<div purpose="feature-slide" :class="[visibleFeature === 'mitigate-cves-automatically' ? '' : 'invisible']" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-start">
<div purpose="feature-image">
<img alt="Mitigate CVEs automatically" src="/images/software-management-feature-image-1-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Mitigate CVEs automatically</h3>
<p>Build automations that close tickets or mitigate vulnerabilities by updating or removing software and running custom scripts.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Automatically detect when old vulnerabilities are reintroduced, or mitigations falter.</p>
<p>Track and mitigate zero days, with live queries and policies, even before they're officially published as CVEs.</p>
<p>Only create tickets for vulnerabilities that affect your environment. Automate ticketing with Jira, ServiceNow, or integrate your own system.</p>
<p>Deep-link live data with internal IT and platform teams.</p>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-center">
<div purpose="feature-text" class="d-flex flex-column">
<h3>Automate patch management</h3>
<p>Take the guesswork out of keeping devices up-to-date and secure by asking yes or no questions tied to automations.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Use policy automations to trigger app updates, execute scripts, or create tickets in Jira and Zendesk.</p>
<p>Generate webhooks to integrate with your favorite tools and systems.</p>
<p>Optionally integrate Google Calendar to schedule time for your users to update software when its convenient for them.</p>
</div>
</div>
<div purpose="feature-slide" :class="[visibleFeature === 'out-of-the-box-reporting' ? '' : 'invisible']" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-start">
<div purpose="feature-image">
<img alt="Deep context from the environment" src="/images/software-management-feature-image-2-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Deep context from the environment</h3>
<p>Fleet gives you data down to the chip level on every endpoint to help you make sense of which vulnerabilities to prioritize.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Automate prioritization with an admin-level agent that has visibility down to the chipset of any endpoint</p>
<p>Access over 300 tables of system state data. Use presets or create your own queries.</p>
<p>Automatically match CVEs to your operating systems, apps, extensions, browser plugins, Python libraries, everything.</p>
</div>
<div purpose="feature-link">
<animated-arrow-button href="/tables">Explore data</animated-arrow-button>
</div>
</div>
<div purpose="feature-image">
<img alt="Automate patch management" src="/images/feature-image-automate-patch-management-528x377@2x.png">
</div>
<div purpose="feature-slide" :class="[visibleFeature === 'on-demand-data' ? '' : 'invisible']" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-start">
<div purpose="feature-image">
<img alt="Report what matters" src="/images/software-management-feature-image-3-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Report what matters</h3>
<p>Let's face it, most built-in graphs leave you wanting more. Report MTTR and any other custom metrics exactly the way you want to using fresh data from real computers.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Track any “celebrity” CVE across every OS, every cloud, and every device, and show how quickly it was mitigated.</p>
<p>Avoid distracting your CISO with bloated reports. Only communicate facts important to your organization's KPIs. Show real-time mitigation progress (%) or sync with your favorite data tool like Microsoft BI.</p>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-center mx-auto align-items-center">
<div purpose="feature-image">
<img alt="The right software at the right moment" src="/images/feature-image-self-service-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>The right software at the right moment</h3>
<p>Use self-service to keep employees productive and secure with software curated to their needs.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Install organization-approved software for macOS, Windows, and Linux.</p>
<p>Quickly deliver software for teams of any size, tailored to small groups or the entire organization.</p>
</div>
</div>
</div>
@ -130,36 +116,6 @@
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-center mx-auto align-items-center">
<div purpose="feature-image">
<img alt="Up-to-date data without scans" src="/images/software-management-feature-image-4-528x377@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Up-to-date data without scans</h3>
<p>Traditional network vulnerability scans can clog your network and even haunt your printers with pages full of wingdings. Fleet does things differently.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Eliminate the risk of side effects from scanning the network.</p>
<p>Lightweight enough for the most brittle environments (OT, data centers, embedded/BTS, low-latency gaming servers).</p>
<p>Quickly pull data about important CVEs and zero days during an incident or audit.</p>
</div>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-center">
<div purpose="feature-text" class="d-flex flex-column">
<h3>Untangle your security stack</h3>
<p>Use open data and APIs to connect your vulnerability solution with osquery, the agent you might already have deployed.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Normalize asset management data and software inventories from multiple tools and operating systems.</p>
<p>Help teams work on vulnerabilities that have actually been exploited (CISA KEVs) or have a high probability of being exploited (EPSS), or whatever is important in your environment.</p>
<p>Process CVEs across cloud and non-cloud assets in a single platform and see who's responsible for what.</p>
</div>
</div>
<div purpose="feature-image">
<img alt="Untangle your security stack" src="/images/software-management-feature-image-5-528x377@2x.png">
</div>
</div>
</div><%// End of [purpose="page-content"]%>
</div><%// End of [purpose="page-container"]%>
<div purpose="tweets-container" class="d-flex flex-column justify-content-center">