Update Cloud page (#2542)

* update Cloud page

* fix image paths

* fix image paths

* update images and text on the button

* add links and target=_blank

* add missing links, updated the cards so the entire card is clickable

* add graphana dashboard gh link

---------

Co-authored-by: trean <trean.mi@gmail.com>
This commit is contained in:
nastyapash
2026-07-31 20:08:21 +02:00
committed by GitHub
co-authored by trean
parent 2a95231772
commit f145f0a500
118 changed files with 4459 additions and 426 deletions
@@ -0,0 +1,46 @@
{{/*
Reusable code window with copy button.
Params:
- block: BEM block prefix (e.g. "ai-agents-hero")
- codeBar: filename shown in the header
- code: source code string
- id: unique suffix for SVG clip-path IDs (required when multiple instances per page)
- language: optional, default "python"
*/}}
{{ $block := .block }}
{{ $clipId := printf "code-window-clip-%s" .id }}
{{ $lang := .language | default "python" }}
<div class="{{ $block }}__code js-copy-code">
<div class="{{ $block }}__code-header">
<div class="{{ $block }}__code-window-buttons">
<div class="{{ $block }}__code-window-buttons__close"></div>
<div class="{{ $block }}__code-window-buttons__minimize"></div>
<div class="{{ $block }}__code-window-buttons__expand"></div>
</div>
<p class="{{ $block }}__code-bar">{{ .codeBar }}</p>
</div>
<div class="{{ $block }}__code-content">
{{ with .code }}
{{ highlight . $lang "" }}
{{ end }}
<button type="button" class="{{ $block }}__code-content-button js-copy-code__copy" aria-label="Copy code">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g clip-path="url(#{{ $clipId }})">
<path d="M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2M5 4H10C10.5523 4 11 4.44771 11 5V10C11 10.5523 10.5523 11 10 11H5C4.44771 11 4 10.5523 4 10V5C4 4.44771 4.44771 4 5 4Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="{{ $clipId }}">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
</button>
<button type="button" class="{{ $block }}__code-content-button js-copy-code__done" aria-label="Code copied">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10 3L4.5 8.5L2 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
@@ -10,9 +10,24 @@
{{ if .Params.description }}
<p class="cta-banner__description">{{ .Params.description }}</p>
{{ end }}
<a href="{{ .Params.button.url }}" class="button button_contained button_lg cta-banner__button">
{{ .Params.button.text }}
</a>
<div class="cta-banner__buttons">
<a
href="{{ .Params.button.url }}"
class="button button_contained button_lg cta-banner__button"
{{ if strings.HasPrefix .Params.button.url "http" }}target="_blank"{{ end }}
>
{{ .Params.button.text }}
</a>
{{ if .Params.outlineButton }}
<a
href="{{ .Params.outlineButton.url }}"
class="button button_outlined button_lg cta-banner__button"
{{ if strings.HasPrefix .Params.outlineButton.url "http" }}target="_blank"{{ end }}
>
{{ .Params.outlineButton.text }}
</a>
{{ end }}
</div>
</div>
<div class="cta-banner__illustration">
{{ partial "picture" (dict "src" $illustration.src "alt" $illustration.alt "loading" "lazy" "decoding" "async") }}
@@ -122,7 +122,12 @@
<script src="{{ $customersJs.RelPermalink }}"></script>
{{ end }}
{{ if in (slice "blog" "articles" "course" "learn" "benchmarks" "docs" "documentation") .Section }}
{{ if eq .Section "qdrant-cloud" }}
{{ $customersJs := resources.Get "js/qdrant-cloud.js" | js.Build | minify | resources.Fingerprint "sha512" }}
<script src="{{ $customersJs.RelPermalink }}"></script>
{{ end }}
{{ if in (slice "blog" "articles" "course" "learn" "benchmarks" "qdrant-cloud" "docs" "documentation") .Section }}
<!--popper.js for bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
@@ -0,0 +1,21 @@
<section class="pricing-banner">
<div class="container">
<div class="pricing-banner__content">
<div class="pricing-banner__text">
<h2 class="pricing-banner__title">{{ .Params.title | safeHTML }}</h2>
{{ if .Params.description }}
<p class="pricing-banner__description">{{ .Params.description }}</p>
{{ end }}
</div>
<div class="pricing-banner__button">
<a
href="{{ .Params.button.url }}"
class="button button_contained button_lg"
{{ if strings.HasPrefix .Params.button.url "http" }}target="_blank"{{ end }}
>
{{ .Params.button.text }}
</a>
</div>
</div>
</div>
</section>
@@ -1,28 +0,0 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-bento-cards") }}
<section class="qdrant-cloud-bento-cards pt-6">
<div class="container">
<div class="qdrant-cloud-bento-cards__cards row">
{{ range $index, $element := .Params.items }}
<div class="col-12">
{{ if .link }}
<a href="{{ .link.url }}" class="card qdrant-cloud-bento-cards__card">
<h5 class="qdrant-cloud-bento-cards__card-title">{{ .title }}</h5>
<p class="qdrant-cloud-bento-cards__card-description">{{ .description | safeHTML }}</p>
{{ if .link }}
<span class="link link_md align-self-start">{{ .link.text }}</span>
{{ end }}
<img src="{{ .image.src }}" alt="{{ .image.alt }}" />
</a>
{{ else }}
<div class="card qdrant-cloud-bento-cards__card">
<h5 class="qdrant-cloud-bento-cards__card-title">{{ .title }}</h5>
<p class="qdrant-cloud-bento-cards__card-description">{{ .description | safeHTML }}</p>
<img src="{{ .image.src }}" alt="{{ .image.alt }}" />
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
@@ -1,10 +0,0 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-features-link") }}
<section class="qdrant-cloud-features-link">
<div class="container">
<h6 class="qdrant-cloud-features-link__content">{{ .Params.content }}</h6>
<a class="qdrant-cloud-features-link__link link link_xl" href="{{ .Params.link.url }}">
{{ .Params.link.text }}
</a>
</div>
</section>
{{ end }}
@@ -1,30 +0,0 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-hero") }}
<section class="qdrant-cloud-hero">
<div class="container">
<div class="row">
<div class="col-12">
<h3 class="qdrant-cloud-hero__title">{{ .Params.title }}</h3>
<div class="qdrant-cloud-hero__description">{{ .Params.description }}</div>
<div class="qdrant-cloud-hero__buttons">
<a href="{{ .Params.startFree.url }}" class="button button_contained button_lg">
{{ .Params.startFree.text }}
</a>
<a href="{{ .Params.contactUs.url }}" class="button button_outlined button_lg">
{{ .Params.contactUs.text }}
</a>
</div>
{{ if .Params.video }}
<div class="qdrant-cloud-hero__content">
<img src="{{ .Params.icon.src }}" alt="{{ .Params.icon.alt }}" />
<p>{{ .Params.content }}</p>
</div>
{{ partial "video" (dict "context" .) }}
{{ end }}
</div>
</div>
</div>
<div class="qdrant-cloud-hero__overlay"></div>
</section>
{{ end }}
@@ -0,0 +1,72 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-capabilities") }}
<section class="qdrant-cloud-capabilities">
<div class="container">
<h3 class="qdrant-cloud-capabilities__title">{{ .Params.title }}</h3>
<p class="qdrant-cloud-capabilities__description">{{ .Params.description }}</p>
<div class="qdrant-cloud-capabilities__tabs-sticky">
<div class="qdrant-cloud-capabilities__tabs" data-capabilities-tabs>
{{ range $index, $tab := .Params.tabs }}
<button
class="qdrant-cloud-capabilities__tabs-button{{ if eq $index 0 }} active{{ end }}"
data-capabilities-tab="{{ $index }}"
>
{{ $tab.tab }}
</button>
{{ end }}
</div>
</div>
<div class="qdrant-cloud-capabilities__tab-container">
{{ range $index, $tab := .Params.tabs }}
<div
class="qdrant-cloud-capabilities__tab-content"
id="qdrant-cloud-capabilities-tab-{{ $index }}"
data-capabilities-panel="{{ $index }}"
>
<div class="qdrant-cloud-capabilities__tab-header">
<div class="qdrant-cloud-capabilities__tab-header-overlay1"></div>
<div
class="qdrant-cloud-capabilities__tab-header-overlay2"
style="
--overlay-mobile: url('/img/qdrant-cloud/background/line-blur-mobile-{{ add $index 1 }}.png');
--overlay-desktop: url('/img/qdrant-cloud/background/line-blur-{{ add $index 1 }}.png');
"
></div>
<div class="qdrant-cloud-capabilities__tab-header-overlay3"></div>
<h4 class="qdrant-cloud-capabilities__tab-title">{{ $tab.title }}</h4>
<p class="qdrant-cloud-capabilities__tab-description">{{ $tab.description }}</p>
</div>
<div class="qdrant-cloud-capabilities__tab-features">
{{ range $tab.features }}
{{ if .link }}
<a
class="qdrant-cloud-capabilities__tab-feature"
href="{{ .link }}"
{{ if strings.HasPrefix .link "http" }}target="_blank" rel="noopener"{{ end }}
>
{{ else }}
<div class="qdrant-cloud-capabilities__tab-feature">
{{ end }}
<div class="qdrant-cloud-capabilities__tab-feature-header">
<img
class="qdrant-cloud-capabilities__tab-feature-icon"
src="{{ .icon.src }}"
alt="{{ .icon.alt }}"
>
<h3 class="qdrant-cloud-capabilities__tab-feature-title">{{ .title }}</h3>
</div>
<p class="qdrant-cloud-capabilities__tab-feature-description">{{ .description }}</p>
{{ if .link }}
</a>
{{ else }}
</div>
{{ end }}
{{ end }}
</div>
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
@@ -0,0 +1,25 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-customers") }}
<section class="qdrant-cloud-customers">
<div class="container">
<p class="qdrant-cloud-customers__label">{{ .Params.label }}</p>
<h3 class="qdrant-cloud-customers__title">{{ .Params.title }}</h3>
<div class="row g-4">
{{ range .Params.cards }}
<div class="col-12 col-lg-4">
<div class="card qdrant-cloud-customers__card">
<img class="qdrant-cloud-customers__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
<div>
<h5 class="qdrant-cloud-customers__card-title">{{ .title | safeHTML }}</h5>
<p class="qdrant-cloud-customers__card-description">{{ .description }}</p>
</div>
<div class="qdrant-cloud-customers__card-footer">
<p class="qdrant-cloud-customers__card-category">{{ .category }}</p>
<p class="qdrant-cloud-customers__card-label">{{ .label }}</p>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
@@ -0,0 +1,108 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-dev-experience") }}
<section class="qdrant-cloud-dev-experience">
<div class="container">
<p class="qdrant-cloud-dev-experience__label">{{ .Params.label }}</p>
<h3 class="qdrant-cloud-dev-experience__title">{{ .Params.title }}</h3>
<div class="row g-1 qdrant-cloud-dev-experience__cards">
{{ range .Params.features }}
<div class="col-12 col-md-6 col-lg-3">
<a
class="card qdrant-cloud-dev-experience__card"
href="{{ .link.url }}"
{{ if strings.HasPrefix .link.url "http" }}target="_blank"{{ end }}
>
<img class="qdrant-cloud-dev-experience__card-image" src="{{ .img.src }}" alt="{{ .img.alt }}">
<img class="qdrant-cloud-dev-experience__card-image-mobile" src="{{ .img.mobileSrc }}" alt="{{ .img.alt }}">
<span class="link link_dark link_lg qdrant-cloud-dev-experience__card-link">
{{ .link.text }}
</span>
</a>
</div>
{{ end }}
</div>
<div class="qdrant-cloud-dev-experience__tab-container">
<div class="qdrant-cloud-dev-experience__tabs" data-dev-experience-tabs>
{{ range $index, $tab := .Params.tabs }}
<button
type="button"
class="qdrant-cloud-dev-experience__tabs-button{{ if eq $index 0 }} active{{ end }}"
data-dev-experience-tab="{{ $index }}"
>
{{ $tab.tab }}
</button>
{{ end }}
</div>
{{ range $index, $tab := .Params.tabs }}
<div
class="qdrant-cloud-dev-experience__tab-content{{ if eq $index 0 }} is-active{{ end }}"
id="qdrant-cloud-dev-experience-tab-{{ $index }}"
data-dev-experience-panel="{{ $index }}"
>
{{ if eq $index 0 }}
<div class="qdrant-cloud-dev-experience__slide qdrant-cloud-dev-experience__slide--sdk">
<div class="qdrant-cloud-dev-experience__slide-header">
<h4 class="qdrant-cloud-dev-experience__slide-title">{{ $tab.title }}</h4>
<p class="qdrant-cloud-dev-experience__slide-description">{{ $tab.description }}</p>
</div>
<div class="qdrant-cloud-dev-experience__slide-code-list">
{{ range $tab.codeBlocks }}
{{ partial "code-window" (dict
"block" "qdrant-cloud-dev-experience"
"codeBar" .codeBar
"code" .code
) }}
{{ end }}
</div>
</div>
{{ else if eq $index 1 }}
<div class="qdrant-cloud-dev-experience__slide qdrant-cloud-dev-experience__slide--api">
<div class="qdrant-cloud-dev-experience__slide-header">
<h4 class="qdrant-cloud-dev-experience__slide-title">{{ $tab.title }}</h4>
<p class="qdrant-cloud-dev-experience__slide-description">{{ $tab.description }}</p>
</div>
<img
class="qdrant-cloud-dev-experience__slide-image"
src="{{ $tab.img.src }}"
alt="{{ $tab.img.alt }}"
>
<img
class="qdrant-cloud-dev-experience__slide-image-mobile"
src="{{ $tab.img.mobileSrc }}"
alt="{{ $tab.img.alt }}"
>
</div>
{{ else if eq $index 2 }}
<div class="qdrant-cloud-dev-experience__slide qdrant-cloud-dev-experience__slide--cli">
<div class="qdrant-cloud-dev-experience__slide-header">
<h4 class="qdrant-cloud-dev-experience__slide-title">{{ $tab.title }}</h4>
<p class="qdrant-cloud-dev-experience__slide-description">{{ $tab.description }}</p>
</div>
<div class="qdrant-cloud-dev-experience__slide-code-item">
{{ partial "code-window" (dict
"block" "qdrant-cloud-dev-experience"
"codeBar" $tab.codeBlock.codeBar
"code" $tab.codeBlock.code
) }}
</div>
</div>
{{ else }}
<div class="qdrant-cloud-dev-experience__slide">
<h4 class="qdrant-cloud-dev-experience__slide-title">{{ $tab.title }}</h4>
<p class="qdrant-cloud-dev-experience__slide-description">{{ $tab.description }}</p>
</div>
{{ end }}
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
@@ -0,0 +1,35 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-faq") }}
<section class="qdrant-cloud-faq">
<div class="container">
<h3 class="qdrant-cloud-faq__title">{{ .Params.title }}</h3>
<div class="row">
<div class="col-12 col-lg-4">
<nav class="qdrant-cloud-faq__nav">
{{ range $index, $category := .Params.list }}
<button
class="qdrant-cloud-faq__nav-button{{ if eq $index 0 }} is-active{{ end }}"
data-faq-category="{{ $index }}"
>
{{ $category.title }}
</button>
{{ end }}
</nav>
</div>
<div class="col-12 col-lg-8">
<div class="qdrant-cloud-faq__panels">
{{ range $index, $category := .Params.list }}
<div
class="qdrant-cloud-faq__panel{{ if eq $index 0 }} is-active{{ end }}"
data-faq-panel="{{ $index }}"
>
{{ partial "accordion" (dict "Params" (dict "questions" $category.questions)) }}
</div>
{{ end }}
</div>
</div>
</div>
</div>
</section>
{{ end }}
@@ -0,0 +1,54 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-hero") }}
<section class="qdrant-cloud-hero">
<div class="container">
<div class="row">
<div class="col-12 col-lg-6">
<p class="qdrant-cloud-hero__label">{{ .Params.label }}</p>
<h3 class="qdrant-cloud-hero__title">{{ .Params.title }}</h3>
<div class="qdrant-cloud-hero__description">{{ .Params.description }}</div>
<a
href="{{ .Params.startFree.url }}"
class="button button_contained button_lg"
{{ if strings.HasPrefix .Params.startFree.url "http" }}target="_blank"{{ end }}
>
{{ .Params.startFree.text }}
</a>
<div class="qdrant-cloud-hero__features">
{{ range .Params.features }}
<div class="qdrant-cloud-hero__features-item">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_18273_21757)">
<path d="M4.5 6L5.5 7L7.5 5M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z" stroke="#8F98B3" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_18273_21757">
<rect width="12" height="12" fill="white"/>
</clipPath>
</defs>
</svg>
{{ .title }}
</div>
{{ end }}
</div>
</div>
<div class="col-12 col-lg-6">
<div class="qdrant-cloud-hero__image-container">
<img class="qdrant-cloud-hero__image" src="{{ .Params.img.src }}" alt="{{ .Params.img.alt }}"/>
<img class="qdrant-cloud-hero__image-mobile" src="{{ .Params.img.mobileSrc }}" alt="{{ .Params.img.alt }}"/>
</div>
</div>
<div class="col-12 qdrant-cloud-hero__customers">
<p class="qdrant-cloud-hero__customers-title">{{ .Params.iconsTitle }}</p>
<div class="qdrant-cloud-hero__customers-list">
{{ range .Params.icons }}
<div class="qdrant-cloud-hero__customers-logo">
<img src="{{ .src }}" alt="{{ .alt }}" />
</div>
{{ end }}
</div>
</div>
</div>
</div>
<div class="qdrant-cloud-hero__overlay"></div>
</section>
{{ end }}
@@ -0,0 +1,24 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-resources") }}
<section class="qdrant-cloud-resources">
<div class="container">
<p class="qdrant-cloud-resources__label">{{ .Params.label }}</p>
<h3 class="qdrant-cloud-resources__title">{{ .Params.title }}</h3>
<div class="row gy-2 gx-4">
{{ range .Params.cards }}
<div class="col-12 col-lg-4">
<div class="card qdrant-cloud-resources__card">
<img class="qdrant-cloud-resources__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
<h5 class="qdrant-cloud-resources__card-title">{{ .title | safeHTML }}</h5>
<p class="qdrant-cloud-resources__card-description">{{ .description }}</p>
<a
class="link link_dark link_md qdrant-cloud-resources__card-link"
href="{{ .link.url }}"
{{ if strings.HasPrefix .link.url "http" }}target="_blank"{{ end }}
>{{ .link.text }}</a>
</div>
</div>
{{ end }}
</div>
</div>
</section>
{{ end }}
@@ -0,0 +1,36 @@
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-why-qdrant") }}
<section class="qdrant-cloud-why-qdrant">
<div class="container">
<p class="qdrant-cloud-why-qdrant__label">{{ .Params.label }}</p>
<h3 class="qdrant-cloud-why-qdrant__title">{{ .Params.title }}</h3>
<p class="qdrant-cloud-why-qdrant__description">{{ .Params.description }}</p>
<div class="row">
<div class="col-12 col-lg-6">
<img class="qdrant-cloud-why-qdrant__image" src="{{ .Params.img.src }}" alt="{{ .Params.img.alt }}" />
<img
class="qdrant-cloud-why-qdrant__image-mobile"
src="{{ .Params.img.mobileSrc }}"
alt="{{ .Params.img.alt }}"
/>
</div>
<div class="col-12 col-lg-6">
<div class="qdrant-cloud-why-qdrant__list">
{{ range .Params.list }}
<div class="qdrant-cloud-why-qdrant__list-item">
<h6 class="qdrant-cloud-why-qdrant__list-title">{{ .title }}</h6>
<p class="qdrant-cloud-why-qdrant__list-description">{{ .description }}</p>
</div>
{{ end }}
</div>
<a
class="qdrant-cloud-why-qdrant__button button button_contained button_lg"
href="{{ .Params.button.url }}"
{{ if strings.HasPrefix .Params.button.url "http" }}target="_blank"{{ end }}
>
{{ .Params.button.text }}
</a>
</div>
</div>
</div>
</section>
{{ end }}
@@ -1,13 +1,19 @@
{{ define "main" }}
{{ partial "site-header" . }}
{{ partial "qdrant-cloud-hero" . }}
{{ partial "qdrant-cloud-bento-cards" . }}
{{ partial "qdrant-cloud-features-link" . }}
{{ partial "qdrant-cloud/qdrant-cloud-hero" . }}
{{ partial "qdrant-cloud/qdrant-cloud-why-qdrant" . }}
{{ partial "qdrant-cloud/qdrant-cloud-customers" . }}
{{ partial "qdrant-cloud/qdrant-cloud-capabilities" . }}
{{ partial "qdrant-cloud/qdrant-cloud-dev-experience" . }}
{{ with (.Site.GetPage "/headless/marketplaces") }}
{{ partial "marketplaces" (dict "context" . "class" "qdrant-cloud-marketplaces") }}
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-pricing") }}
{{ partial "pricing-banner" . }}
{{ end }}
{{ partial "additional-resources" . }}
{{ partial "get-started" . }}
{{ partial "qdrant-cloud/qdrant-cloud-resources" . }}
{{ partial "qdrant-cloud/qdrant-cloud-faq" . }}
{{ with (.Site.GetPage "/qdrant-cloud/qdrant-cloud-cta") }}
{{ partial "cta-banner" . }}
{{ end }}
{{ end }}