Refactor UserTypeFilter component to use Chips for selection and update user type filtering logic

src/pages/home/index.tsx

@@ -2,9 +2,17 @@ import { Box, useTheme } from '@mui/material';
 import Hero from 'components/Hero';
 import Categories from './Categories';
 import { Helmet } from 'react-helmet';
+import UserTypeFilter, { useUserTypeFilter } from 'components/UserTypeFilter';
+import { UserType } from '@tools/defineTool';
 
 export default function Home() {
   const theme = useTheme();
+  const { selectedUserTypes, setSelectedUserTypes } = useUserTypeFilter();
+
+  const handleUserTypesChange = (userTypes: UserType[]) => {
+    setSelectedUserTypes(userTypes);
+  };
+
   return (
     <Box
       padding={{
@@ -28,6 +36,11 @@ export default function Home() {
     >
       <Helmet title={'OmniTools'} />
       <Hero />
+      <UserTypeFilter
+        selectedUserTypes={selectedUserTypes}
+        onUserTypesChange={handleUserTypesChange}
+        label="Filter by User Type"
+      />
       <Categories />
     </Box>
   );