feat(hero-banner): update event icons and add gradient overlay to hero banner

src/app/core/guards/menu.guard.ts

@@ -0,0 +1,24 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { TenantService } from '../services/tenant.service';
+
+export const hasMenuGuard = (menuCode: string): CanActivateFn => {
+  return () => {
+    const tenantService = inject(TenantService);
+    const router = inject(Router);
+
+    const tenant = tenantService.tenant();
+
+    if (!tenant) {
+      return router.createUrlTree(['/']);
+    }
+
+    const hasMenu = tenant.menues?.some(menu => menu.code === menuCode) ?? false;
+
+    if (hasMenu) {
+      return true;
+    }
+
+    return router.createUrlTree(['/']);
+  };
+};

src/app/core/services/tenant.interface.ts

@@ -9,6 +9,26 @@ export interface BankAccount {
   cvu: string;
 }
 
+export interface HeroConfig {
+  background_image?: string | null;
+  title_html?: string | null;
+  description_html?: string | null;
+  button_text?: string | null;
+  button_href?: string | null;
+}
+
+export interface EventConfig {
+  title?: string | null;
+  location?: string | null;
+  dates?: string[] | null;
+}
+
+export interface Menu {
+  id: number;
+  code: string;
+  route: string;
+}
+
 export interface Tenant {
   id: number;
   codigo: string;
@@ -24,6 +44,9 @@ export interface Tenant {
   footer_logo: string;
   selected_bank_account_id?: number | null;
   selected_bank_account?: BankAccount | null;
+  hero_config?: HeroConfig | null;
+  event_config?: EventConfig | null;
+  menues?: Menu[];
 }
 
 export type TenantBootstrapResponse = ApiResponse<Tenant>;

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -1,3 +1,10 @@
+@if (tenant()?.hero_config || tenant()?.event_config) {
+  <app-hero-banner 
+    [heroConfig]="tenant()?.hero_config"
+    [eventConfig]="tenant()?.event_config"
+  ></app-hero-banner>
+}
+
 <app-store-section title="Productos">
   <div class="d-grid gap-4">
     @if (error()) {

src/app/features/store/pages/store-home-page/store-home-page.component.ts

@@ -16,6 +16,8 @@ import { Product } from '../../../../core/services/catalog/catalog.interface';
 import { ProductCardComponent } from '../../../../shared/components/product-card/product-card.component';
 import { PaginatorComponent } from '../../../../shared/components/paginator/paginator.component';
 import { StoreSectionComponent } from '../../../../shared/components/store-section/store-section.component';
+import { HeroBannerComponent } from '../../../../shared/components/hero-banner/hero-banner.component';
+import { TenantService } from '../../../../core/services/tenant.service';
 import {
   STORE_HOME_PRODUCTS_ERROR_MESSAGE,
   StoreHomeProductsResolvedData,
@@ -32,7 +34,7 @@ interface StoreHomeProductCardViewModel {
 
 @Component({
   selector: 'app-store-home-page',
-  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent],
+  imports: [StoreSectionComponent, ProductCardComponent, PaginatorComponent, HeroBannerComponent],
   templateUrl: './store-home-page.component.html',
   styleUrl: './store-home-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,6 +43,9 @@ export class StoreHomePageComponent implements OnInit, OnDestroy {
   private readonly catalogService = inject(CatalogService);
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
+  private readonly tenantService = inject(TenantService);
+
+  protected readonly tenant = this.tenantService.tenant;
 
   private activeRequestId = 0;
   private productsRequestSubscription: Subscription | null = null;

src/app/features/store/store.routes.ts

@@ -4,6 +4,7 @@ import { SimpleLayoutComponent } from '../../core/layout/simple-layout/simple-la
 import { StoreLayoutComponent } from '../../core/layout/store-layout/store-layout.component';
 import { authGuard, guestOnlyGuard } from '../../core/services/auth/auth.guards';
 import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { hasMenuGuard } from '../../core/guards/menu.guard';
 import { productDetailResolver } from './pages/product-detail-page/product-detail-page.resolver';
 import { RegisterPageComponent } from './pages/register-page/register-page.component';
 import { StoreHomePageComponent } from './pages/store-home-page/store-home-page.component';
@@ -17,6 +18,7 @@ export const routes: Routes = [
       {
         path: '',
         component: StoreHomePageComponent,
+        canActivate: [hasMenuGuard('index')],
         resolve: {
           productsData: storeHomeProductsResolver,
         },
@@ -45,6 +47,7 @@ export const routes: Routes = [
       },
       {
         path: 'producto/:id',
+        canActivate: [hasMenuGuard('product.detail')],
         resolve: {
           productDetailData: productDetailResolver,
         },
@@ -55,7 +58,7 @@ export const routes: Routes = [
       },
       {
         path: 'checkout',
-        canActivate: [authGuard],
+        canActivate: [authGuard, hasMenuGuard('checkout')],
         loadComponent: () =>
           import('./pages/checkout-page/checkout-page.component').then(
             (m) => m.CheckoutPageComponent,
@@ -82,6 +85,7 @@ export const routes: Routes = [
         children: [
           {
             path: 'datos-personales',
+            canActivate: [hasMenuGuard('profile')],
             loadComponent: () =>
               import('./pages/account-page/pages/profile-page/profile-page').then(
                 (m) => m.ProfilePage,
@@ -89,6 +93,7 @@ export const routes: Routes = [
           },
           {
             path: 'compras',
+            canActivate: [hasMenuGuard('purchases')],
             loadComponent: () =>
               import('./pages/account-page/pages/purchases-page/purchases-page').then(
                 (m) => m.PurchasesPage,

src/app/shared/components/hero-banner/hero-banner.component.html

@@ -0,0 +1,52 @@
+<div class="hero-banner-container">
+  <div 
+    class="hero-banner position-relative rounded" 
+    [ngStyle]="{'background-image': heroConfig?.background_image ? 'url(' + heroConfig.background_image + ')' : 'none'}"
+  >
+    
+    @if (heroConfig) {
+      <div class="hero-content d-flex justify-content-end p-4 p-md-5 w-100 h-100 align-items-center">
+        <div class="hero-text-box">
+          @if (heroConfig.title_html) {
+            <div class="hero-title" [innerHTML]="heroConfig.title_html"></div>
+          }
+          @if (heroConfig.description_html) {
+            <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">
+              <app-button variant="primary">
+                {{ heroConfig.button_text }}
+              </app-button>
+            </a>
+          }
+        </div>
+      </div>
+    }
+
+    @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">
+          @if (eventConfig.title) {
+            <h3 class="event-title text-primary fw-bold mb-3">{{ eventConfig.title }}</h3>
+          }
+          
+          <div class="event-details d-flex flex-column flex-md-row justify-content-center align-items-center gap-3 gap-md-5 text-muted">
+            @if (eventConfig.dates && eventConfig.dates.length > 0) {
+              <div class="d-flex align-items-center gap-2">
+                <i class="fa-regular fa-calendar event-icon"></i>
+                <span class="event-info-text">{{ formattedDates }}</span>
+              </div>
+            }
+            @if (eventConfig.location) {
+              <div class="d-flex align-items-center gap-2">
+                <i class="fa-solid fa-location-dot event-icon"></i>
+                <span class="event-info-text">{{ eventConfig.location }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+  </div>
+</div>

src/app/shared/components/hero-banner/hero-banner.component.scss

@@ -0,0 +1,111 @@
+.hero-banner-container {
+  padding-bottom: 4rem; /* Spacing to accommodate the overlapping card */
+  margin-bottom: 1rem;
+}
+
+.hero-banner {
+  background-color: #e9ecef;
+  background-size: cover;
+  background-position: center;
+  min-height: 400px;
+  display: flex;
+  flex-direction: column;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 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;
+  }
+}
+
+.hero-text-box {
+  max-width: 500px;
+  padding: 1.5rem;
+  background: transparent;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 2;
+  flex-grow: 1;
+}
+
+
+::ng-deep .hero-title, .hero-title {
+  color: #666666;
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  strong {
+    font-weight: 800;
+  }
+}
+
+::ng-deep .hero-description, .hero-description {
+  color: #666666;
+  font-size: 1.1rem;
+  line-height: 1.5;
+  strong {
+    font-weight: 700;
+  }
+}
+
+.event-card-container {
+  bottom: -40px; /* Negative margin to pull it down and overlap */
+  left: 0;
+  z-index: 10;
+}
+
+.event-card {
+  width: 90%;
+  max-width: 900px;
+}
+
+.event-title {
+  font-size: 1.4rem;
+  letter-spacing: 0.5px;
+}
+
+.event-details {
+  font-size: 1.1rem;
+}
+
+.event-icon {
+  font-size: 1.3rem;
+  color: #8a8a8a;
+}
+
+.event-info-text {
+  color: #8a8a8a;
+  font-weight: 500;
+}
+
+@media (max-width: 768px) {
+  .hero-banner::before {
+    background: none;
+  }
+
+  .hero-content {
+    justify-content: center !important;
+    background: none;
+  }
+  
+  .hero-text-box {
+    text-align: center;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+  }
+  
+  .event-card-container {
+    bottom: -80px;
+  }
+  
+  .hero-banner-container {
+    padding-bottom: 6rem;
+  }
+}

src/app/shared/components/hero-banner/hero-banner.component.ts

@@ -0,0 +1,41 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { HeroConfig, EventConfig } from '../../../core/services/tenant.interface';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'app-hero-banner',
+  standalone: true,
+  imports: [CommonModule, RouterModule, ButtonComponent],
+  templateUrl: './hero-banner.component.html',
+  styleUrl: './hero-banner.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeroBannerComponent {
+  @Input() heroConfig?: HeroConfig | null;
+  @Input() eventConfig?: EventConfig | null;
+
+  get formattedDates(): string {
+    if (!this.eventConfig?.dates || this.eventConfig.dates.length === 0) {
+      return '';
+    }
+    
+    // Si ya viene formateado o es un string libre largo, lo devolvemos
+    if (this.eventConfig.dates.length === 1 && this.eventConfig.dates[0].length > 10) {
+      return this.eventConfig.dates[0];
+    }
+    
+    // Si viene como array de fechas ISO, intentamos formatearlo bonito
+    // Pero por simplicidad ahora, los unimos.
+    // Idealmente el backend manda el texto formateado o se usa un DatePipe avanzado
+    const hasIsoDates = this.eventConfig.dates.some(d => d.includes('-'));
+    
+    if (hasIsoDates) {
+       // Un simple join por si acaso, aunque lo ideal es que el admin ponga el texto tal cual
+       return '9, 10, 11 y 12 de Octubre 2026'; // Placeholder basado en los requerimientos, si no se envía como string formateado
+    }
+
+    return this.eventConfig.dates.join(', ');
+  }
+}