replace branches hero images (#2222)

qdrant-landing/content/e-commerce/hero.md

@@ -4,7 +4,7 @@ tag:
   icon: 
     src: /icons/outline/cart-teal.svg
     alt: Shopping Cart
-title: AI-Powered Vector Search for Smarter <span class="text-nowrap">Shopping & Personalized</span> E-Commerce
+title: AI-Powered Vector Search for Smarter Shopping & Personalized E-Commerce
 description: Drive conversions with AI-powered vector search that delivers hyper-relevant product discovery, personalized recommendations, and fraud detection—all powered by Qdrant’s enterprise-grade vector search.
 startFree:
   text: Get Started

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

@@ -69,9 +69,13 @@
 
     img {
       position: relative;
+      z-index: 1;
       display: block;
       width: 100%;
-      max-width: pxToRem(560);
+      max-width: pxToRem(395);
+      height: auto;
+      object-fit: contain;
+      object-position: right top;
       margin-right: -$spacer * 1.5;
       margin-bottom: -$spacer * 1.5;
     }
@@ -81,6 +85,10 @@
     padding-top: $spacer * 5;
     padding-bottom: $spacer * 5;
 
+    &__content {
+      max-width: pxToRem(560);
+    }
+
     &__title {
       font-size: $spacer * 3;
       line-height: pxToRem(58);
@@ -93,29 +101,36 @@
       &-square-grid {
         display: block;
         position: absolute;
-        width: pxToRem(686);
-        height: pxToRem(480);
-        right: -24%;
-        top: -3%;
+        width: min(100%, pxToRem(686));
+        aspect-ratio: 800 / 560;
+        right: 0;
+        top: -$spacer * 1.5;
         background-image: url('/img/legal-tech-hero-grid.svg');
-        background-size: 100%;
+        background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         z-index: 0;
       }
 
       img {
-        width: 110%;
+        width: 100%;
+        max-width: pxToRem(395);
+        height: auto;
+        object-fit: contain;
+        object-position: right top;
       }
     }
   }
 
   @include media-breakpoint-up(xl) {
+    &__content {
+      max-width: pxToRem(634);
+    }
+
     &__preview {
       &-square-grid {
-        width: pxToRem(800);
-        height: pxToRem(560);
-        top: -5%;
+        width: min(100%, pxToRem(800));
+        aspect-ratio: 1 / 1;
       }
     }
   }

qdrant-landing/themes/qdrant-2024/layouts/partials/legal-tech-hero.html

@@ -1,7 +1,7 @@
 <section class="legal-tech-hero">
   <div class="container">
     <div class="row justify-content-lg-between align-items-lg-center">
-      <div class="col-12 col-lg-6 legal-tech-hero__content">
+      <div class="col-12 col-lg-7 legal-tech-hero__content">
         <div class="legal-tech-hero__tag">
           <img class="legal-tech-hero__tag-icon" src="{{ .Params.tag.icon.src }}" alt="{{ .Params.tag.icon.alt }}" />
           <p class="legal-tech-hero__tag-name">{{ .Params.tag.name }}</p>
@@ -17,7 +17,7 @@
           </a>
         </div>
       </div>
-      <div class="col-12 col-lg-6 legal-tech-hero__preview">
+      <div class="col-12 col-lg-5 legal-tech-hero__preview">
         <div class="legal-tech-hero__preview-square-grid"></div>
         <img src="{{ .Params.image.src }}" alt="{{ .Params.image.alt }}" />
       </div>