home page

This commit is contained in:
sdarbinyan
2026-02-14 01:28:08 +04:00
parent 88ac37ebc4
commit 751ad48489
14 changed files with 522 additions and 155 deletions

View File

@@ -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>
}

View File

@@ -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;
}
}