From 6d83f4331019aca314c6fa7bf274eddae501d899 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Sun, 20 Oct 2024 10:11:23 +0330
Subject: [PATCH] blog homepage responsive updated

---
 .../blog/components/home/Categories/Categories.tsx        | 2 +-
 .../blog/components/home/filtered-posts/filteredPosts.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/(routes)/blog/components/home/Categories/Categories.tsx b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
index b016bbc..406fc10 100644
--- a/src/app/(routes)/blog/components/home/Categories/Categories.tsx
+++ b/src/app/(routes)/blog/components/home/Categories/Categories.tsx
@@ -26,7 +26,7 @@ export default function Categories({ data }: CategoriesProps) {
           <Link
             key={category.id}
             href={`/blog/categories/${category.slug}`}
-            className="flex flex-col items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
+            className="flex flex-col w-[45%] items-center gap-5 overflow-hidden rounded-md pb-5 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:w-[30%] lg:w-[18%]"
           >
             <div className="h-[200px] w-[200px] overflow-hidden">
               <Image
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 4ba7618..521a5bd 100644
--- a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
+++ b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
@@ -21,12 +21,12 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
         </Link>
       </div>
 
-      <div className="flex w-full flex-wrap justify-center gap-5">
-        <div className="flex w-full flex-wrap justify-center gap-5 lg:w-[37%]">
+      <div className="flex w-full flex-wrap justify-center gap-5 items-center">
+        <div className="flex w-full flex-wrap justify-center gap-5 md:w-[50%]">
           {data.slice(1).map((post) => (
             <div
               key={post.id}
-              className="flex h-[200px] w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg md:w-[48%] lg:w-[45%]"
+              className="flex min-h-[200px] p-5 w-[45%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg"
             >
               <Link
                 href={`/blog/categories/${post.category.slug}`}
@@ -44,7 +44,7 @@ export default function FilteredPosts({ data }: FilteredPostsProps) {
           ))}
         </div>
 
-        <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] lg:h-auto lg:w-[60%]">
+        <div className="relative flex h-[300px] w-full flex-col justify-center overflow-hidden rounded-md border sm:h-[400px] md:w-[45%]">
           <Image
             src={data[0].featured_image}
             alt={`${data[0].title} post featured_image`}