From c22affe6e347feb3a24a0986a64eeb25ba869cf9 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 1 Oct 2024 14:50:54 +0330
Subject: [PATCH] some updates for styles

---
 package.json                                  |  2 +-
 .../(routes)/(website)/[...notFound]/page.tsx | 32 ++++++++++
 src/app/(routes)/(website)/not-found.tsx      | 19 ------
 src/app/(routes)/blog/[...notFound]/page.tsx  | 38 ++++++++++++
 .../blog/components/button/button.tsx         | 32 +++++-----
 .../blog/components/footer/footer.tsx         |  6 +-
 .../blog/components/header/header.tsx         | 59 +++++++------------
 .../blog/components/header/navLinks.tsx       | 43 ++++++++++++++
 .../home/filtered-posts/filteredPosts.tsx     |  8 +--
 .../(routes)/blog/components/home/new/new.tsx |  8 +--
 .../blog/components/home/random/random.tsx    | 58 +++++++++++++++++-
 .../home/reading-lists/readingList.tsx        | 10 ++--
 src/app/(routes)/blog/layout.tsx              |  2 +-
 src/app/(routes)/blog/new/page.tsx            |  7 +++
 src/app/(routes)/blog/not-found.tsx           | 19 ------
 src/app/globals.css                           | 25 ++++++++
 16 files changed, 254 insertions(+), 114 deletions(-)
 create mode 100644 src/app/(routes)/(website)/[...notFound]/page.tsx
 delete mode 100644 src/app/(routes)/(website)/not-found.tsx
 create mode 100644 src/app/(routes)/blog/[...notFound]/page.tsx
 create mode 100644 src/app/(routes)/blog/components/header/navLinks.tsx
 create mode 100644 src/app/(routes)/blog/new/page.tsx
 delete mode 100644 src/app/(routes)/blog/not-found.tsx

