From ba61420c83e7dbb1af5fc948dfc14b1c09841cf0 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 18 Feb 2025 17:03:02 -0600
Subject: [PATCH] Website: update order of statistics on mobile homepage
 (#26427)

Closes: https://github.com/fleetdm/confidential/issues/9668

Changes:
- Updated the order of the stacked statistics on the homepage on mobile
devices (<575px)
---
 website/assets/styles/pages/homepage.less | 14 ++++++++------
 website/views/pages/homepage.ejs          | 12 ++++++++++--
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index be219aab36..2c1402dc6c 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -1464,6 +1464,9 @@
       margin-top: 32px;
     }
     [purpose='statistics'] {
+      [purpose='statistics-column'] {
+        flex-direction: column-reverse;
+      }
       flex-direction: column;
       max-width: fit-content;
       margin-left: auto;
@@ -1474,13 +1477,11 @@
         margin-bottom: 0px;
       }
       [purpose='customers'] {
-        padding: 0px 24px 24px 24px;
         border-right: none;
+        padding: 24px 24px 0px 24px;
       }
       [purpose='devices'] {
-        border-top: 1px solid #E2E4EA;
-        border-bottom: 1px solid #E2E4EA;
-        padding: 24px;
+        padding: 0px 24px 24px 24px;
         border-right: none;
       }
       [purpose='response-time'] {
@@ -1488,8 +1489,9 @@
         border-bottom: 1px solid #E2E4EA;
       }
       [purpose='countries'] {
-        order: 1;
-        padding: 24px 24px 0px 24px;
+        // order: 1;
+        border-top: 1px solid #E2E4EA;
+        border-bottom: 1px solid #E2E4EA;
         border-right: none;
       }
     }
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index 79a7cb2e74..791017dfe1 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -52,20 +52,28 @@
     <logo-carousel></logo-carousel>
     <div purpose="statistics">
       <div purpose="statistics-column">
-        <div purpose="customers">
+        <div purpose="customers" class="d-none d-sm-block">
           <h4>100+</h4>
           <p>customers</p>
         </div>
+        <div purpose="countries" class="d-block d-sm-none">
+          <h4>90+</h4>
+          <p>countries</p>
+        </div>
         <div purpose="devices">
           <h4>2,000,000+</h4>
           <p>computing devices</p>
         </div>
       </div>
       <div purpose="statistics-column">
-        <div purpose="countries">
+        <div purpose="countries" class="d-none d-sm-block">
           <h4>90+</h4>
           <p>countries</p>
         </div>
+        <div purpose="customers" class="d-block d-sm-none">
+          <h4>100+</h4>
+          <p>customers</p>
+        </div>
         <div purpose="response-time">
           <h4>8 minutes</h4>
           <p>avg support response time</p>