mirror of
https://github.com/fleetdm/fleet
synced 2026-05-18 22:49:19 +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 {
|
||||
font-weight: 800;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='platform-block'] {
|
||||
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;
|
||||
}
|
||||
[purpose='category-image'] {
|
||||
margin-left: 60px;
|
||||
padding-right: 40px;
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 468px;
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
[purpose='endpoint-ops-image'] {
|
||||
max-width: 380px;
|
||||
img {
|
||||
display: flex;
|
||||
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'] {
|
||||
margin-left: 60px;
|
||||
padding-right: 40px;
|
||||
max-width: 380px;
|
||||
img {
|
||||
width: 360px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
padding: 20px 36px 20px 35px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
[purpose='category-button'] {
|
||||
|
|
@ -285,10 +306,7 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 428px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
|
||||
[purpose='bottom-gradient'] {
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
|
||||
|
|
@ -332,7 +350,7 @@
|
|||
}
|
||||
}
|
||||
[purpose='animated-arrow-button-red'], [purpose='animated-arrow-button-red-no-transform'] {
|
||||
display: inline;
|
||||
display: flex;
|
||||
padding-right: 34px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
|
@ -597,11 +615,6 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 468px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
}
|
||||
// ██╗ ██████╗
|
||||
// ██║ ██╔════╝
|
||||
|
|
@ -773,32 +786,27 @@
|
|||
}
|
||||
}
|
||||
[purpose='category-text-block'] {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 40px;
|
||||
padding-left: 0px;
|
||||
text-align: center;
|
||||
max-width: 410px;
|
||||
}
|
||||
[purpose='category-image'] {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: 0px;
|
||||
padding-right: 0px;
|
||||
[purpose='endpoint-ops-image'] {
|
||||
margin-right: 24px;
|
||||
img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='device-management-image'] {
|
||||
margin-left: 24px;
|
||||
img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='vuln-management-image'] {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: 0px;
|
||||
padding-right: 0px;
|
||||
padding-left: 75px;
|
||||
margin-left: 24px;
|
||||
img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='category-button'] {
|
||||
|
|
@ -973,21 +981,36 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
[purpose='platform-left-text-block'] {
|
||||
max-width: 100%;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 80px;
|
||||
[purpose='category-text-block'] {
|
||||
max-width: 480px;
|
||||
}
|
||||
[purpose='platform-right-text-block'] {
|
||||
max-width: 100%;
|
||||
margin-left: 0px;
|
||||
margin-bottom: 80px;
|
||||
[purpose='endpoint-ops-image'] {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
[purpose='platform-small-text-block'] {
|
||||
max-width: 100%;
|
||||
min-width: unset;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 80px;
|
||||
[purpose='device-management-image'] {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
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'] {
|
||||
width: 100%;
|
||||
|
|
@ -1189,28 +1212,30 @@
|
|||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
[purpose='category-switch'] {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
[purpose='category-image'] {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
[purpose='vuln-management-image'] {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
max-height: 236px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
[purpose='vuln-management-image'] {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-left: 48px;
|
||||
[purpose='endpoint-ops-image'] {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
max-height: 236px;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
[purpose='device-management-image'] {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
57
website/views/pages/homepage.ejs
vendored
57
website/views/pages/homepage.ejs
vendored
|
|
@ -84,54 +84,59 @@
|
|||
</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="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-tier-switch" :class="selectedCategory+'-selected'"></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>
|
||||
</div> -->
|
||||
|
||||
<%/* 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">
|
||||
<h4>Device management</h4>
|
||||
<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>
|
||||
<div purpose="category-button">
|
||||
<a class="btn btn-primary text-nowrap" href="/device-management">Start with MDM</a>
|
||||
<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>
|
||||
<a purpose="animated-arrow-button-red" class="text-nowrap" href="/device-management">Start with device management</a>
|
||||
</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">
|
||||
</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">
|
||||
<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>
|
||||
<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">
|
||||
<a class="btn btn-primary text-nowrap" href="/vulnerability-management">Start with vuln<span purpose="truncated-vulnerability-management-text">erability</span> management</a>
|
||||
<div>
|
||||
<a purpose="animated-arrow-button-red" class="text-nowrap" href="/vulnerability-management">Start with vuln management</a>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<%/* Integration cards */%>
|
||||
<h2 class="text-center">Connect your favorite tools</h2>
|
||||
<div purpose="integration-cards" class="d-flex flex-sm-row flex-column justify-content-center">
|
||||
|
|
|
|||
Loading…
Reference in a new issue