This commit is contained in:
trean
2026-03-11 23:33:56 +01:00
parent fd608d4e82
commit cf4436ce52
8 changed files with 165 additions and 196 deletions
@@ -150,9 +150,14 @@
&__table-footer {
display: flex;
justify-content: end;
.pricing-table__table-cell {
flex: 1;
max-width: 12.53rem;
&:first-child {
max-width: 18.74rem;
border-right: 0;
}
&:not(:first-child) {
@@ -16,15 +16,7 @@
position: absolute;
inset: 0;
pointer-events: none;
}
&__grid {
position: absolute;
inset: 0;
background-image: linear-gradient(to right, rgba(180, 186, 204, 0.3) 1px, transparent 1px),
linear-gradient(to bottom, rgba(180, 186, 204, 0.3) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
background: url('/img/prices-background.svg') top center / 100% auto no-repeat;
}
&__content {
@@ -19,77 +19,6 @@
margin: 0 auto;
}
&__item {
border-bottom: 1px solid $neutral-80;
&:first-child {
border-top: 1px solid $neutral-80;
}
&--active {
.qdrant-pricing-faq__answer {
display: block;
}
.qdrant-pricing-faq__icon-plus {
display: none;
}
.qdrant-pricing-faq__icon-minus {
display: block;
}
}
}
&__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: $spacer * 1.5;
padding: $spacer * 2 $spacer * 2.5;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background-color: $neutral-98;
}
}
&__question-text {
flex: 1;
margin: 0;
font-size: pxToRem(24);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.5px;
color: $neutral-20;
}
&__icon {
flex-shrink: 0;
color: $neutral-20;
}
&__icon-plus {
display: block;
}
&__icon-minus {
display: none;
}
&__answer {
display: none;
padding: 0 $spacer * 2.5 $spacer * 2.5 $spacer * 2.5;
}
&__answer-text {
margin: 0;
font-size: pxToRem(18);
line-height: 1.5;
color: $neutral-40;
}
@include media-breakpoint-down(lg) {
padding: $spacer * 4 0 $spacer * 2;
@@ -97,22 +26,6 @@
margin-bottom: $spacer * 3;
font-size: pxToRem(40);
}
&__question {
padding: $spacer * 1.5 $spacer * 1.5;
}
&__question-text {
font-size: pxToRem(18);
}
&__answer {
padding: 0 $spacer * 1.5 $spacer * 1.5 $spacer * 1.5;
}
&__answer-text {
font-size: pxToRem(16);
}
}
@include media-breakpoint-down(md) {
@@ -127,21 +40,5 @@
&__questions {
margin: 0 $spacer * 1.25;
}
&__question {
padding: $spacer * 1.5 0;
}
&__question-text {
font-size: pxToRem(16);
}
&__answer {
padding: 0 0 $spacer * 1.5 0;
}
&__answer-text {
font-size: pxToRem(14);
}
}
}
@@ -66,6 +66,10 @@
.button {
padding: $spacer * 0.5 $spacer * 1.375;
}
.button_outlined {
color: $neutral-20;
}
}
@include media-breakpoint-down(xl) {
@@ -157,17 +157,6 @@ document.addEventListener('DOMContentLoaded', function () {
el.addEventListener('click', toggleAccordion);
});
// Pricing FAQ accordion
const pricingFaqItems = document.querySelectorAll('.qdrant-pricing-faq__item');
pricingFaqItems.forEach((item) => {
const question = item.querySelector('.qdrant-pricing-faq__question');
if (question) {
question.addEventListener('click', () => {
item.classList.toggle('qdrant-pricing-faq__item--active');
});
}
});
// Pricing features tabs (Managed / On-Premise)
function expandFeaturesTableSections(wrapper) {
if (!wrapper || wrapper.classList.contains('qdrant-pricing-features__table-wrapper--hidden')) return;
@@ -2,44 +2,32 @@
<section class="qdrant-pricing-comparison-hero">
<div class="qdrant-pricing-comparison-hero__background">
<div class="qdrant-pricing-comparison-hero__grid"></div>
</div>
<div class="qdrant-pricing-comparison-hero__background"></div>
<div class="container">
<div class="qdrant-pricing-comparison-hero__content">
{{ with .Params.badge }}
<div class="qdrant-pricing-comparison-hero__badge">
<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.4 8.4C15.4 8.4 14.8 8.6 14.2 8.6C13.6 8.6 13 8.4 13 8.4V10.2C13 10.2 13.6 10.4 14.2 10.4C14.8 10.4 15.4 10.2 15.4 10.2V8.4Z"
fill="#326CE5"
/>
<path
d="M11 1C5.477 1 1 5.477 1 11C1 11.34 1.02 11.675 1.058 12.005C1.27 13.135 2.49 14 4 14H18C19.51 14 20.73 13.135 20.942 12.005C20.98 11.675 21 11.34 21 11C21 5.477 16.523 1 11 1Z"
stroke="#326CE5"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11 4V7L8.5 9.5"
stroke="#326CE5"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<svg width="22" height="14" viewBox="0 0 21.7954 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.7954 10.0172C21.7954 12.1827 20.0228 13.9499 17.8508 13.9499C17.8008 13.9499 17.5012 13.9499 15.1295 13.9499C13.4817 13.9499 10.8603 13.9499 6.69091 13.9499H4.71859C2.07219 14.0246 0 11.9089 0 9.39497C0 6.85614 2.09715 4.74045 4.76852 4.84001C7.04044 -2.27866 17.4763 -1.28304 18.375 6.10943C20.2974 6.38322 21.7954 8.02599 21.7954 10.0172Z" fill="url(#cloud-grad-a)"/>
<path d="M11.4356 14C15.3101 14 18.4511 10.8686 18.4511 7.00578C18.4511 3.14298 15.3101 0.011557 11.4356 0.011557C7.56105 0.011557 4.42012 3.14298 4.42012 7.00578C4.42012 10.8686 7.56105 14 11.4356 14Z" fill="url(#cloud-grad-b)"/>
<path d="M17.8503 13.95C20.0289 13.95 21.795 12.1893 21.795 10.0173C21.795 7.84534 20.0289 6.08461 17.8503 6.08461C15.6717 6.08461 13.9057 7.84534 13.9057 10.0173C13.9057 12.1893 15.6717 13.95 17.8503 13.95Z" fill="url(#cloud-grad-c)"/>
<defs>
<linearGradient id="cloud-grad-a" x1="7.64211" y1="-3.36684" x2="10.134" y2="10.1487" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9E2FE"/><stop offset="0.485" stop-color="#89A9FF"/><stop offset="1" stop-color="#2F6FF0"/>
</linearGradient>
<linearGradient id="cloud-grad-b" x1="10.019" y1="-3.61682" x2="12.207" y2="9.82415" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9E2FE"/><stop offset="0.485" stop-color="#89A9FF"/><stop offset="1" stop-color="#2F6FF0"/>
</linearGradient>
<linearGradient id="cloud-grad-c" x1="15.7689" y1="-0.178481" x2="15.7064" y2="9.63656" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9E2FE"/><stop offset="0.404572" stop-color="#89A9FF"/><stop offset="1" stop-color="#2F6FF0"/>
</linearGradient>
</defs>
</svg>
<span>{{ .text }}</span>
<a href="{{ .url }}" class="qdrant-pricing-comparison-hero__badge-link">
{{ .linkText }}
<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"
/>
<path d="M5.66667 3.33333L10.3333 8L5.66667 12.6667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
@@ -2,50 +2,7 @@
<div class="container">
<h2 class="qdrant-pricing-faq__title">{{ .Params.title }}</h2>
<div class="qdrant-pricing-faq__questions">
{{ range $index, $element := .Params.questions }}
<div class="qdrant-pricing-faq__item{{ if eq $index 0 }} qdrant-pricing-faq__item--active{{ end }}">
<div class="qdrant-pricing-faq__question">
<h6 class="qdrant-pricing-faq__question-text">{{ .question }}</h6>
<span class="qdrant-pricing-faq__icon">
<svg
class="qdrant-pricing-faq__icon-plus"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 5V19M5 12H19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<svg
class="qdrant-pricing-faq__icon-minus"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 12H19"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
</div>
<div class="qdrant-pricing-faq__answer">
<p class="qdrant-pricing-faq__answer-text">{{ .answer }}</p>
</div>
</div>
{{ end }}
{{ partial "accordion" . }}
</div>
</div>
</section>
@@ -0,0 +1,137 @@
<svg width="1440" height="408" viewBox="0 0 1440 408" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="80" height="80" stroke="#D4D9E6"/>
<rect x="80" width="80" height="80" fill="url(#paint0_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="400" width="80" height="80" stroke="#D4D9E6"/>
<rect x="480" width="80" height="80" stroke="#D4D9E6"/>
<rect x="560" width="80" height="80" stroke="#D4D9E6"/>
<rect x="640" width="80" height="80" stroke="#D4D9E6"/>
<rect x="720" width="80" height="80" stroke="#D4D9E6"/>
<rect x="800" width="80" height="80" stroke="#D4D9E6"/>
<rect x="880" width="80" height="80" stroke="#D4D9E6"/>
<rect x="960" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1040" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1120" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1200" width="80" height="80" fill="url(#paint1_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="1280" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1360" width="80" height="80" stroke="#D4D9E6"/>
<rect y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="80" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="160" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="240" y="80" width="80" height="80" fill="url(#paint2_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="320" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="400" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="480" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="560" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="640" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="720" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="800" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="880" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="960" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1040" y="80" width="80" height="80" fill="url(#paint3_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="1120" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1200" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1280" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1360" y="80" width="80" height="80" stroke="#D4D9E6"/>
<rect y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="80" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="160" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="240" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="320" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="400" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="480" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="560" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="640" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="720" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="800" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="880" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="960" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1040" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1120" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1200" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1280" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1360" y="160" width="80" height="80" stroke="#D4D9E6"/>
<rect y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="80" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="160" y="240" width="80" height="80" fill="url(#paint4_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="240" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="320" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="400" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="480" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="560" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="640" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="720" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="800" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="880" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="960" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1040" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1120" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1200" y="240" width="80" height="80" fill="url(#paint5_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="1280" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1360" y="240" width="80" height="80" stroke="#D4D9E6"/>
<rect y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="80" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="160" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="240" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="320" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="400" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="480" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="560" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="640" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="720" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="800" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="880" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="960" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1040" y="320" width="80" height="80" fill="url(#paint6_linear_13193_44264)" stroke="#D4D9E6"/>
<rect x="1120" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1200" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1280" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect x="1360" y="320" width="80" height="80" stroke="#D4D9E6"/>
<rect y="408" width="135" height="1440" transform="rotate(-90 0 408)" fill="url(#paint7_linear_13193_44264)"/>
<rect x="-2" y="-8" width="240" height="416" fill="url(#paint8_linear_13193_44264)"/>
<rect x="1201" y="-8" width="240" height="416" fill="url(#paint9_linear_13193_44264)"/>
<defs>
<linearGradient id="paint0_linear_13193_44264" x1="120" y1="0" x2="120" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint1_linear_13193_44264" x1="1240" y1="0" x2="1240" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint2_linear_13193_44264" x1="280" y1="80" x2="280" y2="160" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint3_linear_13193_44264" x1="1080" y1="80" x2="1080" y2="160" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint4_linear_13193_44264" x1="200" y1="240" x2="200" y2="320" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint5_linear_13193_44264" x1="1240" y1="240" x2="1240" y2="320" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint6_linear_13193_44264" x1="1080" y1="320" x2="1080" y2="400" gradientUnits="userSpaceOnUse">
<stop stop-color="#F0F3FA" stop-opacity="0"/>
<stop offset="1" stop-color="#F0F3FA"/>
</linearGradient>
<linearGradient id="paint7_linear_13193_44264" x1="0" y1="1128" x2="135" y2="1128" gradientUnits="userSpaceOnUse">
<stop offset="0.32" stop-color="#E1E5F0"/>
<stop offset="1" stop-color="#E1E5F0" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint8_linear_13193_44264" x1="-2" y1="200" x2="238" y2="200" gradientUnits="userSpaceOnUse">
<stop offset="0.32" stop-color="#E1E5F0"/>
<stop offset="1" stop-color="#E1E5F0" stop-opacity="0"/>
</linearGradient>
<linearGradient id="paint9_linear_13193_44264" x1="1441" y1="200" x2="1201" y2="200" gradientUnits="userSpaceOnUse">
<stop offset="0.387879" stop-color="#E1E5F0"/>
<stop offset="1" stop-color="#E1E5F0" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 8.3 KiB