astro_avtourist/frontend/src/pages/blog/index.astro

---
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 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>

			<!-- Пагинация -->
			<BlogPagination currentPage={currentPage} totalPages={totalPages} />
		</div>
	</section>

	<!-- CTA-блок -->
	<section class="blog-cta">
		<div class="site-container">
			<div class="cta-content">
				<h2 class="cta-title">Нужна консультация юриста?</h2>
				<p class="cta-text">
					Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации
				</p>
				<button class="cta-button" id="consultation-btn" data-modal-target="consultation-modal">
					Записаться на консультацию
				</button>
			</div>
		</div>
	</section>

	<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;
	}

	/* ===== CTA ===== */
	.blog-cta {
		padding: 5rem 0;
		background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
		position: relative;
		overflow: hidden;
	}

	.blog-cta::before {
		content: '';
		position: absolute;
		bottom: -30%;
		left: -10%;
		width: 500px;
		height: 500px;
		background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
		border-radius: 50%;
	}

	.cta-content {
		position: relative;
		z-index: 1;
		text-align: center;
		max-width: 600px;
		margin: 0 auto;
	}

	.cta-title {
		font-size: clamp(1.75rem, 4vw, 2.5rem);
		font-weight: 800;
		color: #ffffff;
		margin: 0 0 1rem;
		letter-spacing: -0.02em;
	}

	.cta-text {
		color: rgba(255, 255, 255, 0.75);
		font-size: 1.1rem;
		line-height: 1.6;
		margin: 0 0 2rem;
	}

	.cta-button {
		background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
		color: #1e293b;
		border: none;
		padding: 1rem 2.5rem;
		border-radius: 0.75rem;
		font-size: 1.1rem;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
	}

	.cta-button:hover {
		transform: translateY(-3px);
		box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
	}

	/* ===== 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>