changes
This commit is contained in:
66
src/app/pages/contacts-page/contacts-page.html
Normal file
66
src/app/pages/contacts-page/contacts-page.html
Normal 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:00–19:00 МСК</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
146
src/app/pages/contacts-page/contacts-page.scss
Normal file
146
src/app/pages/contacts-page/contacts-page.scss
Normal 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; }
|
||||
}
|
||||
}
|
||||
10
src/app/pages/contacts-page/contacts-page.ts
Normal file
10
src/app/pages/contacts-page/contacts-page.ts
Normal 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 {}
|
||||
Reference in New Issue
Block a user