From 65a165551230fd616964f2a577fc33d7da20b2c2 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 31 Jan 2024 18:47:33 -0600
Subject: [PATCH] Website: update homepage product category section (#16509)

Closes: #16267

Changes:
- Removed the category switch on the homepage and updated the layout of
the product category blocks.
---
 website/assets/styles/pages/homepage.less | 187 ++++++++++++----------
 website/views/pages/homepage.ejs          |  57 ++++---
 2 files changed, 137 insertions(+), 107 deletions(-)

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 @@
         </div>
       </div>
 
-      <div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
+<!--       <div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
         <div purpose="category-switch-option" class="security" :class="[selectedCategory === 'device-management' ? 'selected' : '']" @click="selectedCategory = 'device-management'">Device management</div>
         <div purpose="category-switch-option" class="all" :class="[selectedCategory === 'endpoint-ops' ? 'selected' : '']" @click="selectedCategory = 'endpoint-ops'">Endpoint ops</div>
         <div purpose="category-switch-option" class="it" :class="[selectedCategory === 'vulnerability-management' ? 'selected' : '']" @click="selectedCategory = 'vulnerability-management'">Vuln<span class="d-inline d-md-none d-lg-inline">erability</span> management</div>
         <div purpose="category-tier-switch" :class="selectedCategory+'-selected'"></div>
-      </div>
-
-      <%/* Endpoint ops block */%>
-      <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'endpoint-ops'">
-        <div purpose="category-text-block" class="d-flex flex-column">
-          <h3>Focus on data, not vendors</h3>
-          <p>Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.</p>
-          <div purpose="category-button">
-            <a class="btn btn-primary text-nowrap" href="/endpoint-ops">Start with endpoint ops</a>
-          </div>
-        </div>
-        <div purpose="category-image">
-          <img alt="Endpoint ops" src="images/endpoint-operations-hero-image-380x383@2x.png">
-        </div>
-      </div>
+      </div> -->
 
       <%/* Device management block */%>
-      <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'device-management'">
+      <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
         <div purpose="category-text-block" class="d-flex flex-column">
+          <h4>Device management</h4>
           <h3>Manage everything in one place</h3>
-          <p>Clear the way for "zero trust" and modernize your device management practices with a single, open platform for Apple, Windows, and Linux.</p>
-          <div purpose="category-button">
-            <a class="btn btn-primary text-nowrap" href="/device-management">Start with MDM</a>
+          <p>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.</p>
+          <div>
+            <a purpose="animated-arrow-button-red" class="text-nowrap" href="/device-management">Start with device management</a>
           </div>
         </div>
-        <div purpose="category-image">
+        <div purpose="device-management-image">
           <img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
         </div>
       </div>
 
-      <%/* Vulnerability management block */%>
-      <div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start"  v-if="selectedCategory === 'vulnerability-management'">
+
+      <%/* Endpoint ops block */%>
+      <div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center">
+        <div purpose="endpoint-ops-image">
+          <img alt="Endpoint ops" src="images/endpoint-operations-hero-image-380x383@2x.png">
+        </div>
         <div purpose="category-text-block" class="d-flex flex-column">
+          <h4>Endpoint ops</h4>
+          <h3>Focus on data, not vendors</h3>
+          <p>Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.</p>
+          <div>
+            <a purpose="animated-arrow-button-red" class="text-nowrap" href="/endpoint-ops">Start with endpoint ops</a>
+          </div>
+        </div>
+      </div>
+
+      <%/* Vulnerability management block */%>
+      <div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
+        <div purpose="category-text-block" class="d-flex flex-column">
+          <h4>Vulnerability management</h4>
           <h3>Build the vulnerability program you actually want</h3>
           <p>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.</p>
-          <div purpose="category-button">
-            <a class="btn btn-primary text-nowrap"  href="/vulnerability-management">Start with vuln<span purpose="truncated-vulnerability-management-text">erability</span>&nbsp;management</a>
+          <div>
+            <a purpose="animated-arrow-button-red" class="text-nowrap"  href="/vulnerability-management">Start with vuln management</a>
           </div>
         </div>
         <div purpose="vuln-management-image">
-          <img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
+          <img  alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
         </div>
       </div>
+
       <%/* Integration cards */%>
         <h2 class="text-center">Connect your favorite tools</h2>
         <div purpose="integration-cards" class="d-flex flex-sm-row flex-column justify-content-center">