feat: implement ProductCard component and configure local build settings in angular.json

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

@@ -256,4 +256,31 @@
       </div>
     </div>
   </section>
+
+  <section class="component-demo card shadow-sm mt-4">
+    <div class="card-body">
+      <span class="eyebrow">Reusable Component</span>
+      <h2 class="mb-4">Tarjetas de Producto (ProductCard)</h2>
+      
+      <p class="text-muted mb-4">
+        Las tarjetas se adaptan al tamaño del contenedor padre. A continuación se presentan dentro de una grilla de Bootstrap.
+      </p>
+
+      <div class="row">
+        @for (product of testProducts; track product.title) {
+          <div class="col-12 col-md-6 col-lg-4 mb-4 d-flex align-items-stretch">
+            <app-product-card
+              [imageUrl]="product.imageUrl"
+              [title]="product.title"
+              [originalPrice]="product.originalPrice"
+              [discount]="product.discount"
+              [transferPrice]="product.transferPrice"
+              (buy)="onProductBuy(product.title)"
+            />
+          </div>
+        }
+      </div>
+    </div>
+  </section>
 </main>
+

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

@@ -1,11 +1,12 @@
 import { Component, inject } from '@angular/core';
 import { ButtonComponent } from '../../../../shared/components/button/button.component';
 import { InputComponent } from '../../../../shared/components/input/input.component';
+import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
 import { TenantService } from '../../../../core/services/tenant.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent],
+  imports: [ButtonComponent, InputComponent, ProductCardComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })
@@ -28,6 +29,35 @@ export class ReutilizablesTestPageComponent {
   protected clearTrigger = 0;
   protected editableDisabled = true;
 
+  protected readonly testProducts = [
+    {
+      title: 'Pantalón recto de scuba negro',
+      originalPrice: 95000,
+      discount: 20,
+      transferPrice: 74800,
+      imageUrl: '/images/pantalon-scuba.png'
+    },
+    {
+      title: 'Zapatillas de running azul',
+      originalPrice: 120000,
+      discount: 15,
+      transferPrice: 98000,
+      imageUrl: '/images/zapatillas-running.png'
+    },
+    {
+      title: 'Remera básica blanca (Sin Descuento)',
+      originalPrice: 32000,
+      discount: null,
+      transferPrice: 30000,
+      imageUrl: null
+    }
+  ];
+
+  protected onProductBuy(productTitle: string): void {
+    console.log(`Comprando: ${productTitle}`);
+    alert(`Comprando: ${productTitle}`);
+  }
+
   protected onFileChange(file: File | null): void {
     this.fileName = file?.name ?? '';
   }
@@ -37,3 +67,4 @@ export class ReutilizablesTestPageComponent {
     this.clearTrigger += 1;
   }
 }
+