diff --git a/website/assets/images/device-management-hero-380x293@2x.png b/website/assets/images/device-management-hero-380x293@2x.png new file mode 100644 index 0000000000..c283d929bb Binary files /dev/null and b/website/assets/images/device-management-hero-380x293@2x.png differ diff --git a/website/assets/images/homepage-device-management-416x293@2x.png b/website/assets/images/homepage-device-management-416x293@2x.png new file mode 100644 index 0000000000..a3d6a56761 Binary files /dev/null and b/website/assets/images/homepage-device-management-416x293@2x.png differ diff --git a/website/assets/images/homepage-device-management-fleet-ui-617x440@2x.png b/website/assets/images/homepage-device-management-fleet-ui-617x440@2x.png deleted file mode 100644 index f94ded4200..0000000000 Binary files a/website/assets/images/homepage-device-management-fleet-ui-617x440@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-device-management-github-617x440@2x.png b/website/assets/images/homepage-device-management-github-617x440@2x.png deleted file mode 100644 index 076a14cd12..0000000000 Binary files a/website/assets/images/homepage-device-management-github-617x440@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-device-management-platform-image-376x293@2x.png b/website/assets/images/homepage-device-management-platform-image-376x293@2x.png new file mode 100644 index 0000000000..a8dee3ec2e Binary files /dev/null and b/website/assets/images/homepage-device-management-platform-image-376x293@2x.png differ diff --git a/website/assets/images/homepage-device-management-terminal-617x440@2x.png b/website/assets/images/homepage-device-management-terminal-617x440@2x.png deleted file mode 100644 index 3938c32d1c..0000000000 Binary files a/website/assets/images/homepage-device-management-terminal-617x440@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-aws-54x48@2x.png b/website/assets/images/homepage-platform-greyscale-aws-54x48@2x.png deleted file mode 100644 index a3baf6d5e8..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-aws-54x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-azure-24x24@2x.png b/website/assets/images/homepage-platform-greyscale-azure-24x24@2x.png deleted file mode 100644 index 5ce916c788..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-azure-24x24@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-chromeos-48x48@2x.png b/website/assets/images/homepage-platform-greyscale-chromeos-48x48@2x.png deleted file mode 100644 index 5e5abdccb9..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-chromeos-48x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-docker-48x48@2x.png b/website/assets/images/homepage-platform-greyscale-docker-48x48@2x.png deleted file mode 100644 index 33f5163a9e..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-docker-48x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-google-cloud-48x48@2x.png b/website/assets/images/homepage-platform-greyscale-google-cloud-48x48@2x.png deleted file mode 100644 index e680a198c3..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-google-cloud-48x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-iot-38x48@2x.png b/website/assets/images/homepage-platform-greyscale-iot-38x48@2x.png deleted file mode 100644 index 5397446b9e..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-iot-38x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-linux-41x48@2x.png b/website/assets/images/homepage-platform-greyscale-linux-41x48@2x.png deleted file mode 100644 index 02c11bbf88..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-linux-41x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-macos-42x48@2x.png b/website/assets/images/homepage-platform-greyscale-macos-42x48@2x.png deleted file mode 100644 index b4c08bf872..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-macos-42x48@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-platform-greyscale-windows-40x48@2x.png b/website/assets/images/homepage-platform-greyscale-windows-40x48@2x.png deleted file mode 100644 index 9b6927db2c..0000000000 Binary files a/website/assets/images/homepage-platform-greyscale-windows-40x48@2x.png and /dev/null differ diff --git a/website/assets/images/icon-gcp-36x36@2x.png b/website/assets/images/icon-gcp-36x36@2x.png new file mode 100644 index 0000000000..177f598c01 Binary files /dev/null and b/website/assets/images/icon-gcp-36x36@2x.png differ diff --git a/website/assets/images/icon-iot-36x36@2x.png b/website/assets/images/icon-iot-36x36@2x.png new file mode 100644 index 0000000000..5c82aa82c0 Binary files /dev/null and b/website/assets/images/icon-iot-36x36@2x.png differ diff --git a/website/assets/images/integration-icon-custom-workflows-32x36@2x.png b/website/assets/images/integration-icon-custom-workflows-32x36@2x.png new file mode 100644 index 0000000000..fe3343f491 Binary files /dev/null and b/website/assets/images/integration-icon-custom-workflows-32x36@2x.png differ diff --git a/website/assets/images/integration-logo-jira-32x36@2x.png b/website/assets/images/integration-logo-jira-32x36@2x.png new file mode 100644 index 0000000000..aa89f8d8ce Binary files /dev/null and b/website/assets/images/integration-logo-jira-32x36@2x.png differ diff --git a/website/assets/images/integration-logo-munki-36x36@2x.png b/website/assets/images/integration-logo-munki-36x36@2x.png new file mode 100644 index 0000000000..60d36cdda5 Binary files /dev/null and b/website/assets/images/integration-logo-munki-36x36@2x.png differ diff --git a/website/assets/images/integration-logo-snowflake-32x36@2x.png b/website/assets/images/integration-logo-snowflake-32x36@2x.png new file mode 100644 index 0000000000..69f07081e2 Binary files /dev/null and b/website/assets/images/integration-logo-snowflake-32x36@2x.png differ diff --git a/website/assets/images/logo-apple-36x36@2x.png b/website/assets/images/logo-apple-36x36@2x.png new file mode 100644 index 0000000000..aa46231ba2 Binary files /dev/null and b/website/assets/images/logo-apple-36x36@2x.png differ diff --git a/website/assets/images/logo-aws-36x36@2x.png b/website/assets/images/logo-aws-36x36@2x.png new file mode 100644 index 0000000000..202c2538d3 Binary files /dev/null and b/website/assets/images/logo-aws-36x36@2x.png differ diff --git a/website/assets/images/logo-azure-37x36@2x.png b/website/assets/images/logo-azure-37x36@2x.png new file mode 100644 index 0000000000..bed93db6ec Binary files /dev/null and b/website/assets/images/logo-azure-37x36@2x.png differ diff --git a/website/assets/images/logo-chrome-36x37@2x.png b/website/assets/images/logo-chrome-36x37@2x.png new file mode 100644 index 0000000000..599df7a4fb Binary files /dev/null and b/website/assets/images/logo-chrome-36x37@2x.png differ diff --git a/website/assets/images/logo-docker-40x40@2x.png b/website/assets/images/logo-docker-40x40@2x.png new file mode 100644 index 0000000000..4e1ebd4ea0 Binary files /dev/null and b/website/assets/images/logo-docker-40x40@2x.png differ diff --git a/website/assets/images/logo-gcp-36x36@2x.png b/website/assets/images/logo-gcp-36x36@2x.png new file mode 100644 index 0000000000..177f598c01 Binary files /dev/null and b/website/assets/images/logo-gcp-36x36@2x.png differ diff --git a/website/assets/images/logo-linux-36x36@2x.png b/website/assets/images/logo-linux-36x36@2x.png new file mode 100644 index 0000000000..1503c62448 Binary files /dev/null and b/website/assets/images/logo-linux-36x36@2x.png differ diff --git a/website/assets/images/logo-windows-36x36@2x.png b/website/assets/images/logo-windows-36x36@2x.png new file mode 100644 index 0000000000..31eeb4ff85 Binary files /dev/null and b/website/assets/images/logo-windows-36x36@2x.png differ diff --git a/website/assets/images/video-testimonial-austin-anderson-160x120@2x.png b/website/assets/images/video-testimonial-austin-anderson-160x120@2x.png new file mode 100644 index 0000000000..56bb9699b2 Binary files /dev/null and b/website/assets/images/video-testimonial-austin-anderson-160x120@2x.png differ diff --git a/website/assets/images/video-testimonial-nick-fohs-160x120@2x.png b/website/assets/images/video-testimonial-nick-fohs-160x120@2x.png new file mode 100644 index 0000000000..ab330a17f9 Binary files /dev/null and b/website/assets/images/video-testimonial-nick-fohs-160x120@2x.png differ diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js index 2020460b34..67d25a3cfb 100644 --- a/website/assets/js/pages/homepage.page.js +++ b/website/assets/js/pages/homepage.page.js @@ -4,7 +4,7 @@ parasails.registerPage('homepage', { // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { modal: undefined, - selectedCategory: 'endpoint-ops' + selectedCategory: 'device-management' }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 1b04527166..dad94d6190 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -2,18 +2,18 @@ h1 { font-weight: 800; font-size: 64px; - line-height: 1.2; + line-height: 120%; } h3 { font-weight: 800; font-size: 24px; - line-height: 32px; + line-height: 120%; margin-bottom: 24px; } h2 { font-weight: 800; - font-size: 36px; - line-height: 48px; + font-size: 32px; + line-height: 120%; margin-bottom: 24px; } @@ -22,15 +22,17 @@ font-style: normal; font-weight: 400; font-size: 18px; - line-height: 24px; + line-height: 120%; color: @core-fleet-black-75; margin-bottom: 4px; } p { color: @core-fleet-black-75; + line-height: 150%; } a { color: @core-vibrant-blue; + line-height: 150%; } [purpose='hero-container'] { @@ -107,6 +109,75 @@ [purpose='homepage-content'] { max-width: 1200px; } + [purpose='page-section'] { + margin-bottom: 180px; + max-width: 960px; + margin-left: auto; + margin-right: auto; + } + + [purpose='testimonials'] { + margin-bottom: 80px; + } + [purpose='testimonial'] { + border-radius: 16px; + border: 1px solid #E2E4EA; + background: #FFF; + cursor: pointer; + max-width: 550px; + padding: 24px; + flex-direction: row; + box-shadow: none; + [purpose='testimonial-text'] { + display: flex; + justify-content: center; + flex-direction: column; + margin-left: 24px; + p { + font-size: 12px; + font-style: normal; + font-weight: 400; + } + [purpose='testimonial-quote'] { + font-size: 14px; + font-style: italic; + color: #515774; + } + } + [purpose='testimonial-video'] { + min-width: 160px; + height: 120px; + margin-left: ; + border-radius: 8px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 0px; + } + &:hover { + box-shadow: 0px 4px 16px 0px #E2E4EA; + } + &:first-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-nick-fohs-160x120@2x.png'); + background-position: center; + background-size: cover; + } + margin-right: 20px; + margin-left: 0px; + } + &:last-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-austin-anderson-160x120@2x.png'); + background-position: center; + background-size: cover; + } + margin-right: 0px; + margin-left: 20px; + } + } + [purpose='category-switch'] { width: 831px; @@ -116,7 +187,7 @@ background: @ui-off-white; position: relative; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset; - margin-bottom: 60px; + margin-bottom: 80px; margin-top: 100px; color: @core-fleet-black; [purpose='category-tier-switch'] { @@ -144,7 +215,7 @@ .selected { font-weight: 700; } - .device-management-selected { + .endpoint-ops-selected { transform: translateX(100%); } .vulnerability-management-selected { @@ -169,55 +240,51 @@ } [purpose='platform-block'] { - &.hidden { - height: 0; - margin-bottom: 0; - opacity: 0; - transition: none; - } - &.show { - transition: opacity 0.3s ease-in; - opacity: 1; - [purpose='category-image'] { - [purpose='device-management-image'] { - [purpose='device-management-image-1'] { - transform: none; - } - [purpose='device-management-image-2'] { - transform: none; - - } - [purpose='device-management-image-3'] { - transform: none; - } - } - [purpose='vulnerability-management-image'] { - [purpose='vulnerability-management-image-1'] { - transform: none; - } - [purpose='vulnerability-management-image-2'] { - transform: none; - } - } - } - } - margin-bottom: 160px; + margin-bottom: 120px; h3 { font-weight: 800; font-size: 24px; line-height: 32px; } p { - margin-bottom: 24px; + margin-bottom: 40px; color: #515774; font-size: 16px; line-height: 24px; } max-width: 1080px; } + [purpose='category-image'] { + margin-left: 60px; + padding-right: 40px; + img { + width: auto; + height: 293px; + } + } + [purpose='category-button'] { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + a { + width: auto; + color: #FFF; + font-size: 16px; + font-weight: 700; + line-height: 21px; + display: flex; + height: 48px; + padding: 16px 32px; + justify-content: center; + align-items: center; + border-radius: 8px; + white-space: nowrap; + } + } [purpose='category-text-block'] { - max-width: 390px; - padding-right: 32px; + max-width: 428px; + padding-left: 40px; } [purpose='platform-left-text-block'] { max-width: 480px; @@ -231,94 +298,14 @@ max-width: 320px; margin-right: 80px; } + + [purpose='category-image'] { - width: 617px; img { - width: 100%; - height: auto; + width: auto; + height: 293px; } transition: transform 0.3s, right 0.3s, left 0.3s, bottom 0.3s; - [purpose='device-management-image'] { - position: relative; - width: 100%; - height: 440px; - [purpose='device-management-image-1'] { - background: url('/images/homepage-device-management-github-617x440@2x.png'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 0; - z-index: 1; - width: 100%; - height: 100%; - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; - transform: translate(10px, 10px); - } - [purpose='device-management-image-2'] { - background: url('/images/homepage-device-management-fleet-ui-617x440@2x.png'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 0; - z-index: 2; - width: 100%; - height: 100%; - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; - transform: translate(-10px, 10px); - } - [purpose='device-management-image-3'] { - background: url('/images/homepage-device-management-terminal-617x440@2x.png'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 0; - z-index: 3; - width: 100%; - height: 100%; - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; - transform: translate(10px, -10px); - } - } - - [purpose='vulnerability-management-image'] { - position: relative; - width: 100%; - height: 440px; - [purpose='vulnerability-management-image-1'] { - background: url('/images/homepage-vulnerability-management-table-617x440@2x.png'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - position: absolute; - top: 0; - right: 0; - z-index: 3; - width: 100%; - height: 100%; - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; - transform: translate(10px, 10px); - } - [purpose='vulnerability-management-image-2'] { - background: url('/images/homepage-vulnerability-management-chart-617x440@2x.png'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - position: absolute; - top: 0; - right: 0; - z-index: 3; - width: 100%; - height: 100%; - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s; - transform: translate(-10px, -10px); - } - } } [purpose='platform-image'] { width: 520px; @@ -327,52 +314,6 @@ height: auto; } } - [purpose='platform-animated-image'] { - position: relative; - width: 617px; - height: 440px; - img { - width: 100%; - height: 100%; - } - div { - position: absolute; - top: 0; - right: 0; - height: 100%; - width: 100%; - transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - [purpose='animated-image-layer-1'] { - background: url('/images/homepage-device-management-github-617x440@2x.png'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - z-index: 1; - transform: translate(10px, 10px); - } - [purpose='animated-image-layer-2'] { - background: url('/images/homepage-device-management-fleet-ui-617x440@2x.png'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - z-index: 2; - transform: translate(-10px, 10px); - } - [purpose='animated-image-layer-3'] { - background: url('/images/homepage-device-management-terminal-617x440@2x.png'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - z-index: 3; - transform: translate(10px, -10px); - } - &.animate { // This class is added when the element is completly visible. - div { - transform: none; - } - } - } [purpose='bottom-gradient'] { background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%); } @@ -421,12 +362,7 @@ width: 110%; } } - [purpose='lg-animated-arrow-button-red'] { - br { - display: none; - } - } - [purpose='animated-arrow-button-red'], [purpose='lg-animated-arrow-button-red'] { + [purpose='animated-arrow-button-red'], [purpose='animated-arrow-button-red-no-transform'] { display: inline; padding-right: 34px; cursor: pointer; @@ -465,57 +401,6 @@ /* opacity:1; */ } } - - [purpose='supported-platforms'] { - margin-left: auto; - margin-right: auto; - max-width: 824px; - margin-bottom: 160px; - h2 { - font-size: 32px; - line-height: 48px; - text-align: center; - margin-bottom: 40px; - } - [purpose='supported-platform-row'] { - justify-content: center; - padding-bottom: 24px; - } - [purpose='supported-platform'] { - width: 120px; - margin: 12px; - img { - margin-left: auto; - margin-right: auto; - height: 48px; - width: auto; - } - p { - line-height: 21px; - font-size: 14px; - margin-bottom: 0px; - text-align: center; - span { - font-size: 11px; - line-height: 16.5px; - } - } - } - } - [purpose='two-column-features'] { - max-width: 1080px; - margin-bottom: 160px; - [purpose='feature-row'] { - margin-bottom: 80px; - [purpose='feature'] { - max-width: 510px; - p { - font-size: 16px; - line-height: 24px; - } - } - } - } [purpose='three-column-features'] { margin-bottom: 160px; max-width: 1080px; @@ -538,7 +423,6 @@ [purpose='feature'] { margin-left: 30px; margin-right: 30px; - img { height: 64px; width: auto; @@ -553,79 +437,128 @@ } - [purpose='homepage-cards'] { - margin-top: 160px; - margin-bottom: 120px; - [purpose='homepage-card'] { - background: #FFFFFF; - box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.1); - border-radius: 16px; - padding: 40px; - width: 390px; - margin-left: 30px; - margin-right: 30px; - border: none; + [purpose='integration-cards'] { + margin-top: 40px; + margin-bottom: 40px; + [purpose='integration-card-column'] { + &:first-of-type { + margin-right: 12px; + margin-left: auto; + } + &:last-of-type { + margin-left: 12px; + margin-right: auto; + } + a:first-child { + margin-right: 12px; + } + a:last-child { + margin-left: 12px; + } + } + a { + text-decoration: none; } - } - [purpose='testimonials'] { - margin-bottom: 80px; - } + [purpose='integration-card'] { + &:hover { + box-shadow: 0px 4px 16px 0px #E2E4EA; + } - [purpose='testimonial'] { - border-radius: 12px; - border: 1px solid #E2E4EA; - background: #FFF; - cursor: pointer; - max-width: 550px; - [purpose='testimonial-text'] { - width: 320px; - padding: 40px; + cursor: pointer; + width: 222px; + height: 169px; + display: flex; + padding: 24px; + align-items: flex-start; + flex-direction: column; + border-radius: 8px; + border: 1px solid #E2E4EA; + background: #FFF; + img { + width: 32px; + height: 36px; + margin-bottom: 4px; + } p { font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 18px; + margin-bottom: 0px; } - [purpose='testimonial-quote'] { - font-size: 16px; - font-style: normal; - font-weight: 500; - line-height: 24px; + strong { + font-size: 14px; + line-height: 150%; + margin-bottom: 4px; } } - [purpose='testimonial-video'] { - width: 230px; - border-top-right-radius: 12px; - border-bottom-right-radius: 12px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin-bottom: 0px; - } - &:hover { - box-shadow: 0px 4px 16px 0px #E2E4EA; - } - &:first-of-type { - [purpose='testimonial-video'] { - background: url('/images/video-testimonial-nick-fohs-1440x810@2x.jpg'); - background-position: center; - background-size: cover; - } - margin-right: 20px; - margin-left: 0px; - } - &:last-of-type { - [purpose='testimonial-video'] { - background: url('/images/video-testimonial-austin-anderson-1440x810@2x.jpg'); - background-position: center; - background-size: cover; - } - margin-right: 0px; - margin-left: 20px; - } } + + [purpose='endpoints-banner'] { + display: flex; + max-width: 960px; + max-height: 340px; + padding: 0px 0px 0px 80px; + align-items: center; + justify-content: space-between; + gap: 24px; + align-self: stretch; + border-radius: 24px; + border: 2px solid #E2E4EA; + background: linear-gradient(97deg, #FFF 0%, #EDF7F9 100%); + overflow: hidden; + [purpose='endpoint-banner-text'] { + margin-top: 60px; + margin-bottom: 60px; + max-width: 400px; + width: 50%; + p { + margin-bottom: 24px; + } + } + [purpose='endpoints-images'] { + overflow: hidden; + max-width: 410px; + width: 50%; + position: relative; + top: 10px; + [purpose='endpoint-images-row'] { + display: flex; + flex-direction: row; + margin-bottom: 16px; + &:nth-of-type(odd) { + margin-left: 40px; + } + } + [purpose='endpoint-image-box'] { + display: flex; + width: 80px; + height: 80px; + padding: 16px 10px 7px 10px; + flex-direction: column; + justify-content: space-between; + align-items: center; + flex-shrink: 0; + border-radius: 12px; + border: 1px dashed #C5C7D1; + background: rgba(0, 0, 0, 0.01); + &:has(img){ + background: #FFF; + } + margin-left: 8px; + margin-right: 8px; + img { + width: 36px; + height: 36px; + } + p { + margin-bottom: 0px; + font-size: 9px; + font-weight: 500; + line-height: 12px; + } + } + } + } + [purpose='video-modal'] { [purpose='modal-dialog'] { width: 100%; @@ -659,7 +592,13 @@ } } - + // ██╗ ██╗██╗ + // ╚██╗██╔╝██║ + // ╚███╔╝ ██║ + // ██╔██╗ ██║ + // ██╔╝ ██╗███████╗ + // ╚═╝ ╚═╝╚══════╝ + // @media (max-width: 1400px) { [purpose='hero-logos'] { @@ -697,7 +636,7 @@ } [purpose='category-text-block'] { - max-width: 390px; + max-width: 468px; padding-right: 0px; } @@ -710,7 +649,13 @@ } } - + // ██╗ ██████╗ + // ██║ ██╔════╝ + // ██║ ██║ ███╗ + // ██║ ██║ ██║ + // ███████╗╚██████╔╝ + // ╚══════╝ ╚═════╝ + // @media (max-width: 1199px) { [purpose='hero-background-image'] { @@ -734,38 +679,9 @@ padding-right: 60px; padding-left: 60px; } - - [purpose='testimonial'] { - border-radius: 12px; - border: 1px solid #E2E4EA; - background: #FFF; - cursor: pointer; - max-width: 460px; - [purpose='testimonial-text'] { - width: 100%; - padding: 40px; - } - [purpose='testimonial-video'] { - height: 200px; - width: 100%; - border-top-right-radius: 12px; - border-top-left-radius: 12px; - border-bottom-right-radius: 0px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - &:first-of-type { - margin-right: 10px; - margin-left: 0px; - } - &:last-of-type { - margin-right: 0px; - margin-left: 10px; - } + [purpose='page-section'] { + margin-bottom: 160px; } - [purpose='video-modal'] { [purpose='modal-dialog'] { width: 100%; @@ -782,7 +698,13 @@ } } - + // ███╗ ███╗██████╗ + // ████╗ ████║██╔══██╗ + // ██╔████╔██║██║ ██║ + // ██║╚██╔╝██║██║ ██║ + // ██║ ╚═╝ ██║██████╔╝ + // ╚═╝ ╚═╝╚═════╝ + // @media (max-width: 991px) { [purpose='hero-background-image'] { @@ -833,6 +755,31 @@ margin-left: 0; } } + [purpose='page-section'] { + margin-bottom: 120px; + } + [purpose='testimonial'] { + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + cursor: pointer; + max-width: 100%; + &:first-of-type { + margin-right: 0px; + margin-left: 0px; + margin-bottom: 24px; + } + &:last-of-type { + margin-right: 0px; + margin-left: 0px; + } + [purpose='testimonial-text'] { + display: flex; + justify-content: center; + flex-direction: column; + } + } + [purpose='category-switch'] { width: 687px; [purpose='category-tier-switch'] { @@ -841,7 +788,7 @@ [purpose='category-switch-option'] { width: 229px; } - .device-management-selected { + .endpoint-ops-selected { transform: translateX(100%); } .vulnerability-management-selected { @@ -850,30 +797,41 @@ } [purpose='category-text-block'] { width: 100%; - max-width: 508px; + max-width: 100%; margin-right: 0px; margin-bottom: 40px; + padding-left: 0px; + text-align: center; } [purpose='category-image'] { width: 100%; height: auto; - [purpose='endpoint-ops-image'] { - width: calc(~'100% + 34px'); - height: auto; - margin-left: -17px; - } - [purpose='device-management-image'] { - width: calc(~'100% + 20px'); - height: auto; - margin-left: -10px; - } - [purpose='vulnerability-management-image'] { - width: calc(~'100% + 26px'); - height: auto; - margin-left: -12px; + margin-left: 0px; + padding-right: 0px; + img { + margin-left: auto; + margin-right: auto; + } + } + [purpose='category-button'] { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + a { + color: #FFF; + font-size: 16px; + font-weight: 700; + line-height: 21px; + display: flex; + height: 48px; + padding: 16px 32px; + justify-content: center; + align-items: center; + border-radius: 8px; } } - [purpose='platform-left-text-block'] { max-width: 357px; @@ -897,6 +855,86 @@ } } + [purpose='integration-cards'] { + [purpose='integration-card-column'] { + margin-left: 24px; + margin-right: 24px; + a:first-child { + margin-right: 0px; + } + a:last-child { + margin-left: 0px; + } + + } + [purpose='integration-card'] { + width: 100%; + display: flex; + padding: 24px; + align-items: flex-start; + justify-content: center; + flex-direction: column; + border-radius: 8px; + border: 1px solid #E2E4EA; + background: #FFF; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 24px; + + img { + width: 32px; + height: 36px; + margin-bottom: 4px; + } + p { + font-size: 12px; + margin-bottom: 0px; + } + strong { + font-size: 14px; + line-height: 150%; + margin-bottom: 4px; + } + } + } + [purpose='endpoints-banner'] { + max-height: 282px; + padding-left: 40px; + [purpose='endpoint-banner-text'] { + margin-top: 40px; + margin-bottom: 40px; + h2 { + font-size: 24px; + } + } + [purpose='endpoints-images'] { + [purpose='endpoint-images-row'] { + margin-bottom: 12px; + [purpose='endpoint-image-box'] { + width: 60px; + height: 60px; + padding: 12px 7.5px 5.25px 7.5px; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin-left: 6px; + margin-right: 6px; + img { + width: 27px; + height: 27px; + } + p { + font-size: 6.75px; + font-weight: 500; + line-height: 9px; + } + } + } + } + } + + + [purpose='bottom-cloud-city-banner'] { max-height: 375px; height: auto; @@ -918,11 +956,17 @@ } } } - + // ███████╗███╗ ███╗ + // ██╔════╝████╗ ████║ + // ███████╗██╔████╔██║ + // ╚════██║██║╚██╔╝██║ + // ███████║██║ ╚═╝ ██║ + // ╚══════╝╚═╝ ╚═╝ + // @media (max-width: 767px) { h1 { - font-size: 54px; + font-size: 48px; } [purpose='hero-background-image'] { background-size: 2600px auto; @@ -954,6 +998,9 @@ margin-top: 32px; margin-bottom: 120px; } + [purpose='page-section'] { + margin-bottom: 80px; + } [purpose='homepage-text-block'] { margin-bottom: 80px; @@ -962,7 +1009,6 @@ margin: 0 auto; } } - [purpose='category-switch'] { width: 100%; margin-top: 60px; @@ -974,7 +1020,7 @@ height: 56px; width: 100%; } - .device-management-selected { + .endpoint-ops-selected { width: 100%; transform: translateY(56px); } @@ -982,13 +1028,10 @@ width: 100%; transform: translateY(113px); } - .endpoint-ops-selected { + .device-management-selected { width: 100%; } } - - - [purpose='platform-left-text-block'] { max-width: 100%; margin-right: 0px; @@ -1007,6 +1050,7 @@ } [purpose='platform-image'] { width: 100%; + height: 293px; } [purpose='platform-animated-image'] { width: 100%; @@ -1015,29 +1059,6 @@ height: auto; } } - [purpose='supported-platforms'] { - margin-bottom: 100px; - } - - [purpose='platform'] { - margin-bottom: 80px; - } - [purpose='homepage-cards'] { - margin-bottom: 100px; - [purpose='homepage-card'] { - background: #FFFFFF; - box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.1); - border-radius: 16px; - padding: 40px; - width: 100%; - margin-left: auto; - margin-right: auto; - border: none; - &:first-of-type { - margin-bottom: 60px; - } - } - } [purpose='three-column-features'] { margin-bottom: 120px; } @@ -1047,17 +1068,15 @@ [purpose='testimonial'] { &:first-of-type { [purpose='testimonial-video'] { - background: url('/images/video-testimonial-nick-fohs-1440x810@2x.jpg'); background-position: center; background-size: cover; } margin-right: auto; margin-left: auto; - margin-bottom: 40px; + margin-bottom: 20px; } &:last-of-type { [purpose='testimonial-video'] { - background: url('/images/video-testimonial-austin-anderson-1440x810@2x.jpg'); background-position: center; background-size: cover; } @@ -1065,6 +1084,97 @@ margin-left: auto; } } + [purpose='endpoints-banner'] { + max-height: 480px; + flex-direction: column; + padding-left: 0px; + padding-top: 40px; + [purpose='endpoint-banner-text'] { + width: 100%; + text-align: center; + padding-left: 40px; + padding-right: 40px; + margin-top: 0px; + margin-bottom: auto; + } + [purpose='endpoints-images'] { + width: 110%; + max-width: unset; + align-items: center; + display: flex; + flex-direction: column; + [purpose='endpoint-images-row'] { + [purpose='endpoint-image-box'] { + display: flex; + width: 80px; + height: 80px; + padding: 16px 10px 7px 10px; + flex-direction: column; + justify-content: space-between; + align-items: center; + flex-shrink: 0; + border-radius: 12px; + border: 1px dashed #C5C7D1; + background: rgba(0, 0, 0, 0.01); + &:has(img){ + background: #FFF; + } + margin-left: 8px; + margin-right: 8px; + img { + width: 36px; + height: 36px; + } + p { + margin-bottom: 0px; + font-size: 9px; + font-weight: 500; + line-height: 12px; + } + } + } + } + + } + [purpose='category-button'] { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + a { + color: #FFF; + font-size: 16px; + font-weight: 700; + line-height: 21px; + display: flex; + height: 48px; + padding: 16px 32px; + justify-content: center; + align-items: center; + border-radius: 8px; + } + } + [purpose='three-column-features'] { + margin-bottom: 100px; + h2 { + text-align: center; + } + [purpose='feature-row'] { + [purpose='feature'] { + max-width: 100%; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 60px; + text-align: center; + img { + margin-right: auto; + margin-left: auto; + } + } + } + } + [purpose='video-modal'] { [purpose='modal-dialog'] { max-width: 97vw; @@ -1080,15 +1190,21 @@ } [purpose='bottom-cta'] { h1 { - font-size: 54px; + font-size: 48px; } } } - + // ██╗ ██╗███████╗ + // ╚██╗██╔╝██╔════╝ + // ╚███╔╝ ███████╗ + // ██╔██╗ ╚════██║ + // ██╔╝ ██╗███████║ + // ╚═╝ ╚═╝╚══════╝ + // @media (max-width: 575px) { h1 { - font-size: 40px; + font-size: 36px; } h4 { font-size: 14px; @@ -1115,6 +1231,19 @@ [purpose='testimonials'] { margin-bottom: 40px; } + [purpose='testimonial'] { + flex-direction: column; + padding: 16px; + padding-bottom: 32px; + [purpose='testimonial-text'] { + margin-left: 0px; + } + [purpose='testimonial-video'] { + width: 100%; + height: 228px; + margin-bottom: 24px; + } + } [purpose='category-switch'] { margin-top: 40px; } @@ -1122,20 +1251,16 @@ [purpose='category-image'] { width: 100%; height: auto; - [purpose='endpoint-ops-image'] { - width: calc(~'100% + 24px'); + img { + max-height: 293px; + max-width: 100%; + width: auto; height: auto; - margin-left: -12px; } - [purpose='device-management-image'] { - width: calc(~'100% + 14px'); - height: auto; - margin-left: -7px; - } - [purpose='vulnerability-management-image'] { - width: calc(~'100% + 18px'); - height: auto; - margin-left: -9px; + } + [purpose='category-button'] { + a { + width: 100%; } } @@ -1147,24 +1272,41 @@ [purpose='platform-left-text-block'], [purpose='platform-right-text-block'] { text-align: left; } + // To make the secondary CTA buttons into white outline buttons, uncomment this section. + // [purpose='animated-arrow-button-red'], [purpose='lg-animated-arrow-button-red'] { + // display: flex; + // width: 100%; + // background-color: #FFF; + // border-radius: 8px; + // border: 1px solid #8B8FA2; + // font-size: 16px; + // font-weight: 700; + // line-height: 21px; + // display: flex; + // height: 48px; + // padding: 16px 32px; + // justify-content: center; + // align-items: center; + // border-radius: 8px; + // cursor: pointer; + // position: relative; + // &:after { + // content: ' '; + // top: 0px; + // right: 0px; // <--- here + // } + // &:hover:after { + // right: 0px; // <--- here + // } + // } [purpose='button-row'] { [purpose='cta-button'] { cursor: pointer; margin-right: 0px; width: 100%; - margin-bottom: 24px; + margin-bottom: 12px; } } - [purpose='platform-image'] { - width: 100%; - img { - width: 100%; - height: auto; - } - } - [purpose='supported-platform'] { - margin-bottom: 24px; - } [purpose='two-column-features'] { margin-bottom: 100px; @@ -1183,25 +1325,7 @@ } } } - [purpose='three-column-features'] { - margin-bottom: 100px; - h2 { - text-align: center; - } - [purpose='feature-row'] { - [purpose='feature'] { - max-width: 100%; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 60px; - text-align: center; - img { - margin-right: auto; - margin-left: auto; - } - } - } - } + [purpose='hero-logos'] { max-width: 335px; padding-left: 20px; @@ -1220,23 +1344,90 @@ height: calc(~'9/16 * 95vw'); } } + [purpose='endpoints-banner'] { + [purpose='endpoints-images'] { + [purpose='endpoint-images-row'] { + margin-bottom: 12px; + [purpose='endpoint-image-box'] { + width: 60px; + height: 60px; + padding: 12px 7.5px 5.25px 7.5px; + margin-left: 6px; + margin-right: 6px; + img { + width: 27px; + height: 27px; + } + p { + font-size: 6.75px; + font-weight: 500; + line-height: 9px; + } + } + } + } + } + [purpose='integration-cards'] { + margin-bottom: 40px; + [purpose='integration-card-column'] { + &:first-of-type { + margin-right: 0px; + margin-left: 0px; + } + &:last-of-type { + margin-left: 0px; + margin-right: 0px; + } + [purpose='integration-card'] { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + width: 100%; + } + &:first-of-type { + // [purpose='integration-card'] { + // margin-left: 0px; + // margin-right: 0px; + // } + } + &:last-of-type { + // [purpose='integration-card'] { + // margin-left: 0px; + // margin-right: 0px; + // } + } + + } + } [purpose='bottom-cta'] { h1 { - font-size: 40px; + font-size: 36px; } } } - + // ██╗ ██╗██╗ ██╗███████╗ + // ╚██╗██╔╝╚██╗██╔╝██╔════╝ + // ╚███╔╝ ╚███╔╝ ███████╗ + // ██╔██╗ ██╔██╗ ╚════██║ + // ██╔╝ ██╗██╔╝ ██╗███████║ + // ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ + // @media (max-width: 375px) { h1 { - font-size: 35px; + font-size: 32px; } h4 { - font-size: 14px; + font-size: 12px; } + [purpose='truncated-vulnerability-management-text'] { + + display: none; + + } [purpose='hero-background-image'] { background-size: 1400px auto; background-position: center bottom; @@ -1249,6 +1440,12 @@ font-size: 16px; } } + [purpose='endpoints-banner'] { + [purpose='endpoint-banner-text'] { + padding-left: 24px; + padding-right: 24px; + } + } [purpose='homepage-hero'] { height: 647px; @@ -1263,6 +1460,29 @@ display: inline; } } + [purpose='endpoints-banner'] { + [purpose='endpoints-images'] { + [purpose='endpoint-images-row'] { + margin-bottom: 12px; + [purpose='endpoint-image-box'] { + width: 54.427px; + height: 54.427px; + padding: 10.885px 6.803px 4.762px 6.803px; + margin-left: 6px; + margin-right: 6px; + img { + width: 24px; + height: 24px; + } + p { + font-size: 6px; + font-weight: 500; + line-height: 9px; + } + } + } + } + } [purpose='lg-animated-arrow-button-red'] { br { @@ -1278,7 +1498,10 @@ } [purpose='bottom-cta'] { h1 { - font-size: 35px; + font-size: 32px; + } + h4 { + font-size: 12px; } } diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index bad3b0c08f..73b958ea24 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -6,12 +6,12 @@
<%/* Hero text */%>
-

For teams with lots of endpoints

-

Focus on data, not vendors

+

For teams with lots of different endpoints

+

Your last MDM migration

Replace the sprawl with open-source code that works the way you want.

@@ -62,126 +62,219 @@ <%/* Homepage content */%>
<%/* Testimonial videos */%> -
-
-
- an opening quotation mark -

Context is king for device data, and Fleet provides a way to surface that information to our other teams and partners.

-

Nick Fohs

-

Systems and IT infrastructure manager

+
+
+
+
+
+
+

“Fleet lets us to be as lightweight as possible while surfacing data to other teams and partners.”

+

Nick Fohs

+

Systems and IT infrastructure manager

+
-
+
+
+
+
+

“We can build it exactly the way we want it. Which is just not possible on other platforms.”

+

Austin Anderson

+

Cybersecurity team senior manager

+
-
-
- an opening quotation mark -

We can build it exactly the way we want it. Which is just not possible on other platforms.

-

Austin Anderson

-

Cybersecurity team senior manager

-
-
-
-
-
-
-
Endpoint ops
-
Device management
-
Vulnerability management
-
-
+
+
Device management
+
Endpoint ops
+
Vulnerability management
+
+
- <%/* Endpoint ops block */%> -
-
-

Focus on data, not vendors

-

Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.

- More about endpoint ops + <%/* Endpoint ops block */%> +
+
+

Focus on data, not vendors

+

Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.

+ +
+
+ Endpoint ops +
-
- Endpoint ops -
-
- <%/* Device management block */%> -
-
-

Manage devices like code

-

Manage your IT infrastructure in any browser, or use git to make changes using your existing approval processes and audit trail.

- More about device management -
-
-
-
-
-
- A blank image + <%/* Device management block */%> +
+
+

Manage everything in one place

+

Clear the way for "zero trust" and modernize your device management practices with a single, open platform for Apple, Windows, and Linux.

+ +
+
+ Operating systems entering a glass device management dome
-
- <%/* Vulnerability management block */%> -
-
-

Build the vulnerability program you actually want

-

Show how quickly CVEs are resolved and which teams need extra help. Manage and report on vulnerabilities in operating systems, software packages, browser plugins, anywhere.

- More about vulnerability
management
-
-
-
-
-
- A blank image + <%/* Vulnerability management block */%> +
+
+

Build the vulnerability program you actually want

+

Show how quickly CVEs are resolved and which teams need extra help. Manage and report on vulnerabilities in operating systems, software packages, browser plugins, anywhere.

+ +
+
+ A pocket monster orb being scanned for vulnerabilities
+ <%/* Integration cards */%> +

Connect your favorite tools

+ +
- - <%/* Supported platforms */%> -
-

An open API for every endpoint

-
-
- Linux -

Linux
(all distros)

+
+
+
+

An open interface for every endpoint

+

Normalize how you manage clouds and computers without losing low-level access to OS-specific features.

+
-
- macOS -

macOS

-
-
- Windows -

Windows

-
-
- ChromeOS -

Chromebook

-
-
- AWS -

AWS

-
-
- Google Cloud -

GCP

-
-
- Azure -

Azure
(Microsoft Cloud)

-
-
- Datacenters -

Data centers

-
-
- Containers -

Containers

-
-
- IOT -

IoT devices
(Linux-based)

+
+
+
+
+
+
+
+
+
+
+
+ AWS +

AWS

+
+
+ Google Cloud +

GCP

+
+
+ Azure +

Azure

+
+
+ Datacenters +

Data centers

+
+
+ IOT +

IoT (Linux)

+
+
+
+
+
+
+
+
+ macOS +

macOS

+
+
+ Windows +

Windows

+
+
+ Linux +

Linux

+
+
+ Datacenters +

Data centers

+
+
+ ChromeOS +

Chromebook

+
+
+ Containers +

Containers

+
+
+
+
+
+
+
+ ChromeOS +

Chromebook

+
+
+ Containers +

Containers

+
+
+ IOT +

IoT (Linux)

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -190,10 +283,10 @@
-
+
- transparency + transparency
Scope transparency

Let end users see the source code for exactly how they are being monitored, and set clear expectations about what is and isn’t acceptable use of work computers.

@@ -218,11 +311,11 @@
-

For teams with lots of endpoints

-

Focus on data, not vendors

+

For teams with lots of different endpoints

+

Your last MDM migration