404 status of response handle, 404 responsive bug fixed, home link fixed

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

@@ -11,7 +11,7 @@ export default function NotFound({ params }: PropsType) {
   const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
 
   return (
-    <div className="flex flex-col items-center justify-center gap-3">
+    <div className="flex flex-col items-center justify-center gap-3 mb-10 sm:mb-0">
       <Image
         src={imageUrl}
         width={500}

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

@@ -1,6 +1,7 @@
 import { CategoryDataType, categorySlugPropsType } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
+import { redirect } from "next/navigation";
 
 export default async function SingleCategory({
   params,
@@ -10,7 +11,12 @@ export default async function SingleCategory({
     {
       cache: "no-store",
     },
-  ).then((res) => res.json());
+  ).then((res) => {
+    if (res.status == 404) {
+      redirect("/blog/404");
+    }
+    return res.json();
+  });
 
   return (
     <div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
@@ -26,7 +32,7 @@ export default async function SingleCategory({
         <ul className="my-10 flex w-full flex-wrap gap-2">
           <li className="flex items-center gap-2">
             <Link
-              href={"/blog/home"}
+              href={"/blog"}
               className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
             >
               Home

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

@@ -27,7 +27,7 @@ export default async function Categories() {
         <ul className="my-10 flex w-full flex-wrap gap-2">
           <li className="flex items-center gap-2">
             <Link
-              href={"/blog/home"}
+              href={"/blog"}
               className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
             >
               Home

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

@@ -41,7 +41,7 @@ export default function New({ data }: NewProps) {
           </div>
 
           <Link
-            href={"/blog/posts/Our 15 favorite websites from August 2018"}
+            href={`/blog/posts/${data[0].slug}`}
             className="z-10 w-full text-[18px] font-[600] text-white hover:underline sm:text-[28px]"
           >
             {data[0].title}
@@ -72,10 +72,11 @@ export default function New({ data }: NewProps) {
             <p className="text-[16px] font-[400] text-blog-text-passive">
               {post.created_at}
             </p>
-            <Link href={`/blog/posts/${post.slug}`}>
+            <Link
-              <h3 className="text-[16px] font-[600] text-blog-text-default hover:underline">
+              className="text-[16px] font-[600] text-blog-text-default hover:underline"
+              href={`/blog/posts/${post.slug}`}
+            >
               {post.title}
-              </h3>
             </Link>
           </div>
         ))}

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

@@ -52,7 +52,7 @@ export default async function FilteredPosts({
         <ul className="my-10 flex w-full max-w-[90%] flex-wrap gap-2">
           <li className="flex items-center gap-2">
             <Link
-              href={"/blog/home"}
+              href={"/blog"}
               className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
             >
               Home

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

@@ -5,6 +5,7 @@ import {
 } from "@/app/types/types";
 import Image from "next/image";
 import Link from "next/link";
+import { redirect } from "next/navigation";
 
 export default async function SinglePost({ params }: PostSlugPagepropsType) {
   const postData: PostSlugPagePostType = await fetch(
@@ -12,7 +13,12 @@ export default async function SinglePost({ params }: PostSlugPagepropsType) {
     {
       cache: "no-store",
     },
-  ).then((res) => res.json());
+  ).then((res) => {
+    if (res.status == 404) {
+      redirect("/blog/404")
+    }
+    return res.json();
+  });
 
   return (
     <div className="flex w-full max-w-[1280px] flex-wrap justify-center sm:my-10">
@@ -50,7 +56,7 @@ export default async function SinglePost({ params }: PostSlugPagepropsType) {
         <ul className="my-10 flex w-full flex-wrap gap-2">
           <li className="flex items-center gap-2">
             <Link
-              href={"/blog/home"}
+              href={"/blog"}
               className="text-[12px] font-[400] capitalize text-blog-text-passive hover:underline"
             >
               Home