mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-02 01:18:30 +02:00
new pricing pages
This commit is contained in:
trean
@@ -25,6 +25,10 @@
|
||||
@import 'partials/qdrant-pricing-doors-a';
|
||||
@import 'partials/qdrant-pricing-doors-b';
|
||||
@import 'partials/qdrant-pricing-marketplaces';
|
||||
@import 'partials/qdrant-pricing-features';
|
||||
@import 'partials/qdrant-pricing-faq';
|
||||
@import 'partials/qdrant-pricing-comparison';
|
||||
@import 'partials/qdrant-pricing-cta';
|
||||
@import 'partials/pricing-door';
|
||||
@import 'partials/get-contacted-with-question';
|
||||
@import 'partials/private-cloud-hero';
|
||||
|
||||
+134
-30
@@ -1,45 +1,149 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-calculator {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: $spacer * 5 0;
|
||||
background-color: $neutral-94;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, $neutral-90 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $neutral-90 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, $neutral-94 0%, transparent 30%, transparent 70%, $neutral-94 100%),
|
||||
linear-gradient(to right, $neutral-94 0%, transparent 15%, transparent 85%, $neutral-94 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 1.5 $spacer * 3.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
max-width: pxToRem(600);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__link-prefix {
|
||||
color: $neutral-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: pxToRem(29.5);
|
||||
height: pxToRem(1);
|
||||
width: calc((100% - 453px) / 2);
|
||||
background-color: $neutral-30;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0;
|
||||
|
||||
&__container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: $spacer * 1.5 $spacer * 1.25;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+405
@@ -0,0 +1,405 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-comparison-hero {
|
||||
position: relative;
|
||||
padding: $spacer * 5 0 $spacer * 3.5;
|
||||
background-color: $neutral-94;
|
||||
background-image: linear-gradient(180deg, rgba(225, 229, 240, 0) 8.3%, #e1e5f0 52.24%, rgba(225, 229, 240, 0) 112.78%);
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(180, 186, 204, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(180, 186, 204, 0.3) 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 $spacer;
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 0 $spacer;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 3 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
&__badge {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qdrant-pricing-comparison {
|
||||
padding: 0 0 $spacer * 5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__table {
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.qdrant-pricing-comparison__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 1.5 $spacer * 2 $spacer * 1.25;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: pxToRem(160);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 4;
|
||||
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.qdrant-pricing-comparison__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section-header {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.qdrant-pricing-comparison__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-comparison__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].qdrant-pricing-comparison__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-cta {
|
||||
position: relative;
|
||||
padding: $spacer * 7.5 0 $spacer * 7;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/img/backgrounds/stars-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&__globe {
|
||||
position: absolute;
|
||||
top: pxToRem(-50);
|
||||
right: pxToRem(-200);
|
||||
width: pxToRem(800);
|
||||
height: pxToRem(800);
|
||||
background-image: url('/img/backgrounds/globe-grid.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: pxToRem(500);
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: pxToRem(40);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 5 0;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__globe {
|
||||
right: pxToRem(-300);
|
||||
width: pxToRem(600);
|
||||
height: pxToRem(600);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 5 0 $spacer * 3;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__globe {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
height: pxToRem(300);
|
||||
margin-top: $spacer * 3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
+321
-15
@@ -1,32 +1,338 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-b {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
padding: 0 0 $spacer * 2;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: 4px;
|
||||
margin-bottom: $spacer * 2;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
min-width: pxToRem(160);
|
||||
height: pxToRem(40);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neutral-94, 0.5);
|
||||
}
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(30);
|
||||
width: 100%;
|
||||
max-width: pxToRem(1110);
|
||||
margin: 0 auto;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
&__door {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: none;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
&:first-child {
|
||||
border-radius: pxToRem(8) 0 0 pxToRem(8);
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: calc((100% / 3) - 20px);
|
||||
&:last-child {
|
||||
border-right: 1px solid $neutral-90;
|
||||
border-radius: 0 pxToRem(8) pxToRem(8) 0;
|
||||
}
|
||||
|
||||
.pricing-door__description {
|
||||
height: pxToRem(42);
|
||||
&--paid {
|
||||
border: 1px solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(135);
|
||||
|
||||
&:has(.qdrant-pricing-doors-b__badge) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(6);
|
||||
padding: pxToRem(4) $spacer * 0.5;
|
||||
background-color: $neutral-94;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: pxToRem(20);
|
||||
height: pxToRem(20);
|
||||
}
|
||||
}
|
||||
|
||||
&__pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__pricing-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__pricing-note {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__target {
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(80);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(168);
|
||||
}
|
||||
|
||||
&__feature-group-label {
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__check-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__marketplace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__marketplace-label {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__marketplace-logos {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__marketplace-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(32);
|
||||
height: pxToRem(32);
|
||||
border: 0.667px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: pxToRem(3);
|
||||
background-color: $neutral-100;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__contact-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cta {
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&__cta-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: pxToRem(40);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
border-radius: pxToRem(8);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--outlined {
|
||||
color: $neutral-20;
|
||||
background-color: transparent;
|
||||
border: 1px solid $neutral-60;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neutral-90, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&--contained {
|
||||
color: $neutral-100;
|
||||
background: linear-gradient(180deg, $primary-50 0%, #BE003A 100%);
|
||||
border: none;
|
||||
box-shadow: inset 0px 2px 1px 0px #FF516B;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 2;
|
||||
|
||||
&__doors {
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__door {
|
||||
border-radius: pxToRem(8);
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: 1px solid $neutral-90;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
border-radius: pxToRem(8);
|
||||
border-right: 1px solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__target,
|
||||
&__features {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 0 $spacer * 1.25 $spacer * 2;
|
||||
|
||||
&__tabs {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-faq {
|
||||
padding: $spacer * 5 0 $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__questions {
|
||||
max-width: pxToRem(800);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid $neutral-80;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $neutral-80;
|
||||
}
|
||||
|
||||
&--active {
|
||||
.qdrant-pricing-faq__answer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qdrant-pricing-faq__icon-plus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-faq__icon-minus {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 2 $spacer * 2.5;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $neutral-98;
|
||||
}
|
||||
}
|
||||
|
||||
&__question-text {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__icon-plus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__icon-minus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__answer {
|
||||
display: none;
|
||||
padding: 0 $spacer * 2.5 $spacer * 2.5 $spacer * 2.5;
|
||||
}
|
||||
|
||||
&__answer-text {
|
||||
margin: 0;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-40;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 4 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 3;
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__question {
|
||||
padding: $spacer * 1.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__question-text {
|
||||
font-size: pxToRem(18);
|
||||
}
|
||||
|
||||
&__answer {
|
||||
padding: 0 $spacer * 1.5 $spacer * 1.5 $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__answer-text {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: pxToRem(40);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__questions {
|
||||
margin: 0 $spacer * 1.25;
|
||||
}
|
||||
|
||||
&__question {
|
||||
padding: $spacer * 1.5 0;
|
||||
}
|
||||
|
||||
&__question-text {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__answer {
|
||||
padding: 0 0 $spacer * 1.5 0;
|
||||
}
|
||||
|
||||
&__answer-text {
|
||||
font-size: pxToRem(14);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-features {
|
||||
padding: $spacer * 2.5 0 $spacer * 7.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $spacer * 3.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: pxToRem(40);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
padding: pxToRem(4);
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
|
||||
&:hover:not(&--active) {
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
border-radius: pxToRem(8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-section {
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
background-color: #f5f8ff;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
border-top-left-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&-rows {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
.qdrant-pricing-features__chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__chevron {
|
||||
color: $neutral-20;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__table-body {
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(200);
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(14);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
border-right: 0.5px solid $neutral-80;
|
||||
text-align: center;
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&--tier {
|
||||
padding: $spacer $spacer * 2;
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.2px;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-98;
|
||||
border-top: 0.5px solid $neutral-80;
|
||||
border-left: 0.5px solid $neutral-80;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
}
|
||||
|
||||
&--highlight {
|
||||
background-color: #f5f8ff;
|
||||
}
|
||||
|
||||
&--cta {
|
||||
padding: $spacer * 1.5 $spacer * 2 $spacer * 1.25;
|
||||
background-color: $neutral-98;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
.button {
|
||||
width: pxToRem(160);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__check {
|
||||
color: $secondary-blue-50;
|
||||
}
|
||||
|
||||
&__x {
|
||||
color: $neutral-60;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: pxToRem(14);
|
||||
color: $neutral-30;
|
||||
|
||||
&--bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__compare {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 2;
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: pxToRem(900);
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: pxToRem(160);
|
||||
|
||||
&--feature {
|
||||
min-width: pxToRem(260);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 2.5 0 $spacer * 4;
|
||||
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__tier-tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
padding: pxToRem(4);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__tier-tab {
|
||||
flex: 1;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: pxToRem(8);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__table {
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
&__table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__table-header,
|
||||
&__table-row,
|
||||
&__table-footer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__table-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__table-cell {
|
||||
min-width: 0;
|
||||
|
||||
&[data-tier-col] {
|
||||
display: none;
|
||||
|
||||
&.qdrant-pricing-features__table-cell--mobile-active {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
width: pxToRem(144);
|
||||
}
|
||||
}
|
||||
|
||||
&--feature {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__table-section-header {
|
||||
border-top-left-radius: pxToRem(8);
|
||||
border-top-right-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-footer {
|
||||
.qdrant-pricing-features__table-cell--feature {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.qdrant-pricing-features__table-cell--cta {
|
||||
width: 100%;
|
||||
|
||||
&[data-tier-col].qdrant-pricing-features__table-cell--mobile-active {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +1,148 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
position: relative;
|
||||
padding: $spacer * 5 0 $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer;
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: pxToRem(34);
|
||||
&__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 400px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(18, 80px);
|
||||
grid-template-rows: repeat(5, 80px);
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, $neutral-90 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $neutral-90 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba($neutral-94, 0) 0%, $neutral-94 100%),
|
||||
linear-gradient(to right, $neutral-94 0%, transparent 15%, transparent 85%, $neutral-94 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacer;
|
||||
background: linear-gradient(to right, rgba($neutral-94, 0) 8%, $neutral-94 50%, rgba($neutral-94, 0) 92%);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: pxToRem(57);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
&__button {
|
||||
min-width: pxToRem(166);
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.25;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 3 0 $spacer * 2.5;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0 $spacer * 2;
|
||||
|
||||
&__grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,6 +157,148 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
el.addEventListener('click', toggleAccordion);
|
||||
});
|
||||
|
||||
// Pricing FAQ accordion
|
||||
const pricingFaqItems = document.querySelectorAll('.qdrant-pricing-faq__item');
|
||||
pricingFaqItems.forEach((item) => {
|
||||
const question = item.querySelector('.qdrant-pricing-faq__question');
|
||||
if (question) {
|
||||
question.addEventListener('click', () => {
|
||||
item.classList.toggle('qdrant-pricing-faq__item--active');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Pricing features tabs (Managed / On-Premise)
|
||||
const featuresTabs = document.querySelectorAll('.qdrant-pricing-features__tab');
|
||||
featuresTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
featuresTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tab--active'));
|
||||
tab.classList.add('qdrant-pricing-features__tab--active');
|
||||
});
|
||||
});
|
||||
|
||||
// Pricing features mobile tier tabs
|
||||
function updateMobileTierColumns(activeTier) {
|
||||
const allTierCols = document.querySelectorAll('[data-tier-col]');
|
||||
allTierCols.forEach((col) => {
|
||||
col.classList.remove('qdrant-pricing-features__table-cell--mobile-active');
|
||||
});
|
||||
const activeCols = document.querySelectorAll(`[data-tier-col="${activeTier}"]`);
|
||||
activeCols.forEach((col) => {
|
||||
col.classList.add('qdrant-pricing-features__table-cell--mobile-active');
|
||||
});
|
||||
}
|
||||
|
||||
const tierTabs = document.querySelectorAll('.qdrant-pricing-features__tier-tab');
|
||||
if (tierTabs.length) {
|
||||
updateMobileTierColumns(tierTabs[0].dataset.tier);
|
||||
tierTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
tierTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tier-tab--active'));
|
||||
tab.classList.add('qdrant-pricing-features__tier-tab--active');
|
||||
updateMobileTierColumns(tab.dataset.tier);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Pricing features section collapse/expand
|
||||
document.querySelectorAll('.qdrant-pricing-features__table-section').forEach((section) => {
|
||||
const header = section.querySelector('.qdrant-pricing-features__table-section-header');
|
||||
const rows = section.querySelector('.qdrant-pricing-features__table-section-rows');
|
||||
if (!header || !rows) return;
|
||||
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const isCollapsed = section.classList.contains('qdrant-pricing-features__table-section--collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
section.classList.remove('qdrant-pricing-features__table-section--collapsed');
|
||||
} else {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
rows.style.maxHeight = '0px';
|
||||
section.classList.add('qdrant-pricing-features__table-section--collapsed');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
rows.addEventListener('transitionend', () => {
|
||||
if (!section.classList.contains('qdrant-pricing-features__table-section--collapsed')) {
|
||||
rows.style.maxHeight = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Pricing doors tabs
|
||||
const pricingDoorsTabs = document.querySelectorAll('.qdrant-pricing-doors-b__tab');
|
||||
const pricingDoorsContainers = document.querySelectorAll('[data-doors-tab]');
|
||||
pricingDoorsTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
pricingDoorsTabs.forEach((t) => t.classList.remove('qdrant-pricing-doors-b__tab--active'));
|
||||
tab.classList.add('qdrant-pricing-doors-b__tab--active');
|
||||
const targetTab = tab.dataset.tab;
|
||||
pricingDoorsContainers.forEach((container) => {
|
||||
container.classList.toggle('qdrant-pricing-doors-b__doors--hidden', container.dataset.doorsTab !== targetTab);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Pricing comparison mobile tier tabs
|
||||
function updateComparisonMobileTierColumns(activeTier) {
|
||||
const allTierCols = document.querySelectorAll('.qdrant-pricing-comparison [data-tier-col]');
|
||||
allTierCols.forEach((col) => {
|
||||
col.classList.remove('qdrant-pricing-comparison__table-cell--mobile-active');
|
||||
});
|
||||
const activeCols = document.querySelectorAll(`.qdrant-pricing-comparison [data-tier-col="${activeTier}"]`);
|
||||
activeCols.forEach((col) => {
|
||||
col.classList.add('qdrant-pricing-comparison__table-cell--mobile-active');
|
||||
});
|
||||
}
|
||||
|
||||
const comparisonTierTabs = document.querySelectorAll('.qdrant-pricing-comparison__tier-tab');
|
||||
if (comparisonTierTabs.length) {
|
||||
updateComparisonMobileTierColumns(comparisonTierTabs[0].dataset.tier);
|
||||
comparisonTierTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
comparisonTierTabs.forEach((t) => t.classList.remove('qdrant-pricing-comparison__tier-tab--active'));
|
||||
tab.classList.add('qdrant-pricing-comparison__tier-tab--active');
|
||||
updateComparisonMobileTierColumns(tab.dataset.tier);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Pricing comparison section collapse/expand
|
||||
document.querySelectorAll('.qdrant-pricing-comparison__table-section').forEach((section) => {
|
||||
const header = section.querySelector('.qdrant-pricing-comparison__table-section-header');
|
||||
const rows = section.querySelector('.qdrant-pricing-comparison__table-section-rows');
|
||||
if (!header || !rows) return;
|
||||
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const isCollapsed = section.classList.contains('qdrant-pricing-comparison__table-section--collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
section.classList.remove('qdrant-pricing-comparison__table-section--collapsed');
|
||||
} else {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
rows.style.maxHeight = '0px';
|
||||
section.classList.add('qdrant-pricing-comparison__table-section--collapsed');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
rows.addEventListener('transitionend', () => {
|
||||
if (!section.classList.contains('qdrant-pricing-comparison__table-section--collapsed')) {
|
||||
rows.style.maxHeight = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// scroll to anchors:
|
||||
let offset = DOCS_HEADER_OFFSET;
|
||||
|
||||
|
||||
@@ -1,16 +1,70 @@
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-calculator") }}
|
||||
<section class="qdrant-pricing-calculator">
|
||||
<div class="qdrant-pricing-calculator__background">
|
||||
<div class="qdrant-pricing-calculator__grid"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="qdrant-pricing-calculator__content col-12">
|
||||
<p class="qdrant-pricing-calculator__title">{{ .Params.titleFirstPart }}</p>
|
||||
<p class="qdrant-pricing-calculator__title">{{ .Params.titleSecondPart }}</p>
|
||||
<a
|
||||
class="qdrant-pricing-calculator__link link link_light link_xl align-self-start"
|
||||
href="{{ .Params.link.url }}"
|
||||
>
|
||||
{{ .Params.link.text }}
|
||||
</a>
|
||||
<div class="qdrant-pricing-calculator__container">
|
||||
<div class="qdrant-pricing-calculator__icon">
|
||||
<svg width="76" height="64" viewBox="0 0 76 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(14, 2) rotate(-15) skewX(15) scale(1, 0.97)">
|
||||
<rect width="48" height="60" rx="6" fill="url(#calc-base-grad)"/>
|
||||
<rect x="2" y="2" width="44" height="56" rx="4" fill="url(#calc-inner-grad)" stroke="white" stroke-width="0.5"/>
|
||||
<rect x="6" y="6" width="32" height="12" rx="2" fill="url(#calc-display-grad)"/>
|
||||
<rect x="6" y="22" width="6" height="5" rx="1" fill="url(#calc-btn-active)"/>
|
||||
<rect x="15" y="22" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="24" y="22" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="33" y="22" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="6" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="15" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="24" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="33" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="6" y="36" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="15" y="36" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="24" y="36" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="6" y="43" width="14" height="5" rx="1" fill="url(#calc-btn-active2)"/>
|
||||
<rect x="24" y="43" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="33" y="36" width="6" height="12" rx="1" fill="url(#calc-btn-active3)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="calc-base-grad" x1="24" y1="0" x2="24" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F0F3FA"/>
|
||||
<stop offset="1" stop-color="#D5DAE8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-inner-grad" x1="2" y1="2" x2="46" y2="58" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E1E5F0"/>
|
||||
<stop offset="1" stop-color="#FFFFFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-display-grad" x1="6" y1="6" x2="38" y2="18" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-btn-active" x1="6" y1="22" x2="12" y2="27" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-btn-active2" x1="6" y1="43" x2="20" y2="48" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-btn-active3" x1="33" y1="36" x2="39" y2="48" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="qdrant-pricing-calculator__content">
|
||||
<p class="qdrant-pricing-calculator__title">{{ .Params.title }}</p>
|
||||
<p class="qdrant-pricing-calculator__link-wrapper">
|
||||
<span class="qdrant-pricing-calculator__link-prefix">{{ .Params.linkPrefix }}</span>
|
||||
<a class="qdrant-pricing-calculator__link" href="{{ .Params.link.url }}">
|
||||
{{ .Params.link.text }}
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33337 8H12.6667M12.6667 8L8.00004 3.33334M12.6667 8L8.00004 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
{{ $context := . }}
|
||||
|
||||
<section class="qdrant-pricing-comparison-hero">
|
||||
<div class="qdrant-pricing-comparison-hero__background">
|
||||
<div class="qdrant-pricing-comparison-hero__grid"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-comparison-hero__content">
|
||||
{{ with .Params.badge }}
|
||||
<div class="qdrant-pricing-comparison-hero__badge">
|
||||
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.4 8.4C15.4 8.4 14.8 8.6 14.2 8.6C13.6 8.6 13 8.4 13 8.4V10.2C13 10.2 13.6 10.4 14.2 10.4C14.8 10.4 15.4 10.2 15.4 10.2V8.4Z" fill="#326CE5"/>
|
||||
<path d="M11 1C5.477 1 1 5.477 1 11C1 11.34 1.02 11.675 1.058 12.005C1.27 13.135 2.49 14 4 14H18C19.51 14 20.73 13.135 20.942 12.005C20.98 11.675 21 11.34 21 11C21 5.477 16.523 1 11 1Z" stroke="#326CE5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11 4V7L8.5 9.5" stroke="#326CE5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>{{ .text }}</span>
|
||||
<a href="{{ .url }}" class="qdrant-pricing-comparison-hero__badge-link">
|
||||
{{ .linkText }}
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33337 8H12.6667M12.6667 8L8.00004 3.33334M12.6667 8L8.00004 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="qdrant-pricing-comparison-hero__title">{{ .Params.title }}</h1>
|
||||
<p class="qdrant-pricing-comparison-hero__description">{{ .Params.description }}</p>
|
||||
<div class="qdrant-pricing-comparison-hero__actions">
|
||||
{{ with .Params.button }}
|
||||
<a href="{{ .url }}" class="button button_contained button_md">{{ .text }}</a>
|
||||
{{ end }}
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ .url }}" class="qdrant-pricing-comparison-hero__link">
|
||||
{{ .text }}
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33337 8H12.6667M12.6667 8L8.00004 3.33334M12.6667 8L8.00004 12.6667" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="qdrant-pricing-comparison">
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-comparison__tier-tabs">
|
||||
{{ range $index, $tier := .Params.tiers }}
|
||||
<button class="qdrant-pricing-comparison__tier-tab{{ if eq $index 0 }} qdrant-pricing-comparison__tier-tab--active{{ end }}" data-tier="{{ $tier.name | urlize }}">
|
||||
{{ $tier.name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-comparison__table">
|
||||
<div class="qdrant-pricing-comparison__table-header">
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--feature"></div>
|
||||
{{ range .Params.tiers }}
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--tier{{ if .highlight }} qdrant-pricing-comparison__table-cell--highlight{{ end }}" data-tier-col="{{ .name | urlize }}">
|
||||
{{ .name }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-comparison__table-body">
|
||||
{{ range .Params.sections }}
|
||||
<div class="qdrant-pricing-comparison__table-section">
|
||||
<div class="qdrant-pricing-comparison__table-section-header">
|
||||
<span class="qdrant-pricing-comparison__table-section-title">{{ .name }}</span>
|
||||
<svg class="qdrant-pricing-comparison__chevron" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12.5L10 7.5L15 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-section-rows">
|
||||
{{ range .features }}
|
||||
<div class="qdrant-pricing-comparison__table-row">
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--feature">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell" data-tier-col="oss">
|
||||
{{ if eq .oss true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .oss false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text">{{ .oss }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell" data-tier-col="free-tier">
|
||||
{{ if eq .free true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .free false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text">{{ .free }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--highlight" data-tier-col="paid-tier">
|
||||
{{ if eq .paid true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .paid false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text qdrant-pricing-comparison__text--bold">{{ .paid }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell" data-tier-col="premium-tier">
|
||||
{{ if eq .premium true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .premium false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text qdrant-pricing-comparison__text--bold">{{ .premium }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-comparison__table-footer">
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--feature"></div>
|
||||
{{ range $index, $cta := .Params.ctas }}
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--cta{{ if eq $index 2 }} qdrant-pricing-comparison__table-cell--highlight{{ end }}" data-tier-col="{{ index (slice "oss" "free-tier" "paid-tier" "premium-tier") $index }}">
|
||||
<a href="{{ $cta.url }}" class="button {{ if $cta.contained }}button_contained{{ else }}button_outlined{{ end }}">
|
||||
{{ $cta.text }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,20 @@
|
||||
<section class="qdrant-pricing-cta">
|
||||
<div class="qdrant-pricing-cta__background">
|
||||
<div class="qdrant-pricing-cta__stars"></div>
|
||||
<div class="qdrant-pricing-cta__globe"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-cta__content">
|
||||
<h2 class="qdrant-pricing-cta__title">{{ .Params.title }}</h2>
|
||||
<p class="qdrant-pricing-cta__subtitle">{{ .Params.subtitle }}</p>
|
||||
{{ with .Params.button }}
|
||||
<a href="{{ .url }}" class="button button_contained button_lg qdrant-pricing-cta__button">
|
||||
{{ .text }}
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.16669 10H15.8334M15.8334 10L10 4.16666M15.8334 10L10 15.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,12 +1,140 @@
|
||||
{{ $class := .class }}
|
||||
<section class="{{ $class }}">
|
||||
<div class="container">
|
||||
<div class="{{ $class }}__doors">
|
||||
{{ range $index, $element := .context.Params.cards }}
|
||||
<div class="{{ $class }}__door">
|
||||
{{ partial "pricing-door" (dict "context" .) }}
|
||||
</div>
|
||||
{{/* Navigation Tabs */}}
|
||||
<div class="{{ $class }}__tabs">
|
||||
{{ range .context.Params.tabs }}
|
||||
<button class="{{ $class }}__tab{{ if .active }} {{ $class }}__tab--active{{ end }}" data-tab="{{ .id }}">
|
||||
{{ .label }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Per-tab pricing tiers */}}
|
||||
{{ range .context.Params.tabs }}
|
||||
<div class="{{ $class }}__doors{{ if not .active }} {{ $class }}__doors--hidden{{ end }}" data-doors-tab="{{ .id }}">
|
||||
{{ range .tiers }}
|
||||
<div class="{{ $class }}__door {{ $class }}__door--{{ .id }}">
|
||||
{{/* Heading */}}
|
||||
<div class="{{ $class }}__heading">
|
||||
<h3 class="{{ $class }}__title">{{ .title }}</h3>
|
||||
{{ if .badge }}
|
||||
<div class="{{ $class }}__badge">
|
||||
<span>Runs on</span>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.94 0.56C9.82 0.57 9.7 0.6 9.59 0.65L4.82 3.03C4.7 3.09 4.59 3.18 4.51 3.29C4.43 3.4 4.37 3.53 4.34 3.67L3.16 8.99C3.14 9.11 3.13 9.24 3.15 9.37C3.17 9.49 3.22 9.61 3.28 9.72C3.3 9.74 3.31 9.77 3.33 9.79L6.64 13.51C6.73 13.62 6.84 13.71 6.96 13.77C7.08 13.83 7.22 13.87 7.36 13.87L12.67 13.87C12.81 13.87 12.94 13.84 13.07 13.77C13.19 13.71 13.3 13.62 13.39 13.51L16.7 9.79C16.78 9.68 16.84 9.55 16.87 9.42C16.9 9.28 16.9 9.15 16.87 9.01L15.7 3.67C15.67 3.53 15.61 3.4 15.52 3.29C15.43 3.18 15.32 3.09 15.2 3.03L10.43 0.65C10.29 0.58 10.14 0.55 9.99 0.56Z" fill="#326CE5"/>
|
||||
<path d="M9.97 2.77C9.81 2.77 9.68 2.92 9.68 3.1V3.18C9.68 3.2 9.68 3.23 9.68 3.25C9.69 3.35 9.71 3.43 9.72 3.53C9.75 3.73 9.77 3.91 9.76 4.06C9.74 4.12 9.7 4.18 9.66 4.21L9.66 4.34C9.48 4.35 9.31 4.38 9.13 4.42C8.39 4.59 7.75 4.97 7.26 5.5C7.23 5.47 7.17 5.43 7.16 5.42C7.11 5.43 7.06 5.44 6.99 5.4C6.86 5.31 6.75 5.19 6.61 5.04C6.54 4.97 6.49 4.91 6.41 4.84C6.39 4.83 6.37 4.81 6.35 4.79C6.29 4.74 6.22 4.72 6.15 4.72C6.07 4.72 5.98 4.75 5.93 4.82C5.83 4.95 5.86 5.14 6 5.25C6.02 5.27 6.04 5.28 6.06 5.3C6.14 5.36 6.21 5.39 6.29 5.44C6.46 5.54 6.6 5.63 6.72 5.73C6.76 5.78 6.77 5.87 6.77 5.91L6.86 5.99C6.37 6.74 6.15 7.66 6.28 8.6L6.16 8.63C6.13 8.67 6.08 8.74 6.04 8.76C5.89 8.8 5.72 8.82 5.52 8.84C5.43 8.85 5.35 8.85 5.25 8.87C5.23 8.87 5.2 8.88 5.17 8.88C4.99 8.92 4.88 9.08 4.92 9.23C4.95 9.39 5.12 9.49 5.29 9.45C5.32 9.45 5.34 9.44 5.37 9.44C5.46 9.41 5.53 9.38 5.62 9.34C5.81 9.27 5.96 9.21 6.12 9.19C6.18 9.18 6.25 9.23 6.28 9.24L6.41 9.22C6.7 10.11 7.3 10.84 8.06 11.3L8.01 11.43C8.03 11.48 8.05 11.55 8.04 11.6C7.98 11.74 7.89 11.9 7.78 12.07C7.73 12.15 7.67 12.21 7.63 12.3C7.62 12.32 7.6 12.35 7.59 12.38C7.52 12.54 7.57 12.72 7.71 12.79C7.85 12.86 8.03 12.79 8.1 12.63C8.11 12.6 8.13 12.57 8.14 12.55C8.18 12.45 8.19 12.37 8.22 12.28C8.29 12.09 8.34 11.89 8.44 11.76C8.47 11.73 8.52 11.71 8.57 11.7L8.63 11.58C9.29 11.84 10.03 11.91 10.78 11.74C10.95 11.7 11.11 11.65 11.27 11.59C11.29 11.63 11.32 11.69 11.33 11.7C11.38 11.72 11.43 11.73 11.48 11.79C11.56 11.93 11.61 12.09 11.67 12.28C11.7 12.37 11.71 12.45 11.75 12.54C11.76 12.57 11.78 12.6 11.79 12.63C11.87 12.79 12.04 12.86 12.19 12.79C12.33 12.72 12.38 12.54 12.31 12.37C12.3 12.35 12.29 12.32 12.28 12.3C12.23 12.21 12.18 12.15 12.13 12.07C12.02 11.9 11.94 11.74 11.88 11.6C11.87 11.53 11.89 11.48 11.91 11.43C11.9 11.42 11.87 11.35 11.86 11.32C12.66 10.85 13.24 10.1 13.52 9.22C13.55 9.22 13.62 9.24 13.64 9.24C13.68 9.21 13.72 9.17 13.8 9.18C13.95 9.2 14.11 9.26 14.3 9.32C14.38 9.36 14.45 9.39 14.55 9.42C14.57 9.42 14.6 9.43 14.63 9.43C14.63 9.43 14.64 9.43 14.64 9.43C14.81 9.47 14.98 9.38 15.01 9.22C15.05 9.07 14.94 8.91 14.77 8.87C14.74 8.86 14.71 8.86 14.68 8.85C14.59 8.85 14.5 8.85 14.41 8.84C14.21 8.82 14.04 8.8 13.88 8.75C13.82 8.73 13.78 8.66 13.76 8.63L13.63 8.59C13.69 8.15 13.67 7.69 13.57 7.24C13.46 6.78 13.28 6.36 13.03 5.99C13.06 5.96 13.11 5.91 13.13 5.89C13.13 5.84 13.13 5.79 13.18 5.73C13.29 5.62 13.43 5.53 13.6 5.44C13.68 5.39 13.75 5.36 13.83 5.3C13.85 5.29 13.87 5.27 13.9 5.25C14.04 5.14 14.05 4.95 13.95 4.82C13.85 4.69 13.66 4.68 13.52 4.79C13.51 4.81 13.48 4.82 13.46 4.84C13.38 4.91 13.34 4.97 13.27 5.05C13.13 5.19 13.01 5.31 12.88 5.4C12.82 5.44 12.74 5.43 12.7 5.42C12.69 5.43 12.63 5.47 12.6 5.49C11.98 4.83 11.13 4.42 10.22 4.33C10.22 4.29 10.22 4.22 10.21 4.2C10.18 4.16 10.13 4.13 10.12 4.05C10.11 3.89 10.13 3.73 10.15 3.53C10.17 3.43 10.19 3.35 10.19 3.25C10.19 3.22 10.19 3.18 10.19 3.1C10.19 2.92 10.06 2.77 9.9 2.77H9.97ZM9.61 4.94L9.53 6.46C9.52 6.6 9.41 6.71 9.28 6.71C9.22 6.71 9.17 6.69 9.13 6.66L7.9 5.78C8.28 5.4 8.76 5.12 9.32 4.99C9.42 4.97 9.52 4.95 9.61 4.94ZM10.32 4.94C10.97 5.02 11.57 5.32 12.03 5.78L10.81 6.66C10.7 6.74 10.55 6.72 10.46 6.61C10.43 6.57 10.41 6.52 10.41 6.47L10.32 4.94ZM7.37 6.34L8.49 7.36C8.59 7.45 8.61 7.61 8.52 7.72C8.49 7.76 8.44 7.79 8.39 7.8L6.95 8.22C6.88 7.55 7.03 6.89 7.37 6.34ZM12.47 6.34C12.63 6.61 12.76 6.92 12.83 7.25C12.91 7.57 12.93 7.9 12.9 8.21L11.45 7.79C11.32 7.75 11.24 7.62 11.27 7.49C11.28 7.43 11.31 7.39 11.35 7.35L12.47 6.34ZM9.36 7.75H9.82L10.11 8.11L10 8.56L9.59 8.76L9.17 8.56L9.07 8.11L9.36 7.75ZM10.82 9.01C10.84 9.01 10.86 9.01 10.88 9.01C10.91 9.01 10.95 9.02 10.98 9.03L12.47 9.28C12.25 9.9 11.83 10.43 11.27 10.79L10.69 9.38C10.64 9.25 10.69 9.1 10.82 9.04V9.01ZM8.32 9.01C8.43 9.01 8.53 9.09 8.56 9.21C8.57 9.26 8.57 9.32 8.55 9.37L7.94 10.77C7.41 10.42 7 9.9 6.77 9.27L8.24 9.02C8.26 9.01 8.29 9.01 8.32 9.01ZM9.57 9.62C9.61 9.62 9.65 9.63 9.68 9.64C9.73 9.67 9.77 9.71 9.79 9.75L10.51 11.08C10.41 11.11 10.32 11.14 10.22 11.16C9.66 11.29 9.1 11.25 8.6 11.08L9.32 9.75C9.36 9.67 9.44 9.63 9.53 9.62H9.57Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ with .pricing }}
|
||||
<div class="{{ $class }}__pricing">
|
||||
<span class="{{ $class }}__pricing-main">{{ . }}</span>
|
||||
{{ with $.pricingNote }}
|
||||
<span class="{{ $class }}__pricing-note">{{ . }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Target */}}
|
||||
<div class="{{ $class }}__target">
|
||||
<p>{{ .target }}</p>
|
||||
</div>
|
||||
|
||||
{{/* Features (flat list for Managed) */}}
|
||||
{{ with .features }}
|
||||
<div class="{{ $class }}__features">
|
||||
<ul class="{{ $class }}__feature-list">
|
||||
{{ range . }}
|
||||
<li class="{{ $class }}__feature-item">
|
||||
<svg class="{{ $class }}__check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3334 4L6.00008 11.3333L2.66675 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
{{/* Marketplace logos */}}
|
||||
{{ with $.marketplace }}
|
||||
<div class="{{ $class }}__marketplace">
|
||||
<p class="{{ $class }}__marketplace-label">{{ .label }}</p>
|
||||
<div class="{{ $class }}__marketplace-logos">
|
||||
{{ range .logos }}
|
||||
<div class="{{ $class }}__marketplace-logo">
|
||||
{{ if eq .icon "aws" }}
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.27 9.66C6.27 9.94 6.3 10.16 6.35 10.33C6.41 10.5 6.48 10.68 6.58 10.89C6.62 10.96 6.63 11.03 6.63 11.09C6.63 11.18 6.58 11.27 6.47 11.36L6.04 11.66C5.97 11.71 5.9 11.73 5.84 11.73C5.76 11.73 5.68 11.69 5.6 11.61C5.49 11.49 5.4 11.36 5.32 11.22C5.24 11.07 5.16 10.91 5.07 10.71C4.45 11.45 3.67 11.82 2.73 11.82C2.04 11.82 1.49 11.63 1.09 11.25C0.69 10.87 0.49 10.37 0.49 9.75C0.49 9.09 0.73 8.55 1.2 8.14C1.67 7.73 2.31 7.52 3.12 7.52C3.39 7.52 3.66 7.54 3.95 7.58C4.24 7.62 4.54 7.68 4.85 7.75V7.25C4.85 6.68 4.73 6.28 4.5 6.04C4.26 5.79 3.87 5.67 3.33 5.67C3.05 5.67 2.76 5.7 2.47 5.78C2.18 5.86 1.89 5.95 1.61 6.07C1.48 6.13 1.38 6.17 1.32 6.18C1.26 6.19 1.22 6.2 1.18 6.2C1.07 6.2 1.01 6.12 1.01 5.96V5.6C1.01 5.48 1.03 5.39 1.08 5.32C1.13 5.25 1.21 5.19 1.34 5.12C1.62 4.98 1.96 4.86 2.34 4.77C2.72 4.67 3.12 4.63 3.55 4.63C4.42 4.63 5.07 4.83 5.49 5.22C5.91 5.61 6.12 6.2 6.12 6.98V9.66H6.27ZM3.08 10.86C3.34 10.86 3.61 10.81 3.89 10.71C4.17 10.61 4.42 10.44 4.63 10.19C4.76 10.04 4.85 9.87 4.9 9.68C4.95 9.49 4.98 9.26 4.98 8.99V8.59C4.76 8.54 4.52 8.5 4.28 8.47C4.04 8.44 3.8 8.42 3.57 8.42C3.05 8.42 2.66 8.52 2.41 8.73C2.16 8.94 2.03 9.23 2.03 9.62C2.03 9.98 2.12 10.26 2.31 10.45C2.49 10.72 2.75 10.86 3.08 10.86Z" fill="#252F3E"/>
|
||||
<path d="M8.78 11.68C8.66 11.68 8.58 11.66 8.53 11.61C8.48 11.57 8.43 11.48 8.39 11.34L6.73 5.41C6.69 5.27 6.67 5.17 6.67 5.12C6.67 5.01 6.73 4.95 6.85 4.95H7.52C7.65 4.95 7.74 4.97 7.79 5.02C7.85 5.06 7.89 5.15 7.93 5.29L9.13 10.27L10.24 5.29C10.28 5.14 10.32 5.06 10.37 5.02C10.43 4.97 10.52 4.95 10.64 4.95H11.19C11.32 4.95 11.41 4.97 11.46 5.02C11.52 5.06 11.56 5.15 11.6 5.29L12.73 10.33L13.96 5.29C14 5.14 14.05 5.06 14.1 5.02C14.16 4.97 14.25 4.95 14.37 4.95H15.01C15.13 4.95 15.19 5.01 15.19 5.12C15.19 5.16 15.18 5.2 15.17 5.25C15.16 5.3 15.14 5.36 15.12 5.42L13.42 11.35C13.38 11.49 13.33 11.58 13.28 11.62C13.22 11.67 13.14 11.69 13.02 11.69H12.42C12.29 11.69 12.2 11.67 12.15 11.62C12.09 11.58 12.05 11.49 12.01 11.35L10.91 6.47L9.82 11.34C9.78 11.49 9.74 11.57 9.68 11.61C9.62 11.66 9.53 11.68 9.41 11.68H8.78Z" fill="#252F3E"/>
|
||||
<path d="M17.61 11.86C17.2 11.86 16.79 11.82 16.4 11.73C16.01 11.64 15.7 11.54 15.49 11.42C15.36 11.34 15.27 11.26 15.24 11.18C15.21 11.11 15.19 11.02 15.19 10.94V10.56C15.19 10.4 15.26 10.32 15.38 10.32C15.43 10.32 15.48 10.33 15.53 10.35C15.58 10.37 15.65 10.4 15.73 10.44C15.99 10.56 16.28 10.66 16.58 10.73C16.89 10.8 17.19 10.84 17.5 10.84C17.97 10.84 18.33 10.76 18.59 10.6C18.84 10.44 18.98 10.21 18.98 9.91C18.98 9.7 18.91 9.52 18.78 9.38C18.65 9.24 18.4 9.11 18.04 8.99L17.01 8.68C16.44 8.5 16.02 8.24 15.77 7.91C15.52 7.59 15.39 7.22 15.39 6.83C15.39 6.51 15.46 6.23 15.6 5.98C15.74 5.73 15.93 5.52 16.17 5.34C16.41 5.16 16.69 5.03 17.01 4.93C17.33 4.84 17.67 4.79 18.03 4.79C18.21 4.79 18.4 4.8 18.58 4.83C18.77 4.86 18.94 4.89 19.11 4.93C19.27 4.98 19.43 5.03 19.57 5.08C19.71 5.14 19.82 5.19 19.9 5.25C20.01 5.32 20.09 5.39 20.13 5.47C20.17 5.54 20.19 5.64 20.19 5.75V6.1C20.19 6.26 20.12 6.34 19.99 6.34C19.92 6.34 19.81 6.3 19.67 6.23C19.22 6.02 18.72 5.92 18.17 5.92C17.75 5.92 17.42 5.98 17.19 6.12C16.96 6.26 16.84 6.46 16.84 6.75C16.84 6.96 16.92 7.14 17.07 7.28C17.22 7.42 17.5 7.56 17.89 7.68L18.9 7.99C19.46 8.16 19.87 8.41 20.11 8.73C20.35 9.05 20.47 9.41 20.47 9.82C20.47 10.15 20.4 10.45 20.26 10.71C20.12 10.97 19.92 11.2 19.67 11.38C19.42 11.57 19.12 11.71 18.78 11.8C18.42 11.84 18.03 11.86 17.61 11.86Z" fill="#252F3E"/>
|
||||
<path d="M18.88 14.52C16.69 16.15 13.5 17 10.73 17C6.89 17 3.44 15.58 0.84 13.23C0.64 13.05 0.82 12.81 1.06 12.95C3.88 14.55 7.34 15.51 10.93 15.51C13.36 15.51 16.03 15 18.45 13.96C18.82 13.79 19.14 14.22 18.88 14.52Z" fill="#FF9900"/>
|
||||
<path d="M19.75 13.52C19.49 13.18 17.96 13.37 17.27 13.46C17.06 13.49 17.03 13.31 17.22 13.17C18.44 12.31 20.45 12.56 20.67 12.83C20.89 13.11 20.61 15.12 19.47 16.08C19.3 16.23 19.13 16.15 19.21 15.96C19.47 15.33 20.01 13.85 19.75 13.52Z" fill="#FF9900"/>
|
||||
</svg>
|
||||
{{ else if eq .icon "gcp" }}
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.93 6.11L15.17 4.87L15.28 4.36C12.89 2.18 9.19 2.05 6.65 4.04C5.99 4.56 5.44 5.2 5.02 5.93L5.43 5.87L7.91 5.46L8.14 5.23C9.56 3.92 11.73 3.82 13.26 4.98L13.93 6.11Z" fill="#EA4335"/>
|
||||
<path d="M17.46 7.62C17 6.19 16.12 4.93 14.95 4L13.25 5.7C14.22 6.44 14.87 7.52 15.06 8.72H15.35C15.7 8.72 16.05 8.86 16.31 9.11L18.51 6.91C18.25 7.11 17.86 7.38 17.46 7.62Z" fill="#4285F4"/>
|
||||
<path d="M6.58 15.47C7.85 16.74 9.57 17.45 11.36 17.45V14.97C10.17 14.97 9.04 14.48 8.2 13.64L6.58 15.47Z" fill="#34A853"/>
|
||||
<path d="M11.36 17.45C13.15 17.45 14.87 16.74 16.14 15.47L13.94 13.27C13.1 13.96 12.04 14.37 10.92 14.37C9.01 14.37 7.36 13.12 6.76 11.38L4.49 13.51C5.59 15.76 8.31 17.45 11.36 17.45Z" fill="#34A853"/>
|
||||
<path d="M5.02 10.98C4.82 10.37 4.72 9.73 4.72 9.08C4.72 8.43 4.82 7.79 5.02 7.18L2.75 5.05C2.11 6.31 1.76 7.72 1.76 9.18C1.76 10.64 2.11 12.05 2.75 13.31L5.02 10.98Z" fill="#FBBC05"/>
|
||||
<path d="M11.36 4.54C12.66 4.54 13.86 5.01 14.78 5.84L17.03 3.59C15.42 2.09 13.38 1.28 11.21 1.28C8.16 1.28 5.44 3.01 4.34 5.34L6.61 7.47C7.21 5.73 8.86 4.48 10.77 4.48L11.36 4.54Z" fill="#EA4335"/>
|
||||
</svg>
|
||||
{{ else if eq .icon "azure" }}
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.1 3.77L5.78 14.78H2.14L6.46 3.77H10.1Z" fill="#0078D4"/>
|
||||
<path d="M16.82 14.29L13.97 14.78L5.95 17.13L14.4 14.29H16.82Z" fill="#0078D4"/>
|
||||
<path d="M11.54 6.18L9.19 13.49L16.82 14.29L11.54 6.18Z" fill="#50E6FF"/>
|
||||
<path d="M16.82 14.29L9.19 13.49L14.4 14.29L16.82 14.29Z" fill="#50E6FF"/>
|
||||
<path d="M5.95 17.13L9.19 13.49L5.78 14.78L5.95 17.13Z" fill="#0078D4"/>
|
||||
<path d="M9.19 13.49L5.95 17.13L13.97 14.78L9.19 13.49Z" fill="#0078D4"/>
|
||||
<path d="M11.54 6.18L16.82 14.29H14.4L11.54 6.18Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Contact link for premium tier */}}
|
||||
{{ with $.contactLink }}
|
||||
<a href="{{ .url }}" class="{{ $class }}__contact-link">
|
||||
{{ .text }}
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Feature groups (labeled lists for On-Premise) */}}
|
||||
{{ range .featureGroups }}
|
||||
<div class="{{ $class }}__features">
|
||||
<p class="{{ $class }}__feature-group-label">{{ .label }}</p>
|
||||
<ul class="{{ $class }}__feature-list">
|
||||
{{ range .items }}
|
||||
<li class="{{ $class }}__feature-item">
|
||||
<svg class="{{ $class }}__check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3334 4L6.00008 11.3333L2.66675 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* CTA */}}
|
||||
<div class="{{ $class }}__cta">
|
||||
<a href="{{ .cta.url }}" class="{{ $class }}__cta-button {{ $class }}__cta-button--{{ .cta.style }}">
|
||||
{{ .cta.text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<section class="qdrant-pricing-faq">
|
||||
<div class="container">
|
||||
<h2 class="qdrant-pricing-faq__title">{{ .Params.title }}</h2>
|
||||
<div class="qdrant-pricing-faq__questions">
|
||||
{{ range $index, $element := .Params.questions }}
|
||||
<div class="qdrant-pricing-faq__item{{ if eq $index 0 }} qdrant-pricing-faq__item--active{{ end }}">
|
||||
<div class="qdrant-pricing-faq__question">
|
||||
<h6 class="qdrant-pricing-faq__question-text">{{ .question }}</h6>
|
||||
<span class="qdrant-pricing-faq__icon">
|
||||
<svg class="qdrant-pricing-faq__icon-plus" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<svg class="qdrant-pricing-faq__icon-minus" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="qdrant-pricing-faq__answer">
|
||||
<p class="qdrant-pricing-faq__answer-text">{{ .answer }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,122 @@
|
||||
<section class="qdrant-pricing-features">
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-features__header">
|
||||
<h2 class="qdrant-pricing-features__title">{{ .Params.title }}</h2>
|
||||
<div class="qdrant-pricing-features__tabs">
|
||||
<button class="qdrant-pricing-features__tab qdrant-pricing-features__tab--active" data-tab="managed">Managed</button>
|
||||
<button class="qdrant-pricing-features__tab" data-tab="on-premise">On-Premise</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Mobile tier tabs */}}
|
||||
<div class="qdrant-pricing-features__tier-tabs">
|
||||
{{ range $index, $tier := .Params.tiers }}
|
||||
<button class="qdrant-pricing-features__tier-tab{{ if eq $index 0 }} qdrant-pricing-features__tier-tab--active{{ end }}" data-tier="{{ $tier.name | urlize }}">
|
||||
{{ $tier.name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-features__table">
|
||||
<div class="qdrant-pricing-features__table-header">
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature"></div>
|
||||
{{ range .Params.tiers }}
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--tier{{ if .highlight }} qdrant-pricing-features__table-cell--highlight{{ end }}" data-tier-col="{{ .name | urlize }}">
|
||||
{{ .name }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-features__table-body">
|
||||
{{ range .Params.sections }}
|
||||
<div class="qdrant-pricing-features__table-section">
|
||||
<div class="qdrant-pricing-features__table-section-header">
|
||||
<span class="qdrant-pricing-features__table-section-title">{{ .name }}</span>
|
||||
<svg class="qdrant-pricing-features__chevron" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12.5L10 7.5L15 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-section-rows">
|
||||
{{ range .features }}
|
||||
<div class="qdrant-pricing-features__table-row">
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell" data-tier-col="oss">
|
||||
{{ if eq .oss true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .oss false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text">{{ .oss }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell" data-tier-col="free-tier">
|
||||
{{ if eq .free true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .free false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text">{{ .free }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--highlight" data-tier-col="paid-tier">
|
||||
{{ if eq .paid true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .paid false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text qdrant-pricing-features__text--bold">{{ .paid }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell" data-tier-col="premium-tier">
|
||||
{{ if eq .premium true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .premium false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text qdrant-pricing-features__text--bold">{{ .premium }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-features__table-footer">
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature"></div>
|
||||
{{ range $index, $cta := .Params.ctas }}
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--cta{{ if eq $index 2 }} qdrant-pricing-features__table-cell--highlight{{ end }}" data-tier-col="{{ index (slice "oss" "free-tier" "paid-tier" "premium-tier") $index }}">
|
||||
<a href="{{ $cta.url }}" class="button {{ if $cta.contained }}button_contained{{ else }}button_outlined{{ end }}">
|
||||
{{ $cta.text }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ with .Params.compareButton }}
|
||||
<div class="qdrant-pricing-features__compare">
|
||||
<a href="{{ .url }}" class="button button_outlined">{{ .text }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,11 +1,26 @@
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-hero") }}
|
||||
<section class="qdrant-pricing-hero">
|
||||
<div class="qdrant-pricing-hero__background">
|
||||
<div class="qdrant-pricing-hero__grid"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h3 class="qdrant-pricing-hero__title">{{ .Params.title }}</h3>
|
||||
<h5 class="qdrant-pricing-hero__subtitle">{{ .Params.subtitle }}</h5>
|
||||
<div class="qdrant-pricing-hero__description">{{ .Params.description }}</div>
|
||||
<div class="qdrant-pricing-hero__content">
|
||||
<h1 class="qdrant-pricing-hero__title">{{ .Params.title }}</h1>
|
||||
<div class="qdrant-pricing-hero__description">{{ .Params.description }}</div>
|
||||
<div class="qdrant-pricing-hero__actions">
|
||||
{{ with .Params.button }}
|
||||
<a href="{{ .url }}" class="button button_contained button_md qdrant-pricing-hero__button">
|
||||
{{ .text }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ .url }}" class="qdrant-pricing-hero__link">
|
||||
{{ .text }}
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.16669 7H12.8334M12.8334 7L7.00002 1.16666M12.8334 7L7.00002 12.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,29 +4,22 @@
|
||||
|
||||
{{ partial "qdrant-pricing-hero" . }}
|
||||
|
||||
<!--{{ with (.Site.GetPage "/pricing/qdrant-pricing-doors-a") }}-->
|
||||
<!-- {{ partial "qdrant-pricing-doors" (dict "context" . "class" "qdrant-pricing-doors-a") }}-->
|
||||
<!--{{ end }}-->
|
||||
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-doors-b") }}
|
||||
{{ partial "qdrant-pricing-doors" (dict "context" . "class" "qdrant-pricing-doors-b") }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "qdrant-pricing-calculator" . }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/get-started-small-database") }}
|
||||
{{ partial "get-started-small" (dict "context" . "class" "get-started-small-database") }}
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-features") }}
|
||||
{{ partial "qdrant-pricing-features" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/marketplaces") }}
|
||||
{{ partial "marketplaces" (dict "context" . "class" "qdrant-pricing-marketplaces") }}
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-faq") }}
|
||||
{{ partial "qdrant-pricing-faq" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/get-contacted-with-question") }}
|
||||
{{ partial "get-contacted" (dict "context" . "class" "qdrant-pricing-get-contacted") }}
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-cta") }}
|
||||
{{ partial "qdrant-pricing-cta" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/main/docker-deploy") }}
|
||||
{{ partial "docker-deploy" (dict "context" . "class" " qdrant-pricing-docker-deploy")}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
@@ -1 +1,17 @@
|
||||
{{ define "main" }}{{ end }}
|
||||
{{ define "main" }}
|
||||
|
||||
{{ partial "site-header" . }}
|
||||
|
||||
{{ partial "qdrant-pricing-comparison" . }}
|
||||
|
||||
{{ partial "qdrant-pricing-calculator" . }}
|
||||
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-faq") }}
|
||||
{{ partial "qdrant-pricing-faq" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-cta") }}
|
||||
{{ partial "qdrant-pricing-cta" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user