Website: update /software-management page (#24176)

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

Changes:
- Added an IT quote to the /sfotware-management page
- Updated the CTAs on the /software-management page
This commit is contained in:
Eric 2024-11-26 14:03:34 -06:00 committed by GitHub
parent ea9b5ba776
commit 5524daea2c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 28 deletions

View file

@ -57,6 +57,7 @@
padding-bottom: 32px;
}
[purpose='button-row'] {
flex-direction: row;
[purpose='contact-button'] {
display: flex;
height: 36px;
@ -218,35 +219,43 @@
padding-bottom: 64px;
padding-top: 32px;
text-align: center;
[purpose='testimonial-image'] {
height: 48px;
margin-bottom: 5px;
}
[purpose='testimonial-text'] {
}
[purpose='it-testimonial'] {
max-width: 524px;
margin-left: auto;
margin-right: auto;
padding-bottom: 32px;
padding-top: 32px;
text-align: center;
}
[purpose='testimonial-image'] {
height: 48px;
margin-bottom: 5px;
}
[purpose='testimonial-text'] {
color: @core-fleet-black-75;
text-align: center;
font-size: 18px;
font-style: italic;
font-weight: 400;
line-height: @text-lineheight;
margin-bottom: 24px;
}
[purpose='testimonial-attribution'] {
[purpose='name'] {
color: @core-fleet-black-75;
text-align: center;
font-size: 18px;
font-style: italic;
font-size: 12px;
font-weight: 700;
line-height: @text-lineheight; /* 150% */
margin-bottom: 0px;
}
[purpose='job-title'] {
color: @core-fleet-black-75;
margin-bottom: 0px;
font-size: 12px;
font-weight: 400;
line-height: @text-lineheight;
margin-bottom: 24px;
}
[purpose='testimonial-attribution'] {
[purpose='name'] {
color: @core-fleet-black-75;
text-align: center;
font-size: 12px;
font-weight: 700;
line-height: @text-lineheight; /* 150% */
margin-bottom: 0px;
}
[purpose='job-title'] {
color: @core-fleet-black-75;
margin-bottom: 0px;
font-size: 12px;
font-weight: 400;
line-height: @text-lineheight;
}
}
}
@ -471,6 +480,15 @@
padding-bottom: 32px;
padding-top: 0px;
}
[purpose='button-row'] {
flex-direction: column;
align-items: center;
[purpose='contact-button'] {
margin-bottom: 12px;
width: 100%;
margin-right: 0px;
}
}
[purpose='section-heading'] {
padding: 40px 0px;
}

View file

@ -5,7 +5,7 @@
<h4>Software management</h4>
<h1>Manage software consistently</h1>
<p purpose="hero-text">Pick from a curated app library or upload your own custom packages. Configure custom installation scripts if you need or let Fleet do it for you.</p>
<div purpose="button-row" class="d-flex flex-row justify-content-start">
<div purpose="button-row" class="d-flex justify-content-start">
<a class="btn btn-primary" purpose="contact-button" href="/contact">Talk to an engineer</a>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
</div>
@ -48,6 +48,16 @@
<div purpose="logo-row">
<logo-carousel></logo-carousel>
</div>
<div purpose="it-testimonial" class="d-flex flex-column justify-content-center align-items-center">
<img alt="Eric Tan" purpose="testimonial-image" src="/images/testimonial-author-eric-tan-99x99@2x.png">
<p purpose="testimonial-text">
This is not just production osquery, but actually a way bigger opportunity than even something like Airwatch or Jamf.
</p>
<div purpose="testimonial-attribution">
<p purpose="name">Eric Tan</p>
<p purpose="job-title">CIO & Chief Security Officer at Flock Safety</p>
</div>
</div>
<div purpose="feature-slides">
<div purpose="feature-switch" class="d-flex flex-md-row flex-column justify-content-md-center justify-content-start">
<div purpose="feature-option" :class="[visibleFeature === 'mitigate-cves-automatically' ? 'active' : '']" @click="clickSwitchFeature('mitigate-cves-automatically')">
@ -163,9 +173,9 @@
<div purpose="section-heading" class="text-center">
<h4>Software management</h4>
<h2>Manage software consistently</h2>
<div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-row justify-content-center align-items-center mx-auto">
<div purpose="button-row" style="margin-top: 32px;" class="d-flex justify-content-center align-items-center mx-auto">
<a purpose="contact-button" href="/contact">Show me</a>
<animated-arrow-button href="/register">See real data</animated-arrow-button>
<animated-arrow-button href="/register">Try it yourself</animated-arrow-button>
</div>
</div>
</div>