all menu pages got dynamic

2024-10-13 18:33:43 +03:30 · 2024-10-13 18:33:43 +03:30 · dc11b6c9b3
commit dc11b6c9b3
parent 160e2e936f
11 changed files with 599 additions and 1050 deletions
--- a/next.config.mjs
+++ b/next.config.mjs
@ -4,6 +4,16 @@ import withBundleAnalyzer from '@next/bundle-analyzer';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: false,
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'via.placeholder.com',
+        port: '',
+        pathname: '/**',
+      },
+    ],
+  },
  // سایر تنظیمات Next.js شما
  webpack(config, { isServer }) {
    if (!isServer) {
--- a/src/app/(routes)/blog/categories/[categorySlug]/page.tsx
+++ b/src/app/(routes)/blog/categories/[categorySlug]/page.tsx
@ -22,7 +22,7 @@ export default function SingleCategory({ params }: propsType) {
            <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 className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
              -
            </span>
          </li>
@ -30,7 +30,7 @@ export default function SingleCategory({ params }: propsType) {
            <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 className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
              -
            </span>
          </li>
--- a/src/app/(routes)/blog/categories/page.tsx
+++ b/src/app/(routes)/blog/categories/page.tsx
@ -1,16 +1,39 @@
 import Image from "next/image";
 import Link from "next/link";

-export default function Categories() {
+type CategoryItemType = {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  short_description: string;
+  image: string;
+  posts_count: number;
+  created_at: string;
+  updated_at: string;
+};
+
+type CategoriesType = { data: CategoryItemType[] };
+
+export default async function Categories() {
+  const CategoriesData: CategoriesType = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/blog/categories`,
+    {
+      cache: "no-store",
+    },
+  ).then((res) => res.json());
+
  return (
    <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
        </h1>
-        <p className="max-w-[650px] text-[18px] font-[600] text-blog-text-default">
-          Get in-depth insights on web design, freelancing, content management,
-          and more with these series of related reads.
+        <p className="text-[18px] font-[600] text-blog-text-default">
+          Browse through our collection of categories to find posts on your
+          favorite topics. Whether you're looking for insightful articles,
+          how-tos, or the latest trends, our categories make it easy to discover
+          content tailored to your interests.
        </p>
      </div>
      <div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
@ -19,7 +42,7 @@ export default function Categories() {
            <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 className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
              -
            </span>
          </li>
@ -31,172 +54,29 @@ export default function Categories() {
        </ul>

        <div className="flex w-full flex-wrap justify-center gap-10">
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/1.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  UI design
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                Every website is a user interface. Learn to build yours right.
-              </p>
+          {CategoriesData.data.map((category: CategoryItemType) => (
+            <div key={category.id} className="flex w-full items-start gap-5 md:w-[45%]">
+              <Image
+                className="max-w-[50%] rounded-md"
+                src={category.image}
+                alt={`${category.name} category image`}
+                loading="lazy"
+                width={350}
+                height={350}
+              />
+              <div className="flex w-[45%] flex-col gap-1">
+                <Link
+                  className="text-[24px] font-[600] text-blog-text-default hover:underline"
+                  href={`/blog/categories/${category.slug}`}
+                >
+                  {category.name}
+                </Link>
+                <p className="text-[16px] font-[400] text-blog-text-default">
+                  {category.short_description}
+                </p>
+              </div>
            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/2.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  UX design
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                Step-by-step instructions to make your very own agency site in
-                3layers.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/3.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  Popular
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                Check out the most-read and most-shared posts from the 3layers
-                blog.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/4.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  Freelance
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                From tools to tips, everything you need to start — or grow —
-                your freelance design career.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/5.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  SEO
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                Everything you need to know to make sure your sites rank high in
-                search.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/6.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  Typography
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                The web is 99% typography. Make sure you are setting your type
-                right.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/7.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  Essentials
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                Whether you are new to web design or 3layers, start here.
-              </p>
-            </div>
-          </div>
-          <div className="flex w-full items-start gap-5 md:w-[45%]">
-            <Image
-              className="max-w-[50%] rounded-md"
-              src={"/images/blog/categories/8.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={350}
-              height={350}
-            />
-            <div className="flex w-[45%] flex-col gap-1">
-              <Link href={"/blog/categories/categoryName"}>
-                <h3 className="text-[24px] font-[600] text-blog-text-default">
-                  How not to
-                </h3>
-              </Link>
-              <p className="text-[16px] font-[400] text-blog-text-default">
-                Like a serving of snark with your web design advice? Then you
-                are going to love these.
-              </p>
-            </div>
-          </div>
+          ))}
        </div>
      </div>
    </div>
--- a/src/app/(routes)/blog/components/home/Categories/Categories.tsx
+++ b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
@ -1,7 +1,22 @@
 import Image from "next/image";
 import Link from "next/link";

-export default function Categories() {
+type CategoryItemType = {
+  id: number;
+  name: string;
+  slug: string;
+  description: string;
+  short_description: string;
+  image: string;
+  created_at: string;
+  updated_at: string;
+};
+
+interface CategoriesProps {
+  data: CategoryItemType[];
+}
+
+export default function Categories({ data }: CategoriesProps) {
  return (
    <div className="mb-5 flex w-full max-w-[95%] flex-wrap gap-10">
      <div className="flex w-full items-center justify-between">
@ -17,88 +32,25 @@ export default function Categories() {
      </div>

      <div className="flex w-full flex-wrap items-center justify-center gap-5">
-        <Link
-          href={"/blog/categories/UI Design"}
-          className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
-        >
-          <div className="h-[200px] w-[200px] overflow-hidden">
-            <Image
-              src={"/images/blog/reading-list/readinglist-1.jpg"}
-              width={300}
-              height={200}
-              alt="readinglist-1 title image"
-            />
-          </div>
-          <h3 className="text-[24px] font-[600] text-blog-text-default">
-            UI Design
-          </h3>
-        </Link>
-
-        <Link
-          href={"/blog/categories/UX design"}
-          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
-        >
-          <div className="h-[200px] w-[200px] overflow-hidden">
-            <Image
-              src={"/images/blog/reading-list/readinglist-2.jpg"}
-              width={300}
-              height={200}
-              alt="readinglist-2 title image"
-            />
-          </div>
-          <h3 className="text-[24px] font-[600] text-blog-text-default">
-            UX design
-          </h3>
-        </Link>
-
-        <Link
-          href={"/blog/categories/SEO"}
-          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
-        >
-          <div className="h-[200px] w-[200px] overflow-hidden">
-            <Image
-              src={"/images/blog/reading-list/readinglist-3.jpg"}
-              width={300}
-              height={200}
-              alt="readinglist-3 title image"
-            />
-          </div>
-          <h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
-        </Link>
-
-        <Link
-          href={"/blog/categories/Popular"}
-          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
-        >
-          <div className="h-[200px] w-[200px] overflow-hidden">
-            <Image
-              src={"/images/blog/reading-list/readinglist-4.jpg"}
-              width={300}
-              height={200}
-              alt="readinglist-4 title image"
-            />
-          </div>
-          <h3 className="text-[24px] font-[600] text-blog-text-default">
-            Popular
-          </h3>
-        </Link>
-
-        <Link
-          href={"/blog/categories/Essentials"}
-          className="flex w-[45%] flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
-        >
-          <div className="h-[200px] w-[200px] overflow-hidden">
-            <Image
-              src={"/images/blog/reading-list/readinglist-5.jpg"}
-              width={300}
-              height={200}
-              alt="readinglist-5 title image"
-            />
-          </div>
-          <h3 className="text-[24px] font-[600] text-blog-text-default">
-            Essentials
-          </h3>
-        </Link>
+        {data.map((category) => (
+          <Link
+            key={category.id}
+            href={`/blog/categories/${category.slug}`}
+            className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+          >
+            <div className="h-[200px] w-[200px] overflow-hidden">
+              <Image
+                src={category.image}
+                width={300}
+                height={200}
+                alt="readinglist-1 title image"
+              />
+            </div>
+            <h3 className="text-[24px] font-[600] text-blog-text-default">
+              {category.name}
+            </h3>
+          </Link>
+        ))}

        {/* <div className="center-center hidden h-full w-[80px] rounded-md bg-white lg:flex">
          <Image
--- a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
+++ b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
@ -1,7 +1,80 @@
 import Image from "next/image";
 import Link from "next/link";

-export default function FilteredPosts() {
+type FilteredItemType = {
+  id: number;
+  title: string;
+  slug: string;
+  excerpt: string;
+  body: string;
+  author: {
+    id: number;
+    name: string;
+    email: string;
+    created_at: string;
+    updated_at: string;
+  };
+  category: {
+    id: number;
+    name: string;
+    slug: string;
+    description: string;
+    short_description: string;
+    image: string;
+    created_at: string;
+    updated_at: string;
+  };
+  tags: [
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+  ];
+  featured_image: string;
+  views: number;
+  likes: number;
+  published_at: string;
+  created_at: string;
+  updated_at: string;
+};
+
+interface FilteredPostsProps {
+  data: FilteredItemType[];
+}
+
+export default function FilteredPosts({ data }: FilteredPostsProps) {
+  
  return (
    <div className="mb-5 flex max-w-[95%] flex-wrap gap-10">
      <div className="flex w-full items-center justify-between">
@ -18,61 +91,28 @@ export default function FilteredPosts() {

      <div className="flex w-full flex-wrap justify-center gap-5">
        <div className="flex w-full flex-wrap justify-center gap-5 lg:w-[37%]">
-          <div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
-            <h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
-              FREELANCING
-            </h3>
-            <Link
-              href={"/blog/posts/Affiliate Systems Suck, So We Rolled Our Own"}
+          {data.slice(1).map((post) => (
+            <div
+              key={post.id}
+              className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]"
            >
-              <h2 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
-                Affiliate Systems Suck, So We Rolled Our Own
-              </h2>
-            </Link>
-          </div>
-
-          <div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
-            <h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
-              RESOURCE
-            </h3>
-            <Link href={"/blog/posts/How not to design web forms"}>
-              <h2 className="text-[15px] font-[600] text-blog-text-hover sm:text-[18px]">
-                How not to design web forms
-              </h2>
-            </Link>
-          </div>
-
-          <div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
-            <h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
-              DESIGN PROCESS
-            </h3>
-            <Link
-              href={
-                "/blog/posts/B2B Lead Generation – Tips and Strategies for 2018"
-              }
-            >
-              <h2 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
-                B2B Lead Generation – Tips and Strategies for 2018
-              </h2>
-            </Link>
-          </div>
-
-          <div className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]">
-            <h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
-              INSPIRATION
-            </h3>
-            <Link href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}>
-              <h2 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
-                8 Best WordPress Ecommerce Plugins
-              </h2>
-            </Link>
-          </div>
+              <h3 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
+                {post.category.name}
+              </h3>
+              <Link
+                className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]"
+                href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
+              >
+                {post.title}
+              </Link>
+            </div>
+          ))}
        </div>

        <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] lg:h-auto lg:w-[60%]">
          <Image
-            src={"/images/blog/posts/2.jpg"}
-            alt="parsaaghayi's blog logo"
+            src={data[0].featured_image}
+            alt={`${data[0].title} post featured_image`}
            fill={true}
          />
          <div className="absolute z-[1] h-full w-full bg-blog-purple opacity-80"></div>
@ -82,29 +122,29 @@ export default function FilteredPosts() {
              <p className="text-[15px] font-[400] text-white sm:text-[16px]">
                BY
              </p>
-              <Link href={"/"} className="text-[15px] font-[400] capitalize text-white sm:text-[16px]">
-                parsa aghayi
+              <Link
+                href={"/"}
+                className="text-[15px] font-[400] capitalize text-white sm:text-[16px]"
+              >
+                {data[0].author.name}
              </Link>
              <p className="text-[15px] font-[400] text-white sm:text-[16px]">
                IN
              </p>
              <h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
-                CATEGORY
+                {data[0].category.name}
              </h2>
            </div>

            <Link
              href={"/blog/posts/8 Best WordPress Ecommerce Plugins"}
-              className="z-10 w-full"
+              className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px]"
            >
-              <h2 className="text-[18px] font-[600] text-white sm:text-[28px]">
-                How to accept rejection gracefully — and use it to grow
-              </h2>
+              {data[0].title}
            </Link>

            <p className="z-10 w-full text-[14px] font-[400] text-white sm:text-[16px]">
-              User research is the reality check every project needs. Here’s our
-              guide to why you should be doing it — and how to get started.
+              {data[0].excerpt}
            </p>
          </div>
        </div>
--- a/src/app/(routes)/blog/components/home/new/new.tsx
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@ -1,13 +1,86 @@
 import Image from "next/image";
 import Link from "next/link";

-export default function New() {
+type PostType = {
+  id: number;
+  title: string;
+  slug: string;
+  excerpt: string;
+  body: string;
+  author: {
+    id: number;
+    name: string;
+    email: string;
+    created_at: string;
+    updated_at: string;
+  };
+  category: {
+    id: number;
+    name: string;
+    slug: string;
+    description: string;
+    short_description: string;
+    image: string;
+    created_at: string;
+    updated_at: string;
+  };
+  tags: [
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+  ];
+  featured_image: string;
+  views: number;
+  likes: number;
+  published_at: string;
+  created_at: string;
+  updated_at: string;
+};
+
+interface NewProps {
+  data: PostType[];
+}
+
+export default function New({ data }: NewProps) {
+
  return (
    <div className="flex w-full max-w-[95%] flex-wrap justify-between gap-5">
      <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:h-auto md:w-[60%]">
        <Image
-          src={"/images/blog/posts/1.jpg"}
-          alt="parsaaghayi's blog logo"
+          src={data[0].featured_image}
+          alt={`${data[0].title} featured image`}
          fill={true}
          priority
        />
@ -18,29 +91,32 @@ export default function New() {
            <p className="text-[15px] font-[400] text-white sm:text-[16px]">
              BY
            </p>
-            <Link href={"/"} className="text-[15px] font-[400] capitalize text-white sm:text-[16px]">
-              parsa aghayi
+            <Link
+              href={"/"}
+              className="text-[15px] font-[400] capitalize text-white hover:underline sm:text-[16px]"
+            >
+              {data[0].author.name}
            </Link>
            <p className="text-[15px] font-[400] text-white sm:text-[16px]">
              IN
            </p>
-            <h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
-              CATEGORY
-            </h2>
+            <Link
+              href={`/blog/categories/${data[0].category.name}`}
+              className="text-[15px] font-[400] text-white hover:underline sm:text-[16px]"
+            >
+              {data[0].category.name}
+            </Link>
          </div>

          <Link
            href={"/blog/posts/Our 15 favorite websites from August 2018"}
-            className="z-10"
+            className="z-10 w-full text-[18px] font-[600] text-white hover:underline sm:text-[28px]"
          >
-            <h1 className="w-full text-[18px] font-[600] text-white sm:text-[28px]">
-              How to accept rejection gracefully — and use it to grow
-            </h1>
+            {data[0].title}
          </Link>

          <p className="z-10 w-full text-[14px] font-[400] text-white sm:text-[16px]">
-            User research is the reality check every project needs. Here’s our
-            guide to why you should be doing it — and how to get started.
+            {data[0].excerpt}
          </p>
        </div>
      </div>
@ -56,57 +132,21 @@ export default function New() {
          </Link>
        </div>

-        <div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            SEP 04 2018
-          </p>
-          <Link href={"/blog/posts/Our 15 favorite websites from August 2018"}>
-            <h3 className="text-[16px] font-[600] text-blog-text-default">
-              Our 15 favorite websites from August 2018
-            </h3>
-          </Link>
-        </div>
-
-        <div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            SEP 04 2018
-          </p>
-          <Link href={"/blog/posts/The beginners guide to user research"}>
-            <h3 className="text-[16px] font-[600] text-blog-text-hover">
-              The beginners guide to user research
-            </h3>
-          </Link>
-        </div>
-
-        <div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            SEP 04 2018
-          </p>
-          <Link
-            href={
-              "/blog/posts/Web page layout 101: website anatomy every designer needs to learn"
-            }
+        {data.slice(1).map((post) => (
+          <div
+            key={post.id}
+            className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md"
          >
-            <h3 className="text-[16px] font-[600] text-blog-text-default">
-              Web page layout 101: website anatomy every designer needs to learn
-            </h3>
-          </Link>
-        </div>
-
-        <div className="flex w-full flex-col rounded-md p-2 transition-all hover:scale-105 hover:shadow-md">
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            SEP 04 2018
-          </p>
-          <Link
-            href={
-              "/blog/posts/10 essential sections to a high-converting landing page"
-            }
-          >
-            <h3 className="text-[16px] font-[600] text-blog-text-default">
-              10 essential sections to a high-converting landing page
-            </h3>
-          </Link>
-        </div>
+            <p className="text-[16px] font-[400] text-blog-text-passive">
+              {post.created_at}
+            </p>
+            <Link href={`/blog/posts/${post.slug}`}>
+              <h3 className="text-[16px] font-[600] text-blog-text-default">
+                {post.title}
+              </h3>
+            </Link>
+          </div>
+        ))}
      </div>
    </div>
  );
--- a/src/app/(routes)/blog/components/home/random/random.tsx
+++ b/src/app/(routes)/blog/components/home/random/random.tsx
@ -1,7 +1,79 @@
 import Image from "next/image";
 import Link from "next/link";

-export default function Random() {
+type RandomItemType = {
+  id: number;
+  title: string;
+  slug: string;
+  excerpt: string;
+  body: string;
+  author: {
+    id: number;
+    name: string;
+    email: string;
+    created_at: string;
+    updated_at: string;
+  };
+  category: {
+    id: number;
+    name: string;
+    slug: string;
+    description: string;
+    short_description: string;
+    image: string;
+    created_at: string;
+    updated_at: string;
+  };
+  tags: [
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+  ];
+  featured_image: string;
+  views: number;
+  likes: number;
+  published_at: string;
+  created_at: string;
+  updated_at: string;
+};
+
+interface RandomProps {
+  data: RandomItemType[];
+}
+
+export default function Random({ data }: RandomProps) {
  return (
    <div className="mb-10 flex w-full max-w-[90%] flex-wrap gap-10">
      <div className="flex w-full items-center justify-between">
@ -10,163 +82,54 @@ export default function Random() {
        </h2>
      </div>
      <div className="flex w-full flex-wrap justify-center gap-10">
-        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
-          <Image
-            src={"/images/blog/posts/2.jpg"}
-            width={580}
-            height={50}
-            alt="post title 2"
-            className="w-full rounded-lg"
-          />
-          <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
-            <div className="flex w-full">
-              <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                BY
-              </p>
-              <Link href={"/"} className="text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                parsa aghayi
-              </Link>
-            </div>
-            <div className="flex w-full">
-              <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
-                IN
-              </p>
-              <h2 className="text-[16px] font-[400] text-blog-text-default">
-                RESOURCE
-              </h2>
-            </div>
-          </div>
-          <Link
-            href={
-              "/blog/posts/How to Fix Error 404 Not Found on Your WordPress Site"
-            }
+        {data.map((randomPost) => (
+          <div
+            key={randomPost.id}
+            className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]"
          >
-            <h2 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
-              How to Fix Error 404 Not Found on Your WordPress Site
-            </h2>
-          </Link>
+            <Image
+              src={randomPost.featured_image}
+              width={580}
+              height={50}
+              alt={`${randomPost.title} post featured image`}
+              className="w-full rounded-lg"
+            />
+            <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
+              <div className="flex">
+                <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                  BY
+                </p>
+                <Link
+                  href={"/"}
+                  className="text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
+                >
+                  {randomPost.author.name}
+                </Link>
+              </div>
+              <div className="flex">
+                <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
+                  IN
+                </p>
+                <Link
+                  href={`/blog/categories/${randomPost.category.name}`}
+                  className="text-[16px] font-[400] text-blog-text-default hover:underline"
+                >
+                  {randomPost.category.name}
+                </Link>
+              </div>
+            </div>
+            <Link
+              className="text-[18px] font-[600] text-blog-text-default hover:underline lg:text-[28px]"
+              href={`/blog/posts/${randomPost.slug}`}
+            >
+              {randomPost.title}
+            </Link>

-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            User research is the reality check every project needs. Here’s our
-            guide to why you should be doing it — and how to get started.
-          </p>
-        </div>
-        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
-          <Image
-            src={"/images/blog/posts/3.jpg"}
-            width={580}
-            height={50}
-            alt="post title 3"
-            className="w-full rounded-lg"
-          />
-          <div className="flex w-full flex-wrap gap-2">
-            <div className="flex gap-2">
-              <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                BY
-              </p>
-              <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                parsa aghayi
-              </Link>
-            </div>
-            <div className="whit flex gap-2">
-              <p className="text-[16px] font-[600] text-blog-text-passive">
-                IN
-              </p>
-              <h2 className="text-[16px] font-[400] text-blog-text-default">
-                RESOURCE
-              </h2>
-            </div>
+            <p className="text-[16px] font-[400] text-blog-text-passive">
+              {randomPost.excerpt}
+            </p>
          </div>
-          <Link
-            href={
-              "/blog/posts/How to Fix Error 404 Not Found on Your WordPress Site"
-            }
-          >
-            <h2 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
-              How to Fix Error 404 Not Found on Your WordPress Site
-            </h2>
-          </Link>
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            User research is the reality check every project needs. Here’s our
-            guide to why you should be doing it — and how to get started.
-          </p>
-        </div>
-        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
-          <Image
-            src={"/images/blog/posts/3.jpg"}
-            width={580}
-            height={50}
-            alt="post title 3"
-            className="w-full rounded-lg"
-          />
-          <div className="flex w-full flex-wrap gap-2">
-            <div className="flex gap-2">
-              <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                BY
-              </p>
-              capitalize
-            </div>
-            <div className="whit flex gap-2">
-              <p className="text-[16px] font-[600] text-blog-text-passive">
-                IN
-              </p>
-              <h2 className="text-[16px] font-[400] text-blog-text-default">
-                RESOURCE
-              </h2>
-            </div>
-          </div>
-          <Link
-            href={
-              "/blog/posts/How to Fix Error 404 Not Found on Your WordPress Site"
-            }
-          >
-            <h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
-              How to Fix Error 404 Not Found on Your WordPress Site
-            </h1>
-          </Link>
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            User research is the reality check every project needs. Here’s our
-            guide to why you should be doing it — and how to get started.
-          </p>
-        </div>
-        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
-          <Image
-            src={"/images/blog/posts/3.jpg"}
-            width={580}
-            height={50}
-            alt="post title 3"
-            className="w-full rounded-lg"
-          />
-          <div className="flex w-full flex-wrap gap-2">
-            <div className="flex gap-2">
-              <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                BY
-              </p>
-              capitalize
-            </div>
-            <div className="whit flex gap-2">
-              <p className="text-[16px] font-[600] text-blog-text-passive">
-                IN
-              </p>
-              <h2 className="text-[16px] font-[400] text-blog-text-default">
-                RESOURCE
-              </h2>
-            </div>
-          </div>
-          <Link
-            href={
-              "/blog/posts/How to Fix Error 404 Not Found on Your WordPress Site"
-            }
-          >
-            <h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
-              How to Fix Error 404 Not Found on Your WordPress Site
-            </h1>
-          </Link>
-          <p className="text-[16px] font-[400] text-blog-text-passive">
-            User research is the reality check every project needs. Here’s our
-            guide to why you should be doing it — and how to get started.
-          </p>
-        </div>
+        ))}
      </div>
    </div>
  );
--- a/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
+++ b/src/app/(routes)/blog/filtered-posts/[filter]/page.tsx
@ -1,19 +1,120 @@
 import Image from "next/image";
 import Link from "next/link";

+type FilteredItemType = {
+  id: number;
+  title: string;
+  slug: string;
+  excerpt: string;
+  body: string;
+  author: {
+    id: number;
+    name: string;
+    email: string;
+    created_at: string;
+    updated_at: string;
+  };
+  category: {
+    id: number;
+    name: string;
+    slug: string;
+    description: string;
+    short_description: string;
+    image: string;
+    created_at: string;
+    updated_at: string;
+  };
+  tags: [
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+    {
+      id: number;
+      name: string;
+      slug: string;
+      created_at: string;
+      updated_at: string;
+    },
+  ];
+  featured_image: string;
+  views: number;
+  likes: number;
+  published_at: string;
+  created_at: string;
+  updated_at: string;
+};
+
 type propsType = {
  params: { filter: string };
 };

-export default function FilteredPosts({ params }: propsType) {
+export default async function FilteredPosts({ params }: propsType) {
+  let filteredPostApiUrl: string;
+
+  switch (params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()) {
+    case "new":
+      filteredPostApiUrl =
+        "/blog/posts?sort_field=published_at&sort_direction=desc";
+      break;
+    case "popular":
+      filteredPostApiUrl = "/blog/posts?sort_field=views&sort_direction=desc";
+      break;
+    default:
+      // code block
+      filteredPostApiUrl = "";
+  }
+
+  let FilteredPostsData: { data: FilteredItemType[] };
+
+  if (filteredPostApiUrl !== "") {
+    FilteredPostsData = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}${filteredPostApiUrl}`,
+      {
+        cache: "no-store",
+      },
+    ).then((res) => res.json());
+  } else {
+    FilteredPostsData = { data: [] };
+  }
+
  return (
-    <div className="flex w-full max-w-[1280px] flex-wrap justify-center 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">
-          {params.filter}
+          {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}
        </h1>
-        <p className="max-w-[650px] text-[18px] font-[600] text-blog-text-default">
-          i do not know how to dynamic this part!
+        <p className="text-[18px] font-[600] text-blog-text-default">
+          {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() === "new"
+            ? "Explore the latest posts on our blog. Stay updated with fresh content, insightful articles, and the most recent discussions in your areas of interest."
+            : params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase() ===
+                "popular"
+              ? "Discover the most popular posts with the highest views. These articles have resonated with our audience and are trending across various topics."
+              : ""}
        </p>
      </div>
      <div className="my-10 flex w-full flex-wrap justify-center gap-5">
@ -22,522 +123,67 @@ export default function FilteredPosts({ params }: propsType) {
            <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 className="mt-[-2px] -rotate-45 scale-[3] select-none 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.filter.replaceAll(/%20|-|_/g, " ")}
+              {params.filter.replaceAll(/%20|-|_/g, " ").toLowerCase()}
            </p>
          </li>
        </ul>

        <div className="flex w-full max-w-[90%] flex-wrap justify-center gap-10">
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/1.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
+          {FilteredPostsData.data.length > 0 &&
+            FilteredPostsData.data.map((post: FilteredItemType) => (
+              <div
+                key={post.id}
+                className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]"
+              >
+                <Image
+                  className="rounded-md"
+                  src={post.featured_image}
+                  alt={`${post.title} post featured image`}
+                  loading="lazy"
+                  width={600}
+                  height={500}
+                />
+                <div className="flex w-full flex-wrap gap-2">
+                  <div className="flex gap-2">
+                    <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                      BY
+                    </p>
+                    <Link
+                      href={"/"}
+                      className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default hover:underline md:text-[16px]"
+                    >
+                      {post.author.name}
+                    </Link>
+                  </div>
+                  <div className="whit flex gap-2">
+                    <p className="text-[16px] font-[600] text-blog-text-passive">
+                      IN
+                    </p>
+                    <Link
+                      href={`/blog/categories/${post.category.slug}`}
+                      className="text-[16px] font-[400] text-blog-text-default hover:underline"
+                    >
+                      {post.category.name}
+                    </Link>
+                  </div>
+                </div>
+                <Link
+                  className="w-full text-start text-[24px] font-[600] text-blog-text-default hover:underline"
+                  href={`/blog/posts/${post.slug}`}
+                >
+                  {post.title}
                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
+                <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
+                  {post.excerpt}
                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/2.png"}
-              alt={"category 1"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/3.png"}
-              alt={"post 3"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/4.png"}
-              alt={"post 4"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/5.png"}
-              alt={"post 5"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/6.png"}
-              alt={"post 6"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/7.png"}
-              alt={"post 7"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/8.png"}
-              alt={"post 8"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/9.png"}
-              alt={"post 9"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/10.png"}
-              alt={"post 10"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/11.png"}
-              alt={"post 11"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/12.png"}
-              alt={"post 12"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/13.png"}
-              alt={"post 13"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
-          <div className="flex w-full flex-col items-center justify-start gap-1 sm:w-[45%]">
-            <Image
-              className="rounded-md"
-              src={"/images/blog/posts/14.png"}
-              alt={"post 14"}
-              loading="lazy"
-              width={600}
-              height={500}
-            />
-            <div className="flex w-full flex-wrap gap-2">
-              <div className="flex gap-2">
-                <p className="text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
-                  BY
-                </p>
-                <Link href={"/"} className="whitespace-nowrap text-[14px] font-[400] capitalize text-blog-text-default md:text-[16px]">
-                  parsa aghayi
-                </Link>
-              </div>
-              <div className="whit flex gap-2">
-                <p className="text-[16px] font-[600] text-blog-text-passive">
-                  IN
-                </p>
-                <h2 className="text-[16px] font-[400] text-blog-text-default">
-                  RESOURCE
-                </h2>
-              </div>
-            </div>
-            <Link className="w-full text-start" href={"/blog/posts/UI design"}>
-              <h3 className="text-[24px] font-[600] text-blog-text-default">
-                UI design
-              </h3>
-            </Link>
-            <p className="w-full text-start text-[16px] font-[400] text-blog-text-default">
-              Every website is a user interface. Learn to build yours right.
-            </p>
-          </div>
+            ))}
        </div>
      </div>
    </div>
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@ -4,12 +4,21 @@ import Random from "./components/home/random/random";
 import Categories from "./components/home/Categories/Categories";

 export default async function Blog() {
+  const homePageData: {
+    latest_posts: [];
+    latest_categories: [];
+    most_viewed_posts: [];
+    random_posts: [];
+  } = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/blog/homepage`, {
+    cache: "no-store",
+  }).then((res) => res.json());
+
  return (
-    <div className="flex w-full max-w-[1280px] flex-col items-center gap-[50px] md:gap-[100px] pt-5">
-      <New />
-      <Categories />
-      <FilteredPosts />
-      <Random />
+    <div className="flex w-full max-w-[1280px] flex-col items-center gap-[50px] pt-5 md:gap-[100px]">
+      <New data={homePageData.latest_posts} />
+      <Categories data={homePageData.latest_categories} />
+      <FilteredPosts data={homePageData.most_viewed_posts} />
+      <Random data={homePageData.random_posts} />
    </div>
  );
 }
--- a/src/app/(routes)/blog/posts/[postSlug]/page.tsx
+++ b/src/app/(routes)/blog/posts/[postSlug]/page.tsx
@ -44,7 +44,7 @@ export default function SinglePost({ params }: propsType) {
            <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 className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
              -
            </span>
          </li>
@ -52,7 +52,7 @@ export default function SinglePost({ params }: propsType) {
            <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 className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
              -
            </span>
          </li>
@ -60,7 +60,7 @@ export default function SinglePost({ params }: propsType) {
            <p className="text-[12px] font-[400] capitalize text-blog-text-passive">
              category name
            </p>
-            <span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive">
+            <span className="mt-[-2px] -rotate-45 scale-[3] text-[12px] font-[400] text-blog-text-passive select-none">
              -
            </span>
          </li>
--- a/src/app/api/blog/home/rout.ts
+++ b/src/app/api/blog/home/rout.ts
@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/blog/homepage`, {
+    cache: "no-store" // غیرفعال کردن کش
+  });
+  const data = await response.json();
+  return NextResponse.json(data);
+}