feat(carousel): add main carousel component with image support and integrate into store home page

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

@@ -0,0 +1,41 @@
+<section
+  class="main-carousel"
+  role="region"
+  aria-roledescription="carrusel"
+  [attr.aria-label]="ariaLabel()"
+  tabindex="0"
+  (mouseenter)="setPaused(true)"
+  (mouseleave)="setPaused(false)"
+  (focusin)="setPaused(true)"
+  (focusout)="setPaused(false)"
+  (keydown)="handleKeydown($event)"
+>
+  <div class="main-carousel__viewport" aria-live="off">
+    @for (image of images(); track $index; let index = $index) {
+      <img
+        class="main-carousel__image"
+        [class.main-carousel__image--active]="index === activeIndex()"
+        [src]="image"
+        [alt]="imageAlt(index)"
+        [attr.aria-hidden]="index === activeIndex() ? null : 'true'"
+        [attr.loading]="index === 0 ? 'eager' : 'lazy'"
+        draggable="false"
+      />
+    }
+  </div>
+
+  @if (hasMultipleImages()) {
+    <div class="main-carousel__indicators" role="group" aria-label="Seleccionar imagen">
+      @for (image of images(); track $index; let index = $index) {
+        <button
+          type="button"
+          class="main-carousel__indicator"
+          [class.main-carousel__indicator--active]="index === activeIndex()"
+          [attr.aria-label]="'Mostrar imagen ' + (index + 1)"
+          [attr.aria-current]="index === activeIndex() ? 'true' : null"
+          (click)="selectImage(index)"
+        ></button>
+      }
+    </div>
+  }
+</section>