diff --git a/website/assets/images/parallax-cloud-city/1-cloud-7050x600@2x.png b/website/assets/images/parallax-cloud-city/1-cloud-7050x600@2x.png new file mode 100644 index 0000000000..7224379351 Binary files /dev/null and b/website/assets/images/parallax-cloud-city/1-cloud-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/2-cloud-7050x600@2x.png b/website/assets/images/parallax-cloud-city/2-cloud-7050x600@2x.png new file mode 100644 index 0000000000..e3cad6e677 Binary files /dev/null and b/website/assets/images/parallax-cloud-city/2-cloud-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/4-island-7050x600@2x.png b/website/assets/images/parallax-cloud-city/4-island-7050x600@2x.png new file mode 100644 index 0000000000..badf660a52 Binary files /dev/null and b/website/assets/images/parallax-cloud-city/4-island-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/5-cloud-7050x600@2x.png b/website/assets/images/parallax-cloud-city/5-cloud-7050x600@2x.png new file mode 100644 index 0000000000..f0eab5d29b Binary files /dev/null and b/website/assets/images/parallax-cloud-city/5-cloud-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/6-island-7050x600@2x.png b/website/assets/images/parallax-cloud-city/6-island-7050x600@2x.png new file mode 100644 index 0000000000..6a4b58954f Binary files /dev/null and b/website/assets/images/parallax-cloud-city/6-island-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/7-island-7050x600@2x.png b/website/assets/images/parallax-cloud-city/7-island-7050x600@2x.png new file mode 100644 index 0000000000..0baa81d207 Binary files /dev/null and b/website/assets/images/parallax-cloud-city/7-island-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/8-cloud-7050x600@2x.png b/website/assets/images/parallax-cloud-city/8-cloud-7050x600@2x.png new file mode 100644 index 0000000000..652d1430a2 Binary files /dev/null and b/website/assets/images/parallax-cloud-city/8-cloud-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/9-cloud-7050x600@2x.png b/website/assets/images/parallax-cloud-city/9-cloud-7050x600@2x.png new file mode 100644 index 0000000000..6f18cc6e8c Binary files /dev/null and b/website/assets/images/parallax-cloud-city/9-cloud-7050x600@2x.png differ diff --git a/website/assets/images/parallax-cloud-city/cloud-city-static-576x300@2x.png b/website/assets/images/parallax-cloud-city/cloud-city-static-576x300@2x.png new file mode 100644 index 0000000000..7b5ac126ef Binary files /dev/null and b/website/assets/images/parallax-cloud-city/cloud-city-static-576x300@2x.png differ diff --git a/website/assets/js/components/parallax-city.component.js b/website/assets/js/components/parallax-city.component.js new file mode 100644 index 0000000000..b96cb58435 --- /dev/null +++ b/website/assets/js/components/parallax-city.component.js @@ -0,0 +1,126 @@ +/** + * + * ----------------------------------------------------------------------------- + * A button with a built-in loading spinner. + * + * @type {Component} + * + * @event click [emitted when clicked] + * ----------------------------------------------------------------------------- + */ + +parasails.registerComponent('parallaxCity', { + // ╔═╗╦═╗╔═╗╔═╗╔═╗ + // ╠═╝╠╦╝║ ║╠═╝╚═╗ + // ╩ ╩╚═╚═╝╩ ╚═╝ + props: ['isMobile'], + + // ╦╔╗╔╦╔╦╗╦╔═╗╦ ╔═╗╔╦╗╔═╗╔╦╗╔═╗ + // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ + // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ + data: function (){ + return { + parallaxCityElement: undefined, + elementBottomPosition: undefined, + elementHeight: undefined, + distanceFromTopOfPage: undefined, + distanceFromBottomOfPage: undefined, + isAnimating: false, + }; + }, + + // ╦ ╦╔╦╗╔╦╗╦ + // ╠═╣ ║ ║║║║ + // ╩ ╩ ╩ ╩ ╩╩═╝ + template: ` +
+
+
+
+
+
+
+
+
+
+
+
+ `, + + // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ + // ║ ║╠╣ ║╣ ║ ╚╦╝║ ║ ║╣ + // ╩═╝╩╚ ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝ + beforeMount: function() { + + }, + mounted: async function(){ + if(!this.isMobile){ + this.parallaxCityElement = document.querySelector('[purpose="parallax-city-container"]'); + this.elementHeight = this.parallaxCityElement.clientHeight; + this.distanceFromTopOfPage = this.parallaxCityElement.offsetTop; + this.distanceFromBottomOfPage = document.body.scrollHeight - this.distanceFromTopOfPage - (this.elementHeight * .5); + this.elementBottomPosition = this.elementHeight + this.distanceFromTopOfPage; + let parallaxCityElementPosition = this.parallaxCityElement.getBoundingClientRect(); + if(parallaxCityElementPosition.bottom > this.distanceFromTopOfPage) { + this.handleParallaxScroll(); + } + + this.parallaxCityElement.querySelectorAll('div.parallax-layer').forEach((layer)=>{ + let initialPosition = layer.getAttribute('scroll-amount'); + layer.style.bottom = `-${Number(initialPosition) + 4}px`; + }); + + window.addEventListener('scroll', this.onScroll); + window.addEventListener('resize', this.updateElementPositions); + window.addEventListener('orientationchange', this.updateElementPositions); + } + }, + beforeDestroy: function() { + if(!this.isMobile){ + window.removeEventListener('scroll', this.onScroll); + window.removeEventListener('resize', this.updateElementPositions); + window.removeEventListener('orientationchange', this.updateElementPositions); + } + }, + + // ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗ + // ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗ + // ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝ + methods: { + updateElementPositions: function() { + this.elementHeight = this.parallaxCityElement.clientHeight; + this.distanceFromTopOfPage = this.parallaxCityElement.offsetTop; + this.elementBottomPosition = this.elementHeight + this.distanceFromTopOfPage; + }, + onScroll: function() { + if(!this.isAnimating){ + this.isAnimating = true; + window.requestAnimationFrame(this.handleParallaxScroll); + } + return; + }, + handleParallaxScroll: function() { + let viewportBottom = window.scrollY + window.innerHeight; + let percentageScrolled; + if (this.parallaxCityElement.offsetTop < viewportBottom) { + let visibleHeight = viewportBottom - Math.max(this.distanceFromTopOfPage, window.scrollY); + percentageScrolled = visibleHeight / (this.distanceFromBottomOfPage + (this.elementHeight / 2 )); + } else { + percentageScrolled = 0; + } + if(percentageScrolled > 1){ + percentageScrolled = 1; + } + percentageScrolled = percentageScrolled.toFixed(4); + if(percentageScrolled > .25){// When the element has been scrolled down 25%, start adjusting the position of layers. + let adjustedPercentage = (percentageScrolled - .25) * 4/3; + this.parallaxCityElement.querySelectorAll('div.parallax-layer').forEach((layer) => { + let scrollAmount = layer.getAttribute('scroll-amount'); + let movement = adjustedPercentage * scrollAmount; + layer.style.transform = 'translateY(-' + movement + 'px)'; + }); + } + this.isAnimating = false; + }, + } +}); diff --git a/website/assets/styles/components/parallax-city.component.less b/website/assets/styles/components/parallax-city.component.less new file mode 100644 index 0000000000..b9ed8f2366 --- /dev/null +++ b/website/assets/styles/components/parallax-city.component.less @@ -0,0 +1,111 @@ + +/** + * + * + * App-wide styles for our ajax buttons. + */ + +[parasails-component='parallax-city'] { + background: linear-gradient(180deg, #E9F4F4 0%, #FFFFFF 650px); + background-size: auto 100%; + background-position: center bottom; + background-repeat: no-repeat; + max-height: 600px; + display: flex; + flex-direction: column; + justify-content: flex-end; + [purpose='parallax-city-container'] { + height: 600px; + position: relative; + .parallax-layer { + position: absolute; + right: 0; + bottom: -1px; + width: 100%; + height: 100%; + will-change: transform; + background-size: auto 100%; + } + [purpose='foreground-cloud-1'] { + background-image: url('/images/parallax-cloud-city/1-cloud-7050x600@2x.png'); + + background-position: center bottom; + background-repeat: no-repeat; + z-index: 100; + } + [purpose='foreground-cloud-2'] { + background-image: url('/images/parallax-cloud-city/2-cloud-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 99; + } + [purpose='large-island'] { + background-image: url('/images/parallax-cloud-city/4-island-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 97; + } + [purpose='background-cloud-1'] { + background-image: url('/images/parallax-cloud-city/5-cloud-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 96; + } + [purpose='small-island-1'] { + background-image: url('/images/parallax-cloud-city/6-island-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 95; + } + [purpose='small-island-2'] { + background-image: url('/images/parallax-cloud-city/7-island-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 95; + } + [purpose='background-cloud-2'] { + background-image: url('/images/parallax-cloud-city/8-cloud-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 1; + } + [purpose='background-cloud-3'] { + background-image: url('/images/parallax-cloud-city/9-cloud-7050x600@2x.png'); + background-position: center bottom; + background-repeat: no-repeat; + z-index: 1; + } + } + @media (max-width: 1399px) { + [purpose='parallax-city-container'] { + height: 500px; + } + } + @media (max-width: 991px) { + [purpose='parallax-city-container'] { + height: 400px; + } + } + @media (max-width: 768px) { + [purpose='parallax-city-container'] { + height: 300px; + } + } + @media (max-width: 575px) { + [purpose='parallax-city-container'] { + height: 300px; + background-image: url('/images/parallax-cloud-city/cloud-city-static-576x300@2x.png'); + background-size: contain; + background-position: center bottom; + background-repeat: no-repeat; + .parallax-layer { + display: none; + } + } + } + @media (max-width: 375px) { + [purpose='parallax-city-container'] { + height: 200px; + } + } +} diff --git a/website/assets/styles/importer.less b/website/assets/styles/importer.less index f9c2e1d9d8..19b759fe98 100644 --- a/website/assets/styles/importer.less +++ b/website/assets/styles/importer.less @@ -25,6 +25,7 @@ @import 'components/bar-chart.component.less'; @import 'components/call-to-action.component.less'; @import 'components/scrollable-tweets.component.less'; +@import 'components/parallax-city.component.less'; // Per-page styles @import 'pages/homepage.less'; diff --git a/website/views/layouts/layout-customer.ejs b/website/views/layouts/layout-customer.ejs index 9b6080a0a8..7ee7cc56dd 100644 --- a/website/views/layouts/layout-customer.ejs +++ b/website/views/layouts/layout-customer.ejs @@ -218,6 +218,7 @@ + diff --git a/website/views/layouts/layout-sandbox.ejs b/website/views/layouts/layout-sandbox.ejs index ec0d1af1c3..9e09961194 100644 --- a/website/views/layouts/layout-sandbox.ejs +++ b/website/views/layouts/layout-sandbox.ejs @@ -323,6 +323,7 @@ + diff --git a/website/views/layouts/layout.ejs b/website/views/layouts/layout.ejs index 8909fa333d..0db60bd209 100644 --- a/website/views/layouts/layout.ejs +++ b/website/views/layouts/layout.ejs @@ -410,6 +410,7 @@ + diff --git a/website/views/pages/endpoint-ops.ejs b/website/views/pages/endpoint-ops.ejs index 6ffe1afa66..2c6747d2d9 100644 --- a/website/views/pages/endpoint-ops.ejs +++ b/website/views/pages/endpoint-ops.ejs @@ -192,11 +192,7 @@ <%/* Cloud city banner */%> -
- A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds -
+ diff --git a/website/views/pages/fleet-mdm.ejs b/website/views/pages/fleet-mdm.ejs index 93baf4eb10..73a9d1c532 100644 --- a/website/views/pages/fleet-mdm.ejs +++ b/website/views/pages/fleet-mdm.ejs @@ -120,10 +120,49 @@ <%/* Cloud city banner */%> -
- A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds -
+ + +
+
+
+

Is it any good?

+

Fill out the form below to see Dave bootstrapping a macOS device with MDM.

+
+ +
+ + +
Please enter a valid email address
+
+
+

How many hosts do you have?

+
+ + +
+
+ + +
Please choose one option
+
+
+ +
+ Submit +
+ +

We will never spam you.

+
+
+

Thank you!

+

We just sent you an email in case you need to watch it again.

+

Watch Dave's MDM demo

 +
+
+ <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %> diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index de6fd55070..bad3b0c08f 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -229,12 +229,7 @@ <%/* Cloud city banner */%> -
- A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds -
- + diff --git a/website/views/pages/vulnerability-management.ejs b/website/views/pages/vulnerability-management.ejs index 404c8a7c94..c3323fcde9 100644 --- a/website/views/pages/vulnerability-management.ejs +++ b/website/views/pages/vulnerability-management.ejs @@ -151,11 +151,7 @@ <%/* Cloud city banner */%> -
- A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds - A glass city floating on top of fluffy white clouds -
+