feat: enhance footer layout for improved responsiveness and structure

feat: center align summary content and adjust variant selectors layout
feat: enhance product vertical card with variant selection and improve store header responsiveness
2026-08-05 17:07:04 -03:00 · 2026-08-05 16:52:10 -03:00 · 2026-08-05 16:48:34 -03:00 · 2026-08-05 16:16:46 -03:00 · 2026-08-05 12:18:50 -03:00 · 2026-08-05 11:09:30 -03:00
22 changed files with 794 additions and 146 deletions
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.html
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.html
@@ -1,7 +1,7 @@
 <footer class="store-layout__footer mt-auto text-light">
-  <div class="container-xl px-3 px-md-4 py-4 py-md-5">
-    <div class="row g-4">
-      <div class="col-12">
+  <div class="container-xl px-3 px-md-4 py-4 py-md-5 store-layout__footer-content">
+    <div class="row g-4 store-layout__footer-grid">
+      <div class="col-12 store-layout__brand-column">
        <div
          class="store-layout__brand-slot d-inline-flex align-items-center gap-3"
          data-testid="store-footer-brand-slot"
@@ -17,30 +17,29 @@
        </div>
      </div>

-      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start">
-        <div class="d-grid gap-2">
-          <div class="d-flex align-items-center gap-2  ">
+      <div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start store-layout__contact">
+        <div class="d-grid gap-2 store-layout__contact-details">
+          <div class="d-flex align-items-center gap-2">
            <i class="fa-solid fa-location-dot" aria-hidden="true"></i>
            <span>Av. San Lorenzo 1542, Rosario</span>
          </div>
-          <div class="d-flex align-items-center gap-2  ">
+          <div class="d-flex align-items-center gap-2">
            <i class="fa-solid fa-phone" aria-hidden="true"></i>
            <span>54 9 (0341) 6658247</span>
          </div>
        </div>

