mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Update homepage content (#16169)
Closes: #16161 Changes: - Updated the homepage to match the latest wireframes.
This commit is contained in:
Eric
GitHub
parent
16a413af0d
commit
fa6627ace9
3 changed files with 84 additions and 126 deletions
43
website/assets/styles/pages/homepage.less
vendored
43
website/assets/styles/pages/homepage.less
vendored
|
|
@ -96,6 +96,13 @@
|
|||
height: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
width: 100%;
|
||||
img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
max-width: 1200px;
|
||||
|
|
@ -146,8 +153,8 @@
|
|||
}
|
||||
[purpose='homepage-text-block'] {
|
||||
margin-top: 160px;
|
||||
margin-bottom: 160px;
|
||||
max-width: 872px;
|
||||
margin-bottom: 120px;
|
||||
max-width: 642px;
|
||||
h2 {
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
|
|
@ -194,7 +201,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 100px;
|
||||
margin-bottom: 160px;
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
|
|
@ -658,8 +665,6 @@
|
|||
[purpose='hero-logos'] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 120px;
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 28px;
|
||||
}
|
||||
|
|
@ -696,6 +701,14 @@
|
|||
padding-right: 0px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='bottom-cta'] {
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
|
@ -711,6 +724,11 @@
|
|||
height: 726px;
|
||||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
max-width: 1200px;
|
||||
padding-right: 60px;
|
||||
|
|
@ -1060,6 +1078,11 @@
|
|||
height: 304px;
|
||||
}
|
||||
}
|
||||
[purpose='bottom-cta'] {
|
||||
h1 {
|
||||
font-size: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
|
|
@ -1197,6 +1220,11 @@
|
|||
height: calc(~'9/16 * 95vw');
|
||||
}
|
||||
}
|
||||
[purpose='bottom-cta'] {
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
|
|
@ -1248,6 +1276,11 @@
|
|||
left: 85px;
|
||||
}
|
||||
}
|
||||
[purpose='bottom-cta'] {
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
2
website/views/layouts/layout.ejs
vendored
2
website/views/layouts/layout.ejs
vendored
|
|
@ -254,7 +254,7 @@
|
|||
<iframe src="//ghbtns.com/github-btn.html?user=fleetdm&repo=fleet&type=watch&count=true"
|
||||
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
|
||||
</span>
|
||||
<a purpose="glass-header-btn" class="align-items-center d-flex" href="/try-fleet/explore-data" >Try it out</a>
|
||||
<a purpose="glass-header-btn" class="align-items-center d-flex" href="/pricing" >Try it out</a>
|
||||
<% if(_.has(me, 'id')) {%>
|
||||
<a purpose="header-nav-btn" href="/logout" class="justify-content-end pl-4 py-2 text-decoration-none">Log out</a>
|
||||
<% }%>
|
||||
|
|
|
|||
165
website/views/pages/homepage.ejs
vendored
165
website/views/pages/homepage.ejs
vendored
|
|
@ -10,8 +10,8 @@
|
|||
<h1>Focus on data, not vendors</h1>
|
||||
<p>Replace the sprawl you inherited with open-source code that works the way you want.</p>
|
||||
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center">
|
||||
<a purpose="cta-button" href="/try-fleet">Try it out</a>
|
||||
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Show me</a>
|
||||
<a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
|
||||
<a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,13 +22,13 @@
|
|||
<div purpose="hero-logos" class="mx-auto d-flex flex-column align-items-center justify-content-center">
|
||||
<%/* >991px logos all on one row */%>
|
||||
<div purpose="logo-column" class="w-100 flex-row d-lg-flex d-none justify-content-between align-items-center">
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" class="ml-auto" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery" class="ml-0 mr-auto" ><img purpose="snowflake-logo" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png">
|
||||
<img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-70x24@2x.png">
|
||||
<img purpose="fastly-logo" alt="Fastly logo" class="" src="/images/logo-fastly-75x30@2x.png">
|
||||
<img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png">
|
||||
<img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png">
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" class="mr-auto" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank" class="mr-0 ml-auto"><img purpose="segment-logo" alt="Segment logo" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
</div>
|
||||
<%/* >576px logos - two rows */%>
|
||||
<div purpose="logo-column" class="d-sm-flex d-none d-lg-none flex-row justify-content-between align-items-start align-items-md-center">
|
||||
|
|
@ -137,81 +137,49 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<%/* Supported platforms */%>
|
||||
<div purpose="supported-platforms" class="d-flex flex-column">
|
||||
<h2>An open API for every endpoint</h2>
|
||||
<div class="card-deck d-flex flex-row flex-wrap justify-content-center mx-auto">
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="Linux" src="/images/homepage-platform-greyscale-linux-41x48@2x.png">
|
||||
<p>Linux <br><span>(all distros)</span></p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="macOS" src="/images/homepage-platform-greyscale-macos-42x48@2x.png">
|
||||
<p>macOS</p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Windows" src="/images/homepage-platform-greyscale-windows-40x48@2x.png">
|
||||
<p>Windows</p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="ChromeOS" src="/images/homepage-platform-greyscale-chromeos-48x48@2x.png">
|
||||
<p>Chromebook</p>
|
||||
</div>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="AWS" src="/images/homepage-platform-greyscale-aws-54x48@2x.png">
|
||||
<p>AWS</p>
|
||||
</div>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="Google Cloud" src="/images/homepage-platform-greyscale-google-cloud-48x48@2x.png">
|
||||
<p>GCP</p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Azure" src="/images/homepage-platform-greyscale-azure-24x24@2x.png">
|
||||
<p>Azure <br><span>(Microsoft Cloud)</span></p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
|
||||
<p>Data centers</p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Containers" src="/images/homepage-platform-greyscale-docker-48x48@2x.png">
|
||||
<p>Containers</p>
|
||||
</div>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="IOT" src="/images/homepage-platform-greyscale-iot-38x48@2x.png">
|
||||
<p>IoT devices <br><span>(Linux-based)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="two-column-features" class="mx-auto">
|
||||
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center">
|
||||
<div purpose="feature" class="ml-sm-0">
|
||||
<img alt="Modular" src="/images/homepage-icon-modular-64x64@2x.png">
|
||||
<h5>As much or as little as you need</h5>
|
||||
<p>Fleet is lightweight and modular. Use it for security without MDM, and vice versa. You can turn off features you are not using.</p>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="Linux" src="/images/homepage-platform-greyscale-linux-41x48@2x.png">
|
||||
<p>Linux <br><span>(all distros)</span></p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature" class="mr-sm-0 mb-0">
|
||||
<img alt="Good neighbors" src="/images/homepage-icon-good-neighbors-64x64@2x.png">
|
||||
<h5>Good neighbors</h5>
|
||||
<p>Ready-to-use, enterprise-friendly integrations exist for Snowflake, Splunk, GitHub Actions, Vanta, Elastic, Jira, Zendesk, and more.</p>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="macOS" src="/images/homepage-platform-greyscale-macos-42x48@2x.png">
|
||||
<p>macOS</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center mb-0">
|
||||
<div purpose="feature" class="ml-sm-0">
|
||||
<img alt="Plays well with others" src="/images/homepage-icon-play-well-64x64@2x.png">
|
||||
<h5>Plays well with others</h5>
|
||||
<p>Fleet plays nicely with Munki, Chef, Puppet, and Ansible, as well as with security tools like Crowdstrike and SentinelOne.</p>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Windows" src="/images/homepage-platform-greyscale-windows-40x48@2x.png">
|
||||
<p>Windows</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature" class="mr-sm-0 mb-0">
|
||||
<img alt="One agent to rule them all" src="/images/homepage-icon-one-agent-64x64@2x.png">
|
||||
<h5>One agent to rule them all...</h5>
|
||||
<p>...but it’s ok if you have others. Fleet coexists peacefully with Rapid7 and other agent-based vulnerability scanners.</p>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="ChromeOS" src="/images/homepage-platform-greyscale-chromeos-48x48@2x.png">
|
||||
<p>Chromebook</p>
|
||||
</div>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="AWS" src="/images/homepage-platform-greyscale-aws-54x48@2x.png">
|
||||
<p>AWS</p>
|
||||
</div>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="Google Cloud" src="/images/homepage-platform-greyscale-google-cloud-48x48@2x.png">
|
||||
<p>GCP</p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Azure" src="/images/homepage-platform-greyscale-azure-24x24@2x.png">
|
||||
<p>Azure <br><span>(Microsoft Cloud)</span></p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Datacenters" src="/images/homepage-platform-greyscale-datacenters-48x48@2x.png">
|
||||
<p>Data centers</p>
|
||||
</div>
|
||||
<div purpose="supported-platform">
|
||||
<img alt="Containers" src="/images/homepage-platform-greyscale-docker-48x48@2x.png">
|
||||
<p>Containers</p>
|
||||
</div>
|
||||
<div purpose="supported-platform" class="">
|
||||
<img alt="IOT" src="/images/homepage-platform-greyscale-iot-38x48@2x.png">
|
||||
<p>IoT devices <br><span>(Linux-based)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -222,8 +190,8 @@
|
|||
</div>
|
||||
|
||||
<div purpose="three-column-features" class="mx-auto">
|
||||
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column align-items-start justify-content-center">
|
||||
|
||||
<div purpose="feature" class="ml-sm-0">
|
||||
<img alt="transparency" src="/images/homepage-icon-transparency-54x64@2x.png" class="mx-auto mx-sm-0">
|
||||
<h5>Scope transparency</h5>
|
||||
|
|
@ -241,63 +209,20 @@
|
|||
<h5>We value openness</h5>
|
||||
<p>Fleet's company <a href="/handbook">handbook</a> is public and open source. You can read about the <a href="/handbook/company#history">history of Fleet and osquery</a> and our commitment to improving the product.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div purpose="homepage-cards" class="d-flex flex-md-row flex-column justify-content-center">
|
||||
|
||||
<div purpose="homepage-card" class="card ml-md-0">
|
||||
<h3>Chat</h3>
|
||||
<p>Please join us in <a href="https://www.macadmins.org/">MacAdmins Slack</a> or in <a href="/slack">osquery Slack</a>.</p>
|
||||
<p>The Fleet community is full of <a href="https://fleetdm.com/handbook/company#empathy">kind and helpful people</a>. Whether or not you are a paying customer, if you need help, just ask.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="homepage-card" class="card mr-md-0">
|
||||
<h3>Contribution</h3>
|
||||
<p>Contributions are welcome, whether you answer questions on <a href="https://github.com/fleetdm/fleet#chat">Slack</a> / <a href="https://github.com/fleetdm/fleet/issues">GitHub</a> / <a href="https://stackoverflow.com/search?q=osquery">StackOverflow</a> / <a href="https://www.linkedin.com/company/fleetdm/">LinkedIn</a> / <a href="https://twitter.com/fleetctl">Twitter</a>, improve the documentation or <a href="https://github.com/fleetdm/fleet/tree/main/website">website</a>, write a tutorial, give a talk at a conference or local meetup, give an <a href="/podcasts">interview on a podcast</a>, troubleshoot reported issues, or <a href="/docs/contributing">submit a patch</a>.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<%/* Bottom gradient */%>
|
||||
<div purpose="bottom-gradient">
|
||||
<div purpose="homepage-content" class="container">
|
||||
<div purpose="three-column-features" class="mx-auto">
|
||||
<h2>Ready to get started?</h2>
|
||||
<div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center">
|
||||
<div purpose="feature" class="ml-sm-0">
|
||||
<img alt="Explore data" src="/images/homepage-icon-explore-data-64x64@2x.png">
|
||||
<h5>Explore data</h5>
|
||||
<p>Check out the <a href="/tables">table reference</a> documentation to see what kind of data you can use Fleet to gather.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature">
|
||||
<img alt="Easy to deploy" src="/images/homepage-icon-deploy-64x64@2x.png">
|
||||
<h5>Production deployment</h5>
|
||||
<p>Fleet is easy to <a href="/docs/using-fleet/learn-how-to-use-fleet">spin up for yourself</a>. Or you can have us <a href="/pricing">host it for you</a>. Premium features are available either way.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature" class="mr-sm-0 mb-0">
|
||||
<img alt="Documentation" src="/images/homepage-icon-documentation-64x64@2x.png">
|
||||
<h5>Documentation</h5>
|
||||
<p>Explore guides and examples over in the <a href="/docs">docs</a>, along with complete <a href="/docs/using-fleet/rest-api">API reference</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div purpose="homepage-content" class="container">
|
||||
<div class="text-center">
|
||||
<div class="text-center" purpose="bottom-cta">
|
||||
<h4>For teams with lots of endpoints</h4>
|
||||
<h1>Focus on data, not vendors</h1>
|
||||
<div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
|
||||
<a purpose="cta-button" href="/try-fleet">Try it out</a>
|
||||
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Show me</a>
|
||||
<a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
|
||||
<a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue