Quiz Product - Copy this React, Tailwind Component to your project
Design a modern, clean dashboard UI for a quiz platform application with the following requirements: **Layout Structure:** - Header with user profile section (large avatar, welcome message, subtitle) - Activity overview with 3 metric cards in a responsive grid - Engagement metrics with 3 cards showing reports, discussions, notifications - Main content area with 2-column masonry grid layout - Footer with refresh action button **All Content Sections to Design:** **1. Header Section:** - User avatar (large, circular) - Welcome message with user's name - Subtitle: "Here's an overview of your quiz activities" **2. Activity Overview (3 stat cards):** - Quizzes Taken (Trophy icon, shows total count) - Quizzes Created (BookOpen icon, shows total count) - Reviews Given (Star icon, shows total count) **3. Engagement Overview (3 metric cards):** - Reports (AlertCircle icon, shows count) - Discussions (MessageSquare icon, shows count) - Notifications (Bell icon, shows count) **4. Main Dashboard Grid (2-column layout with 6 cards total):** **Left Column:** - **Purchased Quizzes** (ShoppingBag icon, list of quizzes user bought) - **Recent Quizzes Created** (Calendar icon, recently created quizzes by user) **Right Column:** - **Recently Taken Quizzes** (BookOpen icon, list of recently completed quizzes) - **Recent Reviews Given** (Star icon, list of recent reviews user submitted) - **Active Subscriptions** (CreditCard icon, hosting subscriptions with pricing/status) **5. Footer:** - Refresh Data button (Activity icon, gradient styling) **Card Content Types:** - **List Cards:** Show items with titles, dates, badges, and "View All" buttons - **Stat Cards:** Large numbers with icons and labels - **Metric Cards:** Numbers with circular icon backgrounds - **Action Cards:** Interactive elements with hover states **Design Style:** - Modern glass-morphism effect with backdrop blur - Gradient color scheme: indigo → purple → pink - Card-based layout with subtle shadows and hover effects - Clean typography with gradient text for headers - Responsive design (mobile-first approach) - Subtle animations on hover (scale, glow effects) - Professional but engaging appearance **Color Palette:** - Primary: Indigo (#6366f1) to Purple (#a855f7) to Pink (#ec4899) - Background: Light/dark theme compatible - Text: High contrast for readability - Icons: Colored to match gradients **Interactive Elements:** - Hover effects with glowing shadows - Gradient buttons with smooth transitions - Cards that lift slightly on hover - Smooth color transitions - "View All" buttons on list cards - Badge styling for status indicators **Icons Needed:** Trophy, BookOpen, Star, AlertCircle, MessageSquare, Bell, ShoppingBag, Calendar, CreditCard, Activity, ChevronRight, ArrowRight Create a comprehensive dashboard that displays all user activity data in an organized, visually appealing way with excellent usability and clear visual hierarchy. Each section should be easily scannable and actionable.
