diff --git a/website/assets/images/device-management-transparency-438x373@2x.png b/website/assets/images/device-management-transparency-438x373@2x.png new file mode 100644 index 0000000000..b8caf62521 Binary files /dev/null and b/website/assets/images/device-management-transparency-438x373@2x.png differ diff --git a/website/assets/images/icon-checkmark-circle-green-16x16@2x.png b/website/assets/images/icon-checkmark-circle-green-16x16@2x.png new file mode 100644 index 0000000000..94f8b26a57 Binary files /dev/null and b/website/assets/images/icon-checkmark-circle-green-16x16@2x.png differ diff --git a/website/assets/styles/pages/fleet-mdm.less b/website/assets/styles/pages/fleet-mdm.less index a667e5fd93..ea9218dc1c 100644 --- a/website/assets/styles/pages/fleet-mdm.less +++ b/website/assets/styles/pages/fleet-mdm.less @@ -59,7 +59,7 @@ } } - [purpose='button-row'] { + [purpose='button-row'], [purpose='bottom-button-row'] { a { white-space: nowrap; font-weight: 700; @@ -99,7 +99,6 @@ left: 160px; width: 110%; } - [purpose='animated-arrow-button-red'] { display: inline; padding-right: 40px; @@ -117,27 +116,70 @@ 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='bottom-button-row'] { + margin-top: 120px; + } + [purpose='scope-transparency-animated-arrow-button'] { + display: inline; + font-size: 16px; + 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 + left: 100%; // <--- 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 + } + &:hover:after { + left: 102%; // <--- 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; */ - } } } @@ -163,6 +205,12 @@ max-height: 300px; } } + [purpose='scope-tansparency-feature-image'] { + img { + max-height: 320px; + } + } + [purpose='large-feature-image'] { img { max-height: 250px; @@ -174,20 +222,18 @@ margin-bottom: 80px; } [purpose='checklist'] { - p { - padding-left: 28px; - text-indent: -28px; - } - p::before { - content: ' '; - background-image: url('/images/icon-checkmark-circle.svg'); - background-size: 16px 16px; - display: inline-block; - position: relative; - top: 2px; - margin-right: 12px; - width: 16px; + margin-bottom: 24px; + display: flex; + flex-direction: row; + // justify-content: center; + align-items: center; + img { height: 16px; + width: 16px; + margin-right: 16px; + } + p { + margin-bottom: 0px; } } @@ -276,6 +322,12 @@ padding-left: 120px; padding-right: 120px; } + + [purpose='scope-tansparency-feature-image'] { + img { + max-height: 355px; + } + } } @media (max-width: 1200px) { @@ -309,7 +361,7 @@ @media (max-width: 991px) { - [purpose='button-row'] { + [purpose='button-row'], [purpose='bottom-button-row'] { margin-right: auto; margin-left: auto; } @@ -360,7 +412,7 @@ margin-top: 80px; } - [purpose='feature-image'], [purpose='large-feature-image'] { + [purpose='feature-image'], [purpose='large-feature-image'], [purpose='scope-tansparency-feature-image'] { margin-bottom: 40px; img { max-height: 100%; @@ -380,6 +432,10 @@ max-width: 480px; } + [purpose='bottom-button-row'] { + margin-top: 80px; + } + [purpose='tweets-container'] { padding-top: 80px; padding-bottom: 80px; @@ -394,6 +450,7 @@ @media (max-width: 575px) { + [purpose='modal-content'] { background-color: #F9FAFC; padding: 24px; @@ -413,7 +470,7 @@ } } - [purpose='button-row'] { + [purpose='button-row'], [purpose='bottom-button-row'] { max-width: 100%; [purpose='cta-button'] { margin-right: 0px; @@ -421,11 +478,15 @@ margin-bottom: 24px; } } + [purpose='bottom-button-row'] { + margin-top: 60px; + } [purpose='feature'] { margin-top: 60px; } + [purpose='page-container'] { padding-left: 20px; padding-right: 20px; @@ -445,5 +506,10 @@ } } + @media (max-width: 375px) { + [purpose='scope-transparency-animated-arrow-button'] { + font-size: 14px; + } + } } diff --git a/website/views/pages/fleet-mdm.ejs b/website/views/pages/fleet-mdm.ejs index f731854276..9fa237cc32 100644 --- a/website/views/pages/fleet-mdm.ejs +++ b/website/views/pages/fleet-mdm.ejs @@ -46,7 +46,32 @@ -
+ Provide assurance to your end users about what information is being collected from their device.
+Let end users see the source code for exactly how they are being monitored.
+Set clear expectations about what is and isn’t acceptable use of work computers.
+Let users participate in fixing things.
+