mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
Website: update /better page (#22621)
Closes: #22611 Changes: - Updated the content of the /better page to match the latest wireframes.
This commit is contained in:
Eric
GitHub
parent
a81775788f
commit
875d5dd218
3 changed files with 57 additions and 49 deletions
BIN
website/assets/images/better-hero-image-468x380@2x.png
vendored
Normal file
BIN
website/assets/images/better-hero-image-468x380@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
80
website/assets/styles/pages/transparency.less
vendored
80
website/assets/styles/pages/transparency.less
vendored
|
|
@ -6,10 +6,18 @@
|
|||
@page-container-max-width-lg: 840px;
|
||||
@page-container-max-width-md: 480px;
|
||||
|
||||
h1 {
|
||||
color: #192147;
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
line-height: @heading-lineheight; /* 120% */
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: @heading-lineheight;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
|
|
@ -20,7 +28,9 @@
|
|||
font-size: 20px;
|
||||
line-height: @heading-lineheight;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #515774;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: @core-fleet-black-75;
|
||||
|
|
@ -54,7 +64,7 @@
|
|||
}
|
||||
[purpose='hero-text'] {
|
||||
text-align: center;
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: 40px;
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
|
|
@ -64,49 +74,36 @@
|
|||
p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 526px;
|
||||
max-width: 600px;
|
||||
margin-bottom: 0px;
|
||||
color: #515774;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: @text-lineheight;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature'] {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
h2 {
|
||||
h3 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 32px;
|
||||
color: var(--ui-fleet-black-75, #515774);
|
||||
|
||||
/* Body MD (FKA p) */
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px; /* 150% */
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
max-width: 480px;
|
||||
[purpose='feature-text'] {
|
||||
max-width: 430px;
|
||||
}
|
||||
[purpose='calendar-checklist'] {
|
||||
margin-bottom: 32px;
|
||||
p {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
padding-left: 37px;
|
||||
text-indent: -37px;
|
||||
margin-bottom: 32px;
|
||||
&: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'] {
|
||||
[purpose='feature-image'] {
|
||||
margin-left: 80px;
|
||||
max-width: 468px;
|
||||
img {
|
||||
|
|
@ -194,10 +191,8 @@
|
|||
|
||||
[purpose='accordion'] {
|
||||
|
||||
h2 {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
[purpose='accordion-body'] {
|
||||
margin-top: 40px;
|
||||
width: 100%;
|
||||
|
||||
[purpose='accordion-item'] {
|
||||
|
|
@ -261,9 +256,9 @@
|
|||
max-width: @page-container-max-width-lg;
|
||||
}
|
||||
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature'] {
|
||||
margin-bottom: 64px;
|
||||
[purpose='feature-video'] {
|
||||
[purpose='feature-image'] {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 40px;
|
||||
|
|
@ -329,7 +324,7 @@
|
|||
[purpose='feature-headline'] {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='calendar-feature'] {
|
||||
[purpose='feature'] {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
|
@ -357,6 +352,9 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
[purpose='secureframe-banner'] {
|
||||
padding: 32px 16px;
|
||||
h2 {
|
||||
|
|
@ -372,7 +370,7 @@
|
|||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
[purpose='calendar-feature-text'] {
|
||||
[purpose='feature-text'] {
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
|
|
|||
26
website/views/pages/transparency.ejs
vendored
26
website/views/pages/transparency.ejs
vendored
|
|
@ -2,12 +2,25 @@
|
|||
<div purpose="page-container" class="container-fluid">
|
||||
<div purpose="page-content">
|
||||
<div purpose="hero-text">
|
||||
<h2 class="text-center">What can Fleet access on my device?</h2>
|
||||
<p class="text-center col-md-8">End users deserve to know what their employer can see and do on their laptops. Here’s what Fleet can manage on your device:</p>
|
||||
<!-- <h1>A better employee experience</h1>
|
||||
<p>What if the way your employer maintained your computer was more <a href="https://fleetdm.com/handbook/company/why-this-way#why-open-source">transparent</a>? What if it helped you get more done?</p> -->
|
||||
<h1 class="text-center">Why is Fleet on my computer?</h1>
|
||||
<p class="text-center">Fleet makes it a little easier for your IT team to keep your computer healthy without interfering with your work.</p>
|
||||
</div>
|
||||
<div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center">
|
||||
<div purpose="feature" class="d-flex flex-lg-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div purpose="feature-text" class="d-flex flex-column">
|
||||
<h3>How does it affect me?</h3>
|
||||
<p>Your IT team has to maintain your computer and keep it compliant with with a bunch of security requirements. But they also realize you have a job to do. So they want to be as un-intrusive as possible.</p>
|
||||
<p class="mb-0">That’s why they chose Fleet. It’s compatible with everything, including Linux, so it doesn’t limit what operating system you use. And it’s open source, meaning if you want to, you can <a href="https://github.com/fleetdm/fleet" target="_blank">take it apart</a> and see what it’s doing to your computer.</p>
|
||||
</div>
|
||||
<div purpose="feature-image">
|
||||
<img alt="Information about a users device in Fleet." src="/images/better-hero-image-468x380@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="logos" class="mx-auto">
|
||||
<logo-carousel></logo-carousel>
|
||||
</div>
|
||||
<div purpose="accordion" class="container-fluid d-flex flex-column justify-content-center align-items-center px-0">
|
||||
<h2>What personal information can Fleet see?</h2>
|
||||
<p class="mb-0">Here’s what Fleet can manage on your computer:</p>
|
||||
<div purpose="accordion-body" class="mx-auto">
|
||||
<div purpose="accordion-item">
|
||||
<p purpose="accordion-header" id="accordion__header1" style="cursor: pointer;" class="accordion" data-toggle="collapse" data-target="#accordion__body1" aria-controls="accordion__body1">
|
||||
|
|
@ -111,9 +124,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div purpose="logos" class="mx-auto">
|
||||
<logo-carousel></logo-carousel>
|
||||
</div>
|
||||
<div purpose="secureframe-section" v-if="showSecureframeBanner">
|
||||
<div purpose="secureframe-banner" class="d-flex flex-column">
|
||||
|
|
|
|||
Loading…
Reference in a new issue