Now I'll create a filter bar component and update the tools page to use it with filtering functionality:

Now I'll update the tools page to integrate the filter bar with filtering logic:

I've created a category filter bar component with search functionality and integrated it into the tools directory. The filter bar features a search input with clear button, category filter buttons that highlight when active with primary styling, and an "All Tools" button to reset filters. The tools page now filters results dynamically based on both category and search query, displays a count of matching tools, and shows an empty state message when no results are found.

Now I'll create a modal component for displaying detailed tool information. I'll extend the tool data structure to include tags and pricing, then create the modal:

Now I'll update the tool card component to include pricing and tags data, and make it open the modal on click:

Now I'll update the tools page to integrate the modal and add sample data with tags and pricing:

I've created a fully functional modal component for viewing AI tool details. The modal displays a large logo, full description, capability tags, pricing model with color-coded badges, and a prominent "Visit Website" button. The tool cards are now clickable and open the modal when selected, allowing users to explore detailed information about each AI tool including pricing models (Free, Freemium, Paid, Enterprise) and relevant capabilities. All modal interactions are keyboard-accessible with proper ARIA labels.