feat(carousel): implement product carousel component with mock data and styles

src/app/shared/components/carousel/carousel.component.html

@@ -0,0 +1,40 @@
+<section class="carousel" role="region" [attr.aria-label]="ariaLabel()">
+  <div
+    #viewport
+    class="carousel__viewport"
+    tabindex="0"
+    (scroll)="handleScroll()"
+    (keydown)="handleKeydown($event)"
+  >
+    @for (item of items(); track trackBy()($index, item); let index = $index) {
+      <div class="carousel__item">
+        <ng-container
+          [ngTemplateOutlet]="itemTemplate()"
+          [ngTemplateOutletContext]="{ $implicit: item, index }"
+        />
+      </div>
+    }
+  </div>
+
+  @if (hasMultipleItems()) {
+    <button
+      type="button"
+      class="carousel__control carousel__control--previous"
+      [disabled]="!canScrollPrevious()"
+      [attr.aria-label]="previousLabel()"
+      (click)="previous()"
+    >
+      <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
+    </button>
+
+    <button
+      type="button"
+      class="carousel__control carousel__control--next"
+      [disabled]="!canScrollNext()"
+      [attr.aria-label]="nextLabel()"
+      (click)="next()"
+    >
+      <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
+    </button>
+  }
+</section>