mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-02 01:18:30 +02:00
[WIP] New Pages (#873)
* Add Partnerspage * fix * fix padding * tablet get-started-small update * Add Customers page * incorparated site-header partial * fix * Add community page (#886) * Add community page * site-header partial on the comunity page --------- Co-authored-by: trean <trean.mi@gmail.com> * Add Brand-Resources and Subscribe pages (#930) * add Brand resources page * add Subscribe page * Add Qdrant for startups page (#934) * Add Qdrant for startups page * improve accordion and link to the form * fix * Add Stars page (#890) * Add Stars page * site-header partial on the stars page * overlay z-index fix --------- Co-authored-by: trean <trean.mi@gmail.com> * new pages content update and accompanying css and html changes (#943) * new pages content update and accompanying css and html changes * format, removed comment, fix * fixes * subscribe page hubspot form (#946) * brand resources content (#947) * Stars page content (#945) * stars page content update * stars images format, replaced stars hero image * uncommented stars menu link * update stats: github stars and discord members number * photo * stars content upd * stars list update * Startup program content (#961) * startup program hubspot form * form fixes * another form, some fixes * content upd * stars * temp build options for the startups program page --------- Co-authored-by: trean <trean.mi@gmail.com>
This commit is contained in:
nastyapash
@@ -0,0 +1,187 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.brand-resources-content {
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__container {
|
||||
@extend .container;
|
||||
}
|
||||
|
||||
&__block {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-top: $spacer * 5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__logos {
|
||||
& > div:last-of-type {
|
||||
.brand-resources-content__logos-logo {
|
||||
background-color: $neutral-10;
|
||||
}
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
max-width: rem(288);
|
||||
height: $spacer * 7.5;
|
||||
margin-bottom: $spacer * 2;
|
||||
border-radius: $spacer * 0.5;
|
||||
|
||||
img {
|
||||
height: $spacer * 3.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-link {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&__colors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: rem(10);
|
||||
|
||||
&-card {
|
||||
width: 100%;
|
||||
height: $spacer * 7.5;
|
||||
padding: rem(12);
|
||||
border-radius: $spacer * 0.5;
|
||||
color: $neutral-100;
|
||||
|
||||
&:last-of-type {
|
||||
color: $neutral-10;
|
||||
background-color: $neutral-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-code {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
span {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__typography {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
|
||||
&-example {
|
||||
margin-bottom: 0;
|
||||
font-size: $spacer * 5;
|
||||
line-height: $spacer * 6;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&-specimen {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__typography {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__container {
|
||||
max-width: rem(920);
|
||||
padding: 0 $spacer;
|
||||
}
|
||||
|
||||
&__colors {
|
||||
flex-direction: row;
|
||||
|
||||
&-card {
|
||||
width: calc(100% / 6);
|
||||
height: rem(240);
|
||||
}
|
||||
}
|
||||
|
||||
&__typography {
|
||||
padding: $spacer * 3;
|
||||
|
||||
&-example {
|
||||
font-size: $spacer * 7;
|
||||
line-height: $spacer * 8.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&-specimen {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: 0;
|
||||
|
||||
&__block {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.brand-resources-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: $spacer;
|
||||
max-width: rem(335);
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
width: calc(50% - 8px);
|
||||
border: rem(1) solid $neutral-60;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/mobile/brand-resources-hero.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__overlay {
|
||||
height: rem(424);
|
||||
background-image: url('/img/brand-resources-hero.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 8;
|
||||
padding-bottom: $spacer * 8;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 5;
|
||||
line-height: $spacer * 6;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
max-width: none;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
a {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,9 @@
|
||||
line-height: rem(27);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
b {
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
@@ -70,7 +73,7 @@
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: rem(472);
|
||||
min-height: rem(472);
|
||||
padding: $spacer * 4 $spacer * 3 $spacer * 4 $spacer * 5;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/mixins' as mixins;
|
||||
|
||||
.community-features {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__resources-card {
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: $neutral-40;
|
||||
margin-bottom: rem(12);
|
||||
}
|
||||
|
||||
&-link {
|
||||
@include mixins.link-color($neutral-20);
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__resources-cards {
|
||||
margin-bottom: rem(30);
|
||||
|
||||
& > div {
|
||||
&:first-of-type,
|
||||
&:last-of-type {
|
||||
img {
|
||||
min-width: rem(635);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
img {
|
||||
min-width: rem(397);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-40;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-link {
|
||||
@include mixins.link-color($neutral-20);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__resources-card {
|
||||
justify-content: flex-start;
|
||||
|
||||
&-link {
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-image {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
|
||||
&-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.community-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 6.5, $spacer * 4, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.community-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
position: relative;
|
||||
width: calc(100% + 32px);
|
||||
margin: 0 -16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
margin-bottom: $spacer * 3;
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__form {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
|
||||
form {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hs_email {
|
||||
width: 100%;
|
||||
|
||||
input[type='email'] {
|
||||
padding-top: rem(11);
|
||||
padding-bottom: rem(11);
|
||||
}
|
||||
}
|
||||
|
||||
.hs_submit {
|
||||
width: 100%;
|
||||
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
max-height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__about {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
color: $neutral-50;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: rem(680);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(680);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__form {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
form {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hs_submit {
|
||||
max-width: $spacer * 10;
|
||||
}
|
||||
}
|
||||
|
||||
&__about {
|
||||
position: relative;
|
||||
max-width: rem(520);
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
bottom: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.community-testimonials {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: $spacer * 1.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
gap: rem(12);
|
||||
|
||||
&-avatar {
|
||||
height: $spacer * 3;
|
||||
width: $spacer * 3;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-nickname {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(20);
|
||||
height: rem(20);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.03687 12.6263L3.67375 18.7501H0.703125L7.64937 10.8151L9.03687 12.6263Z' fill='%23F0F3FA'/%3E%3Cpath d='M10.6562 6.8675L15.5669 1.25H18.5356L12.0312 8.68875L10.6562 6.8675Z' fill='%23F0F3FA'/%3E%3Cpath d='M19.6803 18.75H13.7059L0.320312 1.25H6.44594L19.6803 18.75ZM14.5253 16.9731H16.1703L5.55219 2.93375H3.78719L14.5253 16.9731Z' fill='%23F0F3FA'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
|
||||
span {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
height: rem(500);
|
||||
}
|
||||
|
||||
&__card {
|
||||
width: calc((100% / 3) - 20px);
|
||||
|
||||
&:first-of-type,
|
||||
&:nth-of-type(5) {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__cards {
|
||||
height: rem(452);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -32,6 +32,7 @@
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: $spacer;
|
||||
flex-grow: 1;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 50%;
|
||||
@@ -57,7 +58,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.legal-consent-container {
|
||||
flex-grow: 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: $last-row-margin;
|
||||
}
|
||||
|
||||
@@ -95,10 +95,21 @@
|
||||
&__card-footer {
|
||||
display: flex;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
height: rem(48);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
img {
|
||||
min-width: rem(48);
|
||||
min-height: rem(48);
|
||||
width: rem(48);
|
||||
height: rem(48);
|
||||
&:not(:first-of-type) {
|
||||
margin-left: $spacer * -1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,10 +128,6 @@
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
}
|
||||
|
||||
&__card:last-of-type img {
|
||||
min-width: rem(80);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 6;
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.customers-case-studies {
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__cards {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-preview {
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
border-radius: rem(4);
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 36%;
|
||||
background-image: url('/img/customers-case-studies/card-overlay.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
left: $spacer;
|
||||
bottom: $spacer * 0.5;
|
||||
height: $spacer * 4;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding: $spacer 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__cards {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.customers-get-contacted {
|
||||
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.customers-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
background-image: url('/img/blurred/blurred-light-14.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.customer-list.dark {
|
||||
background-color: transparent;
|
||||
|
||||
.customer-list__logos__container:after,
|
||||
.customer-list__logos__container:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: rem(640);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.customers-testimonial {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
}
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.customers-vector-space-wall {
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
//text-align: center;
|
||||
//margin: 0 auto $spacer * 5;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: $spacer * 1.5;
|
||||
background: $neutral-98;
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
gap: rem(12);
|
||||
|
||||
&-avatar {
|
||||
height: $spacer * 3;
|
||||
width: $spacer * 3;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-position {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
color: $neutral-50;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: rem(20);
|
||||
height: rem(20);
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_4665_8685)'%3E%3Cpath d='M19.1667 0H0.833333C0.333333 0 0 0.333333 0 0.833333V19.1667C0 19.6667 0.333333 20 0.833333 20H19.1667C19.6667 20 20 19.6667 20 19.1667V0.833333C20 0.333333 19.6667 0 19.1667 0ZM5.91667 17.0833H3V7.5H6V17.0833H5.91667ZM4.41667 6.16667C3.5 6.16667 2.66667 5.41667 2.66667 4.41667C2.66667 3.5 3.41667 2.66667 4.41667 2.66667C5.33333 2.66667 6.16667 3.41667 6.16667 4.41667C6.16667 5.41667 5.41667 6.16667 4.41667 6.16667ZM17.0833 17.0833H14.0833V12.4167C14.0833 11.3333 14.0833 9.91667 12.5833 9.91667C11 9.91667 10.8333 11.0833 10.8333 12.3333V17.0833H7.83333V7.5H10.6667V8.83333C11.0833 8.08333 12 7.33333 13.5 7.33333C16.5 7.33333 17.0833 9.33333 17.0833 11.9167V17.0833Z' fill='%23161E33'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_4665_8685'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
flex-wrap: wrap;
|
||||
gap: rem(30);
|
||||
height: rem(1452);
|
||||
}
|
||||
|
||||
&__card {
|
||||
width: calc((100% / 3) - 20px);
|
||||
|
||||
&:first-of-type,
|
||||
&:nth-of-type(10) {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__cards {
|
||||
height: rem(1264);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,6 +13,11 @@ form.hs-form {
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
legend {
|
||||
font-size: rem(14);
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
& > div.hs-form-field {
|
||||
div.input,
|
||||
textarea {
|
||||
@@ -26,6 +31,7 @@ form.hs-form {
|
||||
& > div.hs-form-field {
|
||||
div.input {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -68,6 +74,7 @@ form.hs-form {
|
||||
margin-bottom: 0;
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
@@ -87,6 +94,22 @@ form.hs-form {
|
||||
&::placeholder {
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
-webkit-appearance: textfield;
|
||||
appearance: textfield;
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@@ -98,6 +121,25 @@ form.hs-form {
|
||||
.error {
|
||||
border-color: $error-50;
|
||||
}
|
||||
|
||||
&:has(> select) {
|
||||
// this code only works in the modern browsers
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(12);
|
||||
right: $spacer;
|
||||
height: $spacer;
|
||||
width: $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='M1.33203 4.66666L7.9987 11.3333L14.6654 4.66666' stroke='%23D4D9E6' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.legal-consent-container {
|
||||
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marketplaces' as marketplaces;
|
||||
|
||||
.partners-cloud-marketplaces {
|
||||
@include marketplaces.base(
|
||||
$spacer * 4,
|
||||
$spacer * 4,
|
||||
$spacer * 6.5,
|
||||
$spacer * 5.5,
|
||||
100%,
|
||||
$spacer * 3,
|
||||
$spacer * 2,
|
||||
rem(57),
|
||||
rem(38)
|
||||
);
|
||||
|
||||
&__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.partners-cloud {
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
text-align: center;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.partners-embeddings {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__description {
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
width: 100%;
|
||||
margin-top: $spacer * 2.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__image {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
width: 100%;
|
||||
max-width: rem(560);
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.partners-get-contacted {
|
||||
@include get-contacted.base(0, 0, $spacer * 7.5, $spacer * 4, rem(350));
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.partners-get-started {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 1.5,
|
||||
$spacer * 3.5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.partners-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-70;
|
||||
margin: 0 auto $spacer * 3;
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: relative;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -30px;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
background-image: url('/img/blurred/blurred-light-14.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
max-width: rem(730);
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(1302);
|
||||
padding: 0 $spacer * 1.5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.partners-integrations {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
gap: $spacer * 1.5;
|
||||
position: relative;
|
||||
|
||||
&-icon {
|
||||
width: $spacer * 5.5;
|
||||
height: $spacer * 5.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 10;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__header {
|
||||
margin-bottom: $spacer * 7.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.partners-solution {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 5 0;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@include marquee.base(80px, 264px, 8, 8, 12px, $neutral-94, false, 50s, none);
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacer * 0.5 rem(60);
|
||||
background-color: $neutral-98;
|
||||
border-radius: rem(12);
|
||||
border: rem(1) solid $neutral-90;
|
||||
|
||||
img {
|
||||
width: $spacer * 7.5;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: rem(240);
|
||||
background-image: url('/img/square-grid-small.svg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
+178
@@ -0,0 +1,178 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-for-startups-benefits {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__main-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 2.5 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
&-block {
|
||||
padding: 0 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: rem(12);
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-40;
|
||||
|
||||
strong, b {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
align-self: flex-end;
|
||||
width: 100%;
|
||||
max-width: rem(540);
|
||||
margin-right: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding: $spacer * 2.5 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
&-title {
|
||||
margin-bottom: rem(12);
|
||||
padding: 0 $spacer * 1.5;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
padding: 0 $spacer * 1.5;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: calc(100% + 24px);
|
||||
margin: 0 -12px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(730);
|
||||
margin: $spacer * 5 auto $spacer;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__main-card {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: rem(400);
|
||||
padding-top: 0;
|
||||
|
||||
&-block {
|
||||
width: rem(440);
|
||||
padding: 0 0 0 $spacer * 3;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
|
||||
&-image {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: rem(400);
|
||||
padding-top: $spacer * 3;
|
||||
|
||||
&-title {
|
||||
padding: 0 $spacer * 4 0 $spacer * 3;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
padding: 0 $spacer * 4 0 $spacer * 3;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
}
|
||||
|
||||
&-image {
|
||||
width: 100%;
|
||||
margin: auto 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: rem(102);
|
||||
width: calc((100% - 778px) / 2);
|
||||
height: rem(1);
|
||||
background-color: $neutral-80;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__card {
|
||||
height: rem(360);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-for-startups-faq {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
max-width: rem(800);
|
||||
margin: 0 auto;
|
||||
border-top: rem(1) solid $neutral-80;
|
||||
|
||||
&__item {
|
||||
border-bottom: rem(1) solid $neutral-80;
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: rem(98);
|
||||
margin-bottom: 0;
|
||||
padding: 0 $spacer * 3 0 0;
|
||||
color: $neutral-20;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: rem(37);
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2.78711V22.7871' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 12.7871H2' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding-right: $spacer * 1.5;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-40;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
|
||||
&-content {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.accordion__item-header:after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 12.7871H2' stroke='%232F6FF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
.accordion {
|
||||
&__item {
|
||||
&-header {
|
||||
padding: 0 $spacer * 5.5 0 $spacer * 2.5;
|
||||
|
||||
&:after {
|
||||
right: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 0 $spacer * 5 0 $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-for-startups-form {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
max-width: rem(720);
|
||||
margin: 0 auto;
|
||||
|
||||
&__inputs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: rem(20);
|
||||
margin: $spacer * 2 0;
|
||||
|
||||
&-block {
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: rem(77);
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
p {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
color: $neutral-60;
|
||||
|
||||
a {
|
||||
color: $neutral-80;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__top-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(210);
|
||||
height: rem(210);
|
||||
background-image: url('/img/blurred/blurred-light-15.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
border-radius: 0 rem(12) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: 0;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3.5;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
&__inputs {
|
||||
&-block {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
width: calc(50% - 12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
p {
|
||||
width: rem(360);
|
||||
}
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-for-startups-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 auto $spacer * 2;
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
width: rem(200);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(730);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -10px;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 3;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
position: relative;
|
||||
max-width: rem(730);
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(1288);
|
||||
margin: -114px auto 0;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -2,5 +2,5 @@
|
||||
@use '../mixins/get-contacted' as get-contacted;
|
||||
|
||||
.qdrant-pricing-get-contacted {
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, rem(400));
|
||||
@include get-contacted.base($spacer * 2.5, $spacer * 2.5, $spacer * 5, $spacer * 4, rem(350));
|
||||
}
|
||||
|
||||
+2
-2
@@ -36,8 +36,8 @@
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: rem(12);
|
||||
line-height: rem(18);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.stars-about {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-20;
|
||||
|
||||
&:first-of-type {
|
||||
margin-bottom: rem(27);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(560);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__content {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: rem(445);
|
||||
margin-left: auto;
|
||||
font-size: $spacer * 3;
|
||||
line-height: rem(57);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: rem(445);
|
||||
margin-left: auto;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.stars-benefits {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: rem(34);
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: $neutral-30;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
max-width: rem(920);
|
||||
margin: 0 auto $spacer * 5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
|
||||
.stars-get-started {
|
||||
@include get-started-small.base(
|
||||
0,
|
||||
$spacer * 1.5,
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
url('/img/stars-pattern.png') $neutral-10,
|
||||
url('/img/stars-pattern.png') $neutral-10
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.stars-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
overflow: hidden;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(18);
|
||||
line-height: rem(27);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
position: relative;
|
||||
margin-top: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(480);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -24px;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(76);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
position: relative;
|
||||
margin-top: $spacer * 1.5;
|
||||
z-index: 1;
|
||||
|
||||
img {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.stars-list {
|
||||
position: relative;
|
||||
background-color: $neutral-10;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__title {
|
||||
position: relative;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: rem(255);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
padding: $spacer * 1.5;
|
||||
border-radius: rem(12);
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
&-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
border-radius: rem(6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-weight: 600;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(124);
|
||||
height: rem(124);
|
||||
background-image: url('/img/blurred/blurred-light-15.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: rem(323);
|
||||
height: rem(320);
|
||||
background-image: url('/img/blurred/blurred-light-4.png');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $spacer * 4;
|
||||
line-height: rem(67);
|
||||
}
|
||||
|
||||
&__cards > div {
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(3) {
|
||||
.stars-list__card {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(4) {
|
||||
.stars-list__card {
|
||||
margin: 0 auto 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__card {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.stars-marketplaces {
|
||||
position: relative;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 4;
|
||||
width: $spacer * 4;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 0.5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
margin-bottom: $spacer * 10;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
height: rem(400);
|
||||
}
|
||||
|
||||
&__card {
|
||||
height: rem(306);
|
||||
}
|
||||
|
||||
&__square-grid-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: $spacer * 6.5;
|
||||
width: 100%;
|
||||
height: rem(400);
|
||||
background-image: url('/img/square-grid.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.subscribe {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: $spacer * 3;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
min-height: calc(100vh - 104px);
|
||||
|
||||
&-body {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -20px;
|
||||
width: 100%;
|
||||
height: rem(200);
|
||||
background-image: url('/img/blurred/blurred-light-12.svg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: rem(540);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: rem(540);
|
||||
margin: 0 auto $spacer * 2.5;
|
||||
padding: $spacer * 2 $spacer * 1.5;
|
||||
background: linear-gradient($neutral-20, #0e1424);
|
||||
border-radius: $spacer * 0.5;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $spacer * 2;
|
||||
line-height: rem(38);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
// let's keep this in case we switch to static form in the future
|
||||
&__form {
|
||||
label {
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: rem(210);
|
||||
height: rem(210);
|
||||
background-image: url('/img/blurred/blurred-light-15.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__hs-form {
|
||||
.hs-form {
|
||||
flex-direction: column;
|
||||
|
||||
.hs_email {
|
||||
& > label {
|
||||
display: block;
|
||||
margin-bottom: rem(6);
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
.hs_error_rollup {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.submitted-message {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: $spacer * 1.5 $spacer * 3;
|
||||
justify-content: center;
|
||||
padding: $spacer * 2.5 0;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__rights {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__link {
|
||||
flex-shrink: 0;
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
font-weight: 400;
|
||||
color: $neutral-70;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
min-height: calc(100vh - 140px);
|
||||
|
||||
&-body {
|
||||
position: relative;
|
||||
padding: rem(96) 0 rem(157);
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $spacer * 2.5;
|
||||
width: rem(630);
|
||||
}
|
||||
|
||||
&__image-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
padding: $spacer * 3 $spacer * 3.5;
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: rem(30) rem(165);
|
||||
flex-wrap: nowrap;
|
||||
|
||||
&__rights {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.testimonial-light {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
padding: $spacer * 2 $spacer * 2.5;
|
||||
background: $neutral-98;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: rem(1) solid $neutral-90;
|
||||
}
|
||||
|
||||
&__review {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: rem(20);
|
||||
line-height: rem(30);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__employees {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-avatar {
|
||||
margin-bottom: $spacer;
|
||||
height: $spacer * 3;
|
||||
width: rem(48);
|
||||
height: rem(48);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-position {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p:first-of-type {
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
p:last-of-type {
|
||||
font-size: rem(14);
|
||||
line-height: rem(21);
|
||||
color: $neutral-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $spacer * 2;
|
||||
background: $neutral-98;
|
||||
border-radius: $spacer * 0.5;
|
||||
border: rem(1) solid $neutral-90;
|
||||
|
||||
img {
|
||||
width: rem(150);
|
||||
}
|
||||
}
|
||||
|
||||
&.reversed div.row {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__employees {
|
||||
flex-direction: row;
|
||||
|
||||
&-avatar {
|
||||
margin-bottom: 0;
|
||||
margin-right: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.reversed div.row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -68,6 +68,17 @@
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__bottom-overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: rem(637);
|
||||
height: rem(420);
|
||||
background-image: url('/img/blurred/blurred-light-16.svg');
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
Reference in New Issue
Block a user