Healthcare landing (#2131)

* add healthcare landing page * removed unused files, add a slider * fix slider value points style * slides update * logo section, fixes * some refinement * images fix * upd text and list styles * add menu links, fix z-index, fix some icons * thinner menu icon
2026-10-03 09:58:30 +02:00 · 2026-02-19 17:24:45 +01:00
parent 037551e0e3
commit 7afab3a7ec
60 changed files with 1509 additions and 33 deletions
@@ -0,0 +1,25 @@
+<section class="cta-banner">
+  <div class="container">
+    <div class="cta-banner__banner">
+      {{ if .Params.background }}
+        <div class="cta-banner__background" style="background-image: url('{{ .Params.background.src }}');"></div>
+      {{ end }}
+      <div class="cta-banner__content">
+        <div class="cta-banner__text">
+          <h2 class="cta-banner__title">{{ .Params.title }}</h2>
+          {{ 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>
+        {{ if .Params.illustration }}
+          <div class="cta-banner__illustration">
+            <img src="{{ .Params.illustration.src }}" alt="{{ .Params.illustration.alt }}" />
+          </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,33 @@
+<section class="healthcare-hero">
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col-12 col-xl-7 healthcare-hero__content">
+        {{ with .Params.label }}
+          <div class="healthcare-hero__label">
+            <img src="{{ .icon.src }}" alt="{{ .icon.alt }}" class="healthcare-hero__label-icon" />
+            <span class="healthcare-hero__label-text">{{ .text }}</span>
+          </div>
+        {{ end }}
+        <h1 class="healthcare-hero__title">{{ .Params.title | safeHTML }}</h1>
+        <p class="healthcare-hero__description">{{ .Params.description }}</p>
+        <div class="healthcare-hero__buttons">
+          {{ with .Params.startFree }}
+            <a href="{{ .url }}" class="button button_contained button_lg healthcare-hero__button">
+              {{ .text }}
+            </a>
+          {{ end }}
+          {{ with .Params.newsletter }}
+            <a href="{{ .url }}" class="button button_outlined button_lg healthcare-hero__button healthcare-hero__button--secondary">
+              {{ .text }}
+            </a>
+          {{ end }}
+        </div>
+      </div>
+      <div class="col-12 col-xl-5 healthcare-hero__preview">
+        {{ with .Params.image }}
+          <img src="{{ .src }}" alt="{{ .alt }}" class="healthcare-hero__image" />
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,29 @@
+<section class="healthcare-problem">
+  <div class="container">
+    <div class="row align-items-center">
+      <div class="col-12 col-xl-6 healthcare-problem__left">
+        <div class="healthcare-problem__visual">
+          <img src="{{ .Params.visual.src }}" alt="{{ .Params.visual.alt }}" class="healthcare-problem__visual-img" />
+        </div>
+        <div class="healthcare-problem__header">
+          <h2 class="healthcare-problem__title">{{ .Params.title }}</h2>
+          {{ with .Params.subtitle }}
+            <p class="healthcare-problem__subtitle">{{ . }}</p>
+          {{ end }}
+        </div>
+      </div>
+      <div class="col-12 col-xl-6 healthcare-problem__right">
+        <div class="healthcare-problem__grid">
+          {{ range .Params.problems }}
+            <div class="healthcare-problem__card">
+              <div class="healthcare-problem__card-icon">
+                <img src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
+              </div>
+              <p class="healthcare-problem__card-text">{{ .text }}</p>
+            </div>
+          {{ end }}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,17 @@
+<section class="healthcare-solutions">
+  <div class="container">
+    <h2 class="healthcare-solutions__title">{{ .Params.title }}</h2>
+    <div class="healthcare-solutions__bento">
+      <div class="healthcare-solutions__grid">
+        {{ range .Params.solutions }}
+          <div class="healthcare-solutions__card">
+            <div class="healthcare-solutions__card-visual">
+              <img src="{{ .image.src }}" alt="{{ .image.alt }}" />
+            </div>
+            <p class="healthcare-solutions__card-text">{{ .text }}</p>
+          </div>
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
@@ -0,0 +1,114 @@
+<section class="healthcare-use-cases">
+  <div class="container">
+    <h2 class="healthcare-use-cases__title">{{ .Params.title }}</h2>
+    
+    <div class="healthcare-use-cases__tabs">
+      {{ range $index, $tab := .Params.tabs }}
+        <button 
+          type="button" 
+          class="healthcare-use-cases__tab{{ if eq $index 0 }} healthcare-use-cases__tab--active{{ end }}"
+          data-use-case-tab="{{ $tab.id }}"
+          data-slide-index="{{ $index }}"
+        >
+          {{ $tab.label }}
+        </button>
+      {{ end }}
+    </div>
+
+    <div class="healthcare-use-cases__slider">
+      {{ range $index, $useCase := .Params.useCases }}
+        <div class="healthcare-use-cases__slide{{ if eq $index 0 }} healthcare-use-cases__slide--active{{ end }}" data-slide="{{ $index }}">
+          <div class="healthcare-use-cases__card" style="background: {{ $useCase.gradient | safeCSS }};">
+            <div class="healthcare-use-cases__card-visual">
+              <img src="{{ $useCase.visual.src }}" alt="{{ $useCase.visual.alt }}" class="healthcare-use-cases__card-visual-img" />
+            </div>
+            <div class="healthcare-use-cases__card-content">
+              <h3 class="healthcare-use-cases__card-title">{{ $useCase.title }}</h3>
+              <div class="healthcare-use-cases__values">
+                {{ range $useCase.values }}
+                  <div class="healthcare-use-cases__value-card">
+                    <p class="healthcare-use-cases__value-text">
+                      <span class="healthcare-use-cases__value-label">{{ .label }}</span>
+                      {{ .text }}
+                    </p>
+                  </div>
+                {{ end }}
+              </div>
+            </div>
+            <div class="healthcare-use-cases__card-texture"></div>
+          </div>
+        </div>
+      {{ end }}
+    </div>
+
+    <div class="healthcare-use-cases__controls">
+      <button type="button" class="healthcare-use-cases__arrow healthcare-use-cases__arrow--prev" id="healthcare-use-cases-prev">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+      <div class="healthcare-use-cases__dots">
+        {{ range $index, $tab := .Params.tabs }}
+          <button 
+            type="button" 
+            class="healthcare-use-cases__dot{{ if eq $index 0 }} healthcare-use-cases__dot--active{{ end }}"
+            data-slide-index="{{ $index }}"
+          >
+            <span></span>
+          </button>
+        {{ end }}
+      </div>
+      <button type="button" class="healthcare-use-cases__arrow healthcare-use-cases__arrow--next" id="healthcare-use-cases-next">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7.5 5L12.5 10L7.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</section>
+
+<script>
+(function() {
+  const section = document.querySelector('.healthcare-use-cases');
+  if (!section) return;
+
+  const tabs = section.querySelectorAll('.healthcare-use-cases__tab');
+  const dots = section.querySelectorAll('.healthcare-use-cases__dot');
+  const slides = section.querySelectorAll('.healthcare-use-cases__slide');
+  const prevBtn = section.querySelector('.healthcare-use-cases__arrow--prev');
+  const nextBtn = section.querySelector('.healthcare-use-cases__arrow--next');
+  
+  let currentIndex = 0;
+  const totalSlides = slides.length;
+
+  function goToSlide(index) {
+    if (index < 0) index = totalSlides - 1;
+    if (index >= totalSlides) index = 0;
+    
+    currentIndex = index;
+
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('healthcare-use-cases__slide--active', i === index);
+    });
+
+    tabs.forEach((tab, i) => {
+      tab.classList.toggle('healthcare-use-cases__tab--active', i === index);
+    });
+
+    dots.forEach((dot, i) => {
+      dot.classList.toggle('healthcare-use-cases__dot--active', i === index);
+    });
+  }
+
+  tabs.forEach((tab, i) => {
+    tab.addEventListener('click', () => goToSlide(i));
+  });
+
+  dots.forEach((dot, i) => {
+    dot.addEventListener('click', () => goToSlide(i));
+  });
+
+  prevBtn.addEventListener('click', () => goToSlide(currentIndex - 1));
+  nextBtn.addEventListener('click', () => goToSlide(currentIndex + 1));
+})();
+</script>
@@ -0,0 +1,31 @@
+<section class="healthcare-why-qdrant">
+  <div class="container">
+    <div class="row">
+      <div class="col-12 col-xl-7 healthcare-why-qdrant__content">
+        <h2 class="healthcare-why-qdrant__title">{{ .Params.title }}</h2>
+        <div class="healthcare-why-qdrant__items">
+          {{ range .Params.items }}
+            <div class="healthcare-why-qdrant__item">
+              <div class="healthcare-why-qdrant__item-icon">
+                <img src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
+              </div>
+              <p class="healthcare-why-qdrant__item-text">{{ .text | safeHTML }}</p>
+            </div>
+          {{ end }}
+        </div>
+        {{ with .Params.badges }}
+          <div class="healthcare-why-qdrant__badges">
+            {{ range . }}
+              <img src="{{ .src }}" alt="{{ .alt }}" class="healthcare-why-qdrant__badge" />
+            {{ end }}
+          </div>
+        {{ end }}
+      </div>
+      <div class="col-12 col-xl-5 healthcare-why-qdrant__visual">
+        {{ with .Params.image }}
+          <img src="{{ .src }}" alt="{{ .alt }}" class="healthcare-why-qdrant__image" />
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</section>
@@ -1,25 +0,0 @@
-<section class="hr-tech-cta">
-  <div class="container">
-    <div class="hr-tech-cta__banner">
-      {{ if .Params.background }}
-        <div class="hr-tech-cta__background" style="background-image: url('{{ .Params.background.src }}');"></div>
-      {{ end }}
-      <div class="hr-tech-cta__content">
-        <div class="hr-tech-cta__text">
-          <h2 class="hr-tech-cta__title">{{ .Params.title }}</h2>
-          {{ if .Params.description }}
-            <p class="hr-tech-cta__description">{{ .Params.description }}</p>
-          {{ end }}
-          <a href="{{ .Params.button.url }}" class="button button_contained button_lg hr-tech-cta__button">
-            {{ .Params.button.text }}
-          </a>
-        </div>
-        {{ if .Params.illustration }}
-          <div class="hr-tech-cta__illustration">
-            <img src="{{ .Params.illustration.src }}" alt="{{ .Params.illustration.alt }}" />
-          </div>
-        {{ end }}
-      </div>
-    </div>
-  </div>
-</section>
@@ -1,6 +1,18 @@
 {{ $class := .class }}
 <section class="testimonial-light {{ $class }}">
  <div class="container">
+    {{ with .context.Params.partners }}
+    <div class="testimonial-light__partners">
+      <p class="testimonial-light__partners-title">{{ .title }}</p>
+      <div class="testimonial-light__partners-logos">
+        {{ range .logos }}
+        <div class="testimonial-light__partners-card">
+          <img src="{{ .src }}" alt="{{ .alt }}" />
+        </div>
+        {{ end }}
+      </div>
+    </div>
+    {{ end }}
    <div class="row gy-4 gx-3">
      <div class="col-12 col-xl-9">
        <div class="testimonial-light__content">