list specialties & finish page pecialties

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>
     )
 }