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/components/back-button/back-button.component.ts
+++ b/src/app/components/back-button/back-button.component.ts
@@ -0,0 +1,69 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+import { environment } from '../../../environments/environment';
+
+@Component({
+  selector: 'app-back-button',
+  standalone: true,
+  template: `
+    @if (!isnovo) {
+      <button class="dexar-back-btn" (click)="goBack()" aria-label="Назад">
+        <svg width="37" height="24" viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4.73 11.46c-.97-.52-.97-1.4 0-1.92L20.39 1.21c1.48-.79 3.89-.19 3.89.95v3.74h6.94c1.28 0 2.31.59 2.31 1.31v6.56c0 .73-1.03 1.31-2.31 1.31h-6.94v3.74c0 1.15-2.42 1.74-3.89.96L4.73 11.46Z"
+            fill="#497671" fill-opacity="0.75" stroke="white" stroke-opacity="0.6" stroke-linejoin="round"/>
+        </svg>
+      </button>
+    }
+  `,
+  styles: [`
+    .dexar-back-btn {
+      position: fixed;
+      top: 76px;
+      left: 20px;
+      z-index: 100;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      transition: transform 0.2s ease;
+      
+      svg path {
+        transition: fill 0.2s ease, fill-opacity 0.2s ease;
+      }
+
+      &:hover {
+        transform: scale(1.08);
+        
+        svg path {
+          fill: #A1B4B5;
+          fill-opacity: 1;
+        }
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+
+    @media (max-width: 768px) {
+      .dexar-back-btn {
+        top: 68px;
+        left: 12px;
+        
+        svg {
+          width: 30px;
+          height: 20px;
+        }
+      }
+    }
+  `]
+})
+export class BackButtonComponent {
+  isnovo = environment.theme === 'novo';
+
+  constructor(private location: Location) {}
+
+  goBack(): void {
+    this.location.back();
+  }
+}
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -49,49 +49,60 @@
    </div>
  </footer>
 } @else {
-  <!-- DEXAR VERSION - Original -->
-  <footer class="footer">
-    <div class="footer-container">
-      <div class="footer-section">
-        <h3>Информация</h3>
-        <ul>
-          <li><a routerLink="/about">О компании</a></li>
-          <li><a routerLink="/contacts">Контакты</a></li>
-          <li><a routerLink="/company-details">Реквизиты организации</a></li>
-        </ul>
-      </div>
+  <!-- DEXAR VERSION - Redesigned -->
+  <footer class="dexar-footer">
+    <div class="dexar-footer-bg">
+      <div class="dexar-footer-container">
+        <div class="dexar-footer-top">
+          <div class="dexar-footer-logo">
+            <img src="/assets/images/dexar-logo.svg" alt="Dexar" class="dexar-footer-logo-desktop" loading="lazy" />
+            <img src="/assets/images/dexar-logo-small.svg" alt="Dexar" class="dexar-footer-logo-mobile" loading="lazy" />
+          </div>
+          
+          <div class="dexar-footer-columns">
+            <div class="dexar-footer-col">
+              <h4>Информация</h4>
+              <ul>
+                <li><a routerLink="/about">О компании</a></li>
+                <li><a routerLink="/contacts">Контакты</a></li>
+                <li><a routerLink="/company-details">Реквизиты</a></li>
+              </ul>
+            </div>

-      <div class="footer-section">
-        <h3>Документы</h3>
-        <ul>
-          <li><a routerLink="/payment-terms">Правила оплаты</a></li>
-          <li><a routerLink="/return-policy">Политика возврата</a></li>
-          <li><a routerLink="/public-offer">Публичная оферта</a></li>
-          <li><a routerLink="/privacy-policy">Политика конфиденциальности</a></li>
-        </ul>
-      </div>
+            <div class="dexar-footer-col">
+              <h4>Документы</h4>
+              <ul>
+                <li><a routerLink="/payment-terms">Правила оплаты</a></li>
+                <li><a routerLink="/return-policy">Политика возврата</a></li>
+                <li><a routerLink="/public-offer">Публичная оферта</a></li>
+                <li><a routerLink="/privacy-policy">Конфиденциальность</a></li>
+              </ul>
+            </div>

-      <div class="footer-section">
-        <h3>Помощь</h3>
-        <ul>
-          <li><a routerLink="/faq">Часто задаваемые вопросы</a></li>
-          <li><a routerLink="/delivery">Доставка</a></li>
-          <li><a routerLink="/guarantee">Гарантия</a></li>
-        </ul>
-      </div>
+            <div class="dexar-footer-col">
+              <h4>Помощь</h4>
+              <ul>
+                <li><a routerLink="/faq">FAQ</a></li>
+                <li><a routerLink="/delivery">Доставка</a></li>
+                <li><a routerLink="/guarantee">Гарантия</a></li>
+              </ul>
+            </div>

-      <div class="footer-section payment-systems">
-        <h3>Способы оплаты</h3>
-        <div class="payment-logos">
-          <img src="/assets/images/mir-logo.svg" alt="МИР" class="payment-logo" loading="lazy" decoding="async" width="60" height="40" />
-          <img src="/assets/images/visa-logo.svg" alt="Visa" class="payment-logo" loading="lazy" decoding="async" width="60" height="40" />
-          <img src="/assets/images/mastercard-logo.svg" alt="Mastercard" class="payment-logo" loading="lazy" decoding="async" width="60" height="40" />
+            <div class="dexar-footer-col">
+              <h4>Оплата</h4>
+              <div class="dexar-payment-logos">
+                <img src="/assets/images/mir-logo.svg" alt="МИР" loading="lazy" width="48" height="32" />
+                <img src="/assets/images/visa-logo.svg" alt="Visa" loading="lazy" width="48" height="32" />
+                <img src="/assets/images/mastercard-logo.svg" alt="Mastercard" loading="lazy" width="48" height="32" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="dexar-footer-bottom">
+          <p>&copy; {{ currentYear }} {{ brandName }}. Все права защищены.</p>
        </div>
      </div>
    </div>
-
-    <div class="footer-bottom">
-      <p>&copy; {{ currentYear }} {{ brandName }}. Все права защищены.</p>
-    </div>
  </footer>
 }
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -1,4 +1,9 @@
-.footer {
+:host {
+  display: block;
+  width: 100%;
+}
+
+.footer {
  background-color: #1a1a1a;
  color: #ffffff;
  margin-top: auto;
@@ -217,3 +222,192 @@
    text-align: center;
  }
 }
