marketplaces/src/app/pages/home/home.component.html

<!-- novo VERSION - Modern Grid Layout -->
@if (isnovo) {
  <div class="novo-home">
    <section class="novo-hero novo-hero-compact">
      <div class="novo-hero-content">
        <h1 class="novo-hero-title">{{ 'home.welcomeTo' | translate:{ brand: brandName } }}</h1>
        <p class="novo-hero-subtitle">{{ 'home.subtitle' | translate }}</p>
        <a [routerLink]="'/search' | langRoute" class="novo-hero-btn">
          {{ 'home.startSearch' | translate }}
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="5" y1="12" x2="19" y2="12"></line>
            <polyline points="12 5 19 12 12 19"></polyline>
          </svg>
        </a>
      </div>
    </section>

    <!-- Items Carousel -->
    <app-items-carousel />

    @if (loading()) {
      <section class="novo-categories">
        <div class="novo-section-header">
          <div class="skeleton-line" style="height: 32px; width: 200px; margin: 0 auto 12px;"></div>
          <div class="skeleton-line" style="height: 18px; width: 300px; margin: 0 auto;"></div>
        </div>
        <div class="novo-categories-grid">
          @for (i of skeletonSlots; track i) {
            <div class="novo-category-card skeleton-card">
              <div class="novo-category-image skeleton-image"></div>
              <div class="novo-category-info">
                <div class="skeleton-line" style="height: 18px; width: 70%;"></div>
                <div class="skeleton-line" style="height: 18px; width: 20px;"></div>
              </div>
            </div>
          }
        </div>
      </section>
    }

    @if (error()) {
      <div class="novo-error">
        <div class="novo-error-icon">⚠️</div>
        <h3>{{ 'home.errorTitle' | translate }}</h3>
        <p>{{ error() }}</p>
        <button (click)="loadCategories()" class="novo-retry-btn">{{ 'home.retry' | translate }}</button>
      </div>
    }

    @if (!loading() && !error()) {
      <section class="novo-categories">
        <div class="novo-section-header">
          <h2>{{ 'home.categoriesTitle' | translate }}</h2>
          <p>{{ 'home.categoriesSubtitle' | translate }}</p>
        </div>

        @if (topLevelCategories().length === 0) {
          <div class="novo-empty">
            <div class="novo-empty-icon">📦</div>
            <h3>{{ 'home.categoriesEmpty' | translate }}</h3>
            <p>{{ 'home.categoriesEmptyDesc' | translate }}</p>
          </div>
        } @else {
          <div class="novo-categories-grid">
            @for (category of topLevelCategories(); track category.categoryID) {
              <a [routerLink]="['/category', category.categoryID] | langRoute" class="novo-category-card">
                <div class="novo-category-image">
                  @if (category.icon) {
                    <img [src]="category.icon" [alt]="categoryName(category)" loading="lazy" />
                  } @else {
                    <div class="novo-category-placeholder">
                      <span>{{ categoryName(category).charAt(0) }}</span>
                    </div>
                  }
                </div>
                <div class="novo-category-info">
                  <h3>{{ categoryName(category) }}</h3>
                  @if (getItemCount(category.categoryID)) {
                    <p class="novo-category-count">{{ 'home.itemsCount' | translate:{ count: getItemCount(category.categoryID) } }}</p>
                  }
                </div>
              </a>
            }
          </div>
        }
      </section>
    }
  </div>
} @else {
  <!-- DEXAR VERSION - Redesigned 2026 -->
  <div class="dexar-home">
    <!-- Hero Section with Full Width Image -->
    <section class="dexar-hero">
      <div class="dexar-hero-overlay">
        <div class="dexar-hero-content">
          <h1 class="dexar-hero-title">{{ 'home.dexarHeroTitle' | translate }}</h1>
          <p class="dexar-hero-subtitle">{{ 'home.dexarHeroSubtitle' | translate }}</p>
          <p class="dexar-hero-tagline">{{ 'home.dexarHeroTagline' | translate }}</p>
          
          <div class="dexar-hero-actions">
            <a (click)="scrollToCatalog()" class="dexar-btn-primary">
              {{ 'home.goToCatalog' | translate }}
            </a>
            <button (click)="navigateToSearch()" class="dexar-btn-secondary">
              {{ 'home.findProduct' | translate }}
              <svg width="11" height="16" viewBox="0 0 11 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L9 8L1 15" stroke="#1E3C38" stroke-width="2"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Items Carousel -->
    <app-items-carousel />

    @if (loading()) {
      <section class="dexar-categories">
        <div class="skeleton-line" style="height: 36px; width: 220px; margin-bottom: 40px;"></div>
        <div class="dexar-categories-grid">
          @for (i of skeletonSlots; track i) {
            <div class="dexar-category-card skeleton-card">
              <div class="dexar-category-image skeleton-image"></div>
              <div class="dexar-category-info">
                <div class="skeleton-line" style="height: 16px; width: 75%;"></div>
                <div class="skeleton-line" style="height: 12px; width: 40%; margin-top: 4px;"></div>
              </div>
            </div>
          }
        </div>
      </section>
    }

    @if (error()) {
      <div class="dexar-error">
        <p>{{ error() }}</p>
        <button (click)="loadCategories()" class="dexar-retry-btn">{{ 'home.retry' | translate }}</button>
      </div>
    }

    @if (!loading() && !error()) {
      <section class="dexar-categories" id="catalog">
        <h2 class="dexar-categories-title">{{ 'home.catalogTitle' | translate }}</h2>
        @if (topLevelCategories().length === 0) {
          <div class="dexar-empty-categories">
            <div class="dexar-empty-icon">📦</div>
            <h3>{{ 'home.emptyCategoriesDexar' | translate }}</h3>
            <p>{{ 'home.categoriesSoonDexar' | translate }}</p>
          </div>
        } @else {
          <div class="dexar-categories-grid">
            @for (category of topLevelCategories(); track category.categoryID) {
              <a [routerLink]="['/category', category.categoryID] | langRoute" 
                 class="dexar-category-card" 
                 [class.dexar-category-card--wide]="isWideCategory(category.categoryID)">
                <div class="dexar-category-image">
                  @if (isWideCategory(category.categoryID) && category.wideBanner) {
                    <img [src]="category.wideBanner" [alt]="categoryName(category)" loading="lazy" decoding="async" />
                  } @else if (category.icon) {
                    <img [src]="category.icon" [alt]="categoryName(category)" loading="lazy" decoding="async" />
                  } @else {
                    <div class="dexar-category-fallback">{{ categoryName(category).charAt(0) }}</div>
                  }
                </div>
                <div class="dexar-category-info">
                  <h3 class="dexar-category-name">{{ categoryName(category) }}</h3>
                  <p class="dexar-category-count">{{ 'home.itemsCount' | translate:{ count: getItemCount(category.categoryID) } }}</p>
                </div>
              </a>
            }
          </div>
        }
      </section>
    }
  </div>
}