Redesign member dashboard with modern bento grid layout and animations
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
- Updated design philosophy to v2.0 with focus on beauty and interactivity - Added @vueuse/motion for advanced animations - Created reusable dashboard components: - BentoGrid: Flexible grid layout system - StatsCard: Animated statistics with sparklines - ProfileCard: Premium profile display with progress - ActivityTimeline: Beautiful timeline with staggered animations - EventsCard: Upcoming events display - PaymentCard: Payment status and history - QuickActionCard: Animated action buttons - Rebuilt member dashboard with bento grid layout - Added glass morphism effects throughout - Implemented micro-interactions and hover effects - Added gradient text effects and decorative elements 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,31 @@
|
||||
# MonacoUSA Portal Design System
|
||||
# MonacoUSA Portal Design System v2.0
|
||||
|
||||
## Overview
|
||||
The MonacoUSA Portal design system represents a premium, modern approach to web application interfaces, combining cutting-edge UI patterns with sophisticated animations and interactions. This system prioritizes beauty, functionality, and user engagement through carefully crafted visual experiences.
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
### Core Principles
|
||||
|
||||
#### 1. **Visual Elegance**
|
||||
- Premium aesthetics that reflect Monaco's luxury and sophistication
|
||||
- Beautiful, engaging interfaces that delight users
|
||||
- Attention to detail in every interaction
|
||||
|
||||
#### 2. **Motion & Life**
|
||||
- Smooth, purposeful animations that guide user attention
|
||||
- Micro-interactions that provide feedback and enhance usability
|
||||
- Transitions that create seamless navigation experiences
|
||||
|
||||
#### 3. **Modern Architecture**
|
||||
- Bento grid layouts for flexible content organization
|
||||
- Component-based design for consistency and maintainability
|
||||
- Responsive patterns that adapt beautifully across devices
|
||||
|
||||
#### 4. **Interactive Engagement**
|
||||
- Customizable interfaces that users can personalize
|
||||
- Draggable and reorderable components
|
||||
- Real-time updates with smooth animations
|
||||
|
||||
## 🎨 Visual Identity
|
||||
|
||||
@@ -748,6 +775,362 @@ $screen-2xl: 1536px; // 2X Extra large devices
|
||||
.text-justify { text-align: justify; }
|
||||
```
|
||||
|
||||
## 🎯 Dashboard Patterns
|
||||
|
||||
### Bento Grid Layout
|
||||
Modern dashboard layout using CSS Grid with flexible item placement:
|
||||
|
||||
```scss
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
|
||||
.bento-item {
|
||||
@include glass-premium;
|
||||
border-radius: $radius-2xl;
|
||||
padding: $space-6;
|
||||
transition: all $duration-base $ease-in-out-smooth;
|
||||
|
||||
&--small { grid-column: span 3; }
|
||||
&--medium { grid-column: span 4; }
|
||||
&--large { grid-column: span 6; }
|
||||
&--xlarge { grid-column: span 8; }
|
||||
&--full { grid-column: span 12; }
|
||||
|
||||
&--tall { grid-row: span 2; }
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: $shadow-glass-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Widget Components
|
||||
|
||||
#### Statistics Card
|
||||
```scss
|
||||
.stat-card {
|
||||
@include glass-premium(0.8, 25px);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.stat-value {
|
||||
font-size: $text-4xl;
|
||||
font-weight: $font-bold;
|
||||
background: $gradient-monaco;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.stat-change {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: $space-1 $space-2;
|
||||
border-radius: $radius-full;
|
||||
font-size: $text-sm;
|
||||
font-weight: $font-semibold;
|
||||
|
||||
&--positive {
|
||||
background: rgba($success-500, 0.1);
|
||||
color: $success-600;
|
||||
}
|
||||
|
||||
&--negative {
|
||||
background: rgba($monaco-red-500, 0.1);
|
||||
color: $monaco-red-600;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-chart {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Activity Timeline
|
||||
```scss
|
||||
.timeline {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: $gradient-monaco;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
margin-bottom: $space-6;
|
||||
animation: slide-up $duration-base $ease-in-out-smooth;
|
||||
animation-fill-mode: both;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-delay: #{$i * 50}ms;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: $radius-full;
|
||||
background: white;
|
||||
border: 3px solid $monaco-red-600;
|
||||
z-index: 1;
|
||||
|
||||
&.pulse {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -5px;
|
||||
border-radius: $radius-full;
|
||||
border: 2px solid $monaco-red-600;
|
||||
animation: pulse-ring 2s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Draggable Dashboard
|
||||
```scss
|
||||
.draggable-grid {
|
||||
.drag-handle {
|
||||
position: absolute;
|
||||
top: $space-4;
|
||||
right: $space-4;
|
||||
cursor: grab;
|
||||
opacity: 0;
|
||||
transition: opacity $duration-base;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
&:hover .drag-handle {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.05);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
&.drag-over {
|
||||
background: rgba($monaco-red-600, 0.05);
|
||||
border: 2px dashed $monaco-red-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Enhanced Glass Effects
|
||||
|
||||
```scss
|
||||
@mixin glass-premium($opacity: 0.7, $blur: 30px) {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, $opacity),
|
||||
rgba(255, 255, 255, $opacity * 0.6)
|
||||
);
|
||||
backdrop-filter: blur($blur) saturate(180%);
|
||||
-webkit-backdrop-filter: blur($blur) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.5),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@mixin glass-frosted($color: white, $opacity: 0.1) {
|
||||
background: rgba($color, $opacity);
|
||||
backdrop-filter: blur(40px) saturate(200%) contrast(120%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%) contrast(120%);
|
||||
border: 1px solid rgba($color, 0.2);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.1),
|
||||
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### Animation Patterns for Dashboard
|
||||
|
||||
#### Number Counter Animation
|
||||
```scss
|
||||
@keyframes count-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: inline-block;
|
||||
animation: count-up $duration-slow $ease-out-back;
|
||||
|
||||
.digit {
|
||||
display: inline-block;
|
||||
animation: count-up $duration-slow $ease-out-back;
|
||||
animation-fill-mode: both;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-delay: #{$i * 50}ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Progress Ring
|
||||
```scss
|
||||
.progress-ring {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-circle {
|
||||
fill: none;
|
||||
stroke-width: 8;
|
||||
|
||||
&--bg {
|
||||
stroke: rgba($gray-300, 0.3);
|
||||
}
|
||||
|
||||
&--fill {
|
||||
stroke: url(#gradient-monaco);
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset $duration-slow $ease-in-out-smooth;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: $text-2xl;
|
||||
font-weight: $font-bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### VueUse Motion Integration
|
||||
|
||||
#### Configuration
|
||||
```javascript
|
||||
// Motion variants for dashboard components
|
||||
export const dashboardMotions = {
|
||||
// Card entrance
|
||||
cardEnter: {
|
||||
initial: { opacity: 0, scale: 0.9 },
|
||||
enter: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: {
|
||||
type: 'spring',
|
||||
stiffness: 200,
|
||||
damping: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Statistics counter
|
||||
statCounter: {
|
||||
initial: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 600,
|
||||
ease: 'easeOut'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Timeline item
|
||||
timelineItem: {
|
||||
initial: { opacity: 0, x: -20 },
|
||||
visibleOnce: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: {
|
||||
duration: 500,
|
||||
delay: 100
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Hover lift
|
||||
hoverLift: {
|
||||
initial: { scale: 1 },
|
||||
hovered: {
|
||||
scale: 1.02,
|
||||
y: -4,
|
||||
transition: {
|
||||
type: 'spring',
|
||||
stiffness: 400,
|
||||
damping: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Usage Example
|
||||
```vue
|
||||
<template>
|
||||
<div class="bento-grid">
|
||||
<div
|
||||
v-motion="'statsCard'"
|
||||
:initial="{ opacity: 0, y: 20 }"
|
||||
:enter="{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: index * 100,
|
||||
duration: 500
|
||||
}
|
||||
}"
|
||||
:hovered="{
|
||||
scale: 1.02,
|
||||
y: -4
|
||||
}"
|
||||
class="bento-item bento-item--medium stat-card"
|
||||
>
|
||||
<!-- Card content -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*This design system provides the foundation for creating consistent, beautiful, and performant user interfaces across the MonacoUSA Portal.*
|
||||
*MonacoUSA Portal Design System v2.0 - Premium Design for Premium Experiences*
|
||||
Reference in New Issue
Block a user