fix bug modal search location in home && send request after click on continue for update list clinics && change style on hover text of specialties and service in clinics page && add loading for list of clinics && fix bug page doctor item && link footer to clinic-pro

components/clinic/components/about/Services.js

@@ -10,17 +10,15 @@ function Services({ data }) {
     gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
     >
       {data?.services?.map((item, idx) => (
-        <li key={idx} className="flex items-start justify-start gap-2">
+        <li
+          key={idx}
+          className="flex items-center justify-start gap-2 cursor-pointer hover-item-clinic"
+        >
           <div className="min-w-[24px] min-h-[24px]">
             <TickCircleOrange />
           </div>
           <TextLoading width={80} height={18}>
-            <h3
-              className={`
-            text-[16px] font-normal 
-            ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
-          `}
-            >
+            <h3 className="text-[16px] font-normal text-[#525252]">
               {item.name}
             </h3>
           </TextLoading>

components/clinic/components/about/Specialties.js

@@ -9,23 +9,23 @@ function Specialties({ data }) {
         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 && data.specialties && data?.specialties?.map((item, idx) => (
-        <li key={item.id} className="flex items-start justify-start gap-2">
-          <div className="min-w-[24px] min-h-[24px]">
-            <TickCircleOrange />
-          </div>
-          <TextLoading width={80} height={18}>
-            <h3
-              className={`
-                        text-[16px] font-normal
-                        ${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
-                    `}
-            >
-              {item.name}
-            </h3>
-          </TextLoading>
-        </li>
-      ))}
+      {data &&
+        data.specialties &&
+        data?.specialties?.map((item) => (
+          <li
+            key={item.id}
+            className="flex cursor-pointer items-center justify-start gap-2 hover-item-clinic"
+          >
+            <div className="min-w-[24px] min-h-[24px]">
+              <TickCircleOrange />
+            </div>
+            <TextLoading width={80} height={18}>
+              <h3 className="text-[16px] font-normal text-[#525252]">
+                {item.name}
+              </h3>
+            </TextLoading>
+          </li>
+        ))}
     </ul>
   );
 }

components/clinic/components/about/TextDetail.js

@@ -11,13 +11,13 @@ function TextDetail({ data }) {
         <p
           className={`
                 text-[#525252] text-[16px] font-normal leading-[32px] overflow-hidden relative
-                after:absolute after:right-0 after:bottom-0 after:h-[80px]
+                after:right-0 after:bottom-0 after:h-[80px]
                 after:shadow-xl after:w-full transition-all duration-500 w-full
                 ${
                   data?.caption?.length > 180 && isMore
-                    ? "after:bg-transparent max-h-screen"
+                    ? "after:bg-transparent max-h-screen after:absolute"
                     : data?.caption?.length > 180 &&
-                      "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]"
+                      "after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px] after:absolute"
                 }
             `}
           dangerouslySetInnerHTML={{ __html: data?.caption }}

components/clinic/components/about/index.js

@@ -6,7 +6,6 @@ import ContentDetail from "./ContentDetail";
 import TextDetail from "./TextDetail";
 
 function About({ data }) {
-  console.log(data);
   return (
     <div className="opacity-page transition-all duration-500">
       <Images data={data} />

components/clinics/head/FilterButton.js

@@ -1,32 +1,18 @@
-import SearchD from "@/components/icons/SearchD";
-import { QueryForClinicsFilter } from "@/helper";
-import { request } from "@/services/response";
-import { Button } from "@mui/material";
 import { useState } from "react";
+import { Button } from "@mui/material";
+import SearchD from "@/components/icons/SearchD";
 
-function FilterButton({ selected, setFilteredClinics }) {
+function FilterButton({ filterData }) {
   const [loading, setLoading] = useState(false);
 
-  const filterData = () => {
+  const sendReq = () => {
     setLoading(true);
-    const params = QueryForClinicsFilter(selected);
-
-    request
-      .getClinicList(params)
-      .then((res) => {
-        if (res.data) setFilteredClinics(res.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
+    filterData().finally(() => setLoading(false));
   };
 
   return (
     <Button
-      onClick={filterData}
+      onClick={sendReq}
       loading={loading}
       className="
         !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4 !grid !place-items-center

components/clinics/head/SearchBar.js

@@ -1,10 +1,14 @@
-import { ButtonGroup } from "@mui/material";
 import { useState } from "react";
-import ButtonFilter from "@/app/component/modalSearchCity/ButtonFilter";
-import ModalSearchCity from "@/components/home/search/modal";
+import { ButtonGroup } from "@mui/material";
 import AutoSearch from "./AutoSearch";
 import { useRouter } from "next/navigation";
 import FilterButton from "./FilterButton";
+import ButtonFilter from "./filter/ButtonFilter";
+import ModalSearchCity from "./filter";
+
+// Req
+import { QueryForClinicsFilter } from "@/helper";
+import { request } from "@/services/response";
 
 function SearchBar({
   state,
@@ -30,6 +34,21 @@ function SearchBar({
     router.push(`?${searchParams.toString()}`);
   };
 
+  const filterData = (newSelected) => {
+    const data = newSelected || selected;
+    const params = QueryForClinicsFilter(data);
+
+    return request
+      .getClinicList(params)
+      .then((res) => {
+        if (res.data) setFilteredClinics(res.data);
+        return res;
+      })
+      .catch((err) => {
+        throw err;
+      });
+  };
+
   return (
     <ButtonGroup
       variant="contained"
@@ -43,6 +62,7 @@ function SearchBar({
         state={state}
         setOpen={setOpen}
         selected={selected}
+        filterData={filterData}
         setSelected={setSelected}
       >
         <ButtonFilter setOpen={setOpen} selected={selected} />
@@ -53,10 +73,7 @@ function SearchBar({
         placeholder="جستجوی تخصص"
         handleSearch={handleSearch}
       />
-      <FilterButton
-        selected={selected}
-        setFilteredClinics={setFilteredClinics}
-      />
+      <FilterButton filterData={filterData} />
     </ButtonGroup>
   );
 }

components/clinics/head/filter/AutoComplete.js

@@ -0,0 +1,93 @@
+import BottomSelect from "@/components/icons/BottomSelect";
+import { Autocomplete, Button, TextField } from "@mui/material";
+import { styleTextSelectRight } from "@/mui";
+
+function AutoComplete({
+  list,
+  value,
+  isError,
+  updateData,
+  label,
+  disabled,
+  listboxProps,
+  name,
+}) {
+  return (
+    <Autocomplete
+      disablePortal
+      options={list}
+      disabled={disabled}
+      ListboxProps={listboxProps}
+      value={value || null}
+      getOptionLabel={(option) => option?.name || ""}
+      className="!w-full !rounded-lg auto-complete-selector"
+      onChange={(_, value) => updateData(name, value)}
+      sx={{
+        ...styleTextSelectRight,
+        // Hide Icon Number
+        "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
+          {
+            display: "none",
+          },
+        "& input[type=number]": {
+          MozAppearance: "textfield",
+        },
+        "& .MuiInputBase-input": { padding: "12.5px 14px !important" },
+        "& .MuiInputBase-root": {
+          borderRadius: 2,
+          padding: "0 !important",
+          height: {
+            xs: "43px !important",
+            sm: "43px !important",
+            md: "46px !important",
+            lg: "48px !important",
+          },
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: "1px solid #D7D7D7",
+        },
+        "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
+          {
+            borderColor: "#D7D7D7 !important",
+          },
+        "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
+          {
+            border: "1px solid #5559CE !important",
+          },
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: isError ? "1px solid red !important" : "",
+        },
+      }}
+      renderOption={(props, option) => (
+        <Button
+          fullWidth
+          {...props}
+          key={props.id}
+          className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
+        >
+          {option.name}
+        </Button>
+      )}
+      renderInput={(params) => (
+        <TextField
+          fullWidth
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <div className="absolute left-4">
+                <BottomSelect />
+              </div>
+            ),
+          }}
+          placeholder={label}
+          sx={{
+            borderRadius: "8px",
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default AutoComplete;

components/clinics/head/filter/ButtonFilter.js

@@ -0,0 +1,35 @@
+// Icons
+import ArrowBottomH from "@/components/icons/ArrowBottomH";
+import Location from "@/components/icons/Location";
+import { Button } from "@mui/material";
+
+function ButtonFilter({ selected, setOpen }) {
+  const handleOpen = () => setOpen(true);
+
+  return (
+    <div>
+      <Button
+        className="!border-none hover:!bg-transparent !shadow-none !py-[11.5px] !min-w-fit !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] !rounded-3"
+        onClick={handleOpen}
+        variant="contained"
+        color="secondary"
+      >
+        <div className="min-w-[20px] min-h-[20px] hidden md:flex">
+          <Location />
+        </div>
+        <p
+          className="text-[#616161] text-[11px] md:text-[14px] leading-[17px] sm:leading-[19px] 
+                    md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1"
+        >
+          {(selected.city?.name !== "نوبت 724" ? selected.city?.name : false) ||
+            "شهر"}
+        </p>
+        <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
+          <ArrowBottomH />
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default ButtonFilter;

components/clinics/head/filter/Content.js

@@ -0,0 +1,87 @@
+import { Button } from "@mui/material";
+
+// Icon
+import CloseModalD from "@/components/icons/CloseModalD";
+import ArrowLeftM from "@/components/icons/ArrowLeftM";
+import AutoComplete from "./AutoComplete";
+import { useState } from "react";
+
+function Content({
+  state,
+  states,
+  selected,
+  updateData,
+  filterData,
+  handleClose,
+  filteredCities,
+  handleSearch,
+}) {
+  const [loading, setLoading] = useState(false);
+  const listboxProps = {
+    style: {
+      maxHeight: 200,
+      overflow: "auto",
+    },
+  };
+
+  const handleFilter = () => {
+    handleSearch && handleSearch("");
+    setLoading(true);
+    filterData().finally(() => {
+      handleClose();
+      setLoading(false);
+    });
+  };
+
+  return (
+    <div>
+      <div className="flex justify-end w-full">
+        <div className="cursor-pointer" onClick={handleClose}>
+          <CloseModalD />
+        </div>
+      </div>
+      <div className="md:p-[24px] pt-0">
+        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
+          شهر یا استان مورد نظر را انتخاب نمایید:
+        </p>
+        <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
+          <AutoComplete
+            list={states}
+            label="استان"
+            name="province"
+            disabled={state}
+            updateData={updateData}
+            value={selected.province}
+            listboxProps={listboxProps}
+          />
+          <AutoComplete
+            updateData={updateData}
+            listboxProps={listboxProps}
+            value={selected.city}
+            list={filteredCities}
+            name="city"
+            label="شهر"
+            disabled={!selected.province}
+          />
+        </div>
+        <div className="w-full flex justify-end">
+          <Button
+            color="primary"
+            loading={loading}
+            variant="contained"
+            onClick={handleFilter}
+            disabled={!selected.city || !selected.province}
+            className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
+          >
+            تایید و ادامه
+            <div className={loading ? "opacity-0" : "opacity-100"}>
+              <ArrowLeftM />
+            </div>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Content;

components/clinics/head/filter/index.js

@@ -0,0 +1,85 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Modal, Box } from "@mui/material";
+import { styleDefault } from "@/mui";
+
+// Data
+import states from "@/data/state.json";
+import cities from "@/data/city.json";
+import Content from "./Content";
+import { useRouter } from "next/navigation";
+
+function ModalSearchCity({
+  open,
+  state,
+  setOpen,
+  children,
+  selected,
+  filterData,
+  setSelected,
+  handleSearch,
+}) {
+  const provinceSelected = selected?.province?.name;
+  const router = useRouter();
+  const [filteredCities, setFilteredCities] = useState([]);
+
+  const handleClose = () => setOpen(false);
+
+  useEffect(() => {
+    if (provinceSelected) {
+      const selectedState = states.find(
+        (state) => state.name === provinceSelected
+      );
+      if (selectedState) {
+        const stateId = selectedState.id;
+        const filteredCities = cities.filter(
+          (city) => city.province_id === stateId
+        );
+        setFilteredCities(filteredCities);
+      }
+    } else {
+      setFilteredCities([]);
+    }
+  }, [provinceSelected]);
+
+  const updateData = (name, event) => {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    if (name === "province") {
+      setSelected({ ...selected, province: event, city: "" });
+      searchParams.set("state", event?.name);
+      searchParams.delete("city", selected.city?.name);
+    } else {
+      setSelected({ ...selected, [name]: event });
+      searchParams.set("city", event?.name);
+      searchParams.set("state", selected.province?.name);
+    }
+    router.push(`?${searchParams.toString()}`);
+  };
+
+  return (
+    <>
+      {/* Button Modal */}
+      {children}
+
+      {/* Content Modal */}
+      <Modal open={open} onClose={handleClose}>
+        <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
+          <Content
+            state={state}
+            states={states}
+            selected={selected}
+            updateData={updateData}
+            filterData={filterData}
+            handleClose={handleClose}
+            handleSearch={handleSearch}
+            filteredCities={filteredCities}
+          />
+        </Box>
+      </Modal>
+    </>
+  );
+}
+
+export default ModalSearchCity;

components/clinics/list/ItemClinic.js

@@ -7,7 +7,17 @@ import { Button } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
 
-function ItemClinic({ data, loading }) {
+function ItemClinic({ setFilteredClinics, data, loading }) {
+  const handleLoading = () => {
+    setFilteredClinics((prevClinics) =>
+      prevClinics.map((item) =>
+        item.id === data.id
+          ? { ...item, loading: true }
+          : { ...item, loading: false }
+      )
+    );
+  };
+
   return (
     <li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
       <div className="flex items-center justify-start gap-2">
@@ -54,8 +64,14 @@ function ItemClinic({ data, loading }) {
 
       {/* Arrow */}
       <Link href={`/clinic/${data.uuid}`}>
-        <Button className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit">
-          <ArrowLeftD />
+        <Button
+          onClick={handleLoading}
+          loading={data?.loading}
+          className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit"
+        >
+          <div className={data && data.loading ? "opacity-0" : ""}>
+            <ArrowLeftD />
+          </div>
         </Button>
       </Link>
     </li>

components/clinics/list/index.js

@@ -40,7 +40,12 @@ function List({ limit, selected, clinics, pages, setFilteredClinics }) {
             gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
         >
           {clinics.map((item) => (
-            <ItemClinic loading={loading} data={item} key={item.id} />
+            <ItemClinic
+              data={item}
+              key={item.id}
+              loading={loading}
+              setFilteredClinics={setFilteredClinics}
+            />
           ))}
         </ul>
       ) : (

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -43,7 +43,7 @@ function AboutDcotor({ doctor }) {
         <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
           تخصص ها
         </p>
-        <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4">
+        <ul className="flex flex-col mt-[12px] sm:flex-row gap-y-[16px] items-start sm:items-center justify-start gap-4 flex-wrap">
           {doctor?.expertise?.map((item, idx) => (
             <li key={idx} className="flex items-center justify-start gap-1">
               <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>

components/doctor/detailDoctor/cards/comments/chart/index.js

@@ -53,11 +53,12 @@ function Chart({ comments, doctor }) {
       </div>
       <div className="flex flex-wrap items-center justify-center gap-[50px]">
         <ul className="flex w-full flex-col items-start justify-start gap-1.5 lg:w-fit">
-          {Object.values(doctor?.average_rate?.averages).map((item, idx) => (
-            <TextLoading width="full" key={idx} height={20}>
-              <ProgressDetail data={item} idx={idx} />
-            </TextLoading>
-          ))}
+          {doctor?.average_rate?.averages &&
+            Object.values(doctor?.average_rate?.averages).map((item, idx) => (
+              <TextLoading width="full" key={idx} height={20}>
+                <ProgressDetail data={item} idx={idx} />
+              </TextLoading>
+            ))}
         </ul>
         <ProgressAll doctor={doctor} />
       </div>

components/doctors/listDoctors/index.js

@@ -12,7 +12,6 @@ function ListDoctors({ doctors, setDoctors }) {
               <ItemDoctor
                 key={doctor.id}
                 doctor={doctor}
-                doctors={doctors}
                 setDoctors={setDoctors}
               />
             ))}

components/home/search/modal/Content.js

@@ -2,8 +2,8 @@ import { Button } from "@mui/material";
 
 // Icon
 import CloseModalD from "@/components/icons/CloseModalD";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
 import ArrowLeftM from "@/components/icons/ArrowLeftM";
-import AutoComplete from "./AutoComplete";
 
 function Content({
   state,
@@ -14,6 +14,7 @@ function Content({
   filteredCities,
   handleSearch,
 }) {
+  const citySelected = selected.city;
   const listboxProps = {
     style: {
       maxHeight: 200,
@@ -38,19 +39,24 @@ function Content({
           شهر یا استان مورد نظر را انتخاب نمایید:
         </p>
         <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
-          <AutoComplete
+          <AutoCompleteSelect
+            value={selected.province}
+            disabled={state}
+            listboxProps={listboxProps}
+            updateData={updateData}
             list={states}
             label="استان"
             name="province"
-            disabled={state}
-            updateData={updateData}
-            value={selected.province}
-            listboxProps={listboxProps}
           />
-          <AutoComplete
+          <AutoCompleteSelect
             updateData={updateData}
             listboxProps={listboxProps}
-            value={selected.city}
+            value={
+              selected &&
+              citySelected &&
+              filteredCities.find((item) => item.name === citySelected) &&
+              citySelected
+            }
             list={filteredCities}
             name="city"
             label="شهر"
@@ -74,4 +80,4 @@ function Content({
   );
 }
 
-export default Content;
+export default Content;

components/home/search/modal/index.js

@@ -3,12 +3,12 @@
 import { useState, useEffect } from "react";
 import { Modal, Box } from "@mui/material";
 import { styleDefault } from "@/mui";
+import { addLabelToList } from "@/helper";
 
 // Data
-import states from "@/data/state.json";
-import cities from "@/data/city.json";
+import statesData from "@/data/state.json";
+import citiesData from "@/data/city.json";
 import Content from "./Content";
-import { useRouter } from "next/navigation";
 
 function ModalSearchCity({
   open,
@@ -16,11 +16,13 @@ function ModalSearchCity({
   setOpen,
   children,
   selected,
-  setSelected,
   handleSearch,
+  setSelected,
 }) {
-  const provinceSelected = selected?.province?.name;
-  const router = useRouter();
+  const provinceSelected = selected.province;
+
+  const states = addLabelToList(statesData);
+  const cities = addLabelToList(citiesData);
   const [filteredCities, setFilteredCities] = useState([]);
 
   const handleClose = () => setOpen(false);
@@ -28,7 +30,7 @@ function ModalSearchCity({
   useEffect(() => {
     if (provinceSelected) {
       const selectedState = states.find(
-        (state) => state.name === provinceSelected
+        (state) => state.label === provinceSelected
       );
       if (selectedState) {
         const stateId = selectedState.id;
@@ -42,19 +44,12 @@ function ModalSearchCity({
     }
   }, [provinceSelected]);
 
-  const updateData = (name, event) => {
-    const searchParams = new URLSearchParams(window.location.search);
-
+  const updateData = (event, name) => {
     if (name === "province") {
       setSelected({ ...selected, province: event, city: "" });
-      searchParams.set("state", event?.name);
-      searchParams.set("city", selected.city?.name);
     } else {
       setSelected({ ...selected, [name]: event });
-      searchParams.set("city", event?.name);
-      searchParams.set("state", selected.province?.name);
     }
-    router.push(`?${searchParams.toString()}`);
   };
 
   return (

components/layout/footer/index.js

@@ -20,7 +20,11 @@ import { useState } from "react";
 const head = [
   { icon: <LocationF />, text: "جستجوی پزشک در شهر شما" },
   { icon: <CalendarAddF />, text: "نوبت گیری سریع و آسان" },
-  { icon: <StethoscopeF />, text: "دشبورد اختصاصی برای پزشکان" },
+  {
+    icon: <StethoscopeF />,
+    text: "دشبورد اختصاصی برای پزشکان",
+    link: "https://clinic-pro.ir/",
+  },
 ];
 
 function Footer({ matchedCity }) {
@@ -50,16 +54,21 @@ function Footer({ matchedCity }) {
     <div className="pb-[11px]">
       <div className="flex items-center justify-evenly gap-[12px]">
         {head.map((item, idx) => (
-          <div
+          <Link
             key={idx}
-            className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all 
-                        transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
+            href={item.link || ""}
+            onClick={(e) => !item.link && e.preventDefault}
           >
-            {item.icon}
-            <p className="text-[#2F2F2F] text-center text-[12px] sm:text-[14px] md:text-[16px] font-medium">
-              {item.text}
-            </p>
-          </div>
+            <div
+              className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all 
+            transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
+            >
+              {item.icon}
+              <p className="text-[#2F2F2F] text-center text-[12px] sm:text-[14px] md:text-[16px] font-medium">
+                {item.text}
+              </p>
+            </div>
+          </Link>
         ))}
       </div>
       <span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>