Added Cloud inference page (#1779)

* Added Cloud inference page

* Menu updated

* Updated menu and footer
This commit is contained in:
nastyapash
2025-07-15 12:57:21 +02:00
committed by GitHub
parent cd95c1146e
commit 19ee9f3b05
39 changed files with 1076 additions and 102 deletions
@@ -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);
}
}
}
@@ -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;
}