From 1349b9b28e6a21b76e81a8c36eabb8bd9b43b527 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Tue, 24 Sep 2024 15:04:19 +0330
Subject: [PATCH] testimonial gets responsive

---
 src/app/_components/my-projects/page.tsx  | 18 ++++++++----
 src/app/_components/services/page.tsx     |  4 +--
 src/app/_components/testimonials/page.tsx | 34 +++++++++++++----------
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/src/app/_components/my-projects/page.tsx b/src/app/_components/my-projects/page.tsx
index afd47c7..e92aaa1 100644
--- a/src/app/_components/my-projects/page.tsx
+++ b/src/app/_components/my-projects/page.tsx
@@ -73,7 +73,10 @@ export default function MyProjects() {
       : groupedProjects[selectedCategory]?.slice(0, 6) || []; // Get first 6 projects from selected category
 
   return (
-    <div className="flex w-full flex-wrap items-center max-w-[90%] justify-center" id="projects">
+    <div
+      className="flex w-full max-w-[90%] flex-wrap items-center justify-center"
+      id="projects"
+    >
       <h2 className="my-10 text-[65px] font-[600] text-black">My Projects</h2>
       <p className="text-justify text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
@@ -85,7 +88,7 @@ export default function MyProjects() {
             <li
               key={index}
               onClick={() => setSelectedCategory(category.label)}
-              className={`select-none rounded-md border whitespace-nowrap border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[18px] font-[600] hover:cursor-pointer hover:border-[#FD6F00] ${
+              className={`select-none whitespace-nowrap rounded-md border border-[#545454] bg-[#F8F8F8] px-[20px] py-[10px] text-[18px] font-[600] hover:cursor-pointer hover:border-[#FD6F00] ${
                 selectedCategory === category.label
                   ? "bg-[#FD6F00] text-[#FFFFFF]"
                   : "text-[#000]"
@@ -106,8 +109,11 @@ export default function MyProjects() {
       <div className="flex flex-wrap items-start justify-center gap-8">
         {filteredProjects.length > 0 ? (
           filteredProjects.map((project, index) => (
-            <div key={index} className="project flex w-[45%] md:w-[30%] flex-wrap">
-              <div className="relative my-5 h-[200px] md:h-[250px] lg:h-[300px] w-full overflow-hidden bg-[#FFEBDB]">
+            <div
+              key={index}
+              className="project flex w-[45%] flex-wrap md:w-[30%]"
+            >
+              <div className="relative my-5 h-[200px] w-full overflow-hidden bg-[#FFEBDB] md:h-[250px] lg:h-[300px]">
                 {project.images.map((image, idx) => (
                   <img
                     key={idx}
@@ -117,10 +123,10 @@ export default function MyProjects() {
                   />
                 ))}
               </div>
-              <h5 className="w-full text-[15px] lg:text-[20px] font-[600] text-[#FD6F00]">
+              <h5 className="w-full text-[15px] font-[600] text-[#FD6F00] lg:text-[20px]">
                 {project.category}
               </h5>
-              <p className="text-[18px] lg:text-[22px] font-[800] text-black hover:cursor-pointer">
+              <p className="text-[18px] font-[800] text-black hover:cursor-pointer lg:text-[22px]">
                 {project.title}
               </p>
             </div>
diff --git a/src/app/_components/services/page.tsx b/src/app/_components/services/page.tsx
index 8f4a17c..c15aed1 100644
--- a/src/app/_components/services/page.tsx
+++ b/src/app/_components/services/page.tsx
@@ -53,14 +53,14 @@ export default function Services() {
           <img src={service!.imageSrc} alt={service!.altText} />
         )}
       </div>
-      <h3 className="text-[24px] font-[700] text-black xl:text-[32px] w-full">
+      <h3 className="w-full text-[24px] font-[700] text-black xl:text-[32px]">
         {loading ? (
           <Skeleton containerClassName={"w-full"} height={32} />
         ) : (
           service!.title
         )}
       </h3>
-      <p className="text-[15px] font-[400] text-black xl:text-[20px] w-full">
+      <p className="w-full text-[15px] font-[400] text-black xl:text-[20px]">
         {loading ? (
           <Skeleton containerClassName={"w-full"} height={60} />
         ) : (
diff --git a/src/app/_components/testimonials/page.tsx b/src/app/_components/testimonials/page.tsx
index 044bd2c..dbb6628 100644
--- a/src/app/_components/testimonials/page.tsx
+++ b/src/app/_components/testimonials/page.tsx
@@ -48,28 +48,32 @@ export default function Testimonials() {
   ];
 
   return (
-    <div className="flex flex-col items-center" id="testimonials">
-      <h2 className="my-10 text-[65px] font-[600] text-black">Testominials</h2>
-      <p className="w-[930px] text-center text-[21px] font-[400] text-black">
+    <div
+      className="flex w-full max-w-[90%] flex-wrap justify-center"
+      id="testimonials"
+    >
+      <h2 className="text-[65px] font-[600] text-black">Testominials</h2>
+      <p className="my-10 text-justify text-[21px] font-[400] text-black">
         Lorem ipsum dolor sit amet consectetur. Mollis erat duis aliquam mauris
         est risus lectus. Phasellus consequat urna tellus
       </p>
-      <div className="mt-10 flex max-w-[1800px] select-none items-center justify-center gap-[30px] overflow-hidden hover:cursor-grab">
+      <div className="flex select-none flex-wrap items-center justify-center gap-8 overflow-hidden hover:cursor-grab">
         {testimonials.map((testimonial, index) => (
           <div
-            className={`flex min-w-[800px] items-center justify-around gap-10 rounded-lg bg-[#F8F8F8] p-[25px] ${
+            className={`flex w-full max-w-[600px] flex-wrap items-center justify-around gap-3 rounded-lg bg-[#F8F8F8] p-5 ${
               currentIndex === index ? "" : "blur-[2px]"
             }`}
             key={index}
           >
-            <Image
-              src={testimonial.image}
-              width={235}
-              height={235}
-              alt="user profile picture"
-            />
-            <div className="flex flex-wrap items-center">
-              <p className="mb-5 w-full text-[21px] font-[400] text-black">
+            <div className="flex w-full justify-center sm:w-[30%]">
+              <img
+                src={testimonial.image}
+                className="w-[100px] sm:w-[150px]"
+                alt="user profile picture"
+              />
+            </div>
+            <div className="flex w-full flex-wrap items-center sm:w-[60%]">
+              <p className="mb-3 w-full text-justify text-[15px] font-[400] text-black">
                 <span className="me-2 text-[21px] font-[700] text-[#FD6F00]">
                   “
                 </span>
@@ -79,10 +83,10 @@ export default function Testimonials() {
                   “
                 </span>
               </p>
-              <h5 className="w-full text-[24px] font-[500] text-[#000]">
+              <h5 className="w-full text-[20px] font-[700] text-[#000]">
                 {testimonial.name}
               </h5>
-              <p className="w-full text-[19px] font-[400] text-[#000]">
+              <p className="w-full text-[15px] font-[400] text-[#000]">
                 {testimonial.position}
               </p>
             </div>