Новый файл README.md

frontend/src/content/blog/car-dealer-dispute.mdx

@@ -1,12 +1,12 @@
 ---
 title: "Спор с автосалоном: как вернуть неисправный автомобиль"
 description: "Права потребителя при покупке автомобиля с дефектами. Закон «О защите прав потребителей» и судебная практика в Сургуте."
-author: "Юрист АВ"
+author: "Автоюрист"
 category: "Автосалоны"
 categoryColor: "bg-gold"
 date: 2024-02-20
 readTime: "11 мин"
-imageUrl: "/images/blog/car-dealer-dispute.avif"
+imageUrl: "/images/posts/2026/04/car-dealer-dispute.avif"
 draft: false
 ---
 

frontend/src/pages/blog/index.astro

@@ -114,7 +114,7 @@ const categories = ['Все', ...new Set(posts.map((post: any) => post.data.cate
 	}
 
 	.blog-card-wrapper {
-		transition: opacity 0.3s ease, transform 0.3s ease;
+		transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s ease;
 	}
 
 	/* ===== RESPONSIVE ===== */
@@ -164,6 +164,44 @@ const categories = ['Все', ...new Set(posts.map((post: any) => post.data.cate
 		});
 	};
 
+	const setupFilter = () => {
+		const buttons = document.querySelectorAll('.category-btn');
+		const cards = document.querySelectorAll('.blog-card-wrapper');
+		const grid = document.getElementById('blog-grid');
+
+		buttons.forEach((btn) => {
+			btn.addEventListener('click', (e) => {
+				e.preventDefault();
+				const category = btn.getAttribute('data-category');
+
+				// Обновляем активную кнопку
+				buttons.forEach(b => b.classList.remove('active'));
+				btn.classList.add('active');
+
+				// Фильтруем карточки
+				cards.forEach((card) => {
+					const cardCategory = card.getAttribute('data-category');
+					if (category === 'Все' || cardCategory === category) {
+						card.style.display = '';
+						card.style.opacity = '0';
+						card.style.transform = 'translateY(20px)';
+						requestAnimationFrame(() => {
+							card.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
+							card.style.opacity = '1';
+							card.style.transform = 'translateY(0)';
+						});
+					} else {
+						card.style.display = 'none';
+					}
+				});
+			});
+		});
+	};
+
 	setupAnimations();
-	document.addEventListener('astro:after-swap', setupAnimations);
+	setupFilter();
+	document.addEventListener('astro:after-swap', () => {
+		setupAnimations();
+		setupFilter();
+	});
 </script>