From 5a433c556a184d9a766459df45308eb06ab67de3 Mon Sep 17 00:00:00 2001
From: Ivan Mitev <imitev@solvedeu.com>
Date: Tue, 19 May 2026 21:47:10 +0300
Subject: [PATCH 1/3] reverting image styling of cards to old version to
 support old offers

---
 .../dashboard-services.component.html         | 21 ++++++++++++-------
 .../product-details.component.html            | 10 +++++----
 src/app/shared/card/card.component.html       | 16 +++++++-------
 .../shared/carousel/carousel.component.html   |  4 ++--
 4 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/app/pages/dashboard/dashboard-services/dashboard-services.component.html b/src/app/pages/dashboard/dashboard-services/dashboard-services.component.html
index 60d1d8db..54b1c484 100644
--- a/src/app/pages/dashboard/dashboard-services/dashboard-services.component.html
+++ b/src/app/pages/dashboard/dashboard-services/dashboard-services.component.html
@@ -18,23 +18,28 @@ <h2 class="text-[32px] md:text-[38px] lg:text-[42px] font-extrabold text-[#0f172
       </a>
     </div>
 
-    <app-carousel [items]="productOfferings()" [visible]="visibleItems">
+    <app-carousel [items]="productOfferings()" [visible]="visibleItems" [loop]="true">
       @for (productOffering of productOfferings(); track productOffering.id) {
       <div class="shrink-0 px-3 md:px-4" [style.width.%]="100 / visibleItems">
-        <div class="bg-white rounded-2xl border shadow-sm hover:shadow-lg transition-all flex flex-col h-full">
+        <div class="flex flex-col w-full h-[460px] bg-white rounded-[16px] border border-[#D8DADE] hover:shadow-md transition-shadow font-[Blinker]">
 
-          <div class="h-52 rounded-t-2xl overflow-hidden">
-            <img [src]="getProductImage(productOffering)" class="w-full h-full object-contain" />
+          <div class="px-2 pt-2">
+            <div class="relative h-[180px] w-full rounded-xl bg-[#EBECEE] overflow-hidden flex justify-center items-center">
+              <div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage(productOffering) + ')'" style="filter: blur(20px);"></div>
+              <img class="relative z-10 h-full w-full object-contain" [src]="getProductImage(productOffering)" alt="Product image">
+            </div>
           </div>
 
-          <div class="p-6 flex flex-col flex-1">
-            <h3 class="text-xl font-bold text-slate-800">
+          <div class="flex-1 flex flex-col px-4 pt-4 pb-4 min-h-0">
+            <h3 class="text-[20px] font-bold leading-tight line-clamp-2 text-[#14274A] mb-2 break-words">
               {{ productOffering.name }}
             </h3>
 
-            <p class="mt-3 text-slate-600 text-sm line-clamp-3" [innerHTML]="productOffering.description"></p>
+            <div class="flex-1 min-h-0 overflow-hidden">
+              <p class="text-[14px] font-normal leading-[22px] text-[#0B1528] line-clamp-3" [innerHTML]="productOffering.description"></p>
+            </div>
 
-            <a class="mt-auto border-2 border-blue-700 text-blue-700 rounded-lg py-3 font-semibold flex items-center justify-center gap-2 hover:bg-blue-700 hover:text-white transition-all"
+            <a class="mt-4 border-2 border-blue-700 text-blue-700 rounded-lg py-2.5 font-semibold flex items-center justify-center gap-2 hover:bg-blue-700 hover:text-white transition-all"
               [href]="'/search;keywords=' + productOffering.name">
               {{ "DASHBOARD.marketplace.viewService" | translate }}
             </a>
diff --git a/src/app/pages/product-details/product-details.component.html b/src/app/pages/product-details/product-details.component.html
index 815495ca..c398ed6e 100644
--- a/src/app/pages/product-details/product-details.component.html
+++ b/src/app/pages/product-details/product-details.component.html
@@ -62,11 +62,13 @@
         </div>
       </div>
 
-      <div class="hidden lg:block rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
-        <img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
+      <div class="relative hidden lg:block rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
+        <div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
+        <img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
       </div>
-      <div class="lg:hidden rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
-        <img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
+      <div class="relative lg:hidden rounded-2xl bg-[#EBECEE] aspect-[2/1] overflow-hidden">
+        <div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
+        <img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
       </div>
     </div>
 
diff --git a/src/app/shared/card/card.component.html b/src/app/shared/card/card.component.html
index dc97df34..9f513e30 100644
--- a/src/app/shared/card/card.component.html
+++ b/src/app/shared/card/card.component.html
@@ -2,8 +2,9 @@
 <div (click)="goToProductDetails(productOff)" class="flex flex-col w-full h-[430px] bg-white rounded-[16px] border border-[#D8DADE] hover:shadow-md transition-shadow cursor-pointer font-[Blinker]">
 
   <div class="px-2 pt-2">
-    <div class="h-[170px] w-full rounded-xl bg-[#EBECEE] overflow-hidden">
-      <img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
+    <div class="relative h-[170px] w-full rounded-xl bg-[#EBECEE] overflow-hidden flex justify-center items-center">
+      <div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
+      <img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
     </div>
   </div>
 
@@ -12,7 +13,7 @@
       <svg class="h-[18px] w-[18px] text-[#526179] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
       </svg>
-      <span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec?.brand || ''">{{ orgInfo?.tradingName || prodSpec?.brand || 'Owner/Brand' }}</span>
+      <span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec.brand || ''">{{ orgInfo?.tradingName || prodSpec.brand || 'Owner/Brand' }}</span>
     </div>
 
     <h5 data-cy="searchOfferTitle" [ngClass]="{'break-all': hasLongWord(productOff?.name, 20), 'break-words': !hasLongWord(productOff?.name, 20)}"
@@ -37,8 +38,9 @@
 <div (click)="goToProductDetails(productOff)" class="flex w-full bg-white rounded-[16px] border border-[#D8DADE] hover:shadow-md transition-shadow cursor-pointer font-[Blinker]">
 
   <div class="p-2 pr-0 shrink-0">
-    <div class="h-full w-[260px] min-h-[180px] rounded-xl bg-[#EBECEE] overflow-hidden">
-      <img class="h-full w-full object-cover" src="{{getProductImage()}}" alt="Product image">
+    <div class="relative h-full w-[260px] min-h-[180px] rounded-xl bg-[#EBECEE] overflow-hidden flex justify-center items-center">
+      <div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + getProductImage() + ')'" style="filter: blur(20px);"></div>
+      <img class="relative z-10 h-full w-full object-contain" src="{{getProductImage()}}" alt="Product image">
     </div>
   </div>
 
@@ -47,7 +49,7 @@
       <svg class="h-[18px] w-[18px] text-[#526179] shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" />
       </svg>
-      <span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec?.brand || ''">{{ orgInfo?.tradingName || prodSpec?.brand || 'Owner/Brand' }}</span>
+      <span class="truncate min-w-0" [title]="orgInfo?.tradingName || prodSpec.brand || ''">{{ orgInfo?.tradingName || prodSpec.brand || 'Owner/Brand' }}</span>
     </div>
 
     <h5 data-cy="searchOfferTitle" [ngClass]="{'break-all': hasLongWord(productOff?.name, 20), 'break-words': !hasLongWord(productOff?.name, 20)}"
@@ -76,7 +78,7 @@
             <span class="font-semibold text-[#14274A]">{{ cheapestPrice.unit }}{{ cheapestPrice.price | number:'1.2-2' }}{{ cheapestPrice.text ? '/' + cheapestPrice.text : '' }}</span>
           </div>
         }
-        @if (prodSpec?.brand) {
+        @if (prodSpec.brand) {
           <div class="border-l border-gray-200 pl-6">
             <span class="text-[12px] text-[#8896A8] block">Technology</span>
             <span class="font-medium text-[#14274A]">{{ prodSpec.brand }}</span>
diff --git a/src/app/shared/carousel/carousel.component.html b/src/app/shared/carousel/carousel.component.html
index 434a7a42..4b16f79e 100644
--- a/src/app/shared/carousel/carousel.component.html
+++ b/src/app/shared/carousel/carousel.component.html
@@ -1,6 +1,6 @@
 <div [class]="wrapperClass">
 
-  <button (click)="prev()" [disabled]="index === 0" [class]="leftButtonClass">
+  <button (click)="prev()" [disabled]="!loop && index === 0" [class]="leftButtonClass">
 
     <fa-icon [icon]="faChevronLeft">
     </fa-icon>
@@ -24,7 +24,7 @@
 
 
 
-  <button (click)="next()" [disabled]="index === maxIndex" [class]="rightButtonClass">
+  <button (click)="next()" [disabled]="!loop && index === maxIndex" [class]="rightButtonClass">
 
     <fa-icon [icon]="faChevronRight">
     </fa-icon>

From 54c6785cbfc0ab19f970c5b85efd776502dd981a Mon Sep 17 00:00:00 2001
From: Ivan Mitev <imitev@solvedeu.com>
Date: Tue, 19 May 2026 21:41:12 +0300
Subject: [PATCH 2/3] Allow looping between start and end of card carrousel

---
 src/app/shared/carousel/carousel.component.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app/shared/carousel/carousel.component.ts b/src/app/shared/carousel/carousel.component.ts
index e25d8860..ac3b14f5 100644
--- a/src/app/shared/carousel/carousel.component.ts
+++ b/src/app/shared/carousel/carousel.component.ts
@@ -133,6 +133,9 @@ export class CarouselComponent<T> implements OnChanges {
   @Input()
   sidePadding = true;
 
+  @Input()
+  loop = false;
+
   /**
    * Current visible index.
    *
@@ -255,6 +258,10 @@ export class CarouselComponent<T> implements OnChanges {
    * Move forward by one step.
    */
   next(): void {
+    if (this.loop && this.index >= this.maxIndex) {
+      this.index = 0;
+      return;
+    }
     this.index = Math.min(
       this.index + 1,
       this.maxIndex
@@ -265,6 +272,10 @@ export class CarouselComponent<T> implements OnChanges {
    * Move backward by one step.
    */
   prev(): void {
+    if (this.loop && this.index <= 0) {
+      this.index = this.maxIndex;
+      return;
+    }
     this.index = Math.max(
       this.index - 1,
       0

From c6d11d493527d7a70a9ec6d401d9a3996280acd4 Mon Sep 17 00:00:00 2001
From: Ivan Mitev <imitev@solvedeu.com>
Date: Thu, 21 May 2026 18:16:31 +0300
Subject: [PATCH 3/3] apply same fix to featured cards in /browse page

---
 src/app/pages/browse/browse.component.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/browse/browse.component.html b/src/app/pages/browse/browse.component.html
index 5036a39f..40f74a9d 100644
--- a/src/app/pages/browse/browse.component.html
+++ b/src/app/pages/browse/browse.component.html
@@ -114,11 +114,12 @@ <h2 class="text-[28px] font-bold text-[#0b1220] sm:text-[32px] lg:text-[36px]">
                 <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 popular-grid" [attr.data-direction]="popularDirection">
                   @for (offer of popularPages[page]; track offer.id) {
                     <div class="popular-card flex h-[438px] flex-col rounded-[20px] border border-[#d5dace] bg-white p-2">
-                      <div class="h-[170px] w-full shrink-0 overflow-hidden rounded-[14px] bg-[#e2e9f5]">
+                      <div class="relative h-[170px] w-full shrink-0 overflow-hidden rounded-[14px] bg-[#e2e9f5] flex justify-center items-center">
+                        <div class="absolute inset-0 bg-cover bg-center opacity-75" [style.background-image]="'url(' + offer.imageUrl + ')'" style="filter: blur(20px);"></div>
                         <img
                           [src]="offer.imageUrl"
                           [alt]="offer.name"
-                          class="h-full w-full object-cover"
+                          class="relative z-10 h-full w-full object-contain"
                         />
                       </div>
                       <div class="flex flex-1 flex-col gap-3 px-4 pt-6 pb-6">