@@ -1 +1,5 @@
|
||||
<router-outlet />
|
||||
<app-site-header />
|
||||
<main class="app-main">
|
||||
<router-outlet />
|
||||
</main>
|
||||
<app-site-footer />
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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'
|
||||
})
|
||||
|
||||
60
src/app/site-footer/site-footer.html
Normal file
60
src/app/site-footer/site-footer.html
Normal file
@@ -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">
|
||||
Инновационный сервис виртуальных чеков для физических лиц.
|
||||
Создавайте цифровые чеки онлайн и обналичивайте их через банкоматы банков-партнёров 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>
|
||||
156
src/app/site-footer/site-footer.scss
Normal file
156
src/app/site-footer/site-footer.scss
Normal file
@@ -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;
|
||||
}
|
||||
10
src/app/site-footer/site-footer.ts
Normal file
10
src/app/site-footer/site-footer.ts
Normal file
@@ -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();
|
||||
}
|
||||
46
src/app/site-header/site-header.html
Normal file
46
src/app/site-header/site-header.html
Normal file
@@ -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>
|
||||
131
src/app/site-header/site-header.scss
Normal file
131
src/app/site-header/site-header.scss
Normal file
@@ -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;
|
||||
}
|
||||
14
src/app/site-header/site-header.ts
Normal file
14
src/app/site-header/site-header.ts
Normal file
@@ -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); }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user