Implement MonacoUSA Portal redesign foundations
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
- Added VueUse Motion for animations with custom presets - Created base UI component library with glass morphism effects: * GlassCard - Flexible card component with 4 variants * MonacoButton - Multi-variant button system * FloatingInput - Modern input with floating labels * StatsCard - Dashboard statistics display * AnimatedNumber - Smooth number animations * Icon system - Modular icon components - Created comprehensive page mockups: * Dashboard mockup with stats, activity feed, and widgets * Events page with filtering, search, and calendar - Established Monaco brand design system (red #dc2626) - Configured spring animations and glass effects 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
651
Design/mockups/dashboard-board-stunning.html
Normal file
651
Design/mockups/dashboard-board-stunning.html
Normal file
@@ -0,0 +1,651 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MonacoUSA Portal - Board Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #ffffff 25%, #fef2f2 50%, #ffffff 75%, #fff5f5 100%);
|
||||
}
|
||||
|
||||
/* Monaco Gradients */
|
||||
.monaco-gradient {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
}
|
||||
|
||||
.monaco-gradient-dark {
|
||||
background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
|
||||
}
|
||||
|
||||
.monaco-gradient-vibrant {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
|
||||
}
|
||||
|
||||
/* Glass Effects */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 8px 32px 0 rgba(220, 38, 38, 0.08);
|
||||
}
|
||||
|
||||
.glass-red {
|
||||
background: linear-gradient(135deg, rgba(254, 202, 202, 0.3) 0%, rgba(252, 165, 165, 0.2) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(220, 38, 38, 0.15);
|
||||
box-shadow: 0 8px 32px 0 rgba(220, 38, 38, 0.12);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Animated Elements */
|
||||
@keyframes slideInRight {
|
||||
from { transform: translateX(100px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from { transform: translateY(30px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.8s ease-out;
|
||||
}
|
||||
|
||||
.slide-in-up {
|
||||
animation: slideInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* Status Indicators */
|
||||
@keyframes pulse-green {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
|
||||
}
|
||||
|
||||
@keyframes pulse-red {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
|
||||
}
|
||||
|
||||
@keyframes pulse-amber {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
|
||||
}
|
||||
|
||||
.pulse-green { animation: pulse-green 2s infinite; }
|
||||
.pulse-red { animation: pulse-red 2s infinite; }
|
||||
.pulse-amber { animation: pulse-amber 2s infinite; }
|
||||
|
||||
/* Card Effects */
|
||||
.card-3d {
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.card-3d:hover {
|
||||
transform: translateY(-10px) rotateX(5deg) scale(1.02);
|
||||
box-shadow: 0 30px 60px rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Floating Elements */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(2deg); }
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Shimmer Effect */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -1000px 0; }
|
||||
100% { background-position: 1000px 0; }
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
/* Data Grid Styles */
|
||||
.data-row {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.data-row:hover {
|
||||
background: linear-gradient(90deg, rgba(220, 38, 38, 0.05) 0%, rgba(220, 38, 38, 0.02) 100%);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* Chart Container */
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen overflow-x-hidden">
|
||||
<!-- Animated Background -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute -top-40 -right-40 w-80 h-80 bg-red-200 rounded-full opacity-20 blur-3xl floating"></div>
|
||||
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-red-100 rounded-full opacity-20 blur-3xl floating" style="animation-delay: 2s;"></div>
|
||||
<div class="absolute top-1/2 left-1/3 w-60 h-60 bg-red-300 rounded-full opacity-10 blur-3xl floating" style="animation-delay: 4s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Executive Header -->
|
||||
<header class="fixed top-0 left-0 right-0 z-50 glass border-b border-red-100">
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Brand -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-0 monaco-gradient rounded-xl blur opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
||||
<div class="relative w-12 h-12 bg-white rounded-xl overflow-hidden shadow-xl">
|
||||
<div class="h-1/2 bg-red-600"></div>
|
||||
<div class="h-1/2 bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold gradient-text">MonacoUSA Portal</h1>
|
||||
<p class="text-xs text-gray-600 font-medium">Board Executive Dashboard</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center Controls -->
|
||||
<div class="hidden lg:flex items-center space-x-4">
|
||||
<div class="flex items-center space-x-2 px-4 py-2 glass-red rounded-full">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full pulse-green"></div>
|
||||
<span class="text-sm font-medium text-gray-700">System Status: Operational</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 px-4 py-2 glass rounded-full">
|
||||
<i data-lucide="users" class="w-4 h-4 text-gray-500"></i>
|
||||
<span class="text-sm font-medium text-gray-700">287 Active Members</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<button class="px-4 py-2 monaco-gradient text-white rounded-lg font-semibold hover:shadow-lg transition-all flex items-center space-x-2">
|
||||
<i data-lucide="user-plus" class="w-4 h-4"></i>
|
||||
<span>Add Member</span>
|
||||
</button>
|
||||
<button class="px-4 py-2 glass hover:bg-red-50 rounded-lg font-semibold transition-all flex items-center space-x-2">
|
||||
<i data-lucide="download" class="w-4 h-4"></i>
|
||||
<span>Export</span>
|
||||
</button>
|
||||
|
||||
<!-- Profile -->
|
||||
<div class="flex items-center space-x-3 pl-3 ml-3 border-l border-gray-200">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-semibold text-gray-900">Board Executive</p>
|
||||
<p class="text-xs text-red-600">Administrative Access</p>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<img src="https://ui-avatars.com/api/?name=Board+Executive&background=dc2626&color=fff&bold=true"
|
||||
alt="Profile" class="w-11 h-11 rounded-full ring-2 ring-red-200">
|
||||
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white rounded-full"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Executive Sidebar -->
|
||||
<aside class="fixed left-0 top-20 bottom-0 w-72 glass-dark border-r border-red-100/20 overflow-y-auto">
|
||||
<!-- Quick Stats Panel -->
|
||||
<div class="p-6 border-b border-red-100/20">
|
||||
<div class="glass-red rounded-2xl p-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">Today's Overview</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold gradient-text">43</p>
|
||||
<p class="text-xs text-gray-600">Overdue</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-green-600">$43K</p>
|
||||
<p class="text-xs text-gray-600">Revenue</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-blue-600">89%</p>
|
||||
<p class="text-xs text-gray-600">Attendance</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-purple-600">15</p>
|
||||
<p class="text-xs text-gray-600">New</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="p-4">
|
||||
<div class="space-y-1">
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl monaco-gradient text-white font-medium shadow-lg">
|
||||
<i data-lucide="shield" class="w-5 h-5"></i>
|
||||
<span>Executive Overview</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
||||
<i data-lucide="users" class="w-5 h-5"></i>
|
||||
<span>Member Management</span>
|
||||
<span class="ml-auto text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">43</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
||||
<i data-lucide="credit-card" class="w-5 h-5"></i>
|
||||
<span>Dues & Revenue</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
||||
<i data-lucide="calendar" class="w-5 h-5"></i>
|
||||
<span>Event Planning</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
||||
<i data-lucide="bar-chart-3" class="w-5 h-5"></i>
|
||||
<span>Analytics</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
||||
<i data-lucide="mail" class="w-5 h-5"></i>
|
||||
<span>Communications</span>
|
||||
<span class="ml-auto w-2 h-2 bg-red-500 rounded-full pulse-red"></span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-red-50 hover:text-red-600 font-medium transition-all">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Board Access Badge -->
|
||||
<div class="absolute bottom-4 left-4 right-4">
|
||||
<div class="monaco-gradient rounded-xl p-4 text-white text-center">
|
||||
<i data-lucide="shield-check" class="w-8 h-8 mx-auto mb-2"></i>
|
||||
<p class="text-xs font-semibold">BOARD EXECUTIVE</p>
|
||||
<p class="text-xs opacity-80">Full Administrative Access</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="ml-72 mt-20 p-8">
|
||||
<!-- Executive Header -->
|
||||
<div class="mb-8 slide-in-right">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-4xl font-bold gradient-text mb-2">Board Executive Dashboard</h2>
|
||||
<p class="text-gray-600">Real-time organization management and insights</p>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-gray-500">Last Updated</p>
|
||||
<p class="text-lg font-semibold text-gray-900">2 min ago</p>
|
||||
</div>
|
||||
<button class="p-3 glass rounded-xl hover:bg-red-50 transition-colors">
|
||||
<i data-lucide="refresh-cw" class="w-5 h-5 text-gray-700"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- Total Members KPI -->
|
||||
<div class="glass rounded-2xl p-6 card-3d slide-in-up">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-14 h-14 monaco-gradient rounded-xl flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="users" class="w-7 h-7 text-white"></i>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-green-600">
|
||||
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-bold">+12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Total Members</p>
|
||||
<p class="text-3xl font-bold text-gray-900">287</p>
|
||||
<div class="mt-4 flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Target: 300</span>
|
||||
<div class="w-24 bg-gray-200 rounded-full h-2">
|
||||
<div class="monaco-gradient h-2 rounded-full" style="width: 95.7%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Revenue KPI -->
|
||||
<div class="glass rounded-2xl p-6 card-3d slide-in-up" style="animation-delay: 0.1s">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="dollar-sign" class="w-7 h-7 text-white"></i>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-green-600">
|
||||
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-bold">+8%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">YTD Revenue</p>
|
||||
<p class="text-3xl font-bold text-gray-900">$43,050</p>
|
||||
<div class="mt-4 flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Goal: $50,000</span>
|
||||
<div class="w-24 bg-gray-200 rounded-full h-2">
|
||||
<div class="bg-gradient-to-r from-green-500 to-emerald-600 h-2 rounded-full" style="width: 86%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overdue Dues KPI -->
|
||||
<div class="glass rounded-2xl p-6 card-3d slide-in-up" style="animation-delay: 0.2s">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="alert-triangle" class="w-7 h-7 text-white"></i>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded-full pulse-amber">ACTION</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Overdue Dues</p>
|
||||
<p class="text-3xl font-bold text-gray-900">43</p>
|
||||
<div class="mt-4 flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Amount: $6,450</span>
|
||||
<button class="text-amber-600 font-semibold hover:text-amber-700">View All →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Success KPI -->
|
||||
<div class="glass rounded-2xl p-6 card-3d slide-in-up" style="animation-delay: 0.3s">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="calendar-check" class="w-7 h-7 text-white"></i>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1 text-green-600">
|
||||
<i data-lucide="trending-up" class="w-4 h-4"></i>
|
||||
<span class="text-sm font-bold">+25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Avg Attendance</p>
|
||||
<p class="text-3xl font-bold text-gray-900">89%</p>
|
||||
<div class="mt-4 flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Last 3 events</span>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
|
||||
<div class="w-6 h-6 bg-amber-500 rounded-full border-2 border-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Priority Actions Banner -->
|
||||
<div class="mb-8 slide-in-right">
|
||||
<div class="monaco-gradient-vibrant rounded-2xl p-6 text-white relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full blur-3xl opacity-10"></div>
|
||||
<div class="relative z-10 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="w-16 h-16 bg-white/20 backdrop-blur rounded-xl flex items-center justify-center">
|
||||
<i data-lucide="alert-circle" class="w-8 h-8"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-1">43 Members with Overdue Dues</h3>
|
||||
<p class="text-white/90">Total outstanding amount: $6,450 • Average days overdue: 67</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button class="px-5 py-2.5 bg-white/20 backdrop-blur rounded-lg font-semibold hover:bg-white/30 transition-all">
|
||||
View Details
|
||||
</button>
|
||||
<button class="px-5 py-2.5 bg-white text-red-600 rounded-lg font-semibold hover:shadow-xl transition-all flex items-center space-x-2">
|
||||
<i data-lucide="send" class="w-4 h-4"></i>
|
||||
<span>Send Reminders</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Member Management Panel -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="glass rounded-2xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-bold text-gray-900">Dues Management</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="px-3 py-1.5 text-sm font-medium text-white monaco-gradient rounded-lg">Overdue (43)</button>
|
||||
<button class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">Due Soon (5)</button>
|
||||
<button class="px-3 py-1.5 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg">Paid (239)</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Cards -->
|
||||
<div class="space-y-4">
|
||||
<!-- Member Card 1 -->
|
||||
<div class="glass-red rounded-xl p-4 data-row">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<img src="https://ui-avatars.com/api/?name=Annette+Anderson&background=dc2626&color=fff"
|
||||
alt="Member" class="w-12 h-12 rounded-full ring-2 ring-red-200">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Annette Anderson</h4>
|
||||
<div class="flex items-center space-x-3 text-sm text-gray-500">
|
||||
<span>ID: MUSA-16</span>
|
||||
<span>•</span>
|
||||
<span class="text-red-600 font-medium">85 days overdue</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-right">
|
||||
<p class="text-lg font-bold text-gray-900">$150</p>
|
||||
<p class="text-xs text-gray-500">Due Jun 6, 2024</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<i data-lucide="mail" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<i data-lucide="more-vertical" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Card 2 -->
|
||||
<div class="glass-red rounded-xl p-4 data-row">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<img src="https://ui-avatars.com/api/?name=Danilo+Copiz&background=dc2626&color=fff"
|
||||
alt="Member" class="w-12 h-12 rounded-full ring-2 ring-red-200">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Danilo Copiz</h4>
|
||||
<div class="flex items-center space-x-3 text-sm text-gray-500">
|
||||
<span>ID: MUSA-19</span>
|
||||
<span>•</span>
|
||||
<span class="text-red-600 font-medium">85 days overdue</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-right">
|
||||
<p class="text-lg font-bold text-gray-900">$150</p>
|
||||
<p class="text-xs text-gray-500">Due Jun 6, 2024</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<i data-lucide="mail" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<i data-lucide="more-vertical" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Card 3 -->
|
||||
<div class="glass-red rounded-xl p-4 data-row">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-4">
|
||||
<img src="https://ui-avatars.com/api/?name=Ian+Sosso&background=dc2626&color=fff"
|
||||
alt="Member" class="w-12 h-12 rounded-full ring-2 ring-red-200">
|
||||
<div>
|
||||
<h4 class="font-semibold text-gray-900">Ian Sosso</h4>
|
||||
<div class="flex items-center space-x-3 text-sm text-gray-500">
|
||||
<span>ID: MUSA-78</span>
|
||||
<span>•</span>
|
||||
<span class="text-red-600 font-medium">81 days overdue</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<div class="text-right">
|
||||
<p class="text-lg font-bold text-gray-900">$150</p>
|
||||
<p class="text-xs text-gray-500">Due Jun 10, 2024</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="p-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
||||
<i data-lucide="check" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<i data-lucide="mail" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 glass hover:bg-gray-50 rounded-lg transition-colors">
|
||||
<i data-lucide="more-vertical" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<button class="text-red-600 hover:text-red-700 font-semibold">
|
||||
View All 43 Overdue Members →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analytics Panel -->
|
||||
<div class="space-y-6">
|
||||
<!-- Revenue Chart -->
|
||||
<div class="glass rounded-2xl p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-4">Revenue Trend</h3>
|
||||
<div class="chart-container">
|
||||
<canvas id="revenueChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="glass rounded-2xl p-6">
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-4">Quick Actions</h3>
|
||||
<div class="space-y-3">
|
||||
<button class="w-full flex items-center justify-between p-3 glass-red rounded-xl hover:shadow-md transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<i data-lucide="user-plus" class="w-5 h-5 text-red-600"></i>
|
||||
<span class="font-medium text-gray-700">Add New Member</span>
|
||||
</div>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 glass-red rounded-xl hover:shadow-md transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<i data-lucide="calendar-plus" class="w-5 h-5 text-red-600"></i>
|
||||
<span class="font-medium text-gray-700">Create Event</span>
|
||||
</div>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 glass-red rounded-xl hover:shadow-md transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<i data-lucide="file-text" class="w-5 h-5 text-red-600"></i>
|
||||
<span class="font-medium text-gray-700">Generate Report</span>
|
||||
</div>
|
||||
<i data-lucide="arrow-right" class="w-4 h-4 text-gray-400 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Revenue Chart
|
||||
const ctx = document.getElementById('revenueChart').getContext('2d');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 250);
|
||||
gradient.addColorStop(0, 'rgba(220, 38, 38, 0.3)');
|
||||
gradient.addColorStop(1, 'rgba(220, 38, 38, 0)');
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
data: [32000, 34000, 35500, 38000, 41000, 43050],
|
||||
borderColor: '#dc2626',
|
||||
backgroundColor: gradient,
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#fff',
|
||||
pointBorderColor: '#dc2626',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
pointHoverRadius: 6
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return '$' + (value / 1000) + 'k';
|
||||
}
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
601
Design/mockups/dashboard-member-stunning.html
Normal file
601
Design/mockups/dashboard-member-stunning.html
Normal file
@@ -0,0 +1,601 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MonacoUSA Portal - Member Dashboard</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #fef3f3 0%, #ffffff 50%, #fef3f3 100%);
|
||||
}
|
||||
|
||||
/* Monaco Red Gradient Variations */
|
||||
.monaco-gradient {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
}
|
||||
|
||||
.monaco-gradient-soft {
|
||||
background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
|
||||
}
|
||||
|
||||
.monaco-gradient-vibrant {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
|
||||
}
|
||||
|
||||
.monaco-gradient-subtle {
|
||||
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
|
||||
}
|
||||
|
||||
/* Glass Morphism Effects */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 8px 32px 0 rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
.glass-red {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(220, 38, 38, 0.2);
|
||||
box-shadow: 0 8px 32px 0 rgba(220, 38, 38, 0.15);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Animated Gradients */
|
||||
.animated-gradient {
|
||||
background: linear-gradient(270deg, #dc2626, #ef4444, #dc2626);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
/* Glow Effects */
|
||||
.glow-red {
|
||||
box-shadow: 0 0 40px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.glow-red-intense {
|
||||
box-shadow: 0 0 60px rgba(220, 38, 38, 0.5),
|
||||
0 0 100px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
/* Card Hover Effects */
|
||||
.card-hover {
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 60px rgba(220, 38, 38, 0.2);
|
||||
}
|
||||
|
||||
/* Floating Animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Pulse Animation */
|
||||
@keyframes pulse-red {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 20px rgba(220, 38, 38, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: pulse-red 2s infinite;
|
||||
}
|
||||
|
||||
/* Background Pattern */
|
||||
.pattern-monaco {
|
||||
background-color: #ffffff;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 80%, rgba(220, 38, 38, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 20%, rgba(220, 38, 38, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(circle at 40% 40%, rgba(220, 38, 38, 0.05) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar-item {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidebar-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: linear-gradient(90deg, rgba(220, 38, 38, 0.1) 0%, transparent 100%);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-item:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.05) 100%);
|
||||
border-left: 4px solid #dc2626;
|
||||
}
|
||||
|
||||
/* Number Counter Animation */
|
||||
@keyframes countUp {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.count-up {
|
||||
animation: countUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Shimmer Effect */
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -1000px 0; }
|
||||
100% { background-position: 1000px 0; }
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="pattern-monaco min-h-screen">
|
||||
<!-- Animated Background Elements -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none">
|
||||
<div class="absolute top-20 left-20 w-72 h-72 bg-red-200 rounded-full opacity-20 blur-3xl floating"></div>
|
||||
<div class="absolute bottom-20 right-20 w-96 h-96 bg-red-300 rounded-full opacity-15 blur-3xl floating" style="animation-delay: 3s;"></div>
|
||||
<div class="absolute top-1/2 left-1/2 w-64 h-64 bg-red-100 rounded-full opacity-20 blur-3xl floating" style="animation-delay: 1.5s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Premium Header -->
|
||||
<header class="fixed top-0 left-0 right-0 z-50 glass border-b border-white/20">
|
||||
<div class="px-6 py-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- Left Section -->
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Monaco Flag Logo Animation -->
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-0 monaco-gradient rounded-xl blur-lg opacity-50 group-hover:opacity-75 transition-opacity"></div>
|
||||
<div class="relative w-12 h-12 bg-white rounded-xl overflow-hidden shadow-xl">
|
||||
<div class="h-1/2 bg-red-600"></div>
|
||||
<div class="h-1/2 bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold bg-gradient-to-r from-red-600 to-red-800 bg-clip-text text-transparent">
|
||||
MonacoUSA Portal
|
||||
</h1>
|
||||
<p class="text-xs text-gray-600 font-medium">Excellence in Community</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Center Search -->
|
||||
<div class="hidden lg:flex items-center">
|
||||
<div class="relative">
|
||||
<input type="text" placeholder="Search members, events, documents..."
|
||||
class="w-96 px-5 py-2.5 pl-12 glass rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-red-500/30 transition-all">
|
||||
<i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
|
||||
<kbd class="absolute right-4 top-1/2 -translate-y-1/2 text-xs bg-gray-100 px-2 py-1 rounded">⌘K</kbd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Section -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<!-- Quick Actions -->
|
||||
<button class="p-2.5 glass rounded-xl hover:bg-red-50 transition-colors group">
|
||||
<i data-lucide="plus" class="w-5 h-5 text-gray-700 group-hover:text-red-600 transition-colors"></i>
|
||||
</button>
|
||||
|
||||
<!-- Notifications with Badge -->
|
||||
<button class="relative p-2.5 glass rounded-xl hover:bg-red-50 transition-colors group">
|
||||
<i data-lucide="bell" class="w-5 h-5 text-gray-700 group-hover:text-red-600 transition-colors"></i>
|
||||
<span class="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full pulse"></span>
|
||||
</button>
|
||||
|
||||
<!-- Premium User Profile -->
|
||||
<div class="flex items-center space-x-3 pl-3 ml-3 border-l border-gray-200">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-semibold text-gray-900">Matthew Ciaccio</p>
|
||||
<p class="text-xs text-gray-500">Gold Member</p>
|
||||
</div>
|
||||
<div class="relative group cursor-pointer">
|
||||
<div class="absolute inset-0 monaco-gradient rounded-full blur opacity-0 group-hover:opacity-50 transition-opacity"></div>
|
||||
<img src="https://ui-avatars.com/api/?name=Matthew+Ciaccio&background=dc2626&color=fff&bold=true"
|
||||
alt="Profile" class="relative w-11 h-11 rounded-full ring-2 ring-red-100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Modern Sidebar -->
|
||||
<aside class="fixed left-0 top-20 bottom-0 w-72 glass-dark border-r border-white/10 overflow-y-auto">
|
||||
<!-- User Status Card -->
|
||||
<div class="p-6">
|
||||
<div class="glass-red rounded-2xl p-4 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 monaco-gradient rounded-full blur-2xl opacity-30"></div>
|
||||
<div class="relative">
|
||||
<div class="flex items-center space-x-3 mb-3">
|
||||
<div class="w-12 h-12 rounded-xl monaco-gradient flex items-center justify-center">
|
||||
<i data-lucide="crown" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900">Gold Member</p>
|
||||
<p class="text-xs text-gray-600">Since 2019</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-xs">
|
||||
<span class="text-gray-600">Status</span>
|
||||
<span class="font-semibold text-green-600">Active</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs">
|
||||
<span class="text-gray-600">Points</span>
|
||||
<span class="font-semibold text-gray-900">2,450</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="px-4 pb-6">
|
||||
<div class="space-y-1">
|
||||
<a href="#" class="sidebar-item active flex items-center space-x-3 px-4 py-3 rounded-xl text-red-600 font-medium">
|
||||
<i data-lucide="layout-dashboard" class="w-5 h-5"></i>
|
||||
<span>Dashboard</span>
|
||||
<span class="ml-auto text-xs bg-red-100 text-red-600 px-2 py-1 rounded-full">New</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="calendar-days" class="w-5 h-5"></i>
|
||||
<span>Events</span>
|
||||
<span class="ml-auto text-xs text-gray-400">12</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="users" class="w-5 h-5"></i>
|
||||
<span>Members</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="wallet" class="w-5 h-5"></i>
|
||||
<span>Dues & Payments</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
<a href="#" class="sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="message-circle" class="w-5 h-5"></i>
|
||||
<span>Messages</span>
|
||||
<span class="ml-auto w-2 h-2 bg-red-500 rounded-full pulse"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-6 border-t border-gray-200">
|
||||
<p class="px-4 text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Quick Actions</p>
|
||||
<div class="space-y-1">
|
||||
<button class="w-full sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="download" class="w-5 h-5"></i>
|
||||
<span>Download ID Card</span>
|
||||
</button>
|
||||
<button class="w-full sidebar-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:text-red-600 font-medium">
|
||||
<i data-lucide="headphones" class="w-5 h-5"></i>
|
||||
<span>Support</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-72 mt-20 p-8">
|
||||
<!-- Hero Welcome Section -->
|
||||
<div class="mb-8">
|
||||
<div class="glass rounded-3xl p-8 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-96 h-96 monaco-gradient rounded-full blur-3xl opacity-10"></div>
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-4xl font-bold text-gray-900 mb-2">Welcome back, Matthew! 👋</h2>
|
||||
<p class="text-gray-600 text-lg">Your membership is active and you have 2 upcoming events this week.</p>
|
||||
|
||||
<!-- Quick Stats Bar -->
|
||||
<div class="flex items-center space-x-8 mt-6">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full pulse"></div>
|
||||
<span class="text-sm text-gray-600">Portal Status: <strong class="text-green-600">Online</strong></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="users" class="w-4 h-4 text-gray-400"></i>
|
||||
<span class="text-sm text-gray-600">Members Online: <strong>34</strong></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="calendar" class="w-4 h-4 text-gray-400"></i>
|
||||
<span class="text-sm text-gray-600">Next Event: <strong>Dec 15</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Premium Stats Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<!-- Membership Card -->
|
||||
<div class="glass rounded-2xl p-6 card-hover relative overflow-hidden group">
|
||||
<div class="absolute inset-0 monaco-gradient opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="check-circle" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-green-600 bg-green-100 px-3 py-1 rounded-full">ACTIVE</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Membership Status</p>
|
||||
<p class="text-3xl font-bold text-gray-900 count-up">Active</p>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Expires</span>
|
||||
<span class="font-semibold text-gray-700">Dec 31, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dues Card -->
|
||||
<div class="glass rounded-2xl p-6 card-hover relative overflow-hidden group">
|
||||
<div class="absolute inset-0 animated-gradient opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-xl monaco-gradient flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="credit-card" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-amber-600 bg-amber-100 px-3 py-1 rounded-full shimmer">DUE SOON</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Annual Dues</p>
|
||||
<p class="text-3xl font-bold text-gray-900 count-up">$150</p>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100">
|
||||
<button class="w-full py-2 monaco-gradient text-white rounded-lg font-semibold hover:shadow-lg transition-all">
|
||||
Pay Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events Card -->
|
||||
<div class="glass rounded-2xl p-6 card-hover relative overflow-hidden group">
|
||||
<div class="absolute inset-0 monaco-gradient opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-400 to-indigo-600 flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="calendar-check" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-indigo-600 bg-indigo-100 px-3 py-1 rounded-full">THIS YEAR</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Events Attended</p>
|
||||
<p class="text-3xl font-bold text-gray-900 count-up">12</p>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-gray-500">Upcoming</span>
|
||||
<span class="font-semibold text-gray-700">3 events</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Points Card -->
|
||||
<div class="glass rounded-2xl p-6 card-hover relative overflow-hidden group">
|
||||
<div class="absolute inset-0 monaco-gradient opacity-0 group-hover:opacity-10 transition-opacity"></div>
|
||||
<div class="relative">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg">
|
||||
<i data-lucide="trophy" class="w-6 h-6 text-white"></i>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-purple-600 bg-purple-100 px-3 py-1 rounded-full">TOP 10%</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-1">Member Points</p>
|
||||
<p class="text-3xl font-bold text-gray-900 count-up">2,450</p>
|
||||
<div class="mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
<div class="monaco-gradient h-2 rounded-full" style="width: 78%"></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-2">550 points to Platinum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured Event Banner -->
|
||||
<div class="mb-8">
|
||||
<div class="monaco-gradient rounded-3xl p-8 relative overflow-hidden glow-red">
|
||||
<div class="absolute top-0 right-0 w-96 h-96 bg-white rounded-full blur-3xl opacity-10"></div>
|
||||
<div class="relative z-10 flex items-center justify-between">
|
||||
<div class="text-white">
|
||||
<div class="flex items-center space-x-3 mb-3">
|
||||
<div class="w-10 h-10 bg-white/20 backdrop-blur rounded-lg flex items-center justify-center">
|
||||
<i data-lucide="sparkles" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="text-sm font-semibold bg-white/20 px-3 py-1 rounded-full">FEATURED EVENT</span>
|
||||
</div>
|
||||
<h3 class="text-3xl font-bold mb-2">Annual Monaco Gala 2024</h3>
|
||||
<p class="text-white/90 mb-4 max-w-xl">Join us for an elegant evening celebrating Monaco's heritage and culture. Black tie event with dinner, entertainment, and networking.</p>
|
||||
<div class="flex items-center space-x-6 text-sm">
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="calendar" class="w-4 h-4"></i>
|
||||
<span>December 15, 2024</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="clock" class="w-4 h-4"></i>
|
||||
<span>7:00 PM - 11:00 PM</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<i data-lucide="map-pin" class="w-4 h-4"></i>
|
||||
<span>Monaco Embassy, Washington DC</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<button class="px-6 py-3 bg-white text-red-600 rounded-xl font-semibold hover:shadow-xl transition-all">
|
||||
RSVP Now
|
||||
</button>
|
||||
<button class="px-6 py-3 bg-white/20 backdrop-blur text-white rounded-xl font-semibold hover:bg-white/30 transition-all">
|
||||
View Details
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Grid -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Recent Activity Feed -->
|
||||
<div class="lg:col-span-2">
|
||||
<div class="glass rounded-2xl p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-bold text-gray-900">Recent Activity</h3>
|
||||
<button class="text-sm text-red-600 hover:text-red-700 font-medium">View All</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Activity Item -->
|
||||
<div class="flex items-start space-x-4 p-4 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<div class="w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="user-plus" class="w-5 h-5 text-green-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">New member joined</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Sarah Johnson joined as a Silver member</p>
|
||||
<p class="text-xs text-gray-400 mt-2">2 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Item -->
|
||||
<div class="flex items-start space-x-4 p-4 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="calendar" class="w-5 h-5 text-blue-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">Event reminder</p>
|
||||
<p class="text-sm text-gray-600 mt-1">Wine Tasting Event is coming up in 3 days</p>
|
||||
<p class="text-xs text-gray-400 mt-2">5 hours ago</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activity Item -->
|
||||
<div class="flex items-start space-x-4 p-4 hover:bg-gray-50 rounded-xl transition-colors">
|
||||
<div class="w-10 h-10 rounded-xl monaco-gradient flex items-center justify-center flex-shrink-0">
|
||||
<i data-lucide="trophy" class="w-5 h-5 text-white"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-900">Achievement unlocked!</p>
|
||||
<p class="text-sm text-gray-600 mt-1">You've attended 10+ events this year</p>
|
||||
<p class="text-xs text-gray-400 mt-2">1 day ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Spotlight -->
|
||||
<div>
|
||||
<div class="glass rounded-2xl p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-6">Member Spotlight</h3>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="relative inline-block mb-4">
|
||||
<img src="https://ui-avatars.com/api/?name=John+Smith&background=dc2626&color=fff&size=128"
|
||||
alt="Member" class="w-24 h-24 rounded-full ring-4 ring-red-100">
|
||||
<div class="absolute bottom-0 right-0 w-7 h-7 bg-green-500 rounded-full border-3 border-white flex items-center justify-center">
|
||||
<i data-lucide="check" class="w-4 h-4 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h4 class="text-lg font-semibold text-gray-900">John Smith</h4>
|
||||
<p class="text-sm text-gray-500 mb-1">Board Member</p>
|
||||
<div class="inline-flex items-center space-x-2 px-3 py-1 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-full text-xs font-semibold mt-2">
|
||||
<i data-lucide="award" class="w-3 h-3"></i>
|
||||
<span>PLATINUM MEMBER</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-6 border-t border-gray-100">
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-gray-900">15</p>
|
||||
<p class="text-xs text-gray-500">Years</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-gray-900">89</p>
|
||||
<p class="text-xs text-gray-500">Events</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-gray-900">5.2k</p>
|
||||
<p class="text-xs text-gray-500">Points</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="w-full mt-6 px-4 py-2 monaco-gradient text-white rounded-lg font-semibold hover:shadow-lg transition-all">
|
||||
View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Floating Action Button -->
|
||||
<div class="fixed bottom-8 right-8">
|
||||
<button class="w-14 h-14 monaco-gradient rounded-full shadow-2xl hover:shadow-3xl transition-all glow-red-intense flex items-center justify-center group">
|
||||
<i data-lucide="plus" class="w-6 h-6 text-white group-hover:rotate-45 transition-transform"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
// Add number animation on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.5
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('count-up');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
document.querySelectorAll('.count-up').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user