-        <p class="mb-0 small store-layout__muted-text">Copyright &copy; {{ currentYear }} - Sonder</p>
+        <p class="mb-0 small store-layout__muted-text store-layout__copyright">
+          Copyright &copy; {{ currentYear }} - {{ storeName || 'Sonder' }}
+        </p>
      </div>

      @for (section of footerSections; track section.heading) {
-        <div class="col-12 col-md-6 col-xl-2 d-grid align-content-start">
+        <div class="col-12 col-md-6 col-xl-2 d-grid align-content-start store-layout__links-column">
          <div class="d-grid gap-2">
            @for (link of section.links; track link.label) {
              @if (link.routerLink) {
-                <a
-                  class="store-layout__footer-link"
-                  [routerLink]="link.routerLink"
-                >
+                <a class="store-layout__footer-link" [routerLink]="link.routerLink">
                  {{ link.label }}
                </a>
              } @else if (link.action === 'logout') {
@@ -59,8 +58,10 @@
        </div>
      }

-      <div class="col-12 col-md-6 col-xl-3 d-grid align-content-start">
-        <div class="d-flex align-items-center gap-3">
+      <div class="store-layout__mobile-divider" aria-hidden="true"></div>
+
+      <div class="col-12 col-md-6 col-xl-3 d-grid align-content-start store-layout__social-column">
+        <div class="d-flex align-items-center gap-3 store-layout__social-list">
          @for (social of socialMedia; track social.code) {
            <app-social-media
              class="text-white"
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.scss
@@ -2,6 +2,10 @@
  background-color: var(--tenant-footer-bg);
 }

+.store-layout__mobile-divider {
+  display: none;
+}
+
 .store-layout__brand-slot {
  width: min(100%, 12rem);
  min-width: 10rem;
@@ -92,11 +96,98 @@
 }

@media (max-width: 767.98px) {
+  .store-layout__footer-content {
+    padding: 1.45rem 2.5rem 1.8rem !important;
+  }
+
+  .store-layout__footer-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0;
+    margin: 0;
+  }
+
+  .store-layout__footer-grid > * {
+    margin-top: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .store-layout__links-column {
+    order: 1;
+    width: auto;
+    padding-bottom: 1.65rem;
+    font-size: 0.72rem;
+    line-height: 1.25;
+
+    &:nth-of-type(even) {
+      padding-left: 0.65rem;
+    }
+
+    > div {
+      gap: 0.5rem !important;
+    }
+  }
+
+  .store-layout__mobile-divider {
+    display: block;
+    order: 2;
+    grid-column: 1 / -1;
+    width: 100vw;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .store-layout__brand-column,
+  .store-layout__social-column {
+    order: 3;
+    width: auto;
+    padding-top: 2rem;
+  }
+
  .store-layout__brand-slot {
+    width: min(100%, 7.75rem);
    min-width: 0;
  }

+  .store-layout__brand-logo {
+    max-height: 2.5rem;
+  }
+
+  .store-layout__brand-logo-shell {
+    width: min(100%, 7.75rem);
+    height: 2.5rem;
+  }
+
  .store-layout__brand-text {
    font-size: 1.45rem;
  }
+
+  .store-layout__social-column {
+    align-items: center;
+  }
+
+  .store-layout__social-list {
+    justify-content: flex-end;
+    gap: 0 !important;
+  }
+
+  .store-layout__contact {
+    order: 4;
+    grid-column: 1 / -1;
+    width: auto;
+    gap: 1.25rem !important;
+    padding-top: 0.9rem;
+    text-align: center;
+  }
+
+  .store-layout__contact-details {
+    justify-items: center;
+    gap: 0.4rem !important;
+    font-size: 0.7rem;
+  }
+
+  .store-layout__copyright {
+    font-size: 0.6rem;
+    line-height: 1.3;
+  }
 }
--- a/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
+++ b/src/app/core/layout/store-layout/store-footer/store-footer.component.ts
@@ -25,5 +25,6 @@ export class StoreFooterComponent {
  @Input({ required: true }) footerSections: StoreFooterSection[] = [];
  @Input({ required: true }) socialMedia: SocialMedia[] = [];
  @Input() logoUrl: string | null = null;
+  @Input() storeName: string | null = null;
  readonly logoutClick = output<void>();
 }
--- a/src/app/core/layout/store-layout/store-header/store-header.component.html
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.html
@@ -1,81 +1,83 @@
 <header class="store-layout__header">
  <div class="store-layout__header-main">
-    <div
-      class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-row flex-wrap align-items-center justify-content-between gap-3"
-    >
-      <a
-        routerLink="/"
-        class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0 text-decoration-none"
-        data-testid="store-header-brand-slot"
-        aria-label="Logo del comercio"
-      >
-        @if (logoUrl()) {
-          <img class="store-layout__brand-logo" [src]="logoUrl()" alt="Logo del comercio" />
-        } @else {
-          <div class="store-layout__brand-logo-shell" aria-hidden="true">
-            <span class="store-layout__brand-logo-skeleton"></span>
-          </div>
-        }
-      </a>
-
-      <div
-        class="d-flex flex-row align-items-center gap-3 ms-auto flex-nowrap flex-grow-1 justify-content-between justify-content-md-end"
-      >
-        <div class="store-layout__search-wrapper">
-          <div class="input-group store-layout__search" role="search">
-            <label class="visually-hidden" for="store-search-input">Buscar productos</label>
-            <input
-              id="store-search-input"
-              type="search"
-              class="form-control store-layout__search-input border-end-0 rounded-start"
-              placeholder="Buscar productos"
-              autocomplete="off"
-              [attr.aria-describedby]="showSearchError() ? 'store-search-error' : null"
-              [attr.aria-invalid]="showSearchError()"
-              [minlength]="minSearchLength"
-              [formControl]="searchControl"
-              (input)="clearSearchError()"
-              (keydown.enter)="submitSearch($event)"
-            />
-            <button
-              type="button"
-              class="btn store-layout__search-button border-start-0 rounded-end px-3"
-              aria-label="Buscar"
-              (click)="submitSearch()"
-            >
-              <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
-            </button>
-          </div>
-
-          @if (showSearchError()) {
-            <p id="store-search-error" class="store-layout__search-error mb-0" role="alert">
-              Ingresá al menos {{ minSearchLength }} caracteres para buscar.
-            </p>
-          }
+    <div class="container-xl px-3 px-md-4 py-3 py-lg-4">
+      <div class="row align-items-center gy-3 gy-md-0">
+        <div class="col-auto col-md-auto order-1 store-layout__brand-column">
+          <a
+            routerLink="/"
+            class="store-layout__brand-slot d-inline-flex align-items-center gap-3 text-decoration-none"
+            data-testid="store-header-brand-slot"
+            aria-label="Logo del comercio"
+          >
+            @if (logoUrl()) {
+              <img class="store-layout__brand-logo" [src]="logoUrl()" alt="Logo del comercio" />
+            } @else {
+              <div class="store-layout__brand-logo-shell" aria-hidden="true">
+                <span class="store-layout__brand-logo-skeleton"></span>
+              </div>
+            }
+          </a>
        </div>

-        @if (ticketsMenu(); as menu) {
-          <app-button
-            variant="primary"
-            hostClass="flex-shrink-0"
-            data-testid="store-header-tickets"
-            (click)="ticketsClick.emit()"
-          >
-            {{ menu.label }}
-          </app-button>
-        }
+        <div class="col-12 px-0 d-md-none order-3">
+          <hr class="store-layout__mobile-separator">
+        </div>
+
+        <div class="col-12 col-md order-4 order-md-2">
+          <div class="store-layout__search-wrapper ms-md-auto">
+            <div class="input-group store-layout__search" role="search">
+              <label class="visually-hidden" for="store-search-input">Buscar productos</label>
+              <input
+                id="store-search-input"
+                type="search"
+                class="form-control store-layout__search-input border-end-0 rounded-start"
+                placeholder="Buscar productos"
+                autocomplete="off"
+                [attr.aria-describedby]="showSearchError() ? 'store-search-error' : null"
+                [attr.aria-invalid]="showSearchError()"
+                [minlength]="minSearchLength"
+                [formControl]="searchControl"
+                (input)="clearSearchError()"
+                (keydown.enter)="submitSearch($event)"
+              />
+              <button
+                type="button"
+                class="btn store-layout__search-button border-start-0 rounded-end px-3"
+                aria-label="Buscar"
+                (click)="submitSearch()"
+              >
+                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
+              </button>
+            </div>
+
+            @if (showSearchError()) {
+              <p id="store-search-error" class="store-layout__search-error mb-0" role="alert">
+                Ingresá al menos {{ minSearchLength }} caracteres para buscar.
+              </p>
+            }
+          </div>
+        </div>
+
+        <div class="store-layout__actions-column col-auto col-md-auto order-2 order-md-3 ms-auto d-flex flex-row align-items-center justify-content-end gap-2 gap-md-3">
+          @if (ticketsMenu(); as menu) {
+            <app-button
+              variant="primary"
+              hostClass="store-layout__tickets-btn-host"
+              data-testid="store-header-tickets"
+              (click)="ticketsClick.emit()"
+            >
+              {{ menu.label }}
+            </app-button>
+          }

-        <div
-          class="d-flex align-items-center justify-content-end gap-1"
-          aria-label="Acciones de usuario"
-        >
          <app-cart-icon
            [quantity]="cartQuantity()"
            ariaLabel="Carrito de compras"
            title="Carrito"
            (click)="cartClick.emit()"
          />
-          <div class="store-layout__user-menu">
+
+          <div class="store-layout__user-menu d-none d-md-inline-flex position-relative">
            <app-icon-button
              variant="user"
              ariaLabel="Mi cuenta"
@@ -94,12 +96,46 @@
              />
            }
          </div>
+
+          <div class="store-layout__mobile-menu d-inline-flex d-md-none position-relative">
+            <app-icon-button
+              variant="bars"
+              ariaLabel="Menu"
+              ariaControls="store-mobile-menu"
+              [ariaExpanded]="isMobileMenuOpen()"
+              title="Menu"
+              (clicked)="toggleMobileMenu()"
+            />
+
+            @if (isMobileMenuOpen()) {
+              <div id="store-mobile-menu" class="position-absolute end-0 bg-white rounded shadow mt-2 py-2 store-layout__mobile-dropdown-menu">
+                <a 
+                  class="dropdown-item d-flex align-items-center gap-2 px-3 py-2 text-decoration-none store-layout__mobile-dropdown-item" 
+                  (click)="onMobileAccountClick()"
+                >
+                  <i class="fa-regular fa-circle-user fa-lg"></i>
+                  <span class="fw-medium">Mi cuenta</span>
+                </a>
+
+                <hr class="my-1 border-secondary opacity-25">
+
+                @for (category of categories(); track category.id) {
+                  <a 
+                    class="dropdown-item px-3 py-2 text-decoration-none store-layout__mobile-dropdown-item" 
+                    (click)="onCategorySelect(category)"
+                  >
+                    <span class="fw-medium">{{ category.nombre }}</span>
+                  </a>
+                }
+              </div>
+            }
+          </div>
        </div>
      </div>
    </div>
  </div>

-  <div class="store-layout__categories">
+  <div class="store-layout__categories d-none d-md-block">
    <div class="container-xl px-3 px-md-4">
      <div class="store-layout__category-menu">
        <button
--- a/src/app/core/layout/store-layout/store-header/store-header.component.scss
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.scss
@@ -10,7 +10,10 @@

 .store-layout__brand-slot {
  min-width: 150px;
-  max-width:40px;
+}
+
+.store-layout__brand-column {
+  max-width: 12rem;
 }

 .store-layout__brand-logo-shell {
@@ -42,10 +45,25 @@
 }

 .store-layout__search-wrapper {
-  width: min(100%, 260px);
+  width: 100%;
  min-width: 0;
 }

+@media (min-width: 768px) {
+  .store-layout__search-wrapper {
+    width: min(100%, 260px);
+  }
+
+  .store-layout__actions-column {
+    padding-left: 0;
+  }
+
+  ::ng-deep .store-layout__tickets-btn-host {
+    flex: 0 0 clamp(8rem, 15vw, 13.5rem);
+    width: clamp(8rem, 15vw, 13.5rem);
+  }
+}
+
 .store-layout__search {
  width: 100%;
 }
@@ -137,5 +155,56 @@
@media (max-width: 767.98px) {
  .store-layout__brand-slot {
    min-width: 0;
+    max-width: 150px;
+  }
+
+  .store-layout__mobile-separator {
+    border-color: #DDDDDD;
+    opacity: 1;
+    margin: 0 -1rem;
+  }
+}
+
+@media (max-width: 399.98px) {
+  .store-layout__brand-column {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    padding-right: 0.25rem;
+  }
+
+  .store-layout__brand-slot {
+    width: 100%;
+    max-width: 6.5rem;
+  }
+
+  .store-layout__actions-column {
+    flex: 0 0 auto;
+    width: auto;
+    margin-left: 0 !important;
+    padding-left: 0.25rem;
+    gap: 0.25rem !important;
+  }
+
+  ::ng-deep .store-layout__tickets-btn-host .btn {
+    padding-inline: 0.75rem;
+    font-size: 0.875rem;
+  }
+}
+
+.store-layout__mobile-dropdown-menu {
+  top: 100%;
+  min-width: 220px;
+  z-index: 1050;
+}
+
+.store-layout__mobile-dropdown-item {
+  cursor: pointer;
+  color: #8a8a8a;
+
+  &:hover,
+  &:focus-visible {
+    color: #666666;
  }
 }
--- a/src/app/core/layout/store-layout/store-header/store-header.component.ts
+++ b/src/app/core/layout/store-layout/store-header/store-header.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, HostListener, inject, input, output, signal } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { AuthUser } from '../../../services/auth/auth.interfaces';
 import { CartIconComponent } from '../../../../shared/components/cart-icon/cart-icon.component';
 import { IconButtonComponent } from '../../../../shared/components/icon-button/icon-button.component';
@@ -26,6 +26,7 @@ import { CategoryDropdownComponent } from './category-dropdown/category-dropdown
 })
 export class StoreHeaderComponent {
  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  private readonly router = inject(Router);

  readonly logoUrl = input<string | null>(null);
  readonly cartQuantity = input<number>(0);
@@ -43,13 +44,14 @@ export class StoreHeaderComponent {

  protected readonly isUserDropdownOpen = signal(false);
  protected readonly isCategoryDropdownOpen = signal(false);
+  protected readonly isMobileMenuOpen = signal(false);
  protected readonly minSearchLength = 3;
  protected readonly showSearchError = signal(false);
  protected readonly searchControl = new FormControl('', { nonNullable: true });

  @HostListener('document:click', ['$event'])
  protected onDocumentClick(event: MouseEvent): void {
-    if (!this.isUserDropdownOpen() && !this.isCategoryDropdownOpen()) {
+    if (!this.isUserDropdownOpen() && !this.isCategoryDropdownOpen() && !this.isMobileMenuOpen()) {
      return;
    }

@@ -57,6 +59,7 @@ export class StoreHeaderComponent {
    if (target instanceof Node && !this.elementRef.nativeElement.contains(target)) {
      this.isUserDropdownOpen.set(false);
      this.isCategoryDropdownOpen.set(false);
+      this.isMobileMenuOpen.set(false);
    }
  }

@@ -64,6 +67,7 @@ export class StoreHeaderComponent {
  protected onEscapeKey(): void {
    this.isUserDropdownOpen.set(false);
    this.isCategoryDropdownOpen.set(false);
+    this.isMobileMenuOpen.set(false);
  }

  protected toggleUserDropdown(): void {
@@ -109,6 +113,25 @@ export class StoreHeaderComponent {

  protected onCategorySelect(category: Category): void {
    this.isCategoryDropdownOpen.set(false);
+    this.isMobileMenuOpen.set(false);
    this.categorySelect.emit(category);
  }
+
+  protected toggleMobileMenu(): void {
+    this.isMobileMenuOpen.update((isOpen) => !isOpen);
+  }
+
+  protected onMobileAccountClick(): void {
+    this.isMobileMenuOpen.set(false);
+    if (!this.isAuthenticated()) {
+      this.loginClick.emit();
+    } else {
+      const menus = this.accountNavigationMenus();
+      if (menus.length > 0) {
+        this.router.navigate([menus[0].route]);
+      } else {
+        this.router.navigate(['/cuenta']);
+      }
+    }
+  }
 }
--- a/src/app/core/layout/store-layout/store-layout.component.html
+++ b/src/app/core/layout/store-layout/store-layout.component.html
@@ -61,6 +61,7 @@
    [footerSections]="footerSections()"
    [socialMedia]="tenant()?.social_media ?? []"
    [logoUrl]="tenant()?.footer_logo ?? null"
+    [storeName]="tenant()?.nombre ?? null"
    (logoutClick)="onLogoutClick()"
  />
 </div>
--- a/src/app/features/store/pages/recover-password-code-page/recover-password-code-page.component.scss
+++ b/src/app/features/store/pages/recover-password-code-page/recover-password-code-page.component.scss
@@ -18,9 +18,10 @@

 :host ::ng-deep .recover-password-code-page__inputs .form-control {
  min-height: 52px;
-  padding: 0.5rem;
+  padding: 0.5rem !important;
  text-align: center;
  font-size: 20px;
+  background-image: none !important;
 }

 :host ::ng-deep .recover-password-code-page__resend-action {
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -1,8 +1,4 @@
 :host {
-  display: inline-block;
-}
-
-:host(.product-detail__cta) {
  display: block;
  width: 100%;
 }
@@ -11,10 +7,6 @@
  min-height: 40px;
  font-weight: 700;
  font-size: 15px;
-  min-width: 216px;
-}
-
-:host(.product-detail__cta) .btn {
  width: 100%;
 }

--- a/src/app/shared/components/hero-banner/hero-banner.component.html
+++ b/src/app/shared/components/hero-banner/hero-banner.component.html
@@ -1,8 +1,12 @@
 <div class="hero-banner-container">
-  <div 
-    class="hero-banner position-relative rounded" 
-    [ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
+  <div
+    class="hero-banner position-relative rounded"
  >
+    <div
+      class="hero-media"
+      aria-hidden="true"
+      [ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
+    ></div>
    
    @if (heroConfig) {
      <div class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center">
@@ -14,7 +18,7 @@
            <div class="hero-description" [innerHTML]="heroConfig.description_html"></div>
          }
          @if (heroConfig.button_text) {
-            <a [href]="heroConfig.button_href || '#'" class="text-decoration-none mt-3 d-inline-block">
+            <a [href]="heroConfig.button_href || '#'" class="hero-action text-decoration-none mt-3 d-inline-block">
              <app-button variant="primary">
                {{ heroConfig.button_text }}
              </app-button>
@@ -26,7 +30,7 @@

    @if (eventConfig) {
      <div class="event-card-container position-absolute w-100 d-flex justify-content-center">
-        <div class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
+        <div id="event-details" class="event-card bg-white shadow rounded p-3 p-md-4 text-center">
          @if (eventConfig.title) {
            <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
          }
@@ -45,6 +49,11 @@
              </div>
            }
          </div>
+
+          <div class="event-schedule-label" aria-hidden="true">
+            <i class="fa-solid fa-chevron-down"></i>
+            <span>Ver horarios</span>
+          </div>
        </div>
      </div>
    }
--- a/src/app/shared/components/hero-banner/hero-banner.component.scss
+++ b/src/app/shared/components/hero-banner/hero-banner.component.scss
@@ -5,22 +5,25 @@

 .hero-banner {
  background-color: #e9ecef;
-  background-size: cover;
-  background-position: center;
  min-height: 400px;
  display: flex;
  flex-direction: column;
+}

-  &::before {
+.hero-media {
+  position: absolute;
+  inset: 0;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: inherit;
+
+  &::after {
    content: "";
    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.95) 100%);
    border-radius: inherit;
-    z-index: 1;
  }
 }

@@ -85,27 +88,147 @@
  font-weight: 500;
 }

-@media (max-width: 768px) {
-  .hero-banner::before {
-    background: none;
+.event-schedule-label {
+  display: none;
+}
+
+@media (max-width: 767.98px) {
+  .hero-banner-container {
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  .hero-banner {
+    min-height: 0;
+    overflow: hidden;
+    background-color: #f5f5f5;
+  }
+
+  .hero-media {
+    position: relative;
+    inset: auto;
+    flex: 0 0 auto;
+    width: 100%;
+    height: clamp(8.75rem, 44vw, 10.5rem);
+    background-position: center center;
+    background-size: 140% auto;
+    border-radius: 0;
+  }
+
+  .hero-media::after {
+    top: auto;
+    height: 48%;
+    background: linear-gradient(
+      to bottom,
+      rgba(245, 245, 245, 0) 0%,
+      rgba(245, 245, 245, 0.78) 55%,
+      #f5f5f5 100%
+    );
+    border-radius: 0;
  }

  .hero-content {
    justify-content: center !important;
-    background: none;
+    height: auto !important;
+    min-height: 8.25rem;
+    margin-top: -1.7rem;
+    padding: 0 1.25rem 1.75rem !important;
+    align-items: flex-start !important;
  }
-  
+
  .hero-text-box {
+    width: 100%;
+    max-width: 19rem;
+    padding: 0;
    text-align: center;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 8px;
+    background: transparent;
+    border-radius: 0;
  }
-  
+
+  ::ng-deep .hero-title,
+  .hero-title {
+    margin-bottom: 0.4rem;
+    font-size: 0.875rem;
+    line-height: 1.2;
+  }
+
+  ::ng-deep .hero-title p,
+  ::ng-deep .hero-description p {
+    margin-bottom: 0;
+  }
+
+  ::ng-deep .hero-description,
+  .hero-description {
+    font-size: 0.75rem;
+    line-height: 1.25;
+  }
+
+  .hero-action {
+    margin-top: 1rem !important;
+  }
+
+  .hero-action ::ng-deep .btn {
+    min-height: 1.875rem;
+    padding: 0.4rem 1.35rem;
+    border-radius: 0.25rem;
+    font-size: 0.625rem;
+  }
+
  .event-card-container {
-    bottom: -80px;
+    position: relative !important;
+    bottom: auto;
+    left: auto;
+    padding: 0 1.25rem 1.2rem;
  }
-  
-  .hero-banner-container {
-    padding-bottom: 6rem;
+
+  .event-card {
+    width: 100%;
+    max-width: 22rem;
+    min-height: 11.4rem;
+    padding: 1.75rem 1rem 0.8rem !important;
+    border-radius: 0 !important;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.04) !important;
+  }
+
+  .event-title {
+    max-width: 16rem;
+    margin: 0 auto 0.85rem !important;
+    font-size: 1rem;
+    line-height: 1.1;
+    letter-spacing: 0;
+  }
+
+  .event-details {
+    gap: 0.45rem !important;
+    font-size: 0.7rem;
+    line-height: 1.25;
+  }
+
+  .event-details > div {
+    gap: 0.5rem !important;
+  }
+
+  .event-icon {
+    width: 0.9rem;
+    font-size: 0.85rem;
+  }
+
+  .event-info-text {
+    font-weight: 400;
+  }
+
+  .event-schedule-label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.55rem;
+    margin-top: 1.9rem;
+    color: var(--tenant-primary, #009d4f);
+    font-size: 0.625rem;
+    font-weight: 700;
+  }
+
+  .event-schedule-label i {
+    font-size: 0.65rem;
  }
 }
--- a/src/app/shared/components/icon-button/icon-button.component.scss
+++ b/src/app/shared/components/icon-button/icon-button.component.scss
@@ -69,7 +69,8 @@
  color: var(--tenant-danger);
 }

-.icon-btn--user {
+.icon-btn--user,
+.icon-btn--bars {
  i {
    width: 23px;
    height: 23px;
--- a/src/app/shared/components/icon-button/icon-button.component.ts
+++ b/src/app/shared/components/icon-button/icon-button.component.ts
@@ -10,7 +10,8 @@ export type IconButtonVariant =
  | 'angle-down'
  | 'copy'
  | 'download'
-  | 'share';
+  | 'share'
+  | 'bars';

@Component({
  selector: 'app-icon-button',
@@ -38,6 +39,7 @@ export class IconButtonComponent {
      copy: 'fa-solid fa-copy',
      download: 'fa-solid fa-download',
      share: 'fa-solid fa-share-nodes',
+      bars: 'fa-solid fa-bars',
    };
    return classes[this.variant()];
  });
--- a/src/app/shared/components/product-list/product-list.component.html
+++ b/src/app/shared/components/product-list/product-list.component.html
@@ -22,6 +22,7 @@
          [title]="item.nombre"
          [description]="item.descripcion ?? ''"
          [price]="price(item)"
+          [variants]="item.variants ?? []"
          (buy)="emitColumnBuy(item, $event)"
          (addToCart)="emitColumnCart(item, $event)"
        />
--- a/src/app/shared/components/product-list/product-list.component.spec.ts
+++ b/src/app/shared/components/product-list/product-list.component.spec.ts
@@ -160,6 +160,31 @@ describe('ProductListComponent', () => {
    });
  });

+  it('passes column variants through to the purchase event', async () => {
+    const itemWithVariants: ProductListItem = {
+      ...items[0],
+      variants: [
+        { id: 91, stock_tecnico: 3, values: { fecha: '10 de octubre' } },
+        { id: 92, stock_tecnico: 4, values: { fecha: '11 de octubre' } },
+      ],
+    };
+    const fixture = await render('column_with_cart', [itemWithVariants]);
+    const buySpy = vi.fn();
+    fixture.componentInstance.buy.subscribe(buySpy);
+
+    const card = fixture.nativeElement.querySelector(
+      'app-product-vertical-with-cart-card',
+    ) as HTMLElement;
+    (card.querySelector('.btn-primary') as HTMLButtonElement).click();
+
+    expect(buySpy).toHaveBeenCalledWith({
+      product: itemWithVariants,
+      quantity: 1,
+      variant: 91,
+      directPurchase: true,
+    });
+  });
+
  it('renders pagination and emits the requested page', async () => {
    const fixture = await render('row');
    const pageChangeSpy = vi.fn();
--- a/src/app/shared/components/product-list/product-list.component.ts
+++ b/src/app/shared/components/product-list/product-list.component.ts
@@ -123,8 +123,11 @@ export class ProductListComponent {
    });
  }

-  protected emitColumnCart(product: ProductListItem, event: { quantity: number }): void {
-    this.addToCart.emit({ product, quantity: event.quantity });
+  protected emitColumnCart(
+    product: ProductListItem,
+    event: { quantity: number; variant: number | null },
+  ): void {
+    this.addToCart.emit({ product, quantity: event.quantity, variant: event.variant });
  }

  protected emitRowBuy(
@@ -139,8 +142,16 @@ export class ProductListComponent {
    });
  }

-  protected emitColumnBuy(product: ProductListItem, event: { quantity: number }): void {
-    this.buy.emit({ product, quantity: event.quantity, variant: null, directPurchase: true });
+  protected emitColumnBuy(
+    product: ProductListItem,
+    event: { quantity: number; variant: number | null },
+  ): void {
+    this.buy.emit({
+      product,
+      quantity: event.quantity,
+      variant: event.variant,
+      directPurchase: true,
+    });
  }

  protected emitProductDetailBuy(product: ProductListItem): void {
--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html
+++ b/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.html
@@ -8,14 +8,71 @@
  </div>

  <div class="product-vertical-with-cart-card__purchase">
-    <div class="product-vertical-with-cart-card__summary">
-      <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
-      <app-quantity-selector [(quantity)]="quantity" />
-    </div>
+    @if (!hasVariants()) {
+      <div class="product-vertical-with-cart-card__summary">
+        <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
+        <app-quantity-selector [(quantity)]="quantity" />
+      </div>
+    } @else if (!hasMultipleVariantSelectors()) {
+      <div class="product-vertical-with-cart-card__single-variant">
+        <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
+
+        <div class="product-vertical-with-cart-card__single-variant-row">
+          @for (selector of variantSelectors(); track selector.key) {
+            <select
+              class="form-select product-vertical-with-cart-card__variant-select"
+              [attr.aria-label]="selector.label"
+              [ngModel]="selectedValues()[selector.key]"
+              (ngModelChange)="onVariantValueChange(selector.key, $event)"
+            >
+              @for (option of selector.options; track option) {
+                <option [ngValue]="option">{{ option }}</option>
+              }
+            </select>
+          }
+
+          <app-quantity-selector [(quantity)]="quantity" />
+        </div>
+      </div>
+    } @else {
+      <div class="product-vertical-with-cart-card__multiple-variants">
+        <div class="product-vertical-with-cart-card__summary-column">
+          <span class="product-vertical-with-cart-card__price">{{ formattedPrice() }}</span>
+          <app-quantity-selector [(quantity)]="quantity" />
+        </div>
+
+        <div class="product-vertical-with-cart-card__variant-selectors">
+          @for (selector of variantSelectors(); track selector.key) {
+            <select
+              class="form-select product-vertical-with-cart-card__variant-select"
+              [attr.aria-label]="selector.label"
+              [ngModel]="selectedValues()[selector.key]"
+              (ngModelChange)="onVariantValueChange(selector.key, $event)"
+            >
+              @for (option of selector.options; track option) {
+                <option [ngValue]="option">{{ option }}</option>
+              }
+            </select>
+          }
+        </div>
+      </div>
+    }

    <div class="product-vertical-with-cart-card__actions">
-      <app-button variant="primary" (click)="onBuy()">Comprar</app-button>
-      <app-button variant="secondary" (click)="onAddToCart()"> Agregar al carrito </app-button>
+      <app-button
+        variant="primary"
+        [disabled]="hasVariants() && selectedVariant() === null"
+        (click)="onBuy()"
+      >
+        Comprar
+      </app-button>
+      <app-button
+        variant="secondary"
+        [disabled]="hasVariants() && selectedVariant() === null"
+        (click)="onAddToCart()"
+      >
+        Agregar al carrito
+      </app-button>
    </div>
  </div>
 </article>
--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss
+++ b/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.scss
@@ -40,7 +40,7 @@
  }

  &__description {
-    margin: 23px 0 ;
+    margin: 23px 0;
    color: #6f6f6f;
    font-size: 11px;
    font-weight: 300;
@@ -55,11 +55,66 @@
  &__summary {
    display: flex;
    align-items: center;
-    justify-content: space-between;
+    justify-content: center;
    gap: 16px;
    padding-inline: 12px;
  }

+  &__single-variant {
+    display: grid;
+    justify-items: center;
+    gap: 16px;
+  }
+
+  &__single-variant-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 8px;
+  }
+
+  &__multiple-variants {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: center;
+    gap: 16px;
+  }
+
+  &__summary-column,
+  &__variant-selectors {
+    display: flex;
+    flex-direction: column;
+    
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  &__variant-selectors {
+    align-items: stretch;
+  }
+
+  &__variant-select {
+    min-width: 0;
+    height: 40px;
+    border-color: #d8d8d8;
+    color: #6f6f6f;
+    font-size: 12px;
+
+    &:focus {
+      border-color: var(--tenant-primary, #009933);
+      box-shadow: 0 0 0 0.2rem color-mix(in srgb, transparent 75%, var(--tenant-primary, #009933));
+    }
+  }
+
+  &__single-variant-row &__variant-select {
+    flex: 1 1 auto;
+  }
+
+  &__single-variant-row app-quantity-selector {
+    flex: 0 0 auto;
+  }
+
  &__price {
    color: var(--tenant-primary, #009933);
    font-size: 22px;
@@ -87,6 +142,12 @@
  }
 }

+@media (max-width: 767.98px) {
+  .product-vertical-with-cart-card {
+    border-color: var(--color-primary, var(--tenant-primary, #009933));
+  }
+}
+
@media (max-width: 420px) {
  .product-vertical-with-cart-card {
    padding: 42px 20px 21px;
@@ -98,6 +159,5 @@
    &__summary {
      padding-inline: 12px;
    }
-
  }
 }
--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts
+++ b/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.spec.ts
@@ -83,7 +83,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
    ) as HTMLButtonElement;
    button.click();

-    expect(buySpy).toHaveBeenCalledWith({ quantity: 1 });
+    expect(buySpy).toHaveBeenCalledWith({ quantity: 1, variant: null });
  });

  it('emits addToCart with the current quantity', async () => {
@@ -98,7 +98,7 @@ describe('ProductVerticalWithCartCardComponent', () => {
    ) as HTMLButtonElement;
    button.click();

-    expect(addToCartSpy).toHaveBeenCalledWith({ quantity: 3 });
+    expect(addToCartSpy).toHaveBeenCalledWith({ quantity: 3, variant: null });
  });

  it('uses the shared primary and secondary buttons', async () => {
@@ -115,4 +115,66 @@ describe('ProductVerticalWithCartCardComponent', () => {
      element.querySelector('.product-vertical-with-cart-card__actions .btn-outline-primary'),
    ).not.toBeNull();
  });
+
+  it('places a single variant selector in the same row as the quantity', async () => {
+    const fixture = await createComponent();
+    fixture.componentRef.setInput('variants', [
+      { id: 10, values: { fecha: '10 de octubre' } },
+      { id: 11, values: { fecha: '11 de octubre' } },
+    ]);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const row = element.querySelector('.product-vertical-with-cart-card__single-variant-row');
+
+    expect(row?.querySelectorAll('.product-vertical-with-cart-card__variant-select')).toHaveLength(
+      1,
+    );
+    expect(row?.querySelector('app-quantity-selector')).not.toBeNull();
+    expect(element.querySelector('.product-vertical-with-cart-card__multiple-variants')).toBeNull();
+  });
+
+  it('uses separate summary and selector columns for multiple variant attributes', async () => {
+    const fixture = await createComponent();
+    fixture.componentRef.setInput('variants', [
+      { id: 20, values: { fecha: '10 de octubre', turno: 'MaÃ±ana' } },
+      { id: 21, values: { fecha: '10 de octubre', turno: 'Tarde' } },
+    ]);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement as HTMLElement;
+    const layout = element.querySelector('.product-vertical-with-cart-card__multiple-variants');
+
+    expect(
+      layout?.querySelector('.product-vertical-with-cart-card__summary-column'),
+    ).not.toBeNull();
+    expect(
+      layout?.querySelectorAll('.product-vertical-with-cart-card__variant-select'),
+    ).toHaveLength(2);
+  });
+
+  it('emits the selected variant with the purchase action', async () => {
+    const fixture = await createComponent();
+    fixture.componentRef.setInput('variants', [
+      { id: 30, values: { fecha: '10 de octubre' } },
+      { id: 31, values: { fecha: '11 de octubre' } },
+    ]);
+    fixture.detectChanges();
+    const buySpy = vi.fn();
+    fixture.componentInstance.buy.subscribe(buySpy);
+
+    const select = fixture.nativeElement.querySelector(
+      '.product-vertical-with-cart-card__variant-select',
+    ) as HTMLSelectElement;
+    select.value = select.options[1].value;
+    select.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector(
+      '.product-vertical-with-cart-card__actions .btn-primary',
+    ) as HTMLButtonElement;
+    button.click();
+
+    expect(buySpy).toHaveBeenCalledWith({ quantity: 1, variant: 31 });
+  });
 });
--- a/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts
+++ b/src/app/shared/components/product-vertical-with-cart-card/product-vertical-with-cart-card.component.ts
@@ -1,11 +1,33 @@
-import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  model,
+  output,
+  signal,
+  untracked,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';

 import { ButtonComponent } from '../button/button.component';
 import { QuantitySelectorComponent } from '../quantity-selector/quantity-selector.component';

+export interface VerticalCartVariant {
+  id: number;
+  values: Record<string, string>;
+}
+
+interface VariantSelector {
+  key: string;
+  label: string;
+  options: string[];
+}
+
@Component({
  selector: 'app-product-vertical-with-cart-card',
-  imports: [ButtonComponent, QuantitySelectorComponent],
+  imports: [ButtonComponent, FormsModule, QuantitySelectorComponent],
  templateUrl: './product-vertical-with-cart-card.component.html',
  styleUrl: './product-vertical-with-cart-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,20 +36,80 @@ export class ProductVerticalWithCartCardComponent {
  readonly title = input<string>('');
  readonly description = input<string>('');
  readonly price = input<number>(0);
+  readonly variants = input<VerticalCartVariant[]>([]);

  readonly quantity = model<number>(1);
+  readonly selectedVariant = model<number | null>(null);

-  readonly buy = output<{ quantity: number }>();
-  readonly addToCart = output<{ quantity: number }>();
+  readonly buy = output<{ quantity: number; variant: number | null }>();
+  readonly addToCart = output<{ quantity: number; variant: number | null }>();
+
+  protected readonly selectedValues = signal<Record<string, string>>({});

  protected readonly formattedPrice = computed(() => this.formatCurrency(this.price()));
+  protected readonly variantSelectors = computed<VariantSelector[]>(() => {
+    const variants = this.variants();
+    const keys = Array.from(new Set(variants.flatMap((variant) => Object.keys(variant.values))));
+
+    return keys.map((key) => ({
+      key,
+      label: this.formatVariantLabel(key),
+      options: Array.from(
+        new Set(
+          variants
+            .map((variant) => variant.values[key])
+            .filter((value): value is string => Boolean(value)),
+        ),
+      ),
+    }));
+  });
+
+  protected readonly hasVariants = computed(() => this.variantSelectors().length > 0);
+  protected readonly hasMultipleVariantSelectors = computed(
+    () => this.variantSelectors().length > 1,
+  );
+
+  constructor() {
+    effect(() => {
+      const variants = this.variants();
+
+      untracked(() => {
+        if (variants.length === 0) {
+          this.selectedValues.set({});
+          this.selectedVariant.set(null);
+          return;
+        }
+
+        const selected =
+          variants.find((variant) => variant.id === this.selectedVariant()) ?? variants[0];
+        this.selectedValues.set({ ...selected.values });
+        this.selectedVariant.set(selected.id);
+      });
+    });
+  }
+
+  protected onVariantValueChange(key: string, value: string): void {
+    const values = { ...this.selectedValues(), [key]: value };
+    const selectors = this.variantSelectors();
+    const matchingVariant = this.variants().find((variant) =>
+      selectors.every((selector) => variant.values[selector.key] === values[selector.key]),
+    );
+
+    this.selectedValues.set(values);
+    this.selectedVariant.set(matchingVariant?.id ?? null);
+  }

  protected onAddToCart(): void {
-    this.addToCart.emit({ quantity: this.quantity() });
+    this.addToCart.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
  }

  protected onBuy(): void {
-    this.buy.emit({ quantity: this.quantity() });
+    this.buy.emit({ quantity: this.quantity(), variant: this.selectedVariant() });
+  }
+
+  private formatVariantLabel(key: string): string {
+    const label = key.replace(/[_-]+/g, ' ');
+    return label.charAt(0).toUpperCase() + label.slice(1);
  }

  private formatCurrency(value: number): string {
--- a/src/app/shared/components/store-section/store-section.component.scss
+++ b/src/app/shared/components/store-section/store-section.component.scss
@@ -8,5 +8,5 @@
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
-  color: #000000;
+  color: var(--color-primary);
 }
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="e">
+<html lang="es">
 <head>
  <meta charset="utf-8">
  <title>ShopitFront</title>
Author	SHA1	Message	Date
ncoronel	2b3e054ccf	feat: enhance footer layout for improved responsiveness and structure	2026-08-05 17:07:04 -03:00
ncoronel	1b238cb1bc	feat: center align summary content and adjust variant selectors layout	2026-08-05 16:52:10 -03:00
ncoronel	c9f9e6cc3e	feat: enhance product vertical card with variant selection and improve store header responsiveness	2026-08-05 16:48:34 -03:00
ncoronel	5da341dde2	feat: improve hero banner responsiveness and enhance event card layout	2026-08-05 16:16:46 -03:00
ncoronel	21786d7b34	feat: enhance store header layout for better responsiveness and add mobile menu functionality	2026-08-05 12:18:50 -03:00
ncoronel	8aea54959f	fix: enforce padding and background styles for form control in recover password page	2026-08-05 11:09:30 -03:00
ncoronel	12ca45bdd8	feat: add storeName input to footer component and update copyright display	2026-08-05 10:49:33 -03:00
ncoronel	fa6fc53f8d	fix: correct language attribute from 'e' to 'es' in HTML tag	2026-08-05 09:06:51 -03:00