responsive page about-us & contact-us & item clinic

components/contactUs/Call.js

@@ -11,12 +11,12 @@ function Call() {
 
     return (
         <div data-aos="flip-left"
-            className="lg:min-w-[calc(50%_+_70px)] bg-[#5559C2] lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px] 
+            className="lg:min-w-[calc(50%_+_70px)] bg-banner-about !bg-center !bg-no-repeat !bg-cover lg:pl-[18%] h-fit pt-[16px] sm:pt-[29px] md:pt-[42px] lg:pt-[55px] 
         bg-contact rounded-[8px] pb-[30px] sm:pb-[42px] md:pb-[55px] 
         overflow-hidden lg:pb-[171px] px-[16px] sm:px-[27px] md:px-[39px] lg:px-[48px]">
             <p className="text-[#FAFAFA] text-[20px] font-bold">تماس با ما</p>
             <p
-                className="text-[#FAFAFA] leading-[26px] text-[16px] font-normal mt-6"
+                className="text-[#FAFAFA] leading-[26px] text-[14px] md:text-[16px] font-normal mt-6"
             >سامانه نوبت 724 به مردم کمک می کند تا دسترسی آسان تر و سریع تری به خدمات پزشکی و درمانی داشته باشند.</p>
             <ul className="flex flex-col mt-[68px] justify-start items-start gap-[32px]">
                 <ContentContact

components/contactUs/Connect.js

@@ -1,12 +1,13 @@
-import Field from "@/app/component/Field"
-import { Button } from "@mui/material"
-import ArrowLeftC from "../icons/ArrowLeftC"
+import ArrowLeftC from "../icons/ArrowLeftC";
+import { Button } from "@mui/material";
+import FieldLabel from "./FieldLabel";
+import Field from "@/app/component/Field";
 
 function Connect() {
     return (
         <div
             className="lg:min-w-[calc(50%_+_70px)] w-full lg:translate-x-[140px] bg-[#FFF] lg:p-[32px]
-                shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-8 p-[16px] sm:p-[21px] md:p-[27px]"
+                shadow-[0px_0px_28.6px_0px_rgba(147,_147,_147,_0.25)] mt-[16px] lg:mt-0 p-[16px] sm:p-[21px] md:p-[27px]"
         >
             <div data-aos="zoom-in">
                 <div className="flex flex-col justify-center items-center gap-[10px]">
@@ -14,9 +15,13 @@ function Connect() {
                     <p className="text-[#525252] text-[14px] font-normal">نظرات و پیشنهادات خود را با ما در میان بگذارید.</p>
                 </div>
                 <div className="mt-[40px] flex flex-col gap-[20px]">
-                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
-                        <Field title='نام و نام خانوادگی' type='text' />
-                        <Field title='شماره موبایل' type='text' />
+                    <div className="flex flex-col sm:flex-row items-center justify-center gap-[24px] sm:gap-[21px] md:gap-18px] lg:gap-[16px]">
+                        <FieldLabel title='نام و نام خانوادگی'>
+                            <Field title='احسان احمدی' type='text' />
+                        </FieldLabel>
+                        <FieldLabel title='شماره موبایل'>
+                            <Field title='09121056987' type='text' />
+                        </FieldLabel>
                     </div>
                     <div>
                         <Field title='پیام شما...' type='text' multiline={true} />

components/contactUs/FieldLabel.js

@@ -0,0 +1,10 @@
+function FieldLabel({ children, title }) {
+    return (
+        <div className="flex flex-col items-start justify-start w-full gap-[12px] md:gap-[14px] lg:gap-[16px]">
+            <p className="text-[#525252] text-[14px] font-medium">{title}</p>
+            {children}
+        </div>
+    )
+}
+
+export default FieldLabel