feat: implement cart component with mock data and styling for improved cart functionality

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

@@ -207,6 +207,35 @@
           (pageChange)="currentPage = $event"
         />
       </div>
+
+      <hr class="section-divider" />
+
+      <div class="cart-showcase">
+        <div class="cart-showcase__header">
+          <div>
+            <h2>Carrito mock</h2>
+            <p class="text-muted mb-0">
+              Demo visual aislada del carrito con scroll a partir del cuarto item.
+            </p>
+          </div>
+
+          @if (!cartVisible) {
+            <app-button variant="secondary" (click)="showCart()">Volver a mostrar carrito</app-button>
+          }
+        </div>
+
+        @if (cartVisible) {
+          <app-cart
+            [showClose]="true"
+            [items]="cartMockItems"
+            [subtotal]="366000"
+            [discount]="66000"
+            [total]="300000"
+            [backgroundColor]="cartBackgroundColor"
+            (closed)="hideCart()"
+          />
+        }
+      </div>
     </div>
   </section>
 

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

@@ -62,6 +62,20 @@ h1 {
   text-align: center;
 }
 
+.cart-showcase {
+  display: grid;
+  gap: 1rem;
+  justify-items: start;
+}
+
+.cart-showcase__header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
 .button-grid--single-char app-button {
   min-width: 3rem;
 }
@@ -108,6 +122,11 @@ h1 {
   .input-grid {
     grid-template-columns: minmax(0, 1fr);
   }
+
+  .cart-showcase__header {
+    align-items: start;
+    flex-direction: column;
+  }
 }
 
 .configuracion-tennant {

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

@@ -1,5 +1,6 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
+import { CartComponent, CartItemMock } from '../../../../shared/components/cart/cart.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
@@ -9,7 +10,7 @@ import { ToastService } from '../../../../core/services/toast.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
+  imports: [ButtonComponent, CartComponent, InputComponent, PaginatorComponent, ProductCardComponent, StoreSectionComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
@@ -33,7 +34,9 @@ export class ReutilizablesTestPageComponent {
   protected clearTrigger = 0;
   protected editableDisabled = true;
   protected currentPage = 1;
+  protected cartVisible = true;
   protected readonly paginatorTotalPages = 8;
+  protected readonly cartBackgroundColor = '#ffffff';
 
   protected readonly testProducts = [
     {
@@ -59,6 +62,57 @@ export class ReutilizablesTestPageComponent {
     }
   ];
 
+  protected readonly cartMockItems: CartItemMock[] = [
+    {
+      imageUrl: null,
+      product: 'Calza térmica unisex con proceso sense y cintura con mayor agarre',
+      originalPrice: 95000,
+      discountedPrice: 76000,
+      discountPercentage: 20,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Beige' },
+        { label: 'Talle', value: 'S' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Pantalón recto de scuba negro',
+      originalPrice: null,
+      discountedPrice: 89000,
+      discountPercentage: null,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Beige' },
+        { label: 'Talle', value: 'S' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Top de supplex color habano',
+      originalPrice: 98000,
+      discountedPrice: 85000,
+      discountPercentage: 20,
+      quantity: 1,
+      attributes: [
+        { label: 'Color', value: 'Negro' },
+        { label: 'Talle', value: 'XL' }
+      ]
+    },
+    {
+      imageUrl: null,
+      product: 'Buzo oversize canguro gris',
+      originalPrice: 72000,
+      discountedPrice: 69000,
+      discountPercentage: 5,
+      quantity: 2,
+      attributes: [
+        { label: 'Color', value: 'Gris' },
+        { label: 'Talle', value: 'M' }
+      ]
+    }
+  ];
+
   protected onProductBuy(productTitle: string): void {
     console.log(`Comprando: ${productTitle}`);
     alert(`Comprando: ${productTitle}`);
@@ -73,6 +127,15 @@ export class ReutilizablesTestPageComponent {
     this.clearTrigger += 1;
   }
 
+  protected showCart(): void {
+    this.cartVisible = true;
+  }
+
+  protected hideCart(): void {
+    this.cartVisible = false;
+    this.toastService.info('Se disparó el evento de cerrado del carrito mock.');
+  }
+
   protected triggerToast(type: 'success' | 'danger' | 'info'): void {
     if (type === 'success') {
       this.toastService.success('¡Operación exitosa! El producto se ha guardado correctamente.');