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

src/app/features/store/components/menu-content-section/menu-content-section.component.html

@@ -0,0 +1,7 @@
+<section class="menu-content-section" [attr.aria-labelledby]="titleId()">
+  <h2 class="menu-content-section__title" [id]="titleId()">{{ title() }}</h2>
+
+  <div class="menu-content-section__body">
+    <ng-content />
+  </div>
+</section>

src/app/features/store/components/menu-content-section/menu-content-section.component.scss

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+
+.menu-content-section {
+  width: 100%;
+}
+
+.menu-content-section__title {
+  margin: 0 0 1.25rem;
+  color: #888888;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.menu-content-section__body {
+  min-width: 0;
+}
+
+@media (max-width: 767.98px) {
+  .menu-content-section {
+    margin-inline: auto;
+  }
+
+  .menu-content-section__title {
+    text-align: center;
+  }
+}

src/app/features/store/components/menu-content-section/menu-content-section.component.spec.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+
+import { MenuContentSectionComponent } from './menu-content-section.component';
+
+@Component({
+  imports: [MenuContentSectionComponent],
+  template: `
+    <app-menu-content-section title="Contacto" titleId="contact-title">
+      <p>Contenido proyectado</p>
+    </app-menu-content-section>
+  `,
+})
+class TestHostComponent {}
+
+describe('MenuContentSectionComponent', () => {
+  it('renders an accessible title and projects its content', async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+
+    const fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const section = element.querySelector('section');
+
+    expect(section?.getAttribute('aria-labelledby')).toBe('contact-title');
+    expect(element.querySelector('#contact-title')?.textContent?.trim()).toBe('Contacto');
+    expect(element.querySelector('.menu-content-section__body')?.textContent).toContain(
+      'Contenido proyectado',
+    );
+  });
+});

src/app/features/store/components/menu-content-section/menu-content-section.component.ts

@@ -0,0 +1,11 @@
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'app-menu-content-section',
+  templateUrl: './menu-content-section.component.html',
+  styleUrl: './menu-content-section.component.scss',
+})
+export class MenuContentSectionComponent {
+  readonly title = input.required<string>();
+  readonly titleId = input.required<string>();
+}

src/app/features/store/components/menu-page-layout/menu-page-layout.component.scss

@@ -80,5 +80,9 @@
       justify-content: center;
       gap: 0.75rem 1.25rem;
     }
+
+    &__content {
+      width: 100%;
+    }
   }
 }