Website: Animate homepage category images (#14932)

Related to: #14673

Changes:
- Updated the category images on the homepage to animate when the
category is changed.

website/assets/styles/pages/homepage.less

@@ -171,6 +171,28 @@
     &.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: 100px;
     h3 {
@@ -208,6 +230,88 @@
       width: 100%;
       height: auto;
     }
+    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;
@@ -709,6 +813,7 @@
       }
     }
 
+
     [purpose='platform-left-text-block'] {
       max-width: 357px;
       margin-right: 80px;

website/views/pages/homepage.ejs

@@ -100,7 +100,7 @@
         <a purpose="animated-arrow-button-red" href="/osquery-management">More about endpoint ops</a>
       </div>
       <div purpose="category-image">
-        <img alt="Endpoint ops" purpose="endpoint-ops-image" src="/images/homepage-endpoint-ops-617x440@2x.png">
+        <img purpose="endpoint-ops-image" alt="Endpoint ops" src="/images/homepage-endpoint-ops-617x440@2x.png">
       </div>
     </div>
 
@@ -112,7 +112,12 @@
         <a purpose="animated-arrow-button-red" class="text-nowrap" href="/device-management">More about device management</a>
       </div>
       <div purpose="category-image">
-        <img alt="GitOps-driven MDM" purpose="device-management-image" src="/images/homepage-device-management-617x440@2x.png">
+        <div purpose="device-management-image">
+          <div purpose="device-management-image-1"></div>
+          <div purpose="device-management-image-2"></div>
+          <div purpose="device-management-image-3"></div>
+          <img alt="A blank image" src="/images/homepage-image-container-617x440@2x.png">
+        </div>
       </div>
     </div>
 
@@ -124,7 +129,11 @@
         <a purpose="lg-animated-arrow-button-red" href="/vulnerability-management">More about vulnerability<br> management</a>
       </div>
       <div purpose="category-image">
-        <img alt="Vulnerability management" purpose="vulnerability-management-image" src="/images/homepage-vulnerability-management-617x440@2x.png">
+        <div purpose="vulnerability-management-image">
+          <div purpose="vulnerability-management-image-1"></div>
+          <div purpose="vulnerability-management-image-2"></div>
+          <img alt="A blank image" src="/images/homepage-image-container-617x440@2x.png">
+        </div>
       </div>
     </div>