mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-06 03:18:30 +02:00
New homepage (#2172)
* two new sections * enterprise capabilities and enterprise ready sections * sections: engineered-for-builders and performance-by-design * sections: cta-banner, integrations-logos, solutions # Conflicts: # qdrant-landing/themes/qdrant-2024/assets/css/partials/_cta-banner.scss # qdrant-landing/themes/qdrant-2024/layouts/partials/cta-banner.html * remove old sections from index.html * wip: home page * reuse links, carousel width * globe and globe lights * globe lights * finalyzing the globe, add customers icons * new icons set + svg partial update * upd icons in the enterprise-ready section * lines background * globe lights as gradient and svg * fix carousel responsiveness * fix cut box shadow * accordion slider responsiveness * new hero * hero customers * some hero responsiveness * customers layout fix * cards responsiveness * fixes * remove floating github link * hero - bigger screens * refactor css * more hero responsiveness * fix * hero parallax * replace svg as img with embedded svg logos * fix marquee * slider's tabs responsiveness * remove horizontal scroll on the mobile * moved images * images optim * moved paths to markdown * svg -> png * some refactoring and clean up * moved scss * svg to png * more images optimization and cleaning * optimizing png * fix globe cards height * add reveal effect * improve reveal effect * fix for the hero animation in Safari * removed type:page preventing use-cases page from rendering with newer version of Hugo * restore static/img/home/reranking.webp * remove unused files * formatting * hero and reveal fixes * fixes * update cta banner * links and content fix * fixes: content, links, web-ui illustration * canva testimonial * upd link * fix * replace links * slider links
This commit is contained in:
trean
@@ -83,6 +83,9 @@ $theme-colors: (
|
||||
'light': $neutral-98,
|
||||
'mid-gray': $neutral-94,
|
||||
'dark': $neutral-20,
|
||||
'teal': $secondary-teal-50,
|
||||
'violet': $secondary-violet-50,
|
||||
'blue': $secondary-blue-50,
|
||||
);
|
||||
|
||||
$body-bg: $neutral-98;
|
||||
@@ -109,10 +112,12 @@ $table-striped-bg: $neutral-94;
|
||||
|
||||
$font-family-sans-serif: 'Mona Sans', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
$font-family-monospace: 'Geist Mono', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Monaco', monospace;
|
||||
$font-family-monospace: 'Geist Mono', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas,
|
||||
'Lucida Console', 'Monaco', monospace;
|
||||
$font-family-base: 'Mona Sans', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
$font-family-code: 'Geist Mono', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas, 'Lucida Console', 'Monaco', monospace;
|
||||
$font-family-code: 'Geist Mono', 'Overpass Mono', SFMono-Regular, 'Droid Sans Mono', Menlo, Monaco, Consolas,
|
||||
'Lucida Console', 'Monaco', monospace;
|
||||
|
||||
$font-size-xs: pxToRem(12);
|
||||
$font-size-s: pxToRem(14);
|
||||
@@ -210,3 +215,15 @@ $spacers: (
|
||||
$code-snippet-border-radius: $border-radius * 2;
|
||||
|
||||
$post-content-width: pxToRem(920);
|
||||
|
||||
$grid-breakpoints: (
|
||||
xxs: 0,
|
||||
xs: 375px,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1900px,
|
||||
);
|
||||
@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
|
||||
@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
|
||||
|
||||
@@ -64,11 +64,11 @@ body {
|
||||
&.no-scroll {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
// Apply Mona Sans width variation setting globally
|
||||
// This ensures all text using Mona Sans (via font-family-base) uses width axis at 100
|
||||
font-variation-settings: 'wdth' 100;
|
||||
font-feature-settings: "ss05" on;
|
||||
font-feature-settings: 'ss05' on;
|
||||
font-weight: 350;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
@import 'base';
|
||||
@import 'partials/customers';
|
||||
@import 'partials/hero';
|
||||
@import 'partials/core-features';
|
||||
@import 'partials/scroll-reveal';
|
||||
@import 'partials/home/index';
|
||||
@import 'partials/customer-stories';
|
||||
@import 'partials/docker-deploy';
|
||||
@import 'partials/vectors';
|
||||
@import 'partials/integrations';
|
||||
@import 'partials/get-started';
|
||||
@import 'partials/additional-resources';
|
||||
@import 'partials/feature-overview';
|
||||
@@ -136,4 +134,4 @@
|
||||
@import 'partials/elastic-lucene/index';
|
||||
@import 'partials/hr-tech/index';
|
||||
@import 'partials/healthcare/index';
|
||||
@import 'partials/cta-banner';
|
||||
@import 'partials/cta-banner';
|
||||
|
||||
@@ -11,9 +11,12 @@
|
||||
$background-color: #090e1a,
|
||||
$pauseOnHover: false,
|
||||
$speed: 25s,
|
||||
$pseudoElementDisplay: block
|
||||
$pseudoElementDisplay: block,
|
||||
$keyframePrefix: ''
|
||||
) {
|
||||
$inner-width: math.div($total-marquee-items, $visible-marquee-items) * 2 * 100%;
|
||||
$leftKeyframe: if($keyframePrefix != '', #{$keyframePrefix}marqueeLeft, marqueeLeft);
|
||||
$rightKeyframe: if($keyframePrefix != '', #{$keyframePrefix}marqueeRight, marqueeRight);
|
||||
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
@@ -68,11 +71,11 @@
|
||||
}
|
||||
|
||||
&_to-left {
|
||||
animation: marqueeLeft $speed linear infinite;
|
||||
animation: $leftKeyframe $speed linear infinite;
|
||||
}
|
||||
|
||||
&_to-right {
|
||||
animation: marqueeRight $speed linear infinite;
|
||||
animation: $rightKeyframe $speed linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -91,7 +94,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marqueeLeft {
|
||||
@keyframes #{$leftKeyframe} {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
@@ -99,7 +102,7 @@
|
||||
left: $inner-width * 0.5 * -1;
|
||||
}
|
||||
}
|
||||
@keyframes marqueeRight {
|
||||
@keyframes #{$rightKeyframe} {
|
||||
0% {
|
||||
left: $inner-width * 0.5 * -1;
|
||||
}
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.core-features {
|
||||
background-color: $neutral-94;
|
||||
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
line-height: pxToRem(48);
|
||||
text-align: start;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
color: $neutral-20;
|
||||
margin-top: $spacer * 1.5;
|
||||
margin-bottom: $spacer;
|
||||
line-height: pxToRem(34);
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
&.card {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
& div:first-child {
|
||||
padding-right: $spacer * 2;
|
||||
padding-top: $spacer * 2;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-right: pxToRem(122);
|
||||
padding-top: $spacer * 5;
|
||||
}
|
||||
}
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: pxToRem(24);
|
||||
line-height: pxToRem(34);
|
||||
margin-top: 0;
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: pxToRem(12);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
margin-top: $spacer;
|
||||
background: url('/img/qdrant-cloud.png') right bottom no-repeat;
|
||||
background-size: contain;
|
||||
max-width: 100% !important;
|
||||
width: pxToRem(372);
|
||||
height: pxToRem(214);
|
||||
border-radius: 0 0 calc($spacer / 2) 0;
|
||||
aspect-ratio: 1.45/1;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
color: $neutral-30;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
color: $neutral-20;
|
||||
font-size: map-get($font-sizes-text, 'm');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 6.5;
|
||||
padding-bottom: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
text-align: center;
|
||||
line-height: pxToRem(67);
|
||||
max-width: pxToRem(920);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: pxToRem(30);
|
||||
max-width: pxToRem(920);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-left: pxToRem(-15);
|
||||
margin-right: pxToRem(-15);
|
||||
}
|
||||
|
||||
&__cards > div {
|
||||
padding: 0 pxToRem(15);
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
padding-left: $spacer * 2.5;
|
||||
padding-right: $spacer * 2.5;
|
||||
min-height: pxToRem(390);
|
||||
|
||||
svg {
|
||||
max-width: pxToRem(48);
|
||||
max-height: pxToRem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native {
|
||||
padding-top: pxToRem(75);
|
||||
padding-bottom: pxToRem(75);
|
||||
max-width: pxToRem(1110);
|
||||
min-height: pxToRem(420);
|
||||
padding-left: $spacer * 3;
|
||||
padding-right: $spacer * 3;
|
||||
margin-top: $spacer * 5;
|
||||
|
||||
.core-features__card-title {
|
||||
font-size: map-get($font-sizes-text, 'xxl');
|
||||
line-height: pxToRem(48);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
.core-features__card-content {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__cloud-native-image {
|
||||
width: pxToRem(540);
|
||||
height: pxToRem(372);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -19,6 +19,7 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -36,27 +37,25 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.75;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
margin: 0 0 1.5rem;
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(28);
|
||||
line-height: 1;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__button {
|
||||
white-space: nowrap;
|
||||
margin-top: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__illustration {
|
||||
@@ -75,7 +74,6 @@
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
max-width: pxToRem(500);
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marquee' as marquee;
|
||||
|
||||
.customers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 3;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background: $neutral-10;
|
||||
|
||||
&__title {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
margin: 0 auto calc($spacer / 2);
|
||||
}
|
||||
|
||||
&__description {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-left: pxToRem(20);
|
||||
padding-right: pxToRem(20);
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-60;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.customers__logos {
|
||||
@include marquee.base(64px, 224px, 24, 24, 52px, $neutral-10, false, 50s, block);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__title {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
gap: calc($spacer / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,173 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
position: relative;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__content {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
min-height: pxToRem(480);
|
||||
margin: pxToRem(-142) auto 0;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
$height: math.div(-100vw, 2.46); // image's aspect ratio 2.46 / 1
|
||||
margin-top: calc(#{$height} * 0.34);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 250%;
|
||||
height: auto;
|
||||
margin-left: -75%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: pxToRem(48);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
text-align: center;
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
max-width: 100%;
|
||||
margin: 0 auto $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: pxToRem(200);
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
bottom: $spacer;
|
||||
border-radius: 8px;
|
||||
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
padding-top: calc($spacer / 2);
|
||||
padding-bottom: calc($spacer / 2);
|
||||
padding-left: pxToRem(20);
|
||||
padding-right: pxToRem(20);
|
||||
|
||||
background-color: $neutral-10;
|
||||
transition: bottom 1s ease-in-out;
|
||||
}
|
||||
|
||||
&__stars svg {
|
||||
max-width: pxToRem(24);
|
||||
max-height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__stars-text {
|
||||
color: $neutral-98;
|
||||
margin-right: calc($spacer / 2);
|
||||
margin-left: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: pxToRem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__stars-count {
|
||||
border-radius: 6px;
|
||||
border: 1px solid $neutral-30;
|
||||
color: $neutral-98;
|
||||
padding-left: calc($spacer / 2);
|
||||
padding-right: calc($spacer / 2);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc($spacer / 4);
|
||||
|
||||
height: pxToRem(25);
|
||||
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
|
||||
&__content {
|
||||
padding: 0;
|
||||
max-width: pxToRem(920);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 1);
|
||||
line-height: pxToRem(76);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: pxToRem(30);
|
||||
max-width: pxToRem(640);
|
||||
margin: 0 auto $spacer * 2;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: fixed;
|
||||
right: $spacer * 1.5;
|
||||
bottom: $spacer * 1.5;
|
||||
transition: background-color 0.2s;
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
background-color: $neutral-100;
|
||||
.hero__stars-text,
|
||||
.hero__stars-count {
|
||||
color: $neutral-20;
|
||||
}
|
||||
& > svg path {
|
||||
fill: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.integrations {
|
||||
background: $neutral-10;
|
||||
padding-top: $spacer * 4;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: pxToRem(48);
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
max-width: 100%;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-70;
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: $primary-60;
|
||||
font-size: $font-size-xl;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 3;
|
||||
width: 100%;
|
||||
height: pxToRem(440);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/img/mobile/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
padding-top: $spacer * 6.5;
|
||||
|
||||
&__title {
|
||||
font-size: map-get($font-sizes, 2);
|
||||
line-height: pxToRem(67);
|
||||
max-width: pxToRem(726);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
margin-top: $spacer * 5;
|
||||
width: pxToRem(920);
|
||||
height: pxToRem(440);
|
||||
background-image: url('/img/integrations.svg');
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: pxToRem(240);
|
||||
|
||||
position: absolute;
|
||||
bottom: pxToRem(-255);
|
||||
left: 0;
|
||||
filter: blur(60px);
|
||||
background: linear-gradient(90deg, #dc244c 7%, #2567eb 30%, #f54c71 50%, #7335f0 70%, #bb3987 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// Scroll reveal animations
|
||||
// Entry: CSS animation (slide-up + fade-in) — keeps translateY out of the
|
||||
// static hidden state so removing .revealed never shifts layout and can't
|
||||
// cause an intersection-observer feedback loop.
|
||||
// Exit: opacity-only CSS transition — smooth fade, no position change.
|
||||
|
||||
@keyframes reveal-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: show content if JS hasn't loaded
|
||||
[data-reveal] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
// Only apply hidden state when JS is ready
|
||||
.js-loaded [data-reveal] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-out;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
.js-loaded [data-reveal].revealed {
|
||||
opacity: 1;
|
||||
animation: reveal-in 0.6s ease-out backwards;
|
||||
}
|
||||
|
||||
// Stagger delays for grouped items
|
||||
.js-loaded [data-reveal-delay="1"] { transition-delay: 0.1s; animation-delay: 0.1s; }
|
||||
.js-loaded [data-reveal-delay="2"] { transition-delay: 0.2s; animation-delay: 0.2s; }
|
||||
.js-loaded [data-reveal-delay="3"] { transition-delay: 0.3s; animation-delay: 0.3s; }
|
||||
.js-loaded [data-reveal-delay="4"] { transition-delay: 0.4s; animation-delay: 0.4s; }
|
||||
|
||||
// Respect reduced motion preference
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.js-loaded [data-reveal] {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
@@ -14,6 +14,10 @@
|
||||
&__review {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-size: pxToRem(20);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
line-height: 1.5;
|
||||
color: $neutral-20;
|
||||
letter-spacing: pxToRem(-0.2);
|
||||
@@ -61,6 +65,54 @@
|
||||
img {
|
||||
width: pxToRem(150);
|
||||
}
|
||||
|
||||
&--gradient {
|
||||
min-height: pxToRem(300);
|
||||
background-color: $neutral-10;
|
||||
background-image: url('/img/testimonial-logo-glow.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Gradient layout: equal-height cards, Figma-style (only when gradient: true) */
|
||||
&--gradient-layout {
|
||||
.row {
|
||||
align-items: stretch;
|
||||
--bs-gutter-x: #{pxToRem(30)};
|
||||
}
|
||||
|
||||
.testimonial-light__content,
|
||||
.testimonial-light__logo {
|
||||
min-height: pxToRem(300);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.testimonial-light__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: pxToRem(56);
|
||||
}
|
||||
|
||||
.testimonial-light__logo--gradient {
|
||||
padding: pxToRem(32);
|
||||
}
|
||||
|
||||
.testimonial-light__review {
|
||||
font-size: pxToRem(24);
|
||||
line-height: 1.3;
|
||||
letter-spacing: pxToRem(-0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&__partners {
|
||||
|
||||
@@ -0,0 +1,229 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.case-studies {
|
||||
background-color: $neutral-94;
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
// Header
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 3;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: pxToRem(32);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
&__controls {
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(40);
|
||||
height: pxToRem(40);
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: $neutral-20;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
opacity 0.2s ease;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $neutral-80;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(14);
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel constrained to container width
|
||||
&__carousel-outer {
|
||||
overflow: hidden;
|
||||
margin-top: pxToRem(-12);
|
||||
margin-bottom: pxToRem(-60); // negative margin so card shadow not clipped below
|
||||
padding-top: pxToRem(12);
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-right: pxToRem(-24);
|
||||
padding-right: pxToRem(24);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: pxToRem(20);
|
||||
background: linear-gradient(to left, rgba($neutral-94, 0.3), transparent);
|
||||
pointer-events: none;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__carousel {
|
||||
overflow: hidden;
|
||||
padding-bottom: pxToRem(80);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-right: pxToRem(-24);
|
||||
padding-right: pxToRem(24);
|
||||
}
|
||||
}
|
||||
|
||||
&__track {
|
||||
display: flex;
|
||||
gap: pxToRem(30);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&__slide {
|
||||
flex-shrink: 0;
|
||||
width: var(--case-studies-slide-width, pxToRem(280));
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Card
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: pxToRem(280);
|
||||
padding: $spacer * 2;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid rgba($neutral-80, 0.2);
|
||||
border-radius: pxToRem(16);
|
||||
box-shadow:
|
||||
2px 2px 8px 0 rgba(155, 162, 184, 0.1),
|
||||
8px 8px 14px 0 rgba(155, 162, 184, 0.09),
|
||||
18px 18px 18px 0 rgba(155, 162, 184, 0.05),
|
||||
32px 32px 22px 0 rgba(155, 162, 184, 0.01),
|
||||
48px 48px 24px 0 rgba(155, 162, 184, 0);
|
||||
transition: box-shadow 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow:
|
||||
3px 2px 9px 0 rgba(22, 30, 51, 0.1),
|
||||
12px 6px 16px 0 rgba(22, 30, 51, 0.09),
|
||||
28px 14px 22px 0 rgba(22, 30, 51, 0.05),
|
||||
48px 24px 26px 0 rgba(22, 30, 51, 0.01),
|
||||
72px 36px 28px 0 rgba(22, 30, 51, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-text {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__phrase--no-break {
|
||||
white-space: nowrap; // Keeps last word + period together to avoid orphan punctuation
|
||||
}
|
||||
|
||||
&__highlight {
|
||||
font-weight: 600;
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
&__card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: pxToRem(16);
|
||||
}
|
||||
|
||||
&__card-logo {
|
||||
height: pxToRem(48);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
svg {
|
||||
max-height: pxToRem(48);
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) saturate(100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(28);
|
||||
height: pxToRem(28);
|
||||
flex-shrink: 0;
|
||||
color: $neutral-20;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
.case-studies__card:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.customers {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: pxToRem(64) pxToRem(20) pxToRem(80);
|
||||
background: $neutral-10;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: pxToRem(1110);
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: pxToRem(24) pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(103); // (1110 - 9*8)/10 so 10 logos fit per row on 2 lines
|
||||
height: pxToRem(56);
|
||||
padding: 0 pxToRem(10);
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
+227
@@ -0,0 +1,227 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.engineered-for-builders {
|
||||
background-color: $neutral-10;
|
||||
padding-top: pxToRem(120);
|
||||
padding-bottom: pxToRem(120);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.container {
|
||||
max-width: pxToRem(1110);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Background decoration
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(ellipse at 50% 0%, rgba(87, 0, 201, 0.15) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
|
||||
// Two line backgrounds
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('/img/home/blured-line.svg');
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: 80% auto;
|
||||
background-position: 50% 69%;
|
||||
background-repeat: no-repeat;
|
||||
mix-blend-mode: plus-lighter;
|
||||
filter: blur(78px);
|
||||
|
||||
@media (max-width: 2300px) {
|
||||
background-size: 90% auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('/img/home/blured-line-2.svg');
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-size: 80% auto;
|
||||
background-position: 50% 69%;
|
||||
background-repeat: no-repeat;
|
||||
mix-blend-mode: plus-lighter;
|
||||
filter: blur(26px);
|
||||
|
||||
@media (max-width: 2300px) {
|
||||
background-size: 90% auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xxl) {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__background-texture {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('/img/home/engineered-texture.png');
|
||||
background: image-set(
|
||||
url('/img/home/engineered-texture.webp') type('image/webp'),
|
||||
url('/img/home/engineered-texture.png') type('image/png')
|
||||
);
|
||||
background-size: cover;
|
||||
background-position: 50% 69%;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.7;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
// Header
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: pxToRem(8);
|
||||
margin-bottom: pxToRem(64);
|
||||
max-width: pxToRem(920);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-90;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: pxToRem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-70;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Illustration
|
||||
&__illustration {
|
||||
position: relative;
|
||||
margin-bottom: pxToRem(40);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
//max-width: pxToRem(1026);
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-radius: pxToRem(16);
|
||||
}
|
||||
|
||||
// Gradient overlay at bottom
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: pxToRem(1026);
|
||||
height: pxToRem(112);
|
||||
background: linear-gradient(180deg, rgba(9, 14, 26, 0) 0%, rgb(9, 14, 26) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__image-note {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 350;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
// Features
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(48);
|
||||
padding-top: pxToRem(40);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&__feature-title {
|
||||
font-size: pxToRem(18);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-90;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: pxToRem(20);
|
||||
}
|
||||
}
|
||||
|
||||
&__feature-description {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-70;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__feature-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-98;
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: pxToRem(16);
|
||||
height: pxToRem(16);
|
||||
margin-top: pxToRem(2);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
+298
@@ -0,0 +1,298 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.enterprise-capabilities {
|
||||
position: relative;
|
||||
background: radial-gradient(
|
||||
107.37% 114.83% at 50% 94.96%,
|
||||
rgba(67, 37, 174, 0) 0%,
|
||||
rgba(67, 37, 174, 0) 75%,
|
||||
rgba(67, 37, 174, 0.8) 90%,
|
||||
#6143e0 100%
|
||||
),
|
||||
#090e1a;
|
||||
padding-top: pxToRem(120);
|
||||
padding-bottom: 31rem;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: pxToRem(1440);
|
||||
height: pxToRem(800);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
background-image: url('/img/home/stars-bg.svg');
|
||||
background-size: 1440px 800px;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&__white-light {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
aspect-ratio: 1/1;
|
||||
max-width: pxToRem(1600);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
filter: blur(5px);
|
||||
mix-blend-mode: plus-lighter;
|
||||
background: radial-gradient(
|
||||
49.61% 49.61% at 50% 50%,
|
||||
transparent 0%,
|
||||
transparent 35.59%,
|
||||
#d6d6d6 71.07%,
|
||||
transparent 100%
|
||||
)
|
||||
center bottom / pxToRem(1800) auto no-repeat;
|
||||
background-blend-mode: color-dodge;
|
||||
transform: translateY(120%);
|
||||
margin-right: -100px;
|
||||
margin-left: -100px;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: block;
|
||||
transform: translateY(90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__globe-blue-light {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
//background: $secondary-blue-30;
|
||||
background: url(/img/home/globe/globe-light.svg) center bottom / pxToRem(1800) auto no-repeat;
|
||||
mix-blend-mode: plus-lighter;
|
||||
filter: blur(40px);
|
||||
margin-right: -100px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
&__globe-front {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url('/img/home/globe/globe.png');
|
||||
background-size: pxToRem(1600) auto;
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 240px;
|
||||
background: linear-gradient(180deg, rgba(9, 14, 26, 0) 4.25%, #090e1a 88.85%);
|
||||
background-position: center bottom;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 4;
|
||||
}
|
||||
|
||||
// Header
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: $spacer;
|
||||
max-width: pxToRem(920);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-98;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: pxToRem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-70;
|
||||
margin: 0;
|
||||
max-width: pxToRem(730);
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
}
|
||||
|
||||
// Cards
|
||||
&__cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: $spacer * 2;
|
||||
width: 100%;
|
||||
max-width: pxToRem(1114);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
gap: pxToRem(30);
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
min-width: 0;
|
||||
padding: $spacer * 1.5 pxToRem(20);
|
||||
background: linear-gradient(180deg, rgba(22, 30, 51, 0.95) 0%, rgba(14, 20, 36, 0.95) 100%);
|
||||
border: 1px solid transparent;
|
||||
border-top-color: $neutral-40;
|
||||
border-radius: pxToRem(8);
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(180deg, rgba(28, 38, 64, 0.98) 0%, rgba(20, 28, 48, 0.98) 100%);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&--left {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
&--center-left {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&--center-right {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
&--right {
|
||||
grid-column: 4;
|
||||
grid-row: 1 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__connector {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: pxToRem(36);
|
||||
height: pxToRem(200);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__card-icon {
|
||||
width: pxToRem(32);
|
||||
height: pxToRem(32);
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: $neutral-98;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-70;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
align-self: flex-start;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__card:hover &__card-link {
|
||||
padding-right: calc(#{pxToRem(20)} + 6px);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.enterprise-ready {
|
||||
background-color: $neutral-94;
|
||||
padding-top: pxToRem(80);
|
||||
padding-bottom: pxToRem(80);
|
||||
|
||||
.container {
|
||||
max-width: pxToRem(1110);
|
||||
}
|
||||
|
||||
// Header
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: pxToRem(64);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: pxToRem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
max-width: pxToRem(728);
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
font-size: map-get($font-sizes-text, 'xl');
|
||||
}
|
||||
}
|
||||
|
||||
// Content wrapper
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(30);
|
||||
}
|
||||
|
||||
// Row containers
|
||||
&__row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: pxToRem(30);
|
||||
}
|
||||
|
||||
&__row--large {
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__row--small {
|
||||
gap: pxToRem(30);
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Cards base
|
||||
&__card {
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Large cards
|
||||
&__card--large {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
&#{&}__card--link:hover {
|
||||
border-color: $neutral-80;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
&__card-visual {
|
||||
position: relative;
|
||||
height: pxToRem(144);
|
||||
background-color: $neutral-98;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: pxToRem(24);
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
align-self: flex-start;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__card--large#{&}__card--link:hover &__card-link {
|
||||
$icon-width: pxToRem(20);
|
||||
color: $primary-50;
|
||||
padding-right: calc($icon-width + 6px);
|
||||
|
||||
&::before {
|
||||
background: linear-gradient(to right, $primary-50 50%, transparent 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position: 0 0;
|
||||
animation: link-dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $primary-50;
|
||||
animation: link-dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes link-dash {
|
||||
to {
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Small cards — flex to fill container width at all breakpoints
|
||||
&__card--small {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: pxToRem(160);
|
||||
padding: pxToRem(24);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition:
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex: 1 1 calc((100% - 60px) / 3);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
&#{&}__card--link:hover {
|
||||
border-color: $neutral-80;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.enterprise-ready__card-label {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card-icon {
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
|
||||
svg,
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-svg {
|
||||
display: block;
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__card-label {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-20;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,515 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: url('/img/home/hero/hero-bg-pattern.png') repeat $neutral-10;
|
||||
background-size: 400px 400px;
|
||||
padding: 0;
|
||||
padding-bottom: 6rem;
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: pxToRem(1360);
|
||||
overflow: hidden;
|
||||
background: radial-gradient(
|
||||
ellipse at center top,
|
||||
rgba(1, 17, 54, 0) 10%,
|
||||
rgba(7, 28, 78, 0.1) 40%,
|
||||
rgba(28, 58, 130, 1) 64%,
|
||||
rgba(34, 71, 152, 1) 100%
|
||||
);
|
||||
min-height: pxToRem(800);
|
||||
padding-bottom: pxToRem(138);
|
||||
}
|
||||
|
||||
&__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
mix-blend-mode: overlay;
|
||||
background: url('/img/home/hero/grid.svg') center top / cover no-repeat;
|
||||
will-change: transform;
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: pxToRem(24);
|
||||
padding: pxToRem(48) pxToRem(20) 0;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: pxToRem(12);
|
||||
max-width: pxToRem(730);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
color: $neutral-98;
|
||||
font-size: map-get($font-sizes, 4);
|
||||
line-height: pxToRem(48);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
color: $neutral-80;
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: pxToRem(16);
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: pxToRem(180);
|
||||
}
|
||||
|
||||
&__planet {
|
||||
position: absolute;
|
||||
width: pxToRem(506);
|
||||
height: pxToRem(480);
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
top: pxToRem(420);
|
||||
z-index: 2;
|
||||
will-change: transform;
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
&__planet-blur {
|
||||
position: absolute;
|
||||
width: calc(100% + 12%);
|
||||
height: calc(100% + 13%);
|
||||
top: -6.67%;
|
||||
left: -6.32%;
|
||||
mix-blend-mode: plus-lighter;
|
||||
}
|
||||
|
||||
&__planet-blur--alt {
|
||||
mix-blend-mode: plus-lighter;
|
||||
}
|
||||
|
||||
&__planet-sphere {
|
||||
position: absolute;
|
||||
width: calc(100% + 1.58%);
|
||||
height: calc(100% + 1.67%);
|
||||
top: 0;
|
||||
left: -0.79%;
|
||||
}
|
||||
|
||||
&__planet-texture {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: overlay;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&__blue-haze {
|
||||
position: absolute;
|
||||
width: pxToRem(1200);
|
||||
height: pxToRem(600);
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: pxToRem(80);
|
||||
mix-blend-mode: lighten;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
transition: transform 0.1s linear;
|
||||
}
|
||||
|
||||
&__astronauts {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
width: 100%;
|
||||
max-width: pxToRem(1360);
|
||||
height: pxToRem(360);
|
||||
z-index: 3;
|
||||
will-change: transform;
|
||||
transition: transform 0.1s linear;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__fade-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: pxToRem(500);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
$neutral-10 0%,
|
||||
rgba($neutral-10, 0.7) 30%,
|
||||
rgba($neutral-10, 0.3) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__fade-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 4;
|
||||
height: 5vh;
|
||||
min-height: pxToRem(20);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$neutral-10 0%,
|
||||
rgba($neutral-10, 0.98) 35%,
|
||||
rgba($neutral-10, 0.7) 50%,
|
||||
rgba($neutral-10, 0.2) 90%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
&__fade-left,
|
||||
&__fade-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__fade-left {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, $neutral-10 0%, rgba($neutral-10, 0.6) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
&__fade-right {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, $neutral-10 0%, rgba($neutral-10, 0.6) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
&__badges {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: pxToRem(12);
|
||||
z-index: 5;
|
||||
padding: 0 pxToRem(16);
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: pxToRem(8);
|
||||
padding: pxToRem(4) pxToRem(10);
|
||||
background-color: rgba(17, 24, 36, 0.8);
|
||||
border-radius: pxToRem(4);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&--link:hover {
|
||||
background-color: rgba(17, 24, 36, 1);
|
||||
|
||||
.hero__badge-text {
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__badge-icon {
|
||||
width: pxToRem(16);
|
||||
height: pxToRem(16);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__badge-text {
|
||||
color: $neutral-90;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
right: $spacer;
|
||||
bottom: $spacer;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: calc($spacer / 2) pxToRem(20);
|
||||
background-color: $neutral-10;
|
||||
transition: bottom 1s ease-in-out;
|
||||
}
|
||||
|
||||
&__stars svg {
|
||||
max-width: pxToRem(24);
|
||||
max-height: pxToRem(24);
|
||||
}
|
||||
|
||||
&__stars-text {
|
||||
color: $neutral-98;
|
||||
margin-right: calc($spacer / 2);
|
||||
margin-left: calc($spacer / 2);
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: pxToRem(21);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__stars-count {
|
||||
border-radius: 6px;
|
||||
border: 1px solid $neutral-30;
|
||||
color: $neutral-98;
|
||||
padding-left: calc($spacer / 2);
|
||||
padding-right: calc($spacer / 2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: calc($spacer / 4);
|
||||
height: pxToRem(25);
|
||||
font-size: map-get($font-sizes-text, 's');
|
||||
line-height: pxToRem(21);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xs) {
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-left: $spacer * 2.5;
|
||||
padding-right: $spacer * 2.5;
|
||||
|
||||
&__container {
|
||||
padding-bottom: pxToRem(108);
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
gap: pxToRem(24);
|
||||
}
|
||||
|
||||
&__buttons a {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&__fade-left,
|
||||
&__fade-right {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: pxToRem(80);
|
||||
z-index: 4;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__badges {
|
||||
bottom: pxToRem(60);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: 0 $spacer * 2.5;
|
||||
padding-bottom: 0;
|
||||
|
||||
&__container {
|
||||
min-height: pxToRem(940);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
gap: pxToRem(32);
|
||||
padding: pxToRem(64) pxToRem(125) 0;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
gap: pxToRem(16);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(64);
|
||||
line-height: 1.1;
|
||||
letter-spacing: -1.5px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(20);
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
&__planet {
|
||||
top: pxToRem(440);
|
||||
}
|
||||
|
||||
&__blue-haze {
|
||||
width: pxToRem(800);
|
||||
height: pxToRem(200);
|
||||
bottom: pxToRem(200);
|
||||
}
|
||||
|
||||
&__astronauts {
|
||||
height: pxToRem(482);
|
||||
}
|
||||
|
||||
&__fade-bottom {
|
||||
height: 5vh;
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$neutral-10 0%,
|
||||
rgba($neutral-10, 0.98) 40%,
|
||||
rgba($neutral-10, 0.7) 50%,
|
||||
rgba($neutral-10, 0.2) 90%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
|
||||
&__badges {
|
||||
gap: pxToRem(40);
|
||||
bottom: pxToRem(40);
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: fixed;
|
||||
right: $spacer * 1.5;
|
||||
bottom: $spacer * 1.5;
|
||||
transition: background-color 0.2s;
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
background-color: $neutral-100;
|
||||
.hero__stars-text,
|
||||
.hero__stars-count {
|
||||
color: $neutral-20;
|
||||
}
|
||||
& > svg path {
|
||||
fill: $neutral-20;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
padding-left: $spacer * 6;
|
||||
padding-right: $spacer * 6;
|
||||
|
||||
&__grid {
|
||||
mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 70%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 70%);
|
||||
mask-size: 100% 100%;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
&__container {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
min-height: max(#{pxToRem(1000)}, 43vw);
|
||||
}
|
||||
|
||||
&__fade-left,
|
||||
&__fade-right {
|
||||
width: pxToRem(120);
|
||||
}
|
||||
|
||||
&__planet {
|
||||
width: 37.2%;
|
||||
height: auto;
|
||||
aspect-ratio: 506 / 480;
|
||||
top: pxToRem(430);
|
||||
}
|
||||
|
||||
&__blue-haze {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 4 / 1;
|
||||
}
|
||||
|
||||
&__astronauts {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1360 / 482;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__fade-bottom {
|
||||
height: 12vh;
|
||||
min-height: pxToRem(100);
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
$neutral-10 0%,
|
||||
rgba($neutral-10, 0.98) 40%,
|
||||
rgba($neutral-10, 0.7) 50%,
|
||||
rgba($neutral-10, 0.2) 90%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
&__badges {
|
||||
bottom: pxToRem(100);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2600px) {
|
||||
padding-left: $spacer * 12;
|
||||
padding-right: $spacer * 12;
|
||||
|
||||
&__container {
|
||||
min-height: max(#{pxToRem(1000)}, 38vw);
|
||||
}
|
||||
&__planet {
|
||||
top: pxToRem(420);
|
||||
}
|
||||
&__fade-bottom {
|
||||
height: 15vh;
|
||||
min-height: pxToRem(150);
|
||||
}
|
||||
&__badges {
|
||||
bottom: pxToRem(120);
|
||||
}
|
||||
}
|
||||
}
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
@use 'sass:math';
|
||||
@use '../../helpers/functions' as *;
|
||||
@use '../../mixins/marquee' as marquee;
|
||||
|
||||
$integrations-logos-bg: #090e1a;
|
||||
$integrations-logos-border: #161e33;
|
||||
$integrations-logos-text: #8f98b2;
|
||||
|
||||
.integrations-logos {
|
||||
padding: pxToRem(80) 0;
|
||||
background-color: $integrations-logos-bg;
|
||||
|
||||
&__title {
|
||||
margin: 0 0 pxToRem(48);
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: pxToRem(21);
|
||||
letter-spacing: pxToRem(2);
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: $integrations-logos-text;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: pxToRem(1);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@include marquee.base(80px, 240px, 8, 8, 0, $integrations-logos-bg, false, 40s, none);
|
||||
|
||||
&__container {
|
||||
margin-bottom: pxToRem(-1);
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
width: pxToRem(240);
|
||||
height: pxToRem(80);
|
||||
border-top: 1px solid $integrations-logos-border;
|
||||
border-right: 1px solid $integrations-logos-border;
|
||||
border-bottom: 1px solid $integrations-logos-border;
|
||||
|
||||
svg {
|
||||
height: pxToRem(56);
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
&__inner > span:first-child > &__item:first-child {
|
||||
border-left: 1px solid $integrations-logos-border;
|
||||
}
|
||||
}
|
||||
|
||||
&__gradient-left,
|
||||
&__gradient-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: pxToRem(80);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: pxToRem(165);
|
||||
}
|
||||
}
|
||||
|
||||
&__gradient-left {
|
||||
left: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
$integrations-logos-bg 0.5%,
|
||||
$integrations-logos-bg 38.79%,
|
||||
rgba(9, 14, 26, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&__gradient-right {
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, $integrations-logos-bg 38.79%, rgba(9, 14, 26, 0) 100%);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: pxToRem(48) 0;
|
||||
|
||||
&__title {
|
||||
margin-bottom: pxToRem(32);
|
||||
font-size: pxToRem(12);
|
||||
line-height: pxToRem(18);
|
||||
padding: 0 pxToRem(16);
|
||||
}
|
||||
|
||||
&__cards {
|
||||
@include marquee.base(64px, 180px, 8, 6, 0, $integrations-logos-bg, false, 35s, none);
|
||||
|
||||
&__item {
|
||||
width: pxToRem(180);
|
||||
height: pxToRem(64);
|
||||
|
||||
svg {
|
||||
height: pxToRem(40);
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+267
@@ -0,0 +1,267 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.performance-by-design {
|
||||
background-color: $neutral-94;
|
||||
padding-top: pxToRem(80);
|
||||
padding-bottom: pxToRem(80);
|
||||
|
||||
.container {
|
||||
max-width: pxToRem(1110);
|
||||
}
|
||||
|
||||
// Header
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: $spacer;
|
||||
margin-bottom: pxToRem(64);
|
||||
max-width: pxToRem(920);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__tagline {
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: pxToRem(21);
|
||||
letter-spacing: 2px;
|
||||
color: $neutral-30;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: pxToRem(48);
|
||||
}
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
}
|
||||
}
|
||||
|
||||
// Slider: visible from md up (big screens)
|
||||
&__slider {
|
||||
display: none;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Card grid: visible below md. 1 col on xs, 2 per row from sm.
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: pxToRem(30);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Card (why-qdrant--large style)
|
||||
&__card {
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: pxToRem(400);
|
||||
}
|
||||
|
||||
&__card-visual {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: pxToRem(200);
|
||||
background: linear-gradient(180deg, $neutral-98 0%, rgba($neutral-94, 0.3) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
padding: pxToRem(24);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-40;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Content layout (slider, visible from md up)
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(48);
|
||||
align-items: center;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: pxToRem(80);
|
||||
}
|
||||
}
|
||||
|
||||
// Features list (vertical slider nav)
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: pxToRem(444);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: pxToRem(24) 0;
|
||||
border-bottom: pxToRem(2) solid $neutral-90;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature-title {
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-50;
|
||||
margin: 0;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: pxToRem(24);
|
||||
}
|
||||
|
||||
.performance-by-design__feature--active & {
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
.performance-by-design__feature:hover & {
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature-body {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-height 0.4s ease,
|
||||
opacity 0.3s ease,
|
||||
margin 0.3s ease;
|
||||
margin-top: 0;
|
||||
|
||||
.performance-by-design__feature--active & {
|
||||
max-height: pxToRem(200);
|
||||
opacity: 1;
|
||||
margin-top: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature-description {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-40;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__feature--active {
|
||||
border-bottom-color: $primary-50;
|
||||
}
|
||||
|
||||
// Visual / Image area (slider, visible from md up)
|
||||
&__visual {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: pxToRem(300);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
min-height: pxToRem(540);
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.4s ease,
|
||||
visibility 0.4s ease;
|
||||
pointer-events: none;
|
||||
|
||||
&--active {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: pxToRem(8);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,469 @@
|
||||
@use 'sass:math';
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
$solutions-bg-dark: #090e1a;
|
||||
$solutions-text-label: #8f98b2;
|
||||
$solutions-text-title: #d4d9e6;
|
||||
$solutions-text-subtitle: #8f98b2;
|
||||
$solutions-tab-bg: #161e33;
|
||||
$solutions-tab-border: #28324d;
|
||||
$solutions-tab-active-bg: #3d4866;
|
||||
$solutions-tab-text: #8f98b2;
|
||||
$solutions-tab-text-active: #f0f3fa;
|
||||
$solutions-panel-title: #e1e5f0;
|
||||
$solutions-panel-text: #8f98b2;
|
||||
$solutions-button-border: #717c99;
|
||||
|
||||
.solutions {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding: pxToRem(60) 0;
|
||||
background: radial-gradient(
|
||||
104.31% 111.56% at 50% 0%,
|
||||
rgba(67, 37, 174, 0) 0%,
|
||||
rgba(67, 37, 174, 0) 80%,
|
||||
rgba(67, 37, 174, 0.8) 90%,
|
||||
rgba(97, 67, 224, 0.9) 100%
|
||||
),
|
||||
$solutions-bg-dark;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
text-align: center;
|
||||
margin-bottom: pxToRem(40);
|
||||
}
|
||||
|
||||
&__label {
|
||||
display: inline-block;
|
||||
margin-bottom: pxToRem(16);
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: pxToRem(21);
|
||||
letter-spacing: pxToRem(2);
|
||||
text-transform: uppercase;
|
||||
color: $solutions-text-label;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 auto pxToRem(16);
|
||||
font-size: pxToRem(28);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: pxToRem(-0.5);
|
||||
color: $solutions-text-title;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
color: $solutions-text-subtitle;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
&__tabs-wrapper {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin: 0 auto pxToRem(40);
|
||||
background-color: $solutions-tab-bg;
|
||||
border: 1px solid $solutions-tab-border;
|
||||
border-radius: pxToRem(12);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
height: pxToRem(36);
|
||||
padding: 0 pxToRem(16);
|
||||
font-family: inherit;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: pxToRem(36);
|
||||
color: $solutions-tab-text;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
color: $solutions-tab-text-active;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: $solutions-tab-text-active;
|
||||
font-weight: 600;
|
||||
background-color: $solutions-tab-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Slider
|
||||
&__slider {
|
||||
position: relative;
|
||||
min-height: pxToRem(250);
|
||||
padding-bottom: pxToRem(40);
|
||||
}
|
||||
|
||||
&__slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition:
|
||||
opacity 0.4s ease,
|
||||
visibility 0.4s ease;
|
||||
pointer-events: none;
|
||||
|
||||
&--active {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
&__controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: pxToRem(40);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(40);
|
||||
height: pxToRem(40);
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 1px solid $solutions-tab-border;
|
||||
border-radius: pxToRem(8);
|
||||
color: $solutions-tab-text;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: $solutions-tab-text-active;
|
||||
border-color: $solutions-button-border;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: pxToRem(20);
|
||||
height: pxToRem(20);
|
||||
}
|
||||
}
|
||||
|
||||
&__dots {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(20);
|
||||
}
|
||||
|
||||
&__dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(24);
|
||||
height: pxToRem(24);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: pxToRem(6);
|
||||
height: pxToRem(6);
|
||||
background-color: $solutions-tab-border;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover span {
|
||||
background-color: $solutions-tab-text;
|
||||
}
|
||||
|
||||
&--active span {
|
||||
background-color: $solutions-tab-text-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Panel content
|
||||
&__panel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding-top: 0;
|
||||
margin-bottom: pxToRem(32);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__panel-title {
|
||||
margin: 0 0 pxToRem(24);
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: pxToRem(-0.5);
|
||||
color: $solutions-panel-title;
|
||||
}
|
||||
|
||||
&__panel-description {
|
||||
margin: 0 0 pxToRem(24);
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
letter-spacing: pxToRem(-0.2);
|
||||
color: $solutions-panel-text;
|
||||
}
|
||||
|
||||
&__panel-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: pxToRem(12);
|
||||
height: pxToRem(48);
|
||||
padding: 0 pxToRem(28);
|
||||
font-size: pxToRem(18);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
border: 1px solid $solutions-button-border;
|
||||
border-radius: pxToRem(8);
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__panel-illustration {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: pxToRem(250);
|
||||
padding: pxToRem(10);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: pxToRem(250);
|
||||
height: auto;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__panel-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: pxToRem(250);
|
||||
background: linear-gradient(135deg, rgba(22, 30, 51, 0.8) 0%, rgba(13, 19, 36, 0.9) 100%);
|
||||
border: 1px dashed rgba(143, 152, 178, 0.3);
|
||||
border-radius: pxToRem(16);
|
||||
|
||||
&::after {
|
||||
content: attr(data-label) ' illustration';
|
||||
font-family: 'Geist Mono', monospace;
|
||||
font-size: pxToRem(12);
|
||||
color: rgba(143, 152, 178, 0.5);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: pxToRem(80) 0;
|
||||
|
||||
&__header {
|
||||
margin-bottom: pxToRem(40);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__slider {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
&__panel-content {
|
||||
padding-top: 0;
|
||||
margin-bottom: pxToRem(32);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__panel-title {
|
||||
font-size: pxToRem(24);
|
||||
}
|
||||
|
||||
&__panel-description {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__panel-illustration {
|
||||
min-height: pxToRem(300);
|
||||
|
||||
img {
|
||||
max-height: pxToRem(300);
|
||||
}
|
||||
}
|
||||
|
||||
&__panel-placeholder {
|
||||
height: pxToRem(300);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__tabs {
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-bottom: pxToRem(40);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
padding: 0 pxToRem(8);
|
||||
font-size: pxToRem(12);
|
||||
height: pxToRem(36);
|
||||
line-height: pxToRem(36);
|
||||
}
|
||||
|
||||
&__tab--active {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&__tab-indicator {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: pxToRem(4);
|
||||
left: pxToRem(4);
|
||||
height: pxToRem(36);
|
||||
background-color: $solutions-tab-active-bg;
|
||||
border-radius: pxToRem(8);
|
||||
transition:
|
||||
left 0.3s ease,
|
||||
width 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
&__tab {
|
||||
font-size: pxToRem(14);
|
||||
padding: 0 pxToRem(20);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding: pxToRem(120) 0;
|
||||
|
||||
&__header {
|
||||
margin-bottom: pxToRem(64);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(48);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(18);
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
margin-bottom: pxToRem(64);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
font-size: pxToRem(16);
|
||||
height: pxToRem(40);
|
||||
line-height: pxToRem(40);
|
||||
}
|
||||
|
||||
&__tab-indicator {
|
||||
top: pxToRem(4);
|
||||
left: pxToRem(4);
|
||||
height: pxToRem(40);
|
||||
}
|
||||
|
||||
&__slider {
|
||||
min-height: pxToRem(400);
|
||||
}
|
||||
|
||||
&__panel-content {
|
||||
padding-top: pxToRem(40);
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__panel-title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__panel-description {
|
||||
font-size: pxToRem(20);
|
||||
}
|
||||
|
||||
&__panel-illustration {
|
||||
min-height: pxToRem(400);
|
||||
padding: pxToRem(20);
|
||||
|
||||
img {
|
||||
max-height: pxToRem(400);
|
||||
}
|
||||
}
|
||||
|
||||
&__panel-placeholder {
|
||||
height: pxToRem(400);
|
||||
|
||||
&::after {
|
||||
font-size: pxToRem(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
// Mobile-first: base styles (no min-width), then enhance from xxl only
|
||||
.why-qdrant {
|
||||
background-color: $neutral-94;
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: $spacer * 4;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&__pill {
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 2px;
|
||||
color: $neutral-30;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
max-width: pxToRem(838);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: map-get($font-sizes-text, 'l');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
max-width: pxToRem(780);
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__card {
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: pxToRem(400);
|
||||
}
|
||||
|
||||
&__card-visual {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
min-height: pxToRem(200);
|
||||
background: linear-gradient(180deg, $neutral-98 0%, rgba($neutral-94, 0.3) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__card-content {
|
||||
padding: pxToRem(24);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&__card-title {
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__card-description {
|
||||
font-size: map-get($font-sizes-text, 'md');
|
||||
font-weight: 350;
|
||||
line-height: 1.5;
|
||||
color: $neutral-40;
|
||||
margin: 0;
|
||||
|
||||
code {
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-size: pxToRem(14);
|
||||
color: $success-50;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__card-link {
|
||||
align-self: flex-start;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__title {
|
||||
font-size: pxToRem(48);
|
||||
}
|
||||
|
||||
&__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: auto auto;
|
||||
gap: pxToRem(30);
|
||||
}
|
||||
|
||||
&__card {
|
||||
min-height: pxToRem(440);
|
||||
|
||||
&--large {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
&--small {
|
||||
grid-column: span 2;
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
grid-column: 3 / span 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
grid-column: 5 / span 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card-visual {
|
||||
min-height: pxToRem(266);
|
||||
|
||||
.why-qdrant__card--small & {
|
||||
min-height: pxToRem(218);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
@import 'home-hero';
|
||||
@import 'home-customers';
|
||||
@import 'home-why-qdrant';
|
||||
@import 'home-case-studies';
|
||||
@import 'home-enterprise-capabilities';
|
||||
@import 'home-enterprise-ready';
|
||||
@import 'home-performance-by-design';
|
||||
@import 'home-engineered-for-builders';
|
||||
@import 'home-integrations-logos';
|
||||
@import 'home-solutions';
|
||||
Reference in New Issue
Block a user