mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: add video to vulnerability management page, clean up homepage styles (#14206)
Changes: - Added a video testimonial to the vulnerability-management page.
This commit is contained in:
Eric
GitHub
parent
878e16269b
commit
fcc3c68165
6 changed files with 194 additions and 94 deletions
2
website/assets/js/pages/homepage.page.js
vendored
2
website/assets/js/pages/homepage.page.js
vendored
|
|
@ -34,8 +34,6 @@ parasails.registerPage('homepage', {
|
|||
},
|
||||
|
||||
clickOpenVideoModal: function(modalName) {
|
||||
console.log(modalName);
|
||||
console.log('hi?');
|
||||
this.modal = modalName;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
80
website/assets/styles/pages/homepage.less
vendored
80
website/assets/styles/pages/homepage.less
vendored
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
18
website/views/pages/homepage.ejs
vendored
18
website/views/pages/homepage.ejs
vendored
|
|
@ -38,25 +38,23 @@
|
|||
<%/* Testimonial videos */%>
|
||||
<div purpose="testimonials" class="d-flex flex-md-row flex-column justify-content-center card-deck">
|
||||
<div purpose="testimonial" class="d-flex flex-xl-row flex-column-reverse card" @click="clickOpenVideoModal('austin-anderson')">
|
||||
<div purpose="testimonial-text" class="card-body">
|
||||
<img alt="an opening quotation mark" style="width:18px; margin-bottom: 16px;" src="/images/quote-icon-18x12@2x.png">
|
||||
<div purpose="testimonial-text" class="card-body">
|
||||
<img alt="an opening quotation mark" style="width:18px; margin-bottom: 16px;" src="/images/quote-icon-18x12@2x.png">
|
||||
<p purpose="testimonial-quote">We can build it exactly the way we want it. Which is just not possible on other platforms.</p>
|
||||
<p class="mb-0"><strong>Austin Anderson</strong></p>
|
||||
<p>Cybersecurity team senior manager</p>
|
||||
</div>
|
||||
<div purpose="testimonial-video" class="card-title">
|
||||
<!-- <img alt="Play video icon" purpose="play-icon" src="images/icon-play-video-61x61@2x.png"> -->
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="testimonial-video" class="card-title">
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="testimonial" class="d-flex flex-xl-row flex-column-reverse card" @click="clickOpenVideoModal('nick-fohs')">
|
||||
<div purpose="testimonial-text" class="card-body">
|
||||
<img alt="an opening quotation mark" style="width:18px; margin-bottom: 16px;" src="/images/quote-icon-18x12@2x.png">
|
||||
<p purpose="testimonial-quote">Context is king for device data, and Fleet provides a way to surface that information to our other teams and partners.</p>
|
||||
<p class="mb-0"><strong>Nick Fohs</strong></p>
|
||||
<p>Systems and infrastructure manager</p>
|
||||
<p purpose="testimonial-quote">Context is king for device data, and Fleet provides a way to surface that information to our other teams and partners.</p>
|
||||
<p class="mb-0"><strong>Nick Fohs</strong></p>
|
||||
<p>Systems and infrastructure manager</p>
|
||||
</div>
|
||||
<div purpose="testimonial-video" class="card-title">
|
||||
<!-- <img alt="Play video icon" purpose="play-icon" src="images/icon-play-video-61x61@2x.png"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
16
website/views/pages/vulnerability-management.ejs
vendored
16
website/views/pages/vulnerability-management.ejs
vendored
|
|
@ -60,6 +60,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="testimonials" class="d-flex flex-row justify-content-center">
|
||||
<div purpose="testimonial" class="d-flex flex-xl-row flex-column-reverse card" @click="clickOpenVideoModal()">
|
||||
<div purpose="testimonial-text" class="card-body">
|
||||
<img alt="an opening quotation mark" style="width:18px; margin-bottom: 16px;" src="/images/quote-icon-18x12@2x.png">
|
||||
<p purpose="testimonial-quote">We can build it exactly the way we want it. Which is just not possible on other platforms.</p>
|
||||
<p class="mb-0"><strong>Austin Anderson</strong></p>
|
||||
<p>Cybersecurity team senior manager</p>
|
||||
</div>
|
||||
<div purpose="testimonial-video" class="card-title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
|
||||
<a purpose="cta-button" href="/try-fleet/register?tryitnow">Try Fleet today</a>
|
||||
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
|
||||
|
|
@ -95,5 +108,8 @@
|
|||
<img alt="A glass city floating on top of fluffy white clouds" class="d-none d-md-flex d-lg-none" src="/images/homepage-cloud-city-banner-md-990x375@2x.png">
|
||||
<img alt="A glass city floating on top of fluffy white clouds" class="d-flex d-md-none" src="/images/homepage-cloud-city-banner-sm-375x168@2x.png">
|
||||
</div>
|
||||
<modal purpose="video-modal" v-if="modal === 'video'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/G5Ry_vQPaYc?si=vv0AfRe30yssWWRM&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
</modal>
|
||||
</div>
|
||||
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue