change footer & add pagination to doctors page & add page specialties

app/specialties/page.js

@@ -0,0 +1,12 @@
+import DoctorsPage from '@/components/doctors';
+import Layout from '@/components/layout';
+
+function Doctors() {
+    return (
+        <Layout title='تخصص ها' name='specialties'>
+            <DoctorsPage />
+        </Layout>
+    )
+}
+
+export default Doctors

components/doctors/listDoctors/index.js

@@ -1,5 +1,6 @@
 import doctors from '@/data/doctors.json'
 import ItemDoctor from './ItemDoctor';
+import { Pagination } from '@mui/material';
 
 function ListDoctors() {
     return (
@@ -12,6 +13,23 @@ function ListDoctors() {
                     />
                 ))}
             </ul>
+            <div className='mt-[56px] flex justify-center'>
+                <Pagination
+                    // count={doctors.length / 12} org
+                    count={20} // test
+                    color='primary'
+                    sx={{
+                        '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root': {
+                            color: '#616161',
+                            fontSize: '16px',
+                            fontWeight: '500'
+                        },
+                        '& .mui-8q7g72-MuiButtonBase-root-MuiPaginationItem-root.Mui-selected': {
+                            color: '#F8F8FF'
+                        }
+                    }}
+                />
+            </div>
         </div>
     )
 }

components/layout/Header.js

@@ -3,7 +3,10 @@ import { listNav } from "@/constans";
 import { Button } from "@mui/material";
 import Link from "next/link";
 
-function Header() {
+function Header({ name }) {
+
+    console.log(name);
+
     return (
         <div
             className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
@@ -18,9 +21,9 @@ function Header() {
                             <Link
                                 href={nav.link}
                                 className={`
-                                ${nav.id === 1 ? 'text-[#526CAC]' : 'text-[#525252]'}
-                                text-[16px] font-medium
-                            `}
+                                ${nav.link.replace('/', '') === name ? '!text-[#526CAC]' : 'text-[#525252]'}
+                                    text-[16px] font-medium
+                                `}
                             >
                                 {nav.name}
                             </Link>

components/layout/index.js

@@ -1,18 +1,18 @@
 import Footer from './Footer';
 import Header from './Header';
 
-function Layout({ children, title }) {
+function Layout({ children, title, name }) {
     return (
         <div>
             <main className="w-full min-h-screen">
                 <header className="w-full fixed top-10 right-1/2 translate-x-1/2 padding-responsive z-[10]">
-                    <Header />
+                    <Header name={name} />
                 </header>
                 <section>
                     {children}
                 </section>
             </main>
-            <footer className="bg-[#F5F5F5] mt-[206px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
+            <footer className="bg-[#F5F5F5] mt-[100px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
                 <div className='padding-responsive'>
                     <Footer />
                 </div>

components/specialties/index.js

@@ -0,0 +1,7 @@
+function SpecialtiesPage() {
+    return (
+        <div>SpecialtiesPage</div>
+    )
+}
+
+export default SpecialtiesPage