redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Web-serfer 2026-03-31 22:53:39 +05:00
commit af43d08e90
41 changed files with 5197 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

239
frontend/src/components/layout/footer/Footer.astro Normal file
View file

@ -0,0 +1,239 @@
---
const sectionsLinks = [
{ label: 'Главная', href: '/' },
{ label: 'Услуги', href: '/services' },
];
const legalLinks = [
{ label: 'Privacy Policy', href: '#' },
{ label: 'Terms of Service', href: '#' },
{ label: 'Legal Disclaimer', href: '#' },
{ label: 'Cookie Settings', href: '#' },
];
---
<footer class="footer">
<div class="footer-container">
<!-- Верхняя часть футера (Колонки) -->
<div class="footer-top">
<!-- Колонка 1: Бренд и описание -->
<div class="footer-col brand-col">
<a href="/" class="footer-logo">Автоюрист086</a>
<p class="brand-desc">
Специализированная юридическая помощь<br/>
для водителей в Сургуте и Ханты-<br/>
Мансийском автономном округе-Югры.
</p>
</div>
<!-- Колонка 2: Разделы и Блог -->
<div class="footer-col">
<h4 class="col-title">Разделы</h4>
<ul class="footer-links">
{sectionsLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
<h4 class="col-title mt-4">Блог</h4>
<ul class="footer-links">
<li><a href="/contacts">Контакты</a></li>
</ul>
</div>
<!-- Колонка 3: Правовая информация -->
<div class="footer-col">
<h4 class="col-title">Правовая информация</h4>
<ul class="footer-links">
{legalLinks.map(link => (
<li><a href={link.href}>{link.label}</a></li>
))}
</ul>
</div>
<!-- Колонка 4: Контакты -->
<div class="footer-col">
<h4 class="col-title">Связь с нами</h4>
<p class="address">Сургут, ул. Мира, 15</p>
<a href="tel:+73462000000" class="footer-phone">+7 (3462) 00-00-00</a>
<!-- Иконка "Поделиться" -->
<button class="share-btn" aria-label="Share">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
</svg>
</button>
</div>
</div>
<!-- Нижняя часть футера (Копирайт) -->
<div class="footer-bottom">
<p class="copyright">© 2026 Автоюрист086. Все права защищены.</p>
<p class="developer">Designed for Justice</p>
</div>
</div>
</footer>
<style>
/* Базовые стили футера */
.footer {
background-color: #031529; /* Темно-синий фон */
color: #8c9bb0; /* Приглушенный серо-голубой цвет текста */
/* Используем шрифт с засечками (serif), как на макете */
font-family: Georgia, 'Times New Roman', Times, serif;
padding: 4rem 2rem 1.5rem 2rem;
}
.footer-container {
width: 100%;
max-width: var(--site-max-width);
margin: 0 auto;
}
/* Сетка для колонок */
.footer-top {
display: grid;
/* Пропорции колонок: первая чуть шире, остальные равны */
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
/* Колонка 1 */
.footer-logo {
display: inline-block;
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
text-decoration: none;
margin-bottom: 1.5rem;
letter-spacing: 0.5px;
}
.brand-desc {
font-size: 0.85rem;
line-height: 1.8;
margin: 0;
}
/* Заголовки колонок (Золотой цвет) */
.col-title {
color: #d1b06b; /* Золотистый/бежевый */
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 1.5rem 0;
letter-spacing: 0.5px;
}
.mt-4 {
margin-top: 1.5rem;
}
/* Списки ссылок */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: #8c9bb0;
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: #d1b06b; /* При наведении становятся золотыми */
}
/* Колонка Контактов */
.address {
font-size: 0.85rem;
margin-bottom: 1rem;
}
.footer-phone {
display: block;
color: #d1b06b;
font-size: 1.1rem;
font-weight: 700;
text-decoration: none;
margin-bottom: 1.5rem;
font-family: system-ui, -apple-system, sans-serif; /* Цифры лучше читаются в sans-serif */
}
/* Кнопка "Поделиться" */
.share-btn {
background: transparent;
border: 1px solid #2a3a50;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #8c9bb0;
cursor: pointer;
transition: all 0.2s ease;
}
.share-btn:hover {
border-color: #d1b06b;
color: #d1b06b;
background-color: rgba(209, 176, 107, 0.05);
}
/* Нижняя панель (Копирайт) */
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid rgba(140, 155, 176, 0.1); /* Тонкая полоска разделителя */
font-size: 0.75rem;
}
.copyright, .developer {
margin: 0;
}
/* Адаптивность для планшетов */
@media (max-width: 1024px) {
.footer-top {
grid-template-columns: 1fr 1fr; /* 2 колонки */
gap: 3rem 2rem;
}
}
/* Адаптивность для мобильных устройств */
@media (max-width: 640px) {
.footer {
padding: 3rem 1.5rem 1rem 1.5rem;
}
.footer-top {
grid-template-columns: 1fr; /* 1 колонка */
gap: 2.5rem;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
</style>