diff --git a/website/assets/images/homepage-hero-1647x420@2x.png b/website/assets/images/homepage-hero-1647x420@2x.png new file mode 100644 index 0000000000..9afe3b7877 Binary files /dev/null and b/website/assets/images/homepage-hero-1647x420@2x.png differ diff --git a/website/assets/images/homepage-hero-2500x420@2x.png b/website/assets/images/homepage-hero-2500x420@2x.png new file mode 100644 index 0000000000..74d19390c8 Binary files /dev/null and b/website/assets/images/homepage-hero-2500x420@2x.png differ diff --git a/website/assets/images/homepage-hero-sm-767x347@2x.png b/website/assets/images/homepage-hero-sm-767x347@2x.png new file mode 100644 index 0000000000..77f9e78f85 Binary files /dev/null and b/website/assets/images/homepage-hero-sm-767x347@2x.png differ diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js index e6e40c8c93..0dc9751a2d 100644 --- a/website/assets/js/pages/homepage.page.js +++ b/website/assets/js/pages/homepage.page.js @@ -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; }, diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 353f84a5a2..72c479194b 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -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; diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index f677599488..5cd2fb6a34 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -2,13 +2,43 @@ <%/* Hero container */%>
-
-
+
+
<%/* Hero text */%> -
-

<%- partial('../partials/primary-tagline.partial.ejs') %>

+
+

One agent for
+
+ every +
+ OS + laptop + server + desktop + phone + tablet + cloud instance + container + robot + app + script + report + audit + question + decision + employee + new hire + offboard + hospital + factory + satellite + computer + local LLM +
+
+

+

<%= /* 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' %>.

-
+
Learn how Talk to an engineer
@@ -396,7 +426,44 @@

For teams with lots of computing devices

-

<%- partial('../partials/primary-tagline.partial.ejs') %>

+

+ <%= + (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)){%> +
+
+
+ OS + laptop + server + desktop + phone + tablet + cloud instance + container + robot + app + script + report + audit + question + decision + employee + new hire + offboard + hospital + factory + satellite + computer + local LLM +
+
+ <% } %> +

Try it yourself Talk to an engineer