krzysztof/landing_page
1
0
Fork 0
mirror of https://github.com/qdrant/landing_page.git synced 2026-10-05 19:08:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

add support tiers to the pricing page (#2443)

Browse Source 
* add support tiers to the pricing page

* round corner for collapsed section when no footer is present

* upd table icons; responsiveness fixes
This commit is contained in:
trean
2026-06-26 15:07:32 +02:00
committed by GitHub
parent 44bf1f472b
commit 282858de99
8 changed files with 438 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
qdrant-landing/themes/qdrant-2024/assets/css/partials/pricing/_index.scss
+1
View File
@@ -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
+165 -3
View File
@@ -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
+7 -1
View File
@@ -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
+92
View File
@@ -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;
}
}
}