added header and footer

Co-authored-by: Copilot <copilot@github.com>

src/app/app.html

@@ -1 +1,5 @@
-<router-outlet />
+<app-site-header />
+<main class="app-main">
+  <router-outlet />
+</main>
+<app-site-footer />

src/app/app.scss

@@ -1,2 +1,12 @@
-:host { display: block; min-height: 100dvh; }
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
 

src/app/app.ts

@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { SiteHeader } from './site-header/site-header';
+import { SiteFooter } from './site-footer/site-footer';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, SiteHeader, SiteFooter],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

src/app/site-footer/site-footer.html

@@ -0,0 +1,60 @@
+<footer class="site-footer">
+  <div class="site-footer__inner">
+
+    <!-- Brand + about -->
+    <div class="site-footer__col site-footer__col--brand">
+      <a class="site-footer__brand" href="/">
+        <!-- <img src="/logo_big.png" alt="fastCHECK" width="28" height="28" /> -->
+        <span class="site-footer__wordmark">
+          <span class="wm-fast">fast</span><span class="wm-check">CHECK</span>
+        </span>
+      </a>
+      <p class="site-footer__desc" id="about">
+        Инновационный сервис виртуальных чеков для физических лиц.
+        Создавайте цифровые чеки онлайн и обналичивайте их через банкоматы банков-партнёров&nbsp;24/7.
+      </p>
+    </div>
+
+    <!-- Contacts -->
+    <div class="site-footer__col" id="contacts">
+      <h3 class="site-footer__heading">Контакты</h3>
+      <ul class="site-footer__list">
+        <li>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.07 10.5a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 16.92z"/></svg>
+          <a href="tel:+79299037443">+7 (929) 903-74-43</a> <span class="site-footer__note">Россия</span>
+        </li>
+        <li>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.07 10.5a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 21 16.92z"/></svg>
+          <a href="tel:+37498632421">+374 98 632421</a> <span class="site-footer__note">Армения</span>
+        </li>
+        <li>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
+          <a href="mailto:info@viaexport.store">info@viaexport.store</a>
+        </li>
+      </ul>
+      <div class="site-footer__hours">
+        <p><strong>Техподдержка:</strong> 24/7</p>
+        <p><strong>Вопросы:</strong> 10:00–19:00 МСК</p>
+      </div>
+    </div>
+
+    <!-- Legal -->
+    <div class="site-footer__col">
+      <h3 class="site-footer__heading">Реквизиты</h3>
+      <ul class="site-footer__list site-footer__list--legal">
+        <li>ООО «ВИАЭКСПОРТ»</li>
+        <li>ИНН (РФ): 9909675800</li>
+        <li>ИНН (AM): 01051049</li>
+        <li>КПП: 770287001</li>
+        <li>ОГРН: 282.110.1296681</li>
+        <li class="site-footer__address">Армения, 0201, Ереван,<br>ул. Минская, дом 21-23, кв. 44</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <div class="site-footer__bottom">
+    <p>© {{ year }} ООО «ВИАЭКСПОРТ». Все права защищены.</p>
+    <p>Директор: Амирханян Саргис Арташесович</p>
+  </div>
+</footer>

src/app/site-footer/site-footer.scss

@@ -0,0 +1,156 @@
+:host { display: block; }
+
+.site-footer {
+  background: #0f172a;
+  color: #94a3b8;
+
+  &__inner {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 48px 24px 32px;
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 40px;
+
+    @media (max-width: 860px) {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    @media (max-width: 560px) {
+      grid-template-columns: 1fr;
+      gap: 32px;
+      padding: 36px 20px 24px;
+    }
+  }
+
+  &__col {
+    &--brand {
+      @media (max-width: 860px) {
+        grid-column: 1 / -1;
+      }
+    }
+  }
+
+  &__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    margin-bottom: 14px;
+
+    img {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+      filter: brightness(0) invert(1);
+      opacity: 0.9;
+    }
+  }
+
+  &__wordmark {
+    font-size: 18px;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+
+  &__desc {
+    font-size: 13.5px;
+    line-height: 1.65;
+    color: #64748b;
+    max-width: 380px;
+  }
+
+  &__heading {
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+    color: #e2e8f0;
+    margin-bottom: 16px;
+  }
+
+  &__list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 18px;
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13.5px;
+
+      svg { flex-shrink: 0; opacity: 0.5; }
+    }
+
+    a {
+      color: #94a3b8;
+      text-decoration: none;
+      transition: color 0.15s;
+
+      &:hover { color: #e2e8f0; }
+    }
+
+    &--legal {
+      li {
+        display: block;
+        font-size: 12.5px;
+        color: #64748b;
+        gap: 0;
+      }
+    }
+  }
+
+  &__note {
+    font-size: 11px;
+    color: #475569;
+    margin-left: 4px;
+  }
+
+  &__hours {
+    font-size: 12.5px;
+    color: #64748b;
+    line-height: 1.7;
+  }
+
+  &__address {
+    color: #475569;
+    font-size: 12px !important;
+    line-height: 1.5;
+    margin-top: 4px;
+  }
+
+  &__bottom {
+    border-top: 1px solid #1e293b;
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 16px 24px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 24px;
+    justify-content: space-between;
+    font-size: 12px;
+    color: #475569;
+
+    @media (max-width: 560px) {
+      flex-direction: column;
+      padding: 14px 20px;
+    }
+  }
+}
+
+.wm-fast {
+  font-weight: 400;
+  font-size: 0.72em;
+  color: #64748b;
+  margin-right: 0.04em;
+}
+.wm-check {
+  font-weight: 700;
+  font-size: 1em;
+  color: #93c5fd;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}

src/app/site-footer/site-footer.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-site-footer',
+  templateUrl: './site-footer.html',
+  styleUrl: './site-footer.scss'
+})
+export class SiteFooter {
+  year = new Date().getFullYear();
+}

