mirror of
https://github.com/fleetdm/fleet
synced 2026-05-21 16:08:47 +00:00
Website: add /better page (#19394)
Closes: https://github.com/fleetdm/confidential/issues/6159 Changes: - Added a new route to the /transparency page (/better) that shows additional content. - --------- Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
This commit is contained in:
Eric
GitHub
parent
10c838dead
commit
09a67e11e9
3 changed files with 170 additions and 9 deletions
128
website/assets/styles/pages/transparency.less
vendored
128
website/assets/styles/pages/transparency.less
vendored
|
|
@ -1,20 +1,109 @@
|
|||
#transparency {
|
||||
|
||||
#transparency {
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 120%;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 35px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
line-height: 120%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @core-vibrant-blue;
|
||||
}
|
||||
|
||||
[purpose='logos'] {
|
||||
max-width: 100%;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
text-align: center;
|
||||
margin-bottom: 104px;
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
line-height: 120%;
|
||||
}
|
||||
p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 526px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
[purpose='bottom-gradient'] {
|
||||
background: linear-gradient(180deg, #FFF 0%, #E4F3F4 59.5%);
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
margin-bottom: 104px;
|
||||
h3 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
[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='contact-button'] {
|
||||
margin-top: 12px;
|
||||
cursor: pointer;
|
||||
padding: 12px 32px;
|
||||
width: fit-content;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21px;
|
||||
color: #FFF;
|
||||
&:hover {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[parasails-component='parallax-city'] {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -31,6 +120,25 @@
|
|||
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
|
||||
[purpose='calendar-feature'] {
|
||||
margin-bottom: 64px;
|
||||
[purpose='feature-video'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='contact-button'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
|
|
@ -38,4 +146,18 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
[purpose='hero-text'] {
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
10
website/config/routes.js
vendored
10
website/config/routes.js
vendored
|
|
@ -105,6 +105,7 @@ module.exports.routes = {
|
|||
locals: {
|
||||
pageTitleForMeta: 'Transparency | Fleet',
|
||||
pageDescriptionForMeta: 'Learn what data osquery can see.',
|
||||
showContactFormCta: false,
|
||||
}
|
||||
},
|
||||
'GET /new-license': {
|
||||
|
|
@ -299,6 +300,15 @@ module.exports.routes = {
|
|||
}
|
||||
},
|
||||
|
||||
'GET /better': {
|
||||
action: 'view-transparency',
|
||||
locals: {
|
||||
showContactFormCta: true,
|
||||
pageDescriptionForMeta: 'Discover how Fleet simplifies IT and security, prioritizing privacy, transparency, and trust for end users.',
|
||||
pageTitleForMeta: 'Better with Fleet | Fleet'
|
||||
}
|
||||
},
|
||||
|
||||
// ╦ ╔═╗╔═╗╔═╗╔═╗╦ ╦ ╦═╗╔═╗╔╦╗╦╦═╗╔═╗╔═╗╔╦╗╔═╗
|
||||
// ║ ║╣ ║ ╦╠═╣║ ╚╦╝ ╠╦╝║╣ ║║║╠╦╝║╣ ║ ║ ╚═╗
|
||||
// ╩═╝╚═╝╚═╝╩ ╩╚═╝ ╩ ╩╚═╚═╝═╩╝╩╩╚═╚═╝╚═╝ ╩ ╚═╝
|
||||
|
|
|
|||
41
website/views/pages/transparency.ejs
vendored
41
website/views/pages/transparency.ejs
vendored
|
|
@ -1,9 +1,36 @@
|
|||
<div id="transparency" v-cloak>
|
||||
|
||||
<div style="max-width: 1008px;" class="container-fluid d-flex flex-column justify-content-center align-items-center px-3 px-md-4 pt-3 pt-lg-5 pb-5 mx-auto my-5">
|
||||
<% if(typeof showContactFormCta !== 'undefined' && showContactFormCta) {%>
|
||||
<div purpose="hero-text">
|
||||
<h1>A better user experience</h1>
|
||||
<p>Fleet is dedicated to making IT and security less annoying, while maintaining privacy, transparency, and trust for end users.</p>
|
||||
</div>
|
||||
<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">
|
||||
<h2>Tell me when and why</h2>
|
||||
<p>Fleet installs updates and forces restarts when your computer is actually free.</p>
|
||||
<div purpose="calendar-checklist" class="flex-column d-flex">
|
||||
<p>No more annoying time wastes and notifications</p>
|
||||
<p>No more restarts blocking you from important meetings</p>
|
||||
</div>
|
||||
<a purpose="contact-button" class="btn btn-primary" href="/contact">
|
||||
Ask us anything
|
||||
</a>
|
||||
</div>
|
||||
<div purpose="feature-video">
|
||||
<video autoplay loop muted playsinline purpose="calendar-video"><source src="/videos/calendar-feature-video.mp4" type="video/mp4"></video>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="logos" class="mx-auto">
|
||||
<logo-carousel></logo-carousel>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="container-fluid d-flex flex-column text-center justify-content-center align-items-center pb-5 mb-3 mx-auto">
|
||||
<h3 class="pb-3">What personal information can Fleet see?</h3>
|
||||
<p class="m-0">End users deserve to know what their employer can see on their laptops and the systems they manage.</p>
|
||||
<div purpose="hero-text" class="mb-3">
|
||||
<h3 class="pb-3">What personal information can Fleet see?</h3>
|
||||
<p class="m-0">End users deserve to know what their employer can see and do on their laptops. Here’s what Fleet can manage on your devices:</p>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="card" class="d-flex">
|
||||
<h4 class="text-center pb-4 mb-3">Fleet does <span style="font-weight: 900">NOT</span> have access to:</h4>
|
||||
|
|
@ -35,7 +62,7 @@
|
|||
<div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center pt-5 pb-5 mt-5 mx-auto">
|
||||
<h3 class="text-center pb-3 m-0">Here’s how Fleet can see and manage your devices:</h3>
|
||||
<div style="max-width: 800px; color: #192147;" class="pt-5 w-100 mx-auto">
|
||||
<div class="mb-5">
|
||||
<div>
|
||||
<div style="border-bottom: 1px solid #E2E4EA; padding-right: 20px;" class="position-relative">
|
||||
<p id="accordion__header1" style="cursor: pointer;" class="accordion pt-3 mb-3" data-toggle="collapse" data-target="#accordion__body1" aria-controls="accordion__body1">
|
||||
System settings
|
||||
|
|
@ -139,17 +166,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="card" class="d-flex flex-column flex-md-row align-items-center py-5 mb-5">
|
||||
<div purpose="card" class="d-flex flex-column flex-md-row align-items-center py-5 mb-5" v-if="!showContactFormCta">
|
||||
<div class="d-flex align-items-start px-4 pb-4 pb-lg-0">
|
||||
<img style="max-height: 92px; width: auto" alt="privacy icon" src="/images/privacy-80x92@2x.png"/>
|
||||
</div>
|
||||
<div class="text-center text-md-left px-4">
|
||||
<p class="font-weight-bold">It’s important to be vigilant about the personal information you share on your devices.</p>
|
||||
<p>If you are unsure, or still have concerns about your privacy, it’s a good idea to talk to your employer about your organization’s privacy policy, and how your personal information is handled.</p>
|
||||
<a href="https://blog.fleetdm.com/work-may-be-watching-but-it-might-not-be-as-bad-as-you-think-10b7f25e92bb" target="_blank" class="d-inline-flex">Read about what to do, and not do on your work computer.</a>
|
||||
<a href="https://blog.fleetdm.com/work-may-be-watching-but-it-might-not-be-as-bad-as-you-think-10b7f25e92bb" target="_blank" class="d-inline-flex">Read about what to do, and not do on your work computer.</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div purpose="bottom-gradient" v-if="showContactFormCta">
|
||||
<parallax-city></parallax-city>
|
||||
</div>
|
||||
</div>
|
||||
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue