Новый дизан
This commit is contained in:
Web-serfer
parent
0678c81284
commit
32bcc76021
11 changed files with 1639 additions and 622 deletions
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import BlogHero from '@components/blog/BlogHero.astro';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
import BlogCategories from '@components/blog/BlogCategories.astro';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
import BlogPagination from '@components/blog/BlogPagination.astro';
|
||||
|
|
@ -26,7 +26,20 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
|
|||
{ label: "Блог" }
|
||||
]}
|
||||
>
|
||||
<BlogHero />
|
||||
<PageHero
|
||||
badgeText="БЛОГ И СТАТЬИ"
|
||||
titleWhite="Полезные статьи"
|
||||
titleGold="для автовладельцев"
|
||||
description="Разбираем сложные юридические вопросы простым языком. Советы юриста по автоспорам, ДТП, ОСАГО и защите прав водителей."
|
||||
layout="with-image"
|
||||
sideImage="/images/home/avtourist-surgut.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "50+",
|
||||
text: "ПОЛЕЗНЫХ СТАТЕЙ"
|
||||
}}
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
/>
|
||||
|
||||
<BlogCategories categories={categories} activeCategory="Все" currentPage={currentPage} />
|
||||
|
||||
|
|
@ -167,3 +180,35 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const setupAnimations = () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:after-swap', setupAnimations);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import BlogHero from '@components/blog/BlogHero.astro';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
import BlogCategories from '@components/blog/BlogCategories.astro';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
import BlogPagination from '@components/blog/BlogPagination.astro';
|
||||
|
|
@ -27,7 +27,20 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
|
|||
{ label: `Страница ${currentPage}` }
|
||||
]}
|
||||
>
|
||||
<BlogHero />
|
||||
<PageHero
|
||||
badgeText="БЛОГ И СТАТЬИ"
|
||||
titleWhite="Полезные статьи"
|
||||
titleGold="для автовладельцев"
|
||||
description="Разбираем сложные юридические вопросы простым языком. Советы юриста по автоспорам, ДТП, ОСАГО и защите прав водителей."
|
||||
layout="with-image"
|
||||
sideImage="/images/home/avtourist-surgut.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "50+",
|
||||
text: "ПОЛЕЗНЫХ СТАТЕЙ"
|
||||
}}
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
/>
|
||||
|
||||
<BlogCategories categories={categories} activeCategory="Все" currentPage={currentPage} />
|
||||
|
||||
|
|
@ -168,3 +181,35 @@ const paginatedPosts = blogPosts.slice(startIndex, endIndex);
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const setupAnimations = () => {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target as HTMLElement;
|
||||
const delay = parseInt(el.dataset.delay || '0');
|
||||
|
||||
setTimeout(() => {
|
||||
el.classList.add('is-visible');
|
||||
}, delay);
|
||||
|
||||
observer.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.animate-on-scroll').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
};
|
||||
|
||||
setupAnimations();
|
||||
document.addEventListener('astro:after-swap', setupAnimations);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,33 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import PageHero from "@components/base/PageHero.astro";
|
||||
import CasesList from "@components/cases/CasesList.astro";
|
||||
---
|
||||
|
||||
<Layout
|
||||
title="Кейсы — выигранные дела автоюриста в Сургуте"
|
||||
description="Примеры выигранных дел по спорам со страховыми, возврату прав и другим автоспорам."
|
||||
description="Примеры выигранных дел по спорам со страховыми, возврату прав и другим автоспорам. Реальные результаты работы."
|
||||
canonicalLink={`${SITE_URL}/cases`}
|
||||
breadcrumbs={[
|
||||
{ label: 'Главная', href: '/' },
|
||||
{ label: 'Кейсы' }
|
||||
]}
|
||||
>
|
||||
<h1>Кейсы</h1>
|
||||
<PageHero
|
||||
badgeText="РЕЗУЛЬТАТЫ РАБОТЫ"
|
||||
titleWhite="Выигранные"
|
||||
titleGold="кейсы"
|
||||
description="Реальные примеры нашей работы по защите прав автовладельцев. Каждое дело — это история успеха, основанная на профессионализме и опыте."
|
||||
btnText="Получить консультацию"
|
||||
layout="with-image"
|
||||
sideImage="/images/home/avtourist-surgut.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "500+",
|
||||
text: "ВЫИГРАННЫХ ДЕЛ"
|
||||
}}
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
/>
|
||||
<CasesList />
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL, COMPANY } from '@constants';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
|
||||
// Логика авторизации (пока статичная переменная)
|
||||
const isAuthorized = false; // Измените на true, чтобы увидеть форму
|
||||
|
|
@ -15,23 +16,20 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
{ label: 'Контакты' }
|
||||
]}
|
||||
>
|
||||
<!-- Hero-секция -->
|
||||
<section class="contacts-hero">
|
||||
<div class="site-container">
|
||||
<div class="hero-content">
|
||||
<div class="badge animate-on-scroll" data-animation="fade-up">
|
||||
<span class="status-dot"></span>
|
||||
БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ
|
||||
</div>
|
||||
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
Свяжитесь <span class="text-gold">с нами</span>
|
||||
</h1>
|
||||
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<PageHero
|
||||
badgeText="БЕСПЛАТНАЯ КОНСУЛЬТАЦИЯ"
|
||||
titleWhite="Свяжитесь"
|
||||
titleGold="с нами"
|
||||
description="Мы всегда на связи и готовы помочь вам в решении автоспоров. Оставьте заявку или позвоните — первая консультация бесплатно."
|
||||
layout="with-image"
|
||||
sideImage="/images/home/avtourist-surgut.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "15",
|
||||
text: "МИНУТ НА СВЯЗИ"
|
||||
}}
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
/>
|
||||
|
||||
<!-- Карточки контактов -->
|
||||
<section class="contact-cards">
|
||||
|
|
@ -194,82 +192,6 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
</Layout>
|
||||
|
||||
<style>
|
||||
/* ===== HERO ===== */
|
||||
.contacts-hero {
|
||||
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
|
||||
padding: 8rem 0 4rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contacts-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.badge {
|
||||
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: 2rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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); }
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.text-gold { color: #eac26e; }
|
||||
|
||||
.description {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== CONTACT CARDS ===== */
|
||||
.contact-cards {
|
||||
padding: 5rem 0;
|
||||
|
|
@ -497,4 +419,4 @@ const isAuthorized = false; // Измените на true, чтобы увиде
|
|||
setupAnimations();
|
||||
setupForm();
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import PageHero from '@components/base/PageHero.astro';
|
||||
import ReviewCard from '@components/reviews/ReviewCard.astro';
|
||||
import VotingSummary from '@components/reviews/VotingSummary.astro';
|
||||
import { reviewsData, votingSummary } from '@data/reviewsData';
|
||||
|
|
@ -15,29 +16,26 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
|
|||
{ label: 'Отзывы' }
|
||||
]}
|
||||
>
|
||||
<section class="reviews-page">
|
||||
<!-- Hero-секция -->
|
||||
<section class="reviews-hero">
|
||||
<div class="site-container">
|
||||
<div class="hero-content">
|
||||
<div class="badge animate-on-scroll" data-animation="fade-up">
|
||||
<span class="status-dot"></span>
|
||||
ОТЗЫВЫ КЛИЕНТОВ
|
||||
</div>
|
||||
<h1 class="title animate-on-scroll" data-animation="fade-up" data-delay="100">
|
||||
Реальные истории <span class="text-gold">водителей</span> из Сургута
|
||||
</h1>
|
||||
<p class="description animate-on-scroll" data-animation="fade-up" data-delay="200">
|
||||
Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<PageHero
|
||||
badgeText="ОТЗЫВЫ КЛИЕНТОВ"
|
||||
titleWhite="Реальные истории"
|
||||
titleGold="водителей из Сургута"
|
||||
description="Узнайте, как мы помогли нашим клиентам решить их проблемы с автоспорами"
|
||||
layout="with-image"
|
||||
sideImage="/images/home/avtourist-surgut.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "95%",
|
||||
text: "ДОВОЛЬНЫХ КЛИЕНТОВ"
|
||||
}}
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
/>
|
||||
|
||||
<section class="reviews-page">
|
||||
<div class="site-container">
|
||||
|
||||
<!-- Блок статистики голосования -->
|
||||
<VotingSummary
|
||||
<VotingSummary
|
||||
averageRating={votingSummary.averageRating}
|
||||
totalVotes={votingSummary.totalVotes}
|
||||
totalReviews={votingSummary.totalReviews}
|
||||
|
|
@ -81,84 +79,7 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
|
|||
background: #f8fafc;
|
||||
}
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.reviews-hero {
|
||||
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
|
||||
padding: 8rem 0 4rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reviews-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.badge {
|
||||
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: 2rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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); }
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
margin: 0 0 1.5rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.text-gold { color: #eac26e; }
|
||||
|
||||
.description {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== GRID ===== */
|
||||
|
||||
.reviews-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
|
|
@ -235,10 +156,6 @@ import { reviewsData, votingSummary } from '@data/reviewsData';
|
|||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.reviews-hero {
|
||||
padding: 7rem 0 3rem;
|
||||
}
|
||||
|
||||
.reviews-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from '@layouts/Layout.astro';
|
||||
import { SITE_URL } from '@constants';
|
||||
import ServicesHeroServices from "@components/services/HeroServices.astro";
|
||||
import PageHero from "@components/base/PageHero.astro";
|
||||
import ServiceCategories from "@components/services/ServiceCategories.astro";
|
||||
---
|
||||
|
||||
|
|
@ -14,6 +14,20 @@ import ServiceCategories from "@components/services/ServiceCategories.astro";
|
|||
{ label: 'Услуги' }
|
||||
]}
|
||||
>
|
||||
<ServicesHeroServices />
|
||||
<ServiceCategories />
|
||||
<PageHero
|
||||
badgeText="АВТОЮРИСТ СУРГУТ & ЮГРА"
|
||||
titleWhite="Наши юридические"
|
||||
titleGold="услуги"
|
||||
description="Мы обеспечиваем экспертную защиту прав водителей в Сургуте и Ханты-Мансийском автономном округе. Профессиональный подход к сложным дорожным спорам с акцентом на результат."
|
||||
btnText="Получить помощь"
|
||||
layout="with-image"
|
||||
sideImage="/images/home/avtourist-surgut.avif"
|
||||
sideImageAlt="Автоюрист Сургут"
|
||||
experienceBadge={{
|
||||
number: "12+",
|
||||
text: "НАПРАВЛЕНИЙ ПРАКТИКИ"
|
||||
}}
|
||||
bgImage="/images/home/bg_hero.avif"
|
||||
/>
|
||||
<ServiceCategories />
|
||||
</Layout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue