mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 08:55:24 +00:00
Website: Update homepage layout (#7328)
* update homepage * lint fixes * Update layout.ejs * Responsive style tweaks - made some style changes to improve responsive breakpoints - attempted to normalize paddings and section widths * update layout * updated styles mobile and tablet - updated hero background - tweaked paddings and margins for tablet and mobile - added larger images for responsive breakpoints - increased left/right padding on homepage-section * Update homepage.ejs * update feature image styles * update platform hero background & homepage styles * Update platform.less Co-authored-by: Mike Thomas <mthomas@fleetdm.com>
This commit is contained in:
Eric
GitHub
parent
7d8c38751d
commit
185bcc9d31
29
website/assets/images/background-homepage-hero.svg
vendored
Normal file
29
website/assets/images/background-homepage-hero.svg
vendored
Normal file
@ -0,0 +1,29 @@
|
||||
<svg width="1440" height="576" viewBox="0 0 1440 576" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_5358_21353)">
|
||||
<path d="M1440 0H-1V576H1440V0Z" fill="url(#paint0_linear_5358_21353)"/>
|
||||
<g clip-path="url(#clip1_5358_21353)">
|
||||
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M1902 -34.0324C1623 -123.184 1436.23 -119.595 1341.7 -23.2649C1199.92 121.229 1296.96 188.651 1195.77 368.662C1094.59 548.672 863.849 435.075 730.828 551.061C642.149 628.402 633.183 727.391 703.932 848.028L1959.97 711.026L1902 -34.0324Z" fill="url(#paint1_linear_5358_21353)"/>
|
||||
<path opacity="0.75" fill-rule="evenodd" clip-rule="evenodd" d="M-216.622 440.719C17.85 536.259 179.05 545.689 266.978 469.009C398.857 353.997 319.749 289.372 419.02 141.026C518.291 -7.3201 709.531 106.047 831.948 14.9954C913.559 -45.7022 927.926 -130.407 875.05 -239.119L-216.612 -205.271L-216.622 440.719Z" fill="url(#paint2_linear_5358_21353)"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_5358_21353" x1="1440" y1="0" x2="-1" y2="0.000107437" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#362863"/>
|
||||
<stop offset="1" stop-color="#272A5E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_5358_21353" x1="1906.6" y1="750.527" x2="1308.35" y2="-0.775148" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_5358_21353" x1="906.234" y1="-239.119" x2="-216.622" y2="-239.119" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#201E43" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#272A5E"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_5358_21353">
|
||||
<rect width="1440" height="576" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_5358_21353">
|
||||
<rect width="1440" height="576" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
BIN
website/assets/images/feature-file-integrity-monitoring-600x355@2x.png
vendored
Normal file
BIN
website/assets/images/feature-file-integrity-monitoring-600x355@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
website/assets/images/feature-file-integrity-monitoring-600x357@2x.png
vendored
Normal file
BIN
website/assets/images/feature-file-integrity-monitoring-600x357@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
website/assets/images/feature-fleet-ui-600x394@2x.png
vendored
Normal file
BIN
website/assets/images/feature-fleet-ui-600x394@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
BIN
website/assets/images/feature-realtime-600x378@2x.png
vendored
Normal file
BIN
website/assets/images/feature-realtime-600x378@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
website/assets/images/feature-realtime-600x382@2x.png
vendored
Normal file
BIN
website/assets/images/feature-realtime-600x382@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
BIN
website/assets/images/feature-threat-detection-600x395@2x.png
vendored
Normal file
BIN
website/assets/images/feature-threat-detection-600x395@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
website/assets/images/feature-threat-detection-600x400@2x.png
vendored
Normal file
BIN
website/assets/images/feature-threat-detection-600x400@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
BIN
website/assets/images/fleet-sandbox-300x200@2x.png
vendored
Normal file
BIN
website/assets/images/fleet-sandbox-300x200@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
website/assets/images/icon-checkmark-6x6@2x.png
vendored
Normal file
BIN
website/assets/images/icon-checkmark-6x6@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 345 B |
BIN
website/assets/images/icon-play-20x24@2x.png
vendored
Normal file
BIN
website/assets/images/icon-play-20x24@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 472 B |
BIN
website/assets/images/logo-atlassian-white-172x22@2x.png
vendored
Normal file
BIN
website/assets/images/logo-atlassian-white-172x22@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
website/assets/images/logo-snowflake-white-151x30@2x.png
vendored
Normal file
BIN
website/assets/images/logo-snowflake-white-151x30@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
website/assets/images/logo-square-106x27@2x.png
vendored
Normal file
BIN
website/assets/images/logo-square-106x27@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
website/assets/images/logo-uber-84x29@2x.png
vendored
Normal file
BIN
website/assets/images/logo-uber-84x29@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
website/assets/images/logo-wayfair-150x33@2x.png
vendored
Normal file
BIN
website/assets/images/logo-wayfair-150x33@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
11
website/assets/js/pages/homepage.page.js
vendored
11
website/assets/js/pages/homepage.page.js
vendored
@ -23,6 +23,8 @@ parasails.registerPage('homepage', {
|
||||
|
||||
// Success state when form has been submitted
|
||||
cloudSuccess: false,
|
||||
showAllTweets: false,
|
||||
modal: undefined,
|
||||
},
|
||||
|
||||
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
||||
@ -50,6 +52,15 @@ parasails.registerPage('homepage', {
|
||||
// > ~Dec 31, 2020
|
||||
window.dispatchEvent(new Event('papercups:open'));
|
||||
},
|
||||
clickToggleTruncateTweets: function() {
|
||||
this.showAllTweets = !this.showAllTweets;
|
||||
},
|
||||
clickOpenVideoModal: function() {
|
||||
this.modal = 'video';
|
||||
},
|
||||
closeModal: function() {
|
||||
this.modal = '';
|
||||
},
|
||||
|
||||
submittedForm: async function() {
|
||||
// Show the success message.
|
||||
|
||||
@ -89,8 +89,8 @@
|
||||
|
||||
// Modal backdrop styles are exposed globally here because this gets appended to the <body>
|
||||
.modal-backdrop {
|
||||
background-color: #8b8fa2;
|
||||
background-color: #192147;
|
||||
&.show {
|
||||
opacity: 0.45;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
10
website/assets/styles/layout.less
vendored
10
website/assets/styles/layout.less
vendored
@ -16,7 +16,7 @@ html, body {
|
||||
padding-bottom: @footer-height;
|
||||
}
|
||||
.homepage-cta-banner {
|
||||
background-color: #FFF;
|
||||
background-color: ;
|
||||
color: #000;
|
||||
|
||||
a {
|
||||
@ -27,8 +27,8 @@ html, body {
|
||||
.homepage-cta-banner + .homepage-header-top {
|
||||
top: 52px;
|
||||
}
|
||||
.non-homepage-cta-banner {
|
||||
background-color: @core-fleet-black;
|
||||
.homepage-cta-banner {
|
||||
background-color: #A182DF;
|
||||
color: #FFF;
|
||||
a {
|
||||
color: #FFF;
|
||||
@ -139,7 +139,7 @@ html, body {
|
||||
}
|
||||
} // Homepage header styles
|
||||
&.homepage-header {
|
||||
z-index: 9999;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
top: 0;
|
||||
@ -181,7 +181,7 @@ html, body {
|
||||
right: 0;
|
||||
// border-bottom: 1px solid #e2e4ea;
|
||||
// box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 9999;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
|
||||
566
website/assets/styles/pages/homepage.less
vendored
566
website/assets/styles/pages/homepage.less
vendored
@ -9,7 +9,13 @@
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
font-weight: @bold;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@ -19,54 +25,153 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
[purpose='hero-background'] {
|
||||
background: linear-gradient(270deg, #362863 0%, #272A5E 100%);
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 162px;
|
||||
background: url('/images/background-homepage-hero.svg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(173.74deg, #1F1D42 4.94%, #00FFF0 87.78%);
|
||||
background-size: 100% 85%;
|
||||
background-repeat: no-repeat;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
max-width: 780px;
|
||||
span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1 {
|
||||
padding-top: 12px;
|
||||
font-weight: 800;
|
||||
font-size: 64px;
|
||||
line-height: 48px;
|
||||
}
|
||||
h6 {
|
||||
padding-top: 32px;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
p {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
padding-top: 25px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
background-color: #192147;
|
||||
height: 80px;
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 33px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 30px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
img {
|
||||
margin-right: 35px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
}
|
||||
[purpose='slack-button'] {
|
||||
background: #FFFFFF;
|
||||
font-size: 16px;
|
||||
color: #192147;
|
||||
padding: 16px 51px 17px 32px;
|
||||
border: 1px solid #C5C7D1;
|
||||
border-radius: 8px;
|
||||
font-weight: 700;
|
||||
}
|
||||
[purpose='round-button'] {
|
||||
cursor: pointer;
|
||||
height: 60px;
|
||||
width: 240px;
|
||||
background: #FF5C83;
|
||||
border-radius: 30px;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
padding: 16px 46px 18px;
|
||||
text-decoration: none;
|
||||
}
|
||||
[purpose='homepage-section'] {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
padding-top: 44px;
|
||||
}
|
||||
[purpose='homepage-top-text-block'] {
|
||||
max-width: 550px;
|
||||
}
|
||||
[purpose='top-image'] {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[purpose='homepage-text-block'] {
|
||||
max-width: 700px;
|
||||
}
|
||||
[purpose='features-text'] {
|
||||
max-width: 550px;
|
||||
}
|
||||
[purpose='feature-image'] {
|
||||
max-width: 600px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='hero-clouds'] {
|
||||
background-image: url('/images/clouds-1600x320@2x.png');
|
||||
background-position: bottom 150px center;
|
||||
background-size: 1600px auto;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
|
||||
[purpose='top-try-it-out-btn'] {
|
||||
max-width: 220px;
|
||||
line-height: 24px;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
[purpose='features'] {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 120px;
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[purpose='features-check-list'] {
|
||||
p::before {
|
||||
content: url('/images/icon-checkmark-6x6@2x.png');
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
color: #192147;
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
[purpose='animated-arrow-button-white'] {
|
||||
.btn-animated-arrow-white();
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
[purpose='log-destination-grid'] {
|
||||
max-width: 736px;
|
||||
max-width: 1200px;
|
||||
columns: 4;
|
||||
}
|
||||
|
||||
[purpose='log-destination'] {
|
||||
flex: 1 0 225px;
|
||||
height: 80px;
|
||||
column-span: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
@ -80,174 +185,268 @@
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='show-all-tweets-btn'] {
|
||||
margin-top: 18px;
|
||||
padding: 8px 16px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #C5C7D1;
|
||||
background: #FFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[purpose='bottom-sandbox-cta'] {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
[purpose='tweets'] {
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
padding-bottom: 50px;
|
||||
box-sizing: content-box;
|
||||
padding-top: 80px;
|
||||
[purpose='tweet-card'] {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 16px;
|
||||
text-align: left;
|
||||
background: #FFFFFF;
|
||||
padding: 40px;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid #E2E4EA;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 7px 3px 0px rgba(25, 33, 71, 0.1);
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='features'] {
|
||||
padding-bottom: 120px;
|
||||
p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[purpose='features-text-left'] {
|
||||
max-width: 450px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
[purpose='features-text-right'] {
|
||||
max-width: 450px;
|
||||
padding-left: 80px;
|
||||
}
|
||||
[purpose='tweets'].truncated {
|
||||
max-height: 560px;
|
||||
overflow: hidden;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
[purpose='tweets'].truncated::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
z-index: 2;
|
||||
background: linear-gradient(180deg, rgba(244, 246, 250, 0) 0%, #F4F6FA 100%);
|
||||
}
|
||||
|
||||
[purpose='report-banner-container'] {
|
||||
background: linear-gradient(#FFF 50%, #F4F6FA 50%);
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
[purpose='report-banner-cta'] {
|
||||
max-width: 1080px;
|
||||
margin-top: 40px;
|
||||
border-radius: 16px;
|
||||
background-color: #261c50;
|
||||
background-image: url('/images/homepage-report-cta-background.svg');
|
||||
background-position-x: right;
|
||||
background-size: cover;
|
||||
color: #FFF;
|
||||
padding: 27px 87px 34px 87px;
|
||||
img {
|
||||
margin-right: 60px;
|
||||
height: auto;
|
||||
[parasails-component='modal'] {
|
||||
[purpose='modal-content'] {
|
||||
margin-top: 0px;
|
||||
max-width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #192147;
|
||||
border: 0;
|
||||
padding: 120px;
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
[purpose='modal-close-button'] {
|
||||
margin-top: 40px;
|
||||
margin-right: 40px;
|
||||
color: #FFF;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
[purpose='modal-dialog'] {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
[purpose='embedded-content'] {
|
||||
position: relative;
|
||||
padding-bottom: 54.5%;
|
||||
padding-top: 25px;
|
||||
width: 100%;
|
||||
max-width: 309px;
|
||||
}
|
||||
a {
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
[purpose='tweets'] {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
[purpose='tweet-card'] {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
flex: 0 1 326px;
|
||||
flex: 1 1 326px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
[purpose='tweets'] {
|
||||
padding-left: 72px;
|
||||
padding-right: 72px;
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 360px;
|
||||
margin-bottom: 15px;
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
flex: 1 1 330px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 172px;
|
||||
[purpose='feature-image'] {
|
||||
width: 560px;
|
||||
}
|
||||
[purpose='tweets'] {
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 295px;
|
||||
}
|
||||
[purpose='features-text'] {
|
||||
max-width: 500px;
|
||||
}
|
||||
[purpose='features'] {
|
||||
padding-bottom: 80px;
|
||||
[purpose='features-text-left'] {
|
||||
padding-right: 0px;
|
||||
padding-bottom: 40px;
|
||||
max-width: 640px;
|
||||
}
|
||||
[purpose='features-text-right'] {
|
||||
padding-left: 0px;
|
||||
padding-bottom: 40px;
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='report-banner-cta'] {
|
||||
padding: 27px 43px 34px 43px;
|
||||
img {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
[purpose='report-banner-container'] {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
[purpose='log-destination-grid'] {
|
||||
max-width: 976px;
|
||||
[purpose='top-image'] {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
margin-left: 48px;
|
||||
}
|
||||
[purpose='log-destination'] {
|
||||
flex: 0 0 228px;
|
||||
flex: 1 0 216px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 769px) {
|
||||
@media (max-width: 991px) {
|
||||
[purpose='tweets'] {
|
||||
padding-left: 52px;
|
||||
padding-right: 52px;
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 316px;
|
||||
}
|
||||
padding-top: 40px;
|
||||
}
|
||||
[purpose='hero-clouds'] {
|
||||
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 100%);
|
||||
[purpose='homepage-top-text-block'] {
|
||||
max-width: 600px;
|
||||
}
|
||||
[purpose='homepage-text-block'] {
|
||||
max-width: 600px;
|
||||
}
|
||||
[purpose='top-image'] {
|
||||
max-width: 600px;
|
||||
margin-left: 0px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 222px;
|
||||
background-size: 100% 125%;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
}
|
||||
[purpose='report-banner-container'] {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
[purpose='hero-text'] {
|
||||
max-width: 600px;
|
||||
h1 {
|
||||
font-size: 44px;
|
||||
}
|
||||
h6 {
|
||||
padding-top: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
img {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
[purpose='homepage-section'] {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
[purpose='features'] {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
[purpose='features-text'] {
|
||||
padding-top: 48px;
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 295px;
|
||||
}
|
||||
[purpose='log-destination-grid'] {
|
||||
columns: 2;
|
||||
max-width: 600px;
|
||||
}
|
||||
[purpose='log-destination'] {
|
||||
flex: 1 0 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
[purpose='tweets'].truncated {
|
||||
max-height: 630px;
|
||||
}
|
||||
|
||||
[purpose='tweet-card'] {
|
||||
flex: 1 1 316px;
|
||||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
[purpose='homepage-section'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
[purpose='features'] {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 80px;
|
||||
[purpose='features-text'] {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
[parasails-component='modal'] {
|
||||
[purpose='modal-content'] {
|
||||
|
||||
max-width: 100vw;
|
||||
width: 100vw;
|
||||
background-color: #192147;
|
||||
border: 0;
|
||||
padding: 40px;
|
||||
padding-top: 80px;
|
||||
}
|
||||
[purpose='embedded-content'] {
|
||||
position: relative;
|
||||
padding-bottom: 52%;
|
||||
padding-top: 25px;
|
||||
width: 100%;
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 991px) and (max-width: 1024px) {
|
||||
[purpose='feature-image'] {
|
||||
max-width: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 600px) and (max-width: (767px)) {
|
||||
[purpose='log-destination'] {
|
||||
flex: 0 0 280px;
|
||||
flex: 1 0 230px;
|
||||
p {
|
||||
display: flex;
|
||||
};
|
||||
}
|
||||
}
|
||||
@media (max-width: 605px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 242px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
[purpose='log-destination'] {
|
||||
flex-basis: 160px;
|
||||
flex-basis: 159px;
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
@ -256,6 +455,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
line-height: 34px;
|
||||
@ -268,48 +468,88 @@
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
[purpose='top-try-it-out-btn'] {
|
||||
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
max-width: 100%;
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='round-button'] {
|
||||
width: 100%;
|
||||
}
|
||||
[purpose='logo-column'] {
|
||||
img {
|
||||
margin-right: 12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
[purpose='features-check-list'] {
|
||||
p::before {
|
||||
margin-right: 16px;
|
||||
}
|
||||
p {
|
||||
padding-left: 24px;
|
||||
text-indent: -24px;
|
||||
}
|
||||
}
|
||||
[purpose='tweets'] {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
[purpose='tweet-card'] {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 216px;
|
||||
[purpose='slack-button'] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
[purpose='features'] {
|
||||
[purpose='features-text-left'] {
|
||||
max-width: 320px;
|
||||
}
|
||||
[purpose='features-text-right'] {
|
||||
max-width: 320px;
|
||||
}
|
||||
@media (max-width: 436px) {
|
||||
[purpose='log-destination'] {
|
||||
flex-basis: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 395px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 236px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 355px) {
|
||||
[purpose='log-destination'] {
|
||||
flex-basis: 80px;
|
||||
flex-basis: 100px;
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 22px;
|
||||
width: 113px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 22px;
|
||||
width: 113px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 22px;
|
||||
width: 62px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 16px;
|
||||
width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 330px) {
|
||||
[purpose='hero-banner'] {
|
||||
padding-top: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
8
website/assets/styles/pages/platform.less
vendored
8
website/assets/styles/pages/platform.less
vendored
@ -28,7 +28,9 @@
|
||||
}
|
||||
|
||||
[purpose='platform-banner-background'] {
|
||||
background: linear-gradient(100.68deg, #1F1D42 0%, #00FFF0 100%);
|
||||
background: url('/images/background-homepage-hero.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -97,7 +99,7 @@
|
||||
color: #F9FAFC;
|
||||
position: relative;
|
||||
padding: 100px 80px 0px 80px;
|
||||
height: 520px;
|
||||
height: 480px;
|
||||
[purpose='platform-banner-text'] {
|
||||
max-width: 544px;
|
||||
z-index: 2;
|
||||
@ -322,7 +324,7 @@
|
||||
line-height: 54px;
|
||||
}
|
||||
[purpose='platform-banner-background'] {
|
||||
background: linear-gradient(141.32deg, #1F1D42 0%, #00FFF0 91.41%);;
|
||||
background: url('/images/background-homepage-hero.svg');
|
||||
overflow: hidden;
|
||||
}
|
||||
[purpose='platform-section'] {
|
||||
|
||||
22
website/views/layouts/layout.ejs
vendored
22
website/views/layouts/layout.ejs
vendored
@ -112,31 +112,21 @@
|
||||
</head>
|
||||
<body>
|
||||
<div purpose="page-wrap" dat>
|
||||
<div purpose="header-report-cta" class="<%= isHomepage ? 'homepage-cta-banner' : 'non-homepage-cta-banner' %> <%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
|
||||
<!-- <div purpose="header-report-cta" class="<%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
|
||||
<div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
|
||||
<p class="text-center pr-1 mb-0">We surveyed 200+ security practitioners to discover the state of device management in 2022. </p>
|
||||
<a class="mb-0 d-block text-center d-lg-inline text-lg-left" href="/reports/state-of-device-management">Click here to learn about their struggles and best practices.</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="<%= isHomepage ? 'homepage-header' : 'header' %> <%= !headerCTAHidden ? 'homepage-header-top' : null %>" purpose="page-header">
|
||||
</div> -->
|
||||
<div class="header <%= !headerCTAHidden ? 'homepage-header-top' : null %>" purpose="page-header">
|
||||
<div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
|
||||
<a href="/" style="max-width: 118px;">
|
||||
<% /* The homepage-header on the homepage has a white fleet logo */ %>
|
||||
<% if (isHomepage) { %>
|
||||
<img alt="Fleet logo" src="/images/logo-white-162x92@2x.png" style="width: 162px; height: 92px;"/>
|
||||
<% } else { %>
|
||||
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;"/>
|
||||
<% } %>
|
||||
</a>
|
||||
<div class="d-flex d-lg-none">
|
||||
<button purpose="header-btn" style="font-size: 16px; text-decoration: none;" class="btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
|
||||
<span class="mr-2">Menu</span>
|
||||
<% /* The hamburger icon on the homepage is white */ %>
|
||||
<% if (isHomepage) { %>
|
||||
<img alt="An icon indicating that interacting with this button will open the navigation menu." src="/images/icon-hamburger-16x14@2x.png" style="width: 16px;" />
|
||||
<% } else { %>
|
||||
<img alt="An icon indicating that interacting with this button will open the navigation menu." src="/images/icon-hamburger-blue-16x14@2x.png" style="width: 16px;" />
|
||||
<% } %>
|
||||
</button>
|
||||
</div>
|
||||
<%/* Mobile Navigation menu */%>
|
||||
@ -194,7 +184,7 @@
|
||||
<hr>
|
||||
<a href="/logout" class="d-flex mt-2 text-decoration-none" style="text-decoration: none; line-height: 23px;">Log out</a>
|
||||
<% }%>
|
||||
<a style="padding: 4px 16px; line-height: 24px; width: 100px" class="btn btn-sm btn-primary align-items-center d-flex mt-4" href="/try-fleet/register?tryitnow" >Try it out</a>
|
||||
<a style="padding: 4px 16px; line-height: 24px; width: 100px" class="btn btn-sm btn-primary align-items-center d-flex mt-4" href="/try-fleet/register?tryitnow">Try Fleet</a>
|
||||
</div>
|
||||
</div>
|
||||
<%/* Desktop Navigation bar */%>
|
||||
@ -244,7 +234,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 style="padding: 4px 16px; line-height: 24px; color: #FFFFFF" class="btn btn-sm btn-primary align-items-center d-flex" href="/try-fleet/register?tryitnow" >Try it out</a>
|
||||
<a style="padding: 4px 16px; line-height: 24px; color: #FFFFFF" class="pl-4 btn btn-sm btn-primary align-items-center d-flex" href="/try-fleet/register?tryitnow" >Try Fleet</a>
|
||||
<% if(_.has(me, 'id')) {%>
|
||||
<a href="/logout" class="justify-content-end pl-4 py-2 text-decoration-none" style="text-decoration: none; line-height: 23px;">Log out</a>
|
||||
<% }%>
|
||||
@ -366,7 +356,7 @@
|
||||
<% /* Sticky header */ %>
|
||||
<script>
|
||||
var lastScrollTop = 0;
|
||||
var header = document.querySelector('.header') || document.querySelector('.homepage-header')
|
||||
var header = document.querySelector('.header')
|
||||
var ctaBanner = document.querySelector('[purpose="header-report-cta"]')
|
||||
window.addEventListener('scroll', windowScrolled)
|
||||
|
||||
|
||||
375
website/views/pages/homepage.ejs
vendored
375
website/views/pages/homepage.ejs
vendored
@ -1,203 +1,192 @@
|
||||
<div id="homepage" v-cloak>
|
||||
|
||||
<div style="max-height: 1240px;">
|
||||
<%//Hero banner%>
|
||||
<div purpose="hero-background">
|
||||
<div purpose="hero-banner">
|
||||
<div purpose="hero-clouds">
|
||||
<div class="container-lg">
|
||||
<div class="container-fluid text-center">
|
||||
<h1 style="max-width: 680px;" class="mx-auto pt-lg-4">
|
||||
Lightweight, programmable server and workstation telemetry.
|
||||
</h1>
|
||||
<h6 style="max-width: 650px;" class="mx-auto mt-3 mb-0">
|
||||
The most accurate, actionable data from your servers and workstations, without the performance hit.
|
||||
</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="/try-fleet/register?tryitnow">Try it out</a>
|
||||
<a style="max-width: 220px;" class="btn btn-lg btn-white pl-4 mx-auto mx-sm-0" purpose="animated-arrow-button-white" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+top">Schedule a demo
|
||||
<div purpose="hero-text" class="container-fluid px-0 text-center">
|
||||
<span class="text-left text-md-center align-self-start text-nowrap mb-0" style="text-transform: uppercase;">Lightweight, programmable telemetry</span>
|
||||
<h1 style="max-width: 780px;" class="mx-auto text-left text-md-center">Solve endpoint mysteries</h1>
|
||||
<h6 style="max-width: 780px;" class="mx-auto mb-0 text-left text-md-center">Fleet gives visibility to over 1.65 million devices powering Fortune 1,000 companies. See how easy it can be to get all the answers you need.</h6>
|
||||
<div style="max-width: 500px;" class="mt-5 mx-auto mb-0 d-flex flex-column align-items-center justify-content-center">
|
||||
<a purpose="round-button" class="d-sm-flex align-items-center justify-content-center mx-auto mx-sm-0" href="/try-fleet/register?tryitnow">
|
||||
Try it out
|
||||
</a>
|
||||
</div>
|
||||
<img alt="Fleet ctl terminal and Fleet UI" src="/images/fleetctl-687x506@2x.png" style="max-width: 810px; height: auto;" class="w-100 py-3 py-sm-5 mx-auto"/>
|
||||
<p class="mb-0">For Mac, Windows, and Linux.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2" style="background-color: #192147;">
|
||||
<a href="#community">
|
||||
<div purpose="hero-logos" style="max-width: 780px;" class="mx-auto d-flex flex-row align-items-center justify-content-center">
|
||||
<div purpose="logo-column" class="flex-md-row flex-column d-flex justify-content-between align-items-center">
|
||||
<img purpose="snowflake-logo" class="ml-md-auto mb-4 mb-md-0" alt="snowflake logo" src="/images/logo-snowflake-white-151x30@2x.png">
|
||||
<img purpose="wayfair-logo" alt="wayfair logo" src="/images/logo-wayfair-150x33@2x.png">
|
||||
</div>
|
||||
<div purpose="logo-column" class="d-flex flex-md-row flex-column justify-content-between align-items-start align-items-md-center">
|
||||
<img purpose="uber-logo" alt="Uber logo" class="mb-4 mb-md-0" src="/images/logo-uber-84x29@2x.png">
|
||||
<img purpose="atlassian-logo" alt="Atlassian logo" class="mr-md-auto" src="/images/logo-atlassian-white-172x22@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid justify-content center px-0 py-0">
|
||||
<div style="max-width: 630px;" class="container text-center mx-auto pb-5">
|
||||
<h3 class="text-center pt-3 pb-4">
|
||||
Get real-time answers about all your servers and workstations in a single pane of glass.
|
||||
</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" />
|
||||
|
||||
<%// Homepage content %>
|
||||
<div purpose="homepage-section" style="background: #F4F6FA;" class="container-fluid justify-content center">
|
||||
<div class="text-left mx-auto">
|
||||
<div style="max-width: 1200px;" class="d-flex flex-lg-row flex-column align-items-center justify-content-between mx-auto">
|
||||
<div purpose="homepage-top-text-block">
|
||||
<h2 class="text-left pb-3">Fleet for osquery makes it easy to investigate all your servers and workstations</h2>
|
||||
<p class="pb-3 pb-lg-4">Ask any question about any endpoint anywhere. Fleet is compatible with every MDM and EDR platform on the market. Our open-source agent protects privacy and performance.</p>
|
||||
<a purpose="round-button" class="d-flex align-items-center justify-content-center mx-auto mx-sm-0 text-nowrap mt-3" @click="clickOpenVideoModal()">
|
||||
<img style="height: 24px; margin-right: 12px;" src="/images/icon-play-20x24@2x.png" alt="a small red play button"> See Fleet in action
|
||||
</a>
|
||||
</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" />
|
||||
<img purpose="top-image" src="/images/feature-fleet-ui-600x394@2x.png" alt="Fleet for osquery">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Product images and checklists %>
|
||||
<div purpose="homepage-section" class="container-fluid justify-content center">
|
||||
<div style="max-width: 1200px;" class="container-fluid px-0 justify-content-center">
|
||||
|
||||
<%// First image and feature checklist %>
|
||||
<div purpose="features" class="container-lg d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center mt-0">
|
||||
<div purpose="feature-image" class="d-flex flex-shrink-1">
|
||||
<img alt="Fleet UI" style="max-width: 100%" src="images/feature-realtime-600x382@2x.png" class="m-lg-0 w-100 h-100"/>
|
||||
</div>
|
||||
<div purpose="features-text" class="text-left pl-lg-4 pl-0 m-0">
|
||||
<div class="mx-auto mx-lg-0">
|
||||
<h2 class="mb-4">Accurate, comprehensive, up-to-date data</h2>
|
||||
<p>Get real-time results from all your endpoints — all in one place. Fleet fits into any security and compliance ecosystem. Our transparent approach makes adoption easier. So, you can find clues faster.</p>
|
||||
<div purpose="features-check-list" class="pt-4 mx-auto text-left">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-12"><p>Single source of truth</p></div>
|
||||
<div class="col-sm-6 col-12 pt-3 pt-sm-0"><p>Real-time insights</p></div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-sm-6 col-12"><p>Increased transparency</p></div>
|
||||
<div class="col-sm-6 col-12 pt-3 pt-sm-0"><p>Seamless integration</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%// Second image and feature checklist %>
|
||||
<div purpose="features" class="d-flex flex-wrap flex-lg-nowrap justify-content-lg-between justify-content-center align-items-center">
|
||||
<div purpose="features-text" class="text-left m-0 pr-0 pr-lg-4">
|
||||
<div>
|
||||
<h2 class="mb-4">No downtime risks or performance hits</h2>
|
||||
<p>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. Because your tools shouldn’t slow you down.</p>
|
||||
<div purpose="features-check-list" class="pt-4 mx-auto text-left">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-7"><p>Lightweight security agent</p></div>
|
||||
<div class="col-sm-6 col-7 pt-3 pt-sm-0"><p>Read-only data collection</p></div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-sm-6 col-12"><p>GitOps workflows</p></div>
|
||||
<div class="col-sm-6 col-12 pt-3 pt-sm-0"><p>Performance guardrails</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="feature-image" class="order-first order-lg-last d-flex flex-shrink-1 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-file-integrity-monitoring-600x357@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%// Third image and feature checklist %>
|
||||
<div purpose="features" class="d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-between align-items-center">
|
||||
<div purpose="features-text" class="text-left m-0 order-1 pl-0 pl-lg-4">
|
||||
<div>
|
||||
<h2 class="mb-4">Complete control over the queries you run</h2>
|
||||
<p>Create complex, custom queries just for your organization. Or copy and paste queries that have been vetted by the Fleet community. Either way, webhooks will help you automate IT admin and security compliance.</p>
|
||||
<div purpose="features-check-list" class="pt-4 mx-auto text-left">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-12"><p>Developer-friendly</p></div>
|
||||
<div class="col-sm-6 col-12 pt-3 pt-sm-0"><p>Query and policy library</p></div>
|
||||
</div>
|
||||
<div class="row pt-3">
|
||||
<div class="col-sm-6 col-12"><p>100% open source</p></div>
|
||||
<div class="col-sm-6 col-12 pt-3 pt-sm-0"><p>CI/CD compatibility</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="feature-image" class="order-first d-flex flex-shrink-1 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-threat-detection-600x400@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
Accurate, comprehensive, up‑to‑date data.
|
||||
</h3>
|
||||
<p>
|
||||
Make better data-driven decisions with a single source of truth for all operating systems.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 500px;" class="container d-flex px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-realtime-500x315@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
</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-right" class="container text-center text-lg-left pr-0 m-0">
|
||||
<h3>
|
||||
No downtime risks or performance hits.
|
||||
</h3>
|
||||
<p>
|
||||
Fleet's agent is lightweight, inspectable, and manageable through the CI/CD pipeline.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 500px;" class="container d-flex order-lg-first px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-file-integrity-monitoring-500x296@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
</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>Complete control over the queries you run.</h3>
|
||||
<p>
|
||||
Create complex, custom queries for your organization. Or copy and paste tested queries from our growing library.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 500px;" class="container d-flex px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-threat-detection-500x328@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
</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-right" class="container text-center text-lg-left pr-0 m-0">
|
||||
<h3>
|
||||
Increase your install rates.
|
||||
</h3>
|
||||
<p>
|
||||
Fleet's open-source agent protects device performance and provides transparency about the data it collects.
|
||||
</p>
|
||||
</div>
|
||||
<div style="max-width: 500px;" class="container d-flex order-lg-first px-2 px-sm-0 m-0">
|
||||
<img alt="Fleet UI" src="images/feature-increase-install-rates-500x322@2x.png" class="w-100 h-100 m-lg-0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-sm justify-content-center m-0 mb-5">
|
||||
<div style="max-width: 566px;" class="text-center px-2 px-sm-0 mx-auto">
|
||||
<h3 class="mb-3">Collect and push predictable data</h3>
|
||||
|
||||
<%// Log destinations %>
|
||||
<div class="container-sm justify-content-center m-0 pt-sm-5 pt-lg-0">
|
||||
<div purpose="homepage-text-block" class="text-left text-lg-center mx-sm-auto">
|
||||
<h2 class="mb-3">Collect and push predictable data</h2>
|
||||
<p>
|
||||
Automate scheduled queries to integrate alerts and dashboards across your enterprise.
|
||||
Automate scheduled queries to collect logs from all your endpoints. Focus on any log destination or easily build your own.
|
||||
</p>
|
||||
</div>
|
||||
<div purpose="log-destination-grid" class="container d-flex flex-wrap justify-content-center p-0 pt-4 mx-auto">
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2 mb-3">
|
||||
<img alt="filesystem icon" src="/images/icon-log-destination-filesystem-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Filesystem</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2 mb-3">
|
||||
<img alt="Splunk logo" src="/images/icon-log-destination-splunk-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Splunk</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2 mb-3">
|
||||
<img alt="AWS Kinesis logo" src="/images/icon-log-destination-firehose-40x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">AWS Kinesis</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2 mb-3">
|
||||
<img alt="Google Cloud Platform PubSub logo" src="/images/icon-log-destination-pubsub-53x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">GCP PubSub</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2 mb-3 mb-lg-0">
|
||||
<img alt="AWS Lambda logo" src="/images/icon-log-destination-lambda-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">AWS Lambda</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2 mb-3 mb-lg-0">
|
||||
<img alt="Elastic logo" src="/images/icon-log-destination-elastic-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Elastic</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2">
|
||||
<img alt="Sumo Logic logo" src="/images/icon-log-destination-sumo-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Sumo Logic</p>
|
||||
</div>
|
||||
<div purpose="log-destination" class="d-flex mx-1 mx-sm-2 mb-4">
|
||||
<div purpose="log-destination" class="d-flex mx-2 mx-sm-2">
|
||||
<img alt="Graylog logo" src="/images/icon-log-destination-graylog-48x48@2x.png"/>
|
||||
<p class="font-weight-bold m-0 ml-3">Graylog</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5">
|
||||
<a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/try-fleet/register?tryitnow">
|
||||
Try it out
|
||||
</a>
|
||||
<a style="max-width: 220px" class="btn btn-block btn-lg btn-white pl-0 m-0" purpose="animated-arrow-button-red" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+mid">
|
||||
Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<%// Try Fleet and Talk to an expert calls to action%>
|
||||
<div style="padding-top: 40px;" class="flex-sm-row d-flex flex-column justify-content-center align-items-center mx-auto">
|
||||
<a purpose="round-button" href="/try-fleet/register?tryitnow" class="btn d-flex flex-row justify-content-center">Try Fleet</a>
|
||||
<a purpose="animated-arrow-button-red" style="color: #192147;" href="https://calendly.com/fleetdm/demo?utm_source=homepage-demo-mid" target="_blank" class="btn">Talk to an expert</a>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="report-banner-container">
|
||||
<div purpose="report-banner-cta" class="d-flex flex-column flex-lg-row justify-content-center align-items-center container">
|
||||
<img class="mb-3 mb-lg-0" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="text-center text-lg-left">State of device management report</h4>
|
||||
<p class="mb-0">We surveyed 200+ security practitioners in charge of device management.<br class="d-none d-sm-block"> Here’s what we learned about their struggles, frustrations, and desires.</p>
|
||||
<a purpose="animated-arrow-button-red" class="btn pl-0 mx-auto ml-lg-0 pb-0" href="/reports/state-of-device-management">Read the report</a>
|
||||
<%// Background change to light gray%>
|
||||
<div id="community" purpose="homepage-section" style="background: #F4F6FA; position: relative">
|
||||
<div class="container-lg text-center justify-content-center mx-auto">
|
||||
<div purpose="homepage-text-block" class="d-flex flex-column align-items-center text-left text-sm-center mx-auto">
|
||||
<%// Slack call to action%>
|
||||
<h3 style="font-size: 24px; line-height: 40px;" class="text-left text-sm-center">Join the open-source community</h3>
|
||||
<p class="mb-4">
|
||||
Security and IT engineers are working together to make Fleet even better. From contributing patches to dreaming up features.
|
||||
</p>
|
||||
<a class="d-flex flex-row mx-auto text-nowrap justify-content-center" purpose="slack-button" href="/slack"><img style="height: 24px;" class="pr-3" alt="Slack logo" src="/images/logo-slack-24x24@2x.png"/>Join Fleet on Slack</a>
|
||||
</div>
|
||||
</div>
|
||||
</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">Fleet is open source and community supported.</h3>
|
||||
<p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
|
||||
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">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1">It’s great to see the new release of Fleet containing some really cool new features that make <a href="https://twitter.com/osquery">@osquery</a> much more usable in practical environments. I’m really impressed with the work that <a href="https://twitter.com/thezachw">@thezachw</a> and crew are doing at <a href="https://twitter.com/fleetctl">@fleetctl</a>.</p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Mike Arpaia</p>
|
||||
<p class="m-0">Creator of <a href="https://twitter.com/osquery">@osquery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/osquery">#osquery</a> is one of the best tools out there and <a href="https://twitter.com/hashtag/fleetdm">#fleetdm</a> makes it even better. Highly recommend it if you want to monitor, detect and investigate threats on a scale and also for infra/sys admin.</p>
|
||||
<p>I have used it on 15k servers and it’s really scalable.</p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Ahmed Elshaer</p>
|
||||
<p class="m-0">DFIR, Blue Teaming, SecOps <a href="https://twitter.com/Wayfair">@wayfair</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1">With the power of osquery, you need a scalable & resilient platform to manage your workloads. Fleet is the "just right" open-source, enterprise grade solution.</p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Abubakar Yousafzai</p>
|
||||
<p class="m-0">Security Software Development & Engineering <a href="https://twitter.com/comcast">@Comcast</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Tweet cards - Note: Only the top tweets will be visible until the "view more" button is clicked%>
|
||||
<div purpose="tweets" class="d-flex card-deck justify-content-sm-center mx-auto" :class="[showAllTweets ? 'all-visible' : 'truncated']">
|
||||
|
||||
<%// Uber tweet%>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/Uber"><img width="87" height="38" alt="Uber logo" src="/images/social-proof-logo-uber-87x38@2x.png"/></a>
|
||||
@ -210,6 +199,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Square tweet%>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/Square"><img width="131" height="38" alt="Square logo" src="/images/social-proof-logo-square-131x38@2x.png"/></a>
|
||||
@ -222,6 +212,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Atlassian tweet%>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/atlassian"><img width="162" height="20" alt="Atlassian logo" src="/images/social-proof-logo-atlassian-162x20@2x.png"/></a>
|
||||
@ -234,23 +225,75 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="px-4 mb-3">From small businesses to large enterprises.</h3>
|
||||
<p class="px-4">
|
||||
Teams use osquery with Fleet every day to stay secure and compliant.
|
||||
</p>
|
||||
<div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5 mb-md-5">
|
||||
<a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/try-fleet/register?tryitnow">
|
||||
Try it out
|
||||
</a>
|
||||
<a style="max-width: 220px" class="btn btn-block btn-lg btn-white pl-0 m-0" purpose="animated-arrow-button-red" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=homepage+demo+bottom">
|
||||
Schedule a demo
|
||||
</a>
|
||||
<%// Osquery tweet%>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1">It’s great to see the new release of Fleet containing some really cool new features that make <a href="https://twitter.com/osquery">@osquery</a> much more usable in practical environments. I’m really impressed with the work that <a href="https://twitter.com/thezachw">@thezachw</a> and crew are doing at <a href="https://twitter.com/fleetctl">@fleetctl</a>.</p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Mike Arpaia</p>
|
||||
<p class="m-0">Creator of <a href="https://twitter.com/osquery">@osquery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Wayfair tweet%>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/osquery">#osquery</a> is one of the best tools out there and <a href="https://twitter.com/hashtag/fleetdm">#fleetdm</a> makes it even better. Highly recommend it if you want to monitor, detect and investigate threats on a scale and also for infra/sys admin.</p>
|
||||
<p>I have used it on 15k servers and it’s really scalable.</p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Ahmed Elshaer</p>
|
||||
<p class="m-0">DFIR, Blue Teaming, SecOps <a href="https://twitter.com/Wayfair">@wayfair</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// Comcast tweet%>
|
||||
<div purpose="tweet-card" class="card">
|
||||
<div class="mb-4">
|
||||
<a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
|
||||
</div>
|
||||
<p class="pb-2 mb-1">With the power of osquery, you need a scalable & resilient platform to manage your workloads. Fleet is the "just right" open-source, enterprise grade solution.</p>
|
||||
<div class="row px-3 pt-2">
|
||||
<div>
|
||||
<p class="font-weight-bold m-0">Abubakar Yousafzai</p>
|
||||
<p class="m-0">Security Software Development & Engineering <a href="https://twitter.com/comcast">@Comcast</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%// View all tweets button%>
|
||||
<div class="d-flex flex-row justify-content-center">
|
||||
<div purpose="show-all-tweets-btn" @click="clickToggleTruncateTweets()" v-if="!showAllTweets">View more</div>
|
||||
<div purpose="show-all-tweets-btn" @click="clickToggleTruncateTweets()" v-if="showAllTweets">View less</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%// Fleet Sandbox call to action %>
|
||||
<div purpose="homepage-section" style="background: #F4F6FA;" class="d-flex flex-column mx-auto align-items-center justify-content-center pt-0">
|
||||
<img class="d-flex" style="max-width: 300px" src="/images/fleet-sandbox-300x200@2x.png" alt="Fleet Sandbox">
|
||||
<h4 class="pt-4">Start your free trial</h4>
|
||||
<p>Play around with Fleet on your device.</p>
|
||||
<a purpose="round-button" style="padding: 16px 33px;" class="btn btn-block d-flex flex-row justify-content-center align-items-center" href="/try-fleet/register?tryitnow">
|
||||
Try it out
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<modal v-if="modal === 'video'" @close="closeModal()" v-cloak>
|
||||
<div style="height: 100%;" class="d-flex flex-column align-items-center justify-content-center">
|
||||
<div purpose="embedded-content" class="container-lg">
|
||||
<iframe id="ytplayer" type="text/html"
|
||||
src="https://www.youtube.com/embed/1VNvg3_drow?autoplay=1&controls=1&modestbranding=1&playsinline=1&color=white"
|
||||
frameborder="0" allowfullscreen autoplay></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</modal>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
5
website/views/pages/platform.ejs
vendored
5
website/views/pages/platform.ejs
vendored
@ -16,11 +16,6 @@
|
||||
<img class="d-none d-lg-inline" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-748x540@2x.png">
|
||||
<img class="d-inline d-lg-none" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-748x480@2x.png">
|
||||
</div>
|
||||
<div purpose="banner-curve">
|
||||
<svg width="803" height="116" viewBox="0 0 803 116" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M765.665 116H0V0C270.295 89.7291 601.721 114.209 765.665 116H803C791.804 116.141 779.315 116.149 765.665 116Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user