Implement the following component views: ### **Course Catalog (`/courses`)** **Purpose**: Discoverable course library with advanced filtering and preview **Components Required**: - `CourseGrid` - `SearchBar` - `FilterSidebar` - `CourseCard` - `CoursePreview` - `CategoryTags` - `DifficultyIndicator` - `InstructorProfiles` **Inputs**: - Search query (string) - Filter criteria (category, difficulty, duration, price) - Sort preferences (popularity, rating, newest) - Pagination parameters **Outputs**: - Filtered course results - Course preview content - Enrollment options - Wishlist updates **Requirements**: - Infinite scroll or pagination - Advanced search with autocomplete - Filter by subscription tier - Course preview videos - Social proof (ratings, enrollments) - Accessibility-compliant navigation ## 🏗️ Architecture Overview ### Core Technology Stack - **Frontend**: Svelte 5 SPA with TypeScript - **UI Components**: `shadcn-svelte` (llms.txt is at https://context7.com/huntabyte/shadcn-svelte/llms.txt) - **State Management**: Svelte 5 runes for reactive state - **Routing**: The router `@mateothegreat/svelte5-router` (llms.txt is at https://raw.githubusercontent.com/mateothegreat/svelte5-router/refs/heads/main/llms.txt) - **Styling**: Tailwind CSS v4 with custom design system - **Backend**: External REST/GraphQL API designed for a CMS and more. - **Authentication**: JWT with refresh tokens - **Payment**: Stripe integration - **Media**: CDN for video/audio content - **Real-time**: WebSockets for live features ### Design Principles - **Mobile-first responsive design** - **Progressive Web App (PWA) capabilities** - **Accessibility (WCAG 2.1 AA compliance)** - **Performance optimization (lazy loading, code splitting)** - **Offline-first capabilities where possible** --- ## 🎨 User Experience & Design System ### Design Philosophy - **Micro-interactions**: Subtle animations and feedback - **Gamification**: Progress bars, achievements, streaks - **Personalization**: Adaptive UI based on learning style - **Minimalist**: Clean, distraction-free interface - **Contextual**: Smart content suggestions and hints ### Color Psychology - **Primary**: Confidence-inspiring blues and teals - **Secondary**: Motivating oranges and greens - **Accent**: Achievement golds and warning reds - **Neutral**: Sophisticated grays with high contrast