This commit is contained in:
2026-05-05 00:52:03 +04:00
parent cf634f766f
commit 59bda137e5
29 changed files with 1347 additions and 118 deletions

View File

@@ -0,0 +1,66 @@
<div class="info-page">
<div class="info-page__hero">
<h1 class="info-page__title">{{ 'contacts.title' | translate }}</h1>
<p class="info-page__lead">{{ 'contacts.lead' | translate }}</p>
</div>
<div class="info-page__body">
<div class="contacts-grid">
<!-- Phone Russia -->
<a class="contact-card" href="tel:+79299037443">
<div class="contact-card__icon">🇷🇺</div>
<div class="contact-card__body">
<span class="contact-card__label">{{ 'contacts.ru_label' | translate }}</span>
<span class="contact-card__value">+7 (929) 903-74-43</span>
</div>
</a>
<!-- Phone Armenia -->
<a class="contact-card" href="tel:+37498632421">
<div class="contact-card__icon">🇦🇲</div>
<div class="contact-card__body">
<span class="contact-card__label">{{ 'contacts.am_label' | translate }}</span>
<span class="contact-card__value">+374 98 632421</span>
</div>
</a>
<!-- Email -->
<a class="contact-card" href="mailto:info@viaexport.store">
<div class="contact-card__icon">✉️</div>
<div class="contact-card__body">
<span class="contact-card__label">{{ 'contacts.email_label' | translate }}</span>
<span class="contact-card__value">info@viaexport.store</span>
</div>
</a>
<!-- Telegram -->
<a class="contact-card" href="https://t.me/DexarSupport_bot" target="_blank" rel="noopener">
<div class="contact-card__icon">
<svg width="28" height="28" viewBox="0 0 24 24" fill="#2b9fd0"><path d="M9.04 15.65l-.36 4.06c.51 0 .73-.22.99-.48l2.38-2.27 4.93 3.6c.9.5 1.55.24 1.79-.83l3.24-15.18h.01c.29-1.34-.48-1.86-1.36-1.54L1.13 9.66c-1.32.5-1.3 1.23-.22 1.56l4.92 1.53L17.27 5.6c.54-.34 1.03-.15.62.19"/></svg>
</div>
<div class="contact-card__body">
<span class="contact-card__label">{{ 'contacts.tg_label' | translate }}</span>
<span class="contact-card__value">@DexarSupport_bot</span>
</div>
</a>
</div>
<section class="info-section">
<h2 class="info-section__title">{{ 'contacts.hours_title' | translate }}</h2>
<div class="hours-table">
<div class="hours-row">
<span class="hours-row__label">{{ 'footer.support_label' | translate }}</span>
<span class="hours-row__value hours-row__value--green">24/7</span>
</div>
<div class="hours-row">
<span class="hours-row__label">{{ 'footer.questions_label' | translate }}</span>
<span class="hours-row__value">10:0019:00 МСК</span>
</div>
</div>
</section>
</div>
</div>

View File

@@ -0,0 +1,146 @@
:host {
display: block;
background: #f8fafc;
min-height: 100vh;
}
.info-page {
max-width: 760px;
margin: 0 auto;
padding: 48px 24px 72px;
@media (max-width: 600px) {
padding: 32px 16px 56px;
}
&__hero {
margin-bottom: 48px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 32px;
}
&__title {
font-size: 32px;
font-weight: 800;
color: #0f172a;
margin: 0 0 12px;
letter-spacing: -0.5px;
@media (max-width: 600px) { font-size: 26px; }
}
&__lead {
font-size: 17px;
line-height: 1.7;
color: #475569;
margin: 0;
}
&__body {
display: flex;
flex-direction: column;
gap: 48px;
}
}
.info-section {
&__title {
font-size: 20px;
font-weight: 700;
color: #1e293b;
margin: 0 0 14px;
}
}
.contacts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
@media (max-width: 540px) {
grid-template-columns: 1fr;
}
}
.contact-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
border-radius: 16px;
border: 1px solid #e2e8f0;
background: #fff;
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
&:hover {
border-color: #93c5fd;
box-shadow: 0 4px 16px rgba(30, 64, 175, 0.08);
background: #f8fbff;
}
&__icon {
font-size: 28px;
line-height: 1;
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
&__body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
&__label {
font-size: 11.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
}
&__value {
font-size: 14.5px;
font-weight: 600;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.hours-table {
display: flex;
flex-direction: column;
gap: 12px;
}
.hours-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
&__label {
font-size: 14px;
color: #475569;
font-weight: 500;
}
&__value {
font-size: 14px;
font-weight: 700;
color: #0f172a;
&--green { color: #16a34a; }
}
}

View File

@@ -0,0 +1,10 @@
import { Component } from '@angular/core';
import { TranslatePipe } from '../../translate/translate.pipe';
@Component({
selector: 'app-contacts-page',
imports: [TranslatePipe],
templateUrl: './contacts-page.html',
styleUrl: './contacts-page.scss'
})
export class ContactsPage {}