fix(storefront): composition audit fixes for cart, catalog, product, compare, wishlist, static pages

- Replace hand-rolled loading/error/empty markup with shared app-skeleton, app-empty-state, and app-button across catalog, product details, cart, compare, wishlist, and the public static-page renderer - Fix hardcoded hex colors that bypassed theme CSS variables (catalog, product details), restoring multi-tenant theme correctness - Remove ~1100 lines of dead "alt" cart theme CSS (never applied by the template) from cart.component.scss, bringing it back under the 40kB build budget (89.49kB -> 59.39kB cart-component chunk) - Swap legacy global .btn/.btn-ghost/.btn-primary classes for app-button in compare and wishlist empty/toolbar actions
2026-07-23 10:37:06 +04:00
parent f261800159
commit 2e31e80e28
18 changed files with 202 additions and 1317 deletions
--- a/src/app/features/website/catalog/containers/catalog-container.component.html
+++ b/src/app/features/website/catalog/containers/catalog-container.component.html
@@ -39,12 +39,12 @@
  </header>

  @if (loading()) {
-    <section class="catalog-loading" [attr.aria-label]="'catalog.loading' | translate">
+    <section class="catalog-loading" [attr.aria-label]="'catalog.loading' | translate" aria-busy="true">
      @for (slot of skeletonSlots; track $index) {
        <div class="catalog-skeleton-card">
-          <div class="catalog-skeleton-image"></div>
-          <div class="catalog-skeleton-line catalog-skeleton-title"></div>
-          <div class="catalog-skeleton-line"></div>
+          <app-skeleton shape="rect" class="catalog-skeleton-image" height="auto" />
+          <app-skeleton shape="text" width="72%" height="18px" />
+          <app-skeleton shape="text" height="14px" />
        </div>
      }
    </section>
@@ -52,9 +52,12 @@

  @if (error()) {
    <section class="catalog-message catalog-message-error">
-      <h1>{{ 'catalog.errorTitle' | translate }}</h1>
-      <p>{{ error()! | translate }}</p>
-      <button type="button" (click)="retry()">{{ 'catalog.retry' | translate }}</button>
+      <app-empty-state [title]="'catalog.errorTitle' | translate" [description]="error()! | translate">
+        <span slot="icon" class="catalog-message-error__icon" aria-hidden="true">!</span>
+        <div slot="actions">
+          <app-button variant="primary" (click)="retry()">{{ 'catalog.retry' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </section>
  }

@@ -86,8 +89,7 @@
        <app-catalog-category-grid [categories]="categories()" (categorySelected)="selectCategory($event)" />
      } @else {
        <div class="catalog-message">
-          <h2>{{ 'catalog.emptyTitle' | translate }}</h2>
-          <p>{{ 'catalog.emptyCategories' | translate }}</p>
+          <app-empty-state [title]="'catalog.emptyTitle' | translate" [description]="'catalog.emptyCategories' | translate" />
        </div>
      }
    </section>
@@ -152,8 +154,7 @@

        @if (offlineState()) {
          <div class="catalog-message">
-            <h2>{{ 'catalog.offlineTitle' | translate }}</h2>
-            <p>{{ 'catalog.offlineMessage' | translate }}</p>
+            <app-empty-state [title]="'catalog.offlineTitle' | translate" [description]="'catalog.offlineMessage' | translate" />
          </div>
        } @else if (loadingProducts()) {
          <app-catalog-search-results
--- a/src/app/features/website/catalog/containers/catalog-container.component.scss
+++ b/src/app/features/website/catalog/containers/catalog-container.component.scss
@@ -2,7 +2,7 @@
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
-  color: #1e3c38;
+  color: var(--text-primary);
  overflow-x: hidden;
 }

@@ -44,7 +44,7 @@

 .catalog-root-link {
  width: fit-content;
-  color: #1e3c38;
+  color: var(--text-primary);
  font-size: var(--font-size-4xl, 2rem);
  font-weight: 900;
  text-decoration: none;
@@ -62,7 +62,7 @@
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
-  color: #697777;
+  color: var(--text-secondary);
  font-size: var(--font-size-md, 0.9375rem);

  a,
@@ -70,7 +70,7 @@
    border: 0;
    padding: 0;
    background: transparent;
-    color: #497671;
+    color: var(--primary-color);
    font: inherit;
    font-weight: var(--font-weight-bold, 700);
    text-decoration: none;
@@ -396,14 +396,14 @@

  h1 {
    margin: 0;
-    color: #1e3c38;
+    color: var(--text-primary);
    font-size: var(--font-size-4xl, 2rem);
    font-weight: 900;
  }

  p {
    margin: 0;
-    color: #697777;
+    color: var(--text-secondary);
    font-size: var(--font-size-lg, 1rem);
  }
 }
@@ -416,33 +416,17 @@

 .catalog-skeleton-card {
  min-height: 340px;
-  border: 1px solid #d3dad9;
+  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 13px);
  padding: 16px;
-  background: #f5f3f9;
-}
-
-.catalog-skeleton-image,
-.catalog-skeleton-line {
-  border-radius: 10px;
-  background: linear-gradient(90deg, #edf0ef 25%, #f8faf9 50%, #edf0ef 75%);
-  background-size: 200% 100%;
-  animation: catalog-shimmer 1.3s ease-in-out infinite;
+  background: var(--bg-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }

 .catalog-skeleton-image {
  aspect-ratio: 1 / 1;
-  margin-bottom: 16px;
-}
-
-.catalog-skeleton-line {
-  height: 14px;
-  margin-top: 12px;
-}
-
-.catalog-skeleton-title {
-  width: 72%;
-  height: 18px;
 }

 .catalog-inline-loading,
@@ -454,42 +438,26 @@
  justify-content: center;
  gap: 12px;
  text-align: center;
-  color: #697777;
-}
-
-.catalog-message {
-  h1,
-  h2 {
-    margin: 0;
-    color: #1e3c38;
-    font-size: var(--font-size-3xl, 1.5rem);
-  }
-
-  p {
-    margin: 0;
-    max-width: 420px;
-    line-height: 1.5;
-  }
-
-  button {
-    min-height: 42px;
-    padding: 0 22px;
-    border: 0;
-    border-radius: var(--radius-lg, 13px);
-    background: #497671;
-    color: #fff;
-    font-weight: 800;
-    cursor: pointer;
-  }
+  color: var(--text-secondary);
 }

 .catalog-message-error {
-  color: #991b1b;
+  ::ng-deep .app-empty-state__title {
+    color: var(--error-color);
+  }
 }

-@keyframes catalog-shimmer {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+.catalog-message-error__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--error-color) 14%, transparent);
+  color: var(--error-color);
+  font-weight: 800;
+  font-size: var(--font-size-xl, 1.125rem);
 }

@keyframes catalog-sheet-in {
--- a/src/app/features/website/catalog/containers/catalog-container.component.ts
+++ b/src/app/features/website/catalog/containers/catalog-container.component.ts
@@ -28,6 +28,9 @@ import { CatalogLayoutSwitcherComponent } from '../components/layout-switcher/la
 import { CatalogSearchBoxComponent } from '../components/search-box/search-box.component';
 import { CatalogSearchResultsComponent } from '../components/search-results/search-results.component';
 import { CatalogSortingControlComponent } from '../components/sorting-control/sorting-control.component';
+import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
+import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
 import { CatalogState, createInitialCatalogState } from '../models/catalog-state.model';
 import { ProductShareService } from '../../user-experience/services/product-share.service';
 import { UserNotificationService } from '../../user-experience/services/user-notification.service';
@@ -48,7 +51,10 @@ type CatalogLoadingStrategy = 'pagination' | 'loadMore' | 'infiniteScroll';
    CatalogSortingControlComponent,
    CatalogLayoutSwitcherComponent,
    CatalogSearchResultsComponent,
-    CatalogCategoryGridComponent
+    CatalogCategoryGridComponent,
+    EmptyStateComponent,
+    SkeletonComponent,
+    ButtonComponent
  ],
  templateUrl: './catalog-container.component.html',
  styleUrls: ['./catalog-container.component.scss'],
