From ee1cbdf38b19adc0c49cc2b5a7d97bfa7bb04f3d Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Thu, 16 Jul 2026 23:32:31 +0400
Subject: [PATCH] style(ui): full UX/UI + motion pass across storefront, admin,
 editor

- fix save-bar buttons to use shared app-button primitive (were unstyled)
- fix platform-nav-group border/radius via structural selectors, drop dead
  -middle/-right classes
- storefront widgets (hero/categories/product-carousel/footer-nav): design
  tokens, hover/focus states, 44px touch targets, entrance motion, reduced-
  motion guards
- admin dashboard cards + quick-actions: hover lift, entrance animation
- admin product-form gallery remove badge: hover/focus + expanded hit area
- project-editor section.shared button styles: hover/active/focus/disabled
  states + reduced-motion; section-switch fade-in motion

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 docs/KNOWN-ISSUES.md                          | 67 ++++++++++++++++--
 .../components/header/header.component.html   |  8 +--
 .../components/header/header.component.scss   | 34 ++++-----
 .../admin-dashboard-card.component.scss       | 24 +++++++
 ...min-dashboard-quick-actions.component.scss | 18 ++++-
 .../admin-product-form.component.scss         | 30 +++++++-
 .../project-editor-save-bar.component.html    |  8 +--
 .../project-editor-save-bar.component.scss    | 10 ++-
 .../project-editor-save-bar.component.ts      |  3 +-
 .../pages/project-editor-page.component.scss  | 38 ++++++++++
 .../sections/section.shared.scss              | 46 ++++++++++++
 .../widgets/ui/categories-widget.component.ts | 12 +++-
 .../ui/footer-navigation-widget.component.ts  | 29 +++++++-
 src/app/widgets/ui/hero-widget.component.ts   | 70 +++++++++++++++++--
 .../ui/product-carousel-widget.component.ts   | 12 +++-
 15 files changed, 358 insertions(+), 51 deletions(-)

diff --git a/docs/KNOWN-ISSUES.md b/docs/KNOWN-ISSUES.md
index 1609449..0c803fe 100644
--- a/docs/KNOWN-ISSUES.md
+++ b/docs/KNOWN-ISSUES.md
@@ -6,7 +6,14 @@ don't fix inline unless asked.
 
 ## Open
 
-1. **~179 untranslated raw i18n keys across the entire admin backoffice CRUD
+1. **Homepage hero-to-categories dead space gap on the storefront home
+   page.** Traces to bootstrap mock config (widget/section padding values
+   in the dev bootstrap fixture), not a code defect in
+   `dynamic-page-layout.component.ts` or the widget components - not fixed
+   this session, needs config-side investigation if it reproduces with
+   real tenant data rather than mock config.
+
+2. **~179 untranslated raw i18n keys across the entire admin backoffice CRUD
    UI (products/categories/orders/transactions/users/monitoring/analytics).**
    `translations.ts`/`en.ts`/`ru.ts`/`hy.ts` have no `adminProducts.*`,
    `adminCategories.*`, `adminOrders.*`, `adminTransactions.*`,
@@ -40,7 +47,59 @@ don't fix inline unless asked.
 
 ## Fixed
 
