list specialties & finish page pecialties

app/component/Pagination.js

@@ -0,0 +1,23 @@
+import { Pagination as PaginationMUI } from '@mui/material'
+
+function Pagination() {
+    return (
+        <PaginationMUI
+            // 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'
+                }
+            }}
+        />
+    )
+}
+
+export default Pagination

app/globals.css

@@ -185,6 +185,14 @@ body {
     animation-duration: 2s;
 }
 
+.hover-mode-item-speciality:hover p:first-child {
+    color: #FAFAFA;
+}
+
+.hover-mode-item-speciality:hover p:last-child {
+    color: #EFEFEF;
+}
+
 @keyframes openx {
     0% {
         width: 0;

components/doctors/listDoctors/index.js

@@ -1,6 +1,6 @@
 import doctors from '@/data/doctors.json'
 import ItemDoctor from './ItemDoctor';
-import { Pagination } from '@mui/material';
+import Pagination from '@/app/component/Pagination';
 
 function ListDoctors() {
     return (
@@ -14,21 +14,7 @@ function ListDoctors() {
                 ))}
             </ul>
             <div className='mt-[56px] flex justify-center'>
-                <Pagination
+                <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/icons/MenuS.js

@@ -0,0 +1,14 @@
+function MenuS() {
+    return (
+        <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="44" height="44" rx="22" fill="#FFD8C5" fill-opacity="0.5" />
+            <path d="M27 20H29C31 20 32 19 32 17V15C32 13 31 12 29 12H27C25 12 24 13 24 15V17C24 19 25 20 27 20Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M15 32H17C19 32 20 31 20 29V27C20 25 19 24 17 24H15C13 24 12 25 12 27V29C12 31 13 32 15 32Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M16 20C18.2091 20 20 18.2091 20 16C20 13.7909 18.2091 12 16 12C13.7909 12 12 13.7909 12 16C12 18.2091 13.7909 20 16 20Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M28 32C30.2091 32 32 30.2091 32 28C32 25.7909 30.2091 24 28 24C25.7909 24 24 25.7909 24 28C24 30.2091 25.7909 32 28 32Z" stroke="#F17732" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+
+    )
+}
+
+export default MenuS

components/specialties/head/index.js

@@ -2,11 +2,13 @@ import SearchBar from "./SearchBar"
 
 function Head() {
     return (
-        <div className="pt-[195px] padding-responsive bg-[#F6F7F9] pb-[85px] flex flex-col items-center gap-[25px]">
+        <div className="bg-[#F6F7F9]">
+            <div className="padding-responsive pt-[195px] pb-[85px] flex flex-col items-center gap-[25px]">
                 <p className="text-[#3B3B3B] text-[24px] text-center font-bold">تخصص مورد نظر شما چیست؟</p>
                 <p className="text-[#3B3B3B] text-[16px] text-center font-normal">تخصص مورد نظرتان را جستجو کرده و یا از لیست زیر انتخاب نمایید:</p>
                 <SearchBar />
             </div>
+        </div>
     )
 }
 

components/specialties/list/ItemSpecialties.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+function ItemSpecialties({ data }) {
+  return (
+    <li
+      className='py-[17.5px] px-[12px] flex flex-col justify-center items-center gap-[16px] 
+      rounded-lg bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+      hover:bg-[#5559CE] transition-all duration-500 cursor-pointer hover-mode-item-speciality'
+    >
+      <p className='text-[#3B3B3B] text-[16px] font-bold'>{data.name}</p>
+      <p className='text-[#7E7E7E] text-[14px] font-medium'>{data.number_of_doctors} پزشک</p>
+    </li>
+  )
+}
+
+export default ItemSpecialties

components/specialties/list/index.js

@@ -1,8 +1,27 @@
+import specialties from '@/data/specialties.json';
+import ItemSpecialties from './ItemSpecialties';
+import MenuS from '@/components/icons/MenuS';
+import Pagination from '@/app/component/Pagination';
+
 function List() {
     return (
-        <ul className="grid grid-cols-6 gap-x-[24px gap-y-[40px] bg-[#FAFAFA]">
+        <div className='bg-[#FAFAFA]'>
-
+            <div className='flex items-center justify-center gap-[12px] pt-[24px] mb-[40px]'>
+                <MenuS />
+                <p className='text-[#3B3B3B] text-[24px] font-bold'>لیست تخصص ها</p>
+            </div>
+            <ul className="padding-responsive grid grid-cols-6 gap-x-[24px] gap-y-[40px]">
+                {specialties.map(speciality => (
+                    <ItemSpecialties
+                        data={speciality}
+                        key={speciality.id}
+                    />
+                ))}
             </ul>
+            <div className='mt-[48px] flex justify-center'>
+                <Pagination />
+            </div>
+        </div>
     )
 }