diff --git a/qdrant-landing/content/pricing/qdrant-pricing-features.md b/qdrant-landing/content/pricing/qdrant-pricing-features.md index f60cc8f60..20d88e263 100644 --- a/qdrant-landing/content/pricing/qdrant-pricing-features.md +++ b/qdrant-landing/content/pricing/qdrant-pricing-features.md @@ -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 diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_link.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_link.scss index caa12e73f..2c69f344a 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_link.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_link.scss @@ -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; } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_index.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_index.scss index 3d5c13161..bce55b396 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_index.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_index.scss @@ -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'; diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_pricing-table.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_pricing-table.scss new file mode 100644 index 000000000..00af8dacd --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_pricing-table.scss @@ -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; + } + } + } + } +} diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-calculator.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-calculator.scss index e495ebbbb..d07e853ae 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-calculator.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-calculator.scss @@ -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 { diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-comparison.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-comparison.scss index 833e834bb..3ca59d92a 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-comparison.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-comparison.scss @@ -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; - } - } - } } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-doors-b.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-doors-b.scss index cd2093196..8f2921c2b 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-doors-b.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-doors-b.scss @@ -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; } } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-features.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-features.scss index 002cc5ee7..441e85f19 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-features.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-features.scss @@ -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; - } - } - } } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-hero.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-hero.scss index 2edb501da..ce50fe7fb 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-hero.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-hero.scss @@ -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); } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/js/index.js b/qdrant-landing/themes/qdrant-2024/assets/js/index.js index 06a3f338e..d114c1a75 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/js/index.js +++ b/qdrant-landing/themes/qdrant-2024/assets/js/index.js @@ -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'; } }); diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-calculator.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-calculator.html index 8ba139cae..3ac8d2520 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-calculator.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-calculator.html @@ -6,78 +6,14 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

{{ .Params.title }}

{{ .Params.linkPrefix }} - + {{ .Params.link.text }} - - -

diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-comparison.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-comparison.html index fdd1b3c74..cb72d96a3 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-comparison.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-comparison.html @@ -51,17 +51,8 @@ {{ .text }} {{ end }} {{ with .Params.link }} - + {{ .text }} - - - {{ end }}
@@ -71,254 +62,10 @@
-
- {{ range $index, $tier := .Params.tiers }} - - {{ end }} -
- -
-
-
- {{ range .Params.tiers }} -
- {{ .name }} -
- {{ end }} -
- -
- {{ range .Params.sections }} -
-
- {{ .name }} - - - -
-
- {{ range .features }} -
-
- {{ .name }} -
-
- {{ if eq .oss true }} - - - - {{ else if eq .oss false }} - - - - {{ else }} - {{ .oss }} - {{ end }} -
-
- {{ if eq .free true }} - - - - {{ else if eq .free false }} - - - - {{ else }} - {{ .free }} - {{ end }} -
-
- {{ if eq .paid true }} - - - - {{ else if eq .paid false }} - - - - {{ else }} - {{ .paid }} - {{ end }} -
-
- {{ if eq .premium true }} - - - - {{ else if eq .premium false }} - - - - {{ else }} - {{ .premium }} - {{ end }} -
-
- {{ end }} -
-
- {{ end }} -
- -
-
- {{ range $index, $cta := .Params.ctas }} -
- - {{ $cta.text }} - -
- {{ end }} -
-
+ {{ partial "pricing/qdrant-pricing-features-table" (dict + "tiers" .Params.tiers + "sections" .Params.sections + "ctas" .Params.ctas + ) }}
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-doors.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-doors.html index 5040bf0c2..18557c83b 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-doors.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-doors.html @@ -11,12 +11,14 @@
{{/* Per-tab pricing tiers */}} +
{{ range .context.Params.tabs }}
{{ range .tiers }} + {{ $tier := . }}
{{/* Heading */}}
@@ -24,15 +26,9 @@ {{ if .badge }}
Runs on - - - + + +
{{ end }} @@ -79,7 +75,7 @@ {{/* Marketplace logos */}} - {{ with $.marketplace }} + {{ with $tier.marketplace }}

{{ .label }}

