From 7e243fdd4da707cb9256dd9c4db8ab156bf984dd Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 2 Oct 2024 16:57:00 +0330
Subject: [PATCH] blog random is reponsive now

---
 .../blog/components/home/random/random.tsx    | 122 +++++++++++-------
 src/app/(routes)/blog/page.tsx                |   2 +-
 2 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/src/app/(routes)/blog/components/home/random/random.tsx b/src/app/(routes)/blog/components/home/random/random.tsx
index 188141a..53aeda3 100644
--- a/src/app/(routes)/blog/components/home/random/random.tsx
+++ b/src/app/(routes)/blog/components/home/random/random.tsx
@@ -2,14 +2,14 @@ import Image from "next/image";
 
 export default function Random() {
   return (
-    <div className="flex flex-col gap-10">
+    <div className="mb-10 flex w-full max-w-[90%] flex-wrap gap-10">
       <div className="flex w-full items-center justify-between">
         <h2 className="text-[36px] font-[700] text-blog-text-default">
           Random
         </h2>
       </div>
       <div className="flex w-full flex-wrap justify-center gap-10">
-        <div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
+        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
           <Image
             src={"/images/blog/posts/2.jpg"}
             width={580}
@@ -17,17 +17,25 @@ export default function Random() {
             alt="post title 2"
             className="w-full rounded-lg"
           />
-          <div className="z-10 flex w-full items-center justify-start gap-2">
-            <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              TOMAS LAURINAVICIUS
-            </h2>
-            <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              RESOURCE
-            </h2>
+          <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
+            <div className="flex w-full">
+              <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                BY
+              </p>
+              <h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
+                TOMAS LAURINAVICIUS
+              </h2>
+            </div>
+            <div className="flex w-full">
+              <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
+                IN
+              </p>
+              <h2 className="text-[16px] font-[400] text-blog-text-default">
+                RESOURCE
+              </h2>
+            </div>
           </div>
-          <h1 className="text-[28px] font-[600] text-blog-text-default">
+          <h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
             How to Fix Error 404 Not Found on Your WordPress Site
           </h1>
           <p className="text-[16px] font-[400] text-blog-text-passive">
@@ -35,7 +43,7 @@ export default function Random() {
             guide to why you should be doing it — and how to get started.
           </p>
         </div>
-        <div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
+        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
           <Image
             src={"/images/blog/posts/3.jpg"}
             width={580}
@@ -43,17 +51,25 @@ export default function Random() {
             alt="post title 3"
             className="w-full rounded-lg"
           />
-          <div className="z-10 flex w-full items-center justify-start gap-2">
-            <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              TOMAS LAURINAVICIUS
-            </h2>
-            <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              ANNOUNCEMENTS
-            </h2>
+          <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
+            <div className="flex w-full">
+              <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                BY
+              </p>
+              <h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
+                TOMAS LAURINAVICIUS
+              </h2>
+            </div>
+            <div className="flex w-full">
+              <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
+                IN
+              </p>
+              <h2 className="text-[16px] font-[400] text-blog-text-default">
+                ANNOUNCEMENTS
+              </h2>
+            </div>
           </div>
-          <h1 className="text-[28px] font-[600] text-blog-text-default">
+          <h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
             How to Fix Error 404 Not Found on Your WordPress Site
           </h1>
           <p className="text-[16px] font-[400] text-blog-text-passive">
@@ -61,7 +77,7 @@ export default function Random() {
             guide to why you should be doing it — and how to get started.
           </p>
         </div>
-        <div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
+        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
           <Image
             src={"/images/blog/posts/3.jpg"}
             width={580}
@@ -69,17 +85,25 @@ export default function Random() {
             alt="post title 3"
             className="w-full rounded-lg"
           />
-          <div className="z-10 flex w-full items-center justify-start gap-2">
-            <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              TOMAS LAURINAVICIUS
-            </h2>
-            <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              ANNOUNCEMENTS
-            </h2>
+          <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
+            <div className="flex w-full">
+              <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                BY
+              </p>
+              <h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
+                TOMAS LAURINAVICIUS
+              </h2>
+            </div>
+            <div className="flex w-full">
+              <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
+                IN
+              </p>
+              <h2 className="text-[16px] font-[400] text-blog-text-default">
+                ANNOUNCEMENTS
+              </h2>
+            </div>
           </div>
-          <h1 className="text-[28px] font-[600] text-blog-text-default">
+          <h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
             How to Fix Error 404 Not Found on Your WordPress Site
           </h1>
           <p className="text-[16px] font-[400] text-blog-text-passive">
@@ -87,7 +111,7 @@ export default function Random() {
             guide to why you should be doing it — and how to get started.
           </p>
         </div>
-        <div className="flex w-full max-w-[80%] flex-col gap-5 rounded-lg p-10 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
+        <div className="flex w-full flex-col gap-5 rounded-lg p-8 shadow-md transition-all hover:scale-105 hover:shadow-lg sm:max-w-[45%]">
           <Image
             src={"/images/blog/posts/3.jpg"}
             width={580}
@@ -95,17 +119,25 @@ export default function Random() {
             alt="post title 3"
             className="w-full rounded-lg"
           />
-          <div className="z-10 flex w-full items-center justify-start gap-2">
-            <p className="text-[16px] font-[400] text-blog-text-passive">BY</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              TOMAS LAURINAVICIUS
-            </h2>
-            <p className="text-[16px] font-[400] text-blog-text-passive">IN</p>
-            <h2 className="text-[16px] font-[400] text-blog-text-default">
-              ANNOUNCEMENTS
-            </h2>
+          <div className="z-10 flex w-full flex-wrap items-center justify-start gap-2">
+            <div className="flex w-full">
+              <p className="me-2 text-[14px] font-[600] text-blog-text-passive md:text-[16px]">
+                BY
+              </p>
+              <h2 className="text-[14px] font-[400] text-blog-text-default md:text-[16px]">
+                TOMAS LAURINAVICIUS
+              </h2>
+            </div>
+            <div className="flex w-full">
+              <p className="me-2 text-[16px] font-[600] text-blog-text-passive">
+                IN
+              </p>
+              <h2 className="text-[16px] font-[400] text-blog-text-default">
+                ANNOUNCEMENTS
+              </h2>
+            </div>
           </div>
-          <h1 className="text-[28px] font-[600] text-blog-text-default">
+          <h1 className="text-[18px] font-[600] text-blog-text-default lg:text-[28px]">
             How to Fix Error 404 Not Found on Your WordPress Site
           </h1>
           <p className="text-[16px] font-[400] text-blog-text-passive">
diff --git a/src/app/(routes)/blog/page.tsx b/src/app/(routes)/blog/page.tsx
index f650afc..ac5fb07 100644
--- a/src/app/(routes)/blog/page.tsx
+++ b/src/app/(routes)/blog/page.tsx
@@ -9,7 +9,7 @@ export default async function Blog() {
       <New />
       <ReadingList />
       <FilteredPosts />
-      {/* <Random /> */}
+      <Random />
     </div>
   );
 }