dev merge

**Complete Website UI Generation Prompt:**

---

**DevMerge - University + Tech Powered Learning Platform**

**Overview:** A modern coding practice platform designed for university students, combining academic progress tracking with AI-powered personalized learning recommendations. Dark-first aesthetic with professional university branding.

**Color Palette:**
- Primary Background: #0b0f17 (deep dark blue/black)
- Secondary Background: #111827, #0f172a (gradient cards)
- Accent Blue: #3b82f6 (primary actions, highlights)
- Success Green: #22c55e (completed items, positive indicators)
- Warning Yellow: #f59e0b (in-progress, attention needed)
- Text Primary: #ffffff
- Text Secondary: rgba(255,255,255,0.7)
- Text Tertiary: rgba(255,255,255,0.6)
- Border: rgba(255,255,255,0.08)

**Typography:**
- Font: System UI (Inter, San Francisco, Segoe UI)
- Headings: 24-26px, weight 600
- Body: 14px, weight 400-500
- Small labels: 11-12px

**Layout Structure:**

**1. Sidebar (Left, 240px width, fixed):**
- Dark background #1e2127
- Navigation items with icons: Problems, Contests, Discuss, Labs, Explore
- Account section: Profile, Settings
- Hover states: light blue background
- Active state: blue accent background

**2. Navbar (Top, 56px height, fixed):**
- Logo: Code2 icon + "DevMerge" text
- Theme toggle: Sun/Moon icon button
- Search input with search icon
- Notifications bell with unread badge
- User avatar with dropdown menu
- Mobile hamburger menu (hidden on desktop)

**3. Main Content Area:**
- Padding: 24px
- Responsive grid layouts
- Card-based design with gradient backgrounds

**Dashboard Page Features:**

**Header Section:**
- Title: "Dashboard"
- Welcome message with user name + emoji
- Subtitle showing semester info

**Stats Grid (4 cards):**
- Problems Solved (Code icon, green badge showing +12%)
- Current Streak (TrendingUp icon, +1 badge)
- Rank (Trophy icon, +3 badge)
- Study Time (Clock icon, +0.5h badge)
- Each card: icon box (blue bg), label, value, change badge

**Main Grid (2 columns):**

**Left Column - Recent Activity:**
- Card with gradient background
- Activity items with colored dots (green=completed, yellow=attempted)
- Title, timestamp, difficulty
- Status badges

**Right Column - Quick Actions:**
- Practice Problems (Code icon)
- Join Lab (BookOpen icon)
- Leaderboard (Trophy icon)
- Find Friends (Users icon)
- Buttons with hover lift effect and blue border

**Design Principles:**
- Glassmorphism effects on cards
- Subtle gradients (145deg, #111827 to #0f172a)
- Rounded corners: 12-16px
- Smooth transitions (0.2s)
- Hover effects: translateY(-2px), border color change
- Consistent spacing: 16px gaps
- Minimal shadows, no heavy effects

**Responsive Behavior:**
- Desktop: 4-column stats, 2-column main grid
- Tablet: 2-column stats, 1-column main grid
- Mobile: 1-column everything, sidebar collapses to hamburger menu

**AI-Powered Elements (Future):**
- Brain icon for AI recommendations
- Sparkles icon for smart suggestions
- Priority badges (high/medium)
- Personalized learning paths

**University Branding:**
- GraduationCap icon for academic sections
- GPA tracking with Dean's List indicators
- Course progress with instructor names
- Grade badges (A, A-, B+)
- Credit hours display
- Semester labels

**Overall Vibe:**
- Professional yet modern
- Academic meets tech startup
- Dark mode focused
- Clean, minimal, data-driven
- Student-friendly interface
- Encouraging progress visualization

---