Updated stars page (#1677)

* Stars page updated

* Updated images

* Small fix

qdrant-landing/themes/qdrant-2024/assets/css/partials/_stars-hero.scss

@@ -56,6 +56,7 @@
     }
 
     &__description {
+      max-width: pxToRem(466);
       font-size: pxToRem(20);
       line-height: pxToRem(30);
     }

qdrant-landing/themes/qdrant-2024/assets/css/partials/_stars-list.scss

@@ -18,6 +18,10 @@
 
   &__cards {
     row-gap: pxToRem(30);
+
+    &:first-of-type {
+      margin-bottom: pxToRem(30);
+    }
   }
 
   &__card {
@@ -70,7 +74,7 @@
       top: 0;
       width: pxToRem(124);
       height: pxToRem(124);
-      background-image: url('/img/blurred/blurred-light-15.svg');
+      background-image: url('/img/blurred/blurred-light-21.svg');
       background-position: top;
       background-size: cover;
     }
@@ -78,15 +82,16 @@
 
   &__main-card {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column;
     align-items: center;
-    justify-content: space-between;
     max-width: none;
     min-height: auto;
-    gap: $spacer * 1.5;
+    padding: pxToRem(30);
 
-    &-content {
-      max-width: pxToRem(431);
+    &-image {
+      width: 100%;
+      margin-bottom: pxToRem(30);
+      border-radius: pxToRem(6);
     }
 
     &-head {
@@ -94,7 +99,7 @@
       align-items: center;
       justify-content: center;
       gap: $spacer * 0.5;
-      margin-bottom: $spacer;
+      margin-bottom: $spacer * 0.5;
       font-size: pxToRem(14);
       line-height: pxToRem(21);
       color: $secondary-violet-70;
@@ -123,15 +128,26 @@
       color: $neutral-60;
     }
 
-    &-image {
-      position: relative;
-      width: 100%;
-      max-width: pxToRem(431);
-      z-index: 1;
+    &-overlay {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: pxToRem(124);
+      height: pxToRem(321);
+      background-image: url('/img/blurred/blurred-light-20.svg');
+      background-position: top;
+      background-size: cover;
     }
   }
 
-  &__overlay {
+  &__link {
+    position: relative;
+    z-index: 1;
+    text-align: center;
+    margin-top: $spacer * 4;
+  }
+
+  &__overlay-top {
     position: absolute;
     right: 0;
     top: 0;
@@ -142,9 +158,20 @@
     background-size: cover;
   }
 
+  &__overlay-bottom {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: pxToRem(637);
+    height: pxToRem(444);
+    background-image: url('/img/blurred/blurred-light-19.svg');
+    background-position: bottom;
+    background-size: cover;
+  }
+
   @include media-breakpoint-up(lg) {
     padding-top: $spacer * 7.5;
-    padding-bottom: $spacer * 7.5;
+    padding-bottom: pxToRem(211);
 
     &__title {
       margin-bottom: $spacer * 5;
@@ -154,17 +181,18 @@
 
     &__cards {
       row-gap: $spacer * 2.5;
+
+      &:first-of-type {
+        margin-bottom: $spacer * 5;
+      }
     }
 
     &__main-card {
-      flex-direction: row;
-      align-items: flex-start;
-      padding: $spacer * 3.5 $spacer * 3;
-      text-align: left;
+      min-height: pxToRem(571);
+    }
 
-      &-head {
-        justify-content: start;
-      }
+    &__link {
+      margin-top: $spacer * 7.5;
     }
   }
 }

qdrant-landing/themes/qdrant-2024/assets/css/partials/_stars-marketplaces.scss

@@ -67,7 +67,7 @@
     }
 
     &__card {
-      height: pxToRem(306);
+      height: pxToRem(294);
     }
 
     &__square-grid-overlay {
@@ -78,7 +78,7 @@
       width: 100%;
       height: pxToRem(400);
       background-image: url('/img/square-grid.png');
-      background-size: cover;
+      background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
     }

qdrant-landing/themes/qdrant-2024/layouts/partials/stars-hero.html

@@ -4,7 +4,7 @@
       <div class="row align-items-lg-center">
         <div class="stars-hero__content col-12 col-lg-6">
           <h1 class="stars-hero__title">{{ .Params.title }}</h1>
-          <p class="stars-hero__description">{{ .Params.description }}</p>
+          <p class="stars-hero__description">{{ .Params.description | safeHTML }}</p>
           <a href="{{ .Params.button.url }}" class="button button_contained button_md">
             {{ .Params.button.text }}
           </a>

qdrant-landing/themes/qdrant-2024/layouts/partials/stars-list.html

@@ -4,22 +4,22 @@
       <h2 class="stars-list__title">{{ .Params.title }}</h2>
       <div class="stars-list__cards row gx-4">
         {{ range .Params.mainCards }}
-          <div class="col-12">
+          <div class="col-12 col-lg-6">
             <div class="stars-list__card stars-list__main-card">
-             <div class="stars-list__main-card-content">
-               <p class="stars-list__main-card-head">
-                 {{ .headTitle }}
-                 <img src="{{ .headIcon.src }}" alt="{{ .headIcon.alt }}">
-               </p>
-               <h6 class="stars-list__main-card-title">{{ .name }}</h6>
-               <p class="stars-list__main-card-subtitle">{{ .position }}</p>
-               <p class="stars-list__main-card-description">{{ .description | safeHTML }}</p>
-             </div>
               <img class="stars-list__main-card-image" src="{{ .image.src }}" alt="{{ .image.alt }}" />
-              <div class="stars-list__card-overlay"></div>
+              <p class="stars-list__main-card-head">
+                {{ .headTitle }}
+                <img src="{{ .headIcon.src }}" alt="{{ .headIcon.alt }}">
+              </p>
+              <h6 class="stars-list__main-card-title">{{ .name }}</h6>
+              <p class="stars-list__main-card-subtitle">{{ .position }}</p>
+              <p class="stars-list__main-card-description">{{ .description | safeHTML }}</p>
+              <div class="stars-list__main-card-overlay"></div>
             </div>
           </div>
         {{ end }}
+      </div>
+      <div class="stars-list__cards row gx-4">
         {{ range .Params.cards }}
           <div class="col-12 col-md-6 col-lg-4 col-xl-3">
             <div class="stars-list__card">
@@ -32,7 +32,13 @@
           </div>
         {{ end }}
       </div>
+      <div class="stars-list__link">
+        <a class="link link_xl" href="{{ .Params.link.url }}" target="_blank">
+          {{ .Params.link.text }}
+        </a>
+      </div>
     </div>
-    <div class="stars-list__overlay"></div>
+    <div class="stars-list__overlay-top"></div>
+    <div class="stars-list__overlay-bottom"></div>
   </section>
 {{ end }}

qdrant-landing/themes/qdrant-2024/static/img/blurred/blurred-light-19.svg

@@ -0,0 +1,17 @@
+<svg width="636" height="444" viewBox="0 0 636 444" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_8860_40161)">
+<path d="M64.0033 399.228C105.957 429.232 138.109 431.131 187.413 446.279C282.586 475.52 345.335 454.809 438.681 489.441C629.148 560.105 27.4902 676.519 -81.2933 504.946C-149.678 397.09 -164.28 82.6376 -79.2627 177.934C-45.3096 215.993 -49.1442 252.192 -21.5832 295.107C6.8605 339.395 21.1895 368.609 64.0033 399.228Z" fill="url(#paint0_linear_8860_40161)"/>
+</g>
+<defs>
+<filter id="filter0_f_8860_40161" x="-297.898" y="0.1875" width="933.57" height="753.912" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_8860_40161"/>
+</filter>
+<linearGradient id="paint0_linear_8860_40161" x1="125.101" y1="492.063" x2="60.9201" y2="542.879" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DC244C"/>
+<stop offset="0.446034" stop-color="#F54C71"/>
+<stop offset="1" stop-color="#4A16B1"/>
+</linearGradient>
+</defs>
+</svg>

qdrant-landing/themes/qdrant-2024/static/img/blurred/blurred-light-20.svg

@@ -0,0 +1,12 @@
+<svg width="124" height="321" viewBox="0 0 124 321" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4" filter="url(#filter0_f_9282_41656)">
+<ellipse cx="60" cy="158" rx="60" ry="158" transform="matrix(1 0 0 -1 64 257)" fill="#2F6FF0"/>
+</g>
+<defs>
+<filter id="filter0_f_9282_41656" x="0" y="-123" width="248" height="444" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_9282_41656"/>
+</filter>
+</defs>
+</svg>

qdrant-landing/themes/qdrant-2024/static/img/blurred/blurred-light-21.svg

@@ -0,0 +1,12 @@
+<svg width="124" height="124" viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.4" filter="url(#filter0_f_9460_31168)">
+<circle cx="124" r="60" fill="#2F6FF0"/>
+</g>
+<defs>
+<filter id="filter0_f_9460_31168" x="0" y="-124" width="248" height="248" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_9460_31168"/>
+</filter>
+</defs>
+</svg>