From 282858de99e737777bdc40dba779a241d144b08c Mon Sep 17 00:00:00 2001 From: trean Date: Fri, 26 Jun 2026 15:07:32 +0200 Subject: [PATCH] add support tiers to the pricing page (#2443) * add support tiers to the pricing page * round corner for collapsed section when no footer is present * upd table icons; responsiveness fixes --- .../qdrant-pricing-support-reliability.md | 110 ++++++++++++ .../assets/css/partials/pricing/_index.scss | 1 + .../css/partials/pricing/_pricing-table.scss | 168 +++++++++++++++++- .../pricing/_qdrant-pricing-doors-b.scss | 8 +- .../_qdrant-pricing-support-reliability.scss | 92 ++++++++++ .../qdrant-pricing-features-table.html | 64 +++---- .../qdrant-pricing-support-reliability.html | 25 +++ .../qdrant-2024/layouts/pricing/list.html | 4 + 8 files changed, 438 insertions(+), 34 deletions(-) create mode 100644 qdrant-landing/content/pricing/qdrant-pricing-support-reliability.md create mode 100644 qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-support-reliability.scss create mode 100644 qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-support-reliability.html diff --git a/qdrant-landing/content/pricing/qdrant-pricing-support-reliability.md b/qdrant-landing/content/pricing/qdrant-pricing-support-reliability.md new file mode 100644 index 000000000..a3677a177 --- /dev/null +++ b/qdrant-landing/content/pricing/qdrant-pricing-support-reliability.md @@ -0,0 +1,110 @@ +--- +label: Enterprise Support +title: Support & Reliability +tiers: + - id: community + name: Community + highlight: false + bold: false + - id: standard + name: Standard + highlight: false + bold: false + - id: premium + name: Premium + highlight: false + bold: false + - id: enterprise + name: Enterprise + highlight: false + bold: false +sections: + - name: Pricing + features: + - name: Price + community: Free + standard: Included with Paid Tier + premium: On Request + enterprise: On Request + - name: Availability & Uptime + features: + - name: Helpdesk Hours + community: Discord Only + standard: 10h/day (Business Hours) + premium: 24/7, 365 + enterprise: 24/7, 365 + - name: Uptime SLA + community: false + standard: 99.5% + premium: 99.9% (99.95% Multi-AZ) + enterprise: Custom + - name: Response SLA + features: + - name: Severity 1 (Full service outage) + community: false + standard: 4h (Business Hours) + premium: 1h (24/7) + enterprise: Custom + - name: Support Channels + features: + - name: Email / Ticket Portal + community: false + standard: true + premium: true + enterprise: true + - name: Private Slack / Discord / Teams + community: false + standard: false + premium: true + enterprise: true + - name: Advisory Services + features: + - name: Migration Support + community: false + standard: true + premium: true + enterprise: true + - name: Architecture Reviews + community: false + standard: false + premium: true + enterprise: true + - name: Performance Consulting + community: false + standard: false + premium: true + enterprise: true + - name: Add-Ons + features: + - name: Forward Deployed Engineer + community: false + standard: false + premium: Optional + enterprise: Optional + - name: Infrastructure/Security + features: + - name: SSO + community: false + standard: false + premium: true + enterprise: true + - name: VPC Private Links + community: false + standard: false + premium: true + enterprise: true + - name: Multi-AZ Deployment + community: false + standard: false + premium: true + enterprise: true + - name: Encryption with Shared Keys + community: false + standard: false + premium: true + enterprise: true +button: + text: Talk to Our Team + url: /contact-us/ +sitemapExclude: true +--- 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 f10954516..7897595c9 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 @@ -6,6 +6,7 @@ @import 'qdrant-pricing-marketplaces'; @import 'pricing-table'; @import 'qdrant-pricing-features'; +@import 'qdrant-pricing-support-reliability'; @import 'qdrant-pricing-faq'; @import 'qdrant-pricing-comparison'; @import 'qdrant-pricing-get-contacted'; 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 index 3307676a0..9bfacb8bc 100644 --- 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 @@ -4,7 +4,7 @@ /* Shared pricing table styles – used by qdrant-pricing-features and qdrant-pricing-comparison */ :root { - --tier-count: 4; + --tier-count: 4; // fallback; overridden per table via inline style in qdrant-pricing-features-table.html --feature-cell-width: 19.375rem; } @@ -238,6 +238,21 @@ } } + &__table:not(:has(.pricing-table__table-footer)) { + .pricing-table__table-body + .pricing-table__table-section:last-of-type + .pricing-table__table-section-rows + .pricing-table__table-row:last-child + .pricing-table__table-cell:last-child { + border-bottom-right-radius: pxToRem(8); + } + + .pricing-table__table-section:last-of-type.pricing-table__table-section--collapsed + .pricing-table__table-section-header { + border-bottom-right-radius: pxToRem(8); + } + } + &--highlight { background-color: $secondary-blue-95; } @@ -302,6 +317,7 @@ @include media-breakpoint-down(lg) { &__tier-tabs { display: flex; + flex-wrap: wrap; gap: 0; padding: pxToRem(4); margin-bottom: 0; @@ -313,11 +329,16 @@ } &__tier-tab { - flex: 1; - padding: $spacer * 0.5 $spacer; + flex: 1 1 0; + min-width: min-content; + max-width: 100%; + padding: $spacer * 0.5 $spacer * 0.5; font-size: pxToRem(14); font-weight: 400; line-height: 1.5; + text-align: center; + white-space: normal; + overflow-wrap: normal; color: $neutral-30; background: transparent; border: none; @@ -382,6 +403,27 @@ } } + &__table:not(:has(.pricing-table__table-footer)) { + .pricing-table__table-body + .pricing-table__table-section:last-of-type + .pricing-table__table-section-rows + .pricing-table__table-row:last-child { + .pricing-table__table-cell:first-child { + border-bottom-left-radius: pxToRem(8); + } + + .pricing-table__table-cell--mobile-active { + border-bottom-right-radius: pxToRem(8); + border-right: 0.5px solid $neutral-80; + } + } + + .pricing-table__table-section:last-of-type.pricing-table__table-section--collapsed + .pricing-table__table-section-header { + border-bottom-right-radius: pxToRem(8); + } + } + &__table-footer { display: grid; grid-template-columns: 1fr; @@ -438,4 +480,124 @@ line-height: 1.5; } } + + &--dark { + $dark-border: 0.5px solid $neutral-40; + + .pricing-table__tier-tabs { + background-color: $neutral-20; + border: $dark-border; + border-bottom: none; + } + + .pricing-table__tier-tab { + color: $neutral-80; + + &--active { + color: $neutral-98; + background-color: $neutral-30; + } + } + + .pricing-table__table-cell { + background-color: $neutral-20; + color: $neutral-80; + border-left: $dark-border; + border-bottom: $dark-border; + } + + .pricing-table__table-cell--feature { + color: $neutral-80; + } + + .pricing-table__table-cell--highlight { + background-color: $neutral-20; + } + + .pricing-table__table-header .pricing-table__table-cell:not(.pricing-table__table-cell--feature) { + background-color: $neutral-20; + color: $neutral-98; + border-top: $dark-border; + border-left: $dark-border; + border-bottom: none; + } + + .pricing-table__table-header .pricing-table__table-cell--feature, + .pricing-table__table-footer .pricing-table__table-cell--feature { + background-color: transparent; + border: none; + } + + .pricing-table__table-header .pricing-table__table-cell:last-child, + .pricing-table__table-footer .pricing-table__table-cell:last-child, + .pricing-table__table-row .pricing-table__table-cell:last-child { + border-right: $dark-border; + } + + .pricing-table__table-section-header { + background-color: $neutral-30; + border-left: $dark-border; + border-right: $dark-border; + border-bottom: $dark-border; + } + + .pricing-table__table-section:first-of-type .pricing-table__table-section-header { + border-top: $dark-border; + } + + .pricing-table__table-section-title { + color: $neutral-98; + } + + .pricing-table__chevron { + color: $neutral-98; + } + + .pricing-table__check { + color: $neutral-98; + } + + .pricing-table__x { + color: $neutral-60; + } + + .pricing-table__text { + color: $neutral-80; + + &--bold { + color: $neutral-98; + } + } + + .pricing-table__table-footer .pricing-table__table-cell:not(.pricing-table__table-cell--feature) { + background-color: $neutral-20; + border-left: $dark-border; + border-bottom: $dark-border; + } + + @include media-breakpoint-down(lg) { + .pricing-table__table-section-rows { + border-right: $dark-border; + } + + .pricing-table__table-cell[data-tier-col].pricing-table__table-cell--mobile-active { + border-right: none; + } + + .pricing-table__table:not(:has(.pricing-table__table-footer)) { + .pricing-table__table-body + .pricing-table__table-section:last-of-type + .pricing-table__table-section-rows + .pricing-table__table-row:last-child + .pricing-table__table-cell--mobile-active { + border-right: $dark-border; + } + } + + .pricing-table__table-footer .pricing-table__table-cell--cta[data-tier-col].pricing-table__table-cell--mobile-active { + border-left: $dark-border; + border-right: $dark-border; + } + } + } } 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 acc3421c2..44f7f2fc4 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 @@ -19,12 +19,16 @@ } &__tab { + display: flex; + align-items: center; + justify-content: center; padding: $spacer * 0.5 $spacer * 1.5; min-width: pxToRem(160); - height: pxToRem(40); + min-height: pxToRem(40); font-size: pxToRem(16); font-weight: 400; line-height: 1.5; + text-align: center; color: $neutral-30; background: transparent; border: none; @@ -318,6 +322,8 @@ &__tab { flex: 1; min-width: 0; + padding: $spacer * 0.5 $spacer * 0.5; + font-size: pxToRem(14); } &__doors-wrapper { diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-support-reliability.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-support-reliability.scss new file mode 100644 index 000000000..99f25a714 --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_qdrant-pricing-support-reliability.scss @@ -0,0 +1,92 @@ +@use '../../helpers/functions' as *; + +.qdrant-pricing-support-reliability { + position: relative; + overflow: hidden; + padding: $spacer * 7.5 0; + background-color: $neutral-10; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: -14rem; + z-index: 0; + pointer-events: none; + background: + radial-gradient( + 104% 112% at 50% 0%, + rgba($secondary-violet-30, 0) 0%, + rgba($secondary-violet-30, 0) 80%, + rgba($secondary-violet-30, 0.8) 96%, + $secondary-violet-30 100% + ), + radial-gradient( + 104% 112% at 50% 100%, + rgba($secondary-violet-30, 0) 0%, + rgba($secondary-violet-30, 0) 80%, + rgba($secondary-violet-30, 0.8) 96%, + $secondary-violet-30 100% + ), + $neutral-10; + } + + > .container { + position: relative; + z-index: 1; + } + + &__header { + text-align: center; + margin-bottom: $spacer * 4; + } + + &__label { + display: inline-block; + margin-bottom: $spacer; + font-family: $font-family-monospace; + font-size: $font-size-s; + font-weight: 500; + line-height: $line-height-sm; + letter-spacing: pxToRem(2); + text-transform: uppercase; + color: $neutral-94; + } + + &__title { + margin: 0; + font-size: $h3-font-size; + font-weight: 600; + line-height: 1.1; + letter-spacing: -0.5px; + color: $neutral-98; + } + + &__actions { + display: flex; + justify-content: center; + margin-top: $spacer * 4; + } + + &__button { + min-width: pxToRem(166); + } + + @include media-breakpoint-down(lg) { + padding: $spacer * 5 0; + + &__header { + margin-bottom: $spacer * 2.5; + } + + &__title { + font-size: $h4-font-size; + } + + &__actions { + margin-top: $spacer * 2.5; + } + } +} 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 index fbc0bfab0..ee8d7caa4 100644 --- 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 @@ -1,10 +1,13 @@ {{ $tiers := .tiers }} {{ $sections := .sections }} {{ $ctas := .ctas }} -{{ $featureKeys := slice "oss" "free" "standard" "premium" }} +{{ $modifier := .modifier | default "" }} -
+
{{/* Mobile tier tabs */}}
{{ range $index, $tier := $tiers }} @@ -63,12 +66,11 @@
{{ .name }}
- {{ range $i, $tier := $tiers }} - {{ $key := index $featureKeys $i }} - {{ $val := index $feature $key }} + {{ range $tiers }} + {{ $val := index $feature .id }}
{{ if eq $val true }} {{ else }} - {{ $val }} + {{ $val }} {{ end }}
{{ end }} @@ -116,28 +118,30 @@ {{ end }}
-
-
- {{ range $index, $cta := $ctas }} - {{ $tier := index $tiers $index }} -
- +
+ {{ range $index, $cta := . }} + {{ $tier := index $tiers $index }} +
- {{ $cta.text }} - -
- {{ end }} -
+ + {{ $cta.text }} + +
+ {{ end }} +
+ {{ end }}
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-support-reliability.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-support-reliability.html new file mode 100644 index 000000000..f90b7980e --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-support-reliability.html @@ -0,0 +1,25 @@ +
+
+
+ {{ with .Params.label }} + {{ . }} + {{ end }} +

{{ .Params.title }}

+
+ + {{ partial "pricing/qdrant-pricing-features-table" (dict + "tiers" .Params.tiers + "sections" .Params.sections + "modifier" "dark" + ) + }} + + {{ with .Params.button }} +
+ + {{ .text }} + +
+ {{ end }} +
+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html b/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html index d416d2aaf..e336e7e46 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html @@ -13,6 +13,10 @@ {{ partial "pricing/qdrant-pricing-features" . }} {{ end }} + {{ with (.Site.GetPage "/pricing/qdrant-pricing-support-reliability") }} + {{ partial "pricing/qdrant-pricing-support-reliability" . }} + {{ end }} + {{ with (.Site.GetPage "/pricing/qdrant-pricing-faq") }} {{ partial "pricing/qdrant-pricing-faq" . }} {{ end }}