From 98ec9ff4fe8290791a38a87dab3fd018b9cf4855 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 2 Oct 2024 16:42:20 +0330
Subject: [PATCH] blog FilteredPosts is responsive now

---
 .../home/filtered-posts/filteredPosts.tsx     | 52 +++++++++++--------
 src/app/(routes)/blog/page.tsx                |  4 +-
 2 files changed, 32 insertions(+), 24 deletions(-)

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 f4173ce..99c46f0 100644
--- a/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
+++ b/src/app/(routes)/blog/components/home/filtered-posts/filteredPosts.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function FilteredPosts() {
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex max-w-[95%] flex-wrap gap-10 mb-5">
       <div className="flex w-full items-center justify-between">
         <h2 className="text-[36px] font-[700] text-blog-text-default">
           Popular
@@ -12,46 +12,46 @@ export default function FilteredPosts() {
         </p>
       </div>
 
-      <div className="flex w-full justify-between gap-10">
-        <div className="flex w-[45%] flex-wrap justify-between gap-5">
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
-            <h2 className="text-[16px] font-[400] text-blog-text-passive">
+      <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 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%]">
+            <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
               FREELANCING
             </h2>
-            <h1 className="text-[18px] font-[600] text-blog-text-default">
+            <h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
               Affiliate Systems Suck, So We Rolled Our Own
             </h1>
           </div>
 
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
-            <h2 className="text-[16px] font-[400] text-blog-text-passive">
+          <div 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%]">
+            <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
               RESOURCE
             </h2>
-            <h1 className="text-[18px] font-[600] text-blog-text-hover">
+            <h1 className="text-[15px] font-[600] text-blog-text-hover sm:text-[18px]">
               How not to design web forms
             </h1>
           </div>
 
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
-            <h2 className="text-[16px] font-[400] text-blog-text-passive">
+          <div 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%]">
+            <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
               DESIGN PROCESS
             </h2>
-            <h1 className="text-[18px] font-[600] text-blog-text-default">
+            <h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
               B2B Lead Generation – Tips and Strategies for 2018
             </h1>
           </div>
 
-          <div className="flex h-[200px] w-[48%] flex-col justify-center gap-5 rounded-[8px] bg-white px-5 shadow-md transition-all hover:scale-105 hover:shadow-lg">
-            <h2 className="text-[16px] font-[400] text-blog-text-passive">
+          <div 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%]">
+            <h2 className="text-[14px] font-[400] text-blog-text-passive sm:text-[16px]">
               INSPIRATION
             </h2>
-            <h1 className="text-[18px] font-[600] text-blog-text-default">
+            <h1 className="text-[15px] font-[600] text-blog-text-default sm:text-[18px]">
               8 Best WordPress Ecommerce Plugins
             </h1>
           </div>
         </div>
 
-        <div className="relative flex w-[55%] items-center overflow-hidden rounded-md">
+        <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%]">
           <Image
             src={"/images/blog/posts/2.jpg"}
             alt="parsaaghayi's blog logo"
@@ -61,17 +61,25 @@ export default function FilteredPosts() {
 
           <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>
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index eca5fdb..f650afc 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -8,8 +8,8 @@ export default async function Blog() {
     <div className="flex w-[1280px] flex-col items-center gap-[50px] md:gap-[100px]">
       <New />
       <ReadingList />
-      {/* <FilteredPosts />
-      <Random /> */}
+      <FilteredPosts />
+      {/* <Random /> */}
     </div>
   );
 }