list specialties & finish page pecialties

components/specialties/head/index.js

@@ -2,10 +2,12 @@ import SearchBar from "./SearchBar"
 
 function Head() {
     return (
-        <div className="pt-[195px] padding-responsive bg-[#F6F7F9] 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 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]">
-
-        </ul>
+        <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>
     )
 }