added category pills

apps/web/src/pages/customer/DiscoveryPage/DiscoveryPage.tsx

@@ -2,6 +2,7 @@ import { useAuthStore } from '@soly/shared';
 import { DiscoveryHeader } from './components/DiscoveryHeader/DiscoveryHeader';
 import * as styles from './styles';
 import { SearchBar } from './components/SearchBar/SearchBar';
+import { CategoryPills } from './components/CategoryPills/CategoryPills';
 export const DiscoveryPage = () => {
   const user = useAuthStore((state) => state.user);
   const token = useAuthStore((state) => state.token);
@@ -12,7 +13,7 @@ export const DiscoveryPage = () => {
     <div style={styles.pageContainer}>
       <DiscoveryHeader name={name} avatar={avatar} />
       <SearchBar />
-      {/* CategoryPills — next */}
+      <CategoryPills />
       {/* PromoBanner — next */}
       {/* SectionHeader + BusinessCards — next */}
     </div>

apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/CategoryPills.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { theme } from 'antd';
+import { SolyTypography } from '@soly/ui';
+import * as styles from './styles';
+
+const CATEGORIES = [
+  { key: 'all', label: 'הכל' },
+  { key: 'hair', label: '💈 ספרות' },
+  { key: 'nails', label: '💅 ציפורניים' },
+  { key: 'styling', label: '💇 עיצוב שיער' },
+  { key: 'skincare', label: '🧴 טיפוח עור' },
+  { key: 'massage', label: '🫧 עיסוי' },
+];
+
+export const CategoryPills = () => {
+  const { token } = theme.useToken();
+  const [active, setActive] = useState('all');
+
+  return (
+    <div style={styles.scrollContainerStyle}>
+      {CATEGORIES.map(({ key, label }) => (
+        <button
+          key={key}
+          type="button"
+          style={
+            active === key
+              ? styles.activePillStyle
+              : styles.getInactivePillStyle(token)
+          }
+          onClick={() => setActive(key)}
+        >
+          <SolyTypography
+            variant="captionInherit"
+            color={active === key ? 'white' : token.colorText}
+          >
+            {label}
+          </SolyTypography>
+        </button>
+      ))}
+    </div>
+  );
+};

apps/web/src/pages/customer/DiscoveryPage/components/CategoryPills/styles.ts

@@ -0,0 +1,32 @@
+import type { CSSProperties } from 'react';
+import type { GlobalToken } from 'antd';
+import { colors } from '@soly/shared';
+
+export const scrollContainerStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '0.5rem',
+  overflowX: 'auto',
+  padding: '0 1rem',
+  scrollbarWidth: 'none',
+};
+
+export const activePillStyle: CSSProperties = {
+  background: colors.gradientPrimary,
+  border: '1px solid transparent',
+  borderRadius: 20,
+  padding: '0.35rem 0.85rem',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+};
+
+export const getInactivePillStyle = (token: GlobalToken): CSSProperties => ({
+  backgroundColor: token.colorBgContainer,
+  border: `1px solid ${token.colorBorder}`,
+  borderRadius: 20,
+  padding: '0.35rem 0.85rem',
+  cursor: 'pointer',
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+});