--- a/src/app/features/website/product/containers/product-details-container.component.html
+++ b/src/app/features/website/product/containers/product-details-container.component.html
@@ -1,24 +1,36 @@
 <main class="product-details-page">
  @if (loading()) {
-    <section class="product-details-loading" role="status" aria-live="polite">
-      <div class="product-details-spinner"></div>
-      <p>{{ 'productDetails.loading' | translate }}</p>
+    <section class="product-details-loading" role="status" aria-live="polite" aria-busy="true">
+      <div class="product-details-loading-layout">
+        <app-skeleton shape="rect" class="product-details-loading-gallery" />
+        <div class="product-details-loading-main">
+          <app-skeleton shape="text" width="60%" height="28px" />
+          <app-skeleton shape="text" width="30%" height="20px" />
+          <app-skeleton shape="rect" height="120px" />
+          <app-skeleton shape="rect" height="44px" />
+        </div>
+      </div>
+      <span class="sr-only">{{ 'productDetails.loading' | translate }}</span>
    </section>
  }

  @if (error()) {
    <section class="product-details-message error" role="alert">
-      <h1>{{ 'productDetails.errorTitle' | translate }}</h1>
-      <p>{{ error()! | translate }}</p>
-      <button type="button" (click)="retry()">{{ 'productDetails.retry' | translate }}</button>
+      <app-empty-state [title]="'productDetails.errorTitle' | translate" [description]="error()! | translate">
+        <div slot="actions">
+          <app-button variant="primary" (click)="retry()">{{ 'productDetails.retry' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </section>
  }

  @if (missing() && !loading() && !error()) {
    <section class="product-details-message">
-      <h1>{{ 'productDetails.missingTitle' | translate }}</h1>
-      <p>{{ 'productDetails.missingDescription' | translate }}</p>
-      <a [routerLink]="'/catalog' | langRoute">{{ 'productDetails.backToCatalog' | translate }}</a>
+      <app-empty-state [title]="'productDetails.missingTitle' | translate" [description]="'productDetails.missingDescription' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'productDetails.backToCatalog' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </section>
  }

--- a/src/app/features/website/product/containers/product-details-container.component.scss
+++ b/src/app/features/website/product/containers/product-details-container.component.scss
@@ -35,58 +35,51 @@
  gap: 16px;
 }

-.product-details-loading,
+.product-details-loading {
+  min-height: 420px;
+}
+
 .product-details-message {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  gap: 14px;
-  text-align: center;
-  color: #697777;
-
-  h1 {
-    margin: 0;
-    color: #1e3c38;
-  }
-
-  p {
-    margin: 0;
-    max-width: 420px;
-  }
-
-  button,
-  a {
-    min-height: 42px;
-    padding: 0 22px;
-    border: 0;
-    border-radius: var(--radius-lg, 13px);
-    background: #497671;
-    color: #fff;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    font-weight: 800;
-    cursor: pointer;
-  }
 }

 .product-details-message.error {
-  color: #991b1b;
+  ::ng-deep .app-empty-state__title {
+    color: var(--error-color);
+  }
 }

-.product-details-spinner {
-  width: 46px;
-  height: 46px;
-  border: 4px solid #d3dad9;
-  border-top-color: #497671;
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
+.product-details-loading-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1fr);
+  gap: 28px;
+  align-items: start;
 }

-@keyframes spin {
-  to { transform: rotate(360deg); }
+.product-details-loading-gallery {
+  aspect-ratio: 1 / 1;
+}
+
+.product-details-loading-main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }

@media (max-width: 860px) {
@@ -95,7 +88,8 @@
    gap: 24px;
  }

