feat: make categories chips jumb to respective section

src/pages/ExplorePage/Categories/Categories.tsx

@@ -8,9 +8,7 @@ export default function Categories() {
 
     const { data, loading } = useQuery<ALL_CATEGORIES_QUERY_RES>(ALL_CATEGORIES_QUERY);
 
-    const handleClick = (categoryId: string) => {
 
-    }
 
     if (loading || !data)
         return <div className="flex gap-12">
@@ -20,12 +18,10 @@ export default function Categories() {
         </div>
 
     return (
-        // <div className="flex gap-12 flex-wrap">
         <Slider>
             {data?.allCategories.map(category =>
-                <Badge key={category.id} onClick={() => handleClick(category.id)}>{category.title}</Badge>
+                <Badge key={category.id} onClick={() => document.getElementById(category.title.toLowerCase())?.scrollIntoView({ behavior: 'smooth', block: 'center' })} >{category.title}</Badge>
             )}
         </Slider>
-        // </div>
     )
 }

src/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx

@@ -56,7 +56,7 @@ export default function ProjectsRow({ title, categoryId, projects }: Props) {
 
 
     return (
-        <div className='mb-48'>
+        <div id={title.toString().toLowerCase()} className='mb-48'>
             <h3 className="font-bolder text-body3 mb-24 px-32">{title}
                 <span>
                     <MdDoubleArrow className='text-gray-200 ml-8 hover:cursor-pointer align-bottom transform scale-y-110 scale-x-125 origin-left' onClick={() => {