mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
Website: Add video testimonials to homepage (#14201)
https://github.com/fleetdm/confidential/issues/3785 Changes: - Added video testimonials to the homepage. This change has been tested on: - [x] Safari v13 (iOS and macOS) - [x] Android 7 - [x] Firefox v103 - [x] Chrome v80 - [x] Opera v64 - [x] Edge v80 --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
b5400b640f
commit
807b1bcb00
6 changed files with 312 additions and 4 deletions
BIN
website/assets/images/quote-icon-18x12@2x.png
vendored
Normal file
BIN
website/assets/images/quote-icon-18x12@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 814 B |
BIN
website/assets/images/video-testimonial-austin-anderson-1440x810@2x.jpg
vendored
Normal file
BIN
website/assets/images/video-testimonial-austin-anderson-1440x810@2x.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 897 KiB |
BIN
website/assets/images/video-testimonial-nick-fohs-1440x810@2x.jpg
vendored
Normal file
BIN
website/assets/images/video-testimonial-nick-fohs-1440x810@2x.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 894 KiB |
11
website/assets/js/pages/homepage.page.js
vendored
11
website/assets/js/pages/homepage.page.js
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
273
website/assets/styles/pages/homepage.less
vendored
273
website/assets/styles/pages/homepage.less
vendored
|
|
@ -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) {
|
||||
|
|
|
|||
32
website/views/pages/homepage.ejs
vendored
32
website/views/pages/homepage.ejs
vendored
|
|
@ -35,6 +35,31 @@
|
|||
</div>
|
||||
<%/* Homepage content */%>
|
||||
<div purpose="homepage-content" class="container">
|
||||
<%/* 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>
|
||||
<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" 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>
|
||||
</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>
|
||||
|
||||
<%/* Device management block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
|
||||
|
|
@ -267,5 +292,12 @@
|
|||
<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 === 'austin-anderson'" @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>
|
||||
<modal purpose="video-modal" v-if="modal === 'nick-fohs'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/fs5ULAR4e4A?si=pChZBt_sSNj13goP&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 locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue