Website: bring back ticker on homepage hero (#27665)

Changes:
- Brought back the animated ticker in the homepage hero.
This commit is contained in:
Eric 2025-03-28 17:17:43 -05:00 committed by GitHub
parent 465dcb1aba
commit 71a2b5d022
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 32 additions and 52 deletions

View file

@ -43,7 +43,7 @@ parasails.registerPage('homepage', {
}
},
mounted: async function() {
// this.animateHeroTicker();
this.animateHeroTicker();
if(['mdm', 'eo-it', undefined].includes(this.primaryBuyingSituation)){
this.animateBottomTicker();
}

View file

@ -52,6 +52,7 @@
padding-left: 32px;
padding-bottom: 82px;
max-width: 1200px;
height: 420px;
}
[purpose='ticker-container'] {
overflow: hidden;

View file

@ -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>