mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 01:18:42 +00:00
Website: Add video to banner on homepage and landing pages (#18610)
Closes: https://github.com/fleetdm/confidential/issues/6289 Closes: #16441 Changes: - Updated the positon and layout of the calendar banner on the homepage and landing pages. - Updated the homepage hero image --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
f6797b38e5
commit
af39d557d3
15 changed files with 431 additions and 345 deletions
BIN
website/assets/images/homepage-hero-3227x920@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-hero-3227x920@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
BIN
website/assets/images/icon-play-video-32x32@2x.png
vendored
Normal file
BIN
website/assets/images/icon-play-video-32x32@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 107 KiB |
|
|
@ -20,6 +20,11 @@ parasails.registerPage('device-management-page', {
|
|||
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
|
||||
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
|
||||
methods: {
|
||||
//…
|
||||
clickOpenVideoModal: function(modalName) {
|
||||
this.modal = modalName;
|
||||
},
|
||||
closeModal: function() {
|
||||
this.modal = undefined;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
158
website/assets/styles/pages/device-management.less
vendored
158
website/assets/styles/pages/device-management.less
vendored
|
|
@ -28,10 +28,11 @@
|
|||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
text-transform: uppercase;
|
||||
color: @core-fleet-black-75;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
|
@ -301,78 +302,77 @@
|
|||
[parasails-component='logo-carousel'] {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 0px 64px 40px 64px;
|
||||
margin-bottom: 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[purpose='calendar-card-body'] {
|
||||
width: 50%;
|
||||
padding-left: 64px;
|
||||
padding-bottom: 24px;
|
||||
margin-right: 24px;
|
||||
text-align: left;
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
p {
|
||||
max-width: 720px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
a {
|
||||
margin-bottom: 6px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-card'] {
|
||||
border-radius: 24px;
|
||||
border: 1px solid #E2E4EA;
|
||||
background: linear-gradient(165deg, #F9FDFE 10.56%, #FFF 33.43%);
|
||||
overflow: hidden;
|
||||
height: 420px;
|
||||
}
|
||||
[purpose='coming-soon-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
[purpose='calendar-image'] {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 24px;
|
||||
height: 420px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: hidden;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 55px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 420px;
|
||||
background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
margin-bottom: 140px;
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
[purpose='new-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
width: min-content;
|
||||
}
|
||||
[purpose='calendar-checklist'] {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
padding-left: 37px;
|
||||
text-indent: -37px;
|
||||
margin-bottom: 1.5rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
p::before {
|
||||
content: ' ';
|
||||
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
|
||||
background-size: 20px 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
[purpose='feature-video'] {
|
||||
margin-left: 80px;
|
||||
max-width: 468px;
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='video-button'] {
|
||||
margin-top: 12px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -534,8 +534,12 @@
|
|||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 0px 40px 40px 40px;
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature-video'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
[purpose='page-section'] {
|
||||
margin-bottom: 140px;
|
||||
|
|
|
|||
140
website/assets/styles/pages/endpoint-ops.less
vendored
140
website/assets/styles/pages/endpoint-ops.less
vendored
|
|
@ -22,10 +22,11 @@
|
|||
h4 {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
text-transform: uppercase;
|
||||
color: @core-fleet-black-75;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
|
@ -292,76 +293,74 @@
|
|||
[parasails-component='logo-carousel'] {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 0px 64px 40px 64px;
|
||||
margin-bottom: 40px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[purpose='calendar-card-body'] {
|
||||
width: 50%;
|
||||
padding-left: 64px;
|
||||
padding-bottom: 24px;
|
||||
margin-right: 24px;
|
||||
text-align: left;
|
||||
[purpose='calendar-feature'] {
|
||||
margin-bottom: 140px;
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
p {
|
||||
max-width: 720px;
|
||||
[purpose='calendar-feature-text'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
[purpose='new-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
width: min-content;
|
||||
}
|
||||
[purpose='calendar-checklist'] {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 24px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
padding-left: 37px;
|
||||
text-indent: -37px;
|
||||
margin-bottom: 1.5rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
p::before {
|
||||
content: ' ';
|
||||
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
|
||||
background-size: 20px 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
margin-bottom: 6px;
|
||||
padding-right: 24px;
|
||||
[purpose='feature-video'] {
|
||||
margin-left: 80px;
|
||||
max-width: 468px;
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='calendar-card'] {
|
||||
border-radius: 24px;
|
||||
border: 1px solid #E2E4EA;
|
||||
background: linear-gradient(165deg, #F9FDFE 10.56%, #FFF 33.43%);
|
||||
overflow: hidden;
|
||||
height: 420px;
|
||||
}
|
||||
[purpose='coming-soon-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
[purpose='calendar-image'] {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 24px;
|
||||
height: 420px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: hidden;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 55px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 420px;
|
||||
background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
[purpose='video-button'] {
|
||||
margin-top: 12px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -533,6 +532,13 @@
|
|||
[purpose='calendar-section'] {
|
||||
padding: 0px 40px 40px 40px;
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature-video'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
[purpose='page-content'] {
|
||||
max-width: 840px;
|
||||
}
|
||||
|
|
|
|||
167
website/assets/styles/pages/homepage.less
vendored
167
website/assets/styles/pages/homepage.less
vendored
|
|
@ -1,7 +1,7 @@
|
|||
#homepage {
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: 64px;
|
||||
font-size: 48px;
|
||||
line-height: 120%;
|
||||
}
|
||||
h3 {
|
||||
|
|
@ -18,13 +18,14 @@
|
|||
}
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 120%;
|
||||
color: @core-fleet-black-75;
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
color: @core-fleet-black-75;
|
||||
|
|
@ -36,22 +37,22 @@
|
|||
}
|
||||
|
||||
[purpose='hero-container'] {
|
||||
background: #E4F4F4;
|
||||
background: linear-gradient(#E4F3F4, #FFFFFF);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background: url('/images/homepage-hero-background-3840x500@2x.png');
|
||||
background-size: 3840px auto;
|
||||
background: url('/images/homepage-hero-3227x920@2x.png');
|
||||
background-size: auto 400px;
|
||||
background-position: center bottom;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 100px;
|
||||
padding-top: 64px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 480px;
|
||||
padding-bottom: 380px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
|
|
@ -62,8 +63,8 @@
|
|||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 40px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,6 +87,80 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
[purpose='calendar-feature'] {
|
||||
margin-bottom: 120px; /*increased while testimonial videos are temporarily hidden.*/
|
||||
h3 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
[purpose='new-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
width: min-content;
|
||||
}
|
||||
[purpose='calendar-checklist'] {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
padding-left: 37px;
|
||||
text-indent: -37px;
|
||||
margin-bottom: 1.5rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
p::before {
|
||||
content: ' ';
|
||||
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
|
||||
background-size: 20px 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
[purpose='feature-video'] {
|
||||
margin-left: 80px;
|
||||
max-width: 468px;
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='video-button'] {
|
||||
margin-top: 16px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
[purpose='testimonials'] {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
|
@ -228,9 +303,6 @@
|
|||
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 468px;
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
margin-bottom: 32px;
|
||||
|
|
@ -594,16 +666,13 @@
|
|||
@media (max-width: 1199px) {
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: 3400px auto;
|
||||
background-size: auto 400px;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px;
|
||||
|
||||
}
|
||||
[purpose='homepage-hero'] {
|
||||
max-width: 1080px;
|
||||
padding-bottom: 380px;
|
||||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
|
|
@ -656,26 +725,21 @@
|
|||
font-size: 48px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 32px;
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature-video'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='calendar-card-body'] {
|
||||
padding: 60px 24px 24px 24px;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: 2800px auto;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
max-width: 100%;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 400px;
|
||||
padding-bottom: 380px;
|
||||
}
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 400px;
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
|
|
@ -865,20 +929,13 @@
|
|||
font-size: 48px;
|
||||
}
|
||||
|
||||
[purpose='calendar-section'] {
|
||||
padding: 40px 24px;
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 360px;
|
||||
}
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 278px;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 360px;
|
||||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 308px;
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
|
|
@ -1137,17 +1194,23 @@
|
|||
height: 287px;
|
||||
}
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 270px;
|
||||
padding-bottom: 320px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 320px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
max-width: 224px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[purpose='platform-block'] {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
|
@ -1350,6 +1413,14 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
[purpose='homepage-hero'] {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 220px;
|
||||
}
|
||||
|
||||
[purpose='hero-background-image'] {
|
||||
background-size: auto 220px;
|
||||
}
|
||||
|
||||
[purpose='hero-text'] {
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -12,15 +12,16 @@
|
|||
}
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
}
|
||||
h4 {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
line-height: 150%;
|
||||
text-transform: uppercase;
|
||||
color: @core-fleet-black-75;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -292,78 +293,76 @@
|
|||
[parasails-component='logo-carousel'] {
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
[purpose='calendar-section'] {
|
||||
padding: 0px 64px 40px 64px;
|
||||
margin-bottom: 80px;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[purpose='calendar-card-body'] {
|
||||
width: 50%;
|
||||
padding-left: 64px;
|
||||
padding-bottom: 24px;
|
||||
margin-right: 24px;
|
||||
text-align: left;
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
line-height: 120%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
p {
|
||||
max-width: 720px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
a {
|
||||
margin-bottom: 6px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-card'] {
|
||||
border-radius: 24px;
|
||||
border: 1px solid #E2E4EA;
|
||||
background: linear-gradient(165deg, #F9FDFE 10.56%, #FFF 33.43%);
|
||||
overflow: hidden;
|
||||
height: 420px;
|
||||
}
|
||||
[purpose='coming-soon-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
[purpose='calendar-image'] {
|
||||
padding-top: 32px;
|
||||
padding-bottom: 24px;
|
||||
height: 420px;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: hidden;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
width: 55px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 420px;
|
||||
background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
margin-bottom: 140px;
|
||||
h3 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
[purpose='new-badge'] {
|
||||
background-color: #0587FF;
|
||||
padding: 4px 8px 3px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: #FFF;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 12px;
|
||||
width: min-content;
|
||||
}
|
||||
[purpose='calendar-checklist'] {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
padding-left: 37px;
|
||||
text-indent: -37px;
|
||||
margin-bottom: 1.5rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
p::before {
|
||||
content: ' ';
|
||||
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
|
||||
background-size: 20px 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
[purpose='feature-video'] {
|
||||
margin-left: 80px;
|
||||
max-width: 468px;
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='video-button'] {
|
||||
margin-top: 12px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='feature'] {
|
||||
margin-bottom: 180px;
|
||||
|
|
@ -469,6 +468,13 @@
|
|||
[purpose='calendar-section'] {
|
||||
padding: 0px 40px 40px 40px;
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature-video'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
[purpose='page-content'] {
|
||||
max-width: 840px;
|
||||
}
|
||||
|
|
|
|||
BIN
website/assets/videos/calendar-feature-video.mp4
vendored
Normal file
BIN
website/assets/videos/calendar-feature-video.mp4
vendored
Normal file
Binary file not shown.
9
website/views/pages/device-management.ejs
vendored
9
website/views/pages/device-management.ejs
vendored
|
|
@ -40,13 +40,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<logo-carousel></logo-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<% if(primaryBuyingSituation){%>
|
||||
<%- partial('../partials/calendar-banner.partial.ejs') %>
|
||||
<% } %>
|
||||
<div purpose="page-container">
|
||||
<div purpose="page-content" class="mx-auto">
|
||||
<%/* Your last MDM migration section */%>
|
||||
<div purpose="page-section">
|
||||
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center mb-0">
|
||||
|
|
@ -220,5 +214,8 @@
|
|||
</div>
|
||||
<%/* Cloud city banner */%>
|
||||
<parallax-city></parallax-city>
|
||||
<modal purpose="video-modal" v-if="modal === 'calendar'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/nhufmzGUeNk?si=rtAF6sFZuA7PhYRS&autoplay=1" 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() %>
|
||||
|
|
|
|||
13
website/views/pages/endpoint-ops.ejs
vendored
13
website/views/pages/endpoint-ops.ejs
vendored
|
|
@ -90,13 +90,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<logo-carousel></logo-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<% if(primaryBuyingSituation){%>
|
||||
<%- partial('../partials/calendar-banner.partial.ejs') %>
|
||||
<% } %>
|
||||
<div purpose="page-container">
|
||||
<div purpose="page-content" class="mx-auto">
|
||||
<div purpose="feature-headline" class="mr-auto">
|
||||
<h3>Pulse check anything</h3>
|
||||
<p>Use a live connection to every endpoint to simplify audit, compliance, and reporting from workstations to data centers.</p>
|
||||
|
|
@ -278,10 +272,13 @@
|
|||
<%/* Cloud city banner */%>
|
||||
<parallax-city></parallax-city>
|
||||
<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&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/G5Ry_vQPaYc?si=vv0AfRe30yssWWRM&&autoplay=1;rel=0" 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&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/fs5ULAR4e4A?si=pChZBt_sSNj13goP&&autoplay=1;rel=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 === 'calendar'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/nhufmzGUeNk?si=rtAF6sFZuA7PhYRS&autoplay=1" 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() %>
|
||||
|
|
|
|||
66
website/views/pages/homepage.ejs
vendored
66
website/views/pages/homepage.ejs
vendored
|
|
@ -6,7 +6,6 @@
|
|||
<div class="d-flex flex-row justify-content-center align-items-start">
|
||||
<%/* Hero text */%>
|
||||
<div purpose="hero-text" class="d-flex flex-column justify-content-center">
|
||||
<h4>For teams with lots of different endpoints</h4>
|
||||
<h1><%- partial('../partials/primary-tagline.partial.ejs') %></h1>
|
||||
<p>Replace the sprawl with open-source code that works the way you want.</p>
|
||||
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center">
|
||||
|
|
@ -26,7 +25,37 @@
|
|||
<div purpose="homepage-content" class="container">
|
||||
<%/* Testimonial videos */%>
|
||||
<div purpose="page-section" class="mb-0">
|
||||
<div purpose="testimonials" class="d-flex flex-lg-row flex-column justify-content-center card-deck">
|
||||
|
||||
<div purpose="calendar-feature" class="d-flex flex-lg-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div purpose="calendar-feature-text" class="d-flex flex-column">
|
||||
<div purpose="new-badge">NEW</div>
|
||||
<% if(!primaryBuyingSituation) {%>
|
||||
<h2>Stop nudging</h2>
|
||||
<p>Stop installing updates and forcing restarts when your users are busy using their computers. Fleet finds time in the calendar for a reboot and uses AI to explain why.</p>
|
||||
<%} else if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%>
|
||||
<h2>Put IT in your calendar</h2>
|
||||
<p>Install updates and force restarts when your users’ computers are actually free.</p>
|
||||
<%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%>
|
||||
<h2>Tell employees why</h2>
|
||||
<p>Use AI to explain why your security policies matter, and install required updates en masse without locking people out of meetings.</p>
|
||||
<%}%>
|
||||
<div purpose="calendar-checklist" class="flex-column d-flex">
|
||||
<p>Say goodbye to annoying IT notifications and restarts.</p>
|
||||
<p>Use AI to explain why your security policies matter.</p>
|
||||
<p>Stop making exceptions for executives when OS updates lock them out of important meetings.</p>
|
||||
</div>
|
||||
<div purpose="video-button" class="d-flex flex-row align-items-center" @click="clickOpenVideoModal('calendar')">
|
||||
<img src="/images/icon-play-video-32x32@2x.png" alt="play button">Watch the video
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="feature-video">
|
||||
<video autoplay loop muted purpose="calendar-video"><source src="/videos/calendar-feature-video.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div purpose="testimonials" class="d-none <!-- temporarily disabled videos --> flex-lg-row flex-column justify-content-center card-deck">
|
||||
<% if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%>
|
||||
<div purpose="testimonial" class="nick-fohs d-flex align-items-center card" @click="clickOpenVideoModal('nick-fohs')">
|
||||
<div purpose="testimonial-video" class="card-title">
|
||||
|
|
@ -54,34 +83,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% if(primaryBuyingSituation) {%>
|
||||
<div purpose="calendar-section">
|
||||
<div purpose="calendar-card" class="d-flex flex-column align-items-center">
|
||||
<div purpose="calendar-card-body" class="d-flex flex-column align-items-center">
|
||||
<div purpose="coming-soon-badge">Coming soon</div>
|
||||
<!-- <h3>Stop nudging</h3> -->
|
||||
<!-- <p>Stop installing updates and forcing restarts when your users are busy using their computers. Fleet finds time in the calendar for a reboot and uses AI to explain why.</p> -->
|
||||
<% if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Put IT in your calendar</h3>
|
||||
<p>Install updates and force restarts when your users’ computers are actually free.</p>
|
||||
<%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Tell employees why</h3>
|
||||
<p>Use AI to explain why your security policies matter, and install required updates en masse without locking people out of meetings.</p>
|
||||
<%}%>
|
||||
<% if(me && me.primaryBuyingSituation) {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm#primarybuyingsituation=<%= encodeURIComponent(me.primaryBuyingSituation) %>" target="_blank">Let me know</a>
|
||||
<% } else if(primaryBuyingSituation) {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm#primarybuyingsituation=<%= encodeURIComponent(primaryBuyingSituation) %>" target="_blank">Let me know</a>
|
||||
<% } else {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm" target="_blank">Let me know</a>
|
||||
<% } %>
|
||||
</div>
|
||||
<div purpose="calendar-image">
|
||||
<img alt="Fleet in your calendar" src="/images/homepage-calendar-1280x420@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<div purpose="homepage-content" class="container">
|
||||
<div purpose="page-section">
|
||||
<% if(!primaryBuyingSituation){ %>
|
||||
|
|
@ -417,7 +418,7 @@
|
|||
<div class="text-center" purpose="bottom-cta">
|
||||
<h4>For teams with lots of different endpoints</h4>
|
||||
<h1><%- partial('../partials/primary-tagline.partial.ejs') %></h1>
|
||||
<div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
|
||||
<div purpose="button-row" style="margin-top: 40px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
|
||||
<a purpose="cta-button" href="/register">Start now</a>
|
||||
<a purpose="animated-arrow-button-red" href="/contact">Talk to us</a>
|
||||
</div>
|
||||
|
|
@ -433,5 +434,8 @@
|
|||
<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&rel=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 === 'calendar'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/nhufmzGUeNk?si=rtAF6sFZuA7PhYRS&autoplay=1" 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() %>
|
||||
|
|
|
|||
13
website/views/pages/vulnerability-management.ejs
vendored
13
website/views/pages/vulnerability-management.ejs
vendored
|
|
@ -48,13 +48,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<logo-carousel></logo-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<% if(primaryBuyingSituation){%>
|
||||
<%- partial('../partials/calendar-banner.partial.ejs') %>
|
||||
<% } %>
|
||||
<div purpose="page-container">
|
||||
<div purpose="page-content" class="mx-auto">
|
||||
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
|
||||
<div purpose="feature-image" class="right">
|
||||
<img alt="Report what matters" src="/images/vuln-management-feature-image-5-380x312@2x.png">
|
||||
|
|
@ -158,10 +152,13 @@
|
|||
<%/* Cloud city banner */%>
|
||||
<parallax-city></parallax-city>
|
||||
<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&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/G5Ry_vQPaYc?si=vv0AfRe30yssWWRM&&autoplay=1;rel=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&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/siXy9aanOu4?si=fRIUQrrOu81lAqi8&&autoplay=1;rel=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 === 'calendar'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/nhufmzGUeNk?si=rtAF6sFZuA7PhYRS&autoplay=1" 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() %>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,26 @@
|
|||
<div purpose="calendar-section">
|
||||
<div purpose="calendar-card" class="d-flex flex-md-row flex-column align-items-center">
|
||||
<div purpose="calendar-card-body" class="d-flex flex-column align-items-md-start align-items-center">
|
||||
<div purpose="coming-soon-badge">Coming soon</div>
|
||||
<% if(!primaryBuyingSituation) {%>
|
||||
<h3>Stop nudging</h3>
|
||||
<p>Stop installing updates and forcing restarts when your users are busy using their computers. Fleet finds time in the calendar for a reboot and uses AI to explain why.</p>
|
||||
<%} else if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Put IT in your calendar</h3>
|
||||
<p>Install updates and force restarts when your users’ computers are actually free.</p>
|
||||
<%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Tell employees why</h3>
|
||||
<p>Use AI to explain why your security policies matter, and install required updates en masse without locking people out of meetings.</p>
|
||||
<%}%>
|
||||
<% if(me && me.primaryBuyingSituation) {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm#primarybuyingsituation=<%= encodeURIComponent(me.primaryBuyingSituation) %>" target="_blank">Let me know</a>
|
||||
<% } else if(primaryBuyingSituation) {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm#primarybuyingsituation=<%= encodeURIComponent(primaryBuyingSituation) %>" target="_blank">Let me know</a>
|
||||
<% } else {%>
|
||||
<a purpose="animated-arrow-button-red" href="https://kqphpqst851.typeform.com/to/WwAtAUdm" target="_blank">Let me know</a>
|
||||
<% } %>
|
||||
<div purpose="calendar-feature" class="d-flex flex-lg-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div purpose="calendar-feature-text" class="d-flex flex-column">
|
||||
<div purpose="new-badge">NEW</div>
|
||||
<% if(!primaryBuyingSituation) {%>
|
||||
<h3>Stop nudging</h3>
|
||||
<p>Stop installing updates and forcing restarts when your users are busy using their computers. Fleet finds time in the calendar for a reboot and uses AI to explain why.</p>
|
||||
<%} else if(['mdm', 'eo-it'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Put IT in your calendar</h3>
|
||||
<p>Install updates and force restarts when your users’ computers are actually free.</p>
|
||||
<%} else if(['vm', 'eo-security'].includes(primaryBuyingSituation)) {%>
|
||||
<h3>Tell employees why</h3>
|
||||
<p>Use AI to explain why your security policies matter, and install required updates en masse without locking people out of meetings.</p>
|
||||
<%}%>
|
||||
<div purpose="calendar-checklist" class="flex-column d-flex">
|
||||
<p>Say goodbye to annoying IT notifications and restarts.</p>
|
||||
<p>Use AI to explain why your security policies matter.</p>
|
||||
<p>Stop making exceptions for executives when OS updates lock them out of important meetings.</p>
|
||||
</div>
|
||||
<div purpose="calendar-image">
|
||||
<img alt="Fleet in your calendar" src="/images/calendar-graphic-703x420@2x.png">
|
||||
<div purpose="video-button" class="d-flex flex-row align-items-center" @click="clickOpenVideoModal('calendar')">
|
||||
<img src="/images/icon-play-video-32x32@2x.png" alt="play button">Watch the video
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="feature-video">
|
||||
<video autoplay loop muted purpose="calendar-video"><source src="/videos/calendar-feature-video.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue