From 512f0b7d3fa2e6e9ef19c1ee7ad89254c9f0bcb1 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 26 Jan 2024 09:38:58 -0600
Subject: [PATCH] Website: Update vulnerability management image on homepage
 (#16375)

https://fleetdm.slack.com/archives/C058S8PFSK0/p1706280817663569

Changes:
- Updated the widths of category images on the homepage to match
wireframes
- Added left padding to the vulnerability management image to align it
with the center of the viewport.
---
 website/assets/styles/pages/homepage.less | 43 +++++++++++++++++------
 website/views/pages/homepage.ejs          |  2 +-
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index a4fa4f6993..cdf4ff2c68 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -253,8 +253,16 @@
     margin-left: 60px;
     padding-right: 40px;
     img {
-      width: auto;
-      height: 293px;
+      width: 380px;
+      height: auto;
+    }
+  }
+  [purpose='vuln-management-image'] {
+    margin-left: 60px;
+    padding-right: 40px;
+    img {
+      width: 360px;
+      height: auto;
     }
   }
   [purpose='category-button'] {
@@ -282,13 +290,6 @@
     padding-left: 40px;
   }
 
-  [purpose='category-image'] {
-    img {
-      width: auto;
-      height: 293px;
-    }
-    transition: transform 0.3s, right 0.3s, left 0.3s, bottom 0.3s;
-  }
   [purpose='bottom-gradient'] {
     background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
   }
@@ -788,6 +789,17 @@
         margin-right: auto;
       }
     }
+    [purpose='vuln-management-image'] {
+      width: 100%;
+      height: auto;
+      margin-left: 0px;
+      padding-right: 0px;
+      padding-left: 75px;
+      img {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
     [purpose='category-button'] {
       width: 100%;
       display: flex;
@@ -1184,7 +1196,18 @@
       width: 100%;
       height: auto;
       img {
-        max-height: 293px;
+        max-height: 236px;
+        max-width: 100%;
+        width: auto;
+        height: auto;
+      }
+    }
+    [purpose='vuln-management-image'] {
+      width: 100%;
+      height: auto;
+      padding-left: 48px;
+      img {
+        max-height: 236px;
         max-width: 100%;
         width: auto;
         height: auto;
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index 7cc3451f57..ba1c2b0c9f 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -128,7 +128,7 @@
             <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>
         </div>
-        <div purpose="category-image">
+        <div purpose="vuln-management-image">
           <img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
         </div>
       </div>