mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Updated home page content (#6656)
* Updated home page content Updated homepage content to reflect our new positioning direction. * update layout to match wireframes, update text * lint fix Co-authored-by: Eric <eashaw@sailsjs.com>
This commit is contained in:
Mike Thomas
GitHub
parent
a459152034
commit
4c0791081b
2 changed files with 86 additions and 64 deletions
48
website/assets/styles/pages/homepage.less
vendored
48
website/assets/styles/pages/homepage.less
vendored
|
|
@ -1,14 +1,20 @@
|
|||
#homepage {
|
||||
|
||||
h1 {
|
||||
font-size: 42px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: @bold;
|
||||
font-size: 24px;
|
||||
line-height: 40px;
|
||||
font-weight: @bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: Nunito Sans;
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
|
@ -88,6 +94,20 @@
|
|||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='features'] {
|
||||
padding-bottom: 120px;
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[purpose='features-text-left'] {
|
||||
max-width: 500px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
[purpose='features-text-right'] {
|
||||
max-width: 500px;
|
||||
padding-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='report-banner-container'] {
|
||||
background: linear-gradient(#FFF 50%, #F4F6FA 50%);
|
||||
|
|
@ -152,12 +172,24 @@
|
|||
flex: 1 1 295px;
|
||||
}
|
||||
}
|
||||
[purpose='features'] {
|
||||
padding-bottom: 80px;
|
||||
[purpose='features-text-left'] {
|
||||
padding-right: 0px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
[purpose='features-text-right'] {
|
||||
padding-left: 0px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='report-banner-cta'] {
|
||||
padding: 27px 43px 34px 43px;
|
||||
img {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
[purpose='report-banner-container'] {
|
||||
padding-right: 20px;
|
||||
|
|
@ -222,8 +254,12 @@
|
|||
|
||||
@media (max-width: 575px) {
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
|
|
|
|||
102
website/views/pages/homepage.ejs
vendored
102
website/views/pages/homepage.ejs
vendored
|
|
@ -5,12 +5,12 @@
|
|||
<div purpose="hero-clouds">
|
||||
<div class="container-lg">
|
||||
<div class="container-fluid text-center">
|
||||
<h1>
|
||||
Open source <br>
|
||||
device management.
|
||||
<h1 class="pt-lg-4">
|
||||
All the data you need <br>
|
||||
without the downtime risk
|
||||
</h1>
|
||||
<h6 style="max-width: 580px;" class="mx-auto mt-3 mb-0">
|
||||
Quickly deploy <a target="_blank" style="color: white; text-decoration-line: underline;" href="https://osquery.io/">osquery</a> and secure 300,000+ devices on top of a stable core technology.
|
||||
<h6 style="max-width: 650px;" class="mx-auto mt-3 mb-0">
|
||||
Fleet is the lightweight telemetry platform for servers and workstations. Get comprehensive, customizable data from all your devices.
|
||||
</h6>
|
||||
<div style="max-width: 500px;" class="mt-5 mx-auto mb-0 d-sm-flex justify-content-center">
|
||||
<a purpose="top-try-it-out-btn" class="d-sm-flex align-items-center justify-content-center btn btn-block btn-primary mx-auto mx-sm-0" href="/get-started?tryitnow">Try it out</a>
|
||||
|
|
@ -30,61 +30,59 @@
|
|||
</div>
|
||||
|
||||
<div class="container-fluid justify-content center px-0 py-0">
|
||||
<div style="max-width: 720px;" class="d-none d-sm-flex text-center mx-auto">
|
||||
<h3 class="text-center pt-3 pb-5 mx-auto mb-3">Ask questions about your servers, and laptops. Whatever their operating system, wherever they live.</h3>
|
||||
<div style="max-width: 630px;" class="container text-center mx-auto pb-5">
|
||||
<h3 class="text-center pt-3 pb-4">
|
||||
Ask questions about your servers, and laptops. Whatever their operating system, wherever they live.
|
||||
</h3>
|
||||
<div class="row pb-2 justify-content-around">
|
||||
<div class="col-12 col-sm-6 justify-content-sm-end justify-content-center pb-4 d-flex pr-sm-0">
|
||||
<img alt="macOS logo" src="/images/os-macos-black-31x35@2x.png" style="width: auto; height: 34px;" class="mx-3" />
|
||||
<img alt="Windows logo" src="/images/os-windows-black-38x36@2x.png" style="width: auto; height: 34px;" class="mx-3" />
|
||||
<img alt="Linux logo" src="/images/os-linux-black-32x36@2x.png" style="width: auto; height: 34px;" class="mx-3" />
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 justify-content-sm-start justify-content-center d-flex pl-sm-0">
|
||||
<img alt="kubernetes logo" src="/images/icon-kubernetes-37x36@2x.png" style="width: auto; height: 34px;" class="mx-3" />
|
||||
<img alt="aws logo" src="/images/icon-aws-60x36@2x.png" style="width: auto; height: 34px;" class="mx-3" />
|
||||
<img alt="google cloud" src="/images/icon-google-cloud-46x36@2x.png" style="width: auto; height: 34px;" class="mx-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 960px;" class="container-fluid justify-content-center">
|
||||
<div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
|
||||
<div class="container text-center text-lg-left px-0 pb-5 pb-lg-0">
|
||||
<div style="max-width: 1040px;" class="container-fluid justify-content-center">
|
||||
<div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
|
||||
<div purpose="features-text-left" class="container text-center text-lg-left pl-0 m-0">
|
||||
<h3>
|
||||
Single source of truth
|
||||
Make the right call — right away
|
||||
</h3>
|
||||
<p>
|
||||
Search for any device data using SQL queries, monitor your devices and respond to incidents quickly.
|
||||
Get accurate, up-to-the-minute data from every endpoint in your organization. So you can make more informed decisions — quickly and confidently.
|
||||
</p>
|
||||
<div class="container d-flex justify-content-center justify-content-lg-start align-items-center px-0">
|
||||
<img alt="macOS logo" src="/images/os-macos-black-31x35@2x.png" style="width: auto; height: 36px;" class="mr-4" />
|
||||
<img alt="Windows logo" src="/images/os-windows-black-38x36@2x.png" style="width: auto; height: 36px;" class="mr-4" />
|
||||
<img alt="Linux logo" src="/images/os-linux-black-32x36@2x.png" style="width: auto; height: 36px;" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width: 488px;" class="container d-flex px-2 px-sm-0 pb-5 pb-lg-0">
|
||||
<img alt="Fleet UI" src="images/feature-inventory-management-488x305@2x.png" class="w-100 h-100 m-lg-0" />
|
||||
<div style="max-width: 440px;" class="container d-flex px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-realtime-440x277.png" class="w-100 h-100 m-lg-0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
|
||||
<div style="max-width: 380px;" class="container text-center text-lg-left px-0 pb-5 pb-lg-0 m-0">
|
||||
<div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
|
||||
<div purpose="features-text-right" class="container text-center text-lg-left pr-0 m-0">
|
||||
<h3>
|
||||
Share with any team
|
||||
Reduce risk, increase stability
|
||||
</h3>
|
||||
<p>
|
||||
Collect and share useful information for ops teams, security teams, help desk, and more.
|
||||
Some security agents strain your systems. Fortunately, Fleet uses osquery. This open-source solution was built to be deployed across hundreds of thousands of devices.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 459px;" class="container d-flex order-lg-first px-2 px-sm-0 pb-5 pb-lg-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-share-with-any-team-459x312@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
<div style="max-width: 440px;" class="container d-flex order-lg-first px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-file-integrity-monitoring-440x277.png" class="w-100 h-100 m-lg-0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center px-0 pt-3 pb-5 mb-lg-4">
|
||||
<div class="container text-center text-lg-left px-0 pb-5 pb-lg-0 m-0">
|
||||
<h3>Deploy anywhere</h3>
|
||||
<p class="pb-4 mb-0">
|
||||
Fleet is self-hosted and self-managed, and can be run within your own data centers or in the cloud.
|
||||
</p>
|
||||
<div class="d-block align-items-center">
|
||||
<div class="d-inline-block mr-4">
|
||||
<img title="Kubernetes" alt="kubernetes logo" src="/images/icon-kubernetes-37x36@2x.png" style="width: auto; height: 36px;" class="d-block mx-auto"/>
|
||||
</div>
|
||||
<div class="d-inline-block mr-4">
|
||||
<img title="AWS" alt="aws logo" src="/images/icon-aws-60x36@2x.png" style="width: auto; height: 36px;" lass="d-block mx-auto"/>
|
||||
</div>
|
||||
<div class="d-inline-block">
|
||||
<img title="Google cloud" alt="google cloud logo" src="/images/icon-google-cloud-46x36@2x.png" style="width: auto; height: 36px;" class="d-block mx-auto"/>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
|
||||
<div purpose="features-text-left" class="container text-center text-lg-left pl-0 m-0">
|
||||
<h3>Find the answers that really matter</h3>
|
||||
<p>
|
||||
Every organization is unique. That’s why Fleet gives you complete control of your data — including the ability to create custom queries.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 489px;" class="container d-flex px-2 px-sm-0 pb-5 pb-lg-0">
|
||||
<img alt="Fleet UI" src="images/feature-deployment-489x278@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
<div style="max-width: 440px;" class="container d-flex px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-threat-detection-440x277.png" class="w-100 h-100 m-lg-0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -151,9 +149,9 @@
|
|||
</div>
|
||||
<div id="testimonials" style="background: #F4F6FA; position: relative">
|
||||
<div class="container-lg text-center justify-content-center py-5 mx-auto">
|
||||
<h3 class="px-4 mt-5 mb-3">Community driven, and built on open core technology.</h3>
|
||||
<h3 class="px-4 mt-5 mb-3">Join the open-source community</h3>
|
||||
<p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
|
||||
That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches.
|
||||
Software engineers. Security specialists. IT administrators. Lots of professionals are working together to make Fleet even better. From contributing patches to dreaming up features.
|
||||
</p>
|
||||
<div purpose="tweets" class="d-flex card-deck justify-content-center pt-5 mx-auto">
|
||||
<div purpose="tweet-card" class="card">
|
||||
|
|
@ -229,18 +227,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/grupoversia"><img width="90" height="38" alt="Versia logo" src="/images/social-proof-logo-versia-90x38@2x.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1">Thanks <a href="https://twitter.com/fleetctl">@fleetctl</a> for such an awesome tool to manage <a href="https://twitter.com/osquery">@osquery</a></p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Ruben Rodriguez</p>
|
||||
<p class="m-0">Systems technician <a href="https://twitter.com/grupoversia">@Versia</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="px-4 mb-3">From small businesses to large enterprises.</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue