Add reusable marketplace product card

src/app/components/product-card/product-card.component.html

@@ -0,0 +1,55 @@
+<article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
+  <a [routerLink]="['/item', item.itemID] | langRoute" class="product-link">
+    <div class="product-image">
+      <img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" />
+      @if (item.discount > 0) {
+        <div class="discount-badge">-{{ item.discount }}%</div>
+      }
+      @if (item.badges && item.badges.length > 0) {
+        <div class="product-badges-overlay">
+          @for (badge of item.badges; track badge) {
+            <span class="product-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
+          }
+        </div>
+      }
+    </div>
+
+    <div class="product-details">
+      <h3 class="product-name">{{ title || item.name }}</h3>
+
+      @if (showDescription && description) {
+        <p class="product-description">{{ description }}</p>
+      }
+
+      @if (showRating) {
+        <div class="product-rating" [attr.aria-label]="'Rating ' + item.rating">
+          <span class="rating-stars">{{ item.rating | number:'1.1-1' }}</span>
+          <span class="rating-count">({{ item.callbacks?.length || item.comments?.length || 0 }})</span>
+        </div>
+      }
+
+      <div class="product-price">
+        @if (item.discount > 0) {
+          <span class="original-price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
+          <span class="discounted-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
+        } @else {
+          <span class="current-price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
+        }
+      </div>
+
+      @if (showStock && item.remainings) {
+        <div class="product-stock" aria-hidden="true">
+          <div class="stock-bar">
+            <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium' || item.remainings === 'low'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'" [class.low]="item.remainings === 'low'"></span>
+            <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'"></span>
+            <span class="bar-segment" [class.filled]="item.remainings === 'high'" [class.high]="item.remainings === 'high'"></span>
+          </div>
+        </div>
+      }
+    </div>
+  </a>
+
+  <button class="add-to-cart-btn" type="button" (click)="onAddToCart($event)" [attr.aria-label]="addToCartLabel + ': ' + (title || item.name)">
+    {{ addToCartLabel }}
+  </button>
+</article>