Website: update logos on /contact page (#33911)

Closes: https://github.com/fleetdm/fleet/issues/33608

Changes:
- Replaced the rows of logos on the /contact page with the
`<logo-carousel>` component
- Updated the layout of the contact page at <990px screen width
This commit is contained in:
Eric 2025-10-06 18:01:55 -05:00 committed by GitHub
parent 23d95c3fdd
commit 489cb4e773
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 31 deletions

View file

@ -215,6 +215,7 @@
padding-right: 60px;
padding-top: 80px;
text-align: center;
max-width: 664px;
width: 100%;
}
@ -269,14 +270,19 @@
display: none;
}
[purpose='logos'] {
max-width: 392px;
display: flex;
padding-top: 60px;
[parasails-component='logo-carousel'] {
max-width: 100%;
padding-top: 0px;
margin-bottom: 0px;
}
}
[purpose='logo-row'] {
margin-bottom: 32px;
padding-left: 16px;
padding-right: 16px;
width: 100%;
img {
max-height: 32px;
}
@ -298,22 +304,25 @@
padding-bottom: 40px;
text-align: center;
width: 100%;
max-width: unset;
}
[purpose='quote-and-logos'] {
margin-top: 64px;
width: 100%;
min-width: unset;
display: flex;
flex-direction: row;
flex-direction: column;
justify-content: center;
}
[purpose='quote'] {
max-width: 50%;
max-width: unset;
width: 100%;
margin-right: 24px;
}
[purpose='logos'] {
min-width: 339px;
// width: 339px;
max-width: unset;
width: 100%;
}
[purpose='logo-row'] {
padding-left: 13px;
@ -340,7 +349,6 @@
margin-bottom: 32px;
padding-left: 16px;
padding-right: 16px;
width: 100%;
img {
max-height: 32px;
}

View file

@ -198,32 +198,8 @@
</div>
</div>
</div>
<div purpose="logos" class="flex-column flex-wrap align-items-center w-100">
<div purpose="logo-row" class="d-flex flex-row justify-content-between">
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
<img alt="Atlassian logo" src="/images/logo-atlassian-140x32@2x.png">
<img alt="Mr Beast logo" src="/images/logo-mr-beast-muted-90x32@2x.png">
</div>
<div purpose="logo-row" class="d-flex flex-row flex-wrap justify-content-between">
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
<img alt="Snowflake logo" src="/images/logo-snowflake-101x32@2x.png">
</div>
<div purpose="logo-row" class="d-flex flex-row justify-content-between">
<img alt="Uber logo" src="/images/logo-uber-65x32@2x.png">
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
<img alt="Reddit logo" src="/images/logo-reddit-80x32@2x.png">
</div>
<div purpose="logo-row" class="d-flex flex-row justify-content-between">
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
<img alt="Fastly logo" src="/images/logo-fastly-60x32@2x.png">
<img alt="Hashicorp logo" src="/images/logo-hashicorp-103x32@2x.png">
</div>
<div purpose="logo-row" class="d-flex flex-row justify-content-between mb-0">
<img alt="Dropbox logo" src="/images/logo-dropbox-122x32@2x.png">
<img alt="Vibe logo" src="/images/logo-vibe-72x32@2x.png">
<img alt="Nutanix logo" src="/images/logo-nutanix-125x32@2x.png">
</div>
<div purpose="logos" class="flex-column flex-wrap align-items-center">
<logo-carousel></logo-carousel>
</div>
</div>
</div>