From f735b68fedca33f58dfbacebdb5155022f7eec1c Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sat, 6 Sep 2025 16:03:02 +0200
Subject: [PATCH] Implement ultra-modern glassmorphic dashboard with animations

- Add animated hero header with Monaco red gradient
- Implement floating orbs with blur effects
- Create glowing avatar with status indicator
- Add gradient text animations
- Implement glass-morphic cards with backdrop blur
- Add hover animations and transitions
- Refine dues management cards
- Include comprehensive CSS animations
---
 pages/board/dashboard/glass.vue | 795 +++++++++++++++++++++++++-------
 1 file changed, 630 insertions(+), 165 deletions(-)

diff --git a/pages/board/dashboard/glass.vue b/pages/board/dashboard/glass.vue
index 90dabb2..bc91c7d 100644
--- a/pages/board/dashboard/glass.vue
+++ b/pages/board/dashboard/glass.vue
@@ -1,71 +1,149 @@
 <template>
   <div class="glass-dashboard">
-    <!-- Dashboard Content -->
-    <div class="dashboard-container">
-      <!-- Welcome Section -->
-      <div class="welcome-card">
-        <h2 class="welcome-title">Welcome back!</h2>
-        <p class="welcome-subtitle">
-          Here's an overview of MonacoUSA's current status and activities.
-        </p>
-      </div>
-
-      <!-- Statistics Grid -->
-      <div class="stats-grid">
-        <div v-for="stat in stats" :key="stat.label" class="stat-card">
-          <div class="stat-icon-wrapper">
-            <div class="stat-icon">{{ stat.icon }}</div>
-          </div>
-          <p class="stat-label">
-            {{ stat.label }}
-          </p>
-          <p class="stat-value">
-            {{ stat.prefix }}{{ stat.value }}{{ stat.suffix }}
-          </p>
-          <p v-if="stat.change" class="stat-change">
-            {{ stat.change }}
-          </p>
-        </div>
-      </div>
-
-      <!-- Dues Management Section -->
-      <div class="dues-section">
-        <div class="dues-header">
-          <h3 class="dues-title">Member Dues Overview</h3>
-        </div>
-
-        <!-- Dues Cards Grid - MAX 4 VISIBLE -->
-        <div class="dues-grid">
-          <div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
-            <!-- Member Info -->
-            <div class="member-info">
-              <div class="member-avatar"></div>
-              <div>
-                <h4 class="member-name">{{ member.name }}</h4>
-                <p class="member-id">Member #{{ member.id }}</p>
+    <!-- Ultra-Modern Hero Header -->
+    <div class="hero-header">
+      <!-- Animated background -->
+      <div class="hero-gradient"></div>
+      <div class="hero-overlay"></div>
+      
+      <!-- Floating elements -->
+      <div class="floating-orb orb-1"></div>
+      <div class="floating-orb orb-2"></div>
+      <div class="floating-orb orb-3"></div>
+      
+      <!-- Mesh gradient overlay -->
+      <div class="mesh-overlay"></div>
+      
+      <div class="hero-content">
+        <div class="hero-inner">
+          <!-- User Info -->
+          <div class="user-section">
+            <div class="avatar-wrapper">
+              <!-- Avatar glow -->
+              <div class="avatar-glow"></div>
+              
+              <div class="avatar-container">
+                <div class="avatar">
+                  <span class="avatar-text">JD</span>
+                </div>
+                
+                <!-- Status indicator -->
+                <div class="status-indicator">
+                  <div class="status-dot"></div>
+                </div>
+                
+                <!-- Crown icon -->
+                <div class="crown-badge">
+                  👑
+                </div>
               </div>
             </div>
             
