Website: Normalize font sizes on landing page CTAs (#33197)

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

Changes:
- updated the font sizes of the bottom CTAs on landing pages to be
consistent
This commit is contained in:
Eric 2025-09-18 17:57:30 -05:00 committed by GitHub
parent b6b012250a
commit 08b4eb73ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 65 additions and 19 deletions

View file

@ -695,6 +695,26 @@
width: 100%;
}
}
[purpose='bottom-cta'] {
text-align: center;
h2 {
font-size: 48px;
margin-bottom: 0px;
}
h4 {
font-size: 16px;
margin-bottom: 8px;
}
[purpose='button-row'] {
margin-top: 40px;
[purpose='contact-button'] {
padding: 16px 32px;
text-decoration: none;
}
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
width: 100%;
@ -775,7 +795,7 @@
}
}
@media (max-width: 990px) {
@media (max-width: 991px) {
[purpose='page-container'] {
padding-left: 32px;
padding-right: 32px;
@ -990,8 +1010,8 @@
margin-bottom: 60px;
}
[purpose='section-headline'] {
h1 {
[purpose='bottom-cta'] {
h2 {
font-size: 32px;
}
}

View file

@ -496,6 +496,24 @@
line-height: 48px;
}
}
[purpose='bottom-cta'] {
text-align: center;
h2 {
font-size: 48px;
margin-bottom: 0px;
}
h4 {
font-size: 16px;
margin-bottom: 8px;
}
[purpose='button-row'] {
margin-top: 40px;
[purpose='contact-button'] {
padding: 16px 32px;
text-decoration: none;
}
}
}
[purpose='bottom-gradient'] {
background: linear-gradient(180deg, #FFFFFF 0%, #E9F4F4 100%);
}
@ -673,6 +691,11 @@
margin-left: auto;
}
}
[purpose='bottom-cta'] {
h2 {
font-size: 32px;
}
}
[purpose='video-modal'] {
[purpose='modal-dialog'] {
max-width: 97vw;

View file

@ -318,11 +318,18 @@
}
}
}
[purpose='section-heading'] {
h4 {
[purpose='bottom-cta'] {
text-align: center;
h2 {
font-size: 48px;
margin-bottom: 0px;
}
h4 {
font-size: 16px;
margin-bottom: 8px;
}
[purpose='button-row'] {
margin-top: 40px;
[purpose='contact-button'] {
padding: 16px 32px;
text-decoration: none;
@ -457,8 +464,10 @@
width: 100%;
margin-bottom: 32px;
}
[purpose='section-heading'] {
padding: 64px 32px;
[purpose='bottom-cta'] {
h2 {
font-size: 32px;
}
}
}
@media (max-width: 576px) {
@ -468,9 +477,6 @@
[purpose='quote'] {
padding: 0px 32px 64px 32px;
}
[purpose='section-heading'] {
padding: 40px 24px;
}
[parasails-component='scrollable-tweets'] {
[purpose='tweets'] {
margin-bottom: 56px;
@ -502,9 +508,6 @@
margin-right: 0px;
}
}
[purpose='section-heading'] {
padding: 40px 0px;
}
}
}

View file

@ -909,9 +909,9 @@
<div purpose="bottom-gradient">
<div purpose="page-container" class="container">
<div purpose="section-headline" class="text-center">
<div purpose="bottom-cta" class="text-center">
<h4>Open device management</h4>
<h1>Your last MDM migration</h1>
<h2>Your last MDM migration</h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>

View file

@ -267,9 +267,9 @@
<scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
<div purpose="page-container" class="pb-0">
<div purpose="section-heading" class="text-center">
<div purpose="bottom-cta" class="text-center">
<h4>Open orchestration</h4>
<h3><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h3>
<h2><%= pagePersonalization==='eo-security'? 'Instrument your endpoints' : 'Talk to your computers'%></h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
<a purpose="cta-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>

View file

@ -215,10 +215,10 @@
<scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
</div>
<div purpose="page-container" class="py-0">
<div purpose="section-heading" class="text-center">
<div purpose="bottom-cta">
<h4>Software management</h4>
<h2>Manage software consistently</h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
<div purpose="button-row" class="d-flex justify-content-center align-items-center mx-auto">
<a class="btn btn-primary" purpose="contact-button" href="/contact">Get a demo</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
</div>