-1. **Project Editor footer: payment icons and social links had no validation.**
+1. **Full-project UX/UI + motion pass across storefront, admin dashboard,
+   admin CRUD, and project-editor.**
+   User asked (2026-07-16) for a full UX/UI audit across admin, dashboard,
+   and storefront, sequenced: storefront -> admin dashboard -> admin CRUD ->
+   project-editor. All 4 phases completed:
+   - Fixed: `project-editor-save-bar` buttons were plain unstyled `<button>`s
+     (`project-editor-save-bar.component.html/.scss`) - now use the shared
+     `app-button` primitive.
+   - Fixed: `.platform-nav-group` (`header.component.html/.scss`) applied
+     `platform-nav-btn-left` to every nav button regardless of position,
+     causing double borders and wrong end-radius; replaced with
+     `:first-child`/`:last-child`/`:not(:first-child)` structural selectors,
+     dropped the dead `-middle`/`-right` classes.
+   - Polished: storefront widgets used on every page -
+     `hero-widget.component.ts`, `categories-widget.component.ts`,
+     `product-carousel-widget.component.ts`,
+     `footer-navigation-widget.component.ts` - added design tokens, hover/
+     focus states, 44px touch targets, entrance motion, all gated behind
+     `prefers-reduced-motion`.
+   - Polished: `admin-dashboard-card.component.scss` and
+     `admin-dashboard-quick-actions.component.scss` - hover lift, entrance
+     animation, reduced-motion guard.
+   - Audited: admin backoffice CRUD (products/categories/orders/users/
+     transactions/monitoring/analytics) - already consistently built on the
+     shared `app-button`/`app-table`/`app-badge`/`app-empty-state`/
+     `app-pagination` primitives from earlier sprints; grepped all 7 areas
+     for raw unstyled `<button>`s (the save-bar bug pattern) and found only
+     one: the gallery-image remove badge in
+     `admin-product-form.component.scss` (`.gallery-item button`) had no
+     hover/focus state and a 20x20px hit area below the 44px touch-target
+     minimum - fixed with hover/focus-visible states and an invisible
+     `::before` inset to expand the hit area without changing the visual
+     badge size.
+   - Fixed: `section.shared.scss` (used by all 11 project-editor sections)
+     had a bare `button`/`button.secondary` style with zero hover, focus, or
+     transition - added hover/active/focus-visible/disabled states plus
+     `prefers-reduced-motion` guard, applied uniformly across every section.
+   - Added: `project-editor-page.component.scss` `.project-editor-stack > *`
+     now fades/slides in (220ms) whenever `@switch` swaps the active
+     section component; `.project-editor-section-actions button` (reset
+     section) got the same hover/focus treatment as the rest of the shared
+     button styles.
+   - Verified: `tsc --noEmit` clean after every batch of edits; live-checked
+     in browser at each phase (homepage nav-group render, save-bar render,
+     dashboard cards, project-editor section switch + reset button).
+   - One dev-server crash occurred mid-session (unrelated pre-existing
+     `ng serve` process died independently of these edits, confirmed via
+     `curl` connection-refused before restart) - restarted via
+     `npm run dexar`, not a regression from this work.
+   - See item 1 below (homepage dead-space gap) for the one issue found
+     but not fixed (config data, not code).
+
+2. **Project Editor footer: payment icons and social links had no validation.**
    `footer-section.component.ts` parsed both fields from pipe-delimited
    `<textarea>` strings (`icon.src|icon.alt`, `link.id|link.label|link.url`)
    with zero validation - malformed rows silently produced empty `src`/`alt`/
@@ -51,7 +110,7 @@ don't fix inline unless asked.
      pattern used in `project-validator.service.ts`) and a missing footer-logo
      media picker.
 
-2. **Project Editor navigation: nav link labels only editable for the default locale.**
+3. **Project Editor navigation: nav link labels only editable for the default locale.**
    `navigation-section.component.ts`'s `labelOf` helper (and the facade's
    `updateNavLinkLabel`) always read/wrote the default locale's key on a
    `NavigationLocalizedText` label map, so switching locales elsewhere in the
@@ -63,7 +122,7 @@ don't fix inline unless asked.
      gained an optional `locale` parameter (defaults to the current default
      locale, so existing callers are unaffected).
 
-3. **Quick Actions: 3 untranslated raw i18n keys.**
+4. **Quick Actions: 3 untranslated raw i18n keys.**
    `dashboard.actionUsers`, `dashboard.actionMonitoring`,
    `dashboard.actionAnalytics` rendered as literal key strings instead of
    translated labels on the admin dashboard's Quick Actions section, because
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index 6a9491c..cf3d390 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -11,17 +11,17 @@
       <!-- Navigation Buttons (desktop) -->
       <nav class="platform-nav">
         <div class="platform-nav-group">
