Interactive Event Calendar & Sidebar
A high-fidelity dark-themed event management dashboard and interactive scheduling system. Featuring a deep navy aesthetic (#020617) with vibrant neon accents in cyan (#06b6d4) and teal (#14b8a6), this design is optimized for community hubs, university platforms, and professional event networks. It utilizes 'Plus Jakarta Sans' for a modern, tech-forward editorial look. Key layout features include a persistent vertical navigation sidebar, a sticky header with a unique dual-pane interactive calendar dropdown, and a responsive bento-style grid for event discovery. The visual language relies on glassmorphism principles, thin borders (1px solid #1e293b), and subtle glow animations.
Summary
An interactive, dark-mode event dashboard featuring a complex calendar system, categorized event cards, and community-driven widgets with high-contrast cyan highlights.
Style
The style is characterized by a 'Midnight' dark mode palette using #020617 and #0f172a. Typography uses 'Plus Jakarta Sans' with heavy emphasis on weight contrast (300 to 800) and small-caps tracking for labels. Accents are primarily Cyan (#06b6d4) for primary actions and Teal (#14b8a6) or Rose (#e11d48) for category coding. UI elements feature 24px-32px rounded corners, 1px borders for structure, and smooth 0.3s ease-out transitions for hover states and modals.
Layout & Structure
The layout consists of a fixed left sidebar (280px) and a main content area that begins with a sticky 80px top header. Content is organized into a primary event grid followed by a multi-column bento section for auxiliary widgets.
Left Sidebar Navigation
Header & Calendar Trigger
Event Discovery Grid
Auxiliary Widgets
Components
Interactive Dual-Pane Calendar Modal
A 700px wide dropdown modal combining date selection and event preview.
Neon Status Card
Cards that use glowing borders or shadows to signify high-importance events.