add correct news templates

src/components/CategoryBadge.astro

@@ -2,10 +2,18 @@
 export interface Props {
   name?: string;
   color?: string;
+  href?: string;
+  isNews?: boolean;
   class?: string;
 }
 
-const { name, color = '', class: className = '' } = Astro.props;
+const { 
+  name, 
+  color = '', 
+  href,
+  isNews = false,
+  class: className = '' 
+} = Astro.props;
 
 function extractColorClass(colorString: string): string {
   if (!colorString) return 'bg-blue';
@@ -32,10 +40,100 @@ function extractColorClass(colorString: string): string {
 }
 
 const bgClass = extractColorClass(color);
+const Tag = href ? 'a' : 'span';
 ---
 
-{name && (
+<span class={`sticker-group${className ? ` ${className}` : ''}`}>
-  <div class={`post-category-badge ${bgClass}${className ? ` ${className}` : ''}`}>
+  {/* Плашка новости, если isNews = true */}
+  {isNews && (
+    <span class="category-badge bg-white text-black">
+      <a href="/news">новости</a>
+    </span>
+  )}
+  
+  {/* Плашка рубрики  */}
+  {name && (
+    <Tag
+      href={href}
+      class={`category-badge ${bgClass} text-white`}
+      onClick={(e) => e.stopPropagation()}
+    >
       {name}
-  </div>
+    </Tag>
-)}
+  )}
+</span>
+
+<style is:global>
+  /* Группа плашек */
+  .sticker-group {
+    position: absolute;
+    top: 15px;
+    right: 18px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    max-width: 90%;
+  }
+
+  .category-badge a:hover {
+    transition: opacity 0.2s ease;
+  }
+
+  /* Базовые стили для всех плашек */
+  .category-badge {
+    display: inline-block;
+    padding: 6px 12px; 
+    font-size: .6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    line-height: 1;
+    text-decoration: none;
+    max-width: 150px;
+  }
+
+  /* Цветовые классы */
+  .bg-white { background-color: #ffffff; }
+  .bg-black { background-color: #000000; }
+  .bg-yellow { background-color: #fbbf24; }
+  .bg-blue { background-color: #2563eb; }
+  .bg-green { background-color: #16a34a; }
+  .bg-red { background-color: #dc2626; }
+  .bg-orange { background-color: #ea580c; }
+  .bg-gray { background-color: #6b7280; }
+  
+  .text-black { color: #000000; }
+  .text-white { color: #ffffff; }
+
+  @media (max-width: 767px) {
+    .sticker-group {
+      top: 12px;
+      right: 12px;
+    }
+    
+    .category-badge {
+      padding: 4px 8px;
+      font-size: 10px;
+      max-width: 120px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .sticker-group {
+      top: 10px;
+      right: 10px;
+      gap: 4px;
+    }
+    
+    .category-badge {
+      padding: 3px 6px;
+      font-size: 9px;
+      max-width: 100px;
+    }
+  }
+</style>

src/components/ContentGrid.astro

@@ -85,17 +85,14 @@ function shouldBeLarge(index: number): boolean {
               <div class="post-image-placeholder"></div>
             )}
 
+
           {item.categories?.nodes?.[0] && (
-              <a 
-                href={`/${item.categories.nodes[0].slug}`}
-                class="category-badge-link"
-                onClick={(e) => e.stopPropagation()}
-              >
             <CategoryBadge
               name={item.categories.nodes[0].name}
               color={item.categories.nodes[0].color}
+              href={`/${item.categories.nodes[0].slug}`}
+              isNews={item.__typename === "ANew"}
             />
-              </a>
           )}
             
             <div class="post-content-overlay">

src/components/Header/Header.astro

@@ -1,48 +1,50 @@
 ---
+const { category, contentType } = Astro.props;
 
-    const { category } = Astro.props;
+import Stores from './LazyStores.astro';
-
+import MainMenu from '@components/MainMenu.astro';
-    import Stores from './LazyStores.astro';
-    import MainMenu from '@components/MainMenu.astro';
-
-    const MENU_ID = 3340; // 103246 (бургер 1).  103247 (бургер 2 )
-    let menuItems = [];
 
+const MENU_ID = 3340; // 103246 (бургер 1).  103247 (бургер 2 )
+let menuItems = [];
 ---
 
 <header class="header" itemscope itemtype="https://schema.org/WPHeader">
+  <div class="top-bar">
+    <a href="/"><img alt="Профиль" width="249" height="55" src="https://cdn.profile.ru/wp-content/themes/profile/assets/img/profile-logo-delovoy.svg"></a>
     
-<div class="top-bar">
-    <img alt="Профиль" width="249" height="55" src="https://cdn.profile.ru/wp-content/themes/profile/assets/img/profile-logo-delovoy.svg">
     {category && (
       <div class="header__subtitle">
+        {contentType === 'news' && (
+          <span class="header__news-badge"><a href="/news">Новости</a></span>
+        )}   
         <a href={`/${category.slug}`}>{category.name}</a>
       </div>
     )}    
+    
     <Stores />
-</div>
+  </div>
-
-<MainMenu menuId={MENU_ID} />
 
+  <MainMenu menuId={MENU_ID} />
 </header>
 
-
 <style>
-
+  .top-bar {
-    .top-bar{
     display: flex;
     justify-content: space-between;
     align-items: center; 
   }
 
-    .header__subtitle{
+  .header__subtitle {
     font-size: 22px;
     font-weight: bold;
     margin-left: 42px;
     position: relative;
+    display: flex;
+    align-items: center;
+    gap: 10px;
   }
 
-    .header__subtitle::before{
+  .header__subtitle::before {
     content: '';
     position: absolute;
     top: 50%;
@@ -53,4 +55,28 @@
     transform: translate(0, -40%);
   }
 
+  .header__news-badge {
+    color: inherit;
+    font-weight: inherit;
+    position: relative;
+    padding-right: 10px;
+  }
+
+  .header__news-badge::after {
+    content: '|';
+    position: absolute;
+    right: -2px;
+    color: inherit;
+    font-weight: inherit;
+  }
+
+  .header__subtitle a {
+    text-decoration: none;
+    color: inherit;
+    font-weight: inherit;
+  }
+
+  .header__subtitle a:hover {
+    text-decoration: underline;
+  }
 </style>

src/layouts/MainLayout.astro

@@ -1,6 +1,6 @@
 ---
 
-const { title, description, category } = Astro.props;
+const { title, description, category, contentType } = Astro.props;
 
 import Header from '../components/Header/Header.astro';
 import Header_lite from '../components/Header/Header_lite.astro';
@@ -28,7 +28,8 @@ import '../styles/global.css';
 			</div>
 		</div>	
 		<div class="container">
-			<Header category={category} />
+			<Header category={category} 
+			contentType={contentType}/>
 			<main>
 				<slot></slot>
 			</main>

src/pages/index.astro

@@ -19,7 +19,6 @@ import MainLine from '@components/MainLine.astro';
 import HomeNews from "@components/HomeNews.astro";
 
 
-
 //ISR
 export const prerender = false;
 ---

src/pages/news/[...slug].astro

@@ -3,6 +3,7 @@ import MainLayout from '@layouts/MainLayout.astro';
 import NewsSingle from '@components/NewsSingle.astro';
 
 import { detectPageType } from '@lib/detect-page-type';
+import { wpInfo } from '@lib/wpInfo';
 import { getAnewById } from '@lib/api/posts';
 
 export const prerender = false;
@@ -10,6 +11,14 @@ export const prerender = false;
 const pathname = Astro.url.pathname;
 const pageInfo = detectPageType(pathname);
 
+
+// Определяем категорию
+if (!wpInfo.isLoaded()) {
+    await wpInfo.fetchAllCategories();
+}
+
+const category = wpInfo.getCategoryBySlug(pageInfo.categorySlug);
+
 const fullUrl = Astro.url.href;
 const fullPath = Astro.url.origin + Astro.url.pathname;
 
@@ -39,7 +48,11 @@ if (import.meta.env.DEV) {
 }
 ---
 
-<MainLayout>
+<MainLayout
+  description="Информационное агентство Деловой журнал Профиль"
+  category={category}
+  contentType="news"
+>
 
   {pageInfo.type === 'single' && post ? (
     <NewsSingle post={post} pageInfo={pageInfo} />

src/pages/news/index.astro

@@ -0,0 +1,12 @@
+---
+
+import MainLayout from '@layouts/MainLayout.astro';
+
+---
+
+<MainLayout 
+  title=Новости
+  description=Новости
+>
+<h1>Все новости</h1>
+</MainLayout>

src/styles/components/ContentGrid.css

@@ -97,26 +97,7 @@
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
-/* Бейдж категории */
+
-.post-category-badge {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: #2563eb;
-  color: white;
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  z-index: 2;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-  max-width: 80%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
 
 /* Оверлей с контентом */
 .post-content-overlay {
@@ -137,6 +118,10 @@
   gap: 8px;
 }
 
+
+
+
+
 .post-meta-overlay {
   margin-bottom: 3px;
 }
@@ -160,6 +145,11 @@
   text-overflow: ellipsis;
 }
 
+.category-badge-white{
+  background-color: white;
+  color: black;
+}
+
 .author-name {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.85);