From a30d38b5eeb6b2e4fed604c4134e3005b4d31fe0 Mon Sep 17 00:00:00 2001
From: MaryWylde <marykhachatryan13@gmail.com>
Date: Fri, 8 May 2026 15:05:04 +0400
Subject: [PATCH] chore: new article type - AI

---
 .../ArticleSection/ArticleSection.module.scss |  2 +-
 src/components/ArticlesHero/ArticlesHero.tsx  | 10 +++++---
 src/data/articlesBlog/en.ts                   |  2 ++
 src/data/articlesBlog/ru.ts                   |  2 ++
 src/layouts/ArticlesLayout/ArticlesLayout.tsx |  3 +++
 src/pages/articles.tsx                        | 25 ++++++++++++-------
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/ArticleSection/ArticleSection.module.scss b/src/components/ArticleSection/ArticleSection.module.scss
index b2c39cc..b31d03a 100644
--- a/src/components/ArticleSection/ArticleSection.module.scss
+++ b/src/components/ArticleSection/ArticleSection.module.scss
@@ -8,7 +8,7 @@
     flex-wrap: wrap;
     gap: 28px;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
   }
 
   .showMoreButtonWrapper {
diff --git a/src/components/ArticlesHero/ArticlesHero.tsx b/src/components/ArticlesHero/ArticlesHero.tsx
index f1a1536..2f184ab 100644
--- a/src/components/ArticlesHero/ArticlesHero.tsx
+++ b/src/components/ArticlesHero/ArticlesHero.tsx
@@ -14,6 +14,7 @@ type ArticlesHeroProps = {
   isDarkTheme?: boolean;
   locale?: string;
   hasThoughtsArticles?: boolean;
+  hasAIArticles?: boolean;
 };
 const ArticlesHero: FC<ArticlesHeroProps> = ({
   title,
@@ -22,10 +23,13 @@ const ArticlesHero: FC<ArticlesHeroProps> = ({
   isDarkTheme,
   locale,
   hasThoughtsArticles,
+  hasAIArticles,
 }) => {
-  const visibleCategories = hasThoughtsArticles
-    ? categories
-    : categories.filter(category => category.tagId !== 'Thoughts');
+  const visibleCategories = categories.filter(category => {
+    if (category.tagId === 'Thoughts') return hasThoughtsArticles;
+    if (category.tagId === 'AI') return hasAIArticles;
+    return true;
+  });
 
   return (
     <section
diff --git a/src/data/articlesBlog/en.ts b/src/data/articlesBlog/en.ts
index 61e173b..b4cd47a 100644
--- a/src/data/articlesBlog/en.ts
+++ b/src/data/articlesBlog/en.ts
@@ -1,8 +1,10 @@
 const en = {
   uxcore: 'UX Core',
+  ai: 'Artificial Intelligence & Vibecoding',
   thoughts: 'Thoughts',
   pm: 'Project Management',
   uxcoreId: 'UX Core',
+  aiId: 'AI',
   thoughtsId: 'Thoughts',
   pmId: 'Project Management',
 };
diff --git a/src/data/articlesBlog/ru.ts b/src/data/articlesBlog/ru.ts
index c53a05b..d9c07c5 100644
--- a/src/data/articlesBlog/ru.ts
+++ b/src/data/articlesBlog/ru.ts
@@ -1,8 +1,10 @@
 const ru = {
   uxcore: 'UX Core',
+  ai: 'Искусственный Интеллект и Вайбкодинг',
   thoughts: 'Разное',
   pm: 'Управление проектами',
   uxcoreId: 'UX Core',
+  aiId: 'AI',
   thoughtsId: 'Thoughts',
   pmId: 'Project Management',
 };
diff --git a/src/layouts/ArticlesLayout/ArticlesLayout.tsx b/src/layouts/ArticlesLayout/ArticlesLayout.tsx
index e2ee1c2..cadfeb3 100644
--- a/src/layouts/ArticlesLayout/ArticlesLayout.tsx
+++ b/src/layouts/ArticlesLayout/ArticlesLayout.tsx
@@ -18,6 +18,7 @@ type ArticlesProps = {
   locale: string;
   isDarkTheme?: boolean;
   hasThoughtsArticles?: boolean;
+  hasAIArticles?: boolean;
 };
 
 const ArticlesLayout: FC<ArticlesProps> = ({
@@ -29,6 +30,7 @@ const ArticlesLayout: FC<ArticlesProps> = ({
   locale,
   isDarkTheme,
   hasThoughtsArticles,
+  hasAIArticles,
 }) => {
   const articleRef = useRef<HTMLElement>(null);
 
@@ -51,6 +53,7 @@ const ArticlesLayout: FC<ArticlesProps> = ({
         isDarkTheme={isDarkTheme}
         locale={locale}
         hasThoughtsArticles={hasThoughtsArticles}
+        hasAIArticles={hasAIArticles}
       />
       <div
         className={cn(styles.mainContent, {
diff --git a/src/pages/articles.tsx b/src/pages/articles.tsx
index b15aaa3..9533e31 100644
--- a/src/pages/articles.tsx
+++ b/src/pages/articles.tsx
@@ -74,6 +74,7 @@ type ArticleProps = {
 };
 const Articles: FC<ArticleProps> = ({ articleBlog }) => {
   const uxCoreRef = useRef<HTMLElement>(null);
+  const aiRef = useRef<HTMLElement>(null);
   const thoughtsRef = useRef<HTMLElement>(null);
   const pmRef = useRef<HTMLElement>(null);
   const router = useRouter();
@@ -81,7 +82,7 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
   const chosenLocale = locale === 'ru' ? 'ru' : 'en';
   const [{}, { isDarkTheme }] = useGlobals();
 
-  const { uxcore, thoughts, pm, thoughtsId, uxcoreId, pmId } =
+  const { uxcore, ai, thoughts, pm, thoughtsId, uxcoreId, aiId, pmId } =
     articlesBlog[chosenLocale];
   const { title, description } = articleBlog.attributes;
   const { pageTitle, keywords, seoDescription, seoTitle } =
@@ -98,8 +99,9 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
   const allArticles = articleBlog.articles;
   const categories = [
     { id: 1, name: uxcore, scrollToRef: uxCoreRef, tagId: uxcoreId },
-    { id: 2, name: thoughts, scrollToRef: thoughtsRef, tagId: thoughtsId },
-    { id: 3, name: pm, scrollToRef: pmRef, tagId: pmId },
+    { id: 2, name: ai, scrollToRef: aiRef, tagId: aiId },
+    { id: 3, name: thoughts, scrollToRef: thoughtsRef, tagId: thoughtsId },
+    { id: 4, name: pm, scrollToRef: pmRef, tagId: pmId },
   ];
 
   const groupedArticles = categories.map(category => ({
@@ -109,12 +111,16 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
     tagId: category.tagId,
   }));
 
-  const hasThoughtsArticles = groupedArticles.some(
-    category =>
-      category.tagId === 'Thoughts' &&
-      Array.isArray(category.articles) &&
-      category.articles.length > 0,
-  );
+  const hasArticlesForTag = (tagId: string) =>
+    groupedArticles.some(
+      category =>
+        category.tagId === tagId &&
+        Array.isArray(category.articles) &&
+        category.articles.length > 0,
+    );
+
+  const hasThoughtsArticles = hasArticlesForTag('Thoughts');
+  const hasAIArticles = hasArticlesForTag('AI');
 
   return (
     <>
@@ -133,6 +139,7 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
       <ArticlesLayout
         title={title}
         hasThoughtsArticles={hasThoughtsArticles}
+        hasAIArticles={hasAIArticles}
         categories={categories}
         description={description}
         groupedArticles={groupedArticles}