blog categories list created and got responsive

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

@@ -1,7 +1,200 @@
-
+import Image from "next/image";
+import Link from "next/link";
 
 export default function Categories() {
   return (
-    <div>list of categories</div>
-  )
+    <div className="flex w-full max-w-[1280px] sm:my-10 flex-wrap justify-center">
+      <div className="flex w-full max-w-[90%] flex-col gap-5">
+        <h1 className="text-[36px] font-[700] 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>
+      </div>
+      <div className="my-10 flex w-full max-w-[90%] flex-wrap justify-center gap-5">
+        <ul className="my-10 flex w-full max-w-[90%]">
+          <li className="text-[12px] font-[400] text-blog-text-passive">
+            Home
+          </li>
+          <span className="mx-4 mt-[-2px] scale-[3] text-[12px] font-[400] text-blog-text-passive">
+            -
+          </span>
+          <li className="text-[12px] font-[600] text-blog-text-default">
+            Categories
+          </li>
+        </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>
+            </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're 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're 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're
+                going to love these.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }

src/app/(routes)/blog/components/header/navLinks.tsx

@@ -32,15 +32,9 @@ export function NavLinks({ className }: NavLinksPropsType) {
       </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"
+        href="/blog/categories"
       >
-        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
+        Categories
       </Link>
     </nav>
   );

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

@@ -8,9 +8,12 @@ export default function Categories() {
         <h2 className="text-[36px] font-[700] text-blog-text-default">
           Categories
         </h2>
-        <p className="text-[16px] font-[400] text-blog-text-passive">
+        <Link
+          href={"/blog/categories"}
+          className="text-[16px] font-[400] text-blog-text-passive"
+        >
           View all
-        </p>
+        </Link>
       </div>
 
       <div className="flex w-full flex-wrap items-center justify-center gap-5">

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

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