Website: update statistics on /testimonials page (#24351)

Changes:
- Added a statistic for average customer support response time to the
statistics on the testimonials page.
- Updated the logo carousel component
-
This commit is contained in:
Eric
2024-12-04 15:35:43 -06:00
committed by GitHub
parent b432d6a1e9
commit d8dafd66d2
3 changed files with 65 additions and 27 deletions
@@ -33,7 +33,6 @@ parasails.registerComponent('logoCarousel', {
<div purpose="logo-row" class="d-flex flex-row align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
<img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
@@ -49,7 +48,6 @@ parasails.registerComponent('logoCarousel', {
<div purpose="logo-row" class="d-flex flex-row align-items-center" :class="[isIosThirteen ? 'ios-13-scroll-animation' : isSafariThirteen ? 'safari-13-scroll-animation' : '']">
<img alt="Notion logo" src="/images/logo-notion-68x32@2x.png">
<img alt="Gusto logo" src="/images/logo-gusto-64x32@2x.png">
<img alt="Epic Games logo" style="height: 32px" src="/images/logo-epic-games-28x32@2x.png">
<img alt="Rivian logo" src="/images/logo-rivian-120x32@2x.png">
<img alt="Deloitte logo" src="/images/logo-deloitte-97x32@2x.png">
<img alt="Flywire logo" src="/images/logo-flywire-69x32@2x.png">
+47 -15
View File
@@ -192,8 +192,7 @@
h4 {
color: #515774;
text-align: center;
/* Body LG (bold) */
text-transform: unset;
font-family: Inter;
font-size: 18px;
font-style: normal;
@@ -204,35 +203,43 @@
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% */
line-height: 18px;
margin-bottom: 0px;
}
[purpose='statistics-column'] {
display: flex;
flex-direction: row;
}
[purpose='customers'] {
border-right: 1px solid #E2E4EA;
display: flex;
padding: 8px 64px;
padding: 8px 48px;
flex-direction: column;
align-items: center;
}
[purpose='devices'] {
border-right: 1px solid #E2E4EA;
display: flex;
padding: 8px 64px;
padding: 8px 48px;
flex-direction: column;
align-items: center;
}
[purpose='countries'] {
display: flex;
padding: 8px 64px;
padding: 8px 48px;
flex-direction: column;
align-items: center;
border-right: 1px solid #E2E4EA;
}
[purpose='response-time'] {
display: flex;
padding: 8px 48px;
flex-direction: column;
align-items: center;
}
}
@@ -412,6 +419,28 @@
height: 304px;
}
}
[purpose='statistics'] {
[purpose='statistics-column'] {
display: flex;
flex-direction: column;
width: 227px;
}
[purpose='countries'] {
border-right: none;
padding: 16px 32px;
}
[purpose='customers'] {
padding: 16px 32px;
}
[purpose='devices'] {
padding: 16px 32px;
}
[purpose='response-time'] {
padding: 16px 32px;
}
}
}
@media (max-width: 576px) {
@@ -426,12 +455,13 @@
max-width: fit-content;
margin-left: auto;
margin-right: auto;
margin-top: 32px;
margin-top: 48px;
margin-bottom: 48px;
h4 {
margin-bottom: 0px;
}
[purpose='customers'] {
padding: 0px 64px 24px 64px;
padding: 0px 24px 24px 24px;
border-right: none;
}
[purpose='devices'] {
@@ -440,13 +470,15 @@
padding: 24px;
border-right: none;
}
[purpose='response-time'] {
padding: 24px;
border-bottom: 1px solid #E2E4EA;
}
[purpose='countries'] {
padding: 24px 64px 0px 64px;
order: 1;
padding: 24px 24px 0px 24px;
border-right: none;
}
}
[purpose='testimonial-card'] {
width: 100%;
+18 -10
View File
@@ -117,17 +117,25 @@
</div>
<div purpose="logos-and-statistics" class="mx-auto">
<div purpose="statistics">
<div purpose="customers">
<h4>100+</h4>
<p>customers</p>
<div purpose="statistics-column">
<div purpose="customers">
<h4>100+</h4>
<p>customers</p>
</div>
<div purpose="devices">
<h4>2,000,000+</h4>
<p>computing devices</p>
</div>
</div>
<div purpose="devices">
<h4>2,000,000+</h4>
<p>computing devices</p>
</div>
<div purpose="countries" >
<h4>90+</h4>
<p>countries</p>
<div purpose="statistics-column">
<div purpose="countries">
<h4>90+</h4>
<p>countries</p>
</div>
<div purpose="response-time">
<h4>8 minutes</h4>
<p>avg support response time</p>
</div>
</div>
</div>
<logo-carousel></logo-carousel>