mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-07 03:48:30 +02:00
Update HR-Tech page (#2286)
* Update HR-Tech page * delete comments * fixes * small fix
This commit is contained in:
nastyapash
@@ -128,6 +128,14 @@
|
||||
@import 'partials/hr-tech/index';
|
||||
@import 'partials/healthcare/index';
|
||||
@import 'partials/cta-banner';
|
||||
@import 'partials/industries/industries-faq';
|
||||
@import 'partials/industries/industries-bento-cards';
|
||||
@import 'partials/industries/industries-case-studies';
|
||||
@import 'partials/industries/industries-get-contacted';
|
||||
@import 'partials/industries/industries-hero';
|
||||
@import 'partials/industries/industries-testimonials';
|
||||
@import 'partials/industries/industries-architecture';
|
||||
@import 'partials/industries/industries-dark-banner';
|
||||
@import 'partials/vsd/vsd-speaker-lineup';
|
||||
@import 'partials/vsd/vsd-last-year';
|
||||
@import 'partials/vsd/vsd-sponsors';
|
||||
|
||||
@@ -47,6 +47,10 @@
|
||||
line-height: pxToRem(38);
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-98;
|
||||
|
||||
span {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
|
||||
+207
@@ -0,0 +1,207 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.industries-architecture {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: pxToRem(30);
|
||||
color: $neutral-98;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(30);
|
||||
}
|
||||
|
||||
&__checklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-top {
|
||||
padding: $spacer * 1.5 $spacer * 1.5 $spacer * 2.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin: 0 $spacer * 1.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&-step {
|
||||
padding: $spacer $spacer * 1.5;
|
||||
border-top: pxToRem(1) solid $neutral-30;
|
||||
|
||||
&-top {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
height: pxToRem(18);
|
||||
width: pxToRem(18);
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
height: 100%;
|
||||
padding: pxToRem(3);
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: $spacer * 2.5;
|
||||
padding: 0 $spacer;
|
||||
|
||||
&-button {
|
||||
padding: 0 $spacer * 2;
|
||||
border: 0;
|
||||
border-bottom: pxToRem(2) solid $primary-50;
|
||||
font-size: $font-size-s;
|
||||
line-height: $spacer * 2.5;
|
||||
background-color: transparent;
|
||||
color: $neutral-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
padding: math.div($spacer, 4);
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
|
||||
img {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&-done {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
padding: $spacer * 1.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
border-radius: $spacer * 0.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
|
||||
.line {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: #C5C8C6;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.s2, .nb {
|
||||
color: #A8FF60;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: #96CBFE;
|
||||
}
|
||||
|
||||
.mi {
|
||||
color: #FF73FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
background-image: url("/img/blurred/blurred-light-29.png");
|
||||
background-position: top pxToRem(-52) left 0;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&__sections {
|
||||
gap: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
+125
@@ -0,0 +1,125 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.industries-bento-cards {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: pxToRem(30);
|
||||
text-align: center;
|
||||
font-family: $font-family-code;
|
||||
font-size: $font-size-s;
|
||||
font-weight: 500;
|
||||
line-height: $line-height-sm;
|
||||
text-transform: uppercase;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
gap: $spacer;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
&-link {
|
||||
display: flex;
|
||||
gap: pxToRem(6);
|
||||
padding: math.div($spacer, 4) pxToRem(10);
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: $neutral-94;
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-30;
|
||||
|
||||
&:hover {
|
||||
background: $neutral-90;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.6665 4.66675H11.3332M11.3332 4.66675V11.3334M11.3332 4.66675L4.6665 11.3334' stroke='%2328324D' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card-with-chips {
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&-with-subtitle {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: $spacer;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
+154
@@ -0,0 +1,154 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-case-studies {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__header {
|
||||
text-align: center;
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: $h5-font-size;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__controls {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
display: none;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__active-slider {
|
||||
.industries-case-studies__controls {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: $spacer * 2.5;
|
||||
height: $spacer * 2.5;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $neutral-20;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
svg path {
|
||||
stroke: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
svg path {
|
||||
stroke: $neutral-80;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
path {
|
||||
transition: stroke 0.2s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__carousel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__track {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--industries-case-studies-gap, #{pxToRem(30)});
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&__slide {
|
||||
flex-shrink: 0;
|
||||
width: var(
|
||||
--industries-case-studies-slide-width,
|
||||
calc((100% - (2 * #{pxToRem(30)})) / 3)
|
||||
);
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 2;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
|
||||
&-title {
|
||||
margin: 0;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__track {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&__active-slider {
|
||||
.industries-case-studies__header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.industries-case-studies__controls {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h4-font-size;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-title {
|
||||
min-height: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+110
@@ -0,0 +1,110 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-dark-banner {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: $spacer * 2;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
}
|
||||
|
||||
&__logo {
|
||||
margin-bottom: pxToRem(30);
|
||||
|
||||
img {
|
||||
height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
border-bottom: pxToRem(1) solid $neutral-30;
|
||||
|
||||
&-description {
|
||||
margin-bottom: pxToRem(30);
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-94;
|
||||
}
|
||||
|
||||
&-industry {
|
||||
margin-bottom: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
&__metric {
|
||||
&-rate {
|
||||
margin-top: pxToRem(30);
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
color: #1FC7C7;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 0;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__block {
|
||||
flex-direction: row;
|
||||
padding: $spacer * 3.5;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
flex-shrink: 0;
|
||||
padding-right: $spacer * 3;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 $spacer * 3;
|
||||
border-left: pxToRem(1) solid $neutral-30;
|
||||
border-right: pxToRem(1) solid $neutral-30;
|
||||
border-bottom: 0;
|
||||
|
||||
&-industry {
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__metric {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
align-items: flex-start;
|
||||
width: pxToRem(293);
|
||||
padding-left: $spacer * 3;
|
||||
|
||||
&-rate {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 5;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-faq {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(62);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.industries-get-contacted {
|
||||
@include get-contacted.base($spacer * 4, pxToRem(30), $spacer * 7.5, $spacer * 2.5, pxToRem(620));
|
||||
|
||||
h3 {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
text-align: center;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-98;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $neutral-70;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
+382
@@ -0,0 +1,382 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.industries-hero {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
105.1% 114.35% at 50% 2%,
|
||||
rgba($neutral-10, 0) 0%,
|
||||
rgba($neutral-10, 0.32) 81.57%,
|
||||
rgba($secondary-blue-50, 0.8) 99.31%
|
||||
);
|
||||
background-position: 0 0;
|
||||
background-size: auto;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("/img/stars-pattern.png");
|
||||
background-position: 0 0;
|
||||
background-size: pxToRem(350) pxToRem(350);
|
||||
background-repeat: repeat;
|
||||
opacity: .5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: $spacer * 4.5;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
padding: math.div($spacer, 4) $spacer;
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
img {
|
||||
height: pxToRem(20);
|
||||
width: pxToRem(20);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $neutral-98;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-98;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__mobile-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
margin-top: $spacer * 2;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
width: pxToRem(170)
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: none;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__block {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border-radius: $spacer;
|
||||
background-color: $neutral-20;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
padding: pxToRem(3) pxToRem(3) math.div($spacer, 4) pxToRem(3);
|
||||
|
||||
button {
|
||||
width: 50%;
|
||||
border: 0;
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
border-radius: pxToRem(12);
|
||||
background-color: $neutral-20;
|
||||
color: $neutral-70;
|
||||
|
||||
&.active {
|
||||
background-color: $neutral-40;
|
||||
color: $neutral-98;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-tabs {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
&-tab {
|
||||
height: $spacer * 2.5;
|
||||
padding: 0 $spacer * 2;
|
||||
font-size: $font-size-s;
|
||||
line-height: $spacer * 2.5;
|
||||
color: $neutral-94;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-bottom: pxToRem(2) solid $primary-50;
|
||||
}
|
||||
|
||||
&-button {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-expanded {
|
||||
.industries-hero__code-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.industries-hero__code-collapse {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.industries-hero__code-content {
|
||||
overflow-y: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: pxToRem(280);
|
||||
transition: height 0.2s;
|
||||
margin: 0 pxToRem(3);
|
||||
padding: $spacer * 1.5 $spacer $spacer * 1.5 $spacer * 1.5;
|
||||
border-radius: $spacer * 0.5 $spacer * 0.5 0 0;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: calc(100% - pxToRem(24));
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
|
||||
.line {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: #C5C8C6;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7C7C7C;
|
||||
}
|
||||
|
||||
.s2, .nb {
|
||||
color: #A8FF60;
|
||||
}
|
||||
|
||||
.k {
|
||||
color: #96CBFE;
|
||||
}
|
||||
|
||||
.mi {
|
||||
color: #FF73FD;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: pxToRem(5);
|
||||
border: pxToRem(1) solid $neutral-30;
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
svg {
|
||||
height: pxToRem(12);
|
||||
width: pxToRem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-done {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__steps {
|
||||
height: pxToRem(320);
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&-item {
|
||||
height: $spacer * 5;
|
||||
padding: $spacer $spacer * 1.5;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
|
||||
h6 {
|
||||
color: $neutral-94;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
height: pxToRem(18);
|
||||
width: pxToRem(18);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $neutral-70;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: none;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
align-items: center;
|
||||
padding: pxToRem(6) pxToRem(10);
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
|
||||
img {
|
||||
height: $spacer;
|
||||
width: $spacer;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $neutral-98;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__content {
|
||||
gap: $spacer * 1.5;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__mobile-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__badges {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.industries-testimonials {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__item {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $spacer * 10;
|
||||
width: 100%;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: pxToRem(1) solid $neutral-90;
|
||||
background-color: $neutral-10;
|
||||
background-image: url("/img/stars-pattern.png");
|
||||
background-position: 0;
|
||||
background-size: pxToRem(350) pxToRem(350);
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: pxToRem(-20);
|
||||
background-image: url("/img/blurred/blurred-light-28.svg");
|
||||
background-position: 0;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: $spacer * 2 0;
|
||||
|
||||
&-review {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $spacer * 5 $spacer * 2 0;
|
||||
|
||||
&-text {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-block {
|
||||
display: flex;
|
||||
gap: $spacer;
|
||||
|
||||
img {
|
||||
height: $spacer * 3;
|
||||
width: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-role {
|
||||
margin: 0;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-60;
|
||||
}
|
||||
}
|
||||
|
||||
&-metric {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-divider {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: pxToRem(1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $neutral-90;
|
||||
}
|
||||
|
||||
&-item {
|
||||
padding: $spacer * 1.5 0 $spacer * 1.5 $spacer * 2;
|
||||
|
||||
img {
|
||||
height: $spacer * 2;
|
||||
width: $spacer * 2;
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
padding: $spacer 0 $spacer * 1.5 $spacer * 2;
|
||||
|
||||
.industries-testimonials__card-metric-count {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
.industries-testimonials__card-metric-count {
|
||||
color: $secondary-teal-50;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
.industries-testimonials__card-metric-count {
|
||||
color: $secondary-violet-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-count {
|
||||
margin-bottom: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__item {
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: pxToRem(30);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: pxToRem(300);
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: pxToRem(300);
|
||||
flex-direction: row;
|
||||
padding: $spacer * 3.5;
|
||||
|
||||
&-review {
|
||||
justify-content: space-between;
|
||||
padding: 0 $spacer * 0.5 0 0;
|
||||
|
||||
&-text {
|
||||
margin-bottom: $spacer * 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
&-metric {
|
||||
width: pxToRem(232);
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
border-left: pxToRem(1) solid $neutral-90;
|
||||
|
||||
&-item {
|
||||
padding: 0 0 0 $spacer * 2;
|
||||
border-bottom: 0;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
padding: 0 $spacer * 0.5 0 $spacer * 2;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-divider {
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user