153 lines
4.2 KiB
Text
153 lines
4.2 KiB
Text
---
|
||
import Layout from '@layouts/Layout.astro';
|
||
import { SITE_URL } from '@constants';
|
||
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';
|
||
import Pagination from '@components/base/Pagination.astro';
|
||
import CTA from '@components/base/CTA.astro';
|
||
import SearchModal from '@components/base/SearchModal.astro';
|
||
import { blogPosts, categories } from '@data/blogData';
|
||
|
||
const POSTS_PER_PAGE = 6;
|
||
const currentPage = 1;
|
||
const totalPages = Math.ceil(blogPosts.length / POSTS_PER_PAGE);
|
||
|
||
const startIndex = 0;
|
||
const endIndex = POSTS_PER_PAGE;
|
||
const paginatedPosts = blogPosts.slice(startIndex, endIndex);
|
||
---
|
||
|
||
<Layout
|
||
title="Блог — автоюрист в Сургуте"
|
||
description="Полезные статьи и советы по автоспорам, ДТП, ОСАГО, лишению прав и защите прав водителей."
|
||
canonicalLink={`${SITE_URL}/blog`}
|
||
breadcrumbs={[
|
||
{ label: "Главная", href: "/" },
|
||
{ label: "Блог" }
|
||
]}
|
||
>
|
||
<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} />
|
||
|
||
<!-- Сетка статей -->
|
||
<section class="blog-grid-section">
|
||
<div class="site-container">
|
||
<div class="blog-grid" id="blog-grid">
|
||
{paginatedPosts.map((post) => (
|
||
<article class="blog-card-wrapper" data-category={post.category}>
|
||
<BlogCard
|
||
title={post.title}
|
||
description={post.description}
|
||
category={post.category}
|
||
categoryColor={post.categoryColor}
|
||
date={post.date}
|
||
readTime={post.readTime}
|
||
imageUrl={post.imageUrl}
|
||
slug={post.slug}
|
||
/>
|
||
</article>
|
||
))}
|
||
</div>
|
||
|
||
<!-- Пагинация -->
|
||
<Pagination
|
||
currentPage={currentPage}
|
||
totalPages={totalPages}
|
||
baseUrl="/blog"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA-блок -->
|
||
<CTA
|
||
icon="consult"
|
||
title="Нужна консультация юриста?"
|
||
description="Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации"
|
||
btnText="Записаться на консультацию"
|
||
/>
|
||
|
||
<SearchModal />
|
||
</Layout>
|
||
|
||
<style>
|
||
.blog-grid-section {
|
||
padding: 3rem 0 0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.blog-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
.blog-card-wrapper {
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
/* ===== RESPONSIVE ===== */
|
||
@media (max-width: 1024px) {
|
||
.blog-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.blog-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.blog-cta {
|
||
padding: 3rem 0;
|
||
}
|
||
}
|
||
</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>
|