mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-03 18:08:30 +02:00
fixes
This commit is contained in:
trean
@@ -68,6 +68,90 @@ sections:
|
|||||||
paid: false
|
paid: false
|
||||||
premium: true
|
premium: true
|
||||||
ctas:
|
ctas:
|
||||||
|
- tier: oss
|
||||||
|
text: Start Free
|
||||||
|
url: https://cloud.qdrant.io
|
||||||
|
contained: false
|
||||||
|
- tier: free
|
||||||
|
text: Start Free
|
||||||
|
url: https://cloud.qdrant.io
|
||||||
|
contained: false
|
||||||
|
- tier: paid
|
||||||
|
text: Deploy on Cloud
|
||||||
|
url: https://cloud.qdrant.io
|
||||||
|
contained: true
|
||||||
|
- tier: premium
|
||||||
|
text: Deploy on Cloud
|
||||||
|
url: /contact-us/
|
||||||
|
contained: false
|
||||||
|
onPremiseTiers:
|
||||||
|
- name: OSS
|
||||||
|
highlight: false
|
||||||
|
- name: Free Tier
|
||||||
|
highlight: false
|
||||||
|
- name: Paid Tier
|
||||||
|
highlight: true
|
||||||
|
- name: Premium Tier
|
||||||
|
highlight: false
|
||||||
|
onPremiseSections:
|
||||||
|
- name: Features
|
||||||
|
features:
|
||||||
|
- name: Cloud Inference (on-premise)
|
||||||
|
oss: false
|
||||||
|
free: Only external models
|
||||||
|
paid: true
|
||||||
|
premium: true
|
||||||
|
- name: Cloud providers
|
||||||
|
oss: Depends on customer infra
|
||||||
|
free: AWS, Azure, GCP
|
||||||
|
paid: AWS, Azure, GCP
|
||||||
|
premium: AWS, Azure, GCP
|
||||||
|
- name: Uptime SLA
|
||||||
|
oss: false
|
||||||
|
free: false
|
||||||
|
paid: "99.5"
|
||||||
|
premium: "99.9"
|
||||||
|
- name: Automation
|
||||||
|
oss: false
|
||||||
|
free: API, Terraform, Pulumi
|
||||||
|
paid: API, Terraform, Pulumi
|
||||||
|
premium: API, Terraform, Pulumi
|
||||||
|
- name: Vertical Up-Scaling
|
||||||
|
oss: true
|
||||||
|
free: false
|
||||||
|
paid: true
|
||||||
|
premium: true
|
||||||
|
- name: Vertical Down-Scaling
|
||||||
|
oss: No resource usage safe guards
|
||||||
|
free: false
|
||||||
|
paid: true
|
||||||
|
premium: true
|
||||||
|
- name: Vertical Disk Up-Scaling
|
||||||
|
oss: Complex, manual process
|
||||||
|
free: false
|
||||||
|
paid: true
|
||||||
|
premium: true
|
||||||
|
- name: Support Level
|
||||||
|
oss: Community
|
||||||
|
free: Community
|
||||||
|
paid: Standard
|
||||||
|
premium: Premium
|
||||||
|
- name: Support Response times
|
||||||
|
oss: false
|
||||||
|
free: Best effort
|
||||||
|
paid: 10x5
|
||||||
|
premium: 24x7
|
||||||
|
- name: Disk Encryption with custom key
|
||||||
|
oss: Depends on customer infra
|
||||||
|
free: false
|
||||||
|
paid: false
|
||||||
|
premium: (AWS only)
|
||||||
|
- name: Enterprise authentication (SSO in Cloud)
|
||||||
|
oss: false
|
||||||
|
free: false
|
||||||
|
paid: false
|
||||||
|
premium: true
|
||||||
|
onPremiseCtas:
|
||||||
- tier: oss
|
- tier: oss
|
||||||
text: Start Free
|
text: Start Free
|
||||||
url: https://cloud.qdrant.io
|
url: https://cloud.qdrant.io
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
transition:
|
transition:
|
||||||
all 0.3s ease-in-out,
|
all 0.3s ease-in-out,
|
||||||
color 0.1s linear;
|
color 0.1s linear;
|
||||||
padding-right: $icon-width;
|
padding-right: calc($icon-width + 6px);
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -52,7 +52,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
padding-right: calc($icon-width + 6px);
|
|
||||||
&:after {
|
&:after {
|
||||||
animation: dash 0.3s ease-in-out forwards;
|
animation: dash 0.3s ease-in-out forwards;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
@import 'qdrant-pricing-doors-a';
|
@import 'qdrant-pricing-doors-a';
|
||||||
@import 'qdrant-pricing-doors-b';
|
@import 'qdrant-pricing-doors-b';
|
||||||
@import 'qdrant-pricing-marketplaces';
|
@import 'qdrant-pricing-marketplaces';
|
||||||
|
@import 'pricing-table';
|
||||||
@import 'qdrant-pricing-features';
|
@import 'qdrant-pricing-features';
|
||||||
@import 'qdrant-pricing-faq';
|
@import 'qdrant-pricing-faq';
|
||||||
@import 'qdrant-pricing-comparison';
|
@import 'qdrant-pricing-comparison';
|
||||||
|
|||||||
@@ -0,0 +1,303 @@
|
|||||||
|
@use '../../helpers/functions' as *;
|
||||||
|
|
||||||
|
/* Shared pricing table styles – used by qdrant-pricing-features and qdrant-pricing-comparison */
|
||||||
|
|
||||||
|
.pricing-table {
|
||||||
|
&__table {
|
||||||
|
// border: 0.5px solid $neutral-80;
|
||||||
|
// border-radius: pxToRem(8);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table-header {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
& .pricing-table__table-cell {
|
||||||
|
border-bottom: 0;
|
||||||
|
&:first-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
border-left: 0.5px solid $neutral-80;
|
||||||
|
border-top-left-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
&:not(:first-of-type) {
|
||||||
|
border-top: 0.5px solid $neutral-80;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-right: 0.5px solid $neutral-80;
|
||||||
|
border-top-right-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table-section {
|
||||||
|
&:first-of-type &-header {
|
||||||
|
border-top: 0.5px solid $neutral-80;
|
||||||
|
border-top-left-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type.pricing-table__table-section--collapsed &-header {
|
||||||
|
border-bottom-left-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: $spacer * 1.5 $spacer * 2;
|
||||||
|
background-color: #f5f8ff;
|
||||||
|
border-bottom: 0.5px solid $neutral-80;
|
||||||
|
border-right: 0.5px solid $neutral-80;
|
||||||
|
border-left: 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 {
|
||||||
|
.pricing-table__chevron {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__chevron {
|
||||||
|
color: $neutral-20;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table-row {
|
||||||
|
display: flex;
|
||||||
|
background-color: $neutral-98;
|
||||||
|
border-bottom: 0.5px solid $neutral-80;
|
||||||
|
border-right: 0.5px solid $neutral-80;
|
||||||
|
border-left: 0.5px solid $neutral-80;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table-body {
|
||||||
|
.pricing-table__table-section:last-of-type
|
||||||
|
.pricing-table__table-section-rows
|
||||||
|
.pricing-table__table-row:last-child {
|
||||||
|
border-bottom-left-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--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-bottom: 0.5px solid $neutral-80;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--highlight {
|
||||||
|
background-color: #f5f8ff;
|
||||||
|
|
||||||
|
&.pricing-table__table-cell--tier {
|
||||||
|
border-left: 0.5px solid $neutral-80;
|
||||||
|
border-right: 0.5px solid $neutral-80;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--cta {
|
||||||
|
padding: $spacer * 2;
|
||||||
|
background-color: $neutral-98;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: $spacer * 0.5 $spacer * 1.375;
|
||||||
|
font-size: pxToRem(16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button_outlined {
|
||||||
|
color: $neutral-20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table-footer {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
// .pricing-table__table-cell--feature {
|
||||||
|
// border-right: 0.5px solid $neutral-80;
|
||||||
|
// }
|
||||||
|
.pricing-table__table-cell {
|
||||||
|
&:first-child {
|
||||||
|
border-right: 0;
|
||||||
|
}
|
||||||
|
&:not(:first-child) {
|
||||||
|
border-bottom: 0.5px solid $neutral-80;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
border-left: 0.5px solid $neutral-80;
|
||||||
|
border-bottom-left-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-right: 0.5px solid $neutral-80;
|
||||||
|
border-bottom-right-radius: pxToRem(8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__check {
|
||||||
|
color: $neutral-30;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__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) {
|
||||||
|
&__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;
|
||||||
|
|
||||||
|
&.pricing-table__table-cell--mobile-active {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: pxToRem(144);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--feature {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__table-footer {
|
||||||
|
.pricing-table__table-cell--feature {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing-table__table-cell--cta {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&[data-tier-col].pricing-table__table-cell--mobile-active {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+23
-27
@@ -44,18 +44,18 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: $spacer * 1.5;
|
gap: $spacer * 1.5;
|
||||||
padding: $spacer * 1.5 $spacer * 3.5;
|
padding: $spacer * 1.5 $spacer * 3.5 $spacer * 1.5 $spacer * 3;
|
||||||
background-color: $neutral-98;
|
background-color: $neutral-98;
|
||||||
border: 1px solid $neutral-90;
|
border: 1px solid $neutral-90;
|
||||||
border-radius: pxToRem(8);
|
border-radius: pxToRem(8);
|
||||||
max-width: pxToRem(600);
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 76px;
|
height: pxToRem(100);
|
||||||
height: 64px;
|
margin-bottom: -$spacer * 1.5;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -68,7 +68,6 @@
|
|||||||
&__content {
|
&__content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: $spacer * 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
@@ -78,6 +77,7 @@
|
|||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: $neutral-20;
|
color: $neutral-20;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link-wrapper {
|
&__link-wrapper {
|
||||||
@@ -95,25 +95,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
display: inline-flex;
|
font-size: inherit;
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
font-weight: 500;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
@@ -121,23 +103,37 @@
|
|||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
padding: $spacer * 1.5 $spacer * 1.25;
|
padding: $spacer * 1.5 $spacer * 1.25;
|
||||||
|
gap: $spacer * 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
width: 76px;
|
width: pxToRem(100);
|
||||||
height: 64px;
|
height: pxToRem(84);
|
||||||
margin: 0 auto;
|
margin: 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: $spacer * 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
font-size: pxToRem(20);
|
font-size: pxToRem(20);
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.3;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link-wrapper {
|
&__link-wrapper {
|
||||||
|
|||||||
+6
-253
@@ -109,8 +109,13 @@
|
|||||||
color: $primary-50;
|
color: $primary-50;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
height: calc(1ex + 3px);
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
color: $primary-50;
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
@@ -151,259 +156,7 @@
|
|||||||
padding: 0 0 $spacer * 5;
|
padding: 0 0 $spacer * 5;
|
||||||
background-color: $neutral-94;
|
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) {
|
@include media-breakpoint-down(lg) {
|
||||||
padding: 0 0 $spacer * 4;
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+46
-6
@@ -43,8 +43,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__doors {
|
&__doors-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__doors {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: auto auto 1fr auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: pxToRem(1110);
|
max-width: pxToRem(1110);
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -52,13 +60,26 @@
|
|||||||
&--hidden {
|
&--hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[data-doors-tab='on-premise'] {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-rows: auto auto 1fr 1fr auto;
|
||||||
|
max-width: pxToRem(1300);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__door {
|
&__door {
|
||||||
flex: 1;
|
display: grid;
|
||||||
display: flex;
|
grid-template-rows: subgrid;
|
||||||
flex-direction: column;
|
grid-row: span 4;
|
||||||
background-color: $neutral-98;
|
background-color: $neutral-98;
|
||||||
|
|
||||||
|
[data-doors-tab='on-premise'] & {
|
||||||
|
grid-row: span 5;
|
||||||
|
grid-template-rows: subgrid;
|
||||||
|
}
|
||||||
border: 1px solid $neutral-90;
|
border: 1px solid $neutral-90;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
|
|
||||||
@@ -163,6 +184,10 @@
|
|||||||
padding: $spacer $spacer * 2;
|
padding: $spacer $spacer * 2;
|
||||||
border-bottom: 0.5px solid $neutral-80;
|
border-bottom: 0.5px solid $neutral-80;
|
||||||
min-height: pxToRem(168);
|
min-height: pxToRem(168);
|
||||||
|
|
||||||
|
[data-doors-tab='on-premise'] & {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__feature-group-label {
|
&__feature-group-label {
|
||||||
@@ -199,7 +224,7 @@
|
|||||||
&__check-icon {
|
&__check-icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-top: 3px;
|
margin-top: 3px;
|
||||||
color: $neutral-30;
|
color: $primary-50;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__marketplace {
|
&__marketplace {
|
||||||
@@ -304,12 +329,27 @@
|
|||||||
@include media-breakpoint-down(lg) {
|
@include media-breakpoint-down(lg) {
|
||||||
padding: 0 0 $spacer * 2;
|
padding: 0 0 $spacer * 2;
|
||||||
|
|
||||||
|
&__doors-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
&__doors {
|
&__doors {
|
||||||
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
grid-template-columns: unset;
|
||||||
|
grid-template-rows: unset;
|
||||||
gap: $spacer * 1.5;
|
gap: $spacer * 1.5;
|
||||||
|
|
||||||
|
&--hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__door {
|
&__door {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-row: unset;
|
||||||
|
grid-template-rows: unset;
|
||||||
border-radius: pxToRem(8);
|
border-radius: pxToRem(8);
|
||||||
border: 1px solid $neutral-90;
|
border: 1px solid $neutral-90;
|
||||||
border-right: 1px solid $neutral-90;
|
border-right: 1px solid $neutral-90;
|
||||||
@@ -332,7 +372,7 @@
|
|||||||
padding: 0 $spacer * 1.25 $spacer * 2;
|
padding: 0 $spacer * 1.25 $spacer * 2;
|
||||||
|
|
||||||
&__tabs {
|
&__tabs {
|
||||||
width: 100%;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+6
-251
@@ -29,6 +29,12 @@
|
|||||||
border-radius: pxToRem(8);
|
border-radius: pxToRem(8);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__table-wrapper {
|
||||||
|
&--hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__tab {
|
&__tab {
|
||||||
padding: $spacer * 0.5 $spacer * 1.5;
|
padding: $spacer * 0.5 $spacer * 1.5;
|
||||||
font-size: pxToRem(16);
|
font-size: pxToRem(16);
|
||||||
@@ -52,150 +58,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__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 {
|
&__compare {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -212,24 +74,6 @@
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
gap: $spacer * 2;
|
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) {
|
@include media-breakpoint-down(lg) {
|
||||||
@@ -244,94 +88,5 @@
|
|||||||
&__title {
|
&__title {
|
||||||
font-size: pxToRem(32);
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+3
-11
@@ -96,18 +96,10 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: $primary-50;
|
color: $primary-50;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color 0.2s ease;
|
|
||||||
|
|
||||||
svg {
|
&::before,
|
||||||
transition: transform 0.2s ease;
|
&::after {
|
||||||
}
|
height: calc(1ex + 3px);
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $primary-60;
|
|
||||||
|
|
||||||
svg {
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -169,11 +169,34 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Pricing features tabs (Managed / On-Premise)
|
// Pricing features tabs (Managed / On-Premise)
|
||||||
|
function expandFeaturesTableSections(wrapper) {
|
||||||
|
if (!wrapper || wrapper.classList.contains('qdrant-pricing-features__table-wrapper--hidden')) return;
|
||||||
|
wrapper.querySelectorAll('.pricing-table__table-section').forEach((section) => {
|
||||||
|
const rows = section.querySelector('.pricing-table__table-section-rows');
|
||||||
|
if (!rows) return;
|
||||||
|
section.classList.remove('qdrant-pricing-features__table-section--collapsed');
|
||||||
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const featuresTabs = document.querySelectorAll('.qdrant-pricing-features__tab');
|
const featuresTabs = document.querySelectorAll('.qdrant-pricing-features__tab');
|
||||||
|
const featuresTableWrappers = document.querySelectorAll('[data-features-tab]');
|
||||||
featuresTabs.forEach((tab) => {
|
featuresTabs.forEach((tab) => {
|
||||||
tab.addEventListener('click', () => {
|
tab.addEventListener('click', () => {
|
||||||
featuresTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tab--active'));
|
featuresTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tab--active'));
|
||||||
tab.classList.add('qdrant-pricing-features__tab--active');
|
tab.classList.add('qdrant-pricing-features__tab--active');
|
||||||
|
const targetTab = tab.dataset.tab;
|
||||||
|
featuresTableWrappers.forEach((wrapper) => {
|
||||||
|
wrapper.classList.toggle(
|
||||||
|
'qdrant-pricing-features__table-wrapper--hidden',
|
||||||
|
wrapper.dataset.featuresTab !== targetTab
|
||||||
|
);
|
||||||
|
});
|
||||||
|
// Expand sections in the newly visible table (they get maxHeight:0 when hidden)
|
||||||
|
const visibleWrapper = document.querySelector(`[data-features-tab="${targetTab}"]`);
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
expandFeaturesTableSections(visibleWrapper);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -181,51 +204,55 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
function updateMobileTierColumns(activeTier) {
|
function updateMobileTierColumns(activeTier) {
|
||||||
const allTierCols = document.querySelectorAll('[data-tier-col]');
|
const allTierCols = document.querySelectorAll('[data-tier-col]');
|
||||||
allTierCols.forEach((col) => {
|
allTierCols.forEach((col) => {
|
||||||
col.classList.remove('qdrant-pricing-features__table-cell--mobile-active');
|
col.classList.remove('pricing-table__table-cell--mobile-active');
|
||||||
});
|
});
|
||||||
const activeCols = document.querySelectorAll(`[data-tier-col="${activeTier}"]`);
|
const activeCols = document.querySelectorAll(`[data-tier-col="${activeTier}"]`);
|
||||||
activeCols.forEach((col) => {
|
activeCols.forEach((col) => {
|
||||||
col.classList.add('qdrant-pricing-features__table-cell--mobile-active');
|
col.classList.add('pricing-table__table-cell--mobile-active');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const tierTabs = document.querySelectorAll('.qdrant-pricing-features__tier-tab');
|
const tierTabs = document.querySelectorAll('.pricing-table__tier-tab');
|
||||||
if (tierTabs.length) {
|
if (tierTabs.length) {
|
||||||
updateMobileTierColumns(tierTabs[0].dataset.tier);
|
updateMobileTierColumns(tierTabs[0].dataset.tier);
|
||||||
tierTabs.forEach((tab) => {
|
tierTabs.forEach((tab) => {
|
||||||
tab.addEventListener('click', () => {
|
tab.addEventListener('click', () => {
|
||||||
tierTabs.forEach((t) => t.classList.remove('qdrant-pricing-features__tier-tab--active'));
|
tierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active'));
|
||||||
tab.classList.add('qdrant-pricing-features__tier-tab--active');
|
tab.classList.add('pricing-table__tier-tab--active');
|
||||||
updateMobileTierColumns(tab.dataset.tier);
|
updateMobileTierColumns(tab.dataset.tier);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pricing features section collapse/expand
|
// Pricing features section collapse/expand
|
||||||
document.querySelectorAll('.qdrant-pricing-features__table-section').forEach((section) => {
|
document.querySelectorAll('.pricing-table__table-section').forEach((section) => {
|
||||||
const header = section.querySelector('.qdrant-pricing-features__table-section-header');
|
const header = section.querySelector('.pricing-table__table-section-header');
|
||||||
const rows = section.querySelector('.qdrant-pricing-features__table-section-rows');
|
const rows = section.querySelector('.qdrant-pricing-features__table-section-rows');
|
||||||
if (!header || !rows) return;
|
if (!header || !rows) return;
|
||||||
|
|
||||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
// Only set maxHeight for visible sections (hidden table has scrollHeight 0)
|
||||||
|
const wrapper = section.closest('[data-features-tab]');
|
||||||
|
if (!wrapper?.classList.contains('qdrant-pricing-features__table-wrapper--hidden')) {
|
||||||
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
header.addEventListener('click', () => {
|
header.addEventListener('click', () => {
|
||||||
const isCollapsed = section.classList.contains('qdrant-pricing-features__table-section--collapsed');
|
const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed');
|
||||||
|
|
||||||
if (isCollapsed) {
|
if (isCollapsed) {
|
||||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
section.classList.remove('qdrant-pricing-features__table-section--collapsed');
|
section.classList.remove('pricing-table__table-section--collapsed');
|
||||||
} else {
|
} else {
|
||||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
rows.style.maxHeight = '0px';
|
rows.style.maxHeight = '0px';
|
||||||
section.classList.add('qdrant-pricing-features__table-section--collapsed');
|
section.classList.add('pricing-table__table-section--collapsed');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
rows.addEventListener('transitionend', () => {
|
rows.addEventListener('transitionend', () => {
|
||||||
if (!section.classList.contains('qdrant-pricing-features__table-section--collapsed')) {
|
if (!section.classList.contains('pricing-table__table-section--collapsed')) {
|
||||||
rows.style.maxHeight = 'none';
|
rows.style.maxHeight = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -249,51 +276,51 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
function updateComparisonMobileTierColumns(activeTier) {
|
function updateComparisonMobileTierColumns(activeTier) {
|
||||||
const allTierCols = document.querySelectorAll('.qdrant-pricing-comparison [data-tier-col]');
|
const allTierCols = document.querySelectorAll('.qdrant-pricing-comparison [data-tier-col]');
|
||||||
allTierCols.forEach((col) => {
|
allTierCols.forEach((col) => {
|
||||||
col.classList.remove('qdrant-pricing-comparison__table-cell--mobile-active');
|
col.classList.remove('pricing-table__table-cell--mobile-active');
|
||||||
});
|
});
|
||||||
const activeCols = document.querySelectorAll(`.qdrant-pricing-comparison [data-tier-col="${activeTier}"]`);
|
const activeCols = document.querySelectorAll(`.qdrant-pricing-comparison [data-tier-col="${activeTier}"]`);
|
||||||
activeCols.forEach((col) => {
|
activeCols.forEach((col) => {
|
||||||
col.classList.add('qdrant-pricing-comparison__table-cell--mobile-active');
|
col.classList.add('pricing-table__table-cell--mobile-active');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const comparisonTierTabs = document.querySelectorAll('.qdrant-pricing-comparison__tier-tab');
|
const comparisonTierTabs = document.querySelectorAll('.qdrant-pricing-comparison .pricing-table__tier-tab');
|
||||||
if (comparisonTierTabs.length) {
|
if (comparisonTierTabs.length) {
|
||||||
updateComparisonMobileTierColumns(comparisonTierTabs[0].dataset.tier);
|
updateComparisonMobileTierColumns(comparisonTierTabs[0].dataset.tier);
|
||||||
comparisonTierTabs.forEach((tab) => {
|
comparisonTierTabs.forEach((tab) => {
|
||||||
tab.addEventListener('click', () => {
|
tab.addEventListener('click', () => {
|
||||||
comparisonTierTabs.forEach((t) => t.classList.remove('qdrant-pricing-comparison__tier-tab--active'));
|
comparisonTierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active'));
|
||||||
tab.classList.add('qdrant-pricing-comparison__tier-tab--active');
|
tab.classList.add('pricing-table__tier-tab--active');
|
||||||
updateComparisonMobileTierColumns(tab.dataset.tier);
|
updateComparisonMobileTierColumns(tab.dataset.tier);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pricing comparison section collapse/expand
|
// Pricing comparison section collapse/expand
|
||||||
document.querySelectorAll('.qdrant-pricing-comparison__table-section').forEach((section) => {
|
document.querySelectorAll('.qdrant-pricing-comparison .pricing-table__table-section').forEach((section) => {
|
||||||
const header = section.querySelector('.qdrant-pricing-comparison__table-section-header');
|
const header = section.querySelector('.pricing-table__table-section-header');
|
||||||
const rows = section.querySelector('.qdrant-pricing-comparison__table-section-rows');
|
const rows = section.querySelector('.pricing-table__table-section-rows');
|
||||||
if (!header || !rows) return;
|
if (!header || !rows) return;
|
||||||
|
|
||||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
|
|
||||||
header.addEventListener('click', () => {
|
header.addEventListener('click', () => {
|
||||||
const isCollapsed = section.classList.contains('qdrant-pricing-comparison__table-section--collapsed');
|
const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed');
|
||||||
|
|
||||||
if (isCollapsed) {
|
if (isCollapsed) {
|
||||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
section.classList.remove('qdrant-pricing-comparison__table-section--collapsed');
|
section.classList.remove('pricing-table__table-section--collapsed');
|
||||||
} else {
|
} else {
|
||||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
rows.style.maxHeight = '0px';
|
rows.style.maxHeight = '0px';
|
||||||
section.classList.add('qdrant-pricing-comparison__table-section--collapsed');
|
section.classList.add('pricing-table__table-section--collapsed');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
rows.addEventListener('transitionend', () => {
|
rows.addEventListener('transitionend', () => {
|
||||||
if (!section.classList.contains('qdrant-pricing-comparison__table-section--collapsed')) {
|
if (!section.classList.contains('pricing-table__table-section--collapsed')) {
|
||||||
rows.style.maxHeight = 'none';
|
rows.style.maxHeight = 'none';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
+2
-66
@@ -6,78 +6,14 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="qdrant-pricing-calculator__container">
|
<div class="qdrant-pricing-calculator__container">
|
||||||
<div class="qdrant-pricing-calculator__icon">
|
<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">
|
<img src="/img/calculator.png" alt="" width="76" height="64" />
|
||||||
<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>
|
||||||
<div class="qdrant-pricing-calculator__content">
|
<div class="qdrant-pricing-calculator__content">
|
||||||
<p class="qdrant-pricing-calculator__title">{{ .Params.title }}</p>
|
<p class="qdrant-pricing-calculator__title">{{ .Params.title }}</p>
|
||||||
<p class="qdrant-pricing-calculator__link-wrapper">
|
<p class="qdrant-pricing-calculator__link-wrapper">
|
||||||
<span class="qdrant-pricing-calculator__link-prefix">{{ .Params.linkPrefix }}</span>
|
<span class="qdrant-pricing-calculator__link-prefix">{{ .Params.linkPrefix }}</span>
|
||||||
<a class="qdrant-pricing-calculator__link" href="{{ .Params.link.url }}">
|
<a class="link link_md qdrant-pricing-calculator__link" href="{{ .Params.link.url }}">
|
||||||
{{ .Params.link.text }}
|
{{ .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>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+6
-259
@@ -51,17 +51,8 @@
|
|||||||
<a href="{{ .url }}" class="button button_contained button_md">{{ .text }}</a>
|
<a href="{{ .url }}" class="button button_contained button_md">{{ .text }}</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Params.link }}
|
{{ with .Params.link }}
|
||||||
<a href="{{ .url }}" class="qdrant-pricing-comparison-hero__link">
|
<a href="{{ .url }}" class="link qdrant-pricing-comparison-hero__link">
|
||||||
{{ .text }}
|
{{ .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>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
@@ -71,254 +62,10 @@
|
|||||||
|
|
||||||
<section class="qdrant-pricing-comparison">
|
<section class="qdrant-pricing-comparison">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="qdrant-pricing-comparison__tier-tabs">
|
{{ partial "pricing/qdrant-pricing-features-table" (dict
|
||||||
{{ range $index, $tier := .Params.tiers }}
|
"tiers" .Params.tiers
|
||||||
<button
|
"sections" .Params.sections
|
||||||
class="qdrant-pricing-comparison__tier-tab{{ if eq $index 0 }}
|
"ctas" .Params.ctas
|
||||||
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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
+8
-11
File diff suppressed because one or more lines are too long
+255
@@ -0,0 +1,255 @@
|
|||||||
|
{{ $tiers := .tiers }}
|
||||||
|
{{ $sections := .sections }}
|
||||||
|
{{ $ctas := .ctas }}
|
||||||
|
{{ $tierCols := slice "oss" "free-tier" "paid-tier" "premium-tier" }}
|
||||||
|
|
||||||
|
<div class="pricing-table">
|
||||||
|
{{/* Mobile tier tabs */}}
|
||||||
|
<div class="pricing-table__tier-tabs">
|
||||||
|
{{ range $index, $tier := $tiers }}
|
||||||
|
<button
|
||||||
|
class="pricing-table__tier-tab{{ if eq $index 0 }}
|
||||||
|
pricing-table__tier-tab--active
|
||||||
|
{{ end }}"
|
||||||
|
data-tier="{{ $tier.name | urlize }}"
|
||||||
|
>
|
||||||
|
{{ $tier.name }}
|
||||||
|
</button>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-table__table">
|
||||||
|
<div class="pricing-table__table-header">
|
||||||
|
<div class="pricing-table__table-cell pricing-table__table-cell--feature"></div>
|
||||||
|
{{ range $tiers }}
|
||||||
|
<div
|
||||||
|
class="pricing-table__table-cell pricing-table__table-cell--tier{{ if .highlight }}
|
||||||
|
pricing-table__table-cell--highlight
|
||||||
|
{{ end }}"
|
||||||
|
data-tier-col="{{ .name | urlize }}"
|
||||||
|
>
|
||||||
|
{{ .name }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-table__table-body">
|
||||||
|
{{ range $sections }}
|
||||||
|
<div class="pricing-table__table-section">
|
||||||
|
<div class="pricing-table__table-section-header">
|
||||||
|
<span class="pricing-table__table-section-title">{{ .name }}</span>
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="pricing-table__table-section-rows">
|
||||||
|
{{ range .features }}
|
||||||
|
<div class="pricing-table__table-row">
|
||||||
|
<div class="pricing-table__table-cell pricing-table__table-cell--feature">
|
||||||
|
{{ .name }}
|
||||||
|
</div>
|
||||||
|
<div class="pricing-table__table-cell" data-tier-col="oss">
|
||||||
|
{{ if eq .oss true }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{{ else if eq .oss false }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="pricing-table__text">{{ .oss }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="pricing-table__table-cell" data-tier-col="free-tier">
|
||||||
|
{{ if eq .free true }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{{ else if eq .free false }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="pricing-table__text">{{ .free }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="pricing-table__table-cell pricing-table__table-cell--highlight"
|
||||||
|
data-tier-col="paid-tier"
|
||||||
|
>
|
||||||
|
{{ if eq .paid true }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{{ else if eq .paid false }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="pricing-table__text pricing-table__text--bold">{{ .paid }}</span>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
<div class="pricing-table__table-cell" data-tier-col="premium-tier">
|
||||||
|
{{ if eq .premium true }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{{ else if eq .premium false }}
|
||||||
|
<svg
|
||||||
|
class="pricing-table__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="pricing-table__text pricing-table__text--bold"
|
||||||
|
>{{ .premium }}</span
|
||||||
|
>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pricing-table__table-footer">
|
||||||
|
<div class="pricing-table__table-cell pricing-table__table-cell--feature"></div>
|
||||||
|
{{ range $index, $cta := $ctas }}
|
||||||
|
<div
|
||||||
|
class="pricing-table__table-cell pricing-table__table-cell--cta{{ if eq $index 2 }}
|
||||||
|
pricing-table__table-cell--highlight
|
||||||
|
{{ end }}"
|
||||||
|
data-tier-col="{{ index $tierCols $index }}"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="{{ $cta.url }}"
|
||||||
|
class="button {{ if $cta.contained }}
|
||||||
|
button_contained
|
||||||
|
{{ else }}
|
||||||
|
button_outlined
|
||||||
|
{{ end }}"
|
||||||
|
>
|
||||||
|
{{ $cta.text }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
+21
-245
@@ -10,253 +10,29 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{/* Mobile tier tabs */}}
|
{{/* Managed table */}}
|
||||||
<div class="qdrant-pricing-features__tier-tabs">
|
<div
|
||||||
{{ range $index, $tier := .Params.tiers }}
|
class="qdrant-pricing-features__table-wrapper"
|
||||||
<button
|
data-features-tab="managed"
|
||||||
class="qdrant-pricing-features__tier-tab{{ if eq $index 0 }}
|
>
|
||||||
qdrant-pricing-features__tier-tab--active
|
{{ partial "pricing/qdrant-pricing-features-table" (dict
|
||||||
{{ end }}"
|
"tiers" .Params.tiers
|
||||||
data-tier="{{ $tier.name | urlize }}"
|
"sections" .Params.sections
|
||||||
>
|
"ctas" .Params.ctas
|
||||||
{{ $tier.name }}
|
) }}
|
||||||
</button>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="qdrant-pricing-features__table">
|
{{/* On-Premise table */}}
|
||||||
<div class="qdrant-pricing-features__table-header">
|
<div
|
||||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature"></div>
|
class="qdrant-pricing-features__table-wrapper qdrant-pricing-features__table-wrapper--hidden"
|
||||||
{{ range .Params.tiers }}
|
data-features-tab="on-premise"
|
||||||
<div
|
>
|
||||||
class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--tier{{ if .highlight }}
|
{{ partial "pricing/qdrant-pricing-features-table" (dict
|
||||||
qdrant-pricing-features__table-cell--highlight
|
"tiers" .Params.onPremiseTiers
|
||||||
{{ end }}"
|
"sections" .Params.onPremiseSections
|
||||||
data-tier-col="{{ .name | urlize }}"
|
"ctas" .Params.onPremiseCtas
|
||||||
>
|
"classPrefix" "qdrant-pricing-features"
|
||||||
{{ .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>
|
</div>
|
||||||
|
|
||||||
{{ with .Params.compareButton }}
|
{{ with .Params.compareButton }}
|
||||||
|
|||||||
+1
-10
@@ -14,17 +14,8 @@
|
|||||||
</a>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ with .Params.link }}
|
{{ with .Params.link }}
|
||||||
<a href="{{ .url }}" class="qdrant-pricing-hero__link">
|
<a href="{{ .url }}" class="link qdrant-pricing-hero__link">
|
||||||
{{ .text }}
|
{{ .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>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user