mirror of
https://github.com/fleetdm/fleet
synced 2026-05-24 01:18:42 +00:00
Website: update homepage product category section (#16509)
Closes: #16267 Changes: - Removed the category switch on the homepage and updated the layout of the product category blocks.
This commit is contained in:
Eric
GitHub
parent
08497bd5fe
commit
65a1655512
2 changed files with 137 additions and 107 deletions
187
website/assets/styles/pages/homepage.less
vendored
187
website/assets/styles/pages/homepage.less
vendored
|
|
@ -224,45 +224,66 @@
|
||||||
h2 {
|
h2 {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
line-height: 48px;
|
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 24px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[purpose='platform-block'] {
|
[purpose='platform-block'] {
|
||||||
margin-bottom: 120px;
|
margin-bottom: 120px;
|
||||||
h3 {
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
color: #515774;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
max-width: 1080px;
|
max-width: 1080px;
|
||||||
}
|
}
|
||||||
[purpose='category-image'] {
|
[purpose='category-text-block'] {
|
||||||
margin-left: 60px;
|
max-width: 468px;
|
||||||
padding-right: 40px;
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[purpose='endpoint-ops-image'] {
|
||||||
|
max-width: 380px;
|
||||||
img {
|
img {
|
||||||
|
display: flex;
|
||||||
width: 380px;
|
width: 380px;
|
||||||
height: auto;
|
height: 380px;
|
||||||
|
padding: 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[purpose='device-management-image'] {
|
||||||
|
max-width: 380px;
|
||||||
|
img {
|
||||||
|
display: flex;
|
||||||
|
width: 380px;
|
||||||
|
height: 380px;
|
||||||
|
padding: 50px 10px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='vuln-management-image'] {
|
[purpose='vuln-management-image'] {
|
||||||
margin-left: 60px;
|
max-width: 380px;
|
||||||
padding-right: 40px;
|
|
||||||
img {
|
img {
|
||||||
width: 360px;
|
display: flex;
|
||||||
height: auto;
|
width: 380px;
|
||||||
|
height: 380px;
|
||||||
|
padding: 20px 36px 20px 35px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='category-button'] {
|
[purpose='category-button'] {
|
||||||
|
|
@ -285,10 +306,7 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='category-text-block'] {
|
|
||||||
max-width: 428px;
|
|
||||||
padding-left: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[purpose='bottom-gradient'] {
|
[purpose='bottom-gradient'] {
|
||||||
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
|
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
|
||||||
|
|
@ -332,7 +350,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='animated-arrow-button-red'], [purpose='animated-arrow-button-red-no-transform'] {
|
[purpose='animated-arrow-button-red'], [purpose='animated-arrow-button-red-no-transform'] {
|
||||||
display: inline;
|
display: flex;
|
||||||
padding-right: 34px;
|
padding-right: 34px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -597,11 +615,6 @@
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
[purpose='category-text-block'] {
|
|
||||||
max-width: 468px;
|
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// ██╗ ██████╗
|
// ██╗ ██████╗
|
||||||
// ██║ ██╔════╝
|
// ██║ ██╔════╝
|
||||||
|
|
@ -773,32 +786,27 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='category-text-block'] {
|
[purpose='category-text-block'] {
|
||||||
width: 100%;
|
max-width: 410px;
|
||||||
max-width: 100%;
|
|
||||||
margin-right: 0px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
padding-left: 0px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
[purpose='category-image'] {
|
[purpose='endpoint-ops-image'] {
|
||||||
width: 100%;
|
margin-right: 24px;
|
||||||
height: auto;
|
|
||||||
margin-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
img {
|
img {
|
||||||
margin-left: auto;
|
height: auto;
|
||||||
margin-right: auto;
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[purpose='device-management-image'] {
|
||||||
|
margin-left: 24px;
|
||||||
|
img {
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='vuln-management-image'] {
|
[purpose='vuln-management-image'] {
|
||||||
width: 100%;
|
margin-left: 24px;
|
||||||
height: auto;
|
|
||||||
margin-left: 0px;
|
|
||||||
padding-right: 0px;
|
|
||||||
padding-left: 75px;
|
|
||||||
img {
|
img {
|
||||||
margin-left: auto;
|
height: auto;
|
||||||
margin-right: auto;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='category-button'] {
|
[purpose='category-button'] {
|
||||||
|
|
@ -973,21 +981,36 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='platform-left-text-block'] {
|
[purpose='category-text-block'] {
|
||||||
max-width: 100%;
|
max-width: 480px;
|
||||||
margin-right: 0px;
|
|
||||||
margin-bottom: 80px;
|
|
||||||
}
|
}
|
||||||
[purpose='platform-right-text-block'] {
|
[purpose='endpoint-ops-image'] {
|
||||||
max-width: 100%;
|
margin-right: auto;
|
||||||
margin-left: 0px;
|
margin-left: auto;
|
||||||
margin-bottom: 80px;
|
margin-bottom: 20px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
[purpose='platform-small-text-block'] {
|
[purpose='device-management-image'] {
|
||||||
max-width: 100%;
|
margin-right: auto;
|
||||||
min-width: unset;
|
margin-left: auto;
|
||||||
margin-right: 0px;
|
margin-bottom: 20px;
|
||||||
margin-bottom: 80px;
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
[purpose='vuln-management-image'] {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 30px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
[purpose='platform-image'] {
|
[purpose='platform-image'] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1189,28 +1212,30 @@
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='category-switch'] {
|
[purpose='vuln-management-image'] {
|
||||||
margin-top: 40px;
|
margin-right: auto;
|
||||||
}
|
margin-left: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
[purpose='category-image'] {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
img {
|
img {
|
||||||
max-height: 236px;
|
width: 100%;
|
||||||
max-width: 100%;
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
[purpose='vuln-management-image'] {
|
[purpose='endpoint-ops-image'] {
|
||||||
width: 100%;
|
margin-right: auto;
|
||||||
height: auto;
|
margin-left: auto;
|
||||||
padding-left: 48px;
|
margin-bottom: 20px;
|
||||||
img {
|
img {
|
||||||
max-height: 236px;
|
width: 100%;
|
||||||
max-width: 100%;
|
height: auto;
|
||||||
width: auto;
|
}
|
||||||
|
}
|
||||||
|
[purpose='device-management-image'] {
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
57
website/views/pages/homepage.ejs
vendored
57
website/views/pages/homepage.ejs
vendored
|
|
@ -84,54 +84,59 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
|
<!-- <div purpose="category-switch" class="d-flex flex-md-row flex-column justify-content-center mx-auto">
|
||||||
<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="security" :class="[selectedCategory === 'device-management' ? 'selected' : '']" @click="selectedCategory = 'device-management'">Device management</div>
|
||||||
<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="all" :class="[selectedCategory === 'endpoint-ops' ? 'selected' : '']" @click="selectedCategory = 'endpoint-ops'">Endpoint ops</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-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 purpose="category-tier-switch" :class="selectedCategory+'-selected'"></div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<%/* Endpoint ops block */%>
|
|
||||||
<div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'endpoint-ops'">
|
|
||||||
<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>
|
|
||||||
<div purpose="category-button">
|
|
||||||
<a class="btn btn-primary text-nowrap" href="/endpoint-ops">Start with endpoint ops</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div purpose="category-image">
|
|
||||||
<img alt="Endpoint ops" src="images/endpoint-operations-hero-image-380x383@2x.png">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<%/* Device management block */%>
|
<%/* Device management block */%>
|
||||||
<div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'device-management'">
|
<div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
|
||||||
<div purpose="category-text-block" class="d-flex flex-column">
|
<div purpose="category-text-block" class="d-flex flex-column">
|
||||||
|
<h4>Device management</h4>
|
||||||
<h3>Manage everything in one place</h3>
|
<h3>Manage everything in one place</h3>
|
||||||
<p>Clear the way for "zero trust" and modernize your device management practices with a single, open platform for Apple, Windows, and Linux.</p>
|
<p>Modernize your device management practice with a single, open platform for Apple, Windows, and Linux. De-risk config changes, automate security audits, and clear the way for “zero trust access” in your org.</p>
|
||||||
<div purpose="category-button">
|
<div>
|
||||||
<a class="btn btn-primary text-nowrap" href="/device-management">Start with MDM</a>
|
<a purpose="animated-arrow-button-red" class="text-nowrap" href="/device-management">Start with device management</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div purpose="category-image">
|
<div purpose="device-management-image">
|
||||||
<img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
|
<img alt="Operating systems entering a glass device management dome" src="/images/device-management-hero-380x293@2x.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%/* Vulnerability management block */%>
|
|
||||||
<div purpose="platform-block" class="d-flex flex-lg-row flex-column justify-content-center mx-auto align-items-lg-center align-items-start" v-if="selectedCategory === 'vulnerability-management'">
|
<%/* Endpoint ops block */%>
|
||||||
|
<div purpose="platform-block" class="d-flex flex-md-row flex-column justify-content-md-between mx-auto align-items-center">
|
||||||
|
<div purpose="endpoint-ops-image">
|
||||||
|
<img alt="Endpoint ops" src="images/endpoint-operations-hero-image-380x383@2x.png">
|
||||||
|
</div>
|
||||||
<div purpose="category-text-block" class="d-flex flex-column">
|
<div purpose="category-text-block" class="d-flex flex-column">
|
||||||
|
<h4>Endpoint ops</h4>
|
||||||
|
<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>
|
||||||
|
<div>
|
||||||
|
<a purpose="animated-arrow-button-red" class="text-nowrap" href="/endpoint-ops">Start with endpoint ops</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<%/* Vulnerability management block */%>
|
||||||
|
<div purpose="platform-block" class="d-flex flex-md-row flex-column-reverse justify-content-md-between mx-auto align-items-center">
|
||||||
|
<div purpose="category-text-block" class="d-flex flex-column">
|
||||||
|
<h4>Vulnerability management</h4>
|
||||||
<h3>Build the vulnerability program you actually want</h3>
|
<h3>Build the vulnerability program you actually want</h3>
|
||||||
<p>Show how quickly CVEs are resolved and which teams need extra help. Manage and report on vulnerabilities in operating systems, software packages, browser plugins, anywhere.</p>
|
<p>Show how quickly CVEs are resolved and which teams need extra help. Manage and report on vulnerabilities in operating systems, software packages, browser plugins, anywhere.</p>
|
||||||
<div purpose="category-button">
|
<div>
|
||||||
<a class="btn btn-primary text-nowrap" href="/vulnerability-management">Start with vuln<span purpose="truncated-vulnerability-management-text">erability</span> management</a>
|
<a purpose="animated-arrow-button-red" class="text-nowrap" href="/vulnerability-management">Start with vuln management</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div purpose="vuln-management-image">
|
<div purpose="vuln-management-image">
|
||||||
<img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
|
<img alt="A pocket monster orb being scanned for vulnerabilities" src="/images/vuln-management-hero-image-360x374@2x.png">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<%/* Integration cards */%>
|
<%/* Integration cards */%>
|
||||||
<h2 class="text-center">Connect your favorite tools</h2>
|
<h2 class="text-center">Connect your favorite tools</h2>
|
||||||
<div purpose="integration-cards" class="d-flex flex-sm-row flex-column justify-content-center">
|
<div purpose="integration-cards" class="d-flex flex-sm-row flex-column justify-content-center">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue