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

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html

@@ -574,6 +574,24 @@
     </div>
   </section>
 
+  <section class="component-demo card shadow-sm mt-4" data-testid="main-carousel">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-3">Main Carousel</h2>
+
+      <p class="text-muted mb-4">
+        Carrusel panorámico compuesto únicamente por imágenes, con autoslide e indicadores.
+      </p>
+
+      <app-main-carousel
+        [images]="mainCarouselImages"
+        [imageAlts]="mainCarouselImageAlts"
+        [autoSlideInterval]="4000"
+        ariaLabel="Promociones de la tienda"
+      />
+    </div>
+  </section>
+
   <section class="component-demo card shadow-sm mt-4" data-testid="products-carousel">
     <div class="card-body">
       <span class="eyebrow">Reusable Component</span>

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.spec.ts

@@ -180,6 +180,41 @@ describe('ReutilizablesTestPageComponent', () => {
     ).toBe(6);
   });
 
+  it('renders the main carousel demo with remote images', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReutilizablesTestPageComponent],
+      providers: [
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(tenant),
+        },
+        {
+          provide: ToastService,
+          useValue: createToastServiceStub(),
+        },
+        {
+          provide: ModalService,
+          useValue: createModalServiceStub(),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ReutilizablesTestPageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const carouselDemo = element.querySelector('[data-testid="main-carousel"]');
+    const images = carouselDemo?.querySelectorAll('.main-carousel__image');
+    const indicators = carouselDemo?.querySelectorAll('.main-carousel__indicator');
+
+    expect(carouselDemo?.querySelector('app-main-carousel')).not.toBeNull();
+    expect(images).toHaveLength(3);
+    expect(indicators).toHaveLength(3);
+    expect(images?.[0].getAttribute('src')).toContain('images.unsplash.com');
+
+    fixture.destroy();
+  });
+
   it('renders the modal showcase and opens the confirm demos from the buttons', async () => {
     const modalServiceStub = createModalServiceStub();
     await TestBed.configureTestingModule({

src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts

@@ -15,6 +15,7 @@ import { ToastService } from '../../../../core/services/toast.service';
 import { StepperComponent } from '../../../../shared/components/stepper/stepper.component';
 import { StepComponent } from '../../../../shared/components/stepper/step.component';
 import { CarouselComponent } from '../../../../shared/components/carousel/carousel.component';
+import { MainCarouselComponent } from '../../../../shared/components/main-carousel/main-carousel.component';
 
 interface CarouselProductMock {
   id: number;
@@ -41,6 +42,7 @@ interface CarouselProductMock {
     StepperComponent,
     StepComponent,
     CarouselComponent,
+    MainCarouselComponent,
   ],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss',
@@ -73,6 +75,16 @@ export class ReutilizablesTestPageComponent {
   protected lastModalResult = 'Todavia no se abrio ningun modal.';
   protected readonly paginatorTotalPages = 8;
   protected readonly cartBackgroundColor = '#ffffff';
+  protected readonly mainCarouselImages = [
+    'https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&q=80',
+    'https://images.unsplash.com/photo-1529139574466-a303027c1d8b?auto=format&fit=crop&w=1600&q=80',
+    'https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1600&q=80',
+  ];
+  protected readonly mainCarouselImageAlts = [
+    'Interior de una tienda de indumentaria',
+    'Colección de moda en exteriores',
+    'Percheros con prendas de distintos colores',
+  ];
 
   protected readonly testProducts = [
     {

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -1,3 +1,13 @@
+@if (tenant()?.main_carousel_images; as mainCarouselImages) {
+  @if (mainCarouselImages.length) {
+    <app-main-carousel
+      class="store-home__main-carousel"
+      [images]="mainCarouselImages"
+      ariaLabel="Imágenes destacadas de la tienda"
+    />
+  }
+}
+
 @if (tenant()?.hero_config || tenant()?.event_config) {
   <app-hero-banner
     [heroConfig]="tenant()?.hero_config"

src/app/features/store/pages/store-home-page/store-home-page.component.scss

@@ -2,6 +2,10 @@
   display: block;
 }
 
+.store-home__main-carousel {
+  margin-bottom: clamp(2rem, 4vw, 3rem);
+}
+
 app-hero-banner + app-store-section,
 app-store-section + app-store-section {
   margin-top: clamp(3rem, 6vw, 5rem);

src/app/features/store/pages/store-home-page/store-home-page.component.spec.ts

@@ -1,3 +1,4 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
@@ -11,6 +12,8 @@ import {
   CatalogFeaturedItem,
 } from '../../../../core/services/catalog/catalog.interface';
 import { CatalogService } from '../../../../core/services/catalog/catalog.service';
+import { Tenant } from '../../../../core/services/tenant.interface';
+import { TenantService } from '../../../../core/services/tenant.service';
 import { ToastService } from '../../../../core/services/toast.service';
 import { ProductListComponent } from '../../../../shared/components/product-list/product-list.component';
 import { StoreHomePageComponent } from './store-home-page.component';
@@ -85,6 +88,33 @@ const pageOneItems: CatalogFeaturedItem[] = [
   },
 ];
 
+function createTenant(mainCarouselImages?: string[]): Tenant {
+  return {
+    id: 1,
+    codigo: 'acme',
+    nombre: 'Acme',
+    dominio: 'acme.com',
+    primary_color: '#6376f3',
+    secondary_color: '#a0a0a0',
+    danger_color: '#dc3545',
+    success_color: '#198754',
+    header_bg_color: '#ffffff',
+    footer_bg_color: '#ffffff',
+    header_logo: '/header.png',
+    footer_logo: '/footer.png',
+    main_carousel_images: mainCarouselImages,
+  };
+}
+
+function createTenantServiceStub(tenant: Tenant | null) {
+  const tenantState = signal(tenant);
+
+  return {
+    tenant: tenantState.asReadonly(),
+    getTenant: () => tenantState(),
+  };
+}
+
 describe('StoreHomePageComponent', () => {
   beforeEach(() => vi.restoreAllMocks());
 
@@ -115,6 +145,64 @@ describe('StoreHomePageComponent', () => {
     );
   });
 
+  it('renders the tenant main carousel images at the beginning of the home page', async () => {
+    const mainCarouselImages = [
+      'https://example.com/carousel-1.webp',
+      'https://example.com/carousel-2.webp',
+    ];
+
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        {
+          provide: CatalogService,
+          useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
+        },
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(createTenant(mainCarouselImages)),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const carousel = element.querySelector('app-main-carousel');
+    const images = carousel?.querySelectorAll('.main-carousel__image');
+
+    expect(element.firstElementChild).toBe(carousel);
+    expect(images).toHaveLength(2);
+    expect(images?.[0].getAttribute('src')).toBe(mainCarouselImages[0]);
+    expect(images?.[1].getAttribute('src')).toBe(mainCarouselImages[1]);
+
+    fixture.destroy();
+  });
+
+  it('does not render the main carousel when the tenant has no images', async () => {
+    await TestBed.configureTestingModule({
+      imports: [StoreHomePageComponent],
+      providers: [
+        provideActivatedRoute({ response: createCatalog(), error: null }),
+        {
+          provide: CatalogService,
+          useValue: { getCatalog: vi.fn(), getFeaturedGroupItems: vi.fn() },
+        },
+        {
+          provide: TenantService,
+          useValue: createTenantServiceStub(createTenant([])),
+        },
+      ],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(StoreHomePageComponent);
+    fixture.detectChanges();
+
+    expect((fixture.nativeElement as HTMLElement).querySelector('app-main-carousel')).toBeNull();
+  });
+
   it('requests another page for the selected featured group', async () => {
     const pageTwoItems = [{ id: 3, nombre: 'Mouse Gamer', precio: '15999.00', image: null }];
     const catalogServiceStub = {

src/app/features/store/pages/store-home-page/store-home-page.component.ts

@@ -21,6 +21,7 @@ import {
   ProductListItem,
 } from '../../../../shared/components/product-list/product-list.component';
 import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.component';
+import { MainCarouselComponent } from '../../../../shared/components/main-carousel/main-carousel.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import {
   STORE_HOME_PRODUCTS_ERROR_MESSAGE,
@@ -29,7 +30,12 @@ import {
 
 @Component({
   selector: 'app-store-home-page',
-  imports: [StoreSectionComponent, ProductListComponent, HeroBannerComponent],
+  imports: [
+    StoreSectionComponent,
+    ProductListComponent,
+    HeroBannerComponent,
+    MainCarouselComponent,
+  ],
   templateUrl: './store-home-page.component.html',
   styleUrl: './store-home-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,