From 286e56c9791c0580cccbd058b8449cc52a7c24ea Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Mon, 29 Jun 2026 15:39:52 -0300
Subject: [PATCH] feat: add StoreSection component and integrate it into
 reutilizables test page

---
 .../reutilizables-test-page.component.html      | 17 +++++++++++++++++
 .../reutilizables-test-page.component.scss      | 10 ++++++++++
 .../reutilizables-test-page.component.ts        |  3 ++-
 .../store-section/store-section.component.html  |  9 +++++++++
 .../store-section/store-section.component.scss  | 12 ++++++++++++
 .../store-section/store-section.component.ts    | 12 ++++++++++++
 6 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/app/shared/components/store-section/store-section.component.html
 create mode 100644 src/app/shared/components/store-section/store-section.component.scss
 create mode 100644 src/app/shared/components/store-section/store-section.component.ts

diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
index 7d1373d..2f46c81 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.html
+++ b/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>
 
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
index 092dfc1..a816958 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.scss
+++ b/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;
 }
diff --git a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts b/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
index 48e0ef3..5b65549 100644
--- a/src/app/features/componentes-test/pages/reutilizables-test-page/reutilizables-test-page.component.ts
+++ b/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'
 })
diff --git a/src/app/shared/components/store-section/store-section.component.html b/src/app/shared/components/store-section/store-section.component.html
new file mode 100644
index 0000000..587a405
--- /dev/null
+++ b/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>
diff --git a/src/app/shared/components/store-section/store-section.component.scss b/src/app/shared/components/store-section/store-section.component.scss
new file mode 100644
index 0000000..e957c83
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/shared/components/store-section/store-section.component.ts b/src/app/shared/components/store-section/store-section.component.ts
new file mode 100644
index 0000000..afd6884
--- /dev/null
+++ b/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>();
+}