diff --git a/package.json b/package.json
index ac0dc10..7ec872a 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
diff --git a/src/app/(routes)/(website)/[...notFound]/page.tsx b/src/app/(routes)/(website)/[...notFound]/page.tsx
new file mode 100644
index 0000000..70167cb
--- /dev/null
+++ b/src/app/(routes)/(website)/[...notFound]/page.tsx
@@ -0,0 +1,32 @@
+import Image from "next/image";
+import Link from "next/link";
+
+interface PropsType {
+  params: {
+    notFound: string[];
+  };
+}
+
+export default function NotFound({ params }: PropsType) {
+  const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
+
+  return (
+    <div className="mt-[80px] flex flex-col items-center justify-center gap-3">
+      <Image src={imageUrl} width={500} height={500} alt="404 illustration" />
+      <h2 className="text-[30px] font-[800]">Nothing Found!</h2>
+      <p className="select-none font-[600]">
+        Could not find{" "}
+        <span className="cursor-pointer font-[800] text-[#fd6f00] underline">
+          /blog/{params.notFound.join("/")}
+        </span>{" "}
+        !
+      </p>
+      <Link
+        href="/"
+        className="rounded-md border border-[#fd6f00] px-5 py-3 font-[500] text-[#fd6f00]"
+      >
+        Return Home
+      </Link>
+    </div>
+  );
+}
diff --git a/src/app/(routes)/(website)/not-found.tsx b/src/app/(routes)/(website)/not-found.tsx
deleted file mode 100644
index ff835f9..0000000
--- a/src/app/(routes)/(website)/not-found.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-export default function NotFound() {
-  const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
-  return (
-    <div className="mt-[120px] flex flex-col items-center justify-center gap-3">
-      <Image src={imageUrl} width={500} height={500} alt="404 illustration" />
-      <h2 className="text-[30px] font-[800]">Not Found</h2>
-      <p className="font-[600]">Could not find requested resource</p>
-      <Link
-        href="/"
-        className="rounded-md border border-[#fd6f00] px-5 py-3 font-[500] text-[#fd6f00]"
-      >
-        Return Home
-      </Link>
-    </div>
-  );
-}
diff --git a/src/app/(routes)/blog/[...notFound]/page.tsx b/src/app/(routes)/blog/[...notFound]/page.tsx
new file mode 100644
index 0000000..19fc1e5
--- /dev/null
+++ b/src/app/(routes)/blog/[...notFound]/page.tsx
@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+
+interface PropsType {
+  params: {
+    notFound: string[];
+  };
+}
+
+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">
+      <Image
+        src={imageUrl}
+        width={500}
+        height={500}
+        alt="404 illustration"
+        className="teste"
+      />
+      <h2 className="text-[30px] font-[800]">Nothing Found!</h2>
+      <p className="select-none font-[600]">
+        Could not find{" "}
+        <span className="cursor-pointer font-[800] text-blog-text-quote underline">
+          /blog/{params.notFound.join("/")}
+        </span>{" "}
+        !
+      </p>
+      <Link
+        href="/blog"
+        className="rounded-md border border-blog-purple px-5 py-3 font-[500] text-blog-text-quote"
+      >
+        Return Home
+      </Link>
+    </div>
+  );
+}
diff --git a/src/app/(routes)/blog/components/button/button.tsx b/src/app/(routes)/blog/components/button/button.tsx
index 4c4d348..27b7edd 100644
--- a/src/app/(routes)/blog/components/button/button.tsx
+++ b/src/app/(routes)/blog/components/button/button.tsx
@@ -7,46 +7,46 @@ type buttonPropsType = {
 export default function Button({ type, color, text }: buttonPropsType) {
   return (
     <button
-      className={`flex items-center justify-center rounded-[10px] px-[24px] py-[12px] text-[18px] font-[600] ${
+      className={`flex items-center justify-center rounded-[10px] px-[24px] py-[12px] text-[18px] font-[600] shadow-md ${
         color === "red"
           ? type === "outline"
-            ? "border-blog-red text-blog-red rounded-[10px] border-[2px]"
+            ? "rounded-[10px] border-[2px] border-blog-red text-blog-red"
             : type === "curve"
-              ? "bg-blog-red rounded-[40px] text-white"
+              ? "rounded-[40px] bg-blog-red text-white"
               : type === "curveOutline"
-                ? "border-blog-red text-blog-red border-2px rounded-[40px]"
+                ? "border-2px rounded-[40px] border-blog-red text-blog-red"
                 : "bg-blog-red text-white"
           : color === "purple"
             ? type === "outline"
-              ? "border-blog-purple text-blog-purple rounded-[10px] border-[2px]"
+              ? "rounded-[10px] border-[2px] border-blog-purple text-blog-purple"
               : type === "curve"
-                ? "bg-blog-purple rounded-[40px] text-white"
+                ? "rounded-[40px] bg-blog-purple text-white"
                 : type === "curveOutline"
-                  ? "border-blog-purple text-blog-purple border-2px rounded-[40px]"
+                  ? "border-2px rounded-[40px] border-blog-purple text-blog-purple"
                   : "bg-blog-purple text-white"
             : color === "yellow"
               ? type === "outline"
-                ? "border-blog-yellow text-blog-yellow rounded-[10px] border-[2px]"
+                ? "rounded-[10px] border-[2px] border-blog-yellow text-blog-yellow"
                 : type === "curve"
-                  ? "bg-blog-yellow rounded-[40px] text-white"
+                  ? "rounded-[40px] bg-blog-yellow text-white"
                   : type === "curveOutline"
-                    ? "border-blog-yellow text-blog-yellow border-2px rounded-[40px]"
+                    ? "border-2px rounded-[40px] border-blog-yellow text-blog-yellow"
                     : "bg-blog-yellow text-white"
               : color === "green"
                 ? type === "outline"
-                  ? "border-blog-green text-blog-green rounded-[10px] border-[2px]"
+                  ? "rounded-[10px] border-[2px] border-blog-green text-blog-green"
                   : type === "curve"
-                    ? "bg-blog-green rounded-[40px] text-white"
+                    ? "rounded-[40px] bg-blog-green text-white"
                     : type === "curveOutline"
-                      ? "border-blog-green text-blog-green border-2px rounded-[40px]"
+                      ? "border-2px rounded-[40px] border-blog-green text-blog-green"
                       : "bg-blog-green text-white"
                 : color === "background"
                   ? type === "outline"
-                    ? "border-blog-background text-blog-background rounded-[10px] border-[2px]"
+                    ? "rounded-[10px] border-[2px] border-blog-background text-blog-background"
                     : type === "curve"
-                      ? "bg-blog-background text-blog-text-default rounded-[40px]"
+                      ? "rounded-[40px] bg-blog-background text-blog-text-default"
                       : type === "curveOutline"
-                        ? "border-blog-background text-blog-background border-2px rounded-[40px]"
+                        ? "border-2px rounded-[40px] border-blog-background text-blog-background"
                         : "bg-blog-background text-blog-text-default"
                   : ""
       } `}
diff --git a/src/app/(routes)/blog/components/footer/footer.tsx b/src/app/(routes)/blog/components/footer/footer.tsx
index 1b11df6..537a0f1 100644
--- a/src/app/(routes)/blog/components/footer/footer.tsx
+++ b/src/app/(routes)/blog/components/footer/footer.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 export default function Footer() {
   return (
-    <div className="absolute bottom-0  py-5 flex w-full items-center justify-around bg-white">
+    <div className="absolute bottom-0 flex w-full items-center justify-around bg-white py-5">
       <Image
         src={"/images/blog/logo/logo-no-background.png"}
         width={200}
@@ -16,8 +16,8 @@ export default function Footer() {
         height={50}
         alt="parsaaghayi's blog logo"
       />
-      <p className="text-blog-text-passive text-[14px] font-[400]">
-        All Rights Reserved 2018 BehindMars
+      <p className="text-[14px] font-[400] text-blog-text-passive">
+        All Rights Reserved 2024 Parsa Aghayi
       </p>
     </div>
   );
diff --git a/src/app/(routes)/blog/components/header/header.tsx b/src/app/(routes)/blog/components/header/header.tsx
index f3c97bb..1c373d0 100644
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@@ -1,50 +1,31 @@
 import Image from "next/image";
 import React from "react";
 import Button from "../button/button";
+import { NavLinks } from "./navLinks";
+import Link from "next/link";
 
 export default function Header() {
   return (
     <div className="fixed z-50 flex w-full items-center justify-center bg-blog-background py-10">
       <div className="top-10 flex w-[1280px] items-center justify-between">
-        <Image
-          src={"/images/blog/logo/logo-no-background.png"}
-          width={200}
-          height={50}
-          alt="parsaaghayi's blog logo"
-        />
-        <div className="flex w-[50%] items-center justify-between">
-          <div className="menu flex flex-nowrap gap-5">
-            <a
-              href="#"
-              className="text-[16px] font-[600] text-blog-text-default"
-            >
-              Popular
-            </a>
-            <a className="active text-[16px] font-[600] text-blog-text-hover">
-              New
-            </a>
-            <a
-              href="#"
-              className="text-[16px] font-[600] text-blog-text-default"
-            >
-              Reading list
-            </a>
-            <a
-              href="#"
-              className="text-[16px] font-[600] text-blog-text-default"
-            >
-              Topics
-            </a>
-          </div>
-          <div className="flex items-center justify-center gap-5">
-            <Image
-              src={"/images/blog/icons/search.svg"}
-              width={24}
-              height={24}
-              alt="search icon"
-            />
-            <Button color={"purple"} text={"Subscribe"} />
-          </div>
+        <Link href={"/blog"}>
+          <Image
+            src={"/images/blog/logo/logo-no-background.png"}
+            width={200}
+            height={50}
+            alt="parsaaghayi's blog logo"
+          />
+        </Link>
+        <NavLinks />
+        <div className="flex items-center justify-center gap-5">
+          <Image
+            src={"/images/blog/icons/search.svg"}
+            width={24}
+            height={24}
+            alt="search icon"
+            className="hover:cursor-pointer"
+          />
+          <Button color={"purple"} text={"Subscribe"} />
         </div>
       </div>
     </div>
diff --git a/src/app/(routes)/blog/components/header/navLinks.tsx b/src/app/(routes)/blog/components/header/navLinks.tsx
new file mode 100644
index 0000000..f03ddda
--- /dev/null
+++ b/src/app/(routes)/blog/components/header/navLinks.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+
+export function NavLinks() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="menu flex flex-nowrap gap-5">
+      <Link
+        className={`text-[16px] font-[600] ${pathname === "/blog" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
+        href="/blog"
+      >
+        Home
+      </Link>
+      <Link
+        className={`text-[16px] font-[600] ${pathname === "/blog/new" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
+        href="/blog/new"
+      >
+        New
+      </Link>
+      <Link
+        className={`text-[16px] font-[600] ${pathname === "/blog/popular" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
+        href="/blog/popular"
+      >
+        Popular
+      </Link>
+      <Link
+        className={`text-[16px] font-[600] ${pathname === "/blog/reading-list" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
+        href="/blog/reading-list"
+      >
+        Reading list
+      </Link>
+      <Link
+        className={`text-[16px] font-[600] ${pathname === "/blog/topics" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
+        href="/blog/topics"
+      >
+        Topics
+      </Link>
+    </nav>
+  );
+}
diff --git a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
index 51a2514..f4173ce 100644
--- a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
+++ b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
@@ -14,7 +14,7 @@ export default function FilteredPosts() {
 
       <div className="flex w-full justify-between gap-10">
         <div className="flex w-[45%] flex-wrap justify-between gap-5">
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
+          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
             <h2 className="text-[16px] font-[400] text-blog-text-passive">
               FREELANCING
             </h2>
@@ -23,7 +23,7 @@ export default function FilteredPosts() {
             </h1>
           </div>
 
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
+          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
             <h2 className="text-[16px] font-[400] text-blog-text-passive">
               RESOURCE
             </h2>
@@ -32,7 +32,7 @@ export default function FilteredPosts() {
             </h1>
           </div>
 
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
+          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
             <h2 className="text-[16px] font-[400] text-blog-text-passive">
               DESIGN PROCESS
             </h2>
@@ -41,7 +41,7 @@ export default function FilteredPosts() {
             </h1>
           </div>
 
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5">
+          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
             <h2 className="text-[16px] font-[400] text-blog-text-passive">
               INSPIRATION
             </h2>
diff --git a/src/app/(routes)/blog/components/home/new/new.tsx b/src/app/(routes)/blog/components/home/new/new.tsx
index c9cb6c3..c8362ad 100644
--- a/src/app/(routes)/blog/components/home/new/new.tsx
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@@ -38,7 +38,7 @@ export default function New() {
           </p>
         </div>
 
-        <div className="flex w-full flex-col">
+        <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>
@@ -47,7 +47,7 @@ export default function New() {
           </h3>
         </div>
 
-        <div className="flex w-full flex-col">
+        <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>
@@ -56,7 +56,7 @@ export default function New() {
           </h3>
         </div>
 
-        <div className="flex w-full flex-col">
+        <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>
@@ -65,7 +65,7 @@ export default function New() {
           </h3>
         </div>
 
-        <div className="flex w-full flex-col">
+        <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>
diff --git a/src/app/(routes)/blog/components/home/random/random.tsx b/src/app/(routes)/blog/components/home/random/random.tsx
index d28be83..188141a 100644
--- a/src/app/(routes)/blog/components/home/random/random.tsx
+++ b/src/app/(routes)/blog/components/home/random/random.tsx
@@ -9,7 +9,7 @@ export default function Random() {
         </h2>
       </div>
       <div className="flex w-full flex-wrap justify-center gap-10">
-        <div className="flex w-full max-w-[80%] sm:max-w-[45%] flex-col gap-5">
+        <div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
           <Image
             src={"/images/blog/posts/2.jpg"}
             width={580}
@@ -21,7 +21,7 @@ export default function Random() {
             <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
             <h2 className="text-[16px] font-[400] text-blog-text-default">
               TOMAS LAURINAVICIUS
-            </h2> 
+            </h2>
             <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
             <h2 className="text-[16px] font-[400] text-blog-text-default">
               RESOURCE
@@ -35,7 +35,59 @@ export default function Random() {
             guide to why you should be doing it — and how to get started.
           </p>
         </div>
-        <div className="flex w-full max-w-[80%] sm:max-w-[45%] flex-col gap-5">
+        <div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 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="z-10 flex w-full items-center justify-start gap-2">
+            <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
+            <h2 className="text-[16px] font-[400] text-blog-text-default">
+              TOMAS LAURINAVICIUS
+            </h2>
+            <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
+            <h2 className="text-[16px] font-[400] text-blog-text-default">
+              ANNOUNCEMENTS
+            </h2>
+          </div>
+          <h1 className="text-[28px] font-[600] text-blog-text-default">
+            How to Fix Error 404 Not Found on Your WordPress Site
+          </h1>
+          <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 max-w-[80%] flex-col gap-5 rounded-lg p-10 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="z-10 flex w-full items-center justify-start gap-2">
+            <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
+            <h2 className="text-[16px] font-[400] text-blog-text-default">
+              TOMAS LAURINAVICIUS
+            </h2>
+            <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
+            <h2 className="text-[16px] font-[400] text-blog-text-default">
+              ANNOUNCEMENTS
+            </h2>
+          </div>
+          <h1 className="text-[28px] font-[600] text-blog-text-default">
+            How to Fix Error 404 Not Found on Your WordPress Site
+          </h1>
+          <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 max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
           <Image
             src={"/images/blog/posts/3.jpg"}
             width={580}
diff --git a/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx b/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
index ccdf641..a9a3670 100644
--- a/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
+++ b/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
@@ -12,7 +12,7 @@ export default function ReadingList() {
         </p>
       </div>
       <div className="flex items-center justify-between">
-        <div className="flex flex-col items-center gap-5">
+        <div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-1.jpg"}
@@ -26,7 +26,7 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <div className="flex flex-col items-center gap-5">
+        <div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-2.jpg"}
@@ -40,7 +40,7 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <div className="flex flex-col items-center gap-5">
+        <div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-3.jpg"}
@@ -52,7 +52,7 @@ export default function ReadingList() {
           <h3 className="text-[24px] font-[600] text-blog-text-default">SEO</h3>
         </div>
 
-        <div className="flex flex-col items-center gap-5">
+        <div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-4.jpg"}
@@ -66,7 +66,7 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <div className="flex flex-col items-center gap-5">
+        <div className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-5.jpg"}
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index d7767c4..1c61448 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -4,7 +4,7 @@ import Footer from "./components/footer/footer";
 
 export const metadata: Metadata = {
   title: "parsa aghayi",
-  description: "parsa aghayi personal website",
+  description: "parsa aghayi personal blog",
 };
 
 export default function RootLayout({
diff --git a/src/app/(routes)/blog/new/page.tsx b/src/app/(routes)/blog/new/page.tsx
new file mode 100644
index 0000000..e850073
--- /dev/null
+++ b/src/app/(routes)/blog/new/page.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function New() {
+  return (
+    <div>New</div>
+  )
+}
diff --git a/src/app/(routes)/blog/not-found.tsx b/src/app/(routes)/blog/not-found.tsx
deleted file mode 100644
index ff835f9..0000000
--- a/src/app/(routes)/blog/not-found.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import Image from "next/image";
-import Link from "next/link";
-
-export default function NotFound() {
-  const imageUrl = `/images/404/${Math.floor(Math.random() * 5) + 1}.jpg`;
-  return (
-    <div className="mt-[120px] flex flex-col items-center justify-center gap-3">
-      <Image src={imageUrl} width={500} height={500} alt="404 illustration" />
-      <h2 className="text-[30px] font-[800]">Not Found</h2>
-      <p className="font-[600]">Could not find requested resource</p>
-      <Link
-        href="/"
-        className="rounded-md border border-[#fd6f00] px-5 py-3 font-[500] text-[#fd6f00]"
-      >
-        Return Home
-      </Link>
-    </div>
-  );
-}
diff --git a/src/app/globals.css b/src/app/globals.css
index 79cbfad..5f45921 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -286,3 +286,28 @@ html {
 .center-center {
   @apply items-center justify-center;
 }
+
+.teste {
+  -webkit-mask-image: linear-gradient(
+      to top,
+      transparent,
+      white 20%,
+      white 80%,
+      transparent
+    ),
+    linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
+    linear-gradient(to left, transparent, white 10%, white 90%, transparent),
+    linear-gradient(to right, transparent, white 10%, white 90%, transparent);
+  mask-image: linear-gradient(
+      to top,
+      transparent,
+      white 20%,
+      white 90%,
+      transparent
+    ),
+    linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
+    linear-gradient(to left, transparent, white 10%, white 90%, transparent),
+    linear-gradient(to right, transparent, white 10%, white 90%, transparent);
+  mask-composite: intersect;
+  -webkit-mask-composite: destination-in;
+}