From a0e2eb2bf40a347427658d58c67f17e966fbf583 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 2 Oct 2024 16:06:28 +0330
Subject: [PATCH] blog new responsived now

---
 .../blog/components/footer/footer.tsx         |  2 +-
 .../(routes)/blog/components/home/new/new.tsx | 28 ++++++++++++-------
 src/app/(routes)/blog/layout.tsx              |  2 +-
 src/app/(routes)/blog/page.tsx                |  6 ++--
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/app/(routes)/blog/components/footer/footer.tsx b/src/app/(routes)/blog/components/footer/footer.tsx
index 537a0f1..3c71e0d 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 flex w-full items-center justify-around bg-white py-5">
+    <div className="absolute bottom-0 flex w-full flex-wrap items-center justify-around bg-white py-5">
       <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
index c8362ad..b61e36c 100644
--- a/src/app/(routes)/blog/components/home/new/new.tsx
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@@ -2,8 +2,8 @@ import Image from "next/image";
 
 export default function New() {
   return (
-    <div className="flex w-full flex-wrap justify-between gap-5">
-      <div className="relative flex w-[60%] flex-col overflow-hidden rounded-md border">
+    <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 md:h-auto md:w-[60%]">
         <Image
           src={"/images/blog/posts/1.jpg"}
           alt="parsaaghayi's blog logo"
@@ -13,25 +13,33 @@ export default function New() {
 
         <div className="absolute flex flex-wrap gap-5 p-10">
           <div className="z-10 flex w-full items-center justify-start gap-2">
-            <p className="text-[16px] font-[400] text-white">BY</p>
-            <h2 className="text-[16px] font-[400] text-white">AUTHOR NAME</h2>
-            <p className="text-[16px] font-[400] text-white">IN</p>
-            <h2 className="text-[16px] font-[400] text-white">CATEGORY</h2>
+            <p className="text-[15px] font-[400] text-white sm:text-[16px]">
+              BY
+            </p>
+            <h2 className="text-[15px] font-[400] text-white sm:text-[16px]">
+              AUTHOR NAME
+            </h2>
+            <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>
           </div>
 
-          <h1 className="z-10 w-full text-[28px] font-[600] text-white">
+          <h1 className="z-10 w-full text-[18px] font-[600] text-white sm:text-[28px]">
             How to accept rejection gracefully — and use it to grow
           </h1>
 
-          <p className="z-10 w-full text-[16px] font-[400] text-white">
+          <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.
           </p>
         </div>
       </div>
 
-      <div className="flex w-[35%] flex-col gap-10">
-        <div className="flex w-full items-center justify-between border-b-2 pb-10">
+      <div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-10">
+        <div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:pb-6 xl:pb-10">
           <h2 className="text-[24px] font-[700] text-blog-text-default">New</h2>
           <p className="text-[16px] font-[400] text-blog-text-passive">
             View all new
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index a450c64..9d7a95f 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
 
       <Header />
 
-      <div className="main blog relative my-[200px] flex w-full flex-wrap justify-center overflow-hidden">
+      <div className="main blog relative my-[100px] md:my-[150px] flex w-full flex-wrap justify-center overflow-hidden">
         {children}
       </div>
 
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index 55aceb9..9a7b74e 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -5,11 +5,11 @@ import ReadingList from "./components/home/reading-lists/readingList";
 
 export default async function Blog() {
   return (
-    <div className="flex w-[1280px] flex-col gap-[150px]">
+    <div className="flex w-[1280px] items-center flex-col gap-[150px]">
       <New />
-      <ReadingList />
+      {/* <ReadingList />
       <FilteredPosts />
-      <Random />
+      <Random /> */}
     </div>
   );
 }