Build Service Listing Page with Filters

## 📚 Overview
Build a paginated service catalog page to display freelance offerings. The page must include filters for skills and categories, a search bar, and sorting features. Users should be able to easily browse services and find what they need quickly and efficiently.

If you need help getting started, check the project’s [[README file](https://github.com/byteworkscr/dApp-TrustBridge/blob/develop/README.md)](https://github.com/byteworkscr/dApp-TrustBridge/blob/develop/README.md).

---

## 🔍 Background
A service catalog is a critical component of the SkillChain marketplace. This feature will significantly enhance user experience by providing structured ways to discover and interact with freelancer offerings.

---

## 🛠 Requirements
- Create the catalog under `src/components/modules/catalog`.
- Fetch services data from API using `SWR`.
- Implement filters:
- By skill
- By category (use tags)
- Add search bar for keyword-based filtering.
- Add sort dropdown (price, rating, recency).
- Paginate results with page navigation.
- Store filter/sort/search state in the URL.
- Responsive design with mobile-first approach.

---

## 🔧 Implementation Plan

### 1. Create Feature Branch
```bash
git checkout -b feature-service-catalog-[issue-number]
```

### 2. Data Integration
Use `SWR` to fetch services with support for filters, search, sort, and pagination:
```ts
GET /services?category=&skill=&sort=&search=&page=
```

### 3. UI Components and Flow
- Create layout in `CatalogPage.tsx`
- Build reusable filters in `components/ui/FilterSidebar.tsx`
- Use `Combobox` for skills and tags
- Create sort component `SortSelect.tsx`
- Display services using a responsive grid in `ServiceCard.tsx`
- Maintain query state in URL using `useRouter` from Next.js

### 4. Feedback and States
- Show loading skeletons while data is being fetched
- Show "no results" state
- Display error message on API failure

### 5. Styling
- Use Tailwind CSS and SHADCN/UI
- Follow project Figma file (link to be added)
- Ensure mobile responsiveness and clean layout

### 6. Testing
- Unit tests for each component
- Test pagination, filters, and search interactions
- Verify URL state matches UI and reloads correctly

### 7. Commit and Push
```bash
git add .
git commit -m "Feature: Service Catalog UI with Filters"
git push origin feature-service-catalog-[issue-number]
```

---

## ✅ Definition of Done
- [ ] Paginated catalog page under `src/components/modules/catalog`.
- [ ] Filters, search, and sort work correctly and reflect in URL.
- [ ] Responsive design is implemented.
- [ ] UI handles all async states (loading, error, empty).
- [ ] Developer attaches screenshot of UI.
- [ ] Pull request passes template standards.

---

## ⚙️ Technical Considerations
- Use a `useFilters` custom hook to manage state and sync with URL.
- Optimize performance by memoizing derived data and UI sections.
- Consider lazy loading service cards for smoother performance.

**Insert Mockup Here:**


### Timeframe
3 days