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-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';

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;
+      }
+    }
+  }
 }

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 {

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;
+    }
+  }
+}

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 "" }}
 
 
-<div class="pricing-table">
+<div
+  class="pricing-table{{ with $modifier }} pricing-table--{{ . }}{{ end }}"
+  style="--tier-count: {{ len $tiers }}"
+>
   {{/* Mobile tier tabs */}}
   <div class="pricing-table__tier-tabs">
     {{ range $index, $tier := $tiers }}
@@ -63,12 +66,11 @@
                 <div class="pricing-table__table-cell pricing-table__table-cell--feature">
                   {{ .name }}
                 </div>
-                {{ range $i, $tier := $tiers }}
-                  {{ $key := index $featureKeys $i }}
-                  {{ $val := index $feature $key }}
+                {{ range $tiers }}
+                  {{ $val := index $feature .id }}
                   <div
-                    class="pricing-table__table-cell{{ if $tier.highlight }} pricing-table__table-cell--highlight{{ end }}"
-                    data-tier-col="{{ $tier.id }}"
+                    class="pricing-table__table-cell{{ if .highlight }} pricing-table__table-cell--highlight{{ end }}"
+                    data-tier-col="{{ .id }}"
                   >
                   {{ if eq $val true }}
                     <svg
@@ -98,14 +100,14 @@
                     >
                       <path
                         d="M15 5L5 15M5 5L15 15"
-                        stroke="#717C99"
+                        stroke="currentColor"
                         stroke-width="1.5"
                         stroke-linecap="round"
                         stroke-linejoin="round"
                       />
                     </svg>
                   {{ else }}
-                    <span class="pricing-table__text{{ if $tier.bold }} pricing-table__text--bold{{ end }}">{{ $val }}</span>
+                    <span class="pricing-table__text{{ if .bold }} pricing-table__text--bold{{ end }}">{{ $val }}</span>
                   {{ end }}
                   </div>
                 {{ end }}
@@ -116,28 +118,30 @@
       {{ end }}
     </div>
 
-    <div class="pricing-table__table-footer">
-      <div class="pricing-table__table-cell pricing-table__table-cell--feature"></div>
-      {{ range $index, $cta := $ctas }}
-        {{ $tier := index $tiers $index }}
-        <div
-          class="pricing-table__table-cell pricing-table__table-cell--cta{{ if $tier.highlight }}
-            pricing-table__table-cell--highlight
-          {{ end }}"
-          data-tier-col="{{ $tier.id }}"
-        >
-          <a
-            href="{{ $cta.url }}"
-            class="button {{ if $cta.contained }}
-              button_contained
-            {{ else }}
-              button_outlined
+    {{ with $ctas }}
+      <div class="pricing-table__table-footer">
+        <div class="pricing-table__table-cell pricing-table__table-cell--feature"></div>
+        {{ range $index, $cta := . }}
+          {{ $tier := index $tiers $index }}
+          <div
+            class="pricing-table__table-cell pricing-table__table-cell--cta{{ if $tier.highlight }}
+              pricing-table__table-cell--highlight
             {{ end }}"
+            data-tier-col="{{ $tier.id }}"
           >
-            {{ $cta.text }}
-          </a>
-        </div>
-      {{ end }}
-    </div>
+            <a
+              href="{{ $cta.url }}"
+              class="button {{ if $cta.contained }}
+                button_contained
+              {{ else }}
+                button_outlined
+              {{ end }}"
+            >
+              {{ $cta.text }}
+            </a>
+          </div>
+        {{ end }}
+      </div>
+    {{ end }}
   </div>
 </div>

qdrant-landing/themes/qdrant-2024/layouts/partials/pricing/qdrant-pricing-support-reliability.html

@@ -0,0 +1,25 @@
+<section class="qdrant-pricing-support-reliability">
+  <div class="container">
+    <div class="qdrant-pricing-support-reliability__header">
+      {{ with .Params.label }}
+        <span class="qdrant-pricing-support-reliability__label">{{ . }}</span>
+      {{ end }}
+      <h2 class="qdrant-pricing-support-reliability__title">{{ .Params.title }}</h2>
+    </div>
+
+    {{ partial "pricing/qdrant-pricing-features-table" (dict
+      "tiers" .Params.tiers
+      "sections" .Params.sections
+      "modifier" "dark"
+      )
+    }}
+
+    {{ with .Params.button }}
+      <div class="qdrant-pricing-support-reliability__actions">
+        <a href="{{ .url }}" class="button button_contained button_lg qdrant-pricing-support-reliability__button">
+          {{ .text }}
+        </a>
+      </div>
+    {{ end }}
+  </div>
+</section>

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 }}