Website: Update Homepage 2024-10-25 (#23254)

Closes: https://github.com/fleetdm/confidential/issues/8555

Changes:
- Added a statistics section under the logo carousel on the homepage.
This commit is contained in:
Eric 2024-10-25 19:00:08 -05:00 committed by GitHub
parent e3df0afda7
commit 6b62f3f882
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 105 additions and 0 deletions

View file

@ -76,6 +76,66 @@
max-width: 1200px;
padding-left: 60px;
padding-right: 60px;
[parasails-component='logo-carousel'] {
margin-bottom: 32px;
}
}
[purpose='statistics'] {
display: flex;
flex-direction: row;
justify-content: center;
h4 {
color: #515774;
text-align: center;
/* Body LG (bold) */
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 27px;
}
p {
color: var(--text-text-primary, #515774);
text-align: center;
text-wrap: nowrap;
/* Body XS (FKA p small) */
font-family: Inter;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
margin-bottom: 0px;
}
// div {
// display: flex;
// padding: 8px 64px;
// flex-direction: column;
// align-items: center;
// }
[purpose='customers'] {
border-right: 1px solid #E2E4EA;
display: flex;
padding: 8px 64px;
flex-direction: column;
align-items: center;
}
[purpose='devices'] {
border-right: 1px solid #E2E4EA;
display: flex;
padding: 8px 64px;
flex-direction: column;
align-items: center;
}
[purpose='countries'] {
display: flex;
padding: 8px 64px;
flex-direction: column;
align-items: center;
}
}
@ -1215,6 +1275,31 @@
padding-bottom: 320px;
padding-left: 24px;
padding-right: 24px;
}
[purpose='statistics'] {
flex-direction: column;
max-width: fit-content;
margin-left: auto;
margin-right: auto;
[purpose='customers-and-countries-row'] {
order: 2;
}
[purpose='customers'] {
padding: 16px 48px 16px 32px;
}
[purpose='devices'] {
order: 1;
border-bottom: 1px solid #E2E4EA;
padding: 16px 32px;
border-right: none;
}
[purpose='countries'] {
padding: 16px 32px 16px 48px;
border-right: none;
}
}
[purpose='hero-background-image'] {
background-size: auto 320px;

View file

@ -20,6 +20,26 @@
<%/* Row of logos */%>
<div purpose="hero-logos" class="mx-auto">
<logo-carousel></logo-carousel>
<div purpose="statistics">
<div purpose="customers-and-countries-row" class="d-flex flex-row justify-content-center">
<div purpose="customers">
<h4>450+</h4>
<p>customers</p>
</div>
<div purpose="countries" class="d-flex d-sm-none">
<h4>90+</h4>
<p>countries</p>
</div>
</div>
<div purpose="devices">
<h4>2,000,000+</h4>
<p>computing devices</p>
</div>
<div purpose="countries" class="d-none d-sm-flex">
<h4>90+</h4>
<p>countries</p>
</div>
</div>
</div>
<%/* Homepage content */%>
<div purpose="homepage-content" class="container">