lemon-dashboard

byjaahar gupta

Create a pixel-perfect SaaS dashboard web app called "Zypit Creator Dashboard". Overall Design: - Style: Clean fintech + creator economy UI - Theme: Default dark mode - Background: #0B0F1A - Cards: #111827 with subtle border #1F2937 - Accent gradient: purple (#7C3AED) → blue (#3B82F6) - Text: - Primary: #E5E7EB - Secondary: #9CA3AF - Font: Inter (medium + semi-bold) Layout: - Fixed sidebar (left) - Top navbar (sticky) - Main content grid layout ----------------------------------- SIDEBAR: - Width: 240px - Background: #0F172A - Logo at top: "Zypit" - Menu items (with icons): - Dashboard - Earnings - Campaigns - Analytics - Messages - Settings - Active item: - Background: #1E293B - Left border: 3px gradient purple-blue - Hover effect: slight glow ----------------------------------- TOP NAVBAR: - Height: 64px - Search bar (rounded, dark input) - Right side: - Notification bell icon - User avatar dropdown ----------------------------------- DASHBOARD PAGE: Top Stats Cards (4 cards in grid): - Card style: - Padding: 20px - Rounded-xl - Shadow: soft glow - Cards: 1. Total Earnings ($12,450) 2. Clicks (8,230) 3. Conversion Rate (4.2%) 4. Active Campaigns (6) Chart Section: - Line chart (earnings over time) - Gradient stroke (purple → blue) - Smooth curved lines Recent Activity: - List with icons: - "You earned $120 from Nike campaign" - "New campaign available" - "Withdrawal processed" ----------------------------------- CAMPAIGNS PAGE: - Grid layout of campaign cards - Each card: - Brand logo - Title - Commission (e.g. 10%) - CTA button: "Apply" - Hover: - Slight scale + glow Modal on click: - Campaign details - Requirements - Payout info ----------------------------------- EARNINGS PAGE: - Table UI: Columns: - Date - Campaign - Amount - Status (Paid / Pending) - Top right: - Wallet Balance card - Withdraw button (gradient) ----------------------------------- ANALYTICS PAGE: - 3 charts: - Traffic sources (pie chart) - Conversion funnel (bar) - Revenue trend (line) - Filters: - Last 7 days / 30 days / 90 days ----------------------------------- MESSAGES PAGE: - Split layout: Left: conversation list Right: chat window - Chat bubbles: - User: purple - Brand: gray ----------------------------------- SETTINGS PAGE: - Profile form: - Name - Email - Social links - Payment section: - Bank / UPI / PayPal - Save button (gradient) ----------------------------------- ANIMATIONS: - Page transitions: fade + slide - Hover effects: scale(1.03) - Buttons: glow effect on hover - Loading skeletons ----------------------------------- TECH STACK: - React + Tailwind CSS - ShadCN UI components - Framer Motion animations - Chart.js or Recharts ----------------------------------- EXTRA DETAILS: - Fully responsive - Mobile sidebar collapse - Dark mode toggle (optional light theme) - Use dummy realistic data - Icons: Lucide React ----------------------------------- GOAL: Make it visually identical to a modern creator monetization dashboard like Zypit, with premium SaaS feel (Stripe-level UI quality).