diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 4a38cbbf0f..e582b03f5e 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -224,45 +224,66 @@ h2 { font-weight: 800; font-size: 32px; - line-height: 48px; margin-bottom: 24px; } p { font-weight: 400; font-size: 16px; - line-height: 24px; } } [purpose='platform-block'] { margin-bottom: 120px; - h3 { - font-weight: 800; - font-size: 24px; - line-height: 32px; - } - p { - margin-bottom: 40px; - color: #515774; - font-size: 16px; - line-height: 24px; - } max-width: 1080px; } - [purpose='category-image'] { - margin-left: 60px; - padding-right: 40px; + [purpose='category-text-block'] { + max-width: 468px; + h4 { + font-size: 16px; + } + h3 { + font-size: 32px; + margin-bottom: 32px; + } + p { + margin-bottom: 32px; + } + } + [purpose='endpoint-ops-image'] { + max-width: 380px; img { + display: flex; width: 380px; - height: auto; + height: 380px; + padding: 20px; + flex-direction: column; + justify-content: center; + align-items: center; + flex-shrink: 0; + } + } + [purpose='device-management-image'] { + max-width: 380px; + img { + display: flex; + width: 380px; + height: 380px; + padding: 50px 10px; + justify-content: center; + align-items: center; + flex-shrink: 0; } } [purpose='vuln-management-image'] { - margin-left: 60px; - padding-right: 40px; + max-width: 380px; img { - width: 360px; - height: auto; + display: flex; + width: 380px; + height: 380px; + padding: 20px 36px 20px 35px; + justify-content: center; + align-items: center; + flex-shrink: 0; } } [purpose='category-button'] { @@ -285,10 +306,7 @@ white-space: nowrap; } } - [purpose='category-text-block'] { - max-width: 428px; - padding-left: 40px; - } + [purpose='bottom-gradient'] { background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%); @@ -332,7 +350,7 @@ } } [purpose='animated-arrow-button-red'], [purpose='animated-arrow-button-red-no-transform'] { - display: inline; + display: flex; padding-right: 34px; cursor: pointer; position: relative; @@ -597,11 +615,6 @@ margin-left: auto; } } - - [purpose='category-text-block'] { - max-width: 468px; - padding-right: 0px; - } } // ██╗ ██████╗ // ██║ ██╔════╝ @@ -773,32 +786,27 @@ } } [purpose='category-text-block'] { - width: 100%; - max-width: 100%; - margin-right: 0px; - margin-bottom: 40px; - padding-left: 0px; - text-align: center; + max-width: 410px; } - [purpose='category-image'] { - width: 100%; - height: auto; - margin-left: 0px; - padding-right: 0px; + [purpose='endpoint-ops-image'] { + margin-right: 24px; img { - margin-left: auto; - margin-right: auto; + height: auto; + width: 100%; + } + } + [purpose='device-management-image'] { + margin-left: 24px; + img { + height: auto; + width: 100%; } } [purpose='vuln-management-image'] { - width: 100%; - height: auto; - margin-left: 0px; - padding-right: 0px; - padding-left: 75px; + margin-left: 24px; img { - margin-left: auto; - margin-right: auto; + height: auto; + width: 100%; } } [purpose='category-button'] { @@ -973,21 +981,36 @@ width: 100%; } } - [purpose='platform-left-text-block'] { - max-width: 100%; - margin-right: 0px; - margin-bottom: 80px; + [purpose='category-text-block'] { + max-width: 480px; } - [purpose='platform-right-text-block'] { - max-width: 100%; - margin-left: 0px; - margin-bottom: 80px; + [purpose='endpoint-ops-image'] { + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; + img { + width: 100%; + height: auto; + } } - [purpose='platform-small-text-block'] { - max-width: 100%; - min-width: unset; - margin-right: 0px; - margin-bottom: 80px; + [purpose='device-management-image'] { + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; + img { + width: 100%; + height: auto; + } + } + [purpose='vuln-management-image'] { + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; + padding-left: 30px; + img { + width: 100%; + height: auto; + } } [purpose='platform-image'] { width: 100%; @@ -1189,28 +1212,30 @@ margin-bottom: 24px; } } - [purpose='category-switch'] { - margin-top: 40px; - } - - [purpose='category-image'] { - width: 100%; - height: auto; + [purpose='vuln-management-image'] { + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; img { - max-height: 236px; - max-width: 100%; - width: auto; + width: 100%; height: auto; } } - [purpose='vuln-management-image'] { - width: 100%; - height: auto; - padding-left: 48px; + [purpose='endpoint-ops-image'] { + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; img { - max-height: 236px; - max-width: 100%; - width: auto; + width: 100%; + height: auto; + } + } + [purpose='device-management-image'] { + margin-right: auto; + margin-left: auto; + margin-bottom: 20px; + img { + width: 100%; height: auto; } } diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index 9a4f1cfb8e..37d4a1f585 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -84,54 +84,59 @@ -
+ <%/* Device management block */%> -
+
+

Device management

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.

-
- Start with MDM +

Modernize your device management practice with a single, open platform for Apple, Windows, and Linux. De-risk config changes, automate security audits, and clear the way for “zero trust access” in your org.

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

Endpoint ops

+

Focus on data, not vendors

+

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

+ +
+
+ + <%/* Vulnerability management block */%> +
+
+

Vulnerability management

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 + A pocket monster orb being scanned for vulnerabilities
+ <%/* Integration cards */%>

Connect your favorite tools