feat: add menu content section component for improved layout and responsiveness across help and FAQ pages

src/app/features/store/pages/help-page/pages/contact-page/contact-page.html

@@ -1,53 +1,53 @@
-<section class="contact-page" aria-labelledby="contact-page-title">
-  <div class="contact-page__details">
-    <h2 id="contact-page-title" class="contact-page__title">CONTACTO</h2>
+<app-menu-content-section title="CONTACTO" titleId="contact-page-title">
+  <div class="contact-page">
+    <div class="contact-page__details">
+      @if (contact().whatsappUrl && contact().whatsappLabel) {
+        <a
+          class="contact-page__contact-link"
+          [href]="contact().whatsappUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
+          <span>{{ contact().whatsappLabel }}</span>
+        </a>
+      }
 
-    @if (contact().whatsappUrl && contact().whatsappLabel) {
-      <a
-        class="contact-page__contact-link"
-        [href]="contact().whatsappUrl"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
-        <span>{{ contact().whatsappLabel }}</span>
-      </a>
-    }
+      @if (contact().phone; as phone) {
+        <a class="contact-page__contact-link" [href]="phoneUrl(phone)">
+          <i class="fa-solid fa-phone" aria-hidden="true"></i>
+          <span>{{ phone }}</span>
+        </a>
+      }
 
-    @if (contact().phone; as phone) {
-      <a class="contact-page__contact-link" [href]="phoneUrl(phone)">
-        <i class="fa-solid fa-phone" aria-hidden="true"></i>
-        <span>{{ phone }}</span>
-      </a>
-    }
+      @for (location of contact().locations; track location.id) {
+        <article class="contact-page__location">
+          <h3 class="contact-page__location-title">
+            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
+            <span>{{ location.label }}</span>
+          </h3>
 
-    @for (location of contact().locations; track location.id) {
-      <article class="contact-page__location">
-        <h3 class="contact-page__location-title">
-          <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
-          <span>{{ location.label }}</span>
-        </h3>
+          <ul class="contact-page__addresses">
+            @for (address of location.addresses; track address.id) {
+              <li>{{ address.address }}</li>
+            }
+          </ul>
+        </article>
+      }
 
-        <ul class="contact-page__addresses">
-          @for (address of location.addresses; track address.id) {
-            <li>{{ address.address }}</li>
-          }
-        </ul>
-      </article>
-    }
+      @if (!contact().whatsappUrl && !contact().phone && contact().locations.length === 0) {
+        <p class="contact-page__empty">No hay datos de contacto disponibles.</p>
+      }
+    </div>
 
-    @if (!contact().whatsappUrl && !contact().phone && contact().locations.length === 0) {
-      <p class="contact-page__empty">No hay datos de contacto disponibles.</p>
+    @if (contact().mapLocations.length > 0) {
+      <app-location-map
+        class="contact-page__map"
+        [locations]="contact().mapLocations"
+        [markerColor]="markerColor()"
+        mapStyle="minimal-light"
+        ariaLabel="Mapa de sucursales y puntos de atención"
+      />
     }
   </div>
-
-  @if (contact().mapLocations.length > 0) {
-    <app-location-map
-      class="contact-page__map"
-      [locations]="contact().mapLocations"
-      [markerColor]="markerColor()"
-      mapStyle="minimal-light"
-      ariaLabel="Mapa de sucursales y puntos de atención"
-    />
-  }
-</section>
+</app-menu-content-section>

src/app/features/store/pages/help-page/pages/contact-page/contact-page.scss

@@ -20,14 +20,6 @@
   align-items: flex-start;
 }
 
-.contact-page__title {
-  margin: 0 0 1.25rem;
-  color: inherit;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.3;
-}
-
 .contact-page__contact-link {
   display: inline-flex;
   align-items: center;
@@ -128,10 +120,6 @@
     text-align: center;
   }
 
-  .contact-page__title {
-    width: 100%;
-  }
-
   .contact-page__location {
     width: 100%;
   }

src/app/features/store/pages/help-page/pages/contact-page/contact-page.ts

@@ -2,6 +2,7 @@ import { Component, computed, inject } from '@angular/core';
 
 import { findMenu } from '../../../../../../core/services/menu.utils';
 import { TenantService } from '../../../../../../core/services/tenant.service';
+import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
 import {
   LocationMapComponent,
   MapLocation,
@@ -30,7 +31,7 @@ type ContactContent = {
 
 @Component({
   selector: 'app-contact-page',
-  imports: [LocationMapComponent],
+  imports: [LocationMapComponent, MenuContentSectionComponent],
   templateUrl: './contact-page.html',
   styleUrl: './contact-page.scss',
 })

src/app/features/store/pages/help-page/pages/faq-page/faq-page.html

@@ -1,14 +1,8 @@
-<section class="faq-page" aria-labelledby="faq-page-title">
-  <h2 id="faq-page-title" class="faq-page__title">PREGUNTAS FRECUENTES</h2>
-
+<app-menu-content-section class="faq-page" title="PREGUNTAS FRECUENTES" titleId="faq-page-title">
   @if (faqs().length > 0) {
     <app-accordion [flush]="true">
       @for (faq of faqs(); track $index; let last = $last) {
-        <app-accordion-item
-          [title]="faq.question"
-          [headingLevel]="3"
-          [open]="last"
-        >
+        <app-accordion-item [title]="faq.question" [headingLevel]="3" [open]="last">
           <p>{{ faq.answer }}</p>
         </app-accordion-item>
       }
@@ -16,4 +10,4 @@
   } @else {
     <p class="faq-page__empty">No hay preguntas frecuentes disponibles.</p>
   }
-</section>
+</app-menu-content-section>

src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss

@@ -4,18 +4,11 @@
 }
 
 .faq-page {
+  display: block;
   width: 100%;
   max-width: 760px;
 }
 
-.faq-page__title {
-  margin: 0 0 0.5rem;
-  color: #a0a0a0;
-  font-size: 0.9375rem;
-  font-weight: 700;
-  line-height: 1.3;
-}
-
 .faq-page p {
   margin: 0;
 }
@@ -26,9 +19,3 @@
   color: #888888;
   font-size: 0.8125rem;
 }
-
-@media (max-width: 767.98px) {
-  .faq-page__title {
-    text-align: center;
-  }
-}

src/app/features/store/pages/help-page/pages/faq-page/faq-page.ts

@@ -4,6 +4,7 @@ import { findMenu } from '../../../../../../core/services/menu.utils';
 import { TenantService } from '../../../../../../core/services/tenant.service';
 import { AccordionItemComponent } from '../../../../../../shared/components/accordion/accordion-item.component';
 import { AccordionComponent } from '../../../../../../shared/components/accordion/accordion.component';
+import { MenuContentSectionComponent } from '../../../../components/menu-content-section/menu-content-section.component';
 
 type Faq = {
   question: string;
@@ -12,7 +13,7 @@ type Faq = {
 
 @Component({
   selector: 'app-faq-page',
-  imports: [AccordionComponent, AccordionItemComponent],
+  imports: [AccordionComponent, AccordionItemComponent, MenuContentSectionComponent],
   templateUrl: './faq-page.html',
   styleUrl: './faq-page.scss',
 })