@@ -171,7 +167,7 @@ {{ end }} {{/* Contact link for premium tier */}} - {{ with $.contactLink }} + {{ with $tier.contactLink }} {{ .text }} @@ -228,5 +224,6 @@ {{ end }}
{{ end }} +
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features-table.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features-table.html new file mode 100644 index 000000000..09de80367 --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features-table.html @@ -0,0 +1,255 @@ +{{ $tiers := .tiers }} +{{ $sections := .sections }} +{{ $ctas := .ctas }} +{{ $tierCols := slice "oss" "free-tier" "paid-tier" "premium-tier" }} + +
+{{/* Mobile tier tabs */}} +
+ {{ range $index, $tier := $tiers }} + + {{ end }} +
+ +
+
+
+ {{ range $tiers }} +
+ {{ .name }} +
+ {{ end }} +
+ +
+ {{ range $sections }} +
+
+ {{ .name }} + + + +
+
+ {{ range .features }} +
+
+ {{ .name }} +
+
+ {{ if eq .oss true }} + + + + {{ else if eq .oss false }} + + + + {{ else }} + {{ .oss }} + {{ end }} +
+
+ {{ if eq .free true }} + + + + {{ else if eq .free false }} + + + + {{ else }} + {{ .free }} + {{ end }} +
+
+ {{ if eq .paid true }} + + + + {{ else if eq .paid false }} + + + + {{ else }} + {{ .paid }} + {{ end }} +
+
+ {{ if eq .premium true }} + + + + {{ else if eq .premium false }} + + + + {{ else }} + {{ .premium }} + {{ end }} +
+
+ {{ end }} +
+
+ {{ end }} +
+ +
+
+ {{ range $index, $cta := $ctas }} +
+ + {{ $cta.text }} + +
+ {{ end }} +
+
+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features.html index 9a0b66786..669bae067 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-features.html @@ -10,253 +10,29 @@
- {{/* Mobile tier tabs */}} -
- {{ range $index, $tier := .Params.tiers }} - - {{ end }} + {{/* Managed table */}} +
+ {{ partial "pricing/qdrant-pricing-features-table" (dict + "tiers" .Params.tiers + "sections" .Params.sections + "ctas" .Params.ctas + ) }}
-
-
-
- {{ range .Params.tiers }} -
- {{ .name }} -
- {{ end }} -
- -
- {{ range .Params.sections }} -
-
- {{ .name }} - - - -
-
- {{ range .features }} -
-
- {{ .name }} -
-
- {{ if eq .oss true }} - - - - {{ else if eq .oss false }} - - - - {{ else }} - {{ .oss }} - {{ end }} -
-
- {{ if eq .free true }} - - - - {{ else if eq .free false }} - - - - {{ else }} - {{ .free }} - {{ end }} -
-
- {{ if eq .paid true }} - - - - {{ else if eq .paid false }} - - - - {{ else }} - {{ .paid }} - {{ end }} -
-
- {{ if eq .premium true }} - - - - {{ else if eq .premium false }} - - - - {{ else }} - {{ .premium }} - {{ end }} -
-
- {{ end }} -
-
- {{ end }} -
- -
-
- {{ range $index, $cta := .Params.ctas }} -
- - {{ $cta.text }} - -
- {{ end }} -
+ {{/* On-Premise table */}} +
+ {{ partial "pricing/qdrant-pricing-features-table" (dict + "tiers" .Params.onPremiseTiers + "sections" .Params.onPremiseSections + "ctas" .Params.onPremiseCtas + "classPrefix" "qdrant-pricing-features" + ) }}
{{ with .Params.compareButton }} diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-hero.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-hero.html index 2c2482920..694a51acb 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-hero.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-hero.html @@ -14,17 +14,8 @@ {{ end }} {{ with .Params.link }} - + {{ .text }} - - - {{ end }}
diff --git a/qdrant-landing/themes/qdrant-2024/static/img/calculator.png b/qdrant-landing/themes/qdrant-2024/static/img/calculator.png new file mode 100644 index 000000000..be7b09f77 Binary files /dev/null and b/qdrant-landing/themes/qdrant-2024/static/img/calculator.png differ