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">Добро пожаловать в {{ brandName }}</h1>
        <p class="novo-hero-subtitle">Найдите всё, что нужно, в одном месте</p>
        <a routerLink="/search" class="novo-hero-btn">
          Начать поиск
          <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()) {
      <div class="novo-loading">
        <div class="novo-spinner"></div>
        <p>Загружаем категории...</p>
      </div>
    }

    @if (error()) {
      <div class="novo-error">
        <div class="novo-error-icon">⚠️</div>
        <h3>Что-то пошло не так</h3>
        <p>{{ error() }}</p>
        <button (click)="loadCategories()" class="novo-retry-btn">Попробовать снова</button>
      </div>
    }

    @if (!loading() && !error()) {
      <section class="novo-categories">
        <div class="novo-section-header">
          <h2>Категории товаров</h2>
          <p>Выберите интересующую категорию</p>
        </div>

        @if (getTopLevelCategories().length === 0) {
          <div class="novo-empty">
            <div class="novo-empty-icon">📦</div>
            <h3>Категории скоро появятся</h3>
            <p>Мы работаем над наполнением каталога</p>
          </div>
        } @else {
          <div class="novo-categories-grid">
            @for (category of getTopLevelCategories(); track category.categoryID) {
              <a [routerLink]="['/category', category.categoryID]" class="novo-category-card">
                <div class="novo-category-image">
                  @if (category.icon) {
                    <img [src]="category.icon" [alt]="category.name" loading="lazy" />
                  } @else {
                    <div class="novo-category-placeholder">
                      <span>{{ category.name.charAt(0) }}</span>
                    </div>
                  }
                </div>
                <div class="novo-category-info">
                  <h3>{{ category.name }}</h3>
                  <span class="novo-category-arrow">→</span>
                </div>
              </a>
            }
          </div>
        }
      </section>
    }
  </div>
} @else {
  <!-- DEXAR VERSION - Original -->
  <div class="home-container">
    <header class="hero hero-compact">
      <h1>{{ brandName }}</h1>
      <p>Ваш маркетплейс товаров и услуг</p>
    </header>

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

    @if (loading()) {
      <div class="loading">
        <div class="spinner"></div>
        <p>Загрузка категорий...</p>
      </div>
    }

    @if (error()) {
      <div class="error">
        <p>{{ error() }}</p>
        <button (click)="loadCategories()">Попробовать снова</button>
      </div>
    }

    @if (!loading() && !error()) {
      <section class="categories">
        <h2>Категории</h2>
        @if (getTopLevelCategories().length === 0) {
          <div class="empty-categories">
            <div class="empty-icon">📦</div>
            <h3>Категории пока отсутствуют</h3>
            <p>Скоро здесь появятся категории товаров</p>
          </div>
        } @else {
          <div class="categories-grid">
            @for (category of getTopLevelCategories(); track category.categoryID) {
                <div class="category-card">
                  <a [routerLink]="['/category', category.categoryID]" class="category-link">
                    <div class="category-media">
                      @if (category.icon) {
                        <img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
                      } @else {
                        <div class="category-fallback">{{ category.name }}</div>
                      }
                    </div>
                    <h3>{{ category.name }}</h3>
                  </a>
                </div>
              }
          </div>
        }
      </section>
    }
  </div>
}