Новые изменения в компоенты

AGENTS.md

@@ -12,6 +12,7 @@
     - Ассистент должен объяснить, какие изменения планируется внести
     - Необходимо указать, в какие файлы будут внесены изменения
     - Следует объяснить последствия предполагаемых изменений
+    - Внимательно читай промпт и не выходи за рамки описанных в нем измнений 
 
 3. **Безопасность кода**
     - Все изменения должны проходить проверку на безопасность

frontend/src/components/base/PageHero.astro

@@ -364,6 +364,7 @@ const showImage = layout === 'with-image' && sideImage;
         border-radius: 8px;
         box-shadow: 0 15px 35px rgba(0,0,0,0.2);
         min-width: 180px;
+        text-align: center;
     }
 
     .exp-number {
@@ -372,6 +373,7 @@ const showImage = layout === 'with-image' && sideImage;
         color: #1e3050;
         line-height: 1;
         display: block;
+        text-align: center;
     }
 
     .exp-text {
@@ -379,6 +381,7 @@ const showImage = layout === 'with-image' && sideImage;
         font-weight: 800;
         color: #535e6c;
         text-transform: uppercase;
+        text-align: center;
     }
 
     /* --- АДАПТАЦИЯ --- */

frontend/src/components/blog/PostReactionButtons.astro

@@ -96,6 +96,9 @@ const { initialLikes = 0, initialDislikes = 0, postId } = Astro.props;
       padding: 0.4rem 0.75rem;
       font-size: 0.8rem;
     }
+    .post-reactions {
+      align-items: flex-end;
+    }
   }
 
   :global(.toast-link) {

frontend/src/components/blog/PostSocialShare.astro

@@ -109,6 +109,7 @@ const encodedUrl = encodeURIComponent(url);
   @media (max-width: 768px) {
     .post-social-share {
       flex-wrap: wrap;
+      align-items: flex-end;
     }
   }
 </style>

frontend/src/layouts/ArticleLayout.astro

@@ -19,6 +19,7 @@ export interface Props {
   heroImage: string;
   heroAlt: string;
   category: string;
+  categoryColor?: string;
   postTitle: string;
   date: string;
   author: string;
@@ -39,6 +40,7 @@ const {
   heroImage,
   heroAlt,
   category,
+  categoryColor = 'bg-gold',
   postTitle,
   date,
   author,
@@ -87,8 +89,8 @@ const {
       <div class="site-container h-full">
         <div class="article-hero-inner">
           <div class="article-hero-top">
-            <div class="category-strip">
-              <span class="category-text">{category}</span>
+            <div class={`category-strip ${categoryColor}`}>
+              <span>{category}</span>
             </div>
             <h1 class="article-title">{postTitle}</h1>
           </div>
@@ -206,8 +208,12 @@ const {
   .article-hero-inner { display: flex; flex-direction: column; height: 100%; padding: 3rem 0; }
   .article-hero-top { margin-bottom: 2rem; }
 
-  .category-strip { background: #eac26e; padding: 0.5rem 1.5rem; display: inline-block; border-radius: 4px; margin-bottom: 2rem; }
-  .category-text { color: #0a1a2e; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Merriweather', Georgia, serif; }
+  .category-strip { padding: 0.5rem 1.5rem; display: inline-block; border-radius: 0.5rem; margin-bottom: 2rem; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-family: 'Merriweather', Georgia, serif; }
+  .category-strip.bg-gold { background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%); color: #1e293b; }
+  .category-strip.bg-blue { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); color: #ffffff; }
+  .category-strip.bg-red { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); color: #ffffff; }
+  .category-strip.bg-green { background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%); color: #ffffff; }
+
   .article-title { color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.15; max-width: 950px; text-shadow: 0 4px 15px rgba(0,0,0,0.4); font-family: 'Merriweather', Georgia, serif; }
 
   .article-hero-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
@@ -240,10 +246,9 @@ const {
     .article-hero { height: auto; min-height: 385px; }
     .article-title { font-size: 1.5rem; text-align: center; }
     .article-hero-top { text-align: center; display: flex; flex-direction: column; align-items: center; }
-    .category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; }
-    .category-text { font-size: 0.7rem; }
+    .category-strip { margin-bottom: 1.5rem; padding: 0.4rem 1rem; font-size: 0.7rem; }
     .article-hero-bottom { flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
-    .article-actions { width: 100%; justify-content: center; align-items: center; gap: 1.5rem; }
+    .article-actions { width: 100%; justify-content: center; align-items: flex-end; gap: 1.5rem; }
     .share-wrapper { display: flex; align-items: flex-end; }
     .article-content-wrapper { padding: 2.5rem 1.5rem; padding-top: 0; }
     .article-hero-inner { padding: 2rem 0; }

frontend/src/pages/blog/[slug].astro

@@ -66,6 +66,7 @@ const heroImage = getPostImageUrl(post);
   heroImage={heroImage}
   heroAlt={post.title}
   category={post.category}
+  categoryColor={post.categoryColor}
   postTitle={post.title}
   date={formatDate(post.date)}
   author={post.author}

frontend/src/pages/blog/index.astro

@@ -21,6 +21,8 @@ const formatDate = (date: string) => {
   const year = new Date().getFullYear().toString().slice(-2);
   return `${day}/${month}/${year}`;
 };
+
+const postsCountText = String(total);
 ---
 
 <Layout
@@ -41,7 +43,7 @@ const formatDate = (date: string) => {
 		sideImage="/images/blog/blogImg.avif"
 		sideImageAlt="Автоюрист Сургут"
 		experienceBadge={{
-			number: "50+",
+			number: postsCountText,
 			text: "ПОЛЕЗНЫХ СТАТЕЙ"
 		}}
 		bgImage="/images/blog/blogBg.avif"