601 lines
30 KiB
HTML
601 lines
30 KiB
HTML
<!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> |