From bd9680be4e8cd2814e1efd50f301ef0b7034c482 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 30 Sep 2024 20:22:05 +0330
Subject: [PATCH] nemidanam, etela'i nadaram! :D

---
 .../blog/components/header/header.tsx         |  2 +-
 .../(routes)/blog/components/home/new/new.tsx | 25 +++++++++++++++++++
 src/app/(routes)/blog/layout.tsx              |  2 +-
 src/app/(routes)/blog/page.tsx                |  6 +++--
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(routes)/blog/components/home/new/new.tsx

diff --git a/src/app/(routes)/blog/components/header/header.tsx b/src/app/(routes)/blog/components/header/header.tsx
index 10764a3..367a38b 100644
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@@ -4,7 +4,7 @@ import Button from "../button/button";
 
 export default function Header() {
   return (
-    <div className="fixed top-10 flex w-full items-center justify-around">
+    <div className="fixed top-10 flex w-[1280px] items-center justify-between">
       <Image
         src={"/images/blog/logo/logo-no-background.png"}
         width={200}
diff --git a/src/app/(routes)/blog/components/home/new/new.tsx b/src/app/(routes)/blog/components/home/new/new.tsx
new file mode 100644
index 0000000..6718cea
--- /dev/null
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@@ -0,0 +1,25 @@
+export default function New() {
+  return (
+    <div className="flex w-full flex-wrap justify-between gap-5">
+      <div className="relative flex w-[55%] flex-col border">
+        <img
+          src={"/images/blog/logo/logo-no-background.png"}
+          alt="parsaaghayi's blog logo"
+          className="absolute z-0"
+        />
+        <div className="flex items-center justify-center gap-2">
+          <p className="text-white text-[16px] font-[400]">BY</p>
+          <h2 className="text-white text-[16px] font-[400]">AUTHOR NAME</h2>
+          <p className="text-white text-[16px] font-[400]">IN</p>
+          <h2 className="text-white text-[16px] font-[400]">CATEGORY</h2>
+        </div>
+        <h1>How to accept rejection gracefully — and use it to grow</h1>
+        <p>
+          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-[40%] border">list</div>
+    </div>
+  );
+}
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index 18901d9..c6d37f8 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -13,7 +13,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex w-full flex-wrap pt-5">
+    <div className="flex w-full flex-wrap justify-center">
       <link
         rel="icon"
         href="/images/favicons/blog-icon.png"
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index 3cd6e29..0f6bdd0 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -1,7 +1,9 @@
+import New from "./components/home/new/new";
+
 export default async function Blog() {
   return (
-    <div className="">
-      Blog
+    <div className="w-[1280px]">
+      <New />
     </div>
   );
 }