Banner with an announcment (#811)

* banner with announcment

* banner text and link upd, banner only on the main page

qdrant-landing/themes/qdrant/layouts/partials/header.html

@@ -5,6 +5,9 @@
     {{ partial "body_start.html" . }}
 
             <!-- Main Header-->
+    {{ if .IsHome }}
+    {{ partial "top-banner" (dict "context" . "classes" "") }}
+    {{ end }}
 
             {{ if (eq $.Section "documentation") }}
             <header class="main-header position-static">

qdrant-landing/themes/qdrant/layouts/partials/top-banner.html

@@ -0,0 +1,11 @@
+{{ $classes := .classes }}
+{{ with (.context.Site.GetPage "/headless/top-banner") }}
+<section class="top-banner{{if $classes}} {{ $classes }}{{end}}">
+    <div class="d-flex flex-wrap align-items-center justify-content-between">
+        <span class="top-banner__icon"> {{ .Params.icon | safeHTML }} </span>
+        <span class="top-banner__text"> {{ .Params.text }}
+        </span>
+        <a href="{{ .Params.link.url }}">{{ .Params.link.text }}</a>
+    </div>
+</section>
+{{ end }}

qdrant-landing/themes/qdrant/static/css/blocks/_top-banner.scss

@@ -0,0 +1,51 @@
+@use '../helpers/functions' as *;
+
+.top-banner {
+  display: flex;
+  height: rem(40);
+  justify-content: center;
+  align-items: center;
+  gap: $spacer * 1.5;
+  border-bottom: 1px solid #f4f6ff;
+  background: #f4f6ff;
+
+  &__text {
+    color: var(--brand-secondary);
+    font-size: rem(18);
+    margin-right: $spacer;
+  }
+
+  & a {
+    font-size: rem(18);
+    &:hover {
+      color: var(--brand-primary);
+      text-decoration: underline;
+    }
+  }
+
+  &__icon {
+    margin-right: $spacer;
+  }
+
+  &_dark {
+    background: var(--brand-dark-gray);
+    color: #fff;
+    border-bottom: 1px solid var(--brand-dark-gray);
+
+    .top-banner__text {
+      color: #fff;
+    }
+
+    & a {
+      color: var(--neutral-n-50);
+      text-decoration: underline;
+      &:hover {
+        color: #fff;
+      }
+    }
+
+    .top-banner__icon svg path {
+      fill: #EADDFF;
+    }
+  }
+}

qdrant-landing/themes/qdrant/static/css/main.scss

@@ -182,4 +182,5 @@ blockquote {
 
 @import "cookit";
 @import "mathjax";
-@import "lang-switcher";
+@import "lang-switcher";
+@import "blocks/top-banner";