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
|
||||
premium: true
|
||||
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
|
||||
text: Start Free
|
||||
url: https://cloud.qdrant.io
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
transition:
|
||||
all 0.3s ease-in-out,
|
||||
color 0.1s linear;
|
||||
padding-right: $icon-width;
|
||||
padding-right: calc($icon-width + 6px);
|
||||
|
||||
&:before {
|
||||
display: block;
|
||||
@@ -52,7 +52,6 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
padding-right: calc($icon-width + 6px);
|
||||
&:after {
|
||||
animation: dash 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@import 'qdrant-pricing-doors-a';
|
||||
@import 'qdrant-pricing-doors-b';
|
||||
@import 'qdrant-pricing-marketplaces';
|
||||
@import 'pricing-table';
|
||||
@import 'qdrant-pricing-features';
|
||||
@import 'qdrant-pricing-faq';
|
||||
@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;
|
||||
justify-content: center;
|
||||
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;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
max-width: pxToRem(600);
|
||||
margin: 0 auto;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
height: pxToRem(100);
|
||||
margin-bottom: -$spacer * 1.5;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
@@ -68,7 +68,6 @@
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@@ -78,6 +77,7 @@
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
@@ -95,25 +95,7 @@
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-flex;
|
||||
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);
|
||||
}
|
||||
}
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@@ -121,23 +103,37 @@
|
||||
|
||||
&__container {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: $spacer * 1.5 $spacer * 1.25;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
width: pxToRem(100);
|
||||
height: pxToRem(84);
|
||||
margin: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
|
||||
+6
-253
@@ -109,8 +109,13 @@
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
height: calc(1ex + 3px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
svg {
|
||||
@@ -151,259 +156,7 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+46
-6
@@ -43,8 +43,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__doors {
|
||||
&__doors-wrapper {
|
||||
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%;
|
||||
max-width: pxToRem(1110);
|
||||
margin: 0 auto;
|
||||
@@ -52,13 +60,26 @@
|
||||
&--hidden {
|
||||
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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: subgrid;
|
||||
grid-row: span 4;
|
||||
background-color: $neutral-98;
|
||||
|
||||
[data-doors-tab='on-premise'] & {
|
||||
grid-row: span 5;
|
||||
grid-template-rows: subgrid;
|
||||
}
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: none;
|
||||
|
||||
@@ -163,6 +184,10 @@
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(168);
|
||||
|
||||
[data-doors-tab='on-premise'] & {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__feature-group-label {
|
||||
@@ -199,7 +224,7 @@
|
||||
&__check-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
color: $neutral-30;
|
||||
color: $primary-50;
|
||||
}
|
||||
|
||||
&__marketplace {
|
||||
@@ -304,12 +329,27 @@
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 2;
|
||||
|
||||
&__doors-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: unset;
|
||||
grid-template-rows: unset;
|
||||
gap: $spacer * 1.5;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__door {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-row: unset;
|
||||
grid-template-rows: unset;
|
||||
border-radius: pxToRem(8);
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: 1px solid $neutral-90;
|
||||
@@ -332,7 +372,7 @@
|
||||
padding: 0 $spacer * 1.25 $spacer * 2;
|
||||
|
||||
&__tabs {
|
||||
width: 100%;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+6
-251
@@ -29,6 +29,12 @@
|
||||
border-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__table-wrapper {
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -212,24 +74,6 @@
|
||||
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) {
|
||||
@@ -244,94 +88,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+3
-11
@@ -96,18 +96,10 @@
|
||||
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);
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
height: calc(1ex + 3px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -169,11 +169,34 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
|
||||
// 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 featuresTableWrappers = document.querySelectorAll('[data-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');
|
||||
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) {
|
||||
const allTierCols = document.querySelectorAll('[data-tier-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}"]`);
|
||||
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) {
|
||||
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');
|
||||
tierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active'));
|
||||
tab.classList.add('pricing-table__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');
|
||||
document.querySelectorAll('.pricing-table__table-section').forEach((section) => {
|
||||
const header = section.querySelector('.pricing-table__table-section-header');
|
||||
const rows = section.querySelector('.qdrant-pricing-features__table-section-rows');
|
||||
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', () => {
|
||||
const isCollapsed = section.classList.contains('qdrant-pricing-features__table-section--collapsed');
|
||||
const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
section.classList.remove('qdrant-pricing-features__table-section--collapsed');
|
||||
section.classList.remove('pricing-table__table-section--collapsed');
|
||||
} else {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
rows.style.maxHeight = '0px';
|
||||
section.classList.add('qdrant-pricing-features__table-section--collapsed');
|
||||
section.classList.add('pricing-table__table-section--collapsed');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
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';
|
||||
}
|
||||
});
|
||||
@@ -249,51 +276,51 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
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');
|
||||
col.classList.remove('pricing-table__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');
|
||||
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) {
|
||||
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');
|
||||
comparisonTierTabs.forEach((t) => t.classList.remove('pricing-table__tier-tab--active'));
|
||||
tab.classList.add('pricing-table__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');
|
||||
document.querySelectorAll('.qdrant-pricing-comparison .pricing-table__table-section').forEach((section) => {
|
||||
const header = section.querySelector('.pricing-table__table-section-header');
|
||||
const rows = section.querySelector('.pricing-table__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');
|
||||
const isCollapsed = section.classList.contains('pricing-table__table-section--collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
section.classList.remove('qdrant-pricing-comparison__table-section--collapsed');
|
||||
section.classList.remove('pricing-table__table-section--collapsed');
|
||||
} else {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
rows.style.maxHeight = '0px';
|
||||
section.classList.add('qdrant-pricing-comparison__table-section--collapsed');
|
||||
section.classList.add('pricing-table__table-section--collapsed');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
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';
|
||||
}
|
||||
});
|
||||
|
||||
+2
-66
@@ -6,78 +6,14 @@
|
||||
<div class="container">
|
||||
<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>
|
||||
<img src="/img/calculator.png" alt="" width="76" height="64" />
|
||||
</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 }}">
|
||||
<a class="link link_md 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>
|
||||
|
||||
+6
-259
@@ -51,17 +51,8 @@
|
||||
<a href="{{ .url }}" class="button button_contained button_md">{{ .text }}</a>
|
||||
{{ end }}
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ .url }}" class="qdrant-pricing-comparison-hero__link">
|
||||
<a href="{{ .url }}" class="link 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>
|
||||
@@ -71,254 +62,10 @@
|
||||
|
||||
<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>
|
||||
{{ partial "pricing/qdrant-pricing-features-table" (dict
|
||||
"tiers" .Params.tiers
|
||||
"sections" .Params.sections
|
||||
"ctas" .Params.ctas
|
||||
) }}
|
||||
</div>
|
||||
</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>
|
||||
|
||||
{{/* 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 }}
|
||||
{{/* Managed table */}}
|
||||
<div
|
||||
class="qdrant-pricing-features__table-wrapper"
|
||||
data-features-tab="managed"
|
||||
>
|
||||
{{ partial "pricing/qdrant-pricing-features-table" (dict
|
||||
"tiers" .Params.tiers
|
||||
"sections" .Params.sections
|
||||
"ctas" .Params.ctas
|
||||
) }}
|
||||
</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>
|
||||
{{/* On-Premise table */}}
|
||||
<div
|
||||
class="qdrant-pricing-features__table-wrapper qdrant-pricing-features__table-wrapper--hidden"
|
||||
data-features-tab="on-premise"
|
||||
>
|
||||
{{ partial "pricing/qdrant-pricing-features-table" (dict
|
||||
"tiers" .Params.onPremiseTiers
|
||||
"sections" .Params.onPremiseSections
|
||||
"ctas" .Params.onPremiseCtas
|
||||
"classPrefix" "qdrant-pricing-features"
|
||||
) }}
|
||||
</div>
|
||||
|
||||
{{ with .Params.compareButton }}
|
||||
|
||||
+1
-10
@@ -14,17 +14,8 @@
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ .url }}" class="qdrant-pricing-hero__link">
|
||||
<a href="{{ .url }}" class="link 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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Reference in New Issue
Block a user