mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 08:58:41 +00:00
Website: Consolidate product categories on homepage. (#14728)
Closes: #14711 Changes: - Updated the homepage layout and styles to match the latest wireframes.
This commit is contained in:
Eric
GitHub
parent
e6b809b043
commit
c12af96f7d
9 changed files with 230 additions and 55 deletions
BIN
website/assets/images/homepage-device-management-617x440@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-device-management-617x440@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
website/assets/images/homepage-endpoint-ops-617x440@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-endpoint-ops-617x440@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 KiB |
BIN
website/assets/images/homepage-vulnerability-management-617x440@2x.png
vendored
Normal file
BIN
website/assets/images/homepage-vulnerability-management-617x440@2x.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
6
website/assets/js/pages/homepage.page.js
vendored
6
website/assets/js/pages/homepage.page.js
vendored
|
|
@ -3,12 +3,8 @@ parasails.registerPage('homepage', {
|
|||
// ║║║║║ ║ ║╠═╣║ ╚═╗ ║ ╠═╣ ║ ║╣
|
||||
// ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝ ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
|
||||
data: {
|
||||
currentTweetPage: 0,
|
||||
numberOfTweetCards: 6,
|
||||
numberOfTweetPages: 0,
|
||||
numberOfTweetsPerPage: 0,
|
||||
tweetCardWidth: 0,
|
||||
modal: undefined,
|
||||
selectedCategory: 'endpoint-ops'
|
||||
},
|
||||
|
||||
// ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗
|
||||
|
|
|
|||
207
website/assets/styles/pages/homepage.less
vendored
207
website/assets/styles/pages/homepage.less
vendored
|
|
@ -97,17 +97,53 @@
|
|||
}
|
||||
}
|
||||
|
||||
[purpose='logo-column'] {
|
||||
img {
|
||||
// margin-right: 35px;
|
||||
// margin-left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
[purpose='category-switch'] {
|
||||
width: 831px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #E2E4EA;
|
||||
border-radius: 28px;
|
||||
background: @ui-off-white;
|
||||
position: relative;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10) inset;
|
||||
margin-bottom: 60px;
|
||||
margin-top: 100px;
|
||||
color: @core-fleet-black;
|
||||
[purpose='category-tier-switch'] {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: -1px;
|
||||
background: #fff;
|
||||
border: 1px solid #E2E4EA;
|
||||
border-radius: 28px;
|
||||
height: 100%;
|
||||
min-width: 140px;
|
||||
z-index: 1;
|
||||
transition: 0.3s all;
|
||||
width: 277px;
|
||||
}
|
||||
[purpose='category-switch-option'] {
|
||||
padding: 16px 40px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 3;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
width: 277px;
|
||||
}
|
||||
.selected {
|
||||
font-weight: 700;
|
||||
}
|
||||
.device-management-selected {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.vulnerability-management-selected {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
[purpose='homepage-text-block'] {
|
||||
margin-top: 160px;
|
||||
margin-bottom: 160px;
|
||||
|
|
@ -126,6 +162,16 @@
|
|||
}
|
||||
|
||||
[purpose='platform-block'] {
|
||||
&.hidden {
|
||||
height: 0;
|
||||
margin-bottom: 0;
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
&.show {
|
||||
transition: opacity 0.3s ease-in;
|
||||
opacity: 1;
|
||||
}
|
||||
margin-bottom: 100px;
|
||||
h3 {
|
||||
font-weight: 800;
|
||||
|
|
@ -140,6 +186,10 @@
|
|||
}
|
||||
max-width: 1080px;
|
||||
}
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 390px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
[purpose='platform-left-text-block'] {
|
||||
max-width: 480px;
|
||||
margin-right: 80px;
|
||||
|
|
@ -152,6 +202,13 @@
|
|||
max-width: 320px;
|
||||
margin-right: 80px;
|
||||
}
|
||||
[purpose='category-image'] {
|
||||
width: 617px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
[purpose='platform-image'] {
|
||||
width: 520px;
|
||||
img {
|
||||
|
|
@ -214,7 +271,12 @@
|
|||
width: 110%;
|
||||
}
|
||||
}
|
||||
[purpose='animated-arrow-button-red'] {
|
||||
[purpose='lg-animated-arrow-button-red'] {
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
[purpose='animated-arrow-button-red'], [purpose='lg-animated-arrow-button-red'] {
|
||||
display: inline;
|
||||
padding-right: 34px;
|
||||
cursor: pointer;
|
||||
|
|
@ -486,6 +548,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 390px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
|
|
@ -528,7 +595,16 @@
|
|||
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='video-modal'] {
|
||||
[purpose='modal-dialog'] {
|
||||
width: 100%;
|
||||
|
|
@ -557,6 +633,10 @@
|
|||
max-width: 100%;
|
||||
height: 720px;
|
||||
}
|
||||
[purpose='homepage-content'] {
|
||||
padding-right: 60px;
|
||||
padding-left: 60px;
|
||||
}
|
||||
[purpose='hero-text'] {
|
||||
padding-top: 20px;
|
||||
max-width: 450px;
|
||||
|
|
@ -587,9 +667,45 @@
|
|||
}
|
||||
[purpose='logo-column'] {
|
||||
margin-bottom: 32px;
|
||||
img {
|
||||
// margin-right: 20px;
|
||||
// margin-left: 20px;
|
||||
}
|
||||
[purpose='category-switch'] {
|
||||
width: 687px;
|
||||
[purpose='category-tier-switch'] {
|
||||
width: 229px;
|
||||
}
|
||||
[purpose='category-switch-option'] {
|
||||
width: 229px;
|
||||
}
|
||||
.device-management-selected {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.vulnerability-management-selected {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
[purpose='category-text-block'] {
|
||||
width: 100%;
|
||||
max-width: 508px;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='category-image'] {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
[purpose='endpoint-ops-image'] {
|
||||
width: calc(~'100% + 34px');
|
||||
height: auto;
|
||||
margin-left: -17px;
|
||||
}
|
||||
[purpose='device-management-image'] {
|
||||
width: calc(~'100% + 20px');
|
||||
height: auto;
|
||||
margin-left: -10px;
|
||||
}
|
||||
[purpose='vulnerability-management-image'] {
|
||||
width: calc(~'100% + 26px');
|
||||
height: auto;
|
||||
margin-left: -12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -677,6 +793,32 @@
|
|||
}
|
||||
}
|
||||
|
||||
[purpose='category-switch'] {
|
||||
width: 100%;
|
||||
margin-top: 60px;
|
||||
[purpose='category-tier-switch'] {
|
||||
height: 56px;
|
||||
left: 0px;
|
||||
}
|
||||
[purpose='category-switch-option'] {
|
||||
height: 56px;
|
||||
width: 100%;
|
||||
}
|
||||
.device-management-selected {
|
||||
width: 100%;
|
||||
transform: translateY(56px);
|
||||
}
|
||||
.vulnerability-management-selected {
|
||||
width: 100%;
|
||||
transform: translateY(113px);
|
||||
}
|
||||
.endpoint-ops-selected {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
[purpose='platform-left-text-block'] {
|
||||
max-width: 100%;
|
||||
margin-right: 0px;
|
||||
|
|
@ -728,6 +870,9 @@
|
|||
[purpose='three-column-features'] {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
[purpose='testimonials'] {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
[purpose='testimonial'] {
|
||||
&:first-of-type {
|
||||
[purpose='testimonial-video'] {
|
||||
|
|
@ -795,6 +940,32 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
[purpose='testimonials'] {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
[purpose='category-switch'] {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
[purpose='category-image'] {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
[purpose='endpoint-ops-image'] {
|
||||
width: calc(~'100% + 24px');
|
||||
height: auto;
|
||||
margin-left: -12px;
|
||||
}
|
||||
[purpose='device-management-image'] {
|
||||
width: calc(~'100% + 14px');
|
||||
height: auto;
|
||||
margin-left: -7px;
|
||||
}
|
||||
[purpose='vulnerability-management-image'] {
|
||||
width: calc(~'100% + 18px');
|
||||
height: auto;
|
||||
margin-left: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='homepage-content'] {
|
||||
padding-right: 24px;
|
||||
|
|
@ -910,13 +1081,25 @@
|
|||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
[purpose='hero-logos'] {
|
||||
img {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='lg-animated-arrow-button-red'] {
|
||||
br {
|
||||
display: block;
|
||||
}
|
||||
&:after {
|
||||
top: 18px;
|
||||
left: 80px;
|
||||
}
|
||||
&:hover:after {
|
||||
left: 85px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
72
website/views/pages/homepage.ejs
vendored
72
website/views/pages/homepage.ejs
vendored
|
|
@ -85,53 +85,49 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<%/* Device management block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
|
||||
<div purpose="platform-left-text-block" class="d-flex flex-column">
|
||||
<h3>GitOps-driven MDM</h3>
|
||||
<p>Automate the management of your fleet of devices with increased visibility and control, improved stability, all while automating configuration deployments using GitOps.</p>
|
||||
<a purpose="animated-arrow-button-red" href="/device-management">More about device management</a>
|
||||
<div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
|
||||
<div purpose="category-switch-option" class="all" :class="[selectedCategory === 'endpoint-ops' ? 'selected' : '']" @click="selectedCategory = 'endpoint-ops'">Endpoint ops</div>
|
||||
<div purpose="category-switch-option" class="security" :class="[selectedCategory === 'device-management' ? 'selected' : '']" @click="selectedCategory = 'device-management'">Device management</div>
|
||||
<div purpose="category-switch-option" class="it" :class="[selectedCategory === 'vulnerability-management' ? 'selected' : '']" @click="selectedCategory = 'vulnerability-management'">Vuln<span class="d-inline d-md-none d-lg-inline">erability</span> management</div>
|
||||
<div purpose="category-tier-switch" :class="selectedCategory+'-selected'"></div>
|
||||
</div>
|
||||
|
||||
<%/* Endpoint ops block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-between mx-auto align-items-lg-center align-items-start" :class="[selectedCategory === 'endpoint-ops' ? ' show' : 'hidden']">
|
||||
<div purpose="category-text-block" class="d-flex flex-column">
|
||||
<h3>Focus on data, not vendors</h3>
|
||||
<p>Use a consistent interface to deploy, update, and manage thousands of workstations and servers with open standards and data.</p>
|
||||
<a purpose="animated-arrow-button-red" href="/osquery-management">More about endpoint ops</a>
|
||||
</div>
|
||||
<div purpose="platform-image">
|
||||
<img alt="GitOps-driven MDM" src="/images/homepage-fleet-ui-536x389@2x.png">
|
||||
<div purpose="category-image">
|
||||
<img alt="Endpoint ops" purpose="endpoint-ops-image" src="/images/homepage-endpoint-ops-617x440@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%/* Device management block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-between mx-auto align-items-lg-center align-items-start" :class="[selectedCategory === 'device-management' ? 'show' : 'hidden']">
|
||||
<div purpose="category-text-block" class="d-flex flex-column">
|
||||
<h3>Manage devices like code</h3>
|
||||
<p>Automate the management of your fleet of devices with increased visibility and control, improved stability, all while automating configuration deployments using GitOps.</p>
|
||||
<a purpose="animated-arrow-button-red" class="text-nowrap" href="/device-management">More about device management</a>
|
||||
</div>
|
||||
<div purpose="category-image">
|
||||
<img alt="GitOps-driven MDM" purpose="device-management-image" src="/images/homepage-device-management-617x440@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%/* Vulnerability management block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
|
||||
<div purpose="platform-image">
|
||||
<img alt="Vulnerability management" src="/images/homepage-vulnerability-management-530x458@2x.png">
|
||||
<div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-between mx-auto align-items-lg-center align-items-start" :class="[selectedCategory === 'vulnerability-management' ? 'show' : 'hidden']">
|
||||
<div purpose="category-text-block" class="d-flex flex-column">
|
||||
<h3>Build the security platform your team actually wants</h3>
|
||||
<p>Monitor vulnerabilities in operating systems, software packages, and browser plugins. Show how quickly CVEs are resolved, and which teams need extra help.</p>
|
||||
<a purpose="lg-animated-arrow-button-red" href="/vulnerability-management">More about vulnerability<br> management</a>
|
||||
</div>
|
||||
<div purpose="platform-right-text-block" class="d-flex flex-column">
|
||||
<h3>Know what’s going on with your computers</h3>
|
||||
<p>Monitor vulnerabilities in software packages, operating systems, and browser plugins. Show how quickly CVEs are resolved, and which teams need extra help.</p>
|
||||
<a purpose="animated-arrow-button-red" href="/vulnerability-management">More about vulnerability management</a>
|
||||
<div purpose="category-image">
|
||||
<img alt="Vulnerability management" purpose="vulnerability-management-image" src="/images/homepage-vulnerability-management-617x440@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%/* Security compliance block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
|
||||
<div purpose="platform-left-text-block" class="d-flex flex-column">
|
||||
<h3>Simplify security compliance</h3>
|
||||
<p>Policies make it easy to keep your devices compliant with your organization’s custom rules and common benchmarks like CIS. Quickly report your posture and vulnerabilities to auditors, showing remediation status and timing.</p>
|
||||
<a purpose="animated-arrow-button-red" href="/compliance">More about security compliance</a>
|
||||
</div>
|
||||
<div purpose="platform-image">
|
||||
<img alt="Security compliance" src="/images/homepage-security-compliance-520x337@2x.png">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%/* Osquery management block */%>
|
||||
<div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-center mx-auto align-items-center">
|
||||
<div purpose="platform-image">
|
||||
<img alt="Osquery management" src="/images/homepage-osquery-management-543x371@2x.png">
|
||||
</div>
|
||||
<div purpose="platform-right-text-block" class="d-flex flex-column">
|
||||
<h3>Deploy osquery at scale</h3>
|
||||
<p>Fleet provides a centralized management interface for osquery to deploy, update, and manage osquery agents across a thousand or one hundred thousand devices.</p>
|
||||
<a purpose="animated-arrow-button-red" href="/osquery-management">More about osquery management</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%/* Supported platforms */%>
|
||||
<div purpose="supported-platforms" class="d-flex flex-column">
|
||||
|
|
|
|||
Loading…
Reference in a new issue