Update images on use-cases page (#2268)

* update images on use-cases page

* update styles

qdrant-landing/content/use-cases/vectors-use-case.md

@@ -8,28 +8,48 @@ featureCards:
     link:
       text: Learn More
       url: /advanced-search/
+    image:
+      src: /img/home/horizontal-slider/advanced-search.png
+      webp: /img/home/horizontal-slider/advanced-search.webp
+      alt: Advanced Search
   - id: 1
     title: Recommendation Systems
     content: Create highly responsive and personalized recommendation systems with tailored suggestions. Qdrant’s Recommendation API offers great flexibility, featuring options such as best score recommendation strategy. This enables new scenarios of using multiple vectors in a single query to impact result relevancy.
     link:
       text: Learn More
       url: /recommendations/
+    image:
+      src: /img/home/horizontal-slider/recommendation-systems.png
+      webp: /img/home/horizontal-slider/recommendation-systems.webp
+      alt: Recommendation Systems
   - id: 2
     title: Retrieval Augmented Generation (RAG)
     content: Enhance the quality of AI-generated content. Leverage Qdrant's efficient nearest neighbor search and payload filtering features for retrieval-augmented generation. You can then quickly access relevant vectors and integrate a vast array of data points.
     link:
       text: Learn More
       url: /rag/
+    image:
+      src: /img/home/horizontal-slider/rag.png
+      webp: /img/home/horizontal-slider/rag.webp
+      alt: Retrieval Augmented Generation (RAG)
   - id: 3
     title: Data Analysis and Anomaly Detection
     content: Transform your approach to Data Analysis and Anomaly Detection. Leverage vectors to quickly identify patterns and outliers in complex datasets. This ensures robust and real-time anomaly detection for critical applications.
     link:
       text: Learn More
       url: /data-analysis-anomaly-detection/
+    image:
+      src: /img/home/horizontal-slider/anomaly-detection.png
+      webp: /img/home/horizontal-slider/anomaly-detection.webp
+      alt: Data Analysis and Anomaly Detection
   - id: 4
     title: AI Agents
     content: Unlock the full potential of your AI agents with Qdrant’s powerful vector search and scalable infrastructure, allowing them to handle complex tasks, adapt in real time, and drive smarter, data-driven outcomes across any environment.
     link:
       text: Learn More
       url: /ai-agents/
+    image:
+      src: /img/home/horizontal-slider/qdrant-use-caseai-agents.png
+      webp: /img/home/horizontal-slider/qdrant-use-caseai-agents.webp
+      alt: AI Agents
 ---

qdrant-landing/themes/qdrant-2024/assets/css/partials/_vectors.scss

@@ -41,13 +41,6 @@
     display: flex;
     flex-direction: column;
     gap: $spacer * 5;
-
-    & > div:first-child {
-      .vectors__card-image {
-        height: pxToRem(256);
-        margin-bottom: -$spacer * 2;
-      }
-    }
   }
 
   &__card {
@@ -116,18 +109,19 @@
     &__cards {
       gap: $spacer * 10;
 
-      & > div:first-child {
-        .vectors__card-image {
-          height: pxToRem(392);
-        }
-      }
-
       & > div:last-of-type {
         .vectors__card-title {
           font-size: map-get($font-sizes, 2);
           line-height: pxToRem(67);
         }
       }
+
+      & > div:last-of-type {
+        .vectors__card-content {
+          font-size: $font-size-xl;
+          line-height: pxToRem(30);
+        }
+      }
     }
 
     &__card {
@@ -142,7 +136,7 @@
 
     &__card-image {
       width: pxToRem(540);
-      height: pxToRem(360);
+      height: pxToRem(400);
       margin-top: 0;
     }
 

qdrant-landing/themes/qdrant-2024/layouts/partials/vectors.html

@@ -26,7 +26,7 @@
               <p class="vectors__card-content">{{ .content }}</p>
               <a class="link link_light link_md" href="{{ .link.url }}"> {{ .link.text }} </a>
             </div>
-            <div class="vectors__card-image" style="background-image: url(/img/vectors/vector-{{ $index }}.svg)"></div>
+            <div class="vectors__card-image" style="background-image: url('{{ .image.src }}');{{ if .image.webp }} background-image: image-set(url('{{ .image.webp }}') type('image/webp'), url('{{ .image.src }}') type('image/png'));{{ end }}"></div>
           </div>
         </div>
       {{ end }}