Refactor blog components for improved tag filtering and related content display

- Added `getBlogTagFacets` API call to fetch blog tags based on city scope.
- Updated `BlogsPage` to read selected tag from URL and handle tag changes with URL updates.
- Modified `Title` component to display tags from the new API and reflect active tag state.
- Enhanced breadcrumb navigation to link categories to their respective pages.
- Adjusted related content section to display articles from the same category and fixed layout issues.
- Corrected heading hierarchy across various components for better SEO compliance.
- Ensured consistent styling and spacing in related content items.

components/blog/detail/index.js

@@ -6,7 +6,7 @@ import CommentUser from "./commentUser";
 
 function Detail({ data }) {
   return (
-    <div className="w-full lg:w-[68%]">
+    <div className="w-full lg:flex-1 lg:min-w-0">
       <Caption data={data} />
       <Faq data={data} />
       <Sources data={data} />

components/blog/head/index.js

@@ -1,6 +1,9 @@
 import Link from "next/link";
 import { convertTimestampToJalali } from "@/helper";
 
+const crumbClass =
+  "text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal";
+
 function Head({ data, cityName }) {
   const firstTag = data?.tag?.[0];
   const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
@@ -11,29 +14,32 @@ function Head({ data, cityName }) {
 
   return (
     <div>
-      <div className="flex items-center justify-start gap-1">
-        <Link
-          href="/blogs"
-          className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal hover:text-[#525252]"
-        >
+      <nav
+        aria-label="مسیر"
+        className="flex flex-wrap items-center justify-start gap-1"
+      >
+        <Link href="/blogs" className={`${crumbClass} hover:text-[#525252]`}>
           بلاگ
         </Link>
-        <span className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-          {">"}
-        </span>
-        {firstTag && (
+        <span className={crumbClass}>{">"}</span>
+        {firstTag?.name && (
           <>
-            <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
-              {firstTag.name} {">"}
-            </p>
+            {/* دسته‌بندی خودش یک صفحهٔ مقصد دارد: همان لیست مقاله‌ها فیلترشده. */}
+            <Link
+              href={`/blogs?tag=${encodeURIComponent(firstTag.name)}`}
+              className={`${crumbClass} hover:text-[#525252]`}
+            >
+              {firstTag.name}
+            </Link>
+            <span className={crumbClass}>{">"}</span>
           </>
         )}
-        <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+        <span className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
           {data?.title}
-        </p>
-      </div>
+        </span>
+      </nav>
       <div>
-        <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
+        <h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[18px] sm:text-[22px] md:text-[26px] lg:text-[30px] font-bold leading-[1.6]">
           {data?.title}
         </h1>
       </div>

components/blog/relatedContent/Item.js

@@ -9,7 +9,7 @@ function Item({ data, idx, loading }) {
   const createdDate = data?.created ? convertTimestampToJalali(data.created) : "";
 
   return (
-    <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
+    <li className="flex w-full relative items-start justify-start gap-[8px] py-[12px]">
       <CustomLoading width={80} height={72} loading={loading}>
         <Link href={`/blog/${data.uuid}`}>
           <img
@@ -19,12 +19,13 @@ function Item({ data, idx, loading }) {
           />
         </Link>
       </CustomLoading>
-      <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
+      <div className="flex min-w-0 flex-col gap-[6px] items-start justify-start">
         <TextLoading width={150} height={18} loading={loading}>
           <Link href={`/blog/${data.uuid}`}>
-            <h2 className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
+            {/* h3 چون h2 با تیترهای خودِ متن مقاله (.blog-content h2) هم‌رده می‌شد. */}
+            <h3 className="text-[#3B3B3B] text-[14px] md:text-[15px] font-bold leading-[1.8] line-clamp-2">
               {data.title}
-            </h2>
+            </h3>
           </Link>
         </TextLoading>
         <TextLoading width={110} height={18} loading={loading}>

components/blog/relatedContent/index.js

@@ -3,13 +3,15 @@ import UnderlineLG from "@/components/icons/UnderlineLG";
 import React from "react";
 import Item from "./Item";
 
+// عرض ستون ثابت است: با lg:w-fit عرض را بلندترین عنوان تعیین می‌کرد و با هر
+// مقاله جابه‌جا می‌شد.
 function RelatedContent({ data, loading }) {
   return (
-    <div className="p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
+    <div className="p-[12px] w-full lg:w-[320px] lg:shrink-0 md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
       <AnimationTextHead text="مطالب مرتبط">
         <UnderlineLG />
       </AnimationTextHead>
-      <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
+      <ul className="flex w-full flex-col justify-start items-start">
         {data &&
           data.length > 0 &&
           data?.map((item, idx) => (