mirror of
https://github.com/fleetdm/fleet
synced 2026-05-22 08:28:52 +00:00
Website: Add calls to action to /reports/state-of-device-management (#6148)
* Website: updated animated button mixin, add calls to action to report * added final hrefs * Update website/assets/styles/pages/reports/state-of-device-management.less Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com> Co-authored-by: Tim Kern <tim@fleetdm.com> Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
8228681119
commit
1affb341e3
8 changed files with 172 additions and 2 deletions
38
website/assets/images/background-report-cta-bottom.svg
vendored
Normal file
38
website/assets/images/background-report-cta-bottom.svg
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="720" height="401" viewBox="0 0 720 401" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4272_12175)">
|
||||
<path d="M720 -157.238H0V558.134H720V-157.238Z" fill="url(#paint0_linear_4272_12175)"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M900.364 -126.78C675.48 -218.413 520.872 -227.458 436.54 -153.914C310.054 -43.5976 385.927 18.3702 290.715 160.657C195.504 302.944 12.0844 194.206 -105.326 281.532C-183.6 339.75 -197.377 640.703 -146.656 744.968L900.364 746.559V-126.78Z" fill="url(#paint1_linear_4272_12175)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1054.37 180.884C829.482 89.2508 674.874 80.2062 590.542 153.75C464.056 264.066 539.929 326.037 444.717 468.321C349.506 610.606 166.086 501.87 48.6756 589.186C-29.5982 647.411 -43.3749 728.656 7.34548 832.921L1054.37 800.457V180.884Z" fill="url(#paint2_linear_4272_12175)" fill-opacity="0.8"/>
|
||||
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M1441.28 75.7552C1216.39 -15.8781 1061.79 -24.9227 977.453 48.6214C850.967 158.938 926.84 220.905 831.628 363.192C736.417 505.479 552.997 396.741 435.587 484.057C357.313 542.282 343.536 623.527 394.257 727.792L1441.28 725.135V75.7552Z" fill="url(#paint3_linear_4272_12175)"/>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.2">
|
||||
<rect x="-67.001" y="351.258" width="176" height="12" rx="6" fill="white"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.2">
|
||||
<rect x="-117.001" y="334.258" width="176" height="8" rx="4" fill="white"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.3">
|
||||
<circle cx="623" cy="59.2578" r="15" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4272_12175" x1="720" y1="-157.238" x2="0" y2="-157.238" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#201E43"/>
|
||||
<stop offset="1" stop-color="#272A5E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4272_12175" x1="855.433" y1="331.062" x2="409.921" y2="-328.264" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4272_12175" x1="1007.71" y1="829.675" x2="561.532" y2="170.195" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_4272_12175" x1="902.809" y1="-0.496094" x2="902.807" y2="727.792" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AE6DDF"/>
|
||||
<stop offset="1" stop-color="#6A67FE"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_4272_12175">
|
||||
<rect y="0.257812" width="720" height="400" rx="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
38
website/assets/images/background-report-cta-top.svg
vendored
Normal file
38
website/assets/images/background-report-cta-top.svg
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<svg width="720" height="281" viewBox="0 0 720 281" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4272_11789)">
|
||||
<path d="M720 -217.24H0V498.132H720V-217.24Z" fill="url(#paint0_linear_4272_11789)"/>
|
||||
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M900.364 -126.782C675.48 -218.415 520.872 -227.46 436.54 -153.916C310.054 -43.5995 385.927 18.3682 290.715 160.655C195.504 302.942 12.0843 194.204 -105.326 281.53C-183.6 339.748 -197.377 640.701 -146.656 744.966L900.364 746.557V-126.782Z" fill="url(#paint1_linear_4272_11789)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1054.37 90.8822C829.482 -0.751134 674.874 -9.79574 590.542 63.7484C464.055 174.064 539.929 236.035 444.717 378.319C349.505 520.604 166.086 411.868 48.6753 499.184C-29.5985 557.409 -43.3752 638.654 7.34524 742.919L1054.37 710.455V90.8822Z" fill="url(#paint2_linear_4272_11789)" fill-opacity="0.8"/>
|
||||
<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M1441.28 75.7533C1216.39 -15.88 1061.79 -24.9246 977.453 48.6194C850.967 158.936 926.84 220.903 831.628 363.19C736.417 505.477 552.997 396.739 435.587 484.055C357.313 542.28 343.536 623.525 394.257 727.79L1441.28 725.133V75.7533Z" fill="url(#paint3_linear_4272_11789)"/>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.3">
|
||||
<circle cx="557" cy="39" r="15" fill="white"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.2">
|
||||
<rect x="-67" y="215" width="176" height="12" rx="6" fill="white"/>
|
||||
</g>
|
||||
<g style="mix-blend-mode:overlay" opacity="0.2">
|
||||
<rect x="-117" y="198" width="176" height="8" rx="4" fill="white"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4272_11789" x1="720" y1="-217.24" x2="0" y2="-217.24" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#201E43"/>
|
||||
<stop offset="1" stop-color="#272A5E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4272_11789" x1="855.433" y1="331.06" x2="409.921" y2="-328.266" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4272_11789" x1="1007.71" y1="739.673" x2="561.531" y2="80.1931" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#3F2B6F" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#3F2B6F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_4272_11789" x1="902.809" y1="-0.498047" x2="902.807" y2="727.79" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#AE6DDF"/>
|
||||
<stop offset="1" stop-color="#6A67FE"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_4272_11789">
|
||||
<rect y="0.255859" width="720" height="280" rx="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
|
@ -17,7 +17,6 @@
|
|||
cursor: pointer;
|
||||
position: relative;
|
||||
width: auto;
|
||||
color: #192147;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
transition: 0.2s ease-in-out;
|
||||
|
|
|
|||
1
website/assets/styles/pages/homepage.less
vendored
1
website/assets/styles/pages/homepage.less
vendored
|
|
@ -44,6 +44,7 @@
|
|||
}
|
||||
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
color: #192147;
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
[purpose='animated-arrow-button-white'] {
|
||||
|
|
|
|||
1
website/assets/styles/pages/landing.less
vendored
1
website/assets/styles/pages/landing.less
vendored
|
|
@ -19,6 +19,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
[purpose='demo-btn'] {
|
||||
color: #192147;
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
|
||||
|
|
|
|||
1
website/assets/styles/pages/pricing.less
vendored
1
website/assets/styles/pages/pricing.less
vendored
|
|
@ -20,6 +20,7 @@
|
|||
}
|
||||
|
||||
[purpose='animated-arrow-button'] {
|
||||
color: #192147;
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -118,6 +118,74 @@
|
|||
color: @core-vibrant-blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
[purpose='report-cta-top'] {
|
||||
background-image: url('/images/background-report-cta-top.svg');
|
||||
background-position-x: right;
|
||||
background-size: cover;
|
||||
padding: 60px 40px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 40px;
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
[purpose='cta-text'] {
|
||||
color: #FFF;
|
||||
margin-bottom: 24px;
|
||||
h3 {
|
||||
font-weight: 900;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='report-cta-bottom'] {
|
||||
background-image: url('/images/background-report-cta-bottom.svg');
|
||||
background-position-x: right;
|
||||
background-size: cover;
|
||||
padding: 70px 40px;
|
||||
border-radius: 16px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 40px;
|
||||
a {
|
||||
color: #FFF;
|
||||
}
|
||||
[purpose='cta-text'] {
|
||||
color: #FFF;
|
||||
margin-bottom: 40px;
|
||||
h3 {
|
||||
font-weight: 900;
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
[purpose='small-cta-text'] {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
[purpose='cta-btns'] {
|
||||
[purpose='get-started-btn'] {
|
||||
padding: 16px 63px;
|
||||
}
|
||||
[purpose='animated-arrow-btn-red'] {
|
||||
color: #FFF;
|
||||
.btn-animated-arrow-red();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[purpose='section-marker'] {
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@
|
|||
<p>In the next section, we'll take a step back and look at why organizations choose an MDM in the first place.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="report-section" id="part-3">
|
||||
<div purpose="report-section" class="border-bottom-0" id="part-3">
|
||||
<span purpose="section-marker">PART 3</span>
|
||||
<h1>MDM deployment and implementation</h1>
|
||||
<p>Since our respondents manage devices, they can give us insight into why organizations implement an MDM, time to implementation, and implementation challenges.</p>
|
||||
|
|
@ -322,6 +322,17 @@
|
|||
<p>Once implemented, did our respondents find their solution effective? Many didn't, as we'll find out in the next section.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="report-cta-top">
|
||||
<div purpose="cta-text" class="text-white text-center">
|
||||
<h3>Give Fleet a try</h3>
|
||||
<p>Get up and running with a test environment of Fleet within minutes</p>
|
||||
</div>
|
||||
<div purpose="cta-btns" class="mx-auto d-flex flex-sm-row flex-column justify-content-center">
|
||||
<a purpose="get-started-btn" class="d-sm-flex align-items-center justify-content-center btn btn-primary mx-auto mr-sm-4 ml-sm-0" href="/get-started?utm_source=report&utm_medium=web&utm_campaign=sodm&utm_content=try">Get started</a>
|
||||
<a purpose="animated-arrow-btn-red" style="max-width: 220px;" class="btn btn-lg btn-white mr-2 pl-0 mx-auto mx-sm-0 mt-2 mt-sm-0" target="_blank" href="https://calendly.com/fleetdm/demo/?utm_source=report&utm_medium=web&utm_campaign=sodm&utm_content=try">Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="report-section" id="part-4">
|
||||
<span purpose="section-marker">PART 4</span>
|
||||
<h1>Device management effectiveness</h1>
|
||||
|
|
@ -521,6 +532,19 @@
|
|||
<h3 purpose="report-list-header">The future of device management</h3>
|
||||
<p>A comprehensive device management approach is a necessity for organizations, especially those with remote workers. Make sure your MDM solution offers the endpoint access and insights you need to keep your organization safe and secure.</p>
|
||||
</div>
|
||||
<div purpose="report-cta-bottom">
|
||||
<div purpose="cta-text" class="text-white text-center">
|
||||
<p purpose="small-cta-text">REAL TIME | OPEN SOURCE</p>
|
||||
<h3 class="mb-0">Safe and secure devices</h3>
|
||||
<h3 class="font-weight-normal">for security teams</h3>
|
||||
<p>Fortune 1,000 companies use Fleet to keep their<br class="d-none d-sm-block"> MacOS, Windows, and Linux devices secure and compliant.</p>
|
||||
</div>
|
||||
<div purpose="cta-btns" class="mx-auto d-flex flex-sm-row flex-column justify-content-center">
|
||||
<a purpose="get-started-btn" class="d-sm-flex align-items-center justify-content-center btn btn-primary mx-auto mr-sm-4 ml-sm-0" href="/get-started?utm_source=report&utm_medium=web&utm_campaign=sodm&utm_content=secure">Try Fleet</a>
|
||||
<a purpose="animated-arrow-btn-red" style="max-width: 220px;" class="btn btn-lg mr-2 pl-0 mx-auto mx-sm-0 mt-2 mt-sm-0" target="_blank" href="https://calendly.com/fleetdm/demo/?utm_source=report&utm_medium=web&utm_campaign=sodm&utm_content=secure">Schedule a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue