mirror of
https://github.com/qdrant/landing_page.git
synced 2026-10-02 01:18:30 +02:00
new pricing pages
This commit is contained in:
trean
@@ -0,0 +1,288 @@
|
||||
---
|
||||
title: Compare all Qdrant Cloud capabilities
|
||||
description: A complete overview of the features available in each tier. See what's included in every plan and choose the setup that fits your use case and growth stage.
|
||||
build:
|
||||
render: always
|
||||
badge:
|
||||
text: For Hybrid/Private cloud
|
||||
linkText: Speak to Our Engineers
|
||||
url: /contact-us/
|
||||
button:
|
||||
text: Talk to our Team
|
||||
url: /contact-us/
|
||||
link:
|
||||
text: Try our Pricing Calculator
|
||||
url: /pricing/#calculator
|
||||
tiers:
|
||||
- name: OSS
|
||||
highlight: false
|
||||
- name: Free Tier
|
||||
highlight: false
|
||||
- name: Paid Tier
|
||||
highlight: true
|
||||
- name: Premium Tier
|
||||
highlight: false
|
||||
sections:
|
||||
- name: Core Vector Search Capabilities
|
||||
features:
|
||||
- name: Vector Similarity Search
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Recommendations & Discovery
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Quantization
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Hybrid Search
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Multi Vector Support
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Sparse Vector Support
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: GPU indexing
|
||||
oss: true
|
||||
free: false
|
||||
paid: false
|
||||
premium: false
|
||||
- name: Cloud Inference
|
||||
oss: false
|
||||
free: Only external models
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Data Modeling & Storage
|
||||
features:
|
||||
- name: Multi-Tenancy
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Deployment & Enterprise
|
||||
features:
|
||||
- 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: Developer Experience
|
||||
features:
|
||||
- name: Database Web UI
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Multi-Cluster Management UI
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Automation
|
||||
oss: false
|
||||
free: API, Terraform, Pulumi
|
||||
paid: API, Terraform, Pulumi
|
||||
premium: API, Terraform, Pulumi
|
||||
- name: Querying / Ranking
|
||||
features:
|
||||
- name: Advanced payload filtering (incl. Geo and full-text)
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Complex payload support
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Multi-Staged Queries
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Score Boosting
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Scalability & Operations
|
||||
features:
|
||||
- name: Vertical Up-Scaling
|
||||
oss: true
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Vertical Down-Scaling
|
||||
oss: true
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Vertical Disk Up-Scaling
|
||||
oss: Complex, manual process
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Horizontal Scaling
|
||||
oss: true
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Read Replicas (HA)
|
||||
oss: true
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Zero Downtime Upgrades
|
||||
oss: false
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Auto Suspend
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Monitoring & Metrics
|
||||
oss: Manual setup
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Backups
|
||||
oss: Manual setup
|
||||
free: Daily
|
||||
paid: Daily
|
||||
premium: Hourly
|
||||
- name: Point in Time Recovery
|
||||
oss: false
|
||||
free: false
|
||||
paid: false
|
||||
premium: true
|
||||
- name: Multi-Region / Geo Replication
|
||||
oss: false
|
||||
free: false
|
||||
paid: false
|
||||
premium: true
|
||||
- name: Zero Downtime Migration
|
||||
oss: false
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Dedicated Engineering Support during Migration
|
||||
oss: false
|
||||
free: false
|
||||
paid: false
|
||||
premium: true
|
||||
- name: Pause Clusters
|
||||
oss: true
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Snapshots / Versioning
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Alerting
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Security & Compliance
|
||||
features:
|
||||
- name: Create new Clusters from Backups
|
||||
oss: true
|
||||
free: false
|
||||
paid: true
|
||||
premium: true
|
||||
- name: Dedicated LoadBalancer
|
||||
oss: true
|
||||
free: false
|
||||
paid: false
|
||||
premium: true
|
||||
- name: TLS
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: API Key Auth
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: JWT based RBAC
|
||||
oss: true
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- name: mTLS Peer Authentication
|
||||
oss: false
|
||||
free: false
|
||||
paid: false
|
||||
premium: true
|
||||
- name: SOC2 Type 2
|
||||
oss: false
|
||||
free: true
|
||||
paid: true
|
||||
premium: true
|
||||
- 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
|
||||
- name: Private Links (AWS Private Link, Azure Private Link, GCP PSC)
|
||||
oss: false
|
||||
free: false
|
||||
paid: false
|
||||
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
|
||||
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
|
||||
sitemapExclude: true
|
||||
---
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
titleFirstPart: Not sure which plan is right for you?
|
||||
titleSecondPart: Check out our pricing calculator.
|
||||
title: Not sure which plan is right for you?
|
||||
linkPrefix: Try our
|
||||
link:
|
||||
url: https://cloud.qdrant.io/calculator
|
||||
text: Pricing Calculator
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Engines Ready. Awaiting Your Command.
|
||||
subtitle: Cloud Quickstart - spin up a cluster in seconds.
|
||||
button:
|
||||
text: Start Building for Free
|
||||
url: https://cloud.qdrant.io
|
||||
sitemapExclude: true
|
||||
---
|
||||
@@ -1,79 +1,98 @@
|
||||
---
|
||||
cards:
|
||||
- id: 0
|
||||
popular: true
|
||||
title: Managed Cloud
|
||||
price: Starting at $0
|
||||
description: Starts with 1GB free cluster, no credit card required.
|
||||
button:
|
||||
text: Start Free
|
||||
url: https://cloud.qdrant.io
|
||||
contained: true
|
||||
featureDescription: Scale your production solutions without deployment and upkeep.
|
||||
featureLink:
|
||||
text: Calculate your usage.
|
||||
url: https://cloud.qdrant.io/calculator
|
||||
features:
|
||||
- id: 0
|
||||
content: 1GB free forever cluster. No credit card required.
|
||||
- id: 1
|
||||
content: Fully managed with central cluster management
|
||||
- id: 2
|
||||
content: Multiple cloud providers and regions (AWS, GCP, Azure)
|
||||
- id: 3
|
||||
content: Horizontal & vertical scaling
|
||||
- id: 4
|
||||
content: Central monitoring, log management and alerting
|
||||
- id: 5
|
||||
content: High availability, auto-healing
|
||||
- id: 6
|
||||
content: Backup & disaster recovery
|
||||
- id: 7
|
||||
content: Zero-downtime upgrades
|
||||
- id: 8
|
||||
content: Unlimited users
|
||||
- id: 9
|
||||
content: Standard support and uptime SLAs, can be upgraded to Premium
|
||||
# - id: 10
|
||||
# content: Can be upgraded to premium support plan
|
||||
- id: 1
|
||||
popular: false
|
||||
title: Hybrid Cloud
|
||||
price: Custom
|
||||
description: Price on request.
|
||||
button:
|
||||
text: Contact Us
|
||||
url: /contact-us/
|
||||
contained: false
|
||||
featureDescription: Bring your own cluster from any cloud provider, on-premise infrastructure, or edge locations and connect them to the managed cloud.
|
||||
features:
|
||||
- id: 0
|
||||
content: All the benefits of Qdrant Cloud
|
||||
- id: 1
|
||||
content: Security, data isolation, optimal latency
|
||||
- id: 2
|
||||
content: Use the Managed Cloud Central Cluster Management
|
||||
- id: 3
|
||||
content: Standard support and uptime SLAs, can be upgraded to Premium
|
||||
# minPrice: <span>*</span>Min $99 / month
|
||||
- id: 2
|
||||
popular: false
|
||||
title: Private Cloud
|
||||
price: Custom
|
||||
description: Price on request.
|
||||
button:
|
||||
text: Contact Us
|
||||
url: /contact-us/
|
||||
contained: false
|
||||
featureDescription: Deploy Qdrant fully on premise for maximum control and data sovereignty.
|
||||
features:
|
||||
- id: 0
|
||||
content: All the benefits of Hybrid Cloud
|
||||
- id: 1
|
||||
content: Security, data isolation, optimal latency
|
||||
- id: 2
|
||||
content: Manage Qdrant database clusters on your infrastructure, in the cloud, on-premise at the edge, even fully air-gapped without a connection to Qdrant Cloud
|
||||
- id: 3
|
||||
content: Premium Support Plan
|
||||
tabs:
|
||||
- id: managed
|
||||
label: Managed
|
||||
active: true
|
||||
tiers:
|
||||
- id: free
|
||||
title: Free Tier
|
||||
pricing: Free forever
|
||||
pricingNote: (No credit card required)
|
||||
target: For development, testing, and prototypes
|
||||
features:
|
||||
- 1GB RAM/ 4 GB Disk.
|
||||
- 1 Node / 0.5 vCPU
|
||||
- Cloud inference pass through costs
|
||||
cta:
|
||||
text: Start Free
|
||||
url: https://cloud.qdrant.io
|
||||
style: outlined
|
||||
- id: paid
|
||||
title: Paid Tier
|
||||
pricing: Usage-based pricing
|
||||
target: For production workloads and scaling applications
|
||||
features:
|
||||
- Dedicated Cluster
|
||||
- Free monthly Cloud Inference Tokens
|
||||
marketplace:
|
||||
label: Subscribe on Marketplace.
|
||||
logos:
|
||||
- name: AWS
|
||||
icon: aws
|
||||
- name: Google Cloud
|
||||
icon: gcp
|
||||
- name: Azure
|
||||
icon: azure
|
||||
cta:
|
||||
text: Deploy on Cloud
|
||||
url: https://cloud.qdrant.io
|
||||
style: contained
|
||||
- id: premium
|
||||
title: Premium Tier
|
||||
pricing: (minimum spend requirement)
|
||||
pricingNote: Committed Usage
|
||||
target: For production workloads and scaling applications
|
||||
features:
|
||||
- SSO
|
||||
- Extra support
|
||||
contactLink:
|
||||
text: Contact Sales
|
||||
url: /contact-us/
|
||||
cta:
|
||||
text: Talk to Our Engineers
|
||||
url: /contact-us/
|
||||
style: outlined
|
||||
- id: on-premise
|
||||
label: On-Premise
|
||||
active: false
|
||||
tiers:
|
||||
- id: hybrid-cloud
|
||||
title: Hybrid Cloud
|
||||
badge: true
|
||||
target: Run managed Qdrant clusters on your own infrastructure using your compute, network and storage.
|
||||
featureGroups:
|
||||
- label: "Best for:"
|
||||
items:
|
||||
- Data residency
|
||||
- Regulated workloads
|
||||
- Zero-ops in your own cloud
|
||||
- label: "Benefits:"
|
||||
items:
|
||||
- Data stays in your VPC
|
||||
- Fully managed by Qdrant
|
||||
- Production-grade uptime
|
||||
cta:
|
||||
text: Talk to Our Engineers
|
||||
url: /contact-us/
|
||||
style: contained
|
||||
- id: private-cloud
|
||||
title: Private Cloud
|
||||
badge: true
|
||||
target: "Dedicated, isolated deployment. Fully customized environment for strict security, compliance, or performance needs."
|
||||
featureGroups:
|
||||
- label: "Best for:"
|
||||
items:
|
||||
- Large enterprises
|
||||
- Sensitive workloads
|
||||
- Air-gapped setups
|
||||
- label: "Benefits:"
|
||||
items:
|
||||
- Dedicated resources
|
||||
- "Custom SLAs & security"
|
||||
- Full isolation
|
||||
cta:
|
||||
text: Talk to Our Engineers
|
||||
url: /contact-us/
|
||||
style: contained
|
||||
sitemapExclude: true
|
||||
---
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: FAQs
|
||||
questions:
|
||||
- question: What happens if I exceed Free Tier limits?
|
||||
answer: Inference is only available on paid Qdrant Cloud clusters.
|
||||
- question: How Qdrant Cloud Pricing Works
|
||||
answer: Qdrant Cloud pricing is based on usage. You only pay for what you use. The free tier includes 1GB RAM and 4GB disk storage. When you upgrade to a paid tier, you get dedicated clusters with usage-based pricing.
|
||||
- question: Can I migrate from OSS to Qdrant Cloud?
|
||||
answer: Yes, you can easily migrate your existing Qdrant OSS deployment to Qdrant Cloud. We provide migration tools and documentation to help you transition smoothly.
|
||||
- question: How does autoscaling work?
|
||||
answer: Autoscaling automatically adjusts your cluster resources based on demand. When traffic increases, additional resources are provisioned. When demand decreases, resources scale down to optimize costs.
|
||||
- question: How do I choose between Free Tier and Paid Tier?
|
||||
answer: The Free Tier is ideal for development, testing, and prototypes with 1GB RAM and 4GB disk. Choose the Paid Tier for production workloads that require dedicated clusters, higher availability, and advanced features.
|
||||
- question: What's the difference between Cloud, Hybrid, and Private?
|
||||
answer: Cloud is fully managed by Qdrant. Hybrid Cloud lets you bring your own infrastructure while using Qdrant's management plane. Private Cloud gives you complete control with on-premise deployment.
|
||||
- question: Do you support multi-region redundancy?
|
||||
answer: Yes, Premium Tier customers can configure multi-region redundancy for high availability and disaster recovery across different geographic locations.
|
||||
- question: How is billing calculated month-to-month?
|
||||
answer: Billing is calculated based on actual resource usage during the billing period. You're charged for compute (vCPU hours), memory (GB hours), and storage (GB) consumed by your clusters.
|
||||
sitemapExclude: true
|
||||
---
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
title: Features by Tier
|
||||
tiers:
|
||||
- name: OSS
|
||||
highlight: false
|
||||
- name: Free Tier
|
||||
highlight: false
|
||||
- name: Paid Tier
|
||||
highlight: true
|
||||
- name: Premium Tier
|
||||
highlight: false
|
||||
sections:
|
||||
- name: Features
|
||||
features:
|
||||
- name: Cloud Inference
|
||||
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
|
||||
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
|
||||
compareButton:
|
||||
text: Compare All Features
|
||||
url: /pricing/comparison/
|
||||
sitemapExclude: true
|
||||
---
|
||||
@@ -1,6 +1,11 @@
|
||||
---
|
||||
title: Qdrant Pricing
|
||||
subtitle: Cloud & Enterprise solutions
|
||||
description: Choose the deployment option for your application and explore our transparent pricing plans.
|
||||
title: Qdrant Cloud Pricing
|
||||
description: Start free. Scale to production with fully managed vector search. Meet all enterprise security and access requirements.
|
||||
button:
|
||||
text: Talk to our Team
|
||||
url: /contact-us/
|
||||
link:
|
||||
text: Try our Pricing Calculator
|
||||
url: https://cloud.qdrant.io/calculator
|
||||
sitemapExclude: true
|
||||
---
|
||||
|
||||
@@ -25,6 +25,10 @@
|
||||
@import 'partials/qdrant-pricing-doors-a';
|
||||
@import 'partials/qdrant-pricing-doors-b';
|
||||
@import 'partials/qdrant-pricing-marketplaces';
|
||||
@import 'partials/qdrant-pricing-features';
|
||||
@import 'partials/qdrant-pricing-faq';
|
||||
@import 'partials/qdrant-pricing-comparison';
|
||||
@import 'partials/qdrant-pricing-cta';
|
||||
@import 'partials/pricing-door';
|
||||
@import 'partials/get-contacted-with-question';
|
||||
@import 'partials/private-cloud-hero';
|
||||
|
||||
+134
-30
@@ -1,45 +1,149 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-calculator {
|
||||
padding-bottom: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: $spacer * 5 0;
|
||||
background-color: $neutral-94;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, $neutral-90 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $neutral-90 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, $neutral-94 0%, transparent 30%, transparent 70%, $neutral-94 100%),
|
||||
linear-gradient(to right, $neutral-94 0%, transparent 15%, transparent 85%, $neutral-94 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
padding: $spacer * 1.5 $spacer * 3.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
max-width: pxToRem(600);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
line-height: pxToRem(30);
|
||||
margin-bottom: 0;
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
margin: 0;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__link-prefix {
|
||||
color: $neutral-30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__link {
|
||||
margin-top: $spacer * 1.5;
|
||||
}
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 7.5;
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: ('');
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: pxToRem(29.5);
|
||||
height: pxToRem(1);
|
||||
width: calc((100% - 453px) / 2);
|
||||
background-color: $neutral-30;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: 0;
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0;
|
||||
|
||||
&__container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: $spacer * 1.5 $spacer * 1.25;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 76px;
|
||||
height: 64px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__content {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(20);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__link-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+405
@@ -0,0 +1,405 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-comparison-hero {
|
||||
position: relative;
|
||||
padding: $spacer * 5 0 $spacer * 3.5;
|
||||
background-color: $neutral-94;
|
||||
background-image: linear-gradient(180deg, rgba(225, 229, 240, 0) 8.3%, #e1e5f0 52.24%, rgba(225, 229, 240, 0) 112.78%);
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
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%);
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 0.5 $spacer;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: pxToRem(16);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 $spacer;
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 0 $spacer;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(2);
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: pxToRem(2);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 3 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
&__badge {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qdrant-pricing-comparison {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-cta {
|
||||
position: relative;
|
||||
padding: $spacer * 7.5 0 $spacer * 7;
|
||||
background-color: $neutral-10;
|
||||
overflow: hidden;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__stars {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url('/img/backgrounds/stars-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&__globe {
|
||||
position: absolute;
|
||||
top: pxToRem(-50);
|
||||
right: pxToRem(-200);
|
||||
width: pxToRem(800);
|
||||
height: pxToRem(800);
|
||||
background-image: url('/img/backgrounds/globe-grid.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: pxToRem(500);
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer;
|
||||
font-size: pxToRem(40);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: $neutral-100;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
margin-bottom: $spacer * 2;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-80;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.5;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 5 0;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(32);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__globe {
|
||||
right: pxToRem(-300);
|
||||
width: pxToRem(600);
|
||||
height: pxToRem(600);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 5 0 $spacer * 3;
|
||||
text-align: center;
|
||||
|
||||
&__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: pxToRem(16);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__globe {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
width: 100%;
|
||||
height: pxToRem(300);
|
||||
margin-top: $spacer * 3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
}
|
||||
+321
-15
@@ -1,32 +1,338 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-doors-b {
|
||||
padding-bottom: $spacer * 4;
|
||||
padding-top: $spacer * 4;
|
||||
background-color: $neutral-10;
|
||||
padding: 0 0 $spacer * 2;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: $spacer * 0.5;
|
||||
padding: 4px;
|
||||
margin-bottom: $spacer * 2;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
min-width: pxToRem(160);
|
||||
height: pxToRem(40);
|
||||
font-size: pxToRem(16);
|
||||
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;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neutral-94, 0.5);
|
||||
}
|
||||
|
||||
&--active {
|
||||
font-weight: 600;
|
||||
color: $neutral-20;
|
||||
background-color: $neutral-94;
|
||||
}
|
||||
}
|
||||
|
||||
&__doors {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: pxToRem(30);
|
||||
width: 100%;
|
||||
max-width: pxToRem(1110);
|
||||
margin: 0 auto;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-bottom: $spacer * 5;
|
||||
padding-top: $spacer * 5;
|
||||
&__door {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: none;
|
||||
|
||||
&__doors {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
&:first-child {
|
||||
border-radius: pxToRem(8) 0 0 pxToRem(8);
|
||||
}
|
||||
|
||||
&__door {
|
||||
width: calc((100% / 3) - 20px);
|
||||
&:last-child {
|
||||
border-right: 1px solid $neutral-90;
|
||||
border-radius: 0 pxToRem(8) pxToRem(8) 0;
|
||||
}
|
||||
|
||||
.pricing-door__description {
|
||||
height: pxToRem(42);
|
||||
&--paid {
|
||||
border: 1px solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(135);
|
||||
|
||||
&:has(.qdrant-pricing-doors-b__badge) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(24);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: pxToRem(6);
|
||||
padding: pxToRem(4) $spacer * 0.5;
|
||||
background-color: $neutral-94;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
flex-shrink: 0;
|
||||
|
||||
span {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
width: pxToRem(20);
|
||||
height: pxToRem(20);
|
||||
}
|
||||
}
|
||||
|
||||
&__pricing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__pricing-main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__pricing-note {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__target {
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(80);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
}
|
||||
|
||||
&__features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
padding: $spacer $spacer * 2;
|
||||
border-bottom: 0.5px solid $neutral-80;
|
||||
min-height: pxToRem(168);
|
||||
}
|
||||
|
||||
&__feature-group-label {
|
||||
margin: 0;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: $spacer * 0.5;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__check-icon {
|
||||
flex-shrink: 0;
|
||||
margin-top: 3px;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
&__marketplace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__marketplace-label {
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__marketplace-logos {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
}
|
||||
|
||||
&__marketplace-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: pxToRem(32);
|
||||
height: pxToRem(32);
|
||||
border: 0.667px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: pxToRem(3);
|
||||
background-color: $neutral-100;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__contact-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: pxToRem(14);
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__cta {
|
||||
padding: $spacer * 1.5 $spacer * 2;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&__cta-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: pxToRem(40);
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
text-decoration: none;
|
||||
border-radius: pxToRem(8);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&--outlined {
|
||||
color: $neutral-20;
|
||||
background-color: transparent;
|
||||
border: 1px solid $neutral-60;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($neutral-90, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
&--contained {
|
||||
color: $neutral-100;
|
||||
background: linear-gradient(180deg, $primary-50 0%, #BE003A 100%);
|
||||
border: none;
|
||||
box-shadow: inset 0px 2px 1px 0px #FF516B;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: 0 0 $spacer * 2;
|
||||
|
||||
&__doors {
|
||||
flex-direction: column;
|
||||
gap: $spacer * 1.5;
|
||||
}
|
||||
|
||||
&__door {
|
||||
border-radius: pxToRem(8);
|
||||
border: 1px solid $neutral-90;
|
||||
border-right: 1px solid $neutral-90;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
border-radius: pxToRem(8);
|
||||
border-right: 1px solid $neutral-90;
|
||||
}
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__target,
|
||||
&__features {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: 0 $spacer * 1.25 $spacer * 2;
|
||||
|
||||
&__tabs {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-faq {
|
||||
padding: $spacer * 5 0 $spacer * 2.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__questions {
|
||||
max-width: pxToRem(800);
|
||||
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;
|
||||
|
||||
&__title {
|
||||
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) {
|
||||
padding: $spacer * 2.5 0 $spacer * 2;
|
||||
|
||||
&__title {
|
||||
margin-bottom: $spacer * 5;
|
||||
font-size: pxToRem(40);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,337 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-features {
|
||||
padding: $spacer * 2.5 0 $spacer * 7.5;
|
||||
background-color: $neutral-94;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $spacer * 3.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: pxToRem(40);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.5px;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__tabs {
|
||||
display: flex;
|
||||
gap: $spacer * 0.5;
|
||||
padding: pxToRem(4);
|
||||
background-color: $neutral-98;
|
||||
border: 1px solid $neutral-90;
|
||||
border-radius: pxToRem(8);
|
||||
}
|
||||
|
||||
&__tab {
|
||||
padding: $spacer * 0.5 $spacer * 1.5;
|
||||
font-size: pxToRem(16);
|
||||
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;
|
||||
}
|
||||
|
||||
&:hover:not(&--active) {
|
||||
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;
|
||||
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;
|
||||
margin-top: $spacer * 2.5;
|
||||
|
||||
.button {
|
||||
padding: $spacer * 0.5 $spacer * 1.375;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
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) {
|
||||
padding: $spacer * 2.5 0 $spacer * 4;
|
||||
|
||||
&__header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: $spacer * 1.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,46 +1,148 @@
|
||||
@use '../helpers/functions' as *;
|
||||
|
||||
.qdrant-pricing-hero {
|
||||
padding-top: $spacer * 2.5;
|
||||
background-color: $neutral-10;
|
||||
color: $neutral-98;
|
||||
position: relative;
|
||||
padding: $spacer * 5 0 $spacer * 4;
|
||||
background-color: $neutral-94;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer;
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 1.5;
|
||||
line-height: pxToRem(34);
|
||||
&__grid {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 400px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(18, 80px);
|
||||
grid-template-rows: repeat(5, 80px);
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, $neutral-90 1px, transparent 1px),
|
||||
linear-gradient(to bottom, $neutral-90 1px, transparent 1px);
|
||||
background-size: 80px 80px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba($neutral-94, 0) 0%, $neutral-94 100%),
|
||||
linear-gradient(to right, $neutral-94 0%, transparent 15%, transparent 85%, $neutral-94 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: pxToRem(730);
|
||||
margin: 0 auto;
|
||||
padding: 0 $spacer;
|
||||
background: linear-gradient(to right, rgba($neutral-94, 0) 8%, $neutral-94 50%, rgba($neutral-94, 0) 92%);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(56);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: $spacer;
|
||||
color: $neutral-20;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 0;
|
||||
color: $neutral-70;
|
||||
margin-bottom: $spacer;
|
||||
font-size: pxToRem(18);
|
||||
line-height: 1.5;
|
||||
color: $neutral-30;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-top: $spacer * 5;
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $spacer * 1.5;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: $spacer * 3;
|
||||
line-height: pxToRem(57);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
&__button {
|
||||
min-width: pxToRem(166);
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacer * 0.25;
|
||||
font-size: pxToRem(16);
|
||||
font-weight: 500;
|
||||
color: $primary-50;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
|
||||
svg {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
font-size: $spacer * 2;
|
||||
line-height: pxToRem(38);
|
||||
margin-bottom: $spacer * 1.5;
|
||||
&:hover {
|
||||
color: $primary-60;
|
||||
|
||||
svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
padding: $spacer * 3 0 $spacer * 2.5;
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(40);
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: pxToRem(18);
|
||||
line-height: pxToRem(27);
|
||||
font-size: pxToRem(16);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
flex-direction: column;
|
||||
gap: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $spacer * 2.5 0 $spacer * 2;
|
||||
|
||||
&__grid {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: pxToRem(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,6 +157,148 @@ 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)
|
||||
const featuresTabs = document.querySelectorAll('.qdrant-pricing-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');
|
||||
});
|
||||
});
|
||||
|
||||
// Pricing features mobile tier tabs
|
||||
function updateMobileTierColumns(activeTier) {
|
||||
const allTierCols = document.querySelectorAll('[data-tier-col]');
|
||||
allTierCols.forEach((col) => {
|
||||
col.classList.remove('qdrant-pricing-features__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');
|
||||
});
|
||||
}
|
||||
|
||||
const tierTabs = document.querySelectorAll('.qdrant-pricing-features__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');
|
||||
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');
|
||||
const rows = section.querySelector('.qdrant-pricing-features__table-section-rows');
|
||||
if (!header || !rows) return;
|
||||
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const isCollapsed = section.classList.contains('qdrant-pricing-features__table-section--collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
section.classList.remove('qdrant-pricing-features__table-section--collapsed');
|
||||
} else {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
rows.style.maxHeight = '0px';
|
||||
section.classList.add('qdrant-pricing-features__table-section--collapsed');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
rows.addEventListener('transitionend', () => {
|
||||
if (!section.classList.contains('qdrant-pricing-features__table-section--collapsed')) {
|
||||
rows.style.maxHeight = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Pricing doors tabs
|
||||
const pricingDoorsTabs = document.querySelectorAll('.qdrant-pricing-doors-b__tab');
|
||||
const pricingDoorsContainers = document.querySelectorAll('[data-doors-tab]');
|
||||
pricingDoorsTabs.forEach((tab) => {
|
||||
tab.addEventListener('click', () => {
|
||||
pricingDoorsTabs.forEach((t) => t.classList.remove('qdrant-pricing-doors-b__tab--active'));
|
||||
tab.classList.add('qdrant-pricing-doors-b__tab--active');
|
||||
const targetTab = tab.dataset.tab;
|
||||
pricingDoorsContainers.forEach((container) => {
|
||||
container.classList.toggle('qdrant-pricing-doors-b__doors--hidden', container.dataset.doorsTab !== targetTab);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Pricing comparison mobile tier tabs
|
||||
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');
|
||||
});
|
||||
const activeCols = document.querySelectorAll(`.qdrant-pricing-comparison [data-tier-col="${activeTier}"]`);
|
||||
activeCols.forEach((col) => {
|
||||
col.classList.add('qdrant-pricing-comparison__table-cell--mobile-active');
|
||||
});
|
||||
}
|
||||
|
||||
const comparisonTierTabs = document.querySelectorAll('.qdrant-pricing-comparison__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');
|
||||
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');
|
||||
if (!header || !rows) return;
|
||||
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
|
||||
header.addEventListener('click', () => {
|
||||
const isCollapsed = section.classList.contains('qdrant-pricing-comparison__table-section--collapsed');
|
||||
|
||||
if (isCollapsed) {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
section.classList.remove('qdrant-pricing-comparison__table-section--collapsed');
|
||||
} else {
|
||||
rows.style.maxHeight = rows.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
rows.style.maxHeight = '0px';
|
||||
section.classList.add('qdrant-pricing-comparison__table-section--collapsed');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
rows.addEventListener('transitionend', () => {
|
||||
if (!section.classList.contains('qdrant-pricing-comparison__table-section--collapsed')) {
|
||||
rows.style.maxHeight = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// scroll to anchors:
|
||||
let offset = DOCS_HEADER_OFFSET;
|
||||
|
||||
|
||||
@@ -1,16 +1,70 @@
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-calculator") }}
|
||||
<section class="qdrant-pricing-calculator">
|
||||
<div class="qdrant-pricing-calculator__background">
|
||||
<div class="qdrant-pricing-calculator__grid"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="qdrant-pricing-calculator__content col-12">
|
||||
<p class="qdrant-pricing-calculator__title">{{ .Params.titleFirstPart }}</p>
|
||||
<p class="qdrant-pricing-calculator__title">{{ .Params.titleSecondPart }}</p>
|
||||
<a
|
||||
class="qdrant-pricing-calculator__link link link_light link_xl align-self-start"
|
||||
href="{{ .Params.link.url }}"
|
||||
>
|
||||
{{ .Params.link.text }}
|
||||
</a>
|
||||
<div class="qdrant-pricing-calculator__container">
|
||||
<div class="qdrant-pricing-calculator__icon">
|
||||
<svg width="76" height="64" viewBox="0 0 76 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(14, 2) rotate(-15) skewX(15) scale(1, 0.97)">
|
||||
<rect width="48" height="60" rx="6" fill="url(#calc-base-grad)"/>
|
||||
<rect x="2" y="2" width="44" height="56" rx="4" fill="url(#calc-inner-grad)" stroke="white" stroke-width="0.5"/>
|
||||
<rect x="6" y="6" width="32" height="12" rx="2" fill="url(#calc-display-grad)"/>
|
||||
<rect x="6" y="22" width="6" height="5" rx="1" fill="url(#calc-btn-active)"/>
|
||||
<rect x="15" y="22" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="24" y="22" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="33" y="22" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="6" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="15" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="24" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="33" y="29" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="6" y="36" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="15" y="36" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="24" y="36" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="6" y="43" width="14" height="5" rx="1" fill="url(#calc-btn-active2)"/>
|
||||
<rect x="24" y="43" width="6" height="5" rx="1" fill="#D4D9E6"/>
|
||||
<rect x="33" y="36" width="6" height="12" rx="1" fill="url(#calc-btn-active3)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="calc-base-grad" x1="24" y1="0" x2="24" y2="60" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#F0F3FA"/>
|
||||
<stop offset="1" stop-color="#D5DAE8"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-inner-grad" x1="2" y1="2" x2="46" y2="58" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#E1E5F0"/>
|
||||
<stop offset="1" stop-color="#FFFFFF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-display-grad" x1="6" y1="6" x2="38" y2="18" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-btn-active" x1="6" y1="22" x2="12" y2="27" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-btn-active2" x1="6" y1="43" x2="20" y2="48" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="calc-btn-active3" x1="33" y1="36" x2="39" y2="48" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#B99AFF"/>
|
||||
<stop offset="1" stop-color="#FF8792"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="qdrant-pricing-calculator__content">
|
||||
<p class="qdrant-pricing-calculator__title">{{ .Params.title }}</p>
|
||||
<p class="qdrant-pricing-calculator__link-wrapper">
|
||||
<span class="qdrant-pricing-calculator__link-prefix">{{ .Params.linkPrefix }}</span>
|
||||
<a class="qdrant-pricing-calculator__link" href="{{ .Params.link.url }}">
|
||||
{{ .Params.link.text }}
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
{{ $context := . }}
|
||||
|
||||
<section class="qdrant-pricing-comparison-hero">
|
||||
<div class="qdrant-pricing-comparison-hero__background">
|
||||
<div class="qdrant-pricing-comparison-hero__grid"></div>
|
||||
</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>
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
<h1 class="qdrant-pricing-comparison-hero__title">{{ .Params.title }}</h1>
|
||||
<p class="qdrant-pricing-comparison-hero__description">{{ .Params.description }}</p>
|
||||
<div class="qdrant-pricing-comparison-hero__actions">
|
||||
{{ with .Params.button }}
|
||||
<a href="{{ .url }}" class="button button_contained button_md">{{ .text }}</a>
|
||||
{{ end }}
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ .url }}" class="qdrant-pricing-comparison-hero__link">
|
||||
{{ .text }}
|
||||
<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"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="qdrant-pricing-comparison">
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-comparison__tier-tabs">
|
||||
{{ range $index, $tier := .Params.tiers }}
|
||||
<button class="qdrant-pricing-comparison__tier-tab{{ if eq $index 0 }} qdrant-pricing-comparison__tier-tab--active{{ end }}" data-tier="{{ $tier.name | urlize }}">
|
||||
{{ $tier.name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-comparison__table">
|
||||
<div class="qdrant-pricing-comparison__table-header">
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--feature"></div>
|
||||
{{ range .Params.tiers }}
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--tier{{ if .highlight }} qdrant-pricing-comparison__table-cell--highlight{{ end }}" data-tier-col="{{ .name | urlize }}">
|
||||
{{ .name }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-comparison__table-body">
|
||||
{{ range .Params.sections }}
|
||||
<div class="qdrant-pricing-comparison__table-section">
|
||||
<div class="qdrant-pricing-comparison__table-section-header">
|
||||
<span class="qdrant-pricing-comparison__table-section-title">{{ .name }}</span>
|
||||
<svg class="qdrant-pricing-comparison__chevron" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12.5L10 7.5L15 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-section-rows">
|
||||
{{ range .features }}
|
||||
<div class="qdrant-pricing-comparison__table-row">
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--feature">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell" data-tier-col="oss">
|
||||
{{ if eq .oss true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .oss false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text">{{ .oss }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell" data-tier-col="free-tier">
|
||||
{{ if eq .free true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .free false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text">{{ .free }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--highlight" data-tier-col="paid-tier">
|
||||
{{ if eq .paid true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .paid false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text qdrant-pricing-comparison__text--bold">{{ .paid }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-comparison__table-cell" data-tier-col="premium-tier">
|
||||
{{ if eq .premium true }}
|
||||
<svg class="qdrant-pricing-comparison__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .premium false }}
|
||||
<svg class="qdrant-pricing-comparison__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-comparison__text qdrant-pricing-comparison__text--bold">{{ .premium }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-comparison__table-footer">
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--feature"></div>
|
||||
{{ range $index, $cta := .Params.ctas }}
|
||||
<div class="qdrant-pricing-comparison__table-cell qdrant-pricing-comparison__table-cell--cta{{ if eq $index 2 }} qdrant-pricing-comparison__table-cell--highlight{{ end }}" data-tier-col="{{ index (slice "oss" "free-tier" "paid-tier" "premium-tier") $index }}">
|
||||
<a href="{{ $cta.url }}" class="button {{ if $cta.contained }}button_contained{{ else }}button_outlined{{ end }}">
|
||||
{{ $cta.text }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,20 @@
|
||||
<section class="qdrant-pricing-cta">
|
||||
<div class="qdrant-pricing-cta__background">
|
||||
<div class="qdrant-pricing-cta__stars"></div>
|
||||
<div class="qdrant-pricing-cta__globe"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-cta__content">
|
||||
<h2 class="qdrant-pricing-cta__title">{{ .Params.title }}</h2>
|
||||
<p class="qdrant-pricing-cta__subtitle">{{ .Params.subtitle }}</p>
|
||||
{{ with .Params.button }}
|
||||
<a href="{{ .url }}" class="button button_contained button_lg qdrant-pricing-cta__button">
|
||||
{{ .text }}
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.16669 10H15.8334M15.8334 10L10 4.16666M15.8334 10L10 15.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,12 +1,140 @@
|
||||
{{ $class := .class }}
|
||||
<section class="{{ $class }}">
|
||||
<div class="container">
|
||||
<div class="{{ $class }}__doors">
|
||||
{{ range $index, $element := .context.Params.cards }}
|
||||
<div class="{{ $class }}__door">
|
||||
{{ partial "pricing-door" (dict "context" .) }}
|
||||
</div>
|
||||
{{/* Navigation Tabs */}}
|
||||
<div class="{{ $class }}__tabs">
|
||||
{{ range .context.Params.tabs }}
|
||||
<button class="{{ $class }}__tab{{ if .active }} {{ $class }}__tab--active{{ end }}" data-tab="{{ .id }}">
|
||||
{{ .label }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Per-tab pricing tiers */}}
|
||||
{{ range .context.Params.tabs }}
|
||||
<div class="{{ $class }}__doors{{ if not .active }} {{ $class }}__doors--hidden{{ end }}" data-doors-tab="{{ .id }}">
|
||||
{{ range .tiers }}
|
||||
<div class="{{ $class }}__door {{ $class }}__door--{{ .id }}">
|
||||
{{/* Heading */}}
|
||||
<div class="{{ $class }}__heading">
|
||||
<h3 class="{{ $class }}__title">{{ .title }}</h3>
|
||||
{{ if .badge }}
|
||||
<div class="{{ $class }}__badge">
|
||||
<span>Runs on</span>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.94 0.56C9.82 0.57 9.7 0.6 9.59 0.65L4.82 3.03C4.7 3.09 4.59 3.18 4.51 3.29C4.43 3.4 4.37 3.53 4.34 3.67L3.16 8.99C3.14 9.11 3.13 9.24 3.15 9.37C3.17 9.49 3.22 9.61 3.28 9.72C3.3 9.74 3.31 9.77 3.33 9.79L6.64 13.51C6.73 13.62 6.84 13.71 6.96 13.77C7.08 13.83 7.22 13.87 7.36 13.87L12.67 13.87C12.81 13.87 12.94 13.84 13.07 13.77C13.19 13.71 13.3 13.62 13.39 13.51L16.7 9.79C16.78 9.68 16.84 9.55 16.87 9.42C16.9 9.28 16.9 9.15 16.87 9.01L15.7 3.67C15.67 3.53 15.61 3.4 15.52 3.29C15.43 3.18 15.32 3.09 15.2 3.03L10.43 0.65C10.29 0.58 10.14 0.55 9.99 0.56Z" fill="#326CE5"/>
|
||||
<path d="M9.97 2.77C9.81 2.77 9.68 2.92 9.68 3.1V3.18C9.68 3.2 9.68 3.23 9.68 3.25C9.69 3.35 9.71 3.43 9.72 3.53C9.75 3.73 9.77 3.91 9.76 4.06C9.74 4.12 9.7 4.18 9.66 4.21L9.66 4.34C9.48 4.35 9.31 4.38 9.13 4.42C8.39 4.59 7.75 4.97 7.26 5.5C7.23 5.47 7.17 5.43 7.16 5.42C7.11 5.43 7.06 5.44 6.99 5.4C6.86 5.31 6.75 5.19 6.61 5.04C6.54 4.97 6.49 4.91 6.41 4.84C6.39 4.83 6.37 4.81 6.35 4.79C6.29 4.74 6.22 4.72 6.15 4.72C6.07 4.72 5.98 4.75 5.93 4.82C5.83 4.95 5.86 5.14 6 5.25C6.02 5.27 6.04 5.28 6.06 5.3C6.14 5.36 6.21 5.39 6.29 5.44C6.46 5.54 6.6 5.63 6.72 5.73C6.76 5.78 6.77 5.87 6.77 5.91L6.86 5.99C6.37 6.74 6.15 7.66 6.28 8.6L6.16 8.63C6.13 8.67 6.08 8.74 6.04 8.76C5.89 8.8 5.72 8.82 5.52 8.84C5.43 8.85 5.35 8.85 5.25 8.87C5.23 8.87 5.2 8.88 5.17 8.88C4.99 8.92 4.88 9.08 4.92 9.23C4.95 9.39 5.12 9.49 5.29 9.45C5.32 9.45 5.34 9.44 5.37 9.44C5.46 9.41 5.53 9.38 5.62 9.34C5.81 9.27 5.96 9.21 6.12 9.19C6.18 9.18 6.25 9.23 6.28 9.24L6.41 9.22C6.7 10.11 7.3 10.84 8.06 11.3L8.01 11.43C8.03 11.48 8.05 11.55 8.04 11.6C7.98 11.74 7.89 11.9 7.78 12.07C7.73 12.15 7.67 12.21 7.63 12.3C7.62 12.32 7.6 12.35 7.59 12.38C7.52 12.54 7.57 12.72 7.71 12.79C7.85 12.86 8.03 12.79 8.1 12.63C8.11 12.6 8.13 12.57 8.14 12.55C8.18 12.45 8.19 12.37 8.22 12.28C8.29 12.09 8.34 11.89 8.44 11.76C8.47 11.73 8.52 11.71 8.57 11.7L8.63 11.58C9.29 11.84 10.03 11.91 10.78 11.74C10.95 11.7 11.11 11.65 11.27 11.59C11.29 11.63 11.32 11.69 11.33 11.7C11.38 11.72 11.43 11.73 11.48 11.79C11.56 11.93 11.61 12.09 11.67 12.28C11.7 12.37 11.71 12.45 11.75 12.54C11.76 12.57 11.78 12.6 11.79 12.63C11.87 12.79 12.04 12.86 12.19 12.79C12.33 12.72 12.38 12.54 12.31 12.37C12.3 12.35 12.29 12.32 12.28 12.3C12.23 12.21 12.18 12.15 12.13 12.07C12.02 11.9 11.94 11.74 11.88 11.6C11.87 11.53 11.89 11.48 11.91 11.43C11.9 11.42 11.87 11.35 11.86 11.32C12.66 10.85 13.24 10.1 13.52 9.22C13.55 9.22 13.62 9.24 13.64 9.24C13.68 9.21 13.72 9.17 13.8 9.18C13.95 9.2 14.11 9.26 14.3 9.32C14.38 9.36 14.45 9.39 14.55 9.42C14.57 9.42 14.6 9.43 14.63 9.43C14.63 9.43 14.64 9.43 14.64 9.43C14.81 9.47 14.98 9.38 15.01 9.22C15.05 9.07 14.94 8.91 14.77 8.87C14.74 8.86 14.71 8.86 14.68 8.85C14.59 8.85 14.5 8.85 14.41 8.84C14.21 8.82 14.04 8.8 13.88 8.75C13.82 8.73 13.78 8.66 13.76 8.63L13.63 8.59C13.69 8.15 13.67 7.69 13.57 7.24C13.46 6.78 13.28 6.36 13.03 5.99C13.06 5.96 13.11 5.91 13.13 5.89C13.13 5.84 13.13 5.79 13.18 5.73C13.29 5.62 13.43 5.53 13.6 5.44C13.68 5.39 13.75 5.36 13.83 5.3C13.85 5.29 13.87 5.27 13.9 5.25C14.04 5.14 14.05 4.95 13.95 4.82C13.85 4.69 13.66 4.68 13.52 4.79C13.51 4.81 13.48 4.82 13.46 4.84C13.38 4.91 13.34 4.97 13.27 5.05C13.13 5.19 13.01 5.31 12.88 5.4C12.82 5.44 12.74 5.43 12.7 5.42C12.69 5.43 12.63 5.47 12.6 5.49C11.98 4.83 11.13 4.42 10.22 4.33C10.22 4.29 10.22 4.22 10.21 4.2C10.18 4.16 10.13 4.13 10.12 4.05C10.11 3.89 10.13 3.73 10.15 3.53C10.17 3.43 10.19 3.35 10.19 3.25C10.19 3.22 10.19 3.18 10.19 3.1C10.19 2.92 10.06 2.77 9.9 2.77H9.97ZM9.61 4.94L9.53 6.46C9.52 6.6 9.41 6.71 9.28 6.71C9.22 6.71 9.17 6.69 9.13 6.66L7.9 5.78C8.28 5.4 8.76 5.12 9.32 4.99C9.42 4.97 9.52 4.95 9.61 4.94ZM10.32 4.94C10.97 5.02 11.57 5.32 12.03 5.78L10.81 6.66C10.7 6.74 10.55 6.72 10.46 6.61C10.43 6.57 10.41 6.52 10.41 6.47L10.32 4.94ZM7.37 6.34L8.49 7.36C8.59 7.45 8.61 7.61 8.52 7.72C8.49 7.76 8.44 7.79 8.39 7.8L6.95 8.22C6.88 7.55 7.03 6.89 7.37 6.34ZM12.47 6.34C12.63 6.61 12.76 6.92 12.83 7.25C12.91 7.57 12.93 7.9 12.9 8.21L11.45 7.79C11.32 7.75 11.24 7.62 11.27 7.49C11.28 7.43 11.31 7.39 11.35 7.35L12.47 6.34ZM9.36 7.75H9.82L10.11 8.11L10 8.56L9.59 8.76L9.17 8.56L9.07 8.11L9.36 7.75ZM10.82 9.01C10.84 9.01 10.86 9.01 10.88 9.01C10.91 9.01 10.95 9.02 10.98 9.03L12.47 9.28C12.25 9.9 11.83 10.43 11.27 10.79L10.69 9.38C10.64 9.25 10.69 9.1 10.82 9.04V9.01ZM8.32 9.01C8.43 9.01 8.53 9.09 8.56 9.21C8.57 9.26 8.57 9.32 8.55 9.37L7.94 10.77C7.41 10.42 7 9.9 6.77 9.27L8.24 9.02C8.26 9.01 8.29 9.01 8.32 9.01ZM9.57 9.62C9.61 9.62 9.65 9.63 9.68 9.64C9.73 9.67 9.77 9.71 9.79 9.75L10.51 11.08C10.41 11.11 10.32 11.14 10.22 11.16C9.66 11.29 9.1 11.25 8.6 11.08L9.32 9.75C9.36 9.67 9.44 9.63 9.53 9.62H9.57Z" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ with .pricing }}
|
||||
<div class="{{ $class }}__pricing">
|
||||
<span class="{{ $class }}__pricing-main">{{ . }}</span>
|
||||
{{ with $.pricingNote }}
|
||||
<span class="{{ $class }}__pricing-note">{{ . }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Target */}}
|
||||
<div class="{{ $class }}__target">
|
||||
<p>{{ .target }}</p>
|
||||
</div>
|
||||
|
||||
{{/* Features (flat list for Managed) */}}
|
||||
{{ with .features }}
|
||||
<div class="{{ $class }}__features">
|
||||
<ul class="{{ $class }}__feature-list">
|
||||
{{ range . }}
|
||||
<li class="{{ $class }}__feature-item">
|
||||
<svg class="{{ $class }}__check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3334 4L6.00008 11.3333L2.66675 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
{{/* Marketplace logos */}}
|
||||
{{ with $.marketplace }}
|
||||
<div class="{{ $class }}__marketplace">
|
||||
<p class="{{ $class }}__marketplace-label">{{ .label }}</p>
|
||||
<div class="{{ $class }}__marketplace-logos">
|
||||
{{ range .logos }}
|
||||
<div class="{{ $class }}__marketplace-logo">
|
||||
{{ if eq .icon "aws" }}
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.27 9.66C6.27 9.94 6.3 10.16 6.35 10.33C6.41 10.5 6.48 10.68 6.58 10.89C6.62 10.96 6.63 11.03 6.63 11.09C6.63 11.18 6.58 11.27 6.47 11.36L6.04 11.66C5.97 11.71 5.9 11.73 5.84 11.73C5.76 11.73 5.68 11.69 5.6 11.61C5.49 11.49 5.4 11.36 5.32 11.22C5.24 11.07 5.16 10.91 5.07 10.71C4.45 11.45 3.67 11.82 2.73 11.82C2.04 11.82 1.49 11.63 1.09 11.25C0.69 10.87 0.49 10.37 0.49 9.75C0.49 9.09 0.73 8.55 1.2 8.14C1.67 7.73 2.31 7.52 3.12 7.52C3.39 7.52 3.66 7.54 3.95 7.58C4.24 7.62 4.54 7.68 4.85 7.75V7.25C4.85 6.68 4.73 6.28 4.5 6.04C4.26 5.79 3.87 5.67 3.33 5.67C3.05 5.67 2.76 5.7 2.47 5.78C2.18 5.86 1.89 5.95 1.61 6.07C1.48 6.13 1.38 6.17 1.32 6.18C1.26 6.19 1.22 6.2 1.18 6.2C1.07 6.2 1.01 6.12 1.01 5.96V5.6C1.01 5.48 1.03 5.39 1.08 5.32C1.13 5.25 1.21 5.19 1.34 5.12C1.62 4.98 1.96 4.86 2.34 4.77C2.72 4.67 3.12 4.63 3.55 4.63C4.42 4.63 5.07 4.83 5.49 5.22C5.91 5.61 6.12 6.2 6.12 6.98V9.66H6.27ZM3.08 10.86C3.34 10.86 3.61 10.81 3.89 10.71C4.17 10.61 4.42 10.44 4.63 10.19C4.76 10.04 4.85 9.87 4.9 9.68C4.95 9.49 4.98 9.26 4.98 8.99V8.59C4.76 8.54 4.52 8.5 4.28 8.47C4.04 8.44 3.8 8.42 3.57 8.42C3.05 8.42 2.66 8.52 2.41 8.73C2.16 8.94 2.03 9.23 2.03 9.62C2.03 9.98 2.12 10.26 2.31 10.45C2.49 10.72 2.75 10.86 3.08 10.86Z" fill="#252F3E"/>
|
||||
<path d="M8.78 11.68C8.66 11.68 8.58 11.66 8.53 11.61C8.48 11.57 8.43 11.48 8.39 11.34L6.73 5.41C6.69 5.27 6.67 5.17 6.67 5.12C6.67 5.01 6.73 4.95 6.85 4.95H7.52C7.65 4.95 7.74 4.97 7.79 5.02C7.85 5.06 7.89 5.15 7.93 5.29L9.13 10.27L10.24 5.29C10.28 5.14 10.32 5.06 10.37 5.02C10.43 4.97 10.52 4.95 10.64 4.95H11.19C11.32 4.95 11.41 4.97 11.46 5.02C11.52 5.06 11.56 5.15 11.6 5.29L12.73 10.33L13.96 5.29C14 5.14 14.05 5.06 14.1 5.02C14.16 4.97 14.25 4.95 14.37 4.95H15.01C15.13 4.95 15.19 5.01 15.19 5.12C15.19 5.16 15.18 5.2 15.17 5.25C15.16 5.3 15.14 5.36 15.12 5.42L13.42 11.35C13.38 11.49 13.33 11.58 13.28 11.62C13.22 11.67 13.14 11.69 13.02 11.69H12.42C12.29 11.69 12.2 11.67 12.15 11.62C12.09 11.58 12.05 11.49 12.01 11.35L10.91 6.47L9.82 11.34C9.78 11.49 9.74 11.57 9.68 11.61C9.62 11.66 9.53 11.68 9.41 11.68H8.78Z" fill="#252F3E"/>
|
||||
<path d="M17.61 11.86C17.2 11.86 16.79 11.82 16.4 11.73C16.01 11.64 15.7 11.54 15.49 11.42C15.36 11.34 15.27 11.26 15.24 11.18C15.21 11.11 15.19 11.02 15.19 10.94V10.56C15.19 10.4 15.26 10.32 15.38 10.32C15.43 10.32 15.48 10.33 15.53 10.35C15.58 10.37 15.65 10.4 15.73 10.44C15.99 10.56 16.28 10.66 16.58 10.73C16.89 10.8 17.19 10.84 17.5 10.84C17.97 10.84 18.33 10.76 18.59 10.6C18.84 10.44 18.98 10.21 18.98 9.91C18.98 9.7 18.91 9.52 18.78 9.38C18.65 9.24 18.4 9.11 18.04 8.99L17.01 8.68C16.44 8.5 16.02 8.24 15.77 7.91C15.52 7.59 15.39 7.22 15.39 6.83C15.39 6.51 15.46 6.23 15.6 5.98C15.74 5.73 15.93 5.52 16.17 5.34C16.41 5.16 16.69 5.03 17.01 4.93C17.33 4.84 17.67 4.79 18.03 4.79C18.21 4.79 18.4 4.8 18.58 4.83C18.77 4.86 18.94 4.89 19.11 4.93C19.27 4.98 19.43 5.03 19.57 5.08C19.71 5.14 19.82 5.19 19.9 5.25C20.01 5.32 20.09 5.39 20.13 5.47C20.17 5.54 20.19 5.64 20.19 5.75V6.1C20.19 6.26 20.12 6.34 19.99 6.34C19.92 6.34 19.81 6.3 19.67 6.23C19.22 6.02 18.72 5.92 18.17 5.92C17.75 5.92 17.42 5.98 17.19 6.12C16.96 6.26 16.84 6.46 16.84 6.75C16.84 6.96 16.92 7.14 17.07 7.28C17.22 7.42 17.5 7.56 17.89 7.68L18.9 7.99C19.46 8.16 19.87 8.41 20.11 8.73C20.35 9.05 20.47 9.41 20.47 9.82C20.47 10.15 20.4 10.45 20.26 10.71C20.12 10.97 19.92 11.2 19.67 11.38C19.42 11.57 19.12 11.71 18.78 11.8C18.42 11.84 18.03 11.86 17.61 11.86Z" fill="#252F3E"/>
|
||||
<path d="M18.88 14.52C16.69 16.15 13.5 17 10.73 17C6.89 17 3.44 15.58 0.84 13.23C0.64 13.05 0.82 12.81 1.06 12.95C3.88 14.55 7.34 15.51 10.93 15.51C13.36 15.51 16.03 15 18.45 13.96C18.82 13.79 19.14 14.22 18.88 14.52Z" fill="#FF9900"/>
|
||||
<path d="M19.75 13.52C19.49 13.18 17.96 13.37 17.27 13.46C17.06 13.49 17.03 13.31 17.22 13.17C18.44 12.31 20.45 12.56 20.67 12.83C20.89 13.11 20.61 15.12 19.47 16.08C19.3 16.23 19.13 16.15 19.21 15.96C19.47 15.33 20.01 13.85 19.75 13.52Z" fill="#FF9900"/>
|
||||
</svg>
|
||||
{{ else if eq .icon "gcp" }}
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.93 6.11L15.17 4.87L15.28 4.36C12.89 2.18 9.19 2.05 6.65 4.04C5.99 4.56 5.44 5.2 5.02 5.93L5.43 5.87L7.91 5.46L8.14 5.23C9.56 3.92 11.73 3.82 13.26 4.98L13.93 6.11Z" fill="#EA4335"/>
|
||||
<path d="M17.46 7.62C17 6.19 16.12 4.93 14.95 4L13.25 5.7C14.22 6.44 14.87 7.52 15.06 8.72H15.35C15.7 8.72 16.05 8.86 16.31 9.11L18.51 6.91C18.25 7.11 17.86 7.38 17.46 7.62Z" fill="#4285F4"/>
|
||||
<path d="M6.58 15.47C7.85 16.74 9.57 17.45 11.36 17.45V14.97C10.17 14.97 9.04 14.48 8.2 13.64L6.58 15.47Z" fill="#34A853"/>
|
||||
<path d="M11.36 17.45C13.15 17.45 14.87 16.74 16.14 15.47L13.94 13.27C13.1 13.96 12.04 14.37 10.92 14.37C9.01 14.37 7.36 13.12 6.76 11.38L4.49 13.51C5.59 15.76 8.31 17.45 11.36 17.45Z" fill="#34A853"/>
|
||||
<path d="M5.02 10.98C4.82 10.37 4.72 9.73 4.72 9.08C4.72 8.43 4.82 7.79 5.02 7.18L2.75 5.05C2.11 6.31 1.76 7.72 1.76 9.18C1.76 10.64 2.11 12.05 2.75 13.31L5.02 10.98Z" fill="#FBBC05"/>
|
||||
<path d="M11.36 4.54C12.66 4.54 13.86 5.01 14.78 5.84L17.03 3.59C15.42 2.09 13.38 1.28 11.21 1.28C8.16 1.28 5.44 3.01 4.34 5.34L6.61 7.47C7.21 5.73 8.86 4.48 10.77 4.48L11.36 4.54Z" fill="#EA4335"/>
|
||||
</svg>
|
||||
{{ else if eq .icon "azure" }}
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.1 3.77L5.78 14.78H2.14L6.46 3.77H10.1Z" fill="#0078D4"/>
|
||||
<path d="M16.82 14.29L13.97 14.78L5.95 17.13L14.4 14.29H16.82Z" fill="#0078D4"/>
|
||||
<path d="M11.54 6.18L9.19 13.49L16.82 14.29L11.54 6.18Z" fill="#50E6FF"/>
|
||||
<path d="M16.82 14.29L9.19 13.49L14.4 14.29L16.82 14.29Z" fill="#50E6FF"/>
|
||||
<path d="M5.95 17.13L9.19 13.49L5.78 14.78L5.95 17.13Z" fill="#0078D4"/>
|
||||
<path d="M9.19 13.49L5.95 17.13L13.97 14.78L9.19 13.49Z" fill="#0078D4"/>
|
||||
<path d="M11.54 6.18L16.82 14.29H14.4L11.54 6.18Z" fill="#0078D4"/>
|
||||
</svg>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Contact link for premium tier */}}
|
||||
{{ with $.contactLink }}
|
||||
<a href="{{ .url }}" class="{{ $class }}__contact-link">
|
||||
{{ .text }}
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* Feature groups (labeled lists for On-Premise) */}}
|
||||
{{ range .featureGroups }}
|
||||
<div class="{{ $class }}__features">
|
||||
<p class="{{ $class }}__feature-group-label">{{ .label }}</p>
|
||||
<ul class="{{ $class }}__feature-list">
|
||||
{{ range .items }}
|
||||
<li class="{{ $class }}__feature-item">
|
||||
<svg class="{{ $class }}__check-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.3334 4L6.00008 11.3333L2.66675 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>{{ . }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* CTA */}}
|
||||
<div class="{{ $class }}__cta">
|
||||
<a href="{{ .cta.url }}" class="{{ $class }}__cta-button {{ $class }}__cta-button--{{ .cta.style }}">
|
||||
{{ .cta.text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
<section class="qdrant-pricing-faq">
|
||||
<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 }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,122 @@
|
||||
<section class="qdrant-pricing-features">
|
||||
<div class="container">
|
||||
<div class="qdrant-pricing-features__header">
|
||||
<h2 class="qdrant-pricing-features__title">{{ .Params.title }}</h2>
|
||||
<div class="qdrant-pricing-features__tabs">
|
||||
<button class="qdrant-pricing-features__tab qdrant-pricing-features__tab--active" data-tab="managed">Managed</button>
|
||||
<button class="qdrant-pricing-features__tab" data-tab="on-premise">On-Premise</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Mobile tier tabs */}}
|
||||
<div class="qdrant-pricing-features__tier-tabs">
|
||||
{{ range $index, $tier := .Params.tiers }}
|
||||
<button class="qdrant-pricing-features__tier-tab{{ if eq $index 0 }} qdrant-pricing-features__tier-tab--active{{ end }}" data-tier="{{ $tier.name | urlize }}">
|
||||
{{ $tier.name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-features__table">
|
||||
<div class="qdrant-pricing-features__table-header">
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature"></div>
|
||||
{{ range .Params.tiers }}
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--tier{{ if .highlight }} qdrant-pricing-features__table-cell--highlight{{ end }}" data-tier-col="{{ .name | urlize }}">
|
||||
{{ .name }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-features__table-body">
|
||||
{{ range .Params.sections }}
|
||||
<div class="qdrant-pricing-features__table-section">
|
||||
<div class="qdrant-pricing-features__table-section-header">
|
||||
<span class="qdrant-pricing-features__table-section-title">{{ .name }}</span>
|
||||
<svg class="qdrant-pricing-features__chevron" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 12.5L10 7.5L15 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-section-rows">
|
||||
{{ range .features }}
|
||||
<div class="qdrant-pricing-features__table-row">
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature">
|
||||
{{ .name }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell" data-tier-col="oss">
|
||||
{{ if eq .oss true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .oss false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text">{{ .oss }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell" data-tier-col="free-tier">
|
||||
{{ if eq .free true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .free false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text">{{ .free }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--highlight" data-tier-col="paid-tier">
|
||||
{{ if eq .paid true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .paid false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text qdrant-pricing-features__text--bold">{{ .paid }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="qdrant-pricing-features__table-cell" data-tier-col="premium-tier">
|
||||
{{ if eq .premium true }}
|
||||
<svg class="qdrant-pricing-features__check" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.6667 5L7.50001 14.1667L3.33334 10" stroke="#2F6FF0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else if eq .premium false }}
|
||||
<svg class="qdrant-pricing-features__x" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 5L5 15M5 5L15 15" stroke="#717C99" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
{{ else }}
|
||||
<span class="qdrant-pricing-features__text qdrant-pricing-features__text--bold">{{ .premium }}</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="qdrant-pricing-features__table-footer">
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--feature"></div>
|
||||
{{ range $index, $cta := .Params.ctas }}
|
||||
<div class="qdrant-pricing-features__table-cell qdrant-pricing-features__table-cell--cta{{ if eq $index 2 }} qdrant-pricing-features__table-cell--highlight{{ end }}" data-tier-col="{{ index (slice "oss" "free-tier" "paid-tier" "premium-tier") $index }}">
|
||||
<a href="{{ $cta.url }}" class="button {{ if $cta.contained }}button_contained{{ else }}button_outlined{{ end }}">
|
||||
{{ $cta.text }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ with .Params.compareButton }}
|
||||
<div class="qdrant-pricing-features__compare">
|
||||
<a href="{{ .url }}" class="button button_outlined">{{ .text }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,11 +1,26 @@
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-hero") }}
|
||||
<section class="qdrant-pricing-hero">
|
||||
<div class="qdrant-pricing-hero__background">
|
||||
<div class="qdrant-pricing-hero__grid"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h3 class="qdrant-pricing-hero__title">{{ .Params.title }}</h3>
|
||||
<h5 class="qdrant-pricing-hero__subtitle">{{ .Params.subtitle }}</h5>
|
||||
<div class="qdrant-pricing-hero__description">{{ .Params.description }}</div>
|
||||
<div class="qdrant-pricing-hero__content">
|
||||
<h1 class="qdrant-pricing-hero__title">{{ .Params.title }}</h1>
|
||||
<div class="qdrant-pricing-hero__description">{{ .Params.description }}</div>
|
||||
<div class="qdrant-pricing-hero__actions">
|
||||
{{ with .Params.button }}
|
||||
<a href="{{ .url }}" class="button button_contained button_md qdrant-pricing-hero__button">
|
||||
{{ .text }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ with .Params.link }}
|
||||
<a href="{{ .url }}" class="qdrant-pricing-hero__link">
|
||||
{{ .text }}
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.16669 7H12.8334M12.8334 7L7.00002 1.16666M12.8334 7L7.00002 12.8333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,29 +4,22 @@
|
||||
|
||||
{{ partial "qdrant-pricing-hero" . }}
|
||||
|
||||
<!--{{ with (.Site.GetPage "/pricing/qdrant-pricing-doors-a") }}-->
|
||||
<!-- {{ partial "qdrant-pricing-doors" (dict "context" . "class" "qdrant-pricing-doors-a") }}-->
|
||||
<!--{{ end }}-->
|
||||
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-doors-b") }}
|
||||
{{ partial "qdrant-pricing-doors" (dict "context" . "class" "qdrant-pricing-doors-b") }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "qdrant-pricing-calculator" . }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/get-started-small-database") }}
|
||||
{{ partial "get-started-small" (dict "context" . "class" "get-started-small-database") }}
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-features") }}
|
||||
{{ partial "qdrant-pricing-features" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/marketplaces") }}
|
||||
{{ partial "marketplaces" (dict "context" . "class" "qdrant-pricing-marketplaces") }}
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-faq") }}
|
||||
{{ partial "qdrant-pricing-faq" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/get-contacted-with-question") }}
|
||||
{{ partial "get-contacted" (dict "context" . "class" "qdrant-pricing-get-contacted") }}
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-cta") }}
|
||||
{{ partial "qdrant-pricing-cta" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/headless/main/docker-deploy") }}
|
||||
{{ partial "docker-deploy" (dict "context" . "class" " qdrant-pricing-docker-deploy")}}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
@@ -1 +1,17 @@
|
||||
{{ define "main" }}{{ end }}
|
||||
{{ define "main" }}
|
||||
|
||||
{{ partial "site-header" . }}
|
||||
|
||||
{{ partial "qdrant-pricing-comparison" . }}
|
||||
|
||||
{{ partial "qdrant-pricing-calculator" . }}
|
||||
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-faq") }}
|
||||
{{ partial "qdrant-pricing-faq" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ with (.Site.GetPage "/pricing/qdrant-pricing-cta") }}
|
||||
{{ partial "qdrant-pricing-cta" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user