Website: Update Homepage 2024-10-25 (#23254)

Closes: fleetdm/confidential#8555 Changes: - Added a statistics section under the logo carousel on the homepage.
fleetdm · Oct 26, 2024 · 6b62f3f · 6b62f3f
1 parent e3df0af
commit 6b62f3f
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 0 deletions.
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
@@ -76,6 +76,66 @@
     max-width: 1200px;
     padding-left: 60px;
     padding-right: 60px;
+    [parasails-component='logo-carousel'] {
+      margin-bottom: 32px;
+    }
+  }
+  [purpose='statistics'] {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    h4 {
+      color: #515774;
+      text-align: center;
+
+      /* Body LG (bold) */
+      font-family: Inter;
+      font-size: 18px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 27px;
+    }
+    p {
+      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% */
+      margin-bottom: 0px;
+    }
+    // div {
+    //   display: flex;
+    //   padding: 8px 64px;
+    //   flex-direction: column;
+    //   align-items: center;
+    // }
+    [purpose='customers'] {
+      border-right: 1px solid #E2E4EA;
+      display: flex;
+      padding: 8px 64px;
+      flex-direction: column;
+      align-items: center;
+    }
+    [purpose='devices'] {
+      border-right: 1px solid #E2E4EA;
+      display: flex;
+      padding: 8px 64px;
+      flex-direction: column;
+      align-items: center;
+    }
+    [purpose='countries'] {
+      display: flex;
+      padding: 8px 64px;
+      flex-direction: column;
+      align-items: center;
+
+    }
+
   }
 
 
@@ -1215,6 +1275,31 @@
       padding-bottom: 320px;
       padding-left: 24px;
       padding-right: 24px;
+    }
+    [purpose='statistics'] {
+      flex-direction: column;
+      max-width: fit-content;
+      margin-left: auto;
+      margin-right: auto;
+      [purpose='customers-and-countries-row'] {
+        order: 2;
+      }
+      [purpose='customers'] {
+        padding: 16px 48px 16px 32px;
+      }
+      [purpose='devices'] {
+        order: 1;
+        border-bottom: 1px solid #E2E4EA;
+        padding: 16px 32px;
+        border-right: none;
+      }
+
+      [purpose='countries'] {
+        padding: 16px 32px 16px 48px;
+        border-right: none;
+      }
+
+
     }
     [purpose='hero-background-image'] {
       background-size: auto 320px;

diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
@@ -20,6 +20,26 @@
   <%/* Row of logos */%>
   <div purpose="hero-logos" class="mx-auto">
     <logo-carousel></logo-carousel>
+    <div purpose="statistics">
+      <div purpose="customers-and-countries-row" class="d-flex flex-row justify-content-center">
+        <div purpose="customers">
+          <h4>450+</h4>
+          <p>customers</p>
+        </div>
+        <div purpose="countries" class="d-flex d-sm-none">
+          <h4>90+</h4>
+          <p>countries</p>
+        </div>
+      </div>
+      <div purpose="devices">
+        <h4>2,000,000+</h4>
+        <p>computing devices</p>
+      </div>
+      <div purpose="countries" class="d-none d-sm-flex">
+        <h4>90+</h4>
+        <p>countries</p>
+      </div>
+    </div>
   </div>
   <%/* Homepage content */%>
   <div purpose="homepage-content" class="container">