mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-03 09:58:30 +02:00
Added Cloud inference page (#1779)
* Added Cloud inference page * Menu updated * Updated menu and footer
This commit is contained in:
@@ -124,3 +124,10 @@
|
||||
@import 'partials/hospitality-and-travel-get-contacted';
|
||||
@import 'partials/about-us-values';
|
||||
@import 'partials/about-us-engineering-culture';
|
||||
@import 'partials/accordion';
|
||||
@import 'partials/label';
|
||||
@import 'partials/cloud-inference-hero';
|
||||
@import 'partials/cloud-inference-features';
|
||||
@import 'partials/cloud-inference-cluster';
|
||||
@import 'partials/cloud-inference-get-started';
|
||||
@import 'partials/cloud-inference-faq';
|
||||
|
||||
@@ -96,19 +96,19 @@
|
||||
|
||||
&__title {
|
||||
text-align: left;
|
||||
margin-left: pxToRem(56);
|
||||
margin-left: pxToRem(64);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: pxToRem(570);
|
||||
margin-left: pxToRem(56);
|
||||
margin-left: pxToRem(64);
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: pxToRem(56);
|
||||
margin-left: pxToRem(64);
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
@use 'sass:math';
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.accordion {
|
||||
max-width: pxToRem(800);
|
||||
margin: 0 auto;
|
||||
border-top: pxToRem(1) solid $neutral-80;
|
||||
|
||||
&__item {
|
||||
border-bottom: pxToRem(1) solid $neutral-80;
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: pxToRem(98);
|
||||
margin-bottom: 0;
|
||||
padding: math.div($spacer, 4) $spacer * 3 math.div($spacer, 4) 0;
|
||||
color: $neutral-20;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(50% - pxToRem(12));
|
||||
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: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-40;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
|
||||
&-content {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
ul {
|
||||
list-style-type: "- ";
|
||||
padding-left: pxToRem(14);
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 2px solid $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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) {
|
||||
&__item {
|
||||
&-header {
|
||||
padding: math.div($spacer, 4) $spacer * 5.5 math.div($spacer, 4) $spacer * 2.5;
|
||||
|
||||
&:after {
|
||||
right: $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 0 $spacer * 5 0 $spacer * 2.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -12,12 +12,6 @@
|
||||
);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__title,
|
||||
&__description,
|
||||
.button {
|
||||
margin-left: $spacer * 4;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.cloud-inference-cluster {
|
||||
position: relative;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
padding: $spacer * 2.5 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
&__button {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: relative;
|
||||
display: block;
|
||||
align-self: center;
|
||||
width: 100%;
|
||||
max-width: pxToRem(736);
|
||||
margin: $spacer * 2.5 auto 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__overlay-top {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: pxToRem(308);
|
||||
height: pxToRem(302);
|
||||
background-image: url('/img/blurred/blurred-light-22.svg');
|
||||
background-position: top;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&__overlay-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
height: pxToRem(640);
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
max-width: pxToRem(445);
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(58);
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 55%;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__overlay-right {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/img/blurred/blurred-light-23.svg');
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.cloud-inference-faq {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h3-font-size;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.cloud-inference-features {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__card {
|
||||
justify-content: flex-start;
|
||||
padding: pxToRem(28);
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 3;
|
||||
width: $spacer * 3;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $h6-font-size;
|
||||
line-height: pxToRem(34);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 4;
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(58);
|
||||
}
|
||||
}
|
||||
}
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
@use '../mixins/get-started-small' as get-started-small;
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.cloud-inference-read-doc {
|
||||
@include get-started-small.base(
|
||||
$spacer * 7.5,
|
||||
$spacer * 4,
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$neutral-94,
|
||||
$neutral-10,
|
||||
$neutral-10
|
||||
);
|
||||
}
|
||||
|
||||
.cloud-inference-get-started {
|
||||
@include get-started-small.base(
|
||||
$spacer * 5,
|
||||
$spacer * 2.5,
|
||||
$spacer * 10,
|
||||
$spacer * 5,
|
||||
$neutral-94,
|
||||
$neutral-10,
|
||||
$neutral-10
|
||||
);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__title {
|
||||
max-width: pxToRem(380);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.cloud-inference-hero {
|
||||
position: relative;
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
|
||||
&__title {
|
||||
margin: $spacer * 1.5 0;
|
||||
font-size: $h4-font-size;
|
||||
line-height: $h3-font-size;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: pxToRem(500);
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
max-width: pxToRem(540);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: pxToRem(176);
|
||||
background-image: url('/img/blurred/blurred-light-11.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h2-font-size;
|
||||
line-height: pxToRem(67);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
@use 'sass:math';
|
||||
|
||||
.label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: math.div($spacer, 4) $spacer;
|
||||
border-radius: $spacer;
|
||||
background-color: $neutral-20;
|
||||
|
||||
&_icon {
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
}
|
||||
|
||||
&_title {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
font-weight: 400;
|
||||
color: $neutral-90;
|
||||
}
|
||||
}
|
||||
@@ -13,70 +13,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
max-width: pxToRem(800);
|
||||
margin: 0 auto;
|
||||
border-top: pxToRem(1) solid $neutral-80;
|
||||
|
||||
&__item {
|
||||
border-bottom: pxToRem(1) solid $neutral-80;
|
||||
|
||||
&-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: pxToRem(98);
|
||||
margin-bottom: 0;
|
||||
padding: 0 $spacer * 3 0 0;
|
||||
color: $neutral-20;
|
||||
cursor: pointer;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: pxToRem(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: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
color: $neutral-40;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.2s ease-out;
|
||||
|
||||
&-content {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
ul {
|
||||
list-style-type: "- ";
|
||||
padding-left: pxToRem(14);
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 2px solid $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -97,22 +33,6 @@
|
||||
line-height: pxToRem(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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: $spacer * 5;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user