mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-05 19:08:32 +02:00
Update Cloud page (#2542)
* update Cloud page * fix image paths * fix image paths * update images and text on the button * add links and target=_blank * add missing links, updated the cards so the entire card is clickable * add graphana dashboard gh link --------- Co-authored-by: trean <trean.mi@gmail.com>
This commit is contained in:
nastyapash
@@ -24,10 +24,7 @@
|
||||
@import 'partials/private-cloud-hero';
|
||||
@import 'partials/private-cloud-about';
|
||||
@import 'partials/private-cloud-get-contacted';
|
||||
@import 'partials/qdrant-cloud-hero';
|
||||
@import 'partials/qdrant-cloud-bento-cards';
|
||||
@import 'partials/qdrant-cloud-marketplaces';
|
||||
@import 'partials/qdrant-cloud-features-link';
|
||||
@import 'partials/qdrant-cloud';
|
||||
@import 'partials/video';
|
||||
@import 'partials/customer-list';
|
||||
@import 'partials/demos';
|
||||
@@ -89,3 +86,4 @@
|
||||
@import 'partials/vsd-recap/index';
|
||||
@import 'partials/vsd/vsd-agenda';
|
||||
@import 'partials/agenda';
|
||||
@import 'partials/pricing-banner';
|
||||
|
||||
@@ -60,6 +60,13 @@
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__illustration {
|
||||
display: block;
|
||||
@@ -144,6 +151,12 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__illustration {
|
||||
&::before {
|
||||
display: none;
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.pricing-banner {
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 2;
|
||||
padding: $spacer * 2.5 $spacer * 1.5;
|
||||
border-radius: $spacer;
|
||||
background:
|
||||
linear-gradient(270deg, rgba(0, 0, 0, 0.49) 0%, rgba(0, 0, 0, 0.00) 20.54%, rgba(0, 0, 0, 0.00) 58.01%, rgba(0, 0, 0, 0.41) 100%),
|
||||
radial-gradient(185.23% 100% at 100% 4.55%, rgba(87, 0, 201, 0.40) 5.03%, rgba(36, 0, 91, 0.12) 25.96%, rgba(0, 0, 0, 0.00) 78.45%),
|
||||
radial-gradient(90.18% 121.21% at 50% 7.58%, rgba(0, 0, 0, 0.00) 9.46%, rgba(9, 14, 26, 0.08) 45.41%, rgba(0, 24, 72, 0.24) 68.94%, rgba(0, 64, 161, 0.40) 78.19%),
|
||||
$neutral-10;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: pxToRem(675);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
margin-bottom: 0;
|
||||
color: $neutral-90;
|
||||
}
|
||||
|
||||
&__button {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
max-width: pxToRem(400);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
|
||||
&__content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 2.5 $spacer * 4;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
}
|
||||
|
||||
&__button {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
|
||||
a {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-bento-cards {
|
||||
background-color: $neutral-94;
|
||||
padding-bottom: $spacer * 4;
|
||||
|
||||
&__cards {
|
||||
gap: $spacer * 2;
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
img {
|
||||
max-width: pxToRem(255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding-bottom: 0;
|
||||
|
||||
&-title {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: pxToRem(34);
|
||||
margin-bottom: pxToRem(12);
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: $spacer auto 0 auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-top: pxToRem(12);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__cards {
|
||||
justify-content: space-between;
|
||||
column-gap: 0;
|
||||
|
||||
& > div:nth-of-type(1),
|
||||
& > div:nth-of-type(3) {
|
||||
width: calc(25% - 3px);
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
& > div:nth-of-type(2) {
|
||||
width: calc(50% - 6px);
|
||||
}
|
||||
|
||||
& > div:nth-of-type(4),
|
||||
& > div:nth-of-type(5) {
|
||||
width: calc(50% - 3px);
|
||||
}
|
||||
}
|
||||
|
||||
&__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
padding-bottom: 0;
|
||||
|
||||
img {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-top: pxToRem(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
-35
@@ -1,35 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-features-link {
|
||||
background-color: $neutral-94;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: pxToRem(25);
|
||||
height: pxToRem(1);
|
||||
width: calc((100% - 820px) / 2);
|
||||
background-color: $neutral-90;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
background: url('/img/stars-pattern.png') $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2.5;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
margin-bottom: $spacer * 2;
|
||||
color: $neutral-70;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
min-width: $spacer * 12.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
padding: pxToRem(4) $spacer;
|
||||
border-radius: pxToRem(100);
|
||||
background-color: $neutral-20;
|
||||
|
||||
img {
|
||||
width: $spacer;
|
||||
height: $spacer;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
font-size: pxToRem(14);
|
||||
line-height: pxToRem(21);
|
||||
color: $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: -9px;
|
||||
width: 100%;
|
||||
height: pxToRem(114);
|
||||
background-image: url('/img/blurred/blurred-light-10.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 3.5;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 4;
|
||||
line-height: pxToRem(71);
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: pxToRem(730);
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin: 0 auto $spacer * 2 auto;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex-direction: row;
|
||||
margin-bottom: $spacer * 3.5;
|
||||
|
||||
.button {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
@use '../helpers/functions' as *;
|
||||
@use '../mixins/marketplaces' as marketplaces;
|
||||
|
||||
.qdrant-cloud-marketplaces {
|
||||
@include marketplaces.base(
|
||||
$spacer * 5,
|
||||
$spacer * 4,
|
||||
$spacer * 7.5,
|
||||
$spacer * 4,
|
||||
pxToRem(728),
|
||||
$spacer * 3.5,
|
||||
$spacer * 2.5,
|
||||
pxToRem(67),
|
||||
$spacer * 3
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@import 'qdrant-cloud-hero';
|
||||
@import 'qdrant-cloud-why-qdrant';
|
||||
@import 'qdrant-cloud-customers';
|
||||
@import 'qdrant-cloud-capabilities';
|
||||
@import 'qdrant-cloud-dev-experience';
|
||||
@import 'qdrant-cloud-resources';
|
||||
@import 'qdrant-cloud-faq';
|
||||
+282
@@ -0,0 +1,282 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.qdrant-cloud-capabilities {
|
||||
padding-top: $spacer * 4;
|
||||
padding-bottom: $spacer * 4;
|
||||
background: $neutral-10;
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
margin-bottom: $spacer * 3;
|
||||
color: $neutral-80;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__tabs-sticky {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
top: pxToRem(60);
|
||||
padding-top: $spacer;
|
||||
background: $neutral-10;
|
||||
box-shadow: 0 $spacer * 2 $spacer * 1.5 rgba($neutral-10, .5);
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
width: 100vw;
|
||||
margin: 0 pxToRem(-16);
|
||||
padding: 0 $spacer;
|
||||
overflow-x: auto;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&-button {
|
||||
padding: $spacer * 0.5 pxToRem(28);
|
||||
border-radius: $spacer * 0.5;
|
||||
border: 0;
|
||||
background-color: $neutral-20;
|
||||
color: $neutral-70;
|
||||
flex-shrink: 0;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease;
|
||||
|
||||
&.active {
|
||||
background-color: $neutral-40;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: $neutral-98;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
&-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2.5;
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&-content {
|
||||
border-bottom: pxToRem(1) solid $neutral-20;
|
||||
}
|
||||
|
||||
&-header {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 1.5;
|
||||
border: pxToRem(1) solid $neutral-20;
|
||||
|
||||
&-overlay1,
|
||||
&-overlay2,
|
||||
&-overlay3 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&-overlay1 {
|
||||
background-image: url('/img/qdrant-cloud/background/stars-mobile.svg');
|
||||
mix-blend-mode: color-dodge;
|
||||
}
|
||||
|
||||
&-overlay2 {
|
||||
background-image: var(--overlay-mobile);
|
||||
}
|
||||
|
||||
&-overlay3 {
|
||||
background-image: url('/img/qdrant-cloud/background/texture-mobile.svg');
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
position: relative;
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
color: $neutral-90;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-description {
|
||||
position: relative;
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: $neutral-90;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-left: pxToRem(1) solid $neutral-20;
|
||||
margin-bottom: pxToRem(-1);
|
||||
}
|
||||
|
||||
&-feature {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer * 2 $spacer * 1.5;
|
||||
border-right: pxToRem(1) solid $neutral-20;
|
||||
border-bottom: pxToRem(1) solid $neutral-20;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg, rgba(14, 20, 36, 0.00) 0%, $neutral-20 100%);
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: pxToRem(20);
|
||||
width: pxToRem(20);
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: $neutral-90;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-70;
|
||||
margin-top: math.div($spacer, 4);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
&__tabs {
|
||||
margin: 0 calc((100vw - pxToRem(508)) / 2 * -1);
|
||||
padding: 0 calc((100vw - pxToRem(508)) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__tabs {
|
||||
margin: 0 calc((100vw - pxToRem(688)) / 2 * -1);
|
||||
padding: 0 calc((100vw - pxToRem(688)) / 2);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
&-feature {
|
||||
width: calc(100% / 2);
|
||||
min-height: pxToRem(176);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
max-width: pxToRem(740);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
}
|
||||
|
||||
&__tabs-sticky {
|
||||
top: pxToRem(52);
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
margin: 0 calc((100vw - pxToRem(928)) / 2 * -1);
|
||||
padding: 0 calc((100vw - pxToRem(928)) / 2);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
&-container {
|
||||
gap: $spacer * 4;
|
||||
margin-top: $spacer * 4;
|
||||
}
|
||||
|
||||
&-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 4 $spacer * 1.5;
|
||||
|
||||
&-overlay1 {
|
||||
background-image: url('/img/qdrant-cloud/background/stars.svg');
|
||||
mix-blend-mode: color-dodge;
|
||||
}
|
||||
|
||||
&-overlay2 {
|
||||
background-image: var(--overlay-desktop);
|
||||
}
|
||||
|
||||
&-overlay3 {
|
||||
background-image: url('/img/qdrant-cloud/background/texture.svg');
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
max-width: pxToRem(460);
|
||||
}
|
||||
|
||||
&-description {
|
||||
max-width: pxToRem(400);
|
||||
}
|
||||
|
||||
&-feature {
|
||||
width: calc(100% / 3);
|
||||
min-height: pxToRem(176);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&__tabs {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
padding: pxToRem(3);
|
||||
border-radius: pxToRem(12);
|
||||
border: pxToRem(1) solid transparent;
|
||||
background-image:
|
||||
linear-gradient($neutral-20, $neutral-20),
|
||||
linear-gradient(180deg, $neutral-30 0%, #141B2E 100%);
|
||||
background-origin: border-box;
|
||||
background-clip: padding-box, border-box;
|
||||
|
||||
&-button {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-customers {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__label {
|
||||
margin-bottom: $spacer;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-30;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__card {
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 3.5;
|
||||
padding: $spacer * 2;
|
||||
|
||||
&:hover {
|
||||
box-shadow:
|
||||
0 76px 21px 0 rgba(22, 30, 51, 0.00),
|
||||
0 49px 20px 0 rgba(22, 30, 51, 0.01),
|
||||
0 28px 17px 0 rgba(22, 30, 51, 0.05),
|
||||
0 12px 12px 0 rgba(22, 30, 51, 0.09),
|
||||
0 3px 7px 0 rgba(22, 30, 51, 0.10);
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 3;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
border-bottom: pxToRem(1) solid $neutral-90;
|
||||
|
||||
span {
|
||||
color: $primary-50;
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
margin-top: $spacer;
|
||||
margin-bottom: 0;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&-category, &-label {
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-40;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-category {
|
||||
padding-bottom: $spacer * 0.5;
|
||||
border-bottom: pxToRem(1) solid $neutral-90;
|
||||
}
|
||||
|
||||
&-label {
|
||||
margin-top: $spacer * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
+396
@@ -0,0 +1,396 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.qdrant-cloud-dev-experience {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__label {
|
||||
margin-bottom: $spacer;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-30;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
// The whole card is a link; keep the card itself looking unchanged on hover
|
||||
// and let only the arrow link switch to its hover state.
|
||||
&.card[href]:hover {
|
||||
border-top-color: $neutral-90;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin: $spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $spacer * 0.5;
|
||||
border-radius: $spacer * 0.5;
|
||||
background-color: $neutral-94;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
|
||||
&-button {
|
||||
width: 100%;
|
||||
padding: pxToRem(12) math.div($spacer, 4);
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-radius: $spacer * 0.5;
|
||||
transition:
|
||||
background-color 0.25s ease,
|
||||
color 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
|
||||
&.active {
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-100;
|
||||
font-weight: $font-weight-semibold;
|
||||
box-shadow:
|
||||
0 11px 3px 0 rgba(0, 0, 0, 0.00),
|
||||
0 7px 3px 0 rgba(0, 0, 0, 0.01),
|
||||
0 4px 2px 0 rgba(0, 0, 0, 0.05),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.09),
|
||||
0 0 1px 0 rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
&-container {
|
||||
padding: $spacer;
|
||||
border: pxToRem(1) solid $neutral-90;
|
||||
background-color: $neutral-98;
|
||||
border-radius: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: none;
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__slide {
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $spacer;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&-code-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
|
||||
&-code-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.qdrant-cloud-dev-experience__code {
|
||||
height: pxToRem(620);
|
||||
|
||||
&-content {
|
||||
height: pxToRem(580);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: pxToRem(302);
|
||||
border-radius: $spacer;
|
||||
background-color: $neutral-100;
|
||||
border: pxToRem(1) solid $neutral-90;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: $spacer * 2.5;
|
||||
padding: 0 $spacer;
|
||||
background-color: $neutral-100;
|
||||
border-bottom: pxToRem(1) solid $neutral-90;
|
||||
}
|
||||
|
||||
&-window-buttons {
|
||||
display: flex;
|
||||
gap: pxToRem(7);
|
||||
|
||||
div {
|
||||
height: pxToRem(8);
|
||||
width: pxToRem(8);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__close {
|
||||
background-color: $error-50;
|
||||
}
|
||||
|
||||
&__minimize {
|
||||
background-color: $neutral-60;
|
||||
}
|
||||
|
||||
&__expand {
|
||||
background-color: $success-50;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
height: pxToRem(262);
|
||||
margin: 0 math.div($spacer, 4);
|
||||
padding: pxToRem(28) pxToRem(20) pxToRem(28) pxToRem(28);
|
||||
background: $neutral-98;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
word-break: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
width: calc(100% - ($spacer * 1.5));
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
white-space: pre-wrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
|
||||
.line {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
color: #7D8B99;
|
||||
}
|
||||
|
||||
.s2, .nb {
|
||||
color: #2F9C0A;
|
||||
}
|
||||
|
||||
.k, .kn {
|
||||
color: #A04900;
|
||||
}
|
||||
|
||||
.mi {
|
||||
color: $error-50;
|
||||
}
|
||||
|
||||
.o, .kc {
|
||||
color: #A67F59;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: pxToRem(7);
|
||||
border: pxToRem(1) solid $neutral-90;
|
||||
border-radius: math.div($spacer, 4);
|
||||
background: $neutral-98;
|
||||
color: $neutral-70;
|
||||
|
||||
svg {
|
||||
height: pxToRem(14);
|
||||
width: pxToRem(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
&__slide {
|
||||
&-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__cards {
|
||||
margin-bottom: $spacer * 4;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
&-button {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__slide {
|
||||
&-header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-title {
|
||||
max-width: pxToRem(330);
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
}
|
||||
|
||||
&-description {
|
||||
max-width: pxToRem(412);
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&-code-list {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: $spacer;
|
||||
}
|
||||
|
||||
&-image {
|
||||
padding: $spacer;
|
||||
}
|
||||
|
||||
&-code-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $spacer;
|
||||
|
||||
.qdrant-cloud-dev-experience__code {
|
||||
width: auto;
|
||||
min-width: pxToRem(900);
|
||||
height: pxToRem(648);
|
||||
|
||||
&-content {
|
||||
height: pxToRem(608);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
height: pxToRem(440);
|
||||
|
||||
&-content {
|
||||
height: pxToRem(400);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+79
@@ -0,0 +1,79 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-faq {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
&-button {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: $spacer;
|
||||
border: 0;
|
||||
background: none;
|
||||
text-align: left;
|
||||
color: $neutral-30;
|
||||
|
||||
&.is-active {
|
||||
color: $neutral-20;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: $spacer * 0.5;
|
||||
height: $spacer * 0.5;
|
||||
width: $spacer * 0.5;
|
||||
border-radius: 50%;
|
||||
background-color: $primary-50;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__panels {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
|
||||
&.is-active {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
margin-bottom: $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__nav {
|
||||
&-button {
|
||||
width: pxToRem(254);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
@use 'sass:math';
|
||||
|
||||
.qdrant-cloud-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: $neutral-10;
|
||||
|
||||
&__label {
|
||||
margin-bottom: $spacer * 1.5;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-80;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h4-font-size;
|
||||
line-height: $spacer * 3;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-98;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(12);
|
||||
flex-wrap: wrap;
|
||||
margin-top: $spacer * 2.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: math.div($spacer, 4);
|
||||
color: $neutral-70;
|
||||
font-size: $font-size-xs;
|
||||
line-height: pxToRem(18);
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__customers {
|
||||
margin-top: $spacer * 2.5;
|
||||
|
||||
&-title {
|
||||
margin-bottom: $spacer * 2.5;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-80;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&-logo {
|
||||
width: pxToRem(122);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
height: $spacer * 2.5;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(53);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
max-width: pxToRem(524);
|
||||
}
|
||||
|
||||
&__features {
|
||||
margin-top: $spacer * 5;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: $spacer * 5;
|
||||
height: pxToRem(540);
|
||||
|
||||
&-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__customers {
|
||||
&-title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-list {
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 2 $spacer * 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-resources {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__label {
|
||||
margin-bottom: $spacer;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-30;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__card {
|
||||
align-items: flex-start;
|
||||
|
||||
&-icon {
|
||||
height: $spacer * 1.5;
|
||||
width: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: $h6-font-size;
|
||||
line-height: $spacer * 2;
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
&-link {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 7.5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__card {
|
||||
&-description {
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
@use '../../helpers/functions' as *;
|
||||
|
||||
.qdrant-cloud-why-qdrant {
|
||||
padding-top: $spacer * 2.5;
|
||||
padding-bottom: $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__label {
|
||||
margin-bottom: $spacer;
|
||||
font-family: 'Geist Mono', $font-family-monospace;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-s;
|
||||
line-height: $line-height-sm;
|
||||
color: $neutral-30;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $h5-font-size;
|
||||
line-height: pxToRem(42);
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: $spacer * 2.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: none;
|
||||
|
||||
&-mobile {
|
||||
width: 100%;
|
||||
margin-bottom: $spacer * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 2;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
&-title {
|
||||
font-size: $font-size-xl;
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: $spacer * 0.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-description {
|
||||
font-size: $font-size-md;
|
||||
line-height: $spacer * 1.5;
|
||||
margin-bottom: 0;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
max-width: pxToRem(400);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: $spacer * 5;
|
||||
padding-bottom: $spacer * 7.5;
|
||||
|
||||
&__title {
|
||||
font-size: $h3-font-size;
|
||||
line-height: pxToRem(52);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: $font-size-l;
|
||||
line-height: $line-height-lg;
|
||||
margin-bottom: $spacer * 5;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
&-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
padding-left: $spacer * 3.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: auto;
|
||||
margin-left: $spacer * 3.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,53 +2,118 @@ import ClipboardJS from 'clipboard';
|
||||
import Popover from 'bootstrap/js/src/popover.js';
|
||||
|
||||
(function () {
|
||||
let codeBlocks = document.querySelectorAll('.highlight > pre');
|
||||
|
||||
const codeClipboard = new ClipboardJS('.copy-code');
|
||||
let codeClipboard = null;
|
||||
const popoversMap = {};
|
||||
|
||||
const initMarkupMode = (root = document) => {
|
||||
root.querySelectorAll('.js-copy-code').forEach((wrap) => {
|
||||
if (wrap.dataset.copyCodeInitialized) return;
|
||||
|
||||
// adds copy buttons with specific id for each code block
|
||||
for (let block of codeBlocks) {
|
||||
const id = btoa(Math.random().toString()).substr(10, 5);
|
||||
block.id = id;
|
||||
const btnCopy = wrap.querySelector('.js-copy-code__copy');
|
||||
const btnDone = wrap.querySelector('.js-copy-code__done');
|
||||
const codeEl = wrap.querySelector('.highlight code');
|
||||
|
||||
const icon = document.createElement('i');
|
||||
icon.role = 'tooltip';
|
||||
icon.title = 'Copy to clipboard';
|
||||
if (!btnCopy || !btnDone || !codeEl) return;
|
||||
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.type = 'button';
|
||||
copyBtn.role = 'button';
|
||||
copyBtn.classList.add('d-inline-block', 'copy-code', 'lead');
|
||||
copyBtn.id = 'copy-popover-' + id;
|
||||
copyBtn.dataset.clipboardTarget = '#' + id;
|
||||
copyBtn.appendChild(icon);
|
||||
block.after(copyBtn);
|
||||
wrap.dataset.copyCodeInitialized = 'true';
|
||||
|
||||
popoversMap[id] = new Popover(copyBtn, {
|
||||
content: 'Text copied!',
|
||||
placement: 'left',
|
||||
trigger: 'manual',
|
||||
template:
|
||||
'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-body"></div></div>',
|
||||
btnCopy.type = 'button';
|
||||
btnDone.type = 'button';
|
||||
|
||||
const copyDisplay =
|
||||
getComputedStyle(btnCopy).display === 'none'
|
||||
? 'inline-flex'
|
||||
: getComputedStyle(btnCopy).display;
|
||||
const doneDisplay =
|
||||
getComputedStyle(btnDone).display === 'none'
|
||||
? copyDisplay
|
||||
: getComputedStyle(btnDone).display;
|
||||
|
||||
btnDone.style.display = 'none';
|
||||
|
||||
btnCopy.addEventListener('click', async () => {
|
||||
const text = codeEl.textContent || '';
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
|
||||
btnCopy.style.display = 'none';
|
||||
btnDone.style.display = doneDisplay;
|
||||
|
||||
setTimeout(() => {
|
||||
btnDone.style.display = 'none';
|
||||
btnCopy.style.display = copyDisplay;
|
||||
}, 1200);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
codeClipboard.on('success', function (e) {
|
||||
const targetId = e.trigger.dataset.clipboardTarget.slice(1);
|
||||
const initAutoInjectMode = (root = document) => {
|
||||
root.querySelectorAll('.highlight > pre').forEach((block) => {
|
||||
if (block.closest('.js-copy-code')) return;
|
||||
if (block.closest('.without-copy-code')) return;
|
||||
if (block.dataset.copyCodeInitialized) return;
|
||||
if (block.nextElementSibling?.classList.contains('copy-code')) return;
|
||||
|
||||
const popover = popoversMap[targetId];
|
||||
popover.show();
|
||||
block.dataset.copyCodeInitialized = 'true';
|
||||
|
||||
const t = setTimeout(() => {
|
||||
popover.hide();
|
||||
clearTimeout(t);
|
||||
}, 2000);
|
||||
e.clearSelection();
|
||||
});
|
||||
const id = btoa(Math.random().toString()).substr(10, 5);
|
||||
block.id = id;
|
||||
|
||||
codeClipboard.on('error', function (e) {
|
||||
console.error('Action:', e.action);
|
||||
console.error('Trigger:', e.trigger);
|
||||
});
|
||||
}).call(this);
|
||||
const icon = document.createElement('i');
|
||||
icon.role = 'tooltip';
|
||||
icon.title = 'Copy to clipboard';
|
||||
|
||||
const copyBtn = document.createElement('button');
|
||||
copyBtn.type = 'button';
|
||||
copyBtn.role = 'button';
|
||||
copyBtn.classList.add('d-inline-block', 'copy-code', 'lead');
|
||||
copyBtn.id = 'copy-popover-' + id;
|
||||
copyBtn.dataset.clipboardTarget = '#' + id;
|
||||
copyBtn.appendChild(icon);
|
||||
block.after(copyBtn);
|
||||
|
||||
popoversMap[id] = new Popover(copyBtn, {
|
||||
content: 'Text copied!',
|
||||
placement: 'left',
|
||||
trigger: 'manual',
|
||||
template:
|
||||
'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-body"></div></div>',
|
||||
});
|
||||
});
|
||||
|
||||
if (!codeClipboard) {
|
||||
codeClipboard = new ClipboardJS('.copy-code');
|
||||
|
||||
codeClipboard.on('success', (e) => {
|
||||
const targetId = e.trigger.dataset.clipboardTarget.slice(1);
|
||||
const popover = popoversMap[targetId];
|
||||
|
||||
if (!popover) return;
|
||||
|
||||
popover.show();
|
||||
|
||||
setTimeout(() => {
|
||||
popover.hide();
|
||||
}, 2000);
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
|
||||
codeClipboard.on('error', (e) => {
|
||||
console.error('Action:', e.action);
|
||||
console.error('Trigger:', e.trigger);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const initCopyCode = (root = document) => {
|
||||
initMarkupMode(root);
|
||||
initAutoInjectMode(root);
|
||||
};
|
||||
|
||||
initCopyCode(document);
|
||||
}).call(this);
|
||||
@@ -0,0 +1,167 @@
|
||||
// Capabilities
|
||||
(function initCapabilities() {
|
||||
const stickyWrap = document.querySelector('.qdrant-cloud-capabilities__tabs-sticky');
|
||||
const tabsWrap = document.querySelector('[data-capabilities-tabs]');
|
||||
const buttons = [...document.querySelectorAll('[data-capabilities-tab]')];
|
||||
const panels = [...document.querySelectorAll('[data-capabilities-panel]')];
|
||||
|
||||
if (!tabsWrap || !buttons.length || !panels.length) return;
|
||||
|
||||
const EXTRA_OFFSET = 64;
|
||||
const HYSTERESIS = 24;
|
||||
|
||||
let currentIndex = -1;
|
||||
let lockedIndex = null;
|
||||
let unlockTimer = null;
|
||||
|
||||
const getOffset = () =>
|
||||
(stickyWrap ? stickyWrap.offsetHeight : tabsWrap.offsetHeight) + EXTRA_OFFSET;
|
||||
|
||||
const scrollButtonIntoViewX = (btn) => {
|
||||
if (!btn || tabsWrap.scrollWidth <= tabsWrap.clientWidth) return;
|
||||
|
||||
const wrapRect = tabsWrap.getBoundingClientRect();
|
||||
const btnRect = btn.getBoundingClientRect();
|
||||
const nextLeft =
|
||||
tabsWrap.scrollLeft +
|
||||
(btnRect.left - wrapRect.left) -
|
||||
(wrapRect.width - btnRect.width) / 2;
|
||||
|
||||
tabsWrap.scrollTo({ left: nextLeft, behavior: 'auto' });
|
||||
};
|
||||
|
||||
const setActive = (index, { scrollTabs = false } = {}) => {
|
||||
if (index < 0 || index >= buttons.length) return;
|
||||
if (index === currentIndex) return;
|
||||
|
||||
currentIndex = index;
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
if (scrollTabs) {
|
||||
scrollButtonIntoViewX(buttons[index]);
|
||||
}
|
||||
};
|
||||
|
||||
const getCurrentIndex = () => {
|
||||
const line = getOffset() + HYSTERESIS;
|
||||
let current = 0;
|
||||
|
||||
panels.forEach((panel, index) => {
|
||||
if (panel.getBoundingClientRect().top <= line) {
|
||||
current = index;
|
||||
}
|
||||
});
|
||||
|
||||
return current;
|
||||
};
|
||||
|
||||
const clearLock = () => {
|
||||
lockedIndex = null;
|
||||
if (unlockTimer) {
|
||||
clearTimeout(unlockTimer);
|
||||
unlockTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const lockTo = (index) => {
|
||||
lockedIndex = index;
|
||||
setActive(index, { scrollTabs: true });
|
||||
|
||||
if (unlockTimer) clearTimeout(unlockTimer);
|
||||
unlockTimer = setTimeout(() => {
|
||||
lockedIndex = null;
|
||||
unlockTimer = null;
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
if (lockedIndex !== null) return;
|
||||
setActive(getCurrentIndex(), { scrollTabs: true });
|
||||
};
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const index = Number(btn.dataset.capabilitiesTab);
|
||||
const panel = panels[index];
|
||||
if (!panel) return;
|
||||
|
||||
lockTo(index);
|
||||
|
||||
const top = window.scrollY + panel.getBoundingClientRect().top - getOffset();
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('scrollend', () => {
|
||||
if (lockedIndex === null) return;
|
||||
clearLock();
|
||||
setActive(currentIndex, { scrollTabs: true });
|
||||
});
|
||||
|
||||
if (!('onscrollend' in window)) {
|
||||
let idleTimer = null;
|
||||
window.addEventListener('scroll', () => {
|
||||
if (lockedIndex === null) return;
|
||||
clearTimeout(idleTimer);
|
||||
idleTimer = setTimeout(() => {
|
||||
clearLock();
|
||||
}, 120);
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onScroll);
|
||||
onScroll();
|
||||
})();
|
||||
|
||||
// Dev-experience
|
||||
(function initDevExperience() {
|
||||
const buttons = [...document.querySelectorAll('[data-dev-experience-tab]')];
|
||||
const panels = [...document.querySelectorAll('[data-dev-experience-panel]')];
|
||||
|
||||
if (!buttons.length || !panels.length) return;
|
||||
|
||||
const setActive = (index) => {
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.classList.toggle('is-active', i === index);
|
||||
});
|
||||
};
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const index = Number(btn.dataset.devExperienceTab);
|
||||
setActive(index);
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
||||
// FAQ
|
||||
(function initFaq() {
|
||||
const buttons = [...document.querySelectorAll('[data-faq-category]')];
|
||||
const panels = [...document.querySelectorAll('[data-faq-panel]')];
|
||||
|
||||
if (!buttons.length || !panels.length) return;
|
||||
|
||||
const setActiveCategory = (index) => {
|
||||
buttons.forEach((btn, i) => {
|
||||
btn.classList.toggle('is-active', i === index);
|
||||
});
|
||||
|
||||
panels.forEach((panel, i) => {
|
||||
panel.classList.toggle('is-active', i === index);
|
||||
});
|
||||
};
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
const index = Number(btn.dataset.faqCategory);
|
||||
setActiveCategory(index);
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user