Mock based on Design

Current Design

Old Design Link

Global Style

• Colors
  • Primary: hsl(248, 66%, 55%) | #5440d8
  • Text
    • Dark purple: hsl(248, 56%, 16%) | #181240
    • Gray purple: hsl(249, 11%, 37%) | #575469
    • Light: hsl(0, 0%, 100%) | #ffffff
  • Background
    • purple: hsl(248, 66%, 55%) | #5440d8
    • Green: hsl(170, 66%, 38%) | #21a18c
    • Light Gray: hsl(0, 0%, 96%) | #f5f5f5
    • Light Purple: hsl(232, 100%, 97%) | #f0f2ff
    • White: hsl(0, 0%, 100%) | #ffffff
    • Dark Gray: hsl(248, 10%, 42%) | #636076
• Font: Inter
• Brand Font: PT Mono
• Code Font: Fira Code
• Display Font: Rubik

Page Breakdown

Landing

Components - Shared

• Button
  • Primary
  • Secondary
• Card
  • Default
  • Success
• Input
  • Success
  • Error - Input Invalid
• Link Text
• Logo
• NavBar

Login / Signup

Used in Login, Signup, Success, Reset Password

Components

• Card
• Layout - Box
• Link Text
• Title

Nav (logged In)

Nav Links: Home, Lessons, Community, Profile

Lesson List

Components

• LessonCard
  • Toggle On/Off state
• SideNavLinks
• SideNavTitle
• StatusCard

Lesson Challenge

Components

• Color States
• Number Badge
• Status Badge

Appreciation

• 50/50 section split
• User Search / Filter box
• Remove Stars -> Should not be rating users

Components

• Modal

Mentor Page

design

• Review -> Dropdown to see the code

Mentor Review Page

design

• Should show multiple submissions

Lesson Content - Put Off

• Ignore the Lesson card (Doesn't provide any value)
• Markdown Renderer ( Research )
  • Toggles
  • Tables
  • Table Of Content

---

Low Priority

• Comments on Lesson Content
• Lesson FAQ