+
+// ========== DEXAR FOOTER STYLES ==========
+.dexar-footer {
+  margin-top: auto;
+}
+
+.dexar-footer-bg {
+  background-image: url('/assets/images/footer_bg.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(30, 60, 56, 0.85);
+  }
+}
+
+.dexar-footer-container {
+  position: relative;
+  z-index: 1;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 48px 40px 24px;
+}
+
+.dexar-footer-top {
+  display: flex;
+  gap: 48px;
+  padding-bottom: 32px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.dexar-footer-logo {
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 4px;
+
+  .dexar-footer-logo-desktop {
+    display: block;
+    height: 40px;
+    width: auto;
+    filter: brightness(0) invert(1);
+  }
+
+  .dexar-footer-logo-mobile {
+    display: none;
+    height: 32px;
+    width: auto;
+    filter: brightness(0) invert(1);
+  }
+}
+
+.dexar-footer-columns {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 32px;
+}
+
+.dexar-footer-col {
+  h4 {
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 15px;
+    font-weight: 600;
+    color: #ffffff;
+    margin: 0 0 16px 0;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      margin-bottom: 10px;
+
+      a {
+        font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.7);
+        text-decoration: none;
+        transition: color 0.2s ease;
+
+        &:hover {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.dexar-payment-logos {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+
+  img {
+    height: 28px;
+    max-height: 28px;
+    width: auto;
+    max-width: 60px;
+    background: rgba(255, 255, 255, 0.9);
+    padding: 4px 8px;
+    border-radius: 4px;
+    transition: opacity 0.2s;
+    object-fit: contain;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+}
+
+.dexar-footer-bottom {
+  padding: 20px 0 0;
+  text-align: center;
+
+  p {
+    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.5);
+    margin: 0;
+  }
+}
+
+// Responsive
+@media (max-width: 992px) {
+  .dexar-footer-container {
+    padding: 40px 32px 20px;
+  }
+
+  .dexar-footer-top {
+    flex-direction: column;
+    gap: 32px;
+  }
+
+  .dexar-footer-columns {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .dexar-footer-container {
+    padding: 32px 20px 16px;
+  }
+
+  .dexar-footer-logo {
+    .dexar-footer-logo-desktop {
+      display: none;
+    }
+
+    .dexar-footer-logo-mobile {
+      display: block;
+    }
+  }
+
+  .dexar-footer-columns {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+  }
+
+  .dexar-footer-col h4 {
+    font-size: 14px;
+    margin-bottom: 12px;
+  }
+
+  .dexar-footer-col ul li a {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .dexar-footer-container {
+    padding: 24px 16px 12px;
+  }
+
+  .dexar-footer-columns {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+}
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -88,8 +88,8 @@
      <div class="dexar-actions">
        <!-- Cart Button -->
        <a routerLink="/cart" routerLinkActive="dexar-cart-active" class="dexar-cart-btn" (click)="closeMenu()">
-          <svg width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="#497671" fill-opacity="0.3" />
+          <svg width="32" height="24" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" fill="transparent" />
            <path d="M12 0.5H36C42.3513 0.5 47.5 5.64873 47.5 12V20C47.5 26.3513 42.3513 31.5 36 31.5H12C5.64873 31.5 0.5 26.3513 0.5 20V12C0.5 5.64873 5.64873 0.5 12 0.5Z" stroke="#677B78" />
            <path d="M10 3.9C10 3.40294 10.4029 3 10.9 3H13.6C14.013 3 14.373 3.28107 14.4731 3.68172L15.2027 6.6H36.1C36.3677 6.6 36.6216 6.7192 36.7925 6.92523C36.9635 7.13125 37.0339 7.40271 36.9846 7.66586L34.2846 22.0659C34.2048 22.4915 33.8331 22.8 33.4 22.8H31.6H19H17.2C16.7669 22.8 16.3952 22.4915 16.3154 22.0659L13.6204 7.69224L12.8973 4.8H10.9C10.4029 4.8 10 4.39706 10 3.9ZM15.5844 8.4L17.9469 21H32.6531L35.0156 8.4H15.5844ZM19 22.8C17.0118 22.8 15.4 24.4118 15.4 26.4C15.4 28.3882 17.0118 30 19 30C20.9882 30 22.6 28.3882 22.6 26.4C22.6 24.4118 20.9882 22.8 19 22.8ZM31.6 22.8C29.6118 22.8 28 24.4118 28 26.4C28 28.3882 29.6118 30 31.6 30C33.5882 30 35.2 28.3882 35.2 26.4C35.2 24.4118 33.5882 22.8 31.6 22.8ZM19 24.6C19.9941 24.6 20.8 25.4059 20.8 26.4C20.8 27.3941 19.9941 28.2 19 28.2C18.0059 28.2 17.2 27.3941 17.2 26.4C17.2 25.4059 18.0059 24.6 19 24.6ZM31.6 24.6C32.5941 24.6 33.4 25.4059 33.4 26.4C33.4 27.3941 32.5941 28.2 31.6 28.2C30.6059 28.2 29.8 27.3941 29.8 26.4C29.8 25.4059 30.6059 24.6 31.6 24.6Z" fill="#1E3C38" />
          </svg>
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -453,7 +453,7 @@
 // ========== DEXAR REDESIGN 2026 STYLES ==========
 .dexar-header {
  background: rgba(117, 121, 124, 0.1);
-  padding: 14px 0;
+  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
@@ -463,11 +463,11 @@
 .dexar-header-container {
  max-width: 1440px;
  margin: 0 auto;
-  padding: 0 56px;
+  padding: 0 40px;
  display: flex;
  align-items: center;
-  gap: 57px;
-  height: 56px;
+  gap: 32px;
+  height: 48px;
 }

 .dexar-logo {
@@ -477,8 +477,8 @@
  flex-shrink: 0;
  
  ::ng-deep .logo-img {
-    width: 148px;
-    height: 48px;
+    width: 120px;
+    height: 38px;
    object-fit: contain;
  }
 }
@@ -498,13 +498,13 @@
  display: inline-flex;
  align-items: center;
  justify-content: center;
-  padding: 10px 48px;
-  height: 49px;
+  padding: 6px 32px;
+  height: 38px;
  border: 1px solid #d3dad9;
  background: rgba(255, 255, 255, 0.74);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
-  font-size: 22px;
+  font-size: 15px;
  color: #1e3c38;
  text-decoration: none;
  cursor: pointer;
@@ -523,45 +523,45 @@
 }

 .dexar-nav-btn-left {
-  border-radius: 13px 0 0 13px;
-  padding: 10px 48px;
+  border-radius: 10px 0 0 10px;
+  padding: 6px 32px;
 }

 .dexar-nav-btn-middle {
-  padding: 10px 63px;
+  padding: 6px 40px;
  border-left: none;
 }

 .dexar-nav-btn-right {
-  border-radius: 0 13px 13px 0;
-  padding: 10px 42px;
+  border-radius: 0 10px 10px 0;
+  padding: 6px 28px;
  border-left: none;
 }

 // Search Box
 .dexar-search-wrapper {
  flex: 1;
-  max-width: 234px;
+  max-width: 200px;
  margin-left: auto;
 }

 .dexar-search-box {
  position: relative;
  width: 100%;
-  height: 49px;
+  height: 38px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid #d2dad9;
-  border-radius: 22px;
-  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
+  border-radius: 19px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
-  padding: 0 20px;
-  gap: 10px;
+  padding: 0 14px;
+  gap: 8px;
 }

 .dexar-search-icon {
-  width: 28px;
-  height: 28px;
+  width: 20px;
+  height: 20px;
  flex-shrink: 0;
 }

@@ -572,7 +572,7 @@
  outline: none;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
-  font-size: 22px;
+  font-size: 15px;
  color: #828e8d;
  cursor: pointer;
  
@@ -591,8 +591,8 @@

 .dexar-cart-btn {
  position: relative;
-  width: 48px;
-  height: 32px;
+  width: 32px;
+  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -601,8 +601,8 @@
  transition: opacity 0.3s ease;
  
  svg {
-    width: 48px;
-    height: 32px;
+    width: 32px;
+    height: 24px;
  }
  
  &:hover {
--- a/src/app/components/language-selector/language-selector.component.scss
+++ b/src/app/components/language-selector/language-selector.component.scss
@@ -155,18 +155,18 @@
 // Dexar header specific styles
 :host-context(.dexar-header) {
  .language-selector {
-    width: 67px;
-    height: 32px;
+    width: 52px;
+    height: 26px;
  }

  .language-button {
    width: 100%;
    height: 100%;
-    padding: 6px;
-    gap: 8px;
+    padding: 4px;
+    gap: 4px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #677b78;
-    border-radius: 12px;
+    border-radius: 8px;
    color: #1e3c38;
    justify-content: center;
    
@@ -182,7 +182,7 @@
    .language-code {
      font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      font-weight: 500;
-      font-size: 24px;
+      font-size: 15px;
      color: #1e3c38;
      letter-spacing: 0;
      line-height: 1;
@@ -190,8 +190,8 @@

    .dropdown-arrow {
      display: block;
-      width: 9px;
-      height: 14px;
+      width: 7px;
+      height: 10px;
      opacity: 1;
      
      path {