src/app/site-header/site-header.html

@@ -0,0 +1,46 @@
+<header class="site-header">
+  <div class="site-header__inner">
+
+    <!-- Brand -->
+    <a class="site-header__brand" routerLink="/" (click)="closeMenu()">
+      <img src="/logo_small.png" alt="fastCHECK" width="32" height="32" />
+      <span class="site-header__wordmark">
+        <span class="wm-fast">fast</span><span class="wm-check">CHECK</span>
+      </span>
+    </a>
+
+    <!-- Desktop nav -->
+    <nav class="site-header__nav" aria-label="Навигация">
+      <a class="site-header__link" href="#about">О сервисе</a>
+      <a class="site-header__link" href="#contacts">Контакты</a>
+      <a class="site-header__link" href="mailto:info@viaexport.store">Поддержка</a>
+    </nav>
+
+    <!-- Mobile hamburger -->
+    <button class="site-header__burger" type="button"
+            [attr.aria-expanded]="menuOpen()"
+            aria-label="Меню"
+            (click)="toggleMenu()">
+      @if (menuOpen()) {
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2.5" stroke-linecap="round">
+          <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+        </svg>
+      } @else {
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+             stroke-width="2.5" stroke-linecap="round">
+          <line x1="3" y1="7" x2="21" y2="7"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="17" x2="21" y2="17"/>
+        </svg>
+      }
+    </button>
+  </div>
+
+  <!-- Mobile dropdown -->
+  @if (menuOpen()) {
+    <nav class="site-header__mobile-menu" (click)="closeMenu()" aria-label="Мобильное меню">
+      <a class="site-header__mobile-link" href="#about">О сервисе</a>
+      <a class="site-header__mobile-link" href="#contacts">Контакты</a>
+      <a class="site-header__mobile-link" href="mailto:info@viaexport.store">Поддержка</a>
+    </nav>
+  }
+</header>

src/app/site-header/site-header.scss

@@ -0,0 +1,131 @@
+:host {
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 900;
+}
+
+.site-header {
+  background: #fff;
+  border-bottom: 1px solid #e2e8f0;
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
+
+  &__inner {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 24px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    gap: 32px;
+
+    @media (max-width: 600px) {
+      padding: 0 16px;
+    }
+  }
+
+  &__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    flex-shrink: 0;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__wordmark {
+    font-size: 18px;
+    letter-spacing: -0.02em;
+    white-space: nowrap;
+    line-height: 1;
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+
+    @media (max-width: 600px) {
+      display: none;
+    }
+  }
+
+  &__link {
+    padding: 8px 14px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #475569;
+    text-decoration: none;
+    transition: background 0.15s, color 0.15s;
+
+    &:hover {
+      background: #f1f5f9;
+      color: #0f172a;
+    }
+  }
+
+  &__burger {
+    display: none;
+    margin-left: auto;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    border: none;
+    background: transparent;
+    color: #475569;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.15s;
+    -webkit-appearance: none;
+    font-family: inherit;
+
+    &:hover { background: #f1f5f9; }
+
+    @media (max-width: 600px) {
+      display: inline-flex;
+    }
+  }
+
+  &__mobile-menu {
+    border-top: 1px solid #e2e8f0;
+    display: flex;
+    flex-direction: column;
+    padding: 8px 12px 12px;
+    background: #fff;
+  }
+
+  &__mobile-link {
+    padding: 12px 14px;
+    border-radius: 10px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #0f172a;
+    text-decoration: none;
+    transition: background 0.15s;
+
+    &:hover { background: #f1f5f9; }
+  }
+}
+
+// Wordmark colours
+.wm-fast {
+  font-weight: 400;
+  font-size: 0.72em;
+  color: #64748b;
+  margin-right: 0.04em;
+}
+.wm-check {
+  font-weight: 700;
+  font-size: 1em;
+  color: #1e40af;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}

src/app/site-header/site-header.ts

@@ -0,0 +1,14 @@
+import { Component, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-site-header',
+  imports: [RouterLink],
+  templateUrl: './site-header.html',
+  styleUrl: './site-header.scss'
+})
+export class SiteHeader {
+  menuOpen = signal(false);
+  toggleMenu(): void { this.menuOpen.update(v => !v); }
+  closeMenu(): void { this.menuOpen.set(false); }
+}

src/shared.scss

@@ -2,7 +2,7 @@
 // Imported via @use './../../../shared' as *;
 
 .page {
-  min-height: 100dvh;
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -29,7 +29,7 @@
     border-radius: 0;
     max-width: 100%;
     box-shadow: none;
-    min-height: 100dvh;
+    flex: 1;
     display: flex;
     flex-direction: column;
   }