diff --git a/qdrant-landing/content/pricing/comparison/index.md b/qdrant-landing/content/pricing/comparison/index.md new file mode 100644 index 000000000..5015e05e1 --- /dev/null +++ b/qdrant-landing/content/pricing/comparison/index.md @@ -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 +--- diff --git a/qdrant-landing/content/pricing/qdrant-pricing-calculator.md b/qdrant-landing/content/pricing/qdrant-pricing-calculator.md index 1847361e1..6d8bb6cc6 100644 --- a/qdrant-landing/content/pricing/qdrant-pricing-calculator.md +++ b/qdrant-landing/content/pricing/qdrant-pricing-calculator.md @@ -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 diff --git a/qdrant-landing/content/pricing/qdrant-pricing-cta.md b/qdrant-landing/content/pricing/qdrant-pricing-cta.md new file mode 100644 index 000000000..050d942b8 --- /dev/null +++ b/qdrant-landing/content/pricing/qdrant-pricing-cta.md @@ -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 +--- diff --git a/qdrant-landing/content/pricing/qdrant-pricing-doors-b.md b/qdrant-landing/content/pricing/qdrant-pricing-doors-b.md index 6d11ad8ee..9f308dd10 100644 --- a/qdrant-landing/content/pricing/qdrant-pricing-doors-b.md +++ b/qdrant-landing/content/pricing/qdrant-pricing-doors-b.md @@ -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: *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 --- diff --git a/qdrant-landing/content/pricing/qdrant-pricing-faq.md b/qdrant-landing/content/pricing/qdrant-pricing-faq.md new file mode 100644 index 000000000..9d4d9d708 --- /dev/null +++ b/qdrant-landing/content/pricing/qdrant-pricing-faq.md @@ -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 +--- diff --git a/qdrant-landing/content/pricing/qdrant-pricing-features.md b/qdrant-landing/content/pricing/qdrant-pricing-features.md new file mode 100644 index 000000000..f60cc8f60 --- /dev/null +++ b/qdrant-landing/content/pricing/qdrant-pricing-features.md @@ -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 +--- diff --git a/qdrant-landing/content/pricing/qdrant-pricing-hero.md b/qdrant-landing/content/pricing/qdrant-pricing-hero.md index 54980309c..0d177ee10 100644 --- a/qdrant-landing/content/pricing/qdrant-pricing-hero.md +++ b/qdrant-landing/content/pricing/qdrant-pricing-hero.md @@ -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 --- diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/main.scss b/qdrant-landing/themes/qdrant-2024/assets/css/main.scss index 0e8f64c45..7b4d71e6b 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/main.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/main.scss @@ -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'; diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-calculator.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-calculator.scss index 2978a0004..c3b6483df 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-calculator.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-calculator.scss @@ -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; + } + } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-comparison.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-comparison.scss new file mode 100644 index 000000000..a3f23096a --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-comparison.scss @@ -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; + } + } + } + } +} diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-cta.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-cta.scss new file mode 100644 index 000000000..e817ac31b --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-cta.scss @@ -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; + } + } +} diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-doors-b.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-doors-b.scss index 66bfb3b2c..b61e74ed2 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-doors-b.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-doors-b.scss @@ -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%; + } + } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-faq.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-faq.scss new file mode 100644 index 000000000..c6a58d48a --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-faq.scss @@ -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); + } + } +} diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-features.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-features.scss new file mode 100644 index 000000000..6bb85da0e --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-features.scss @@ -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; + } + } + } + } +} diff --git a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-hero.scss b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-hero.scss index 0742cbfdb..ba1d04684 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-hero.scss +++ b/qdrant-landing/themes/qdrant-2024/assets/css/partials/_qdrant-pricing-hero.scss @@ -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); } } } diff --git a/qdrant-landing/themes/qdrant-2024/assets/js/index.js b/qdrant-landing/themes/qdrant-2024/assets/js/index.js index 3692f6c4b..06a3f338e 100644 --- a/qdrant-landing/themes/qdrant-2024/assets/js/index.js +++ b/qdrant-landing/themes/qdrant-2024/assets/js/index.js @@ -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; diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-calculator.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-calculator.html index 132857d3b..7153ebd3d 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-calculator.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-calculator.html @@ -1,16 +1,70 @@ {{ with (.Site.GetPage "/pricing/qdrant-pricing-calculator") }}
+
+
+
-
-
-

{{ .Params.titleFirstPart }}

-

{{ .Params.titleSecondPart }}

- - {{ .Params.link.text }} - +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+

{{ .Params.title }}

+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-comparison.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-comparison.html new file mode 100644 index 000000000..f8c10e2a0 --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-comparison.html @@ -0,0 +1,150 @@ +{{ $context := . }} + +
+
+
+
+
+
+ {{ with .Params.badge }} +
+ + + + + + {{ .text }} + + {{ .linkText }} + + + + +
+ {{ end }} +

{{ .Params.title }}

+

{{ .Params.description }}