-  .product-details-layout {
+  .product-details-layout,
+  .product-details-loading-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
--- a/src/app/features/website/product/containers/product-details-container.component.ts
+++ b/src/app/features/website/product/containers/product-details-container.component.ts
@@ -28,6 +28,9 @@ import { ProductVariantSelectorComponent, VariantOptionGroup } from '../componen
 import { ProductTabItem, ProductTabKey, ProductTabsComponent } from '../engagement/components/product-tabs/product-tabs.component';
 import { QuestionListComponent } from '../engagement/components/question-list/question-list.component';
 import { ReviewListComponent } from '../engagement/components/review-list/review-list.component';
+import { EmptyStateComponent } from '../../../../shared/ui/empty-state/empty-state.component';
+import { SkeletonComponent } from '../../../../shared/ui/skeleton/skeleton.component';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';

@Component({
  selector: 'app-product-details-container',
@@ -48,6 +51,9 @@ import { ReviewListComponent } from '../engagement/components/review-list/review
    ReviewListComponent,
    QuestionListComponent,
    RelatedProductsComponent,
+    EmptyStateComponent,
+    SkeletonComponent,
+    ButtonComponent,
  ],
  templateUrl: './product-details-container.component.html',
  styleUrls: ['./product-details-container.component.scss'],
--- a/src/app/features/website/user-experience/compare/containers/compare-page.component.html
+++ b/src/app/features/website/user-experience/compare/containers/compare-page.component.html
@@ -6,7 +6,7 @@
    </div>

    @if (hasItems()) {
-      <button type="button" class="btn btn-ghost" (click)="clear()">{{ 'ux.clearCompare' | translate }}</button>
+      <app-button variant="ghost" (click)="clear()">{{ 'ux.clearCompare' | translate }}</app-button>
    }
  </header>

@@ -38,9 +38,11 @@
      [highlightDifferences]="highlightDifferences()" />
  } @else {
    <section class="compare-empty card">
-      <h2>{{ 'ux.compareEmptyTitle' | translate }}</h2>
-      <p>{{ 'ux.compareEmptyDescription' | translate }}</p>
-      <a [routerLink]="'/catalog' | langRoute" class="btn btn-primary">{{ 'ux.goToCatalog' | translate }}</a>
+      <app-empty-state [title]="'ux.compareEmptyTitle' | translate" [description]="'ux.compareEmptyDescription' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'ux.goToCatalog' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </section>
  }
 </main>
--- a/src/app/features/website/user-experience/compare/containers/compare-page.component.scss
+++ b/src/app/features/website/user-experience/compare/containers/compare-page.component.scss
@@ -67,18 +67,7 @@

 .compare-empty {
  min-height: 220px;
-  display: grid;
-  place-content: center;
-  gap: 8px;
-  text-align: center;
-  padding: 24px;
-}
-
-.compare-empty h2,
-.compare-empty p {
-  margin: 0;
-}
-
-.compare-empty p {
-  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
--- a/src/app/features/website/user-experience/compare/containers/compare-page.component.ts
+++ b/src/app/features/website/user-experience/compare/containers/compare-page.component.ts
@@ -7,11 +7,13 @@ import { TranslatePipe } from '../../../../../i18n/translate.pipe';
 import { LangRoutePipe } from '../../../../../pipes/lang-route.pipe';
 import { DEFAULT_USER_EXPERIENCE_CONFIG } from '../../../../../shared/models/config';
 import { CompareTableComponent } from '../components/compare-table.component';
+import { EmptyStateComponent } from '../../../../../shared/ui/empty-state/empty-state.component';
+import { ButtonComponent } from '../../../../../shared/ui/button/button.component';

@Component({
  selector: 'app-compare-page',
  standalone: true,
-  imports: [RouterLink, TranslatePipe, LangRoutePipe, CompareTableComponent],
+  imports: [RouterLink, TranslatePipe, LangRoutePipe, CompareTableComponent, EmptyStateComponent, ButtonComponent],
  templateUrl: './compare-page.component.html',
  styleUrls: ['./compare-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
--- a/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.html
+++ b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.html
@@ -5,7 +5,7 @@
      <p>{{ favorites().length }} {{ 'ux.items' | translate }}</p>
    </div>
    @if (hasItems()) {
-      <button type="button" class="btn btn-ghost" (click)="clearWishlist()">{{ 'ux.clearWishlist' | translate }}</button>
+      <app-button variant="ghost" (click)="clearWishlist()">{{ 'ux.clearWishlist' | translate }}</app-button>
    }
  </header>

@@ -27,9 +27,11 @@
    </section>
  } @else {
    <section class="wishlist-empty card">
-      <h2>{{ 'ux.wishlistEmptyTitle' | translate }}</h2>
-      <p>{{ 'ux.wishlistEmptyDescription' | translate }}</p>
-      <a [routerLink]="'/catalog' | langRoute" class="btn btn-primary">{{ 'ux.goToCatalog' | translate }}</a>
+      <app-empty-state [title]="'ux.wishlistEmptyTitle' | translate" [description]="'ux.wishlistEmptyDescription' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/catalog' | langRoute">{{ 'ux.goToCatalog' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </section>
  }
 </main>
--- a/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.scss
+++ b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.scss
@@ -30,18 +30,7 @@

 .wishlist-empty {
  min-height: 220px;
-  display: grid;
-  place-content: center;
-  gap: 8px;
-  text-align: center;
-  padding: 24px;
-}
-
-.wishlist-empty h2,
-.wishlist-empty p {
-  margin: 0;
-}
-
-.wishlist-empty p {
-  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
--- a/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.ts
+++ b/src/app/features/website/user-experience/wishlist/containers/wishlist-page.component.ts
@@ -7,11 +7,13 @@ import { TranslateService } from '../../../../../i18n/translate.service';
 import { LangRoutePipe } from '../../../../../pipes/lang-route.pipe';
 import { CartService } from '../../../../../services';
 import { UserNotificationService } from '../../services/user-notification.service';
+import { EmptyStateComponent } from '../../../../../shared/ui/empty-state/empty-state.component';
+import { ButtonComponent } from '../../../../../shared/ui/button/button.component';

@Component({
  selector: 'app-wishlist-page',
  standalone: true,
-  imports: [RouterLink, ProductCardComponent, TranslatePipe, LangRoutePipe],
+  imports: [RouterLink, ProductCardComponent, TranslatePipe, LangRoutePipe, EmptyStateComponent, ButtonComponent],
  templateUrl: './wishlist-page.component.html',
  styleUrls: ['./wishlist-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
--- a/src/app/pages/cart/cart.component.html
+++ b/src/app/pages/cart/cart.component.html
@@ -11,12 +11,12 @@

  @if (itemCount() === 0) {
    <div class="empty-cart">
-      <div class="empty-icon">
-        <app-icon name="cart" [size]="64" />
-      </div>
-      <h2>{{ 'cart.empty' | translate }}</h2>
-      <p>{{ 'cart.emptyDesc' | translate }}</p>
-      <a [routerLink]="'/' | langRoute" class="shop-btn">{{ 'cart.goShopping' | translate }}</a>
+      <app-empty-state [title]="'cart.empty' | translate" [description]="'cart.emptyDesc' | translate">
+        <app-icon slot="icon" name="cart" [size]="64" />
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="'/' | langRoute">{{ 'cart.goShopping' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </div>
  }

--- a/src/app/pages/cart/cart.component.scss
+++ b/src/app/pages/cart/cart.component.scss
--- a/src/app/pages/cart/cart.component.ts
+++ b/src/app/pages/cart/cart.component.ts
@@ -15,6 +15,8 @@ import { TranslatePipe } from '../../i18n/translate.pipe';
 import { TranslateService } from '../../i18n/translate.service';
 import { PAYMENT_POLL_INTERVAL_MS, PAYMENT_MIN_POLL_SECONDS, PAYMENT_TIMEOUT_CLOSE_MS, LINK_COPIED_DURATION_MS } from '../../config/constants';
 import { IconComponent } from '../../shared/ui/icon/icon.component';
+import { EmptyStateComponent } from '../../shared/ui/empty-state/empty-state.component';
+import { ButtonComponent } from '../../shared/ui/button/button.component';
 import { ConfigService } from '../../core/config/config.service';
 import { TenantResolverService } from '../../core/config/tenant-resolver.service';

@@ -22,7 +24,7 @@ type PaymentMethod = 'qr' | 'card';

@Component({
  selector: 'app-cart',
-  imports: [DecimalPipe, RouterLink, FormsModule, DeliverySelectorComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe, IconComponent],
+  imports: [DecimalPipe, RouterLink, FormsModule, DeliverySelectorComponent, TelegramLoginComponent, LangRoutePipe, TranslatePipe, IconComponent, EmptyStateComponent, ButtonComponent],
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
--- a/src/app/pages/static-page/static-page.component.html
+++ b/src/app/pages/static-page/static-page.component.html
@@ -1,11 +1,18 @@
 <main class="static-page page-container" [attr.dir]="dir()">
  @if (loading()) {
-    <section class="static-page__state" role="status" aria-live="polite">{{ 'app.connecting' | translate }}</section>
+    <section class="static-page__state" role="status" aria-live="polite" aria-busy="true">
+      <app-skeleton shape="text" width="40%" height="28px" />
+      <app-skeleton shape="text" height="16px" />
+      <app-skeleton shape="text" height="16px" />
+      <app-skeleton shape="text" width="70%" height="16px" />
+    </section>
  } @else if (notFound()) {
    <section class="static-page__state">
-      <h1>404</h1>
-      <p>{{ 'staticPages.notFound' | translate }}</p>
-      <a [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</a>
+      <app-empty-state title="404" [description]="'staticPages.notFound' | translate">
+        <div slot="actions">
+          <app-button variant="primary" [routerLink]="homeRoute()">{{ 'staticPages.backHome' | translate }}</app-button>
+        </div>
+      </app-empty-state>
    </section>
  } @else {
    <article class="static-page__content">
--- a/src/app/pages/static-page/static-page.component.scss
+++ b/src/app/pages/static-page/static-page.component.scss
@@ -3,24 +3,9 @@
 }

 .static-page__state {
-  text-align: center;
  padding: 2rem 0;
-  color: var(--text-secondary, #667a77);
-
-  h1 {
-    margin-bottom: 0.5rem;
-    color: var(--text-primary, #1e3c38);
-  }
-
-  a {
-    color: var(--primary-color, #497671);
-    text-decoration: none;
-
-    &:focus-visible {
-      outline: 2px solid var(--primary-color, #497671);
-      outline-offset: 2px;
-    }
-  }
+  display: grid;
+  gap: 0.75rem;
 }

 .static-page__content {
--- a/src/app/pages/static-page/static-page.component.ts
+++ b/src/app/pages/static-page/static-page.component.ts
@@ -6,11 +6,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { StaticPageResolverService } from '../../core/config/static-page-resolver.service';
 import { LanguageService } from '../../services/language.service';
 import { TranslatePipe } from '../../i18n/translate.pipe';
+import { EmptyStateComponent } from '../../shared/ui/empty-state/empty-state.component';
+import { SkeletonComponent } from '../../shared/ui/skeleton/skeleton.component';
+import { ButtonComponent } from '../../shared/ui/button/button.component';

@Component({
  selector: 'app-static-page',
  standalone: true,
-  imports: [CommonModule, RouterLink, TranslatePipe],
+  imports: [CommonModule, RouterLink, TranslatePipe, EmptyStateComponent, SkeletonComponent, ButtonComponent],
  templateUrl: './static-page.component.html',
  styleUrls: ['./static-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush