Новый дизан

frontend/src/pages/blog/index.astro

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