+
+ {{ with .Params.button }} + {{ .text }} + {{ end }} + {{ with .Params.link }} + + {{ .text }} + + + + + {{ end }} +
+
+
+
+ +
+
+
+ {{ range $index, $tier := .Params.tiers }} + + {{ end }} +
+ +
+
+
+ {{ range .Params.tiers }} +
+ {{ .name }} +
+ {{ end }} +
+ +
+ {{ range .Params.sections }} +
+
+ {{ .name }} + + + +
+
+ {{ range .features }} +
+
+ {{ .name }} +
+
+ {{ if eq .oss true }} + + + + {{ else if eq .oss false }} + + + + {{ else }} + {{ .oss }} + {{ end }} +
+
+ {{ if eq .free true }} + + + + {{ else if eq .free false }} + + + + {{ else }} + {{ .free }} + {{ end }} +
+
+ {{ if eq .paid true }} + + + + {{ else if eq .paid false }} + + + + {{ else }} + {{ .paid }} + {{ end }} +
+
+ {{ if eq .premium true }} + + + + {{ else if eq .premium false }} + + + + {{ else }} + {{ .premium }} + {{ end }} +
+
+ {{ end }} +
+
+ {{ end }} +
+ + +
+
+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-cta.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-cta.html new file mode 100644 index 000000000..ad3c0fb67 --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-cta.html @@ -0,0 +1,20 @@ +
+
+
+
+
+
+
+

{{ .Params.title }}

+

{{ .Params.subtitle }}

+ {{ with .Params.button }} + + {{ .text }} + + + + + {{ end }} +
+
+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-doors.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-doors.html index 695c7e697..1db3ff0aa 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-doors.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-doors.html @@ -1,12 +1,140 @@ {{ $class := .class }}
-
- {{ range $index, $element := .context.Params.cards }} -
- {{ partial "pricing-door" (dict "context" .) }} -
+ {{/* Navigation Tabs */}} +
+ {{ range .context.Params.tabs }} + {{ end }}
+ + {{/* Per-tab pricing tiers */}} + {{ range .context.Params.tabs }} +
+ {{ range .tiers }} +
+ {{/* Heading */}} +
+

{{ .title }}

+ {{ if .badge }} +
+ Runs on + + + + +
+ {{ end }} + {{ with .pricing }} +
+ {{ . }} + {{ with $.pricingNote }} + {{ . }} + {{ end }} +
+ {{ end }} +
+ + {{/* Target */}} +
+

{{ .target }}

+
+ + {{/* Features (flat list for Managed) */}} + {{ with .features }} +
+
    + {{ range . }} +
  • + + + + {{ . }} +
  • + {{ end }} +
+ + {{/* Marketplace logos */}} + {{ with $.marketplace }} +
+

{{ .label }}

+
+ {{ range .logos }} + + {{ end }} +
+
+ {{ end }} + + {{/* Contact link for premium tier */}} + {{ with $.contactLink }} + + {{ .text }} + + + + + {{ end }} +
+ {{ end }} + + {{/* Feature groups (labeled lists for On-Premise) */}} + {{ range .featureGroups }} +
+

{{ .label }}

+
    + {{ range .items }} +
  • + + + + {{ . }} +
  • + {{ end }} +
+
+ {{ end }} + + {{/* CTA */}} + +
+ {{ end }} +
+ {{ end }}
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-faq.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-faq.html new file mode 100644 index 000000000..1913db87e --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-faq.html @@ -0,0 +1,25 @@ +
+
+

{{ .Params.title }}

+
+ {{ range $index, $element := .Params.questions }} +
+
+
{{ .question }}
+ + + + + + + + +
+
+

{{ .answer }}

+
+
+ {{ end }} +
+
+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-features.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-features.html new file mode 100644 index 000000000..2d719f6b2 --- /dev/null +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-features.html @@ -0,0 +1,122 @@ +
+
+
+

{{ .Params.title }}

+
+ + +
+
+ + {{/* Mobile tier tabs */}} +
+ {{ range $index, $tier := .Params.tiers }} + + {{ end }} +
+ +
+
+
+ {{ range .Params.tiers }} +
+ {{ .name }} +
+ {{ end }} +
+ +
+ {{ range .Params.sections }} +
+
+ {{ .name }} + + + +
+
+ {{ range .features }} +
+
+ {{ .name }} +
+
+ {{ if eq .oss true }} + + + + {{ else if eq .oss false }} + + + + {{ else }} + {{ .oss }} + {{ end }} +
+
+ {{ if eq .free true }} + + + + {{ else if eq .free false }} + + + + {{ else }} + {{ .free }} + {{ end }} +
+
+ {{ if eq .paid true }} + + + + {{ else if eq .paid false }} + + + + {{ else }} + {{ .paid }} + {{ end }} +
+
+ {{ if eq .premium true }} + + + + {{ else if eq .premium false }} + + + + {{ else }} + {{ .premium }} + {{ end }} +
+
+ {{ end }} +
+
+ {{ end }} +
+ + +
+ + {{ with .Params.compareButton }} + + {{ end }} +
+
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-hero.html b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-hero.html index 7dd4f7147..eed1acab3 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-hero.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/partials/qdrant-pricing-hero.html @@ -1,11 +1,26 @@ {{ with (.Site.GetPage "/pricing/qdrant-pricing-hero") }}
+
+
+
-
-
-

{{ .Params.title }}

-
{{ .Params.subtitle }}
-
{{ .Params.description }}
+
+

{{ .Params.title }}

+
{{ .Params.description }}
+
+ {{ with .Params.button }} + + {{ .text }} + + {{ end }} + {{ with .Params.link }} + + {{ .text }} + + + + + {{ end }}
diff --git a/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html b/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html index c9a131ae7..0a89396e2 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/pricing/list.html @@ -4,29 +4,22 @@ {{ partial "qdrant-pricing-hero" . }} - - - - {{ 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 }} diff --git a/qdrant-landing/themes/qdrant-2024/layouts/pricing/single.html b/qdrant-landing/themes/qdrant-2024/layouts/pricing/single.html index 806bcec80..5f8393e96 100644 --- a/qdrant-landing/themes/qdrant-2024/layouts/pricing/single.html +++ b/qdrant-landing/themes/qdrant-2024/layouts/pricing/single.html @@ -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 }}