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 @@
Replace the sprawl with open-source code that works the way you want.
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
+We can build it exactly the way we want it. Which is just not possible on other platforms.
-Austin Anderson
-Cybersecurity team senior manager
-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 */%> +Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.
+ +
+
- 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 -
+ <%/* Device management block */%>
+ Clear the way for "zero trust" and modernize your device management practices with a single, open platform for Apple, Windows, and Linux.
+
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
+ <%/* Vulnerability management block */%>
+ 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.
+ +
- Linux
(all distros)
Normalize how you manage clouds and computers without losing low-level access to OS-specific features.
+
- macOS
-
- Windows
-
- Chromebook
-
- AWS
-
- GCP
-
- Azure
(Microsoft Cloud)
- Data centers
-
- Containers
-
- IoT devices
(Linux-based)
+ AWS
+GCP
+
+ Azure
+
+ Data centers
+IoT (Linux)
+
+ macOS
+
+ Windows
+
+ Linux
+
+ Data centers
+
+ Chromebook
+
+ Containers
+
+ Chromebook
+
+ Containers
+IoT (Linux)
+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.