-          <a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}" 
-             (click)="closeMenu()" class="platform-nav-btn platform-nav-btn-left">
+          <a [routerLink]="'/' | langRoute" routerLinkActive="platform-active" [routerLinkActiveOptions]="{exact: true}"
+             (click)="closeMenu()" class="platform-nav-btn">
             {{ 'header.home' | translate }}
           </a>
           @if (headerConfig().showCategories) {
-            <button type="button" (click)="navigateToCatalog()" class="platform-nav-btn platform-nav-btn-left">
+            <button type="button" (click)="navigateToCatalog()" class="platform-nav-btn">
               {{ 'header.catalog' | translate }}
             </button>
           }
           @for (page of headerPages(); track page.id) {
-            <button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn platform-nav-btn-left">
+            <button type="button" (click)="navigateToStatic(page.route)" class="platform-nav-btn">
               {{ page.title }}
             </button>
           }
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index ac8a016..636d6d1 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -553,34 +553,30 @@
   cursor: pointer;
   transition: background 0.3s ease;
   white-space: nowrap;
-  
+
+  &:not(:first-child) {
+    border-left: none;
+  }
+
+  &:first-child {
+    border-radius: 10px 0 0 10px;
+  }
+
+  &:last-child {
+    border-radius: 0 10px 10px 0;
+  }
+
   &:hover {
     background: #a1b4b5;
     color: #1e3c38;
   }
-  
+
   &.platform-active {
     background: #497671;
     color: #ffffff;
   }
 }
 
-.platform-nav-btn-left {
-  border-radius: 10px 0 0 10px;
-  padding: 6px 32px;
-}
-
-.platform-nav-btn-middle {
-  padding: 6px 40px;
-  border-left: none;
-}
-
-.platform-nav-btn-right {
-  border-radius: 0 10px 10px 0;
-  padding: 6px 28px;
-  border-left: none;
-}
-
 // Search Box
 .platform-search-wrapper {
   flex: 1;
@@ -975,7 +971,7 @@
     height: 32px;
   }
 
