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:
@@ -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
@@ -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%;
|
||||
|
||||
Vendored
+18
-10
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user