change design footer & home & fields

app/theme/theme.js

@@ -24,7 +24,6 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           "& .MuiBox-root": {
-            // maxHeight: { lg: "calc(100vh - 48px)" },
             overflow: "auto",
           },
         },

components/layout/footer/index.js

@@ -91,7 +91,7 @@ function Footer() {
         </div>
 
         {/* Left */}
-        <div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
+        <div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[32px]">
           <p className="text-[#3B3B3B] after:!duration-500 w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
             همراه با ما باشید:
           </p>

components/layout/footer/menu/HeadMenu.js

@@ -7,7 +7,7 @@ function HeadMenu({ title, name, isOpen, changeMenu }) {
       className="!flex lg:!hidden !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
       onClick={() => changeMenu(name)}
     >
-      <p className="text-[#262866] text-[14px] font-medium">{title}</p>
+      <p className="text-[#262866] text-[14px] font-medium">{title.name}</p>
       <div
         className={`
                 transition-all duration-500

components/layout/footer/menu/ListMenu.js

@@ -1,6 +1,9 @@
+import Link from "next/link";
 import React from "react";
 
 function ListMenu({ list, isOpen }) {
+  console.log(list);
+
   return (
     <ul
       className={`
@@ -21,7 +24,7 @@ function ListMenu({ list, isOpen }) {
             text-[16px] w-fit
             `}
         >
-          {item}
+          {item.link ? <Link href={item.link}>{item.name}</Link> : item.name}
         </li>
       ))}
     </ul>

components/panel/userAccount/bank/head/modal/Form.js

@@ -1,6 +1,7 @@
-import ContentText from "@/app/component/ContentText";
 import EditField from "@/app/component/EditField";
+import ContentText from "@/app/component/ContentText";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import { validate_phone_number } from "./validate";
 
 const list = [
   { label: "بانک 1", id: 10 },
@@ -9,29 +10,37 @@ const list = [
   { label: "بانک 4", id: 40 },
 ];
 
-function Form({ data, changeData }) {
+function Form({ data, changeData, updateNum }) {
   return (
     <div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
       <ContentText text="شماره کارت">
         <EditField
           isTransparent={true}
-          placeholder="شماره کارت خود را بنویسید..."
           iconGray={true}
-          changeData={changeData}
+          changeData={updateNum}
           data={data.card}
           noDisable={true}
+          type="number"
+          placeholder="شماره کارت خود را بنویسید..."
           name="card"
+          props={{
+            inputProps: validate_phone_number,
+          }}
         />
       </ContentText>
       <ContentText text="شماره شبا">
         <EditField
           isTransparent={true}
-          placeholder="شماره شبا خود را بنویسید..."
           iconGray={true}
-          changeData={changeData}
+          changeData={updateNum}
           data={data.shaba}
           noDisable={true}
-          name="card"
+          type="number"
+          placeholder="شماره شبا خود را بنویسید..."
+          name="shaba"
+          props={{
+            inputProps: validate_phone_number,
+          }}
         />
       </ContentText>
       <ContentText text="بانک">

components/panel/userAccount/bank/head/modal/index.js

@@ -1,22 +1,35 @@
 import { useState } from "react";
-import { Box, Button, Modal } from "@mui/material";
-import { styleDefault } from "@/mui";
-import CloseModalD from "@/components/icons/CloseModalD";
 import Form from "./Form";
+import { styleDefault } from "@/mui";
+import { Box, Button, Modal } from "@mui/material";
+import { validate_phone_number } from "./validate";
+
+// Icons
 import PlusB from "@/components/icons/PlusB";
+import CloseModalD from "@/components/icons/CloseModalD";
 
 function ModalAddCard() {
   const [open, setOpen] = useState(false);
   const [data, setData] = useState({
-    card: "",
-    shaba: "",
-    bank: "",
+    card: { value: "", is_edit: true },
+    shaba: { value: "", is_edit: true },
+    bank: { value: "", is_edit: true },
   });
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
 
-  const changeData = (value, name) => setData({ ...data, [name]: value });
+  const changeData = (value, name) =>
+    setData({ ...data, [name]: { ...data[name], value } });
+
+  const updateNum = (value, type, name) => {
+    const parseValue = +value;
+    const { max } = validate_phone_number;
+
+    const validateValue = parseValue > max ? data[name].value : value;
+
+    changeData(validateValue, name);
+  };
 
   return (
     <>
@@ -43,7 +56,7 @@ function ModalAddCard() {
               <CloseModalD />
             </Button>
           </div>
-          <Form data={data} changeData={changeData} />
+          <Form data={data} changeData={changeData} updateNum={updateNum} />
           <div className="flex items-center justify-center gap-[12px] md:gap-[14px] lg:gap-[16px] mt-[32px] md:mt-[36px] lg:mt-[40px]">
             <Button
               variant="outlined"

components/panel/userAccount/bank/head/modal/validate.js

@@ -0,0 +1,6 @@
+const validate_phone_number = {
+  min: 1,
+  max: 9999999999,
+};
+
+export { validate_phone_number };

constans/index.js

@@ -15,11 +15,16 @@ export const frequentSearches = [
   "مغز و اعصاب",
 ];
 
-export const footerR = ["خدمات", "ثبت نام", "تخصص ها", "بلاگ"];
+export const footerR = [
+  { name: "خدمات", link: "" },
+  { name: "ثبت نام", link: "/login" },
+  { name: "تخصص ها", link: "/specialties" },
+  { name: "بلاگ", link: "/blogs" },
+];
 
 export const footerL = [
-  "دسترسی سریع",
-  "درباره ما",
-  "تماس با ما",
-  "سوالات متداول",
+  { name: "دسترسی سریع", link: "" },
+  { name: "درباره ما", link: "/about-us" },
+  { name: "تماس با ما", link: "/contact-us" },
+  { name: "سوالات متداول", link: "/contact-us" },
 ];