closes #169

🎯 Overview

This PR implements the ExploreHeader component for the projects page, providing users with filtering and search functionality to explore Boundless projects.

📋 Changes Made

New Components

• components/projects/ExploreHeader.tsx - Main header component with filters and search
• app/(landing)/projects/layout.tsx - Layout wrapper for metadata handling

Modified Files

• app/(landing)/projects/page.tsx - Integrated ExploreHeader component

✨ Features

Core Functionality

• Project Search - Search by project name or creator
• Sort Options - Multiple sorting criteria (newest, oldest, most funded, etc.)
• Status Filter - Filter by project status (active, completed, draft, etc.)
• Category Filter - Filter by project categories (technology, DeFi, NFT, etc.)

Design & UX

• Responsive Design - Fully responsive across desktop, tablet, and mobile
• Dark Theme - Black background with white text matching design system
• Interactive Elements - Hover states and proper focus management
• Custom Icons - Uses project's sort.svg icon from public assets

Technical Implementation

• TypeScript - Fully typed with proper interfaces
• Performance - Optimized with proper event handling
• Accessibility - Proper ARIA labels and keyboard navigation
• Reusability - Standalone component with callback props

🎨 Design Compliance

• ✅ Matches Figma design exactly
• ✅ Uses correct sort.svg icon from /public/sort.svg
• ✅ Implements proper color scheme (black background, white text)
• ✅ Responsive behavior across all screen sizes
• ✅ Consistent spacing and typography

🛠 Technical Details

Component Architecture

interface ExploreHeaderProps {
  onSearch?: (searchTerm: string) => void;
  onSortChange?: (sortType: string) => void;
  onStatusChange?: (status: string) => void;
  onCategoryChange?: (category: string) => void;
  className?: string;
}

Key Dependencies

• Radix UI - Dropdown menus and UI primitives
• Lucide React - Search and chevron icons
• Next.js Image - Optimized sort icon rendering
• Tailwind CSS - Styling and responsive design

Filter Options

• Sort: Newest First, Oldest First, Most Funded, Least Funded, Ending Soon, Recently Started
• Status: All Status, Active, Completed, Draft, Under Review, Validated, Approved
• Category: All Categories, Technology, Art & Creative, Environment, Education, Healthcare, Community, DeFi, NFT, Web3

📱 Responsive Behavior

• Desktop: Horizontal layout with filters on left, search on right
• Tablet: Stacked layout with proper spacing
• Mobile: Fully responsive with wrapped filter buttons

🔧 Integration

The component integrates seamlessly with the existing projects page structure:

<ExploreHeader
  onSearch={handleSearch}
  onSortChange={handleSort}
  onStatusChange={handleStatus}
  onCategoryChange={handleCategory}
/>

🧪 Testing

• ✅ Component renders correctly
• ✅ All filter dropdowns function properly
• ✅ Search input responds to user input
• ✅ Responsive design works across breakpoints
• ✅ Callbacks fire correctly with proper values

📦 Files Changed

components/projects/ExploreHeader.tsx        # New component
app/(landing)/projects/layout.tsx           # New layout
app/(landing)/projects/page.tsx              # Modified

🚀 Deployment Notes

• No breaking changes
• Component is self-contained and ready for production
• All dependencies are already present in the project
• No database migrations required