diff --git a/website/assets/images/quote-icon-18x12@2x.png b/website/assets/images/quote-icon-18x12@2x.png new file mode 100644 index 0000000000..3c702cb6a5 Binary files /dev/null and b/website/assets/images/quote-icon-18x12@2x.png differ diff --git a/website/assets/images/video-testimonial-austin-anderson-1440x810@2x.jpg b/website/assets/images/video-testimonial-austin-anderson-1440x810@2x.jpg new file mode 100644 index 0000000000..07e9dd86fe Binary files /dev/null and b/website/assets/images/video-testimonial-austin-anderson-1440x810@2x.jpg differ diff --git a/website/assets/images/video-testimonial-nick-fohs-1440x810@2x.jpg b/website/assets/images/video-testimonial-nick-fohs-1440x810@2x.jpg new file mode 100644 index 0000000000..f7330ccd13 Binary files /dev/null and b/website/assets/images/video-testimonial-nick-fohs-1440x810@2x.jpg differ diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js index b708b02530..e38e496b3e 100644 --- a/website/assets/js/pages/homepage.page.js +++ b/website/assets/js/pages/homepage.page.js @@ -8,6 +8,7 @@ parasails.registerPage('homepage', { numberOfTweetPages: 0, numberOfTweetsPerPage: 0, tweetCardWidth: 0, + modal: undefined, }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ @@ -31,5 +32,15 @@ parasails.registerPage('homepage', { window.HubSpotConversations.widget.open(); } }, + + clickOpenVideoModal: function(modalName) { + console.log(modalName); + console.log('hi?'); + this.modal = modalName; + }, + + closeModal: function() { + this.modal = undefined; + } } }); diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 924faa10bf..4ecf5cc0a3 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -352,8 +352,99 @@ } } + [purpose='testimonials'] { + margin-bottom: 80px; + } - @media (max-width: 1200px) { + [purpose='testimonial'] { + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + cursor: pointer; + max-width: 550px; + [purpose='testimonial-text'] { + width: 320px; + padding: 40px; + p { + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; + } + [purpose='testimonial-quote'] { + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 24px; + } + } + [purpose='testimonial-video'] { + width: 230px; + border-top-right-radius: 12px; + border-bottom-right-radius: 12px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 0px; + } + &:hover { + box-shadow: 0px 4px 16px 0px #E2E4EA; + } + &:first-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-austin-anderson-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + margin-right: 20px; + margin-left: 0px; + } + &:last-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-nick-fohs-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + margin-right: 0px; + margin-left: 20px; + } + } + [purpose='video-modal'] { + [purpose='modal-dialog'] { + width: 100%; + max-width: 100%; + } + [purpose='modal-content'] { + max-width: 1140px; + height: 641px; + background-color: transparent; + box-shadow: none; + border: none; + padding: 0px; + margin-top: 150px; + margin-left: auto; + margin-right: auto; + [purpose='modal-close-button'] { + top: -40px; + right: 0px; + border-radius: 50%; + width: 32px; + height: 32px; + padding: 0px 0px 4px 0px; + background-color: #192147; + color: #FFF; + opacity: 1; + } + } + iframe { + width: 1140px; + height: 641px; + } + } + + + @media (max-width: 1199px) { [purpose='hero-background-image'] { background-size: 1600px auto; @@ -371,6 +462,44 @@ padding-right: 60px; padding-left: 60px; } + + [purpose='testimonial'] { + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + cursor: pointer; + max-width: 460px; + [purpose='testimonial-text'] { + width: 100%; + padding: 40px; + } + [purpose='testimonial-video'] { + height: 200px; + width: 100%; + border-top-right-radius: 12px; + border-top-left-radius: 12px; + border-bottom-right-radius: 0px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + } + [purpose='video-modal'] { + [purpose='modal-dialog'] { + width: 100%; + max-width: 100%; + } + [purpose='modal-content'] { + max-width: 960px; + height: 540px; + } + iframe { + width: 960px; + height: 540px; + } + } + } @media (max-width: 991px) { @@ -437,13 +566,77 @@ } } - - [purpose='bottom-cloud-city-banner'] { max-height: 375px; height: auto; width: 100%; } + + [purpose='testimonials'] { + margin-bottom: 80px; + } + + [purpose='testimonial'] { + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + cursor: pointer; + [purpose='testimonial-text'] { + width: 100%; + padding: 40px; + } + [purpose='testimonial-video'] { + height: 200px; + width: 100%; + border-top-right-radius: 12px; + border-top-left-radius: 12px; + border-bottom-right-radius: 0px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + [purpose='play-icon'] { + height: 61px; + width: 61px; + } + } + &:hover { + text-decoration: none; + } + &:first-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-austin-anderson-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + margin-right: 20px; + margin-left: 0px; + } + &:last-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-nick-fohs-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + margin-right: 0px; + margin-left: 20px; + } + } + [purpose='video-modal'] { + [purpose='modal-dialog'] { + width: 100%; + max-width: 100%; + } + [purpose='modal-content'] { + max-width: 720px; + height: 405px; + } + iframe { + width: 720px; + height: 405px; + } + } } @media (max-width: 767px) { @@ -555,6 +748,69 @@ [purpose='three-column-features'] { margin-bottom: 120px; } + [purpose='testimonial'] { + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + box-shadow: 0px 4px 16px 0px #E2E4EA; + cursor: pointer; + // max-width: 460px; + [purpose='testimonial-text'] { + width: 100%; + padding: 40px; + } + [purpose='testimonial-video'] { + height: 200px; + width: 100%; + border-top-right-radius: 12px; + border-top-left-radius: 12px; + border-bottom-right-radius: 0px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + [purpose='play-icon'] { + height: 61px; + width: 61px; + } + } + &:hover { + text-decoration: none; + } + &:first-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-austin-anderson-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + margin-right: auto; + margin-left: auto; + margin-bottom: 40px; + } + &:last-of-type { + [purpose='testimonial-video'] { + background: url('/images/video-testimonial-nick-fohs-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + margin-right: auto; + margin-left: auto; + } + } + [purpose='video-modal'] { + [purpose='modal-dialog'] { + max-width: 97vw; + } + [purpose='modal-content'] { + max-width: 540px; + height: 304px; + } + iframe { + width: 540px; + height: 304px; + } + } } @media (max-width: 575px) { @@ -676,7 +932,16 @@ height: 24px; } } - + [purpose='video-modal'] { + [purpose='modal-content'] { + width: 95vw; + height: calc(~'9/16 * 95vw'); + } + iframe { + width: 95vw; + height: calc(~'9/16 * 95vw'); + } + } } @media (max-width: 375px) { diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index 9e7ace33e2..c640c992f1 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -35,6 +35,31 @@ <%/* Homepage content */%>
+ <%/* Testimonial videos */%> +
+
+
+ an opening quotation mark +

We can build it exactly the way we want it. Which is just not possible on other platforms.

+

Austin Anderson

+

Cybersecurity team senior manager

+
+
+ +
+
+
+
+ an opening quotation mark +

Context is king for device data, and Fleet provides a way to surface that information to our other teams and partners.

+

Nick Fohs

+

Systems and infrastructure manager

+
+
+ +
+
+
<%/* Device management block */%>
@@ -267,5 +292,12 @@ A glass city floating on top of fluffy white clouds A glass city floating on top of fluffy white clouds
+ + + + + + +
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>