feat: add StoreSection component and integrate it into reutilizables test page

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

@@ -282,5 +282,22 @@
       </div>
     </div>
   </section>
+
+  <app-store-section title="PRODUCTOS" class="component-demo store-section-demo mt-5">
+    <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 store-section-demo__item">
+          <app-product-card
+            [imageUrl]="product.imageUrl"
+            [title]="product.title"
+            [originalPrice]="product.originalPrice"
+            [discount]="product.discount"
+            [transferPrice]="product.transferPrice"
+            (buy)="onProductBuy(product.title)"
+          />
+        </div>
+      }
+    </div>
+  </app-store-section>
 </main>
 

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

@@ -15,6 +15,10 @@
   border: 0;
 }
 
+.store-section-demo {
+  width: min(100%, 64rem);
+}
+
 .eyebrow {
   display: inline-block;
   margin-bottom: 0.75rem;
@@ -55,6 +59,12 @@ h1 {
   min-width: 3rem;
 }
 
+.store-section-demo__item {
+  app-product-card {
+    width: 100%;
+  }
+}
+
 .section-divider {
   margin: 2rem 0;
 }

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

@@ -2,11 +2,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 { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
 import { TenantService } from '../../../../core/services/tenant.service';
 
 @Component({
   selector: 'app-reutilizables-test-page',
-  imports: [ButtonComponent, InputComponent, ProductCardComponent],
+  imports: [ButtonComponent, InputComponent, ProductCardComponent, StoreSectionComponent],
   templateUrl: './reutilizables-test-page.component.html',
   styleUrl: './reutilizables-test-page.component.scss'
 })

src/app/shared/components/store-section/store-section.component.html

@@ -0,0 +1,9 @@
+<section class="d-grid w-100 gap-3">
+  <header class="d-flex justify-content-center">
+    <h2 class="m-0 text-center text-uppercase store-section__title">{{ title() }}</h2>
+  </header>
+
+  <div class="w-100">
+    <ng-content></ng-content>
+  </div>
+</section>

src/app/shared/components/store-section/store-section.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.store-section__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: #000000;
+}

src/app/shared/components/store-section/store-section.component.ts

@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-store-section',
+  standalone: true,
+  templateUrl: './store-section.component.html',
+  styleUrl: './store-section.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StoreSectionComponent {
+  readonly title = input.required<string>();
+}