-  // Mobile Menu Backdrop — full-screen, blurred, blocks interaction
+  // Mobile Menu Backdrop � full-screen, blurred, blocks interaction
   .platform-menu-backdrop {
     display: block;
     position: fixed;
diff --git a/src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss b/src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss
index 9e91bc5..ec49bac 100644
--- a/src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss
+++ b/src/app/features/admin/dashboard/components/admin-dashboard-card.component.scss
@@ -8,6 +8,30 @@
   background: var(--bg-primary, #fff);
   box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
   min-height: 108px;
+  transition: box-shadow var(--transition-normal, 180ms ease), border-color var(--transition-normal, 180ms ease), transform var(--transition-normal, 180ms ease);
+  animation: dashboard-card-in 320ms ease-out both;
+}
+
+.dashboard-card:hover {
+  border-color: var(--primary-color, #497671);
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
+  transform: translateY(-2px);
+}
+
+@keyframes dashboard-card-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-card {
+    animation: none;
+    transition: none;
+  }
+
+  .dashboard-card:hover {
+    transform: none;
+  }
 }
 
 .dashboard-card--error {
diff --git a/src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss b/src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss
index 057bebd..acb9f27 100644
--- a/src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss
+++ b/src/app/features/admin/dashboard/components/admin-dashboard-quick-actions.component.scss
@@ -25,13 +25,29 @@
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }
 
 .dashboard-quick-actions__item:hover,
 .dashboard-quick-actions__item:focus-visible {
   border-color: var(--primary-color, #497671);
   box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  transform: translateY(-2px);
+}
+
+.dashboard-quick-actions__item:active {
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dashboard-quick-actions__item {
+    transition: none;
+  }
+
+  .dashboard-quick-actions__item:hover,
+  .dashboard-quick-actions__item:focus-visible {
+    transform: none;
+  }
 }
 
 @media (max-width: 960px) {
diff --git a/src/app/features/admin/products/components/admin-product-form.component.scss b/src/app/features/admin/products/components/admin-product-form.component.scss
index cab8ce4..99d9389 100644
--- a/src/app/features/admin/products/components/admin-product-form.component.scss
+++ b/src/app/features/admin/products/components/admin-product-form.component.scss
@@ -14,7 +14,35 @@ input[type='checkbox'] { width: auto; }
 .gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
 .gallery-item { position: relative; width: 64px; height: 64px; }
 .gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color, #d3dad9); }
-.gallery-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: #d9433c; color: #fff; cursor: pointer; }
+.gallery-item button {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: none;
+  background: #d9433c;
+  color: #fff;
+  cursor: pointer;
+  transition: transform var(--transition-fast, 120ms ease), background-color var(--transition-fast, 120ms ease);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -12px;
+  }
+
+  &:hover {
+    background: #b8352f;
+    transform: scale(1.1);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #d9433c;
+    outline-offset: 2px;
+  }
+}
 .related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 .price-preview { font-weight: 600; }
 .actions { display: flex; justify-content: flex-end; }
diff --git a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
index e323b01..e0b45ec 100644
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.html
@@ -2,7 +2,7 @@
   @if (draftRestored()) {
     <div class="project-editor-save-bar-notice">
       <span>{{ 'builder.draftRestored' | translate }}</span>
-      <button type="button" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</button>
+      <app-button variant="ghost" size="sm" (click)="dismissDraftRestoredNotice()">{{ 'builder.dismiss' | translate }}</app-button>
     </div>
   }
   <div class="project-editor-save-bar-status">
@@ -21,8 +21,8 @@
     }
   </div>
   <div class="project-editor-save-bar-actions">
-    <button type="button" class="project-editor-save-bar-reset" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</button>
-    <button type="button" (click)="save()">{{ 'builder.save' | translate }}</button>
-    <button type="button" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</button>
+    <app-button variant="danger" size="sm" (click)="resetDraft()">{{ 'builder.resetDraft' | translate }}</app-button>
+    <app-button variant="secondary" size="sm" (click)="save()">{{ 'builder.save' | translate }}</app-button>
+    <app-button variant="primary" size="sm" [disabled]="issues().length > 0" (click)="publish()">{{ 'builder.publish' | translate }}</app-button>
   </div>
 </div>
diff --git a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss
index dca6f03..c00ed90 100644
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.scss
@@ -22,8 +22,10 @@
   color: var(--danger, #b91c1c);
 }
 
-.project-editor-save-bar-actions button + button {
-  margin-left: 0.5rem;
+.project-editor-save-bar-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .project-editor-save-bar-saved-at {
@@ -45,7 +47,3 @@
   color: var(--info, #1d4ed8);
   border-bottom: 1px solid var(--border, #ddd);
 }
-
-.project-editor-save-bar-reset {
-  color: var(--danger, #b91c1c);
-}
diff --git a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts
index e4ed5f8..0f8e156 100644
--- a/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts
+++ b/src/app/features/project-editor/components/save-bar/project-editor-save-bar.component.ts
@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { TranslatePipe } from '../../../../i18n/translate.pipe';
 import { TranslateService } from '../../../../i18n/translate.service';
 import { ProjectEditorFacade } from '../../facade/project-editor.facade';
+import { ButtonComponent } from '../../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-project-editor-save-bar',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, ButtonComponent],
   templateUrl: './project-editor-save-bar.component.html',
   styleUrls: ['./project-editor-save-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/pages/project-editor-page.component.scss b/src/app/features/project-editor/pages/project-editor-page.component.scss
index 9d713c7..db606c7 100644
--- a/src/app/features/project-editor/pages/project-editor-page.component.scss
+++ b/src/app/features/project-editor/pages/project-editor-page.component.scss
@@ -23,6 +23,27 @@
 .project-editor-stack {
   display: grid;
   gap: 16px;
+
+  > * {
+    animation: project-editor-section-in 220ms ease-out both;
+  }
+}
+
+@keyframes project-editor-section-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-stack > * {
+    animation: none;
+  }
 }
 
 .project-editor-section-actions {
@@ -37,6 +58,23 @@
   border-radius: 8px;
   padding: 6px 12px;
   cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease), border-color var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: rgba(185, 28, 28, 0.08);
+    border-color: #b91c1c;
+  }
+
+  &:focus-visible {
+    outline: 2px solid #b91c1c;
+    outline-offset: 2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .project-editor-section-actions button {
+    transition: none;
+  }
 }
 
 .project-editor-empty {
diff --git a/src/app/features/project-editor/sections/section.shared.scss b/src/app/features/project-editor/sections/section.shared.scss
index 4a4afaa..34fd465 100644
--- a/src/app/features/project-editor/sections/section.shared.scss
+++ b/src/app/features/project-editor/sections/section.shared.scss
@@ -111,12 +111,58 @@ button {
   padding: 0 14px;
   font-weight: 700;
   cursor: pointer;
+  transition: background-color var(--transition-fast, 120ms ease),
+    border-color var(--transition-fast, 120ms ease),
+    transform var(--transition-fast, 120ms ease),
+    box-shadow var(--transition-fast, 120ms ease);
+
+  &:hover {
+    background: var(--primary-hover, #3d635f);
+    border-color: var(--primary-hover, #3d635f);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #497671;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: none;
+    box-shadow: none;
+  }
 }
 
 button.secondary {
   background: #fff;
   color: #1e3c38;
   border-color: var(--border-color, #d3dad9);
+
+  &:hover {
+    background: var(--bg-secondary, #f5f5f5);
+    border-color: #497671;
+  }
+
+  &:focus-visible {
+    outline-color: #497671;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+
+    &:hover {
+      transform: none;
+    }
+  }
 }
 
 .editor-error {
diff --git a/src/app/widgets/ui/categories-widget.component.ts b/src/app/widgets/ui/categories-widget.component.ts
index ec59878..bcb5d92 100644
--- a/src/app/widgets/ui/categories-widget.component.ts
+++ b/src/app/widgets/ui/categories-widget.component.ts
@@ -12,7 +12,7 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
     <section class="categories-widget">
       @if (data; as widgetData) {
         @if (widgetData.title) {
-          <h2>{{ widgetData.title }}</h2>
+          <h2 class="categories-widget__title">{{ widgetData.title }}</h2>
         }
 
         @if (widgetData.categories.length) {
@@ -28,7 +28,15 @@ import { CategoriesWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .categories-widget { display: grid; gap: 1rem; }
+      .categories-widget { display: grid; gap: var(--space-lg, 24px); }
+
+      .categories-widget__title {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+      }
+
       .categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],
diff --git a/src/app/widgets/ui/footer-navigation-widget.component.ts b/src/app/widgets/ui/footer-navigation-widget.component.ts
index 549ebb1..20cff47 100644
--- a/src/app/widgets/ui/footer-navigation-widget.component.ts
+++ b/src/app/widgets/ui/footer-navigation-widget.component.ts
@@ -28,9 +28,32 @@ export interface FooterNavigationLink {
   `,
   styles: [
     `
-      .footer-nav-widget { padding: 1rem; border-top: 1px solid var(--border-color, #d3dad9); }
-      ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
-      button { background: transparent; border: none; color: var(--text-secondary, #667a77); cursor: pointer; }
+      .footer-nav-widget { padding: 1rem 0; border-top: 1px solid var(--border-color, #d3dad9); }
+      ul { display: flex; gap: var(--space-sm, 8px); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        min-height: 44px;
+        padding: 0.5rem 0.75rem;
+        border: none;
+        border-radius: var(--radius-md, 12px);
+        background: transparent;
+        color: var(--text-secondary, #667a77);
+        font: inherit;
+        cursor: pointer;
+        transition: background-color var(--transition-fast, 120ms ease), color var(--transition-fast, 120ms ease);
+      }
+
+      button:hover {
+        background: var(--bg-secondary, #f5f5f5);
+        color: var(--primary-color, #497671);
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--primary-color, #497671);
+        outline-offset: 2px;
+      }
     `
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/widgets/ui/hero-widget.component.ts b/src/app/widgets/ui/hero-widget.component.ts
index e3bdc4e..dbeb646 100644
--- a/src/app/widgets/ui/hero-widget.component.ts
+++ b/src/app/widgets/ui/hero-widget.component.ts
@@ -22,10 +22,72 @@ import { HeroWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .hero-widget { padding: 2rem; border-radius: var(--radius-lg, 16px); background: var(--bg-secondary, #f5f5f5); }
-      .hero-widget__title { margin: 0 0 0.5rem; font-size: 2rem; color: var(--text-primary, #1e3c38); }
-      .hero-widget__subtitle { margin: 0 0 1rem; color: var(--text-secondary, #667a77); }
-      .hero-widget__cta { border: none; border-radius: var(--radius-md, 12px); padding: 0.75rem 1rem; cursor: pointer; background: var(--primary-color, #497671); color: #fff; }
+      .hero-widget {
+        padding: var(--space-xl, 32px);
+        border-radius: var(--radius-lg, 16px);
+        background: linear-gradient(135deg, var(--bg-secondary, #f5f5f5) 0%, var(--bg-tertiary, #eef1f0) 100%);
+        animation: hero-widget-in 420ms ease-out both;
+      }
+
+      .hero-widget__title {
+        margin: 0 0 var(--space-sm, 8px);
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+        animation: hero-widget-in 480ms ease-out 60ms both;
+      }
+
+      .hero-widget__subtitle {
+        margin: 0 0 var(--space-lg, 24px);
+        color: var(--text-secondary, #667a77);
+        font-size: 1.05rem;
+        animation: hero-widget-in 480ms ease-out 120ms both;
+      }
+
+      .hero-widget__cta {
+        border: 1px solid transparent;
+        border-radius: var(--radius-md, 12px);
+        padding: 0.75rem 1.5rem;
+        cursor: pointer;
+        font-weight: 600;
+        background: var(--primary-color, #497671);
+        color: #fff;
+        transition: transform var(--transition-normal, 180ms ease), box-shadow var(--transition-normal, 180ms ease), background-color var(--transition-normal, 180ms ease);
+        animation: hero-widget-in 480ms ease-out 180ms both;
+
+        &:hover {
+          background: var(--primary-hover, #3d635f);
+          transform: translateY(-2px);
+          box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--primary-color, #497671);
+          outline-offset: 2px;
+        }
+      }
+
+      @keyframes hero-widget-in {
+        from { opacity: 0; transform: translateY(12px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .hero-widget,
+        .hero-widget__title,
+        .hero-widget__subtitle,
+        .hero-widget__cta {
+          animation: none;
+        }
+
+        .hero-widget__cta {
+          transition: none;
+        }
+      }
     `
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/widgets/ui/product-carousel-widget.component.ts b/src/app/widgets/ui/product-carousel-widget.component.ts
index 21e0537..e7aa842 100644
--- a/src/app/widgets/ui/product-carousel-widget.component.ts
+++ b/src/app/widgets/ui/product-carousel-widget.component.ts
@@ -11,7 +11,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   template: `
     <section class="product-carousel-widget">
       @if (data?.title) {
-        <h2>{{ data?.title }}</h2>
+        <h2 class="product-carousel-widget__title">{{ data?.title }}</h2>
       }
 
       @if (data?.products?.length) {
@@ -23,7 +23,15 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .product-carousel-widget { display: grid; gap: 1rem; }
+      .product-carousel-widget { display: grid; gap: var(--space-lg, 24px); }
+
+      .product-carousel-widget__title {
+        margin: 0;
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: var(--text-primary, #1e3c38);
+      }
+
       .product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],