diff --git a/website/assets/js/pages/homepage.page.js b/website/assets/js/pages/homepage.page.js index e38e496b3e..6e7ba08873 100644 --- a/website/assets/js/pages/homepage.page.js +++ b/website/assets/js/pages/homepage.page.js @@ -34,8 +34,6 @@ parasails.registerPage('homepage', { }, clickOpenVideoModal: function(modalName) { - console.log(modalName); - console.log('hi?'); this.modal = modalName; }, diff --git a/website/assets/js/pages/vulnerability-management.page.js b/website/assets/js/pages/vulnerability-management.page.js index 7d7e2b47e2..16c4a044fd 100644 --- a/website/assets/js/pages/vulnerability-management.page.js +++ b/website/assets/js/pages/vulnerability-management.page.js @@ -3,6 +3,7 @@ parasails.registerPage('vulnerability-management', { // ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣ // ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝ data: { + modal: undefined, }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ @@ -24,5 +25,11 @@ parasails.registerPage('vulnerability-management', { window.HubSpotConversations.widget.open(); } }, + clickOpenVideoModal: function() { + this.modal = 'video'; + }, + closeModal: function() { + this.modal = undefined; + } } }); diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index 4ecf5cc0a3..d3de5114f0 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -572,57 +572,6 @@ 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%; @@ -749,35 +698,6 @@ 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'); diff --git a/website/assets/styles/pages/vulnerability-management.less b/website/assets/styles/pages/vulnerability-management.less index e730da15f6..1c5781d9c4 100644 --- a/website/assets/styles/pages/vulnerability-management.less +++ b/website/assets/styles/pages/vulnerability-management.less @@ -138,6 +138,84 @@ padding-right: 40px; padding-bottom: 120px; } + [purpose='testimonials'] { + margin-top: 120px; + margin-bottom: 120px; + } + + [purpose='testimonial'] { + border-radius: 12px; + border: 1px solid #E2E4EA; + background: #FFF; + cursor: pointer; + max-width: 550px; + margin-left: auto; + margin-right: auto; + [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; + background: url('/images/video-testimonial-austin-anderson-1440x810@2x.jpg'); + background-position: center; + background-size: cover; + } + &:hover { + box-shadow: 0px 4px 16px 0px #E2E4EA; + } + } + [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; + } + } [purpose='feature'] { margin-top: 120px; @@ -205,7 +283,7 @@ } } - @media (max-width: 1200px) { + @media (max-width: 1199px) { [purpose='logos'] { height: 58px; margin-left: auto; @@ -232,6 +310,43 @@ height: 22px; } } + + [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) { @@ -259,9 +374,28 @@ padding-right: 10px; } } + + [purpose='testimonials'] { + margin-top: 80px; + margin-bottom: 80px; + } + [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: 768px) { + @media (max-width: 767px) { h1 { font-size: 48px; @@ -312,6 +446,19 @@ [purpose='logos'] { height: 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) { @@ -345,6 +492,20 @@ [parasails-component='scrollable-tweets'] [purpose='tweets'] { margin-top: 40px; } + [purpose='testimonials'] { + margin-top: 40px; + margin-bottom: 40px; + } + [purpose='video-modal'] { + [purpose='modal-content'] { + width: 95vw; + height: calc(~'9/16 * 95vw'); + } + iframe { + width: 95vw; + height: calc(~'9/16 * 95vw'); + } + } } diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs index c640c992f1..381fc27117 100644 --- a/website/views/pages/homepage.ejs +++ b/website/views/pages/homepage.ejs @@ -38,25 +38,23 @@ <%/* Testimonial videos */%>
-
- an opening quotation mark +
+ 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

+

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

-
diff --git a/website/views/pages/vulnerability-management.ejs b/website/views/pages/vulnerability-management.ejs index d0f8147918..5aba345921 100644 --- a/website/views/pages/vulnerability-management.ejs +++ b/website/views/pages/vulnerability-management.ejs @@ -60,6 +60,19 @@ +
+
+
+ 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

+
+
+
+
+
+
Try Fleet today Talk to an expert @@ -95,5 +108,8 @@ A glass city floating on top of fluffy white clouds A glass city floating on top of fluffy white clouds
+ + + <%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>