From d8dafd66d25f9e06b38d1dbef1da8b6a031cbe63 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Wed, 4 Dec 2024 15:35:43 -0600
Subject: [PATCH] Website: update statistics on /testimonials page (#24351)

Changes:
- Added a statistic for average customer support response time to the
statistics on the testimonials page.
- Updated the logo carousel component
-
---
 .../js/components/logo-carousel.component.js  |  2 -
 website/assets/styles/pages/testimonials.less | 62 ++++++++++++++-----
 website/views/pages/testimonials.ejs          | 28 ++++++---
 3 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/website/assets/js/components/logo-carousel.component.js b/website/assets/js/components/logo-carousel.component.js
index 6d806297a6..25b18f472f 100644
--- a/website/assets/js/components/logo-carousel.component.js
+++ b/website/assets/js/components/logo-carousel.component.js
@@ -33,7 +33,6 @@ parasails.registerComponent('logoCarousel', {
       <div purpose="logo-row" class="d-flex flex-row align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
         <img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
         <img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
-        <img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
         <img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
         <img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
         <img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
@@ -49,7 +48,6 @@ parasails.registerComponent('logoCarousel', {
       <div purpose="logo-row" class="d-flex flex-row align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
         <img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
         <img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
-        <img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
         <img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
         <img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
         <img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
diff --git a/website/assets/styles/pages/testimonials.less b/website/assets/styles/pages/testimonials.less
index 79e1e3d8c8..08f277e6e2 100644
--- a/website/assets/styles/pages/testimonials.less
+++ b/website/assets/styles/pages/testimonials.less
@@ -192,8 +192,7 @@
     h4 {
       color: #515774;
       text-align: center;
-
-      /* Body LG (bold) */
+      text-transform: unset;
       font-family: Inter;
       font-size: 18px;
       font-style: normal;
@@ -204,35 +203,43 @@
       color: var(--text-text-primary, #515774);
       text-align: center;
       text-wrap: nowrap;
-
-      /* Body XS (FKA p small) */
       font-family: Inter;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
-      line-height: 18px; /* 150% */
+      line-height: 18px;
       margin-bottom: 0px;
     }
+    [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;
-
     }
 
   }
@@ -412,6 +419,28 @@
         height: 304px;
       }
     }
+    [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;
+      }
+
+    }
 
  }
  @media (max-width: 576px) {
@@ -426,12 +455,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'] {
@@ -440,13 +470,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='testimonial-card'] {
     width: 100%;
diff --git a/website/views/pages/testimonials.ejs b/website/views/pages/testimonials.ejs
index f487d6a4fb..d536fecb4c 100644
--- a/website/views/pages/testimonials.ejs
+++ b/website/views/pages/testimonials.ejs
@@ -117,17 +117,25 @@
         </div>
         <div purpose="logos-and-statistics" class="mx-auto">
           <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>
           <logo-carousel></logo-carousel>