Улучшение коÐда мобильного меню
This commit is contained in:
Web-serfer
parent
4883a52b88
commit
d5286ab980
9 changed files with 800 additions and 580 deletions
|
|
@ -1,48 +1,35 @@
|
|||
---
|
||||
import Button from '@components/base/Button.astro';
|
||||
|
||||
// Текстовые константы для удобного редактирования
|
||||
const badgeText = "ЗАЩИТА ПРАВ ВОДИТЕЛЕЙ В СУРГУТЕ";
|
||||
const titleWhite = "Защитите свои права";
|
||||
const titleGold = "и водительское удостоверение";
|
||||
const description = "Профессиональная юридическая помощь при ДТП, спорах с ГИБДД и страховыми компаниями. Работаем на результат в судах ХМАО-Югры.";
|
||||
|
||||
const btnPrimary = "Бесплатная консультация";
|
||||
const btnSecondary = "Наши услуги";
|
||||
|
||||
// Пути к изображениям (замените на свои локальные файлы в папке public/ или src/assets/)
|
||||
// Для демо я использую плейсхолдеры
|
||||
const bgImageUrl = "/images/home/bg_hero.png";
|
||||
const lawyerImageUrl = "/images/home/heroImg.jpg";
|
||||
---
|
||||
|
||||
<section class="hero-section">
|
||||
<!-- Оверлей для синего оттенка фона -->
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="site-container hero-grid">
|
||||
|
||||
<!-- Левая колонка: Текст -->
|
||||
<div class="hero-content">
|
||||
<!-- Верхняя плашка -->
|
||||
<div class="badge">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
||||
</svg>
|
||||
<span class="status-dot"></span>
|
||||
{badgeText}
|
||||
</div>
|
||||
|
||||
<!-- Заголовок -->
|
||||
<h1 class="hero-title">
|
||||
<span class="text-white">{titleWhite}</span>
|
||||
<br />
|
||||
<span class="text-gold">{titleGold}</span>
|
||||
</h1>
|
||||
|
||||
<!-- Описание -->
|
||||
<p class="hero-description">{description}</p>
|
||||
|
||||
<!-- Кнопки -->
|
||||
<div class="hero-actions">
|
||||
<Button variant="gold" size="lg" id="consultation-btn" data-modal-target="consultation-modal">
|
||||
{btnPrimary}
|
||||
|
|
@ -51,275 +38,139 @@ const lawyerImageUrl = "/images/home/heroImg.jpg";
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Правая колонка: Изображение -->
|
||||
<div class="hero-image-wrapper">
|
||||
|
||||
<!-- Композиция с фото -->
|
||||
<div class="image-composition">
|
||||
<img src={lawyerImageUrl} alt="Юрист" class="main-image" />
|
||||
|
||||
<!-- Плавающая плашка с опытом -->
|
||||
<div class="experience-badge">
|
||||
<span class="exp-number">20+</span>
|
||||
<span class="exp-text">ЛЕТ ОПЫТА В ХМАО</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style define:vars={{ bgImageUrl: `url("${bgImageUrl}")` }}>
|
||||
/* Основная секция с фоном */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 85vh; /* Высота на весь экран или минимум 85% */
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-image: var(--bgImageUrl);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
overflow: hidden; /* Чтобы декоративные элементы не вылазили */
|
||||
|
||||
/* ГЛАВНОЕ ИСПРАВЛЕНИЕ GAP */
|
||||
margin: 0 !important;
|
||||
padding-top: 80px; /* Соответствует высоте Header на десктопе */
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Темно-синий оверлей поверх картинки */
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Градиент от плотного синего к чуть прозрачному */
|
||||
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.85) 50%, rgba(10, 37, 64, 0.6) 100%);
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(90deg, #0a2540 0%, rgba(10, 37, 64, 0.9) 50%, rgba(10, 37, 64, 0.7) 100%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Сетка для контента Hero */
|
||||
.hero-grid {
|
||||
position: relative;
|
||||
z-index: 2; /* Поверх оверлея */
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 4rem;
|
||||
padding: 2rem;
|
||||
gap: 3rem;
|
||||
padding-bottom: 4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* --- Левая часть (Текст) --- */
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 650px;
|
||||
}
|
||||
.hero-content { flex: 1.2; max-width: 700px; }
|
||||
|
||||
/* Плашка сверху (Badge) */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: rgba(209, 176, 107, 0.15); /* Прозрачный золотой фон */
|
||||
border: 1px solid rgba(209, 176, 107, 0.3);
|
||||
color: #d1b06b;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 2rem;
|
||||
display: inline-flex; align-items: center; gap: 0.6rem;
|
||||
background-color: rgba(234, 194, 110, 0.15);
|
||||
border: 1px solid rgba(234, 194, 110, 0.3);
|
||||
color: #eac26e; padding: 0.5rem 1rem; border-radius: 6px;
|
||||
font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
/* Заголовок */
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 4vw, 4rem); /* Адаптивный размер шрифта */
|
||||
line-height: 1.1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
font-weight: 800;
|
||||
letter-spacing: -1px;
|
||||
/* Мерцающая точка "На связи" */
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #22c55e;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
color: #ffffff;
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.text-gold {
|
||||
color: #e2c07b; /* Золотистый/желтый цвет из макета */
|
||||
}
|
||||
.hero-title { font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.15; margin: 0 0 2rem 0; font-weight: 800; }
|
||||
.text-white { color: #ffffff; }
|
||||
.text-gold { color: #eac26e; }
|
||||
|
||||
/* Описание */
|
||||
.hero-description {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 3rem;
|
||||
max-width: 550px;
|
||||
}
|
||||
.hero-description { color: rgba(255, 255, 255, 0.85); font-size: 1.15rem; line-height: 1.6; margin-bottom: 3.5rem; max-width: 580px; }
|
||||
|
||||
/* Блок кнопок */
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
padding: 0.8rem 2rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(180deg, #eac26e 0%, #ce9f40 100%);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 4px 15px rgba(206, 159, 64, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.hero-actions { display: flex; gap: 1.5rem; align-items: center; }
|
||||
|
||||
.btn-secondary {
|
||||
background-color: rgba(255, 255, 255, 0.08); /* Полупрозрачный синий/белый */
|
||||
backdrop-filter: blur(5px);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
display: inline-flex; padding: 1rem 2rem; background-color: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(10px); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 6px; font-weight: 600; text-decoration: none; transition: 0.3s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
|
||||
|
||||
/* --- Правая часть (Картинка) --- */
|
||||
.hero-image-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.hero-image-wrapper { flex: 1; display: flex; justify-content: flex-end; position: relative; }
|
||||
.image-composition { position: relative; width: 100%; max-width: 480px; }
|
||||
|
||||
/* Обертка для фото и белой подложки */
|
||||
.image-composition {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Имитация повернутой белой карточки на заднем фоне */
|
||||
.image-composition::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 25px;
|
||||
right: -25px;
|
||||
bottom: 15px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
transform: rotate(4deg);
|
||||
z-index: -1;
|
||||
content: ''; position: absolute; top: -10px; left: 20px; right: -20px; bottom: 10px;
|
||||
background-color: #ffffff; border-radius: 12px; transform: rotate(3deg); z-index: -1;
|
||||
}
|
||||
|
||||
/* Основное фото */
|
||||
.main-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
border: 6px solid #ffffff; /* Белая рамка */
|
||||
filter: grayscale(100%); /* Делаем фото черно-белым, как на макете */
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
.main-image { width: 100%; border-radius: 12px; border: 8px solid #ffffff; filter: grayscale(100%); box-shadow: 0 30px 60px rgba(0,0,0,0.4); }
|
||||
|
||||
/* Плашка "15+ лет" */
|
||||
.experience-badge {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: -40px; /* Сдвигаем влево за пределы фото */
|
||||
background: #ffffff;
|
||||
padding: 1.2rem;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||||
z-index: 3;
|
||||
min-width: 160px;
|
||||
position: absolute; bottom: 30px; left: -30px; background: #ffffff; padding: 1.5rem;
|
||||
border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.2); min-width: 180px;
|
||||
}
|
||||
|
||||
.exp-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
color: #1e3050; /* Темно-синий */
|
||||
line-height: 1;
|
||||
margin-bottom: 0.3rem;
|
||||
.exp-number { font-size: 2.2rem; font-weight: 900; color: #1e3050; line-height: 1; display: block; }
|
||||
.exp-text { font-size: 0.7rem; font-weight: 800; color: #535e6c; text-transform: uppercase; }
|
||||
|
||||
/* АДАПТИВНОСТЬ ПОД ВЫСОТУ ШАПКИ */
|
||||
@media (max-width: 992px) {
|
||||
.hero-section { padding-top: 70px; min-height: auto; }
|
||||
.hero-grid { flex-direction: column; text-align: center; padding: 1.5rem 1.5rem 4rem; }
|
||||
.hero-content { align-items: center; }
|
||||
.hero-actions { justify-content: center; }
|
||||
.hero-image-wrapper { margin-top: 3rem; justify-content: center; }
|
||||
.experience-badge { left: 0; bottom: -20px; }
|
||||
}
|
||||
|
||||
.exp-text {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: #6c7a8c;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* --- Адаптивность --- */
|
||||
@media (max-width: 1024px) {
|
||||
.hero-grid {
|
||||
flex-direction: column;
|
||||
text-align: center; /* Центрируем контент на планшетах */
|
||||
padding: 4rem 2rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
margin: 0 auto 3rem auto;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-image-wrapper {
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.experience-badge {
|
||||
left: -10px; /* Сдвигаем внутрь, чтобы не вылазило за экран */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-composition::before {
|
||||
display: none; /* Убираем повернутую подложку на мобилках для простоты */
|
||||
}
|
||||
|
||||
.experience-badge {
|
||||
bottom: -20px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.hero-section { padding-top: 64px; }
|
||||
.hero-title { font-size: 1.8rem; }
|
||||
.hero-actions { flex-direction: column; width: 100%; }
|
||||
.hero-actions > * { width: 100%; }
|
||||
.image-composition::before { display: none; }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue