From 71a2b5d022033dd931674667df0f5439931010dd Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 28 Mar 2025 17:17:43 -0500
Subject: [PATCH] Website: bring back ticker on homepage hero (#27665)

Changes:
- Brought back the animated ticker in the homepage hero.
---
 website/assets/js/pages/homepage.page.js  |  2 +-
 website/assets/styles/pages/homepage.less |  1 +
 website/views/pages/homepage.ejs          | 81 +++++++++--------------
 3 files changed, 32 insertions(+), 52 deletions(-)

diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js
index 1a6f3311dd..65097a30a1 100644
--- a/website/assets/js/pages/homepage.page.js
+++ b/website/assets/js/pages/homepage.page.js
@@ -43,7 +43,7 @@ parasails.registerPage('homepage', {
     }
   },
   mounted: async function() {
-    // this.animateHeroTicker();
+    this.animateHeroTicker();
     if(['mdm', 'eo-it', undefined].includes(this.primaryBuyingSituation)){
       this.animateBottomTicker();
     }
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index d6e282866b..7ef0756758 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -52,6 +52,7 @@
     padding-left: 32px;
     padding-bottom: 82px;
     max-width: 1200px;
+    height: 420px;
   }
   [purpose='ticker-container'] {
     overflow: hidden;
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index f41cafac21..eafc6df228 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -6,58 +6,37 @@
         <div class="d-flex flex-row justify-content-start align-items-start">
           <%/* Hero text */%>
           <div purpose="hero-text" class="d-flex flex-column justify-content-start">
-            <h1 class="<%= primaryBuyingSituation%>"><%- partial('../partials/primary-tagline.partial.ejs') %></h1>
-          <% /*
-          <h1>One agent for <br>
-            <div purpose="ticker-container" class="d-flex align-items-center flex-row text-nowrap">
-              every
-              <div purpose="option-container" class="pl-2 d-flex flex-column">
-                <span purpose="hero-ticker-option" class="visible">computer</span>
-                <span purpose="hero-ticker-option">script</span>
-                <span purpose="hero-ticker-option">config</span>
-                <span purpose="hero-ticker-option">question</span>
-                <span purpose="hero-ticker-option">laptop</span>
-                <span purpose="hero-ticker-option">desktop</span>
-                <span purpose="hero-ticker-option">phone</span>
-                <span purpose="hero-ticker-option">server</span>
-                <span purpose="hero-ticker-option">cloud instance</span>
-                <span purpose="hero-ticker-option">container</span>
-                <span purpose="hero-ticker-option">tablet</span>
-                <span purpose="hero-ticker-option">audit</span>
-                <span purpose="hero-ticker-option">report</span>
-                <span purpose="hero-ticker-option">decision</span>
-                <span purpose="hero-ticker-option">new hire</span>
-                <span purpose="hero-ticker-option">offboard</span>
-                <span purpose="hero-ticker-option">employee</span>
-<!--
-                <span purpose="hero-ticker-option" class="visible">OS</span>
-                <span purpose="hero-ticker-option">script</span>
-                <span purpose="hero-ticker-option">config</span>
-                <span purpose="hero-ticker-option">question</span>
-                <span purpose="hero-ticker-option">laptop</span>
-                <span purpose="hero-ticker-option">desktop</span>
-                <span purpose="hero-ticker-option">phone</span>
-                <span purpose="hero-ticker-option">server</span>
-                <span purpose="hero-ticker-option">cloud instance</span>
-                <span purpose="hero-ticker-option">container</span>
-                <span purpose="hero-ticker-option">robot</span>
-                <span purpose="hero-ticker-option">satellite</span>
-                <span purpose="hero-ticker-option">telescope</span>
-                <span purpose="hero-ticker-option">tablet</span>
-                <span purpose="hero-ticker-option">hospital</span>
-                <span purpose="hero-ticker-option">factory</span>
-                <span purpose="hero-ticker-option">audit</span>
-                <span purpose="hero-ticker-option">report</span>
-                <span purpose="hero-ticker-option">decision</span>
-                <span purpose="hero-ticker-option">new hire</span>
-                <span purpose="hero-ticker-option">offboard</span>
-                <span purpose="hero-ticker-option">employee</span>
-                <span purpose="hero-ticker-option">local LLM</span>
-                <span purpose="hero-ticker-option">computer</span> -->
+            <h1>One agent for <br>
+              <div purpose="ticker-container" class="d-flex align-items-center flex-row text-nowrap">
+                every
+                <div purpose="option-container" class="pl-2 d-flex flex-column">
+                  <span purpose="hero-ticker-option" class="visible">OS</span>
+                  <span purpose="hero-ticker-option">script</span>
+                  <span purpose="hero-ticker-option">config</span>
+                  <span purpose="hero-ticker-option">question</span>
+                  <span purpose="hero-ticker-option">laptop</span>
+                  <span purpose="hero-ticker-option">desktop</span>
+                  <span purpose="hero-ticker-option">phone</span>
+                  <span purpose="hero-ticker-option">server</span>
+                  <span purpose="hero-ticker-option">cloud instance</span>
+                  <span purpose="hero-ticker-option">container</span>
+                  <span purpose="hero-ticker-option">robot</span>
+                  <span purpose="hero-ticker-option">satellite</span>
+                  <span purpose="hero-ticker-option">telescope</span>
+                  <span purpose="hero-ticker-option">tablet</span>
+                  <span purpose="hero-ticker-option">hospital</span>
+                  <span purpose="hero-ticker-option">factory</span>
+                  <span purpose="hero-ticker-option">audit</span>
+                  <span purpose="hero-ticker-option">report</span>
+                  <span purpose="hero-ticker-option">decision</span>
+                  <span purpose="hero-ticker-option">new hire</span>
+                  <span purpose="hero-ticker-option">offboard</span>
+                  <span purpose="hero-ticker-option">employee</span>
+                  <span purpose="hero-ticker-option">local LLM</span>
+                  <span purpose="hero-ticker-option">computer</span>
+                </div>
               </div>
-            </div>
-          </h1>
-          */ %>
+            </h1>
             <p>Replace the sprawl with <%= primaryBuyingSituation === 'vm'? 'secure, open-source reporting that works the way you want' : primaryBuyingSituation === 'eo-security'? 'open-source telemetry that works the way you want' : 'lightning fast device management that lets employees see what\'s going on' %>.</p>
             <div purpose="button-row" class="d-flex justify-content-start align-items-center">
               <a purpose="cta-button" href="<%= primaryBuyingSituation === 'mdm' ? '/device-management' : primaryBuyingSituation === 'vm' ? '/vulnerability-management' : primaryBuyingSituation === 'eo-security' ? '/orchestration' : primaryBuyingSituation === 'eo-it' ? '/orchestration' : '/device-management' %>">Learn how</a>