mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
Website: Update vulnerability management page (#15510)
Closes: #14083 Changes: - Updated the content and layout of the `/vulnerability-management` page to match the latest wireframes
This commit is contained in:
Eric
GitHub
parent
eb7f838125
commit
c5fb96bf57
18 changed files with 513 additions and 426 deletions
BIN
website/assets/images/icon-checkmark-green-20x20@2x.png
vendored
Normal file
BIN
website/assets/images/icon-checkmark-green-20x20@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
website/assets/images/icon-play-video-8x9@2x.png
vendored
Normal file
BIN
website/assets/images/icon-play-video-8x9@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 B |
BIN
website/assets/images/icon-quote-21x17@2x.png
vendored
Normal file
BIN
website/assets/images/icon-quote-21x17@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
BIN
website/assets/images/testimonial-andre-shields-48x48@2x.png
vendored
Normal file
BIN
website/assets/images/testimonial-andre-shields-48x48@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
website/assets/images/video-testimonial-thumbnail-andre-shields-223x168@2x.png
vendored
Normal file
BIN
website/assets/images/video-testimonial-thumbnail-andre-shields-223x168@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
website/assets/images/video-testimonial-thumbnail-austin-anderson-223x168@2x.jpg
vendored
Normal file
BIN
website/assets/images/video-testimonial-thumbnail-austin-anderson-223x168@2x.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
website/assets/images/vuln-management-feature-image-1-380x281@2x.png
vendored
Normal file
BIN
website/assets/images/vuln-management-feature-image-1-380x281@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
website/assets/images/vuln-management-feature-image-2-380x323@2x.png
vendored
Normal file
BIN
website/assets/images/vuln-management-feature-image-2-380x323@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
website/assets/images/vuln-management-feature-image-3-380x320@2x.png
vendored
Normal file
BIN
website/assets/images/vuln-management-feature-image-3-380x320@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
website/assets/images/vuln-management-feature-image-4-380x270@2x.png
vendored
Normal file
BIN
website/assets/images/vuln-management-feature-image-4-380x270@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
website/assets/images/vuln-management-feature-image-5-380x312@2x.png
vendored
Normal file
BIN
website/assets/images/vuln-management-feature-image-5-380x312@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
website/assets/images/vuln-management-hero-image-360x374@2x.png
vendored
Normal file
BIN
website/assets/images/vuln-management-hero-image-360x374@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB |
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
[purpose='tweets-page-indicator'] {
|
||||
li {
|
||||
padding: 12px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
#vulnerability-management {
|
||||
|
||||
background: linear-gradient(180deg, #E8F1F6 0%, #FFF 8.76%);
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
font-size: 64px;
|
||||
line-height: 76px;
|
||||
line-height: 54px;
|
||||
}
|
||||
h2 {
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
|
|
@ -28,28 +27,56 @@
|
|||
p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
color: @core-fleet-black-75;
|
||||
}
|
||||
strong {
|
||||
colore: @core-fleet-black;
|
||||
}
|
||||
[purpose='page-content'] {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
[purpose='hero-background'] {
|
||||
background: linear-gradient(180deg, #E8F1F7 3.37%, #FFFFFF 60%);
|
||||
padding-top: 120px;
|
||||
padding-bottom: 40px;
|
||||
[purpose='page-container'] {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[purpose='page-headline'] {
|
||||
padding-bottom: 80px;
|
||||
width: 680px;
|
||||
h2 {
|
||||
font-size: 48px;
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
line-height: 57.6px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
[purpose='hero-container'] {
|
||||
max-width: 1200px;
|
||||
[purpose='hero'] {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
[purpose='hero-image'] {
|
||||
max-width: 360px;
|
||||
img {
|
||||
padding-left: 25px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
text-align: center;
|
||||
max-width: 920px;
|
||||
padding: 0 40px;
|
||||
h1 {
|
||||
margin-bottom: 32px;
|
||||
width: 468px;
|
||||
margin-left: 40px;
|
||||
text-align: left;
|
||||
strong {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 800;
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 27px;
|
||||
max-width: 640px;
|
||||
margin: 0 auto 32px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +109,7 @@
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: -5px;
|
||||
width: 50%;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
transform: skew(-10deg);
|
||||
transition: left 0.5s ease-in, opacity 0.50s ease-in, width 0.5s ease-in;
|
||||
|
|
@ -93,111 +120,141 @@
|
|||
width: 110%;
|
||||
}
|
||||
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
display: inline;
|
||||
padding-right: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
min-width: 125px;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
&:after {
|
||||
content: url('/images/arrow-right-red-16x16@2x.png');
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 80%; // <--- here
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
/* opacity: 0; */
|
||||
}
|
||||
&:hover:after {
|
||||
left: 82%; // <--- here
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
/* opacity:1; */
|
||||
}
|
||||
}
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
display: inline;
|
||||
padding-right: 40px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
min-width: 125px;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
color: @core-fleet-black;
|
||||
text-decoration: none;
|
||||
&:after {
|
||||
content: url('/images/arrow-right-red-16x16@2x.png');
|
||||
transform: scale(0.5);
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 80%; // <--- here
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
/* opacity: 0; */
|
||||
}
|
||||
&:hover:after {
|
||||
left: 82%; // <--- here
|
||||
transition: 0.2s ease-in-out;
|
||||
-o-transition: 0.2s ease-in-out;
|
||||
-ms-transition: 0.2s ease-in-out;
|
||||
-moz-transition: 0.2s ease-in-out;
|
||||
-webkit-transition: 0.2s ease-in-out;
|
||||
/* opacity:1; */
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='page-container'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 120px;
|
||||
|
||||
[purpose='testimonial-videos'] {
|
||||
width: 468px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
[purpose='testimonials'] {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 120px;
|
||||
padding-top: 60px;
|
||||
margin-bottom: 180px;
|
||||
}
|
||||
|
||||
[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;
|
||||
[purpose='testimonial-quote'] {
|
||||
width: 380px;
|
||||
[purpose='quote'] {
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: @core-fleet-black-75;
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
}
|
||||
[purpose='testimonial-quote'] {
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
[purpose='testimonial-video'] {
|
||||
width: 230px;
|
||||
border-top-right-radius: 12px;
|
||||
border-bottom-right-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
[purpose='quote-image'] {
|
||||
margin-right: 16px;
|
||||
img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
[purpose='quote-attribution'] {
|
||||
[purpose='name'] {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[purpose='title'] {
|
||||
color: @core-fleet-black-75;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
[purpose='testimonial-video'] {
|
||||
cursor: pointer;
|
||||
width: 223px;
|
||||
height: 168px;
|
||||
border-radius: 22.265px;
|
||||
border: 0.975px solid @core-fleet-black-50;
|
||||
display: flex;
|
||||
margin-bottom: 0px;
|
||||
position: relative;
|
||||
span {
|
||||
img {
|
||||
height: 10.235px;
|
||||
width: auto;
|
||||
margin-right: 5.5px;
|
||||
}
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
border-radius: 16.698px;
|
||||
background: rgba(0, 2, 10, 0.50);
|
||||
backdrop-filter: blur(5.566145420074463px);
|
||||
display: inline-flex;
|
||||
padding: 5.566px 11.132px;
|
||||
justify-content: center;
|
||||
margin-bottom: 0px;
|
||||
align-items: center;
|
||||
color: #FFF;
|
||||
font-size: 11.132px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 16.698px;
|
||||
}
|
||||
&: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;
|
||||
background: url('/images/video-testimonial-thumbnail-austin-anderson-223x168@2x.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 12px;
|
||||
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;
|
||||
}
|
||||
background: url('/images/video-testimonial-thumbnail-andre-shields-223x168@2x.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 0px;
|
||||
margin-left: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
[purpose='video-modal'] {
|
||||
|
|
@ -234,54 +291,68 @@
|
|||
}
|
||||
|
||||
[purpose='feature'] {
|
||||
margin-top: 120px;
|
||||
max-width: 960px;
|
||||
margin-bottom: 180px;
|
||||
h3 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
div {
|
||||
max-width: 480px;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='feature-image'].left {
|
||||
margin-left: 24px;
|
||||
}
|
||||
[purpose='feature-image'].right {
|
||||
margin-right: 24px;
|
||||
}
|
||||
[purpose='feature-image'] {
|
||||
max-width: 380px;
|
||||
img {
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 380px;
|
||||
}
|
||||
}
|
||||
[purpose='large-feature-image'] {
|
||||
img {
|
||||
max-height: 250px;
|
||||
[purpose='feature-text'] {
|
||||
width: 468px;
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='checklists'] {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
[purpose='checklist'] {
|
||||
p {
|
||||
padding-left: 28px;
|
||||
text-indent: -28px;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
padding-left: 37px;
|
||||
text-indent: -37px;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
p::before {
|
||||
content: ' ';
|
||||
background-image: url('/images/icon-checkmark-circle.svg');
|
||||
background-size: 16px 16px;
|
||||
background-image: url('/images/icon-checkmark-green-20x20@2x.png');
|
||||
background-size: 20px 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-right: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 5px;
|
||||
margin-right: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='tweets-container'] {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
padding-top: 200px;
|
||||
max-width: 960px;
|
||||
}
|
||||
[parasails-component='scrollable-tweets'] {
|
||||
[purpose='tweets'] {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='bottom-gradient'] {
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
|
||||
}
|
||||
|
|
@ -292,70 +363,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
[purpose='page-container'] {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
[purpose='logos'] {
|
||||
height: 58px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
img {
|
||||
margin-top: 23.5px;
|
||||
margin-bottom: 23.5px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
[purpose='snowflake-logo'] {
|
||||
height: 21px;
|
||||
}
|
||||
[purpose='wayfair-logo'] {
|
||||
height: 23px;
|
||||
}
|
||||
[purpose='uber-logo'] {
|
||||
height: 20px;
|
||||
}
|
||||
[purpose='atlassian-logo'] {
|
||||
height: 16px;
|
||||
}
|
||||
[purpose='segment-logo'] {
|
||||
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;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-right: 10px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: 0px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
[purpose='page-container'] {
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
[purpose='video-modal'] {
|
||||
[purpose='modal-dialog'] {
|
||||
|
|
@ -374,122 +385,116 @@
|
|||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
[purpose='button-row'] {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
[purpose='page-container'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
[purpose='hero-background'] {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 80px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
[purpose='page-content'] {
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
[purpose='logos'] {
|
||||
height: 58px;
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
img {
|
||||
margin-top: 17.5px;
|
||||
margin-bottom: 17.5px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
[purpose='tweets-container'] {
|
||||
max-width: 840px;
|
||||
}
|
||||
|
||||
[purpose='testimonials'] {
|
||||
margin-top: 80px;
|
||||
margin-bottom: 80px;
|
||||
[purpose='testimonial-videos'] {
|
||||
width: 410px;
|
||||
}
|
||||
[purpose='video-modal'] {
|
||||
[purpose='modal-dialog'] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
[purpose='modal-content'] {
|
||||
max-width: 720px;
|
||||
height: 405px;
|
||||
}
|
||||
iframe {
|
||||
width: 720px;
|
||||
height: 405px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
width: 410px;
|
||||
}
|
||||
[purpose='feature-text'] {
|
||||
width: 410px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
line-height: 54px;
|
||||
}
|
||||
|
||||
[purpose='page-container'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
[purpose='checklists'] {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
[purpose='feature'] {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
[purpose='feature-image'], [purpose='large-feature-image'] {
|
||||
margin-bottom: 40px;
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='hero-background'] {
|
||||
padding-top: 60px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
[purpose='hero-text'] {
|
||||
text-align: center;
|
||||
[purpose='page-content'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
[purpose='tweets-container'] {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
max-width: 480px;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-top: 120px;
|
||||
}
|
||||
|
||||
[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;
|
||||
[purpose='page-headline'] {
|
||||
padding-bottom: 80px;
|
||||
width: 100%;
|
||||
h2 {
|
||||
font-size: 42px;
|
||||
line-height: 50.4px;
|
||||
}
|
||||
&:last-of-type {
|
||||
[purpose='testimonial-video'] {
|
||||
background: url('/images/video-testimonial-andre-shields-1440x810@2x.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
[purpose='hero-image'] {
|
||||
margin-right: unset;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
width: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
[purpose='testimonial-videos'] {
|
||||
width: unset;
|
||||
}
|
||||
[purpose='button-row'] {
|
||||
max-width: 100%;
|
||||
[purpose='cta-button'] {
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='feature-text'] {
|
||||
width: unset;
|
||||
}
|
||||
[purpose='feature'] {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
[purpose='feature-image'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 60px;
|
||||
&.left {
|
||||
margin-left: auto;
|
||||
}
|
||||
&.right {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
[purpose='hero-image'] {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
[purpose='testimonials'] {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
[purpose='testimonial-videos'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[purpose='testimonial-quote'] {
|
||||
width: 100%;
|
||||
margin-bottom: 60px;
|
||||
[purpose='quote'] {
|
||||
img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
[purpose='quote-image'] {
|
||||
margin-bottom: 16px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
[purpose='quote-attribution'] {
|
||||
text-align: center;
|
||||
[purpose='name'] {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='video-modal'] {
|
||||
[purpose='modal-dialog'] {
|
||||
|
|
@ -500,58 +505,105 @@
|
|||
height: 304px;
|
||||
}
|
||||
iframe {
|
||||
width: 540px;
|
||||
height: 304px;
|
||||
width: 540px;
|
||||
height: 304px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
[purpose='page-container'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
[purpose='tweets-container'] {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
[purpose='feature-image'] {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='hero-image'] {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='testimonial-video'] {
|
||||
width: 200px;
|
||||
height: 160px;
|
||||
&:first-of-type {
|
||||
margin-right: 10px;
|
||||
margin-left: auto;
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-right: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='button-row'] {
|
||||
max-width: 100%;
|
||||
[purpose='cta-button'] {
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
[purpose='video-modal'] {
|
||||
[purpose='modal-content'] {
|
||||
width: 95vw;
|
||||
height: calc(~'9/16 * 95vw');
|
||||
}
|
||||
iframe {
|
||||
width: 95vw;
|
||||
height: calc(~'9/16 * 95vw');
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 472px) {
|
||||
[purpose='testimonial-videos'] {
|
||||
flex-direction: column;
|
||||
}
|
||||
[purpose='testimonial-video'] {
|
||||
width: 223px;
|
||||
height: 168px;
|
||||
&:first-of-type {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='feature'] {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
[purpose='page-container'] {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[purpose='tweets-container'] {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
[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');
|
||||
&:last-of-type {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
[purpose='page-container'] {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
[purpose='tweets-container'] {
|
||||
padding-left: 32px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
[purpose='hero'] {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
[purpose='hero-image'] {
|
||||
max-height: 360px;
|
||||
max-width: unset;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 261px;
|
||||
}
|
||||
}
|
||||
[purpose='testimonials'] {
|
||||
padding-top: 40px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
[purpose='testimonial-quote'] {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='feature-image'] {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
231
website/views/pages/vulnerability-management.ejs
vendored
231
website/views/pages/vulnerability-management.ejs
vendored
|
|
@ -1,129 +1,164 @@
|
|||
<div id="vulnerability-management" v-cloak>
|
||||
|
||||
<div purpose="hero-background" class="container-lg d-flex justify-content-center">
|
||||
|
||||
<div purpose="hero-container" class="d-flex flex-column align-items-center">
|
||||
<div purpose="hero-text">
|
||||
<h4 class="mb-2">Vulnerability management</h4>
|
||||
<h1>Know what’s going on with your computers</h1>
|
||||
<p>Measure and automate risk across your laptops and servers.</p>
|
||||
<div purpose="button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center">
|
||||
<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>
|
||||
<div purpose="page-container">
|
||||
<div purpose="page-content" class="mx-auto">
|
||||
<div purpose="hero">
|
||||
<div purpose="page-headline">
|
||||
<h4>Vulnerability management</h4>
|
||||
<h2>Build the vulnerability program you actually want</h2>
|
||||
</div>
|
||||
<div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
|
||||
<div purpose="hero-image">
|
||||
<img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div purpose="page-container" class="container-lg">
|
||||
|
||||
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div class="d-flex flex-column mr-md-4">
|
||||
<h3>Reporting and automation</h3>
|
||||
<p>Automatically match CVEs (Common Vulnerabilities and Exposures) to what exists in your environment.</p>
|
||||
<div purpose="checklist" class="flex-column d-flex">
|
||||
<p>View live reports to see how efficiently you are addressing vulnerabilities.</p>
|
||||
<p>Create vulnerability management automations via Jira, Zendesk or webhooks.</p>
|
||||
<div purpose="hero-text">
|
||||
<strong>Forget triaging every CVE</strong>
|
||||
<p>Not every CVE requires your attention. Focus on known exploits and vulnerabilities that actually exist in your environment first.</p>
|
||||
<strong>Up-to-date data without scans</strong>
|
||||
<p>Traditional network vulnerability scans can make endpoints run more slowly. Fleet does things differently.</p>
|
||||
<strong>Consolidate your security stack</strong>
|
||||
<p>Consolidate your point vulnerability solution with your cybersecurity asset management and log capture tool.</p>
|
||||
<div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
|
||||
<a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
|
||||
<a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="feature-image">
|
||||
<img alt="Osquery management feature image" src="images/vulnerability-management-feature-1-420x298@2x.png">
|
||||
</div>
|
||||
<div purpose="testimonials" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
|
||||
<div purpose="testimonial-quote">
|
||||
<div purpose="quote">
|
||||
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
|
||||
<p>Fleet lets us be more actionable with fewer people. It helps us to filter out the noise better than we could with the other big name products we replaced.</p>
|
||||
</div>
|
||||
<div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
|
||||
<div purpose="quote-image"><img src="/images/testimonial-andre-shields-48x48@2x.png" alt="Andre shields"></div>
|
||||
<div class="d-flex flex-column">
|
||||
<p purpose="name">Andre Shields</p>
|
||||
<p purpose="title">Cybersecurity Security Engineer, Vulnerability Management</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="testimonial-videos" class="d-flex">
|
||||
<div purpose="testimonial-video" @click="clickOpenVideoModal('austin-anderson')">
|
||||
<span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
|
||||
</div>
|
||||
<div purpose="testimonial-video" @click="clickOpenVideoModal('andre-shields')">
|
||||
<span><img src="/images/icon-play-video-8x9@2x.png" alt="Play">Play video</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
|
||||
<div purpose="feature-image">
|
||||
<img alt="Osquery management feature image" src="images/vulnerability-management-feature-2-420x330@2x.png">
|
||||
<div purpose="feature-image" class="right">
|
||||
<img alt="Forget triaging every CVE" src="/images/vuln-management-feature-image-1-380x281@2x.png">
|
||||
</div>
|
||||
<div class="d-flex flex-column ml-md-4">
|
||||
<h3>Software and asset inventory</h3>
|
||||
<p>Visibility into all laptops across any operating system. Support for servers and containers in any cloud infrastructure.</p>
|
||||
<div purpose="feature-text" class="d-flex flex-column">
|
||||
<h3>Forget triaging every CVE</h3>
|
||||
<p>Not every CVE requires your attention. Focus on known exploits and vulnerabilities that actually exist in your environment first.</p>
|
||||
<div purpose="checklist" class="flex-column d-flex">
|
||||
<p>Identify outdated, vulnerable, or compromised software apps and packages.</p>
|
||||
<p>Verify agents, including Chef, Munki, Puppet, or Crowdstrike Falcon, are installed and working correctly.</p>
|
||||
<p>Track patch progress of “celebrity CVEs” across every operating system, every cloud, and every device</p>
|
||||
<p>Help teams work on vulnerabilities that have actually been exploited (CISA KEVs) or have a high probability of being exploited (EPSS), or whatever is important in your environment</p>
|
||||
<p>Create webhooks that take action when researchers publish new CVEs that affect your environment, or when users find ways to change things</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div class="d-flex flex-column mr-md-4">
|
||||
<h3>Automate health checks</h3>
|
||||
<p>Enhance Security, DevOps, IT, and HR workflows by taking findings from policies and automating actions to allow end-user remediation.</p>
|
||||
<div purpose="feature-text" class="d-flex flex-column">
|
||||
<h3>Up-to-date data without scans</h3>
|
||||
<p>Traditional network vulnerability scans can make endpoints run more slowly. Fleet does things differently.</p>
|
||||
<div purpose="checklist" class="flex-column d-flex">
|
||||
<p>CI/CD integration for cloud and on-prem devices.</p>
|
||||
<p>Fleet REST API provides full CLI functionality.</p>
|
||||
<p>Demonstrate an accurate security posture</p>
|
||||
<p>Lightweight enough for the most brittle environments</p>
|
||||
<p>Easily get any data you need to report against patch deadlines</p>
|
||||
</div>
|
||||
<a purpose="animated-arrow-button-red" href="/try-fleet">Explore real data</a>
|
||||
</div>
|
||||
<div purpose="feature-image">
|
||||
<img alt="Osquery management feature image" src="images/vulnerability-management-feature-3-420x282@2x.png">
|
||||
<div purpose="feature-image" class="left">
|
||||
<img alt="Up-to-date data without scans" src="/images/vuln-management-feature-image-2-380x323@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%/* 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">
|
||||
</div>
|
||||
<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="Consolidate your security stack" src="/images/vuln-management-feature-image-3-380x320@2x.png">
|
||||
</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 purpose="feature-text" class="d-flex flex-column">
|
||||
<h3>Consolidate your security stack</h3>
|
||||
<p>Consolidate your point vulnerability solution with your cybersecurity asset management and log capture tool.</p>
|
||||
<div purpose="checklist" class="flex-column d-flex">
|
||||
<p>Reduce tool sprawl and wasted budget</p>
|
||||
<p>Prevent competing architecture and suddenly-incompatible data</p>
|
||||
<p>Process CVEs from cloud and non-cloud assets in a single platform</p>
|
||||
</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>
|
||||
<div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div purpose="feature-text" class="d-flex flex-column">
|
||||
<h3>Deep context from the environment</h3>
|
||||
<p>Automatically match CVEs to your operating systems, apps, extensions, browser plugins, Python libraries, everything.</p>
|
||||
<div purpose="checklist" class="flex-column d-flex">
|
||||
<p>Look up vulnerabilities, system state, and hardware details as fast as the cloud team can</p>
|
||||
<p>Use over 300 data tables to reduce blockers, prioritize better, and go to other teams less</p>
|
||||
</div>
|
||||
<a purpose="animated-arrow-button-red" href="/try-fleet">Explore real data</a>
|
||||
</div>
|
||||
<div purpose="feature-image" class="left">
|
||||
<img alt="Deep context from the environment" src="/images/vuln-management-feature-image-4-380x270@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<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="A collaborative approach to vulnerability management" src="/images/vuln-management-feature-image-5-380x312@2x.png">
|
||||
</div>
|
||||
<div purpose="feature-text" class="d-flex flex-column">
|
||||
<h3>A collaborative approach to vulnerability management</h3>
|
||||
<p>Like Fastly and Gusto, give your teams a consistent interface for better collaboration.</p>
|
||||
<div purpose="checklist" class="flex-column d-flex">
|
||||
<p>Give observer-level access to your IT support, infrastructure teams, or anyone who needs it</p>
|
||||
<p>Show progress towards patching goals and share live reports with auditors or internal IT and platform teams</p>
|
||||
<p>Help IT and infrastructure teams identify the most time-sensitive patches to work on</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%/* End of page gradient */%>
|
||||
<div purpose="bottom-gradient">
|
||||
<div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
|
||||
<div purpose="section-heading" style="max-width: 720px" class="mx-auto text-center">
|
||||
<h4>Don’t know osquery?</h4>
|
||||
<h2>Dedicated support from osquery experts</h2>
|
||||
<p>Osquery is the open-source agent that powers Fleet. And we have the most osquery experts around. We’ll help you realize the potential of this tool for your organization.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<scrollable-tweets></scrollable-tweets>
|
||||
<div purpose="page-container" class="pb-0 container">
|
||||
|
||||
<div purpose="bottom-cta" class="text-center">
|
||||
<h4>Open-source device management</h4>
|
||||
<h1>Lighter than air</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">
|
||||
<a purpose="cta-button" href="/try-fleet/register?tryitnow">Try it out</a>
|
||||
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%/* Cloud city banner */%>
|
||||
</div>
|
||||
<div class="d-flex flex-column" purpose="bottom-cloud-city-banner">
|
||||
<img alt="A glass city floating on top of fluffy white clouds" class="d-none d-lg-flex" src="/images/homepage-cloud-city-banner-lg-1600x375@2x.png">
|
||||
<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 === 'andre-shields'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/siXy9aanOu4?si=fRIUQrrOu81lAqi8&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>
|
||||
<%/* End of page gradient */%>
|
||||
<div purpose="bottom-gradient">
|
||||
<div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
|
||||
<div purpose="section-heading" class="mx-auto text-center">
|
||||
<h4>Who else uses Fleet?</h4>
|
||||
<h2>Empowering security and IT teams, globally</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<scrollable-tweets></scrollable-tweets>
|
||||
<div purpose="page-container" class="pb-0 container">
|
||||
|
||||
<div purpose="bottom-cta" class="text-center">
|
||||
<h4>Open-source endpoint ops</h4>
|
||||
<h1>Lighter than air</h1>
|
||||
<div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-md-row flex-column justify-content-center align-items-center mx-auto">
|
||||
<a purpose="cta-button" href="/try-fleet/register?tryitnow">Try it out</a>
|
||||
<a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%/* Cloud city banner */%>
|
||||
<div class="d-flex flex-column" purpose="bottom-cloud-city-banner">
|
||||
<img alt="A glass city floating on top of fluffy white clouds" class="d-none d-lg-flex" src="/images/homepage-cloud-city-banner-lg-1600x375@2x.png">
|
||||
<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 === 'andre-shields'" @close="closeModal()">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/siXy9aanOu4?si=fRIUQrrOu81lAqi8&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