mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 09:28:54 +00:00
Website: Small homepage changes 2023-10-02 (#14255)
https://github.com/fleetdm/confidential/issues/3815 Changes: - Updated the text in the homepage hero. - Replaced logos with greyscale versions - Updated the layout and styles to match latest wireframes
This commit is contained in:
Eric
GitHub
parent
f5c81fe9e5
commit
fbdcf68336
9 changed files with 112 additions and 79 deletions
BIN
website/assets/images/logo-atlassian-140x18@2x.png
vendored
Normal file
BIN
website/assets/images/logo-atlassian-140x18@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
website/assets/images/logo-fastly-75x30@2x.png
vendored
Normal file
BIN
website/assets/images/logo-fastly-75x30@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
website/assets/images/logo-gusto-64x24@2x.png
vendored
Normal file
BIN
website/assets/images/logo-gusto-64x24@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
website/assets/images/logo-segment-112x24@2x.png
vendored
Normal file
BIN
website/assets/images/logo-segment-112x24@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
BIN
website/assets/images/logo-snowflake-117x28@2x.png
vendored
Normal file
BIN
website/assets/images/logo-snowflake-117x28@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
website/assets/images/logo-uber-70x24@2x.png
vendored
Normal file
BIN
website/assets/images/logo-uber-70x24@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
website/assets/images/logo-wayfair-110x24@2x.png
vendored
Normal file
BIN
website/assets/images/logo-wayfair-110x24@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
137
website/assets/styles/pages/homepage.less
vendored
137
website/assets/styles/pages/homepage.less
vendored
|
|
@ -1,8 +1,8 @@
|
|||
#homepage {
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: 56px;
|
||||
line-height: 54px;
|
||||
font-size: 64px;
|
||||
line-height: 76px;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
|
|
@ -64,7 +64,6 @@
|
|||
p {
|
||||
margin-bottom: 40px;
|
||||
font-size: 18px;
|
||||
max-width: 520px;
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
margin-bottom: 40px;
|
||||
|
|
@ -74,30 +73,34 @@
|
|||
[purpose='hero-logos'] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 120px;
|
||||
max-width: 1080px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 30px;
|
||||
height: 28px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 33px;
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='fastly-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 21px;
|
||||
height: 18px;
|
||||
}
|
||||
[purpose='gusto-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 32px;
|
||||
}
|
||||
[purpose='bottom-row-uber-logo'] {
|
||||
display: none;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='logo-column'] {
|
||||
img {
|
||||
margin-right: 35px;
|
||||
margin-left: 35px;
|
||||
// margin-right: 35px;
|
||||
// margin-left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -444,6 +447,46 @@
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 120px;
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 28px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='fastly-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 18px;
|
||||
}
|
||||
[purpose='gusto-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='logo-column'] {
|
||||
width: 100%;
|
||||
img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
|
|
@ -513,35 +556,39 @@
|
|||
max-width: 100%;
|
||||
height: 720px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
padding-top: 20px;
|
||||
max-width: 450px;
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
max-width: 688px;
|
||||
margin-top: 24px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
margin-bottom: 32px;
|
||||
img {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
// margin-right: 20px;
|
||||
// margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -618,26 +665,9 @@
|
|||
}
|
||||
[purpose='hero-logos'] {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 80px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 33px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 21px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 32px;
|
||||
}
|
||||
[purpose='bottom-row-uber-logo'] {
|
||||
display: none;
|
||||
}
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
[purpose='homepage-text-block'] {
|
||||
margin-bottom: 80px;
|
||||
p {
|
||||
|
|
@ -749,13 +779,13 @@
|
|||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
line-height: 48px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
padding-bottom: 260px;
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
line-height: 60px;
|
||||
line-height: 48px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
|
|
@ -829,28 +859,12 @@
|
|||
}
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
max-width: 335px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 22px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='video-modal'] {
|
||||
[purpose='modal-content'] {
|
||||
|
|
@ -900,13 +914,6 @@
|
|||
img {
|
||||
display: inline;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
display: none;
|
||||
}
|
||||
[purpose='bottom-row-uber-logo'] {
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
54
website/views/pages/homepage.ejs
vendored
54
website/views/pages/homepage.ejs
vendored
|
|
@ -6,9 +6,9 @@
|
|||
<div class="d-flex flex-row justify-content-center align-items-start">
|
||||
<%/* Hero text */%>
|
||||
<div purpose="hero-text" class="d-flex flex-column justify-content-center">
|
||||
<h4>Open-source device management</h4>
|
||||
<h1>Lighter than air</h1>
|
||||
<p>Lightweight management for laptops and servers.<br class="d-sm-block d-none"> Designed for APIs, GitOps, webhooks, YAML, and humans.</p>
|
||||
<h4>For teams with thousands of computers</h4>
|
||||
<h1>Untangle your endpoints</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/register?tryitnow">Try it out</a>
|
||||
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
|
||||
|
|
@ -19,18 +19,44 @@
|
|||
</div>
|
||||
</div>
|
||||
<%/* Row of logos */%>
|
||||
<div purpose="hero-logos" style="max-width: 1080px;" class="mx-auto d-flex flex-md-row flex-column align-items-center justify-content-center">
|
||||
<div purpose="logo-column" class="flex-row d-flex justify-content-between align-items-center mb-4 mb-md-0">
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" class="ml-md-auto" alt="Snowflake logo" src="/images/logo-snowflake-167x40@2x.png"></a>
|
||||
<a href="#community"><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-color-147x32@2x.png"></a>
|
||||
<a class="d-block" href="#community"><img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-dark-84x30@2x.png"></a>
|
||||
<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="#community"><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png"></a>
|
||||
<a class="d-block" href="#community"><img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-70x24@2x.png"></a>
|
||||
<a class="d-block" href="#community"><img purpose="fastly-logo" alt="Fastly logo" class="" src="/images/logo-fastly-75x30@2x.png"></a>
|
||||
<a href="#community"><img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png"></a>
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png"></a>
|
||||
<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>
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex flex-row justify-content-between align-items-start align-items-md-center">
|
||||
<a href="#community"><img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-194x24@2x.png"></a>
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" class="mr-md-auto" src="/images/logo-segment-139x30@2x.png"></a>
|
||||
<%/* >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">
|
||||
<a href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" class="ml-md-auto" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<a href="#community"><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png"></a>
|
||||
<a class="d-block" href="#community"><img purpose="uber-logo" alt="Uber logo" class="" src="/images/logo-uber-70x24@2x.png"></a>
|
||||
<a class="d-block" href="#community"><img purpose="fastly-logo" alt="Fastly logo" class="" src="/images/logo-fastly-75x30@2x.png"></a>
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex flex-row justify-content-between align-items-center">
|
||||
<a purpose="bottom-row-uber-logo" href="#community" target="_blank"><img style="height: 20px; width: auto" alt="Uber logo" src="/images/logo-uber-dark-84x30@2x.png"></a>
|
||||
|
||||
<div purpose="logo-column" class="d-sm-flex d-none d-lg-none flex-row justify-content-between align-items-center mb-0">
|
||||
<a href="#community"><img purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png"></a>
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png"></a>
|
||||
<a href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" class="mr-md-auto" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
</div>
|
||||
|
||||
<%/* <576px logos - three rows */%>
|
||||
<div purpose="logo-column" class="d-flex d-sm-none flex-row justify-content-center align-items-center">
|
||||
<a class="mr-3" href="/guides/delivering-data-to-snowflake-from-fleet-and-osquery"><img purpose="snowflake-logo" alt="Snowflake logo" src="/images/logo-snowflake-117x28@2x.png"></a>
|
||||
<a class="ml-3" href="#community"><img purpose="wayfair-logo" alt="Wayfair logo" src="/images/logo-wayfair-110x24@2x.png"></a>
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex d-sm-none flex-row justify-content-between align-items-center">
|
||||
<a class="d-block" href="#community"><img class="mx-0" purpose="uber-logo" alt="Uber logo" src="/images/logo-uber-70x24@2x.png"></a>
|
||||
<a class="d-block" href="#community"><img class="mx-auto" purpose="fastly-logo" alt="Fastly logo" src="/images/logo-fastly-75x30@2x.png"></a>
|
||||
<a href="#community"><img class="mx-0" purpose="atlassian-logo" alt="Atlassian logo" src="/images/logo-atlassian-140x18@2x.png"></a>
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex d-sm-none flex-row justify-content-center align-items-center mb-0">
|
||||
<a class="mr-3" href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="gusto-logo" alt="Gusto logo" src="/images/logo-gusto-64x24@2x.png"></a>
|
||||
<a class="ml-3" href="https://segment.com/blog/hosting-fleetdm-on-aws-eks/" target="_blank"><img purpose="segment-logo" alt="Segment logo" class="mr-md-auto" src="/images/logo-segment-112x24@2x.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
<%/* Homepage content */%>
|
||||
|
|
@ -208,7 +234,7 @@
|
|||
<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>
|
||||
<p>Fleet champions a user-first transparency model with its open-source software, allowing users to see what's being monitored and how. Read more on Fleet’s <a href="/transparency">transparency</a> page. </p>
|
||||
<p>Let end users see the source code for exactly <a href="/docs/using-fleet/fleet-desktop">how they are being monitored</a>, and set clear expectations about what is and isn’t acceptable use of work computers.</p>
|
||||
</div>
|
||||
|
||||
<div purpose="feature">
|
||||
|
|
|
|||
Loading…
Reference in a new issue