mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 01:18:42 +00:00
Website: Update homepage heading (#25916)
Closes: #25884 Changes: - Updated the homepage hero to include an animated ticker that changes the page's headline - Updated the bottom heading (for agnostic, mdm, and eo-it views) to have an animated ticker that changes the headline.
This commit is contained in:
Eric
GitHub
parent
0a9bd62bfe
commit
aff93bcf37
6 changed files with 236 additions and 61 deletions
BIN
website/assets/images/homepage-hero-1647x420@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-hero-1647x420@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
BIN
website/assets/images/homepage-hero-2500x420@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-hero-2500x420@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
website/assets/images/homepage-hero-sm-767x347@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-hero-sm-767x347@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
56
website/assets/js/pages/homepage.page.js
vendored
56
website/assets/js/pages/homepage.page.js
vendored
|
|
@ -12,7 +12,7 @@ parasails.registerPage('homepage', {
|
|||
formRules: {
|
||||
emailAddress: {isEmail: true, required: true},
|
||||
},
|
||||
|
||||
animationDelayInMs: 1200,
|
||||
syncing: false,
|
||||
|
||||
// Server error state for the form
|
||||
|
|
@ -31,14 +31,64 @@ parasails.registerPage('homepage', {
|
|||
}
|
||||
},
|
||||
mounted: async function() {
|
||||
//…
|
||||
this.animateHeroTicker();
|
||||
if(['mdm', 'eo-it', undefined].includes(this.primaryBuyingSituation)){
|
||||
this.animateBottomTicker();
|
||||
}
|
||||
},
|
||||
|
||||
// ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
|
||||
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
|
||||
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
|
||||
methods: {
|
||||
|
||||
animateHeroTicker: function() {
|
||||
// Animate the ticker in the top heading.
|
||||
setInterval(()=>{
|
||||
let currentTickerOption = $('[purpose="hero-ticker-option"].visible');
|
||||
if(currentTickerOption) {
|
||||
if (currentTickerOption.length === 0) {
|
||||
currentTickerOption = $('[purpose="hero-ticker-option"]').first();
|
||||
currentTickerOption.addClass('visible');
|
||||
return;
|
||||
}
|
||||
// [?]:https://api.jquery.com/nextAll/#nextAll-selector
|
||||
let nextTickerOption = currentTickerOption.nextAll('[purpose="hero-ticker-option"]').first();
|
||||
// If we've reached the end of the list, pick the first option to be the next ticker option
|
||||
if (nextTickerOption.length === 0) {
|
||||
nextTickerOption = $('span[purpose="hero-ticker-option"]').first();
|
||||
}
|
||||
currentTickerOption.removeClass('visible').addClass('animating-out');
|
||||
nextTickerOption.addClass('visible');
|
||||
setTimeout(()=>{
|
||||
currentTickerOption.removeClass('animating-out');
|
||||
}, 1000);
|
||||
}
|
||||
}, this.animationDelayInMs);
|
||||
},
|
||||
animateBottomTicker: function() {
|
||||
// Animate the ticker in the bottom heading on the page (Currently only agnostic, mdm, and eo-it personalized views)
|
||||
setInterval(()=>{
|
||||
let currentTickerOption = $('[purpose="bottom-cta-ticker-option"].visible');
|
||||
if(currentTickerOption) {
|
||||
if (currentTickerOption.length === 0) {
|
||||
currentTickerOption = $('[purpose="bottom-cta-ticker-option"]').first();
|
||||
currentTickerOption.addClass('visible');
|
||||
return;
|
||||
}
|
||||
// [?]:https://api.jquery.com/nextAll/#nextAll-selector
|
||||
let nextTickerOption = currentTickerOption.nextAll('[purpose="bottom-cta-ticker-option"]').first();
|
||||
// If we've reached the end of the list, pick the first option to be the next ticker option
|
||||
if (nextTickerOption.length === 0) {
|
||||
nextTickerOption = $('span[purpose="bottom-cta-ticker-option"]').first();
|
||||
}
|
||||
currentTickerOption.removeClass('visible').addClass('animating-out');
|
||||
nextTickerOption.addClass('visible');
|
||||
setTimeout(()=>{
|
||||
currentTickerOption.removeClass('animating-out');
|
||||
}, 1000);
|
||||
}
|
||||
}, this.animationDelayInMs);
|
||||
},
|
||||
clickOpenVideoModal: function(modalName) {
|
||||
this.modal = modalName;
|
||||
},
|
||||
|
|
|
|||
162
website/assets/styles/pages/homepage.less
vendored
162
website/assets/styles/pages/homepage.less
vendored
|
|
@ -37,28 +37,54 @@
|
|||
}
|
||||
|
||||
[purpose='hero-container'] {
|
||||
background: linear-gradient(#E4F3F4, #FFFFFF);
|
||||
background: #FFFFFF;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background: url('/images/homepage-hero-3227x920@2x.png');
|
||||
background-size: auto 400px;
|
||||
background-position: center bottom;
|
||||
background-repeat: repeat-x;
|
||||
background: url('/images/homepage-hero-2500x420@2x.png');
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 64px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 380px;
|
||||
padding-top: 80px;
|
||||
padding-left: 32px;
|
||||
padding-bottom: 82px;
|
||||
max-width: 1200px;
|
||||
height: 420px;
|
||||
}
|
||||
[purpose='ticker-container'] {
|
||||
overflow: hidden;
|
||||
width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
[purpose='option-container'] {
|
||||
height: 57.6px;
|
||||
}
|
||||
|
||||
[purpose='hero-ticker-option'], [purpose='bottom-cta-ticker-option'] {
|
||||
color: #515774;
|
||||
visibility: hidden;
|
||||
height: 0px;
|
||||
transform: translateY(75px);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
&.visible {
|
||||
// opacity: 1;
|
||||
visibility: visible;
|
||||
position: relative;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
&.animating-out {
|
||||
visibility: visible;
|
||||
transform: translateY(-75px);
|
||||
}
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
min-width: 540px;
|
||||
text-align: center;
|
||||
max-width: 474px;
|
||||
text-align: left;
|
||||
h1 {
|
||||
max-width: 640px;
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -67,9 +93,14 @@
|
|||
}
|
||||
}
|
||||
p {
|
||||
max-width: 404px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
dispaly: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
|
|
@ -531,7 +562,7 @@
|
|||
border-radius: 8px;
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
height: 48px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -822,15 +853,10 @@
|
|||
@media (max-width: 1199px) {
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 400px;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
// background-size: auto 400px;
|
||||
// background-position: center bottom;
|
||||
// background-repeat: no-repeat;
|
||||
}
|
||||
[purpose='homepage-hero'] {
|
||||
max-width: 1080px;
|
||||
padding-bottom: 380px;
|
||||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
|
|
@ -882,10 +908,14 @@
|
|||
}
|
||||
[purpose='homepage-hero'] {
|
||||
max-width: 100%;
|
||||
padding-bottom: 380px;
|
||||
padding-top: 64px;
|
||||
padding-right: 32px;
|
||||
|
||||
// padding-bottom: 380px;
|
||||
}
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 400px;
|
||||
// background-size: auto 400px;
|
||||
background-position: calc(~'100% + -54%') center;
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
|
|
@ -1079,27 +1109,28 @@
|
|||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 360px;
|
||||
height: 100%;
|
||||
padding: 48px 27px 330px 24px;
|
||||
}
|
||||
[purpose='hero-container'] {
|
||||
background: linear-gradient(180deg, #FFF 0%, #EEF7F8 150px);
|
||||
}
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 360px;
|
||||
background: url('/images/homepage-hero-sm-767x347@2x.png');
|
||||
background-size: auto 347px;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
min-width: unset;
|
||||
text-align: center;
|
||||
p {
|
||||
max-width: 550px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
[purpose='hero-logos'] {
|
||||
margin-bottom: 64px;
|
||||
|
|
@ -1414,7 +1445,9 @@
|
|||
h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[purpose='option-container'] {
|
||||
height: 38.4px;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
|
@ -1422,8 +1455,8 @@
|
|||
height: 287px;
|
||||
}
|
||||
[purpose='homepage-hero'] {
|
||||
padding-bottom: 320px;
|
||||
padding-top: 32px;
|
||||
padding-bottom: 307px;
|
||||
padding-top: 48px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
|
@ -1464,15 +1497,19 @@
|
|||
background-size: auto 320px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
[purpose='button-row'] {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
[purpose='cta-button'] {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
max-width: 224px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[purpose='platform-block'] {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
|
@ -1537,13 +1574,18 @@
|
|||
padding-left: 24px;
|
||||
}
|
||||
|
||||
[purpose='button-row'] {
|
||||
[purpose='cta-button'] {
|
||||
cursor: pointer;
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[purpose='bottom-cta'] {
|
||||
[purpose='button-row'] {
|
||||
max-width: 224px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
[purpose='cta-button'] {
|
||||
cursor: pointer;
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='two-column-features'] {
|
||||
|
|
@ -1639,30 +1681,46 @@
|
|||
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
line-height: 120%;
|
||||
}
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
[purpose='option-container'] {
|
||||
height: 33.6px;
|
||||
}
|
||||
|
||||
[purpose='truncated-vulnerability-management-text'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 220px;
|
||||
padding-top: 44px;
|
||||
padding-left: 16px;
|
||||
padding-right: 17px;
|
||||
padding-bottom: 187px;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 220px;
|
||||
}
|
||||
|
||||
[purpose='ticker-container'] {
|
||||
white-space: unset;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
flex-direction: column;
|
||||
[purpose='cta-button'] {
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='statistics'] {
|
||||
margin-top: 32px;
|
||||
|
|
|
|||
79
website/views/pages/homepage.ejs
vendored
79
website/views/pages/homepage.ejs
vendored
|
|
@ -2,13 +2,43 @@
|
|||
<%/* Hero container */%>
|
||||
<div purpose="hero-container">
|
||||
<div purpose="hero-background-image">
|
||||
<div purpose="homepage-hero" class="container mx-auto">
|
||||
<div class="d-flex flex-row justify-content-center align-items-start">
|
||||
<div purpose="homepage-hero" class="mx-auto">
|
||||
<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-center">
|
||||
<h1 class="mx-auto <%= primaryBuyingSituation%>"><%- partial('../partials/primary-tagline.partial.ejs') %></h1>
|
||||
<div purpose="hero-text" class="d-flex flex-column justify-content-start">
|
||||
<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">laptop</span>
|
||||
<span purpose="hero-ticker-option">server</span>
|
||||
<span purpose="hero-ticker-option">desktop</span>
|
||||
<span purpose="hero-ticker-option">phone</span>
|
||||
<span purpose="hero-ticker-option">tablet</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">app</span>
|
||||
<span purpose="hero-ticker-option">script</span>
|
||||
<span purpose="hero-ticker-option">report</span>
|
||||
<span purpose="hero-ticker-option">audit</span>
|
||||
<span purpose="hero-ticker-option">question</span>
|
||||
<span purpose="hero-ticker-option">decision</span>
|
||||
<span purpose="hero-ticker-option">employee</span>
|
||||
<span purpose="hero-ticker-option">new hire</span>
|
||||
<span purpose="hero-ticker-option">offboard</span>
|
||||
<span purpose="hero-ticker-option">hospital</span>
|
||||
<span purpose="hero-ticker-option">factory</span>
|
||||
<span purpose="hero-ticker-option">satellite</span>
|
||||
<span purpose="hero-ticker-option">computer</span>
|
||||
<span purpose="hero-ticker-option">local LLM</span>
|
||||
</div>
|
||||
</div>
|
||||
</h1>
|
||||
<!-- <h1 class="mx-auto <%= primaryBuyingSituation%>"><%- partial('../partials/primary-tagline.partial.ejs') %></h1> -->
|
||||
<p><%= /* Replace cross-platform hacks 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 flex-sm-row flex-column justify-content-center align-items-center">
|
||||
<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>
|
||||
<animated-arrow-button href="/contact">Talk to an engineer</animated-arrow-button>
|
||||
</div>
|
||||
|
|
@ -396,7 +426,44 @@
|
|||
<div purpose="homepage-content" class="container">
|
||||
<div class="text-center" purpose="bottom-cta">
|
||||
<h4>For teams with lots of computing devices</h4>
|
||||
<h1 class="mx-auto <%= primaryBuyingSituation%>"><%- partial('../partials/primary-tagline.partial.ejs') %></h1>
|
||||
<h1 class="mx-auto <%= primaryBuyingSituation%>">
|
||||
<%=
|
||||
(typeof primaryBuyingSituation !== 'undefined' && primaryBuyingSituation === 'vm') ? 'Focus on vulnerabilities, not vendors' // vm
|
||||
: (typeof primaryBuyingSituation !== 'undefined' && primaryBuyingSituation === 'eo-security') ? 'Easily get security data'// eo-security
|
||||
: (typeof primaryBuyingSituation !== 'undefined' && primaryBuyingSituation === 'eo-it') ? 'One agent for every ' : // eo-it
|
||||
'One agent for every '// mdm or default (no buying situation)
|
||||
%>
|
||||
<% if(['eo-it', 'mdm', undefined].includes(primaryBuyingSituation)){%>
|
||||
<br>
|
||||
<div purpose="ticker-container" class="d-flex align-items-center mx-auto flex-row text-nowrap">
|
||||
<div purpose="option-container" class="pl-2 d-flex flex-column">
|
||||
<span purpose="bottom-cta-ticker-option" class="visible">OS</span>
|
||||
<span purpose="bottom-cta-ticker-option">laptop</span>
|
||||
<span purpose="bottom-cta-ticker-option">server</span>
|
||||
<span purpose="bottom-cta-ticker-option">desktop</span>
|
||||
<span purpose="bottom-cta-ticker-option">phone</span>
|
||||
<span purpose="bottom-cta-ticker-option">tablet</span>
|
||||
<span purpose="bottom-cta-ticker-option">cloud instance</span>
|
||||
<span purpose="bottom-cta-ticker-option">container</span>
|
||||
<span purpose="bottom-cta-ticker-option">robot</span>
|
||||
<span purpose="bottom-cta-ticker-option">app</span>
|
||||
<span purpose="bottom-cta-ticker-option">script</span>
|
||||
<span purpose="bottom-cta-ticker-option">report</span>
|
||||
<span purpose="bottom-cta-ticker-option">audit</span>
|
||||
<span purpose="bottom-cta-ticker-option">question</span>
|
||||
<span purpose="bottom-cta-ticker-option">decision</span>
|
||||
<span purpose="bottom-cta-ticker-option">employee</span>
|
||||
<span purpose="bottom-cta-ticker-option">new hire</span>
|
||||
<span purpose="bottom-cta-ticker-option">offboard</span>
|
||||
<span purpose="bottom-cta-ticker-option">hospital</span>
|
||||
<span purpose="bottom-cta-ticker-option">factory</span>
|
||||
<span purpose="bottom-cta-ticker-option">satellite</span>
|
||||
<span purpose="bottom-cta-ticker-option">computer</span>
|
||||
<span purpose="bottom-cta-ticker-option">local LLM</span>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</h1>
|
||||
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
|
||||
<a purpose="cta-button" href="/register">Try it yourself</a>
|
||||
<animated-arrow-button href="/contact">Talk to an engineer</animated-arrow-button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue