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/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>