Create Quiz Categories Page with Custom Category Cards

Title: Design Interactive Category Selection Page with Preview and Filtering

Problem Statement

Users currently have limited visibility into available quiz categories and cannot easily browse or discover new topics. A dedicated categories page would improve navigation, discoverability, and user engagement with different quiz topics.

Proposed Solution

Build a comprehensive categories page featuring:

• Grid layout of category cards with images/icons
• Category descriptions and metadata (question count, difficulty)
• Filter and search capabilities
• Hover effects with preview information
• Popular/trending categories section
• Recently attempted categories

Acceptance Criteria

✅ Category Card Design

• Card with category icon/image, title, description
• Display number of available questions
• Show difficulty levels available in category
• Hover effect revealing more details
• Click action to start quiz in that category
• Responsive grid layout (1/2/3/4 columns)

✅ Category Metadata

• Category name and short description
• Icon or representative image
• Question count indicator
• Difficulty distribution (Easy/Medium/Hard percentages)
• Average completion time
• User's best score in that category (if attempted)

✅ Search and Filter

• Search bar to find categories by name
• Filter by difficulty availability
• Sort options (A-Z, Most Popular, Recently Added)
• "Clear filters" button
• Show filtered result count

✅ Featured Sections

• "Popular Categories" section at top
• "New Categories" for recently added
• "Your Recent" showing last attempted categories
• "Recommended" based on past performance
• Carousel or grid for each section

✅ Category Preview

• Hover over card shows sample questions
• Quick start button on hover
• Show category statistics
• "Learn More" link to detailed category page

✅ Loading States

• Skeleton loaders for cards
• Smooth transition when data loads
• Error handling for failed category fetch
• Empty state if no categories match filters