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/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) => (