Новые правки в компоенты

frontend/src/components/blog/RelatedPosts.astro

@@ -1,5 +1,4 @@
 ---
-import BlogCard from '@components/blog/BlogCard.astro';
 import { getPostImageUrl } from '@lib/pb';
 
 interface Post {
@@ -22,7 +21,6 @@ interface Props {
 
 const { posts, currentSlug } = Astro.props;
 
-// Форматируем дату
 const formatDate = (date: string) => {
   return new Date(date).toLocaleDateString('ru-RU', {
     day: 'numeric',
@@ -31,46 +29,51 @@ const formatDate = (date: string) => {
   });
 };
 
-// Фильтруем текущую статью
-const filteredPosts = currentSlug 
-  ? posts.filter(post => post.slug !== currentSlug).slice(0, 3)
-  : posts.slice(0, 3);
+const filteredPosts = currentSlug
+    ? posts.filter((post: Post) => post.slug !== currentSlug)
+    : posts;
 ---
 
 <section class="related-posts">
-  <h3 class="section-title">Читайте также</h3>
+  <h3 class="section-title">Похожие статьи</h3>
 
   <div class="related-grid">
-    {filteredPosts.map((post) => (
-      <BlogCard
-        title={post.title}
-        description={post.description}
-        category={post.category}
-        categoryColor={post.categoryColor}
-        date={formatDate(post.date)}
-        readTime={post.readTime}
-        readmeTime={post.readmeTime}
-        image={getPostImageUrl(post)}
-        slug={`/blog/${post.slug}`}
-      />
+    {filteredPosts.slice(0, 3).map((post: Post) => (
+        <Fragment>
+          <article class="blog-card-wrapper">
+            <a href={`/blog/${post.slug}`} class="card-link">
+              <div class="card-image">
+                <img src={getPostImageUrl(post)} alt={post.title} loading="lazy" width="400" height="250" />
+                <span class={`category-badge ${post.categoryColor || 'bg-gold'}`}>{post.category}</span>
+              </div>
+              <div class="card-content">
+                <h3 class="card-title">{post.title}</h3>
+                <p class="card-description">{post.description}</p>
+                <div class="card-meta">
+                  <span class="meta-item">{formatDate(post.date)}</span>
+                  <span class="meta-item">{post.readTime} мин</span>
+                </div>
+              </div>
+            </a>
+          </article>
+        </Fragment>
     ))}
   </div>
 </section>
 
-<style is:global>
+<style>
   .related-posts {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 2px solid #f1f5f9;
   }
 
-  /* Сбрасываем нумерацию заголовков от ArticleLayout */
-  .related-posts .blog-card .card-title {
+  .related-posts .blog-card-wrapper .card-title {
     counter-increment: none !important;
     display: block !important;
   }
 
-  .related-posts .blog-card .card-title::before {
+  .related-posts .blog-card-wrapper .card-title::before {
     display: none !important;
   }
 
@@ -80,6 +83,11 @@ const filteredPosts = currentSlug
     font-weight: 800;
     margin: 0 0 2rem;
     letter-spacing: -0.02em;
+    font-family: 'Merriweather', Georgia, serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
   }
 
   .related-grid {
@@ -88,6 +96,80 @@ const filteredPosts = currentSlug
     gap: 2rem;
   }
 
+  .blog-card-wrapper {
+    border-radius: 1rem;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+  }
+
+  .blog-card-wrapper:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
+  }
+
+  .blog-card-wrapper .card-link {
+    text-decoration: none;
+    color: inherit;
+    display: block;
+  }
+
+  .blog-card-wrapper .card-image {
+    position: relative;
+    aspect-ratio: 16/10;
+    overflow: hidden;
+  }
+
+  .blog-card-wrapper .card-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .blog-card-wrapper:hover .card-image img {
+    transform: scale(1.05);
+  }
+
+  .blog-card-wrapper .category-badge {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .blog-card-wrapper .card-content {
+    padding: 1.25rem;
+  }
+
+  .blog-card-wrapper .card-title {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #1e293b;
+  }
+
+  .blog-card-wrapper .card-description {
+    font-size: 0.875rem;
+    color: #64748b;
+    margin-bottom: 1rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .blog-card-wrapper .card-meta {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.75rem;
+    color: #94a3b8;
+  }
+
   @media (max-width: 1024px) {
     .related-grid {
       grid-template-columns: repeat(2, 1fr);
@@ -99,5 +181,15 @@ const filteredPosts = currentSlug
       grid-template-columns: 1fr;
       gap: 1.5rem;
     }
+
+    .section-title {
+      font-size: 1.25rem;
+      margin-bottom: 1.5rem;
+    }
+
+    .related-posts {
+      margin-top: 2rem;
+      padding-top: 1.5rem;
+    }
   }
 </style>