responsive page clinics & about & contact & doctors

app/globals.css

@@ -246,11 +246,13 @@ html {
 
 /* Hidden Scroll */
 
-.hidden-scroll::-webkit-scrollbar-thumb {
+.hidden-scroll::-webkit-scrollbar-thumb,
+.MuiTabs-scroller::-webkit-scrollbar-thumb {
     background: transparent;
 }
 
-.hidden-scroll::-webkit-scrollbar {
+.hidden-scroll::-webkit-scrollbar,
+.MuiTabs-scroller::-webkit-scrollbar {
     height: 0;
 }
 

components/clinic/components/about/Images.js

@@ -1,47 +0,0 @@
-import Image from 'next/image';
-
-function Images({ data }) {
-    return (
-        <div className='flex items-center mb-[8px] justify-center gap-[24px] w-full'>
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.images_clinic[0]}
-                alt="img clinic"
-                height={432}
-                width={600}
-            />
-            <div className="grid grid-cols-2 gap-[24px]">
-                <Image
-                    className="rounded-[8px] overflow-hidden"
-                    src={data.images_clinic[1]}
-                    alt="img clinic"
-                    height={204}
-                    width={288}
-                />
-                <Image
-                    className="rounded-[8px] overflow-hidden"
-                    src={data.images_clinic[2]}
-                    alt="img clinic"
-                    height={204}
-                    width={288}
-                />
-                <Image
-                    className="rounded-[8px] overflow-hidden"
-                    src={data.images_clinic[3]}
-                    alt="img clinic"
-                    height={204}
-                    width={288}
-                />
-                <Image
-                    className="rounded-[8px] overflow-hidden"
-                    src={data.images_clinic[4]}
-                    alt="img clinic"
-                    height={204}
-                    width={288}
-                />
-            </div>
-        </div>
-    )
-}
-
-export default Images

components/clinic/components/about/ListBime.js

@@ -2,11 +2,11 @@ import Image from 'next/image'
 
 function ListBime({ data }) {
     return (
-        <ul className='flex mt-[8px] items-center justify-center gap-[24px]'>
+        <ul className='flex overflow-auto hidden-scroll  mt-[8px] items-center justify-start xl:justify-center gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]'>
             {data.list_bime.map((item, idx) => (
                 <li
                     key={idx}
-                    className='p-[16px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
+                    className='p-[16px] min-w-[156px] w-full border border-[#EFEFEF] flex flex-col items-center justify-center gap-[20px]'
                 >
                     <Image
                         src={item.img}

components/clinic/components/about/Services.js

@@ -2,16 +2,21 @@ import TickCircleOrange from '@/components/icons/TickCircleOrange';
 
 function Services({ data }) {
   return (
-    <ul className='mt-[8px] w-full p-[22px] gap-x-[64px] gap-y-[40px] rounded-[8px] bg-[#FFF] grid grid-cols-4'>
+    <ul className='
+    mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
+    gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
+    gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
       {data.specialties.map((item, idx) => (
         <li
           key={idx}
-          className='flex items-center justify-start gap-2'
+          className='flex items-start justify-start gap-2'
         >
-          <TickCircleOrange />
+          <div className='min-w-[24px] min-h-[24px]'>
+            <TickCircleOrange />
+          </div>
           <p
             className={`
-            text-[16px] font-normal
+            text-[16px] font-normal 
             ${idx === 0 ? 'text-[#F17732]' : 'text-[#525252]'}
           `}
           >{item}</p>

components/clinic/components/about/Specialties.js

@@ -2,13 +2,18 @@ import TickCircleOrange from '@/components/icons/TickCircleOrange';
 
 function Specialties({ data }) {
     return (
-        <ul className='mt-[8px] w-full p-[22px] gap-x-[64px] gap-y-[40px] rounded-[8px] bg-[#FFF] grid grid-cols-4'>
+        <ul className='
+        mt-[8px] w-full p-[22px] rounded-[8px] bg-[#FFF] flex flex-wrap items-center justify-start lg:grid grid-cols-4
+        gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px] 
+        gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]'>
             {data.specialties.map((item, idx) => (
                 <li
                     key={idx}
-                    className='flex items-center justify-start gap-2'
+                    className='flex items-start justify-start gap-2'
                 >
-                    <TickCircleOrange />
+                    <div className='min-w-[24px] min-h-[24px]'>
+                        <TickCircleOrange />
+                    </div>
                     <p
                         className={`
                         text-[16px] font-normal

components/clinic/components/about/iamges/Images.js

@@ -0,0 +1,25 @@
+import List from './List';
+import Slider from './Slider';
+import Image from 'next/image';
+
+function Images({ data }) {
+    return (
+        <div
+            className='
+            flex flex-col md:flex-row items-center mb-[8px] justify-center w-full
+            gap-[12px] md:gap-[18px] lg:gap-[24px]
+        '>
+            <Image
+                className="rounded-[8px] overflow-hidden"
+                src={data.images_clinic[0]}
+                alt="img clinic"
+                height={432}
+                width={600}
+            />
+            <List data={data} />
+            <Slider data={data} />
+        </div>
+    )
+}
+
+export default Images

components/clinic/components/about/iamges/List.js

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+
+function List({ data }) {
+    return (
+        <div className="hidden md:grid grid-cols-2 gap-[16px] lg:gap-[24px]">
+            <Image
+                className="rounded-[8px] overflow-hidden"
+                src={data.images_clinic[1]}
+                alt="img clinic"
+                height={204}
+                width={288}
+            />
+            <Image
+                className="rounded-[8px] overflow-hidden"
+                src={data.images_clinic[2]}
+                alt="img clinic"
+                height={204}
+                width={288}
+            />
+            <Image
+                className="rounded-[8px] overflow-hidden"
+                src={data.images_clinic[3]}
+                alt="img clinic"
+                height={204}
+                width={288}
+            />
+            <Image
+                className="rounded-[8px] overflow-hidden"
+                src={data.images_clinic[4]}
+                alt="img clinic"
+                height={204}
+                width={288}
+            />
+        </div>
+    )
+}
+
+export default List

components/clinic/components/about/iamges/Slider.js

@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+function Slider({ data }) {
+    return (
+        <ul className="flex md:hidden gap-2 w-full justify-start items-center overflow-auto hidden-scroll">
+            {[...data.images_clinic, ...data.images_clinic].map((item, idx) =>
+                idx !== 0 ? (
+                    <Image
+                        src={item}
+                        width={90}
+                        height={90}
+                        alt="image clinic"
+                        className="min-w-[90px] min-h-[90px] object-cover rounded-[8px] overflow-hidden"
+                    />
+                ) : undefined)}
+        </ul>
+    )
+}
+
+export default Slider

components/clinic/components/about/index.js

@@ -1,18 +1,40 @@
-import Images from "./Images";
-import ContentDetail from "./ContentDetail";
+import { useState } from "react";
 import ListBime from "./ListBime";
-import Specialties from "./Specialties";
 import Services from "./Services";
+import Images from "./iamges/Images";
+import { Button } from "@mui/material";
+import Specialties from "./Specialties";
+import ContentDetail from "./ContentDetail";
 
 function About({ data }) {
+
+    const [isMore, setIsMore] = useState(false);
+
     return (
         <div className="opacity-page transition-all duration-500">
             <Images data={data} />
             <ContentDetail head='کلینیک تخصصی و فوق تخصصی نیکان'>
-                <p
-                    className="text-[#525252] text-[16px] font-normal leading-[32px]"
-                    dangerouslySetInnerHTML={{ __html: data.caption }}
-                ></p>
+                <div className="flex flex-col items-center justify-center">
+                    <p
+                        className={`
+                        text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
+                        md:max-h-fit after:absolute after:right-0 after:bottom-0 after:h-[80px]
+                        after:shadow-xl after:w-full transition-all duration-500
+                        ${isMore ?
+                                'after:bg-transparent max-h-screen' :
+                                'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[256px]'
+                            }
+                    `}
+                        dangerouslySetInnerHTML={{ __html: data.caption }}
+                    ></p>
+                    <Button
+                        className="!text-[#F17732] !text-[14px] !font-light !p-2"
+                        onClick={() => setIsMore(!isMore)}
+                        variant="text"
+                    >
+                        {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
+                    </Button>
+                </div>
             </ContentDetail>
             <ContentDetail head='بیمه های طرف قرارداد'>
                 <ListBime data={data} />

components/clinic/components/contact/ContentDetail.js

@@ -1,8 +1,8 @@
 function ContentDetail({ head, detail }) {
     return (
         <li className="flex flex-col items-start justify-center gap-4">
-            <p className="text-[#525252] text-[20px] font-bold">{head}</p>
-            <p>{detail}</p>
+            <p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{head}</p>
+            <p className="text-[14px] md:text-[16px] text-[#525252]">{detail}</p>
         </li>
     )
 }

components/clinic/components/contact/index.js

@@ -1,27 +1,63 @@
-import { Button } from "@mui/material"
-import Detail from "./Detail"
-import RoutingC from "@/components/icons/RoutingC"
+import { useState } from "react";
+
+import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
+import { Button } from "@mui/material";
+import ModalSearchCity from "./modal";
+import Detail from "./Detail";
+import RoutingC from "@/components/icons/RoutingC";
 
 function Contact({ data }) {
+
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     return (
-        <div className="opacity-page py-[32px] px-[64px] border border-[#EFEFEF] rounded-[16px]">
+        <div
+            className="
+                opacity-page border border-[#EFEFEF] rounded-[16px]
+                py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px] 
+                px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px]
+            "
+        >
             <div className="flex items-end justify-between">
                 <Detail data={data} />
-                <Button
-                    className="!gap-[8px] !py-[8px] !px-[12px]"
-                    variant="outlined"
+                <ModalSearchCity
+                    open={open}
+                    setOpen={setOpen}
+                    handleClose={handleClose}
                 >
-                    <RoutingC />
-                    مسیریابی
-                </Button>
+                    <Button
+                        className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
+                        onClick={handleOpen}
+                        variant="outlined"
+                    >
+                        <RoutingC />
+                        مسیریابی
+                    </Button>
+                </ModalSearchCity>
+            </div>
+            <div
+                className="w-full relative h-[460px] mt-[24px]"
+            >
+                <iframe
+                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
+                    className='w-full h-full rounded-lg'
+                    loading="lazy"
+                ></iframe>
+                <ModalSearchCity
+                    open={open}
+                    setOpen={setOpen}
+                    handleClose={handleClose}
+                >
+                    <Button
+                        className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
+                        onClick={handleOpen}
+                    >
+                        <RoutingWhiteC />
+                    </Button>
+                </ModalSearchCity>
             </div>
-            <iframe
-                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
-                className='w-full h-[460px] rounded-lg mt-[24px]'
-                referrerPolicy="no-referrer-when-downgrade"
-                allowFullScreen=""
-                loading="lazy"
-            ></iframe>
         </div>
     )
 }

components/clinic/components/contact/modal/Content.js

@@ -0,0 +1,40 @@
+import CloseModalD from '@/components/icons/CloseModalD'
+import Image from 'next/image'
+
+const maps = [
+    { src: '/assets/images/snapp.png', name: 'snapp' },
+    { src: '/assets/images/tapsi.png', name: 'tapsi' },
+    { src: '/assets/images/maps.png', name: 'maps' },
+    { src: '/assets/images/balad.png', name: 'balad' },
+    { src: '/assets/images/waze.png', name: 'waze' }
+]
+
+function Content({ handleClose }) {
+    return (
+        <>
+            <div className="flex items-center justify-between">
+                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">باز شدن با</p>
+                <div className="cursor-pointer" onClick={handleClose}>
+                    <CloseModalD />
+                </div>
+            </div>
+            <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
+            <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-[72px]">
+                {maps.map((item, idx) => (
+                    <li className="flex items-center flex-col justify-center gap-1">
+                        <Image
+                            className='w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]'
+                            src={item.src}
+                            alt="icon app"
+                            height={40}
+                            width={40}
+                        />
+                        <p className="text-[#3B3B3B] font-normal text-[14px]">{item.name}</p>
+                    </li>
+                ))}
+            </ul>
+        </>
+    )
+}
+
+export default Content

components/clinic/components/contact/modal/index.js

@@ -0,0 +1,51 @@
+'use client';
+
+import { Drawer, Modal } from "@mui/material";
+import { styleDefault } from "@/mui";
+import Content from "./Content";
+
+function ModalSearchCity({ open, setOpen, handleClose, children }) {
+
+    const toggleDrawer = (newOpen) => () => {
+        setOpen(newOpen);
+    };
+
+    return (
+        <>
+            {/* Button Modal */}
+            {children}
+            {/* Content Modal */}
+            <Modal
+                open={open}
+                onClose={handleClose}
+                className="!hidden md:!flex"
+            >
+                <div
+                    style={styleDefault}
+                    className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
+                >
+                    <Content onClose={handleClose} />
+                </div>
+            </Modal>
+            <Drawer
+                open={open}
+                anchor="bottom"
+                onClose={toggleDrawer(false)}
+                className="!flex md:!hidden"
+                sx={{
+                    '& .MuiPaper-root': {
+                        borderRadius: '25px 25px 0px 0px'
+                    }
+                }}
+            >
+                <div
+                    className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]"
+                >
+                    <Content onClose={handleClose} />
+                </div>
+            </Drawer>
+        </>
+    )
+}
+
+export default ModalSearchCity

components/clinic/index.js

@@ -9,7 +9,7 @@ import Doctors from './components/doctors';
 
 function ClinicPage({ data, doctors }) {
 
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(1);
   const handleChange = (event, newValue) => setValue(newValue);
 
   const Components = [

components/doctors/search/index.js

@@ -51,8 +51,8 @@ function SearchBar({ data, setData }) {
                 className={`!shadow-none !px-5 !h-full !w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
             />
             <Button
-                className="!flex !m-1 !rounded-[4px] !min-w-[40px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
-                !gap-2.5 !p-2.5 !h-[calc(100%_-_8px)]"
+                className="!flex !m-1 !rounded-[4px] !min-w-[36px] sm:!min-w-[42px] md:!min-w-[49px] lg:!min-w-[56px]
+                !gap-2.5 !p-2.5 md:!p-4 !h-[calc(100%_-_8px)]"
             >
                 <SearchD />
             </Button>

components/doctors/sortlist/index.js

@@ -6,7 +6,7 @@ import SelectSort from "./SelectSort";
 
 function SortList({ data, setData }) {
     return (
-        <div className="flex items-center lg:!w-[25%] gap-[20px] lg:gap-0">
+        <div className="flex flex-wrap items-center lg:!w-[25%] gap-[20px] gap-y-[12px] lg:gap-0">
             <FilterModal data={data} setData={setData}>
                 <FilterBtn />
             </FilterModal>

components/icons/RoutingWhiteC.js

@@ -0,0 +1,14 @@
+function RoutingWhiteC() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M12 19.5C16.1421 19.5 19.5 16.1421 19.5 12C19.5 7.85786 16.1421 4.5 12 4.5C7.85786 4.5 4.5 7.85786 4.5 12C4.5 16.1421 7.85786 19.5 12 19.5Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 4V2" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M4 12H2" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M12 20V22" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M20 12H22" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default RoutingWhiteC

package-lock.json

@@ -17,7 +17,8 @@
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
-        "styled-components": "^6.1.11"
+        "styled-components": "^6.1.11",
+        "swiper": "^11.1.9"
       },
       "devDependencies": {
         "postcss": "^8",
@@ -2434,6 +2435,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.9",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.9.tgz",
+      "integrity": "sha512-rflu8zvfGa3x1v/aeSufk4zRJffhOQowyvtJlp46sUBnOqAuk1Rdv5Ldj0AWWBV595iZ+ZMk7VB35ZRtRUomtA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",

package.json

@@ -18,7 +18,8 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "styled-components": "^6.1.11"
+    "styled-components": "^6.1.11",
+    "swiper": "^11.1.9"
   },
   "devDependencies": {
     "postcss": "^8",