From 162100b1a45b76fbe575983132df1d5a850fb428 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 2 Oct 2024 16:27:44 +0330
Subject: [PATCH] blog readinglist updated

---
 .../(routes)/blog/components/home/new/new.tsx |  6 +++---
 .../home/reading-lists/readingList.tsx        | 19 ++++++++++---------
 src/app/(routes)/blog/layout.tsx              |  2 +-
 src/app/(routes)/blog/page.tsx                |  6 +++---
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/app/(routes)/blog/components/home/new/new.tsx b/src/app/(routes)/blog/components/home/new/new.tsx
index b61e36c..ff32e22 100644
--- a/src/app/(routes)/blog/components/home/new/new.tsx
+++ b/src/app/(routes)/blog/components/home/new/new.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 export default function New() {
   return (
     <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%]">
+      <div className="relative flex h-[300px] sm:h-[400px] 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"
@@ -38,8 +38,8 @@ export default function New() {
         </div>
       </div>
 
-      <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">
+      <div className="flex w-full flex-col md:w-[35%] md:gap-2 lg:gap-2 xl:gap-5">
+        <div className="flex w-full items-center justify-between border-b-2 pb-2 md:pb-5 lg:pb-6 xl:pb-10 lg:gap-8">
           <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/components/home/reading-lists/readingList.tsx b/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
index a9a3670..35b7bdd 100644
--- a/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
+++ b/src/app/(routes)/blog/components/home/reading-lists/readingList.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function ReadingList() {
   return (
-    <div className="flex flex-col gap-10">
+    <div className="mb-5 flex w-full flex-wrap gap-10 max-w-[95%]">
       <div className="flex w-full items-center justify-between">
         <h2 className="text-[36px] font-[700] text-blog-text-default">
           ReadingList
@@ -11,8 +11,9 @@ export default function ReadingList() {
           View all
         </p>
       </div>
-      <div className="flex items-center justify-between">
-        <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="flex w-full flex-wrap justify-center 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 w-[45%] sm:w-[30%] lg:w-[18%]">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-1.jpg"}
@@ -26,7 +27,7 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <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="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-2.jpg"}
@@ -40,7 +41,7 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <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="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-3.jpg"}
@@ -52,7 +53,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 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
+        <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 w-[45%] sm:w-[30%] lg:w-[18%]">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-4.jpg"}
@@ -66,7 +67,7 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <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="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg w-[45%] sm:w-[30%] lg:w-[18%]">
           <div className="h-[200px] w-[200px] overflow-hidden">
             <Image
               src={"/images/blog/reading-list/readinglist-5.jpg"}
@@ -80,14 +81,14 @@ export default function ReadingList() {
           </h3>
         </div>
 
-        <div className="center-center flex h-full w-[80px] rounded-md bg-white">
+        {/* <div className="center-center hidden h-full w-[80px] rounded-md bg-white lg:flex">
           <Image
             src={"/images/blog/icons/right-arrow.svg"}
             height={32}
             width={32}
             alt="right-arrow icon"
           />
-        </div>
+        </div> */}
       </div>
     </div>
   );
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index 9d7a95f..06c12fe 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-[100px] md:my-[150px] flex w-full flex-wrap justify-center overflow-hidden">
+      <div className="main blog relative my-[100px] flex w-full flex-wrap justify-center overflow-hidden md:my-[150px]">
         {children}
       </div>
 
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index 9a7b74e..98ca981 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -5,10 +5,10 @@ import ReadingList from "./components/home/reading-lists/readingList";
 
 export default async function Blog() {
   return (
-    <div className="flex w-[1280px] items-center flex-col gap-[150px]">
+    <div className="flex w-[1280px] items-center flex-col gap-[50px] md:gap-[100px]">
       <New />
-      {/* <ReadingList />
-      <FilteredPosts />
+      <ReadingList />
+      {/* <FilteredPosts />
       <Random /> */}
     </div>
   );