From 677bffe219694904d888215f7ce3f94ee3868d4f Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 13:55:22 +0330
Subject: [PATCH] services get responsive

---
 src/app/_components/about-me/page.tsx |  4 ++--
 src/app/_components/services/page.tsx | 33 ++++++++++++++++-----------
 src/app/page.tsx                      |  2 +-
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/app/_components/about-me/page.tsx b/src/app/_components/about-me/page.tsx
index e1d9c5f..18d5531 100644
--- a/src/app/_components/about-me/page.tsx
+++ b/src/app/_components/about-me/page.tsx
@@ -46,7 +46,7 @@ export default function AboutMe() {
       className="my-20 flex w-full flex-wrap items-center justify-center gap-10 px-5"
       id="about-me"
     >
-      <div className="ms-0 flex w-full min-w-[300px] max-w-[80%] flex-col items-start md:w-[50%]">
+      <div className="ms-0 flex w-full min-w-[300px] max-w-[90%] flex-col items-start md:w-[50%]">
         <h2 className="w-full text-[65px] font-[600] text-black">
           {aboutMe?.title || <Skeleton width={300} height={100} />}
         </h2>
@@ -77,7 +77,7 @@ export default function AboutMe() {
         </ul>
       </div>
       {aboutMe?.image ? (
-        <div className="flex w-full max-w-[80%] items-center justify-center md:w-[40%]">
+        <div className="flex w-full max-w-[90%] items-center justify-center md:w-[40%]">
           <img src={aboutMe.image} alt="profile picture" className="" />
         </div>
       ) : (
diff --git a/src/app/_components/services/page.tsx b/src/app/_components/services/page.tsx
index 6b4a2ec..5af75a5 100644
--- a/src/app/_components/services/page.tsx
+++ b/src/app/_components/services/page.tsx
@@ -38,24 +38,28 @@ export default function Services() {
     };
 
     fetchServices();
-
   }, []);
 
   if (loading) {
     return (
-      <div className="flex flex-col items-center" id="services">
+      <div
+        className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
+        id="services"
+      >
         <h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
-        <p className="w-[930px] text-center text-[21px] font-[400] text-black">
+        <p className="w-full text-center text-[21px] font-[400] text-black">
           Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
           lectus netus in. Aliquet donec morbi convallis pretium
         </p>
-        <div className="service mt-20 flex w-[1420px] items-center justify-between gap-[30px]">
+        <div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
           {Array.from({ length: 4 }).map((_, index) => (
             <div
               key={index}
-              className="flex flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] w-full"
+              className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
             >
-              <Skeleton containerClassName={"w-[100px]"} height={120} />
+              <div className="my-5 flex w-full justify-center">
+                <Skeleton containerClassName={"w-[100px]"} height={120} />
+              </div>
               <Skeleton containerClassName={"w-full"} height={32} />
               <Skeleton containerClassName={"w-full"} height={60} />
             </div>
@@ -68,25 +72,28 @@ export default function Services() {
   if (error) return <p>Error: {error}</p>;
 
   return (
-    <div className="flex flex-col items-center" id="services">
+    <div
+      className="flex w-full max-w-[90%] flex-col flex-wrap items-center"
+      id="services"
+    >
       <h2 className="my-10 text-[65px] font-[600] text-black">Services</h2>
-      <p className="w-[930px] text-center text-[21px] font-[400] text-black">
+      <p className="w-full text-center text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Tristique amet sed massa nibh
         lectus netus in. Aliquet donec morbi convallis pretium
       </p>
-      <div className="service mt-20 flex w-[1420px] items-center justify-between gap-[30px]">
+      <div className="service mt-20 flex w-full flex-wrap items-start justify-between gap-10">
         {services.map((service) => (
           <div
             key={service.id} // استفاده از id به عنوان کلید
-            className="flex flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px]"
+            className="flex w-[45%] flex-wrap items-center rounded-lg bg-[#F8F8F8] p-[22px] lg:w-[22%]"
           >
-            <div className="my-5 w-full">
+            <div className="my-5 flex w-full justify-center">
               <img src={service.imageSrc} alt={service.altText} />
             </div>
-            <h3 className="text-[32px] font-[600] text-black">
+            <h3 className="text-[24px] font-[700] text-black xl:text-[32px]">
               {service.title}
             </h3>
-            <p className="text-[19px] font-[400] text-black">
+            <p className="text-[15px] font-[400] text-black xl:text-[20px]">
               {service.description}
             </p>
           </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4bc9dbc..7664dd4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -59,7 +59,7 @@ export default function Home() {
           </div>
         </div>
         {/* end */}
-        <div className="items flex w-full max-w-[80%] flex-col md:max-w-[70%] lg:w-[45%] xl:w-[50%]">
+        <div className="items flex w-full max-w-[90%] flex-col md:max-w-[70%] lg:w-[45%] xl:w-[50%]">
           <p className="text-[20px] font-[400] text-black 2xl:text-[24px]">
             Hi I am{" "}
           </p>