Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 17:08:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 83

Merge branch 'main' into 14415

Browse source
This commit is contained in:
mostlikelee 2023-12-12 07:59:10 -07:00
commit 5c12b0a6ae
15 changed files with 547 additions and 446 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
website/assets/images/device-management-absolute-certainty-380x320@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
website/assets/images/device-management-all-platforms-welcome-320-249@2x.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 81 KiB

BIN
website/assets/images/device-management-bento-logos-320x295@2x.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 75 KiB

BIN
website/assets/images/device-management-clickops-or-devops-380x280@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 67 KiB

BIN
website/assets/images/device-management-convention-over-configuration-380x320@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
website/assets/images/device-management-hero-image-380x396@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
website/assets/images/device-management-realtime-visibility-320x294@2x.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 114 KiB

BIN
website/assets/images/device-management-transparency-380x320@2x.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
website/assets/images/device-management-transparency-438x373@2x.png vendored
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 151 KiB

BIN
website/assets/images/testimonial-kenny-botelho-48x48@2x.jpg vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

4
website/assets/js/pages/fleet-mdm.page.js vendored
View file

@ -45,6 +45,9 @@ parasails.registerPage('device-management', {
clickOpenMdmModal: function() {
this.modal = 'mdm';
},
clickOpenVideoModal: function(modalName) {
this.modal = modalName;
},
closeModal: async function () {
this.modal = '';
await this._resetForms();
@ -64,5 +67,6 @@ parasails.registerPage('device-management', {
this.formErrors = {};
await this.forceRender();
},
}
});

791
website/assets/styles/pages/fleet-mdm.less vendored
View file

@ -1,16 +1,14 @@
#device-management {
background: linear-gradient(180deg, #E8F1F6 0%, #FFF 8.76%);
h1 {
font-size: 56px;
font-weight: 800;
font-size: 64px;
line-height: 76px;
white-space: nowrap;
line-height: 54px;
}
h2 {
font-weight: 800;
font-size: 32px;
line-height: 38px;
margin-bottom: 40px;
}
h3 {
font-weight: 800;
@ -29,39 +27,61 @@
p {
font-size: 16px;
line-height: 24px;
color: @core-fleet-black-75;
}
a {
font-size: 14px;
color: @core-vibrant-blue;
text-decoration: underline;
strong {
colore: @core-fleet-black;
}
[purpose='page-content'] {
max-width: 960px;
}
[purpose='hero-background'] {
background: linear-gradient(180deg, #E8F1F7 3.37%, #FFFFFF 60%);
padding-top: 120px;
padding-bottom: 40px;
[purpose='page-container'] {
padding-left: 120px;
padding-right: 120px;
margin-left: auto;
margin-right: auto;
}
[purpose='page-headline'] {
padding-bottom: 60px;
h2 {
font-size: 64px;
font-style: normal;
font-weight: 800;
line-height: 1.2;
margin-bottom: 0px;
}
}
[purpose='hero-container'] {
max-width: 1200px;
[purpose='hero'] {
padding-top: 80px;
padding-bottom: 60px;
}
[purpose='hero-image'] {
max-width: 380px;
img {
padding-left: 25px;
max-width: 100%;
max-height: 100%;
width: 380px;
}
}
[purpose='hero-text'] {
text-align: center;
max-width: 940px;
padding: 0 40px;
h1 {
margin-bottom: 32px;
width: 468px;
margin-left: 40px;
text-align: left;
strong {
margin-bottom: 8px;
font-weight: 800;
display: block;
}
p {
font-size: 18px;
line-height: 27px;
max-width: 640px;
margin: 0 auto 32px;
margin-bottom: 40px;
}
}
[purpose='button-row'], [purpose='bottom-button-row'] {
[purpose='button-row'] {
a {
white-space: nowrap;
font-weight: 700;
font-size: 16px;
line-height: 24px;
@ -89,7 +109,7 @@
position: absolute;
top: 0;
left: -5px;
width: 50%;
width: 70%;
height: 100%;
transform: skew(-10deg);
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
@ -99,53 +119,11 @@
left: 160px;
width: 110%;
}
[purpose='animated-arrow-button-red'] {
display: inline;
padding-right: 40px;
cursor: pointer;
position: relative;
width: fit-content;
min-width: 125px;
font-weight: bold;
user-select: none;
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
color: @core-fleet-black;
text-decoration: none;
&:after {
content: url('/images/arrow-right-red-16x16@2x.png');
transform: scale(0.5);
position: absolute;
top: -5px;
left: 80%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity: 0; */
}
&:hover:after {
left: 82%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity:1; */
}
}
}
[purpose='bottom-button-row'] {
margin-top: 120px;
}
[purpose='scope-transparency-animated-arrow-button'] {
[purpose='animated-arrow-button-red'] {
display: inline;
font-size: 16px;
padding-right: 40px;
cursor: pointer;
position: relative;
width: fit-content;
@ -160,88 +138,224 @@
color: @core-fleet-black;
text-decoration: none;
&:after {
content: url('/images/arrow-right-red-16x16@2x.png');
transform: scale(0.5);
position: absolute;
top: -5px;
left: 100%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity: 0; */
content: url('/images/arrow-right-red-16x16@2x.png');
transform: scale(0.5);
position: absolute;
top: -5px;
left: 80%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity: 0; */
}
&:hover:after {
left: 102%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity:1; */
left: 82%; // <--- here
transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
/* opacity:1; */
}
}
[purpose='page-container'] {
padding-left: 40px;
padding-right: 40px;
padding-bottom: 120px;
[purpose='testimonial-videos'] {
width: 468px;
margin-left: 40px;
}
[purpose='testimonials'] {
padding-top: 60px;
margin-bottom: 160px;
}
[purpose='testimonial-quote'] {
width: 640px;
[purpose='quote'] {
p {
color: @core-fleet-black-75;
font-size: 20px;
font-style: italic;
font-weight: 400;
line-height: 30px;
}
}
[purpose='quote-image'] {
margin-right: 16px;
img {
width: 48px;
height: 48px;
}
}
[purpose='quote-attribution'] {
padding-top: 8px;
[purpose='name'] {
font-size: 12px;
font-weight: 700;
line-height: 18px;
margin-bottom: 0px;
}
[purpose='title'] {
color: @core-fleet-black-75;
font-size: 12px;
font-weight: 400;
line-height: 18px;
margin-bottom: 0px;
}
}
}
[purpose='testimonial-video'] {
cursor: pointer;
width: 223px;
height: 168px;
border-radius: 22.265px;
border: 0.975px solid @core-fleet-black-50;
display: flex;
margin-bottom: 0px;
position: relative;
span {
img {
height: 10.235px;
width: auto;
margin-right: 5.5px;
}
position: absolute;
left: 20px;
bottom: 20px;
border-radius: 16.698px;
background: rgba(0, 2, 10, 0.50);
backdrop-filter: blur(5.566145420074463px);
display: inline-flex;
padding: 5.566px 11.132px;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 11.132px;
font-style: normal;
font-weight: 400;
line-height: 16.698px;
}
&:hover {
box-shadow: 0px 4px 16px 0px #E2E4EA;
}
&:first-of-type {
background: url('/images/video-testimonial-thumbnail-austin-anderson-223x168@2x.jpg');
background-position: center;
background-size: cover;
margin-right: 12px;
margin-left: 0px;
}
&:last-of-type {
background: url('/images/video-testimonial-thumbnail-andre-shields-223x168@2x.png');
background-position: center;
background-size: cover;
margin-right: 0px;
margin-left: 12px;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
width: 100%;
max-width: 100%;
}
[purpose='modal-content'] {
max-width: 1140px;
height: 641px;
background-color: transparent;
box-shadow: none;
border: none;
padding: 0px;
margin-top: 150px;
margin-left: auto;
margin-right: auto;
[purpose='modal-close-button'] {
top: -40px;
right: 0px;
border-radius: 50%;
width: 32px;
height: 32px;
padding: 0px 0px 4px 0px;
background-color: #192147;
color: #FFF;
opacity: 1;
}
}
iframe {
width: 1140px;
height: 641px;
}
}
[purpose='feature'] {
margin-top: 120px;
max-width: 960px;
margin-bottom: 180px;
h3 {
margin-bottom: 24px;
}
div {
max-width: 480px;
}
}
[purpose='feature-image'] {
img {
max-height: 300px;
}
}
[purpose='scope-tansparency-feature-image'] {
img {
max-height: 320px;
}
}
[purpose='large-feature-image'] {
img {
max-height: 250px;
}
}
[purpose='checklists'] {
margin-top: 40px;
margin-bottom: 80px;
}
[purpose='checklist'] {
margin-bottom: 24px;
display: flex;
flex-direction: row;
// justify-content: center;
align-items: center;
img {
height: 16px;
width: 16px;
margin-right: 16px;
}
p {
&:last-of-type {
margin-bottom: 0px;
}
}
[purpose='tweets-container'] {
padding-top: 120px;
padding-bottom: 120px;
[purpose='feature-image'].left {
margin-left: 24px;
}
[purpose='feature-image'].right {
margin-right: 24px;
}
[purpose='feature-image'] {
max-width: 380px;
img {
max-width: 100%;
max-height: 100%;
width: 380px;
}
}
[purpose='feature-text'] {
width: 468px;
[purpose='animated-arrow-button-red'] {
margin-top: 32px;
}
}
[purpose='checklist'] {
margin-top: 8px;
p {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 21px;
padding-left: 37px;
text-indent: -37px;
margin-bottom: 1.5rem;
&:last-of-type {
margin-bottom: 0px;
}
}
p::before {
content: ' ';
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
background-size: 20px 20px;
display: inline-block;
position: relative;
top: 5px;
margin-right: 16px;
width: 20px;
height: 20px;
}
}
[purpose='tweets-container'] {
padding-top: 200px;
max-width: 960px;
}
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
margin-top: 40px;
}
}
[purpose='bottom-gradient'] {
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
}
@ -252,225 +366,83 @@
}
}
[purpose='modal-form'] {
color: #192147;
input {
border-radius: 6px;
// height: 48px;
}
// Disable default buttons on type="number" inputs
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input[type='radio'] {
accent-color: #6a67fe;
}
label {
font-weight: 700;
margin-bottom: 12px;
}
width: 100%;
max-width: 450px;
}
[purpose='submit-button'] {
border-radius: 8px;
height: 54px;
}
[purpose='mdm-modal'] {
h2 {
font-weight: 800;
font-size: 28px;
line-height: 38px;
}
p {
font-size: 16px;
line-height: 24px;
}
}
[purpose='modal-dialog'] {
max-width: 800px;
}
[purpose='modal-content'] {
background-color: #F9FAFC;
padding: 40px;
margin-top: 150px;
margin-left: auto;
margin-right: auto;
[purpose='modal-close-button'] {
top: -40px;
right: -40px;
border-radius: 50%;
width: 32px;
height: 32px;
padding: 0px 0px 4px 0px;
background-color: #192147;
color: #FFF;
opacity: 1;
}
}
@media (min-width: 1200px) {
@media (max-width: 1199px) {
[purpose='page-container'] {
padding-left: 120px;
padding-right: 120px;
padding-left: 80px;
padding-right: 80px;
}
[purpose='scope-tansparency-feature-image'] {
img {
max-height: 355px;
[purpose='video-modal'] {
[purpose='modal-dialog'] {
width: 100%;
max-width: 100%;
}
}
}
@media (max-width: 1200px) {
[purpose='logos'] {
height: 58px;
margin-left: auto;
margin-right: auto;
img {
margin-top: 23.5px;
margin-bottom: 23.5px;
padding-left: 25px;
padding-right: 25px;
[purpose='modal-content'] {
max-width: 960px;
height: 540px;
}
[purpose='snowflake-logo'] {
height: 21px;
}
[purpose='wayfair-logo'] {
height: 23px;
}
[purpose='uber-logo'] {
height: 20px;
}
[purpose='atlassian-logo'] {
height: 16px;
}
[purpose='segment-logo'] {
height: 22px;
iframe {
width: 960px;
height: 540px;
}
}
}
@media (max-width: 991px) {
[purpose='button-row'], [purpose='bottom-button-row'] {
margin-right: auto;
margin-left: auto;
[purpose='page-container'] {
padding-left: 40px;
padding-right: 40px;
}
[purpose='hero-background'] {
padding-top: 120px;
padding-bottom: 80px;
padding-left: 0px;
padding-right: 0px;
[purpose='page-content'] {
max-width: 840px;
}
h1 {
font-size: 50px;
line-height: 64px;
[purpose='tweets-container'] {
max-width: 840px;
}
[purpose='logos'] {
height: 58px;
margin-left: 20px;
margin-right: 20px;
img {
margin-top: 17.5px;
margin-bottom: 17.5px;
padding-left: 10px;
padding-right: 10px;
}
[purpose='testimonial-videos'] {
width: 410px;
}
[purpose='hero-text'] {
width: 410px;
}
[purpose='feature-text'] {
width: 410px;
}
}
@media (max-width: 768px) {
h1 {
font-size: 48px;
line-height: 54px;
white-space: normal;
}
@media (max-width: 767px) {
[purpose='page-container'] {
padding-left: 40px;
padding-right: 40px;
padding-bottom: 80px;
}
[purpose='checklists'] {
margin-bottom: 40px;
}
[purpose='feature'] {
margin-top: 80px;
}
[purpose='feature-image'], [purpose='large-feature-image'], [purpose='scope-tansparency-feature-image'] {
margin-bottom: 40px;
img {
max-height: 100%;
max-width: 100%;
}
}
[purpose='hero-background'] {
padding-top: 60px;
padding-bottom: 60px;
padding-left: 20px;
padding-right: 20px;
}
[purpose='hero-text'] {
text-align: center;
[purpose='page-content'] {
max-width: 480px;
}
[purpose='bottom-button-row'] {
margin-top: 80px;
}
[purpose='tweets-container'] {
padding-top: 80px;
padding-bottom: 80px;
max-width: 480px;
padding-left: 40px;
padding-right: 40px;
padding-top: 120px;
}
[purpose='logos'] {
height: auto;
}
}
@media (max-width: 575px) {
[purpose='modal-content'] {
background-color: #F9FAFC;
padding: 24px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
[purpose='modal-close-button'] {
top: 5px;
right: 0;
border-radius: 100%;
width: 32px;
height: 32px;
padding: 0;
background-color: unset;
color: #192147;
opacity: 1;
[purpose='page-headline'] {
padding-bottom: 80px;
width: 100%;
h2 {
font-size: 42px;
line-height: 50.4px;
}
}
[purpose='button-row'], [purpose='bottom-button-row'] {
[purpose='hero-image'] {
margin-right: unset;
}
[purpose='hero-text'] {
width: unset;
margin-left: auto;
}
[purpose='testimonial-videos'] {
width: unset;
}
[purpose='button-row'] {
max-width: 100%;
[purpose='cta-button'] {
margin-right: 0px;
@ -478,38 +450,163 @@
margin-bottom: 24px;
}
}
[purpose='bottom-button-row'] {
margin-top: 60px;
[purpose='feature-text'] {
width: unset;
}
[purpose='feature'] {
margin-top: 60px;
margin-bottom: 120px;
}
[purpose='feature-image'] {
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
&.left {
margin-left: auto;
}
&.right {
margin-right: auto;
}
}
[purpose='hero-image'] {
margin-bottom: 60px;
}
[purpose='testimonials'] {
margin-bottom: 120px;
}
[purpose='testimonial-videos'] {
margin-left: auto;
margin-right: auto;
}
[purpose='testimonial-quote'] {
width: 100%;
margin-bottom: 60px;
[purpose='quote'] {
img {
margin-right: auto;
margin-left: auto;
}
text-align: center;
}
[purpose='quote-image'] {
margin-bottom: 16px;
margin-right: auto;
margin-left: auto;
}
[purpose='quote-attribution'] {
text-align: center;
[purpose='name'] {
margin-bottom: 8px;
}
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
max-width: 97vw;
}
[purpose='modal-content'] {
max-width: 540px;
height: 304px;
}
iframe {
width: 540px;
height: 304px;
}
}
}
@media (max-width: 575px) {
[purpose='page-container'] {
padding-left: 20px;
padding-right: 20px;
padding-left: 40px;
padding-right: 40px;
}
[purpose='hero-text'] {
padding: 0;
}
[purpose='tweets-container'] {
padding-left: 20px;
padding-right: 20px;
padding-left: 40px;
padding-right: 40px;
}
[purpose='feature-image'] {
img {
max-width: 100%;
}
}
[purpose='hero-image'] {
img {
max-width: 100%;
}
}
[purpose='testimonial-video'] {
width: 200px;
height: 160px;
&:first-of-type {
margin-right: 10px;
margin-left: auto;
}
&:last-of-type {
margin-right: auto;
margin-left: 10px;
}
}
[parasails-component='scrollable-tweets'] [purpose='tweets'] {
margin-top: 40px;
[purpose='video-modal'] {
[purpose='modal-content'] {
width: 95vw;
height: calc(~'9/16 * 95vw');
}
iframe {
width: 95vw;
height: calc(~'9/16 * 95vw');
}
}
}
@media (max-width: 472px) {
[purpose='testimonial-videos'] {
flex-direction: column;
}
[purpose='testimonial-video'] {
width: 223px;
height: 168px;
&:first-of-type {
margin-right: auto;
margin-left: auto;
margin-bottom: 24px;
}
&:last-of-type {
margin-right: auto;
margin-left: auto;
}
}
}
@media (max-width: 375px) {
[purpose='scope-transparency-animated-arrow-button'] {
font-size: 14px;
[purpose='page-container'] {
padding-left: 32px;
padding-right: 32px;
}
[purpose='tweets-container'] {
padding-left: 32px;
padding-right: 32px;
}
[purpose='hero'] {
padding-top: 40px;
padding-bottom: 40px;
}
[purpose='hero-image'] {
max-height: 360px;
max-width: unset;
img {
max-width: 100%;
max-height: 100%;
width: 261px;
}
}
[purpose='testimonials'] {
padding-top: 40px;
margin-bottom: 80px;
}
[purpose='testimonial-quote'] {
margin-bottom: 40px;
}
[purpose='feature-image'] {
margin-bottom: 40px;
}
}
}

181
website/views/pages/fleet-mdm.ejs vendored
View file

@ -1,89 +1,107 @@
<div id="device-management" v-cloak>
<div purpose="hero-background" class="container-lg d-flex justify-content-center">
<div purpose="hero-container" class="d-flex flex-column align-items-center">
<div purpose="hero-text">
<h4 class="mb-2">Device management built for IT, security approved</h4>
<h1>Open-source MDM</h1>
<p>The future of IT and security is smart people using open-source tools. Whether you do pull requests or click around, Fleet is 100% open-source.</p>
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center">
<a purpose="cta-button" @click="clickOpenMdmModal()">See GitOps in action</a>
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
<div purpose="page-container">
<div purpose="page-content" class="mx-auto">
<div purpose="hero">
<div purpose="page-headline">
<h4>Device management (MDM)</h4>
<h2>Manage devices like code</h2>
</div>
<div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
<div purpose="hero-image">
<img alt="A laptop using Fleet to accurately display the status of MDM configurations" src="/images/device-management-hero-image-380x396@2x.png">
</div>
<div purpose="hero-text">
<strong>Convention over configuration</strong>
<p>Configure your devices with sensible defaults, or customize every traditional MDM feature exactly how you want it.</p>
<strong>Absolute certainty</strong>
<p><em>Actually</em> verify that settings are applied using real data pulled from your users' devices.</p>
<strong>ClickOps or DevOps</strong>
<p>Manage your IT infrastructure in any browser or use git to make changes as code. Use the CLI or API to automate the deployment, configuration, and monitoring of your devices.</p>
<div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
<a purpose="cta-button" @click="clickOpenMdmModal()">Show me</a>
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
</div>
</div>
</div>
</div>
<div purpose="testimonials" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
<div purpose="testimonial-quote">
<div purpose="quote">
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
<p>We wanted an open-source MDM that is easy to integrate with our configuration-as-code environment and to deliver the best possible experience for our employees and make security happy.</p>
</div>
<div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
<div purpose="quote-image"><img src="/images/testimonial-kenny-botelho-48x48@2x.jpg" alt="Kenny Botelho"></div>
<div class="d-flex flex-column">
<p purpose="name">Kenny Botelho</p>
<p purpose="title">Lead Client Platform Engineer</p>
</div>
</div>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="feature-image" class="right">
<img alt="Convention over configuration" src="/images/device-management-convention-over-configuration-380x320@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>Convention over configuration</h3>
<p>Configure your users' computers with sensible defaults, or customize every traditional MDM feature exactly how you want it with Fleet's API, CLI, and webhooks.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Set up and verify ongoing compliance with CIS standards (one click, 400+ queries, supported by Fleet)</p>
<p>Tasked with zero trust? Use sensible, enterprise-ready device health checks from the community</p>
<p>Use default workflows for employee offboarding, or run any low-level MDM command</p>
</div>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
<div purpose="feature-text" class="d-flex flex-column">
<h3>Absolute certainty</h3>
<p>Reduce time wasted hunting down whether a change happened. <em>Actually</em> verify that settings are applied using real data pulled from your users' devices.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Use a git repo as the source of truth to reduce errors (submitting the wrong patch, configuration setting etc).</p>
<p>Every change to a policy or security control is tracked and auditable in Fleet’s history, or via the repo commit log</p>
</div>
</div>
<div purpose="feature-image" class="left">
<img alt="Absolute certainty" src="/images/device-management-absolute-certainty-380x320@2x.png">
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="feature-image" class="right">
<img alt="ClickOps or DevOps" src="/images/device-management-clickops-or-devops-380x280@2x.png">
</div>
<div purpose="feature-text" class="d-flex flex-column">
<h3>ClickOps or DevOps</h3>
<p>Manage your IT infrastructure in any browser or use git to make infrastructure changes as code. You can use the CLI or API to automate the deployment, configuration, and monitoring of your devices.</p>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
<div purpose="feature-text" class="d-flex flex-column">
<h3>Transparency for end users</h3>
<p>Provide assurance to your end users with Fleet Desktop about what information is being collected from their device.</p>
<div purpose="checklist" class="flex-column d-flex">
<p>Let end users see the source code for exactly how they are being monitored.</p>
<p>Set clear expectations about what is and isn’t acceptable use of work computers.</p>
<p>Let users participate in fixing failing compliance policies.</p>
</div>
</div>
<div purpose="feature-image" class="left">
<img alt="Transparency for end users" src="/images/device-management-transparency-380x320@2x.png">
</div>
</div>
</div>
<div purpose="page-container" class="container-lg">
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
<div purpose="feature-left-text-block" class="d-flex flex-column">
<h3>Made for customization</h3>
<p>Integrations with leading configuration management platforms, including Chef, Munki, and Puppet, allow for efficiency in your management workflows. Our API and CLI provide the flexibility to program Fleet as you see fit.</p>
</div>
<div purpose="feature-image">
<img alt="A bento box featuring all the tools Fleet can bring together" src="/images/device-management-bento-logos-320x295@2x.png">
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="feature-image">
<img alt="A Fleet orb scanning a Laptop" src="/images/device-management-realtime-visibility-320x294@2x.png">
</div>
<div purpose="feature-right-text-block" class="d-flex flex-column">
<h3>Real-time visibility</h3>
<p>Don't worry about your workstation configuration being out of date. Fleet makes it easy to see which settings have been applied to your devices. Real-time results allow you to see the status of your entire fleet at any given moment.</p>
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
<div purpose="feature-left-text-block" class="d-flex flex-column">
<h3>All platforms welcome</h3>
<p>Give your teams access to any machine regardless of OS or manufacturer. Fleet supports Mac, Linux, Chromebooks, and Windows devices. So, you can make the most of your resources (and make everybody’s lives easier).</p>
</div>
<div purpose="feature-image">
<img alt="All platforms welcome" src="/images/device-management-all-platforms-welcome-320-249@2x.png">
</div>
</div>
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="scope-tansparency-feature-image">
<img alt="Transparency for end users" src="/images/device-management-transparency-438x373@2x.png">
</div>
<div purpose="feature-right-text-block" class="d-flex flex-column">
<h3>Transparency for end users</h3>
<p>Provide assurance to your end users about what information is being collected from their device.</p>
<div class="d-flex flex-column pb-4">
<div purpose="checklist">
<img alt="A green circle containing a checkmark" src="/images/icon-checkmark-circle-green-16x16@2x.png">
<p>Let end users see the source code for exactly how they are being monitored.</p>
</div>
<div purpose="checklist">
<img alt="A green circle containing a checkmark" src="/images/icon-checkmark-circle-green-16x16@2x.png">
<p>Set clear expectations about what is and isn’t acceptable use of work computers.</p>
</div>
<div purpose="checklist">
<img alt="A green circle containing a checkmark" src="/images/icon-checkmark-circle-green-16x16@2x.png">
<p>Let users participate in fixing things.</p>
</div>
</div>
<a purpose="scope-transparency-animated-arrow-button" href="/docs/using-fleet/fleet-desktop">Learn more about scope transparency</a>
</div>
</div>
<div purpose="bottom-button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" @click="clickOpenMdmModal()">See GitOps in action</a>
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
</div>
</div>
<%/* End of page gradient */%>
<div purpose="bottom-gradient">
<div purpose="tweets-container" class="container-fluid px-md-0 py-0 d-flex flex-column justify-content-center">
<div purpose="section-heading" style="max-width: 720px" class="mx-auto text-center">
<h4>Don’t know osquery?</h4>
<h2>Dedicated support from osquery experts</h2>
<p>Osquery is the open-source agent that powers Fleet. And we have the most osquery experts around. We’ll help you realize the potential of this tool for your organization.</p>
<div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
<div purpose="section-heading" class="mx-auto text-center">
<h4>Who else uses Fleet?</h4>
<h2>Empowering IT teams</h2>
</div>
</div>
@ -93,21 +111,19 @@
<div purpose="bottom-cta" class="text-center">
<h4>Open-source device management</h4>
<h1>Lighter than air</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>
<div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-md-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" @click="clickOpenMdmModal()">Show me</a>
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
</div>
</div>
</div>
<%/* Cloud city banner */%>
</div>
<%/* Cloud city banner */%>
<div class="d-flex flex-column" purpose="bottom-cloud-city-banner">
<img alt="A glass city floating on top of fluffy white clouds" class="d-none d-lg-flex" src="/images/homepage-cloud-city-banner-lg-1600x375@2x.png">
<img alt="A glass city floating on top of fluffy white clouds" class="d-none d-md-flex d-lg-none" src="/images/homepage-cloud-city-banner-md-990x375@2x.png">
<img alt="A glass city floating on top of fluffy white clouds" class="d-flex d-md-none" src="/images/homepage-cloud-city-banner-sm-375x168@2x.png">
</div>
<modal v-if="modal === 'mdm'" @close="closeModal()" data-backdrop="false" v-cloak purpose="modal">
<div class="container p-0 d-flex flex-column justify-content-center align-items-center" purpose="mdm-modal">
<div purpose="modal-form" v-if="!showSignupFormSuccess">
@ -151,6 +167,5 @@
</div>
</div>
</modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>

15
website/views/pages/homepage.ejs vendored
View file

@ -216,21 +216,6 @@
</div>
</div>
<%/* ClickOps or DevOps block */%>
<div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
<div purpose="platform-small-text-block" class="d-flex flex-column">
<h3>ClickOps or DevOps</h3>
<p>Manage your IT infrastructure <a href="/docs/using-fleet/fleet-ui">in any browser</a> or use <a href="/guides/using-github-actions-to-apply-configuration-profiles-with-fleet">git</a> to make infrastructure changes as code. You can use the <a href="/docs/using-fleet/fleetctl-cli">CLI</a> or <a href="/docs/using-fleet/rest-api">API</a> to automate the deployment, configuration, and monitoring of your devices.</p>
<a purpose="animated-arrow-button-red" href="/docs">Explore the docs</a>
</div>
<div purpose="platform-animated-image">
<div purpose="animated-image-layer-1"></div>
<div purpose="animated-image-layer-2"></div>
<div purpose="animated-image-layer-3"></div>
<img alt="A blank image" src="/images/homepage-image-container-617x440@2x.png">
</div>
</div>
<div purpose="homepage-text-block" class="text-center mx-auto">
<h2>Open by design</h2>
<p>Fleet is dedicated to flexibility, accessibility, and clarity. We think everyone can contribute and that tools should be as easy as possible for everyone to understand.</p>

2
website/views/pages/try-fleet/explore-data.ejs vendored
View file

@ -5,7 +5,7 @@
<p>See live data collected from a real device enrolled in Fleet.</p>
</div>
<div class="d-flex flex-md-row flex-column justify-content-center align-items-center">
<a href="/try-fleet/explore-data/macos/apps">
<a href="/try-fleet/explore-data/macos/account_policy_data">
<div purpose="explore-data-card" class="card">
<div purpose="card-body">
<img src="/images/logo-macos-muted-48x60@2x.png" alt="macOS logo">