diff --git a/website/assets/images/homepage-device-management-617x440@2x.png b/website/assets/images/homepage-device-management-617x440@2x.png new file mode 100644 index 0000000000..bc6ae138ee Binary files /dev/null and b/website/assets/images/homepage-device-management-617x440@2x.png differ diff --git a/website/assets/images/homepage-endpoint-ops-617x440@2x.png b/website/assets/images/homepage-endpoint-ops-617x440@2x.png new file mode 100644 index 0000000000..6909ac9161 Binary files /dev/null and b/website/assets/images/homepage-endpoint-ops-617x440@2x.png differ diff --git a/website/assets/images/homepage-osquery-management-543x371@2x.png b/website/assets/images/homepage-osquery-management-543x371@2x.png deleted file mode 100644 index bd6bae766b..0000000000 Binary files a/website/assets/images/homepage-osquery-management-543x371@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-security-compliance-520x337@2x.png b/website/assets/images/homepage-security-compliance-520x337@2x.png deleted file mode 100644 index 1c300395c9..0000000000 Binary files a/website/assets/images/homepage-security-compliance-520x337@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-vulnerability-management-530x458@2x.png b/website/assets/images/homepage-vulnerability-management-530x458@2x.png deleted file mode 100644 index 259b688f9b..0000000000 Binary files a/website/assets/images/homepage-vulnerability-management-530x458@2x.png and /dev/null differ diff --git a/website/assets/images/homepage-vulnerability-management-617x440@2x.png b/website/assets/images/homepage-vulnerability-management-617x440@2x.png new file mode 100644 index 0000000000..03b23043d4 Binary files /dev/null and b/website/assets/images/homepage-vulnerability-management-617x440@2x.png differ diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js index 6e7ba08873..51897dcc86 100644 --- a/website/assets/js/pages/homepage.page.js +++ b/website/assets/js/pages/homepage.page.js @@ -3,12 +3,8 @@ parasails.registerPage('homepage', { // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { - currentTweetPage: 0, - numberOfTweetCards: 6, - numberOfTweetPages: 0, - numberOfTweetsPerPage: 0, - tweetCardWidth: 0, modal: undefined, + selectedCategory: 'endpoint-ops' }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index ff35990273..873dbca4d6 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -97,17 +97,53 @@ } } - [purpose='logo-column'] { - img { - // margin-right: 35px; - // margin-left: 35px; - } - } - [purpose='homepage-content'] { max-width: 1200px; } + [purpose='category-switch'] { + width: 831px; + cursor: pointer; + border: 1px solid #E2E4EA; + border-radius: 28px; + background: @ui-off-white; + position: relative; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset; + margin-bottom: 60px; + margin-top: 100px; + color: @core-fleet-black; + [purpose='category-tier-switch'] { + position: absolute; + top: 0px; + left: -1px; + background: #fff; + border: 1px solid #E2E4EA; + border-radius: 28px; + height: 100%; + min-width: 140px; + z-index: 1; + transition: 0.3s all; + width: 277px; + } + [purpose='category-switch-option'] { + padding: 16px 40px; + text-align: center; + cursor: pointer; + z-index: 3; + user-select: none; + white-space: nowrap; + width: 277px; + } + .selected { + font-weight: 700; + } + .device-management-selected { + transform: translateX(100%); + } + .vulnerability-management-selected { + transform: translateX(200%); + } + } [purpose='homepage-text-block'] { margin-top: 160px; margin-bottom: 160px; @@ -126,6 +162,16 @@ } [purpose='platform-block'] { + &.hidden { + height: 0; + margin-bottom: 0; + opacity: 0; + transition: none; + } + &.show { + transition: opacity 0.3s ease-in; + opacity: 1; + } margin-bottom: 100px; h3 { font-weight: 800; @@ -140,6 +186,10 @@ } max-width: 1080px; } + [purpose='category-text-block'] { + max-width: 390px; + padding-right: 32px; + } [purpose='platform-left-text-block'] { max-width: 480px; margin-right: 80px; @@ -152,6 +202,13 @@ max-width: 320px; margin-right: 80px; } + [purpose='category-image'] { + width: 617px; + img { + width: 100%; + height: auto; + } + } [purpose='platform-image'] { width: 520px; img { @@ -214,7 +271,12 @@ width: 110%; } } - [purpose='animated-arrow-button-red'] { + [purpose='lg-animated-arrow-button-red'] { + br { + display: none; + } + } + [purpose='animated-arrow-button-red'], [purpose='lg-animated-arrow-button-red'] { display: inline; padding-right: 34px; cursor: pointer; @@ -486,6 +548,11 @@ } } + [purpose='category-text-block'] { + max-width: 390px; + padding-right: 0px; + } + } @media (max-width: 1199px) { @@ -528,7 +595,16 @@ 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='video-modal'] { [purpose='modal-dialog'] { width: 100%; @@ -557,6 +633,10 @@ max-width: 100%; height: 720px; } + [purpose='homepage-content'] { + padding-right: 60px; + padding-left: 60px; + } [purpose='hero-text'] { padding-top: 20px; max-width: 450px; @@ -587,9 +667,45 @@ } [purpose='logo-column'] { margin-bottom: 32px; - img { - // margin-right: 20px; - // margin-left: 20px; + } + [purpose='category-switch'] { + width: 687px; + [purpose='category-tier-switch'] { + width: 229px; + } + [purpose='category-switch-option'] { + width: 229px; + } + .device-management-selected { + transform: translateX(100%); + } + .vulnerability-management-selected { + transform: translateX(200%); + } + } + [purpose='category-text-block'] { + width: 100%; + max-width: 508px; + margin-right: 0px; + margin-bottom: 40px; + } + [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; } } @@ -677,6 +793,32 @@ } } + [purpose='category-switch'] { + width: 100%; + margin-top: 60px; + [purpose='category-tier-switch'] { + height: 56px; + left: 0px; + } + [purpose='category-switch-option'] { + height: 56px; + width: 100%; + } + .device-management-selected { + width: 100%; + transform: translateY(56px); + } + .vulnerability-management-selected { + width: 100%; + transform: translateY(113px); + } + .endpoint-ops-selected { + width: 100%; + } + } + + + [purpose='platform-left-text-block'] { max-width: 100%; margin-right: 0px; @@ -728,6 +870,9 @@ [purpose='three-column-features'] { margin-bottom: 120px; } + [purpose='testimonials'] { + margin-bottom: 60px; + } [purpose='testimonial'] { &:first-of-type { [purpose='testimonial-video'] { @@ -795,6 +940,32 @@ font-size: 16px; } } + [purpose='testimonials'] { + margin-bottom: 40px; + } + [purpose='category-switch'] { + margin-top: 40px; + } + + [purpose='category-image'] { + width: 100%; + height: auto; + [purpose='endpoint-ops-image'] { + width: calc(~'100% + 24px'); + 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='homepage-content'] { padding-right: 24px; @@ -910,13 +1081,25 @@ padding-right: 20px; padding-left: 20px; } - [purpose='hero-logos'] { img { display: inline; } } + [purpose='lg-animated-arrow-button-red'] { + br { + display: block; + } + &:after { + top: 18px; + left: 80px; + } + &:hover:after { + left: 85px; + } + } + } diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index f4f196b6c5..451985706b 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -85,53 +85,49 @@ - <%/* Device management block */%> -
-
-

GitOps-driven MDM

-

Automate the management of your fleet of devices with increased visibility and control, improved stability, all while automating configuration deployments using GitOps.

- More about device management +
+
Endpoint ops
+
Device management
+
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
-
- GitOps-driven MDM +
+ Endpoint ops +
+
+ + <%/* Device management block */%> +
+
+

Manage devices like code

+

Automate the management of your fleet of devices with increased visibility and control, improved stability, all while automating configuration deployments using GitOps.

+ More about device management +
+
+ GitOps-driven MDM
<%/* Vulnerability management block */%> -
-
- Vulnerability management +
+
+

Build the security platform your team actually wants

+

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

+ More about vulnerability
management
-
-

Know what’s going on with your computers

-

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

- More about vulnerability management +
+ Vulnerability management
- <%/* Security compliance block */%> -
-
-

Simplify security compliance

-

Policies make it easy to keep your devices compliant with your organization’s custom rules and common benchmarks like CIS. Quickly report your posture and vulnerabilities to auditors, showing remediation status and timing.

- More about security compliance -
-
- Security compliance -
-
- - <%/* Osquery management block */%> -
-
- Osquery management -
-
-

Deploy osquery at scale

-

Fleet provides a centralized management interface for osquery to deploy, update, and manage osquery agents across a thousand or one hundred thousand devices.

- More about osquery management -
-
<%/* Supported platforms */%>