-            <!-- Amount -->
-            <div class="amount-row">
-              <span class="amount-label">Amount Due</span>
-              <span class="amount-value">${{ member.dueAmount }}</span>
+            <div class="user-info">
+              <h1 class="welcome-title">
+                Welcome back,
+                <span class="name-gradient">Board Member!</span>
+              </h1>
+              
+              <div class="user-meta">
+                <div class="role-badge">
+                  <span class="sparkle">✨</span>
+                  <span class="role-text">Administrator</span>
+                </div>
+                
+                <div class="divider"></div>
+                
+                <span class="org-name">MonacoUSA Association</span>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date & Quick Actions -->
+          <div class="actions-section">
+            <!-- Date Card -->
+            <div class="date-card">
+              <div class="date-header">
+                <span class="calendar-icon">📅</span>
+                <p class="date-label">Today</p>
+              </div>
+              <p class="date-text">
+                {{ currentDate }}
+              </p>
+              <div class="date-progress">
+                <div class="progress-fill"></div>
+              </div>
             </div>
             
-            <!-- Actions -->
-            <button class="btn-mark-paid">
-              Mark Paid
-            </button>
+            <!-- Quick Actions -->
+            <div class="quick-actions">
+              <button class="action-btn action-alerts">
+                <span class="action-icon">🔔</span>
+                <span class="action-text">Alerts</span>
+              </button>
+              
+              <button class="action-btn action-primary">
+                <span class="action-icon">✨</span>
+                <span class="action-text">Quick Add</span>
+              </button>
+            </div>
           </div>
         </div>
+        
+        <!-- Decorative line -->
+        <div class="hero-divider"></div>
+      </div>
+    </div>
 
