Merge pull request #2583 from qdrant/szabosteve/i112-2

Add CTA below the docs table of contents

qdrant-landing/content/headless/docs-sidebar-cta.md

@@ -0,0 +1,6 @@
+---
+sitemapExclude: true
+text: Ready to try Qdrant?
+link: https://cloud.qdrant.io/signup
+icon: /icons/outline/rocket.png
+---

qdrant-landing/themes/qdrant-2024/assets/css/partials/_table-of-contents.scss

@@ -114,6 +114,57 @@
     color: $neutral-100;
   }
 
+  // "Ready to try Qdrant?" CTA shown directly below the TOC's external links.
+  // Hidden by default; shown at xl within the `.documentation` scope.
+  &__cta {
+    display: none;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    gap: calc($spacer / 3);
+    // Full width within the TOC content box, aligned with the nav and links.
+    width: 100%;
+    padding: pxToRem(12) pxToRem(8);
+    border-radius: pxToRem(8);
+    border: pxToRem(1) solid $neutral-30;
+    // Dark base with a soft blue glow on the left, per the design.
+    background-color: $neutral-20;
+    background-image: linear-gradient(90deg, rgba(6, 62, 162, 0.2) 0%, rgba(6, 62, 162, 0) 65%);
+    color: $neutral-98;
+    font-size: pxToRem(13);
+    line-height: $line-height-sm;
+    font-weight: 600;
+    text-align: center;
+    white-space: nowrap;
+    transition: border-color 0.2s ease;
+
+    // divider between the external links and the CTA (the line under "Create an issue")
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: pxToRem(-24);
+      height: pxToRem(1);
+      background: $neutral-90;
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: $neutral-98;
+      border-color: $neutral-50;
+      // glow sweeps across to the right
+      background-image: linear-gradient(90deg, rgba(6, 62, 162, 0) 35%, rgba(6, 62, 162, 0.3) 100%);
+    }
+  }
+
+  &__cta-icon {
+    flex-shrink: 0;
+    width: pxToRem(18);
+    height: pxToRem(18);
+    object-fit: contain;
+  }
+
   @include media-breakpoint-up(xl) {
     max-height: calc(100vh - 80px);
     width: pxToRem(232);
@@ -141,7 +192,7 @@
       color: $neutral-98;
     }
 
-    a:not(.table-of-contents__button) {
+    a:not(.table-of-contents__button):not(.table-of-contents__cta) {
       color: $neutral-70;
       transition: all 0.3s;
       &:hover {
@@ -160,6 +211,10 @@
       border-bottom: 1px solid $neutral-20;
     }
 
+    &__cta::before {
+      background: $neutral-20;
+    }
+
     &__link {
       a {
         color: $neutral-98;
@@ -180,6 +235,15 @@
     }
   }
 
+  [data-theme='light'] & {
+    // The default active pill ($neutral-90) is nearly the same as the light page
+    // background ($neutral-94); use a darker neutral so the highlight is visible.
+    a.active {
+      background-color: $neutral-80;
+      color: $neutral-30;
+    }
+  }
+
   // scoped styles
   .documentation & {
     &__external-links {
@@ -189,6 +253,13 @@
       padding: $spacer * 1.5 $spacer $spacer * 1.5 pxToRem(40);
       &__external-links {
         display: block;
+        // The divider below the links is drawn by the CTA's ::before, so drop
+        // this border to avoid a doubled line.
+        border-bottom: none;
+      }
+      &__cta {
+        display: flex;
+        margin-top: $spacer * 1.5;
       }
     }
   }

qdrant-landing/themes/qdrant-2024/layouts/partials/table-of-contents.html

@@ -74,6 +74,19 @@
           {{ end }}
         </ul>
       {{ end }}
+
+      {{ if eq .Section "documentation" }}
+        {{ with .Site.GetPage "/headless/docs-sidebar-cta" }}
+          <a
+            href="{{ .Params.link }}"
+            class="table-of-contents__cta"
+            {{ if strings.HasPrefix .Params.link "https://" }}target="_blank" rel="noopener"{{ end }}
+          >
+            {{ with .Params.icon }}<img class="table-of-contents__cta-icon" src="{{ . }}" alt="" />{{ end }}
+            {{ .Params.text }}
+          </a>
+        {{ end }}
+      {{ end }}
     </div>
   {{ end }}
 {{ end }}