Layout Documentation

About This Layout

SupportDesk — Wide Grouped Sidebar Support Platform

Design Direction

Warm, friendly support experience with amber accents. Inspired by Intercom meets Zendesk. Features a wide grouped sidebar with spring-animated accordion navigation, production-grade support dashboard with ticket priority pulse animations, and comprehensive sub-pages covering tickets, contacts, knowledge base, reports, and settings.

Theme & Design

  • Warm white background (#fffcf7) with amber-500 accent
  • CSS custom properties scoped via --sd-* tokens
  • Font: DM Sans for friendly, approachable typography
  • Friendly rounded corners (2xl) throughout
  • Warm ambient glow gradients (top-left, bottom-right)
  • Warm gray sidebar (#f7f5f0)

Motion & Animation

  • Library: motion/react (lightweight successor to framer-motion)
  • Signature: Group accordion spring open/close (stiffness: 300, damping: 28)
  • Signature: Ticket priority pulse animation on urgent items (CSS animate-ping)
  • Staggered stat card entrance (containerVariants + itemVariants)
  • Staggered ticket row entrance in tables
  • Logo hover spring animation (scale + rotate)
  • Chevron rotation with spring physics
  • Badge count entrance animation
  • Card hover lift effect (y: -2, spring)
  • Staggered contact card entrance
  • Staggered category card entrance

Charts (recharts)

  • Line chart: Response time trend over 30 days (dashboard)
  • Bar chart: Tickets by category (dashboard)
  • Line chart: CSAT trend over 6 months (reports)
  • Pie chart: Tickets by channel — email, chat, phone, social (reports)
  • Line chart: Average resolution time trend (reports)
  • All charts use supportdesk-* prefixed gradient IDs
  • Custom tooltip styling matching warm theme

Interactive Elements

  • Sortable ticket table with row hover effects
  • Selectable ticket rows with checkbox selection
  • Filter tabs: All, Open, Pending, Resolved
  • Search inputs across tickets, contacts, knowledge base
  • Clickable KB category cards with selection state
  • SLA indicators with color coding (green/amber/red)
  • Agent leaderboard with progress bars
  • Settings toggle switches with smooth transitions
  • Canned response cards with shortcut badges
  • Business hours schedule editor
  • SLA policy configuration panel

Support Domain Content

  • Dashboard: 5 stat cards (Open, Response Time, CSAT, Resolved, Unassigned)
  • Tickets: 13 realistic tickets with priority, status, SLA timers
  • Contacts: 12 contacts with satisfaction scores, companies, ticket counts
  • Knowledge Base: 15 articles across 4 categories with views/status
  • Reports: CSAT trend, channel distribution, resolution time, agent performance
  • Settings: Business hours, SLA policies, auto-assignment, email, canned responses, surveys

Sidebar Navigation

  • Wide grouped sidebar (280px) with collapsible sections
  • Groups: Main (Dashboard, Tickets), Communication (Contacts), Resources (KB, Reports)
  • Active route highlighting with amber accent border
  • Unread count badges with spring entrance
  • Search bar with focus ring animation
  • Agent status indicator with online dot
  • Bottom section: Settings, About Layout

Tech Stack

Framework

Next.js (App Router)

Styling

Tailwind CSS + CSS Variables

Animation

motion/react v12

Charts

recharts (Line, Bar, Pie)

Icons

Lucide React

Font

DM Sans

← Gallery