-        <!-- View All Button -->
-        <div class="view-all-container">
-          <button class="btn-view-all">
-            View All Members →
+    <!-- Statistics Grid -->
+    <div class="stats-section">
+      <div class="stats-grid">
+        <div v-for="stat in stats" :key="stat.label" class="stat-card">
+          <div class="stat-icon">{{ stat.icon }}</div>
+          <div class="stat-content">
+            <p class="stat-label">{{ stat.label }}</p>
+            <p class="stat-value">
+              {{ stat.prefix }}{{ stat.value.toLocaleString() }}{{ stat.suffix }}
+            </p>
+            <p v-if="stat.change" class="stat-change">
+              {{ stat.change }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Dues Management Section -->
+    <div class="dues-section">
+      <h2 class="section-title">Member Dues Overview</h2>
+      
+      <div class="dues-grid">
+        <div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
+          <div class="member-header">
+            <div class="member-avatar">
+              <span>{{ member.initials }}</span>
+            </div>
+            <div class="member-details">
+              <h3 class="member-name">{{ member.name }}</h3>
+              <p class="member-id">Member #{{ member.id }}</p>
+            </div>
+          </div>
+          
+          <div class="dues-info">
+            <span class="dues-label">Amount Due</span>
+            <span class="dues-amount">${{ member.dueAmount }}</span>
+          </div>
+          
+          <button class="btn-pay">
+            Mark Paid
           </button>
         </div>
       </div>
+      
+      <div class="view-all-container">
+        <button class="btn-view-all">
+          View All Members →
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -78,141 +156,515 @@ export default {
 </script>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+
+// Current date
+const currentDate = computed(() => {
+  return new Date().toLocaleDateString('en-US', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+})
 
 // Statistics data
 const stats = ref([
   {
     icon: '👥',
-    label: 'Total Members',
+    label: 'TOTAL MEMBERS',
     value: 1234,
     change: '+12%',
   },
   {
     icon: '💰',
-    label: 'Dues Collected',
+    label: 'DUES COLLECTED',
     value: 45678,
     prefix: '$',
     change: '+8%',
   },
   {
     icon: '📅',
-    label: 'Upcoming Events',
+    label: 'UPCOMING EVENTS',
     value: 5,
     change: '2 this week',
   },
   {
     icon: '📈',
-    label: 'Growth Rate',
+    label: 'GROWTH RATE',
     value: 23,
     suffix: '%',
     change: '+3%',
   }
 ])
 
-// Sample dues members data - LIMITED TO 4
+// Sample dues members data
 const visibleDuesMembers = ref([
   {
     id: 1,
     name: 'John Smith',
+    initials: 'JS',
     dueAmount: 250,
   },
   {
     id: 2,
     name: 'Marie Dubois',
+    initials: 'MD',
     dueAmount: 250,
   },
   {
     id: 3,
     name: 'Alessandro Rossi',
+    initials: 'AR',
     dueAmount: 250,
   },
   {
     id: 4,
     name: 'Emma Wilson',
+    initials: 'EW',
     dueAmount: 250,
   }
 ])
 </script>
 
 <style scoped>
+/* Animations */
+@keyframes float {
+  0%, 100% { transform: translateY(0) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(10deg); }
+}
+
+@keyframes pulse-slow {
+  0%, 100% { opacity: 0.3; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.1); }
+}
+
+@keyframes bounce-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes gradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@keyframes slide-in {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Base Styles */
 .glass-dashboard {
   min-height: 100vh;
-  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
-  padding: 1.5rem;
+  background: #f8f9fa;
 }
 
-.dashboard-container {
-  max-width: 1280px;
-  margin: 0 auto;
+/* Hero Header */
+.hero-header {
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 2rem;
 }
 
-/* Welcome Section */
-.welcome-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
+.hero-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, #dc2626 0%, #991b1b 50%, #7f1d1d 100%);
+}
+
+.hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
+}
+
+/* Floating Orbs */
+.floating-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: float 8s ease-in-out infinite;
+}
+
+.orb-1 {
+  top: 40px;
+  right: 80px;
+  width: 256px;
+  height: 256px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.orb-2 {
+  bottom: 40px;
+  left: 80px;
+  width: 192px;
+  height: 192px;
+  background: rgba(239, 68, 68, 0.1);
+  animation: pulse-slow 4s ease-in-out infinite;
+}
+
+.orb-3 {
+  top: 50%;
+  left: 50%;
+  width: 128px;
+  height: 128px;
+  background: rgba(255, 255, 255, 0.1);
+  animation: bounce-slow 3s ease-in-out infinite;
+}
+
+.mesh-overlay {
+  position: absolute;
+  inset: 0;
+  opacity: 0.2;
+  background: radial-gradient(circle at 20% 50%, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
+  mix-blend-mode: overlay;
+}
+
+.hero-content {
+  position: relative;
+  padding: 3rem;
   border-radius: 1.5rem;
-  padding: 2rem;
-  text-align: center;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  margin-bottom: 1.5rem;
+}
+
+.hero-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+@media (min-width: 1024px) {
+  .hero-inner {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+/* User Section */
+.user-section {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  animation: slide-in 0.6s ease-out;
+}
+
+.avatar-wrapper {
+  position: relative;
+  group: true;
+}
+
+.avatar-glow {
+  position: absolute;
+  inset: -8px;
+  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(254,202,202,0.3));
+  border-radius: 50%;
+  filter: blur(12px);
+  transition: filter 0.3s;
+}
+
+.avatar-wrapper:hover .avatar-glow {
+  filter: blur(16px);
+}
+
+.avatar-container {
+  position: relative;
+}
+
+.avatar {
+  width: 80px;
+  height: 80px;
+  background: linear-gradient(135deg, #fff, #fef2f2);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 
+    0 0 0 4px rgba(255,255,255,0.4),
+    0 10px 40px rgba(0,0,0,0.2);
+  border: 2px solid rgba(255,255,255,0.2);
+  transition: transform 0.3s;
+}
+
+.avatar:hover {
+  transform: scale(1.1);
+}
+
+.avatar-text {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #dc2626;
+}
+
+.status-indicator {
+  position: absolute;
+  bottom: -8px;
+  right: -8px;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #10b981, #059669);
+  border-radius: 50%;
+  border: 4px solid white;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background: white;
+  border-radius: 50%;
+  animation: pulse-slow 2s infinite;
+}
+
+.crown-badge {
+  position: absolute;
+  top: -12px;
+  right: -4px;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #fbbf24, #f59e0b);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  animation: bounce-slow 3s infinite;
+}
+
+/* User Info */
+.user-info {
+  flex: 1;
 }
 
 .welcome-title {
-  font-size: 1.875rem;
-  font-weight: bold;
-  color: #1f2937;
+  font-size: 3rem;
+  font-weight: 900;
+  color: white;
   margin-bottom: 0.5rem;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
 }
 
-.welcome-subtitle {
-  color: #4b5563;
+.name-gradient {
+  display: block;
+  background: linear-gradient(90deg, #fff, #fee2e2, #fff);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradient 3s ease infinite;
+}
+
+.user-meta {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.role-badge {
+  background: rgba(255,255,255,0.2);
+  backdrop-filter: blur(10px);
+  border-radius: 9999px;
+  padding: 0.75rem 1.5rem;
+  border: 1px solid rgba(255,255,255,0.3);
+  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.sparkle {
+  font-size: 1.25rem;
+}
+
+.role-text {
+  color: white;
+  font-weight: bold;
+}
+
+.divider {
+  height: 1.5rem;
+  width: 1px;
+  background: rgba(255,255,255,0.3);
+}
+
+.org-name {
+  color: #fecaca;
+  font-weight: 500;
+}
+
+/* Actions Section */
+.actions-section {
+  animation: slide-up 0.6s ease-out;
+  animation-delay: 200ms;
+  animation-fill-mode: both;
+}
+
+.date-card {
+  background: rgba(255,255,255,0.1);
+  backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  border: 1px solid rgba(255,255,255,0.2);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+  transition: background 0.3s;
+  margin-bottom: 1rem;
+}
+
+.date-card:hover {
+  background: rgba(255,255,255,0.15);
+}
+
+.date-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.calendar-icon {
+  font-size: 1.5rem;
+}
+
+.date-label {
+  color: #fecaca;
+  font-weight: 600;
+}
+
+.date-text {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: white;
+  line-height: 1.2;
+}
+
+.date-progress {
+  margin-top: 0.75rem;
+  height: 4px;
+  background: rgba(255,255,255,0.2);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  width: 75%;
+  background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
+  border-radius: 9999px;
+  animation: pulse-slow 2s infinite;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.action-btn {
+  flex: 1;
+  padding: 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(255,255,255,0.2);
+  transition: all 0.3s;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.action-alerts {
+  background: rgba(255,255,255,0.1);
+  backdrop-filter: blur(10px);
+  color: white;
+}
+
+.action-alerts:hover {
+  background: rgba(255,255,255,0.2);
+  transform: scale(1.05);
+}
+
+.action-primary {
+  background: white;
+  color: #dc2626;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+}
+
+.action-primary:hover {
+  background: #fee2e2;
+  transform: scale(1.05);
+}
+
+.action-icon {
+  font-size: 1.25rem;
+}
+
+.action-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.hero-divider {
+  margin-top: 2rem;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+}
+
+/* Stats Section */
+.stats-section {
+  padding: 0 1.5rem;
+  margin-bottom: 2rem;
 }
 
-/* Statistics Grid */
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1.5rem;
-  margin-bottom: 1.5rem;
 }
 
 .stat-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 1rem;
+  background: white;
+  border-radius: 1.5rem;
   padding: 1.5rem;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  transition: all 0.3s ease;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+  border: 1px solid rgba(0,0,0,0.05);
+  transition: all 0.3s;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
 }
 
 .stat-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
-}
-
-.stat-icon-wrapper {
-  margin-bottom: 1rem;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
 }
 
 .stat-icon {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 0.75rem;
-  background: rgba(239, 68, 68, 0.1);
+  font-size: 2rem;
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.25rem;
+  background: linear-gradient(135deg, #fee2e2, #fecaca);
+  border-radius: 0.75rem;
+}
+
+.stat-content {
+  flex: 1;
 }
 
 .stat-label {
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  font-weight: 600;
   color: #6b7280;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -221,73 +673,78 @@ const visibleDuesMembers = ref([
 
 .stat-value {
   font-size: 1.875rem;
-  font-weight: bold;
+  font-weight: 900;
   color: #1f2937;
+  line-height: 1;
+  margin-bottom: 0.5rem;
 }
 
 .stat-change {
   font-size: 0.875rem;
   color: #10b981;
-  margin-top: 0.5rem;
+  font-weight: 500;
 }
 
 /* Dues Section */
 .dues-section {
-  margin-top: 1.5rem;
+  padding: 0 1.5rem;
+  margin-bottom: 2rem;
 }
 
-.dues-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-.dues-title {
-  font-size: 1.25rem;
-  font-weight: 600;
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
   color: #1f2937;
+  margin-bottom: 1.5rem;
 }
 
 .dues-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.dues-card {
+  background: white;
+  border-radius: 1.5rem;
+  padding: 1.5rem;
+  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+  border: 1px solid rgba(0,0,0,0.05);
+  transition: all 0.3s;
+}
+
+.dues-card:hover {
+  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
+}
+
+.member-header {
+  display: flex;
+  align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
 }
 
-.dues-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-radius: 1rem;
-  padding: 1.25rem;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  transition: all 0.3s ease;
-}
-
-.dues-card:hover {
-  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
-}
-
-.member-info {
+.member-avatar {
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
+  border-radius: 50%;
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
+  justify-content: center;
+  font-weight: 600;
+  color: #6b7280;
 }
 
-.member-avatar {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 50%;
-  background: #e5e7eb;
+.member-details {
+  flex: 1;
 }
 
 .member-name {
   font-weight: 600;
   color: #1f2937;
+  margin-bottom: 0.25rem;
 }
 
 .member-id {
@@ -295,39 +752,44 @@ const visibleDuesMembers = ref([
   color: #6b7280;
 }
 
-.amount-row {
+.dues-info {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.75rem;
+  align-items: center;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: #f9fafb;
+  border-radius: 0.75rem;
 }
 
-.amount-label {
+.dues-label {
   font-size: 0.875rem;
-  color: #4b5563;
+  color: #6b7280;
 }
 
-.amount-value {
-  font-size: 1.125rem;
-  font-weight: bold;
+.dues-amount {
+  font-size: 1.25rem;
+  font-weight: 700;
   color: #dc2626;
 }
 
-.btn-mark-paid {
+.btn-pay {
   width: 100%;
-  padding: 0.5rem 0.75rem;
-  border-radius: 0.5rem;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  padding: 0.75rem;
+  background: linear-gradient(135deg, #fee2e2, #fecaca);
   color: #dc2626;
-  font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: 600;
+  border: 1px solid #fecaca;
+  border-radius: 0.75rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s;
 }
 
-.btn-mark-paid:hover {
-  background: rgba(254, 226, 226, 0.5);
+.btn-pay:hover {
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
 }
 
 .view-all-container {
@@ -335,19 +797,22 @@ const visibleDuesMembers = ref([
 }
 
 .btn-view-all {
-  padding: 0.625rem 1.5rem;
-  border-radius: 0.75rem;
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  padding: 0.875rem 2rem;
+  background: white;
   color: #dc2626;
-  font-weight: 500;
+  font-weight: 600;
+  border: 2px solid #dc2626;
+  border-radius: 0.75rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .btn-view-all:hover {
-  background: rgba(254, 226, 226, 0.5);
+  background: #dc2626;
+  color: white;
+  transform: translateX(4px);
 }
 </style>
\ No newline at end of file