From b8969b80ec1cb9f5e69daec3cf0f94dd22b3a399 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 27 Nov 2024 01:17:57 -0600
Subject: [PATCH] Website: update statistics on homepage (#24187)

Closes: #24155

Changes:
- Updated the statistics on the homepage

---------

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
---
 website/assets/styles/pages/homepage.less | 61 +++++++++++++++++++----
 website/views/pages/homepage.ejs          | 28 +++++++----
 2 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index 38c1fa16ca..42e6ab48b7 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -89,7 +89,7 @@
       color: #515774;
       text-align: center;
 
-      /* Body LG (bold) */
+      text-transform: unset;
       font-family: Inter;
       font-size: 18px;
       font-style: normal;
@@ -115,26 +115,36 @@
     //   flex-direction: column;
     //   align-items: center;
     // }
+    [purpose='statistics-column'] {
+      display: flex;
+      flex-direction: row;
+    }
     [purpose='customers'] {
       border-right: 1px solid #E2E4EA;
       display: flex;
-      padding: 8px 64px;
+      padding: 8px 48px;
       flex-direction: column;
       align-items: center;
     }
     [purpose='devices'] {
       border-right: 1px solid #E2E4EA;
       display: flex;
-      padding: 8px 64px;
+      padding: 8px 48px;
       flex-direction: column;
       align-items: center;
     }
     [purpose='countries'] {
       display: flex;
-      padding: 8px 64px;
+      padding: 8px 48px;
+      flex-direction: column;
+      align-items: center;
+      border-right: 1px solid #E2E4EA;
+    }
+    [purpose='response-time'] {
+      display: flex;
+      padding: 8px 48px;
       flex-direction: column;
       align-items: center;
-
     }
 
   }
@@ -1099,6 +1109,31 @@
     [purpose='integrations-section'] {
       margin-top: 80px;
     }
+    [purpose='statistics'] {
+      [purpose='statistics-column'] {
+        display: flex;
+        flex-direction: column;
+        width: 227px;
+      }
+      [purpose='countries'] {
+        border-right: none;
+        padding: 16px 32px;
+
+      }
+      [purpose='customers'] {
+        padding: 16px 32px;
+      }
+      [purpose='devices'] {
+        padding: 16px 32px;
+      }
+      [purpose='response-time'] {
+        padding: 16px 32px;
+      }
+
+    }
+
+
+
     [purpose='homepage-text-block'] {
       margin-bottom: 80px;
       p {
@@ -1399,12 +1434,13 @@
       max-width: fit-content;
       margin-left: auto;
       margin-right: auto;
-      margin-top: 32px;
+      margin-top: 48px;
+      margin-bottom: 48px;
       h4 {
         margin-bottom: 0px;
       }
       [purpose='customers'] {
-        padding: 0px 64px 24px 64px;
+        padding: 0px 24px 24px 24px;
         border-right: none;
       }
       [purpose='devices'] {
@@ -1413,13 +1449,15 @@
         padding: 24px;
         border-right: none;
       }
-
+      [purpose='response-time'] {
+        padding: 24px;
+        border-bottom: 1px solid #E2E4EA;
+      }
       [purpose='countries'] {
-        padding: 24px 64px 0px 64px;
+        order: 1;
+        padding: 24px 24px 0px 24px;
         border-right: none;
       }
-
-
     }
     [purpose='hero-background-image'] {
       background-size: auto 320px;
@@ -1606,6 +1644,7 @@
       font-size: 12px;
     }
 
+
     [purpose='truncated-vulnerability-management-text'] {
       display: none;
     }
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index c08c4df1da..68ce46c347 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -21,17 +21,25 @@
   <div purpose="hero-logos" class="mx-auto">
     <logo-carousel></logo-carousel>
     <div purpose="statistics">
-      <div purpose="customers">
-        <h4>100+</h4>
-        <p>customers</p>
+      <div purpose="statistics-column">
+        <div purpose="customers">
+          <h4>100+</h4>
+          <p>customers</p>
+        </div>
+        <div purpose="devices">
+          <h4>2,000,000+</h4>
+          <p>computing devices</p>
+        </div>
       </div>
-      <div purpose="devices">
-        <h4>2,000,000+</h4>
-        <p>computing devices</p>
-      </div>
-      <div purpose="countries" >
-        <h4>90+</h4>
-        <p>countries</p>
+      <div purpose="statistics-column">
+        <div purpose="countries">
+          <h4>90+</h4>
+          <p>countries</p>
+        </div>
+        <div purpose="response-time">
+          <h4>8 minutes</h4>
+          <p>avg support response time</p>
+        </div>
       </div>
     </div>
   </div>