valitovgaziz
126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<template>
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer__grid">
|
||
<div class="footer__brand">
|
||
<img src="/logo.svg" alt="Ял Арба" class="footer__logo" />
|
||
<p class="small-text">
|
||
Туристическая платформа Республики Башкортостан
|
||
</p>
|
||
</div>
|
||
|
||
<div class="footer__col">
|
||
<h5 class="footer__title">Навигация</h5>
|
||
<ul class="footer__links">
|
||
<li><NuxtLink to="/search">Поиск</NuxtLink></li>
|
||
<li><NuxtLink to="/about">О нас</NuxtLink></li>
|
||
<li><NuxtLink to="/contacts">Контакты</NuxtLink></li>
|
||
<li><NuxtLink to="/support">Поддержка</NuxtLink></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer__col">
|
||
<h5 class="footer__title">Пользователю</h5>
|
||
<ul class="footer__links">
|
||
<li><NuxtLink to="/auth/login">Войти</NuxtLink></li>
|
||
<li><NuxtLink to="/auth/register">Регистрация</NuxtLink></li>
|
||
<li><NuxtLink to="/favorites">Избранное</NuxtLink></li>
|
||
<li><NuxtLink to="/reviews">Отзывы</NuxtLink></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer__col">
|
||
<h5 class="footer__title">Контакты</h5>
|
||
<ul class="footer__links">
|
||
<li>
|
||
<a href="mailto:info@yalarba.ru">info@yalarba.ru</a>
|
||
</li>
|
||
<li>
|
||
<a href="tel:+73472999999">+7 (347) 299-99-99</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer__bottom">
|
||
<p class="caption">© {{ year }} Ял Арба. Все права защищены.</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const year = new Date().getFullYear()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.footer {
|
||
background: var(--color-dark);
|
||
color: var(--color-text-white);
|
||
padding: 48px 0 24px;
|
||
}
|
||
|
||
.footer__grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 40px;
|
||
}
|
||
|
||
.footer__logo {
|
||
height: 32px;
|
||
margin-bottom: 12px;
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
.footer__title {
|
||
font-family: var(--font-body);
|
||
font-size: var(--font-size-small);
|
||
font-weight: var(--font-weight-semibold);
|
||
color: var(--color-text-white);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.footer__links {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
|
||
.footer__links a {
|
||
font-family: var(--font-body);
|
||
font-size: var(--font-size-small);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
transition: color var(--transition-fast);
|
||
}
|
||
|
||
.footer__links a:hover {
|
||
color: var(--color-text-white);
|
||
}
|
||
|
||
.footer__bottom {
|
||
margin-top: 40px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
.footer__bottom .caption {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
@media (max-width: 744px) {
|
||
.footer {
|
||
padding: 32px 0 80px;
|
||
}
|
||
|
||
.footer__grid {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.footer__brand {
|
||
grid-column: 1 / -1;
|
||
}
|
||
}
|
||
</style>
|