Skip to content

Commit

Permalink
Website: Add video to banner on homepage and landing pages (#18610)
Browse files Browse the repository at this point in the history 
Closes: fleetdm/confidential#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 <[email protected]>
  • Loading branch information
@eashaw @mike-j-thomas
eashaw and mike-j-thomas authored Apr 30, 2024
1 parent f6797b3 commit af39d55
Show file tree
Hide file tree
Showing 15 changed files with 430 additions and 344 deletions.
Binary file added website/assets/images/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed website/assets/images/[email protected]
View file
Binary file not shown.
Binary file added website/assets/images/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified website/assets/images/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion website/assets/js/pages/device-management.page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ parasails.registerPage('device-management-page', {
// ║║║║ ║ ║╣ ╠╦╝╠═╣║ ║ ║║ ║║║║╚═╗
// ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
methods: {
//…
clickOpenVideoModal: function(modalName) {
this.modal = modalName;
},
closeModal: function() {
this.modal = undefined;
}
}
});
158 changes: 81 additions & 77 deletions website/assets/styles/pages/device-management.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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/[email protected]');
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;
}
}



Expand Down Expand Up @@ -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;
Expand Down
140 changes: 73 additions & 67 deletions website/assets/styles/pages/endpoint-ops.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
margin-bottom: 24px;
margin-top: 24px;
[purpose='calendar-feature-text'] {
max-width: 480px;
}
a {
margin-bottom: 6px;
padding-right: 24px;
[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-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%);
[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/[email protected]');
background-size: 20px 20px;
display: inline-block;
position: relative;
top: 5px;
margin-right: 16px;
width: 20px;
height: 20px;
}
}
img {
height: 100%;
width: auto;
[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;
}
}

Expand Down Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit af39d55

Please sign in to comment.