some styles updated for responsive version

src/app/(routes)/blog/categories/[categorySlug]/page.tsx

@@ -16,20 +16,32 @@ export default function SingleCategory({ params }: propsType) {
           i do not know how to dynamic this part!
         </p>
       </div>
-      <div className="my-10 flex w-full flex-wrap justify-center gap-5">
-        <ul className="my-10 flex w-full max-w-[90%]">
-          <li className="text-[12px] font-[400] capitalize text-blog-text-passive">
-            Home
+      <div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
+        <ul className="my-10 flex w-full flex-wrap gap-2">
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
+              home
+            </p>
+            <span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive">
+              -
+            </span>
           </li>
-          <span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
-            -
-          </span>
-          <li className="text-[12px] font-[600] capitalize text-blog-text-default">
-            {params.categorySlug}
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
+              categories
+            </p>
+            <span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive">
+              -
+            </span>
+          </li>
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
+              {params.categorySlug.replaceAll(/%20|-|_/g, " ")}
+            </p>
           </li>
         </ul>
 
-        <div className="flex w-full max-w-[90%] flex-wrap justify-center gap-10">
+        <div className="flex w-full flex-wrap justify-center gap-10">
           <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
             <Image
               className="mb-3 rounded-md"

src/app/(routes)/blog/categories/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function Categories() {
   return (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
+    <div className="my-10 flex w-full max-w-[1280px] flex-wrap justify-center">
       <div className="flex w-full max-w-[90%] flex-col gap-5">
         <h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
           All Categories List
@@ -14,15 +14,19 @@ export default function Categories() {
         </p>
       </div>
       <div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
-        <ul className="my-10 flex w-full">
-          <li className="text-[12px] font-[400] capitalize text-blog-text-passive">
-            Home
+        <ul className="my-10 flex w-full flex-wrap gap-2">
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
+              home
+            </p>
+            <span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive">
+              -
+            </span>
           </li>
-          <span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
-            -
-          </span>
-          <li className="text-[12px] font-[600] capitalize text-blog-text-default">
-            Categories
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
+              categories
+            </p>
           </li>
         </ul>
 

src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx

@@ -8,7 +8,10 @@ export default function FilteredPosts() {
         <h2 className="text-[36px] font-[700] text-blog-text-default">
           Popular
         </h2>
-        <Link href={"/blog/filtered-posts/popular"} className="text-[16px] font-[400] text-blog-text-passive">
+        <Link
+          href={"/blog/filtered-posts/popular"}
+          className="text-[16px] font-[400] text-blog-text-passive"
+        >
           View all
         </Link>
       </div>
@@ -79,8 +82,8 @@ export default function FilteredPosts() {
               <p className="text-[15px] font-[400] text-white sm:text-[16px]">
                 BY
               </p>
-              <h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
-                AUTHOR NAME
+              <h2 className="text-[15px] font-[400] capitalize text-white sm:text-[16px]">
+                parsa aghayi
               </h2>
               <p className="text-[15px] font-[400] text-white sm:text-[16px]">
                 IN

src/app/(routes)/blog/components/home/new/new.tsx

@@ -18,8 +18,8 @@ export default function New() {
             <p className="text-[15px] font-[400] text-white sm:text-[16px]">
               BY
             </p>
-            <h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
-              AUTHOR NAME
+            <h2 className="text-[15px] font-[400] capitalize text-white sm:text-[16px]">
+              parsa aghayi
             </h2>
             <p className="text-[15px] font-[400] text-white sm:text-[16px]">
               IN

src/app/(routes)/blog/filtered-posts/[filter]/page.tsx

@@ -7,7 +7,7 @@ type propsType = {
 
 export default function FilteredPosts({ params }: propsType) {
   return (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
+    <div className="flex w-full max-w-[1280px] flex-wrap justify-center my-10">
       <div className="flex w-full max-w-[90%] flex-col gap-5">
         <h1 className="text-[36px] font-[700] capitalize text-blog-text-default">
           {params.filter}
@@ -17,15 +17,19 @@ export default function FilteredPosts({ params }: propsType) {
         </p>
       </div>
       <div className="my-10 flex w-full flex-wrap justify-center gap-5">
-        <ul className="my-10 flex w-full max-w-[90%]">
-          <li className="text-[12px] font-[400] capitalize text-blog-text-passive">
-            Home
+        <ul className="my-10 flex w-full max-w-[90%] flex-wrap gap-2">
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
+              Home
+            </p>
+            <span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive">
+              -
+            </span>
           </li>
-          <span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
-            -
-          </span>
-          <li className="text-[12px] font-[600] capitalize text-blog-text-default">
-            {params.filter}
+          <li className="flex items-center gap-2">
+            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
+              {params.filter.replaceAll(/%20|-|_/g, " ")}
+            </p>
           </li>
         </ul>
 

src/app/(routes)/blog/page.tsx

@@ -5,7 +5,7 @@ import Categories from "./components/home/Categories/Categories";
 
 export default async function Blog() {
   return (
-    <div className="flex w-full max-w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]">
+    <div className="flex w-full max-w-[1280px] flex-col items-center gap-[50px] md:gap-[100px] pt-5">
       <New />
       <Categories />
       <FilteredPosts />

src/app/(routes)/blog/posts/[postSlug]/page.tsx

@@ -62,7 +62,7 @@ export default function SinglePost({ params }: propsType) {
             </span>
           </li>
           <li className="flex items-center gap-2">
-            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
+            <p className="text-[12px] font-[600] capitalize text-blog-text-default">
               {params.postSlug.replaceAll(/%20|-|_/g, " ")}
             </p>
           </li>

src/app/(routes)/blog/posts/page.tsx

@@ -1,5 +1,5 @@
 
 
 export default function Posts() {
-  return <div>blog posts list page</div>;
+  return <div className="my-20">blog posts list page</div>;
 }