Website: Add homepage banner CTA (#26796)

Closes: fleetdm/confidential#9802 Changes: - Added a banner CTA to the homepage
fleetdm · Mar 4, 2025 · e2152cd · e2152cd
1 parent d8dad02
commit e2152cd
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/website/assets/images/[email protected] b/website/assets/images/[email protected]
diff --git a/website/assets/styles/layout.less b/website/assets/styles/layout.less
@@ -218,18 +218,28 @@ html, body {
 
 
 [purpose='header-ribbon-cta'] {
-  background-color: #7487C2;
+  background-color: #0587FF;
+  padding: 12px 8px;
+  img {
+    height: 20px;
+    margin-right: 10px;
+  }
   p {
     font-size: 14px;
     line-height: 20px;
     color: #fff;
+    margin-bottom: 0px;
   }
   a {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
     text-decoration: underline;
     color: #fff;
+    &:hover {
+      color: #FFF;
+      text-decoration-color: #FFF;
+    }
   }
 }
 

diff --git a/website/config/routes.js b/website/config/routes.js
@@ -17,6 +17,7 @@ module.exports.routes = {
     action: 'view-homepage-or-redirect',
     locals: {
       isHomepage: true,
+      showHeaderCTA: true,
     }
   },
 

diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs
@@ -5,6 +5,7 @@
   var me;
   var isHomepage;
   var currentSection;
+  var showHeaderCTA;
   var hideHeaderLinks;// Hides the header navigation links.
   var hideFooterLinks;// Hides footer links, reduces the height of the footer to 60px;
   var showAdminLinks;// Shows links to admin pages to admin users.
@@ -131,6 +132,14 @@
   </head>
   <body>
     <div purpose="page-wrap" class="<%= hideFooterLinks ? 'reduced-footer-links' : '' %> collapse"  id="navbarToggleExternalContent">
+      <%// Call to action ribbon above page header %>
+      <div purpose="header-ribbon-cta" class="<%= showHeaderCTA  ?  'd-flex' : 'd-none' %> flex-row justify-content-center align-items-md-center">
+        <div class="mb-0 d-flex flex-row align-items-center">
+          <p class="text-center">
+            <img src="/images/[email protected]" class="d-inline" alt="👋">We’re launching free support for BYOD Android devices and looking for early feedback. <a href="/contact">Interested?</a>
+          </p>
+        </div>
+      </div>
       <%// Page header%>
       <div class="header" purpose="header-container" hide-when-scrolled data-nosnippet>
         <div purpose="header-background">