home page

2026-02-14 01:28:08 +04:00
parent 88ac37ebc4
commit 751ad48489
14 changed files with 522 additions and 155 deletions
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -83,7 +83,7 @@
          <p class="dexar-hero-tagline">просто и удобно</p>
          
          <div class="dexar-hero-actions">
-            <a routerLink="/search" class="dexar-btn-primary">
+            <a (click)="scrollToCatalog()" class="dexar-btn-primary">
              Перейти в каталог
            </a>
            <button (click)="navigateToSearch()" class="dexar-btn-secondary">
@@ -115,8 +115,8 @@
    }

    @if (!loading() && !error()) {
-      <section class="dexar-categories">
-        <h2 class="dexar-categories-title">Категории</h2>
+      <section class="dexar-categories" id="catalog">
+        <h2 class="dexar-categories-title">Каталог товаров</h2>
        @if (getTopLevelCategories().length === 0) {
          <div class="dexar-empty-categories">
            <div class="dexar-empty-icon">📦</div>
@@ -126,18 +126,19 @@
        } @else {
          <div class="dexar-categories-grid">
            @for (category of getTopLevelCategories(); track category.categoryID) {
-              <div class="dexar-category-card">
-                <a [routerLink]="['/category', category.categoryID]" class="dexar-category-link">
-                  <div class="dexar-category-media">
-                    @if (category.icon) {
-                      <img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
-                    } @else {
-                      <div class="dexar-category-fallback">{{ category.name }}</div>
-                    }
-                  </div>
-                  <h3>{{ category.name }}</h3>
-                </a>
-              </div>
+              <a [routerLink]="['/category', category.categoryID]" class="dexar-category-card">
+                <div class="dexar-category-image">
+                  @if (category.icon) {
+                    <img [src]="category.icon" [alt]="category.name" loading="lazy" decoding="async" />
+                  } @else {
+                    <div class="dexar-category-fallback">{{ category.name.charAt(0) }}</div>
+                  }
+                </div>
+                <div class="dexar-category-info">
+                  <h3 class="dexar-category-name">{{ category.name }}</h3>
+                  <p class="dexar-category-count">{{ getItemCount(category.categoryID) }} товаров</p>
+                </div>
+              </a>
            }
          </div>
        }
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -705,6 +705,7 @@
 // ========== DEXAR REDESIGN 2026 STYLES ==========
 .dexar-home {
  width: 100%;
+  overflow-x: hidden;
 }

 // Hero Section
@@ -908,7 +909,7 @@

 // Categories Section
 .dexar-categories {
-  max-width: 1200px;
+  max-width: 1440px;
  margin: 50px auto;
  padding: 0 56px;
 }
@@ -950,74 +951,44 @@

 .dexar-categories-grid {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  animation: fadeIn 0.6s ease-in 0.3s both;
+  width: 100%;
 }

 .dexar-category-card {
-  background: white;
-  border-radius: 16px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 100%;
+  width: 100%;
  display: flex;
  flex-direction: column;
-  overflow: hidden;
-  position: relative;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, #497671 0%, #a7ceca 100%);
-    transform: scaleX(0);
-    transition: transform 0.3s ease;
-  }
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  &:hover {
-    transform: translateY(-8px);
-    box-shadow: 0 12px 32px rgba(73, 118, 113, 0.2);
+    transform: translateY(-4px);
    
-    &::before {
-      transform: scaleX(1);
+    .dexar-category-image {
+      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
+    }
+    
+    .dexar-category-info {
+      box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2);
    }
  }
 }

