Add Andre's video testimonial (#15443)

Added Andre's video testimonial to the vulnerability management land
page.

# Checklist for submitter

- [x] Manual QA for all new/changed functionality
This commit is contained in:
Mike Thomas 2023-12-07 02:06:35 +09:00 committed by GitHub
parent 518dc54029
commit 572f2b1de5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 8 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

View file

@ -25,8 +25,8 @@ parasails.registerPage('vulnerability-management', {
window.HubSpotConversations.widget.open();
}
},
clickOpenVideoModal: function() {
this.modal = 'video';
clickOpenVideoModal: function(modalName) {
this.modal = modalName;
},
closeModal: function() {
this.modal = undefined;

View file

@ -177,13 +177,28 @@
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;
}
&: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-andre-shields-1440x810@2x.jpg');
background-position: center;
background-size: cover;
}
margin-right: 0px;
margin-left: 20px;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
@ -333,6 +348,14 @@
align-items: center;
justify-content: center;
}
&:first-of-type {
margin-right: 10px;
margin-left: 0px;
}
&:last-of-type {
margin-right: 0px;
margin-left: 10px;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
@ -447,6 +470,27 @@
[purpose='logos'] {
height: auto;
}
[purpose='testimonial'] {
&: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-andre-shields-1440x810@2x.jpg');
background-position: center;
background-size: cover;
}
margin-right: auto;
margin-left: auto;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
max-width: 97vw;

View file

@ -60,8 +60,9 @@
</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()">
<%/* 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">
<p purpose="testimonial-quote">We can build it exactly the way we want it. Which is just not possible on other platforms.</p>
@ -71,6 +72,16 @@
<div purpose="testimonial-video" class="card-title">
</div>
</div>
<div purpose="testimonial" class="d-flex flex-xl-row flex-column-reverse card" @click="clickOpenVideoModal('andre-shields')">
<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">The visibility down into the assets covered by the agent is phenomenal.</p>
<p class="mb-0"><strong>Andre Shields</strong></p>
<p>Cybersecurity security engineer, vulnerability management</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">
@ -108,8 +119,11 @@
<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()">
<modal purpose="video-modal" v-if="modal === 'austin-anderson'" @close="closeModal()">
<iframe width="560" height="315" src="https://www.youtube.com/embed/G5Ry_vQPaYc?si=vv0AfRe30yssWWRM&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</modal>
<modal purpose="video-modal" v-if="modal === 'andre-shields'" @close="closeModal()">
<iframe width="560" height="315" src="https://www.youtube.com/embed/siXy9aanOu4?si=fRIUQrrOu81lAqi8&amp;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() %>