From 08b4eb73ec6cf24e5afd6e2229fe47b56ba5f4e5 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 18 Sep 2025 17:57:30 -0500
Subject: [PATCH] Website: Normalize font sizes on landing page CTAs (#33197)

Closes: https://github.com/fleetdm/fleet/issues/16362

Changes:
- updated the font sizes of the bottom CTAs on landing pages to be
consistent
---
 .../styles/pages/device-management.less       | 26 ++++++++++++++++---
 .../assets/styles/pages/observability.less    | 23 ++++++++++++++++
 .../styles/pages/software-management.less     | 23 +++++++++-------
 website/views/pages/device-management.ejs     |  4 +--
 website/views/pages/observability.ejs         |  4 +--
 website/views/pages/software-management.ejs   |  4 +--
 6 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/website/assets/styles/pages/device-management.less b/website/assets/styles/pages/device-management.less
index 21f9920183..a2054c2add 100644
--- a/website/assets/styles/pages/device-management.less
+++ b/website/assets/styles/pages/device-management.less
@@ -695,6 +695,26 @@
       width: 100%;
     }
   }
+
+  [purpose='bottom-cta'] {
+    text-align: center;
+    h2 {
+      font-size: 48px;
+      margin-bottom: 0px;
+    }
+    h4 {
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    [purpose='button-row'] {
+      margin-top: 40px;
+      [purpose='contact-button'] {
+        padding: 16px 32px;
+        text-decoration: none;
+      }
+    }
+  }
+
   [purpose='video-modal'] {
     [purpose='modal-dialog'] {
       width: 100%;
@@ -775,7 +795,7 @@
     }
   }
 
-  @media (max-width: 990px) {
+  @media (max-width: 991px) {
     [purpose='page-container'] {
       padding-left: 32px;
       padding-right: 32px;
@@ -990,8 +1010,8 @@
       margin-bottom: 60px;
     }
 
-    [purpose='section-headline'] {
-      h1 {
+    [purpose='bottom-cta'] {
+      h2 {
         font-size: 32px;
       }
     }
diff --git a/website/assets/styles/pages/observability.less b/website/assets/styles/pages/observability.less
index 81bc209cf4..c56b1f695a 100644
--- a/website/assets/styles/pages/observability.less
+++ b/website/assets/styles/pages/observability.less
@@ -496,6 +496,24 @@
       line-height: 48px;
     }
   }
+  [purpose='bottom-cta'] {
+    text-align: center;
+    h2 {
+      font-size: 48px;
+      margin-bottom: 0px;
+    }
+    h4 {
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    [purpose='button-row'] {
+      margin-top: 40px;
+      [purpose='contact-button'] {
+        padding: 16px 32px;
+        text-decoration: none;
+      }
+    }
+  }
   [purpose='bottom-gradient'] {
     background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
   }
@@ -673,6 +691,11 @@
         margin-left: auto;
       }
     }
+    [purpose='bottom-cta'] {
+      h2 {
+        font-size: 32px;
+      }
+    }
     [purpose='video-modal'] {
       [purpose='modal-dialog'] {
         max-width: 97vw;
diff --git a/website/assets/styles/pages/software-management.less b/website/assets/styles/pages/software-management.less
index 47c880806b..578e463a9c 100644
--- a/website/assets/styles/pages/software-management.less
+++ b/website/assets/styles/pages/software-management.less
@@ -318,11 +318,18 @@
       }
     }
   }
-  [purpose='section-heading'] {
-    h4 {
+  [purpose='bottom-cta'] {
+    text-align: center;
+    h2 {
+      font-size: 48px;
       margin-bottom: 0px;
     }
+    h4 {
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
     [purpose='button-row'] {
+      margin-top: 40px;
       [purpose='contact-button'] {
         padding: 16px 32px;
         text-decoration: none;
@@ -457,8 +464,10 @@
       width: 100%;
       margin-bottom: 32px;
     }
-    [purpose='section-heading'] {
-      padding: 64px 32px;
+    [purpose='bottom-cta'] {
+      h2 {
+        font-size: 32px;
+      }
     }
   }
   @media (max-width: 576px) {
@@ -468,9 +477,6 @@
     [purpose='quote'] {
       padding: 0px 32px 64px 32px;
     }
-    [purpose='section-heading'] {
-      padding: 40px 24px;
-    }
     [parasails-component='scrollable-tweets'] {
       [purpose='tweets'] {
         margin-bottom: 56px;
@@ -502,9 +508,6 @@
         margin-right: 0px;
       }
     }
-    [purpose='section-heading'] {
-      padding: 40px 0px;
-    }
   }
 
 }
diff --git a/website/views/pages/device-management.ejs b/website/views/pages/device-management.ejs
index 14e976154a..938f318dc3 100644
--- a/website/views/pages/device-management.ejs
+++ b/website/views/pages/device-management.ejs
@@ -909,9 +909,9 @@
 
   <div purpose="bottom-gradient">
     <div purpose="page-container" class="container">
-      <div purpose="section-headline" class="text-center">
+      <div purpose="bottom-cta" class="text-center">
         <h4>Open device management</h4>
-        <h1>Your last MDM migration</h1>
+        <h2>Your last MDM migration</h2>
         <div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
           <animated-arrow-button  href="/register">Try it yourself</animated-arrow-button>
diff --git a/website/views/pages/observability.ejs b/website/views/pages/observability.ejs
index c95f011b5e..3d50f7a742 100644
--- a/website/views/pages/observability.ejs
+++ b/website/views/pages/observability.ejs
@@ -267,9 +267,9 @@
     <scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
     <div purpose="page-container" class="pb-0">
 
-      <div purpose="section-heading" class="text-center">
+      <div purpose="bottom-cta" class="text-center">
         <h4>Open orchestration</h4>
-        <h3><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h3>
+        <h2><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
         <div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
           <a purpose="cta-button" href="/contact">Get a demo</a>
           <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
diff --git a/website/views/pages/software-management.ejs b/website/views/pages/software-management.ejs
index a9073ce7b3..72fbaaa6f7 100644
--- a/website/views/pages/software-management.ejs
+++ b/website/views/pages/software-management.ejs
@@ -215,10 +215,10 @@
     <scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
   </div>
   <div purpose="page-container" class="py-0">
-    <div purpose="section-heading" class="text-center">
+    <div purpose="bottom-cta">
       <h4>Software management</h4>
       <h2>Manage software consistently</h2>
-      <div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
+      <div purpose="button-row" class="d-flex justify-content-center align-items-center mx-auto">
         <a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
         <animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
       </div>