-.dexar-category-link {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  text-decoration: none;
-  color: inherit;
-  padding: 20px;
-  
-  h3 {
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: #1e3c38;
-    margin: 16px 0 0 0;
-    transition: color 0.3s ease;
-  }
-  
-  &:hover h3 {
-    color: #497671;
-  }
-}
-
-.dexar-category-media {
+.dexar-category-image {
  width: 100%;
-  height: 200px;
-  background: #f5f5f5;
-  border-radius: 12px;
+  aspect-ratio: 4 / 3;
+  border: 1px solid #d3dad9;
+  border-radius: 13px 13px 0 0;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
+  background: #f5f5f5;
+  position: relative;
  
  img {
    width: 100%;
@@ -1037,12 +1008,51 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 3rem;
+  font-size: 5rem;
  font-weight: 700;
  color: #497671;
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
 }

+.dexar-category-info {
+  width: 100%;
+  border: 1px solid #d3dad9;
+  border-top: none;
+  border-radius: 0 0 13px 13px;
+  padding: 12px 16px;
+  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+  background: #f5f3f9;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  transition: background 0.3s ease;
+}
+
+.dexar-category-name {
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 600;
+  font-size: clamp(14px, 1.4vw, 18px);
+  color: #1e3c38;
+  margin: 0;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: calc(2 * 1.3em);
+}
+
+.dexar-category-count {
+  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 600;
+  font-size: clamp(11px, 1vw, 13px);
+  color: #697777;
+  margin: 0;
+  line-height: 1.2;
+}
+
 // Responsive Design
@media (max-width: 1200px) {
  .dexar-hero {
@@ -1065,6 +1075,11 @@
  .dexar-categories {
    padding: 0 40px;
  }
+  
+  .dexar-categories-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+  }
 }

@media (max-width: 992px) {
@@ -1102,8 +1117,8 @@
  }
  
  .dexar-categories-grid {
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-    gap: 24px;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
  }
 }

@@ -1156,12 +1171,12 @@
  }
  
  .dexar-categories-grid {
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 20px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
  }
  
-  .dexar-category-media {
-    height: 160px;
+  .dexar-category-info {
+    padding: 10px 12px;
  }
 }

@@ -1189,12 +1204,20 @@
    font-size: 18px;
  }
  
+  .dexar-categories {
+    padding: 0 16px;
+  }
+  
  .dexar-categories-grid {
-    grid-template-columns: 1fr;
-    gap: 16px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  .dexar-category-info {
+    padding: 8px 10px;
  }
  
  .dexar-category-card:hover {
-    transform: translateY(-4px);
+    transform: translateY(-2px);
  }
 }
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, signal, computed, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router, RouterLink } from '@angular/router';
+import { forkJoin } from 'rxjs';
 import { ApiService } from '../../services';
 import { Category } from '../../models';
 import { environment } from '../../../environments/environment';
@@ -18,6 +19,7 @@ export class HomeComponent implements OnInit {
  brandName = environment.brandFullName;
  isnovo = environment.theme === 'novo';
  categories = signal<Category[]>([]);
+  itemCounts = signal<Map<number, number>>(new Map());
  loading = signal(true);
  error = signal<string | null>(null);
  
@@ -52,6 +54,7 @@ export class HomeComponent implements OnInit {
      next: (categories) => {
        this.categories.set(categories);
        this.loading.set(false);
+        this.loadItemCounts();
      },
      error: (err) => {
        this.error.set('Failed to load categories');
@@ -61,6 +64,31 @@ export class HomeComponent implements OnInit {
    });
  }

+  private loadItemCounts(): void {
+    const topLevel = this.topLevelCategories();
+    if (topLevel.length === 0) return;
+
+    const requests: Record<string, ReturnType<ApiService['getCategoryItems']>> = {};
+    topLevel.forEach(cat => {
+      requests[cat.categoryID.toString()] = this.apiService.getCategoryItems(cat.categoryID, 1000);
+    });
+
+    forkJoin(requests).subscribe({
+      next: (results) => {
+        const counts = new Map<number, number>();
+        Object.entries(results).forEach(([id, items]) => {
+          counts.set(Number(id), items.length);
+        });
+        this.itemCounts.set(counts);
+      },
+      error: (err) => console.error('Error loading item counts:', err)
+    });
+  }
+
+  getItemCount(categoryID: number): number {
+    return this.itemCounts().get(categoryID) || 0;
+  }
+
  getTopLevelCategories(): Category[] {
    return this.topLevelCategories();
  }
@@ -72,4 +100,28 @@ export class HomeComponent implements OnInit {
  navigateToSearch(): void {
    this.router.navigate(['/search']);
  }
+
+  scrollToCatalog(): void {
+    const target = document.getElementById('catalog');
+    if (!target) return;
+    
+    const targetY = target.getBoundingClientRect().top + window.scrollY;
+    const startY = window.scrollY;
+    const distance = targetY - startY;
+    const duration = 1200;
+    let start: number | null = null;
+
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+
+    const step = (timestamp: number) => {
+      if (!start) start = timestamp;
+      const elapsed = timestamp - start;
+      const progress = Math.min(elapsed / duration, 1);
+      window.scrollTo(0, startY + distance * easeInOutCubic(progress));
+      if (progress < 1) requestAnimationFrame(step);
+    };
+
+    requestAnimationFrame(step);
+  }
 }