From 544c27690453c5b13ce74549477e521433d6b8db Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 02:25:11 -0500
Subject: [PATCH] feat: enhance feature, node, and stat cards with new gradient
 backgrounds, improved hover effects, and updated transitions for a more
 dynamic user experience

---
 themes/default/views/home.blade.php | 163 +++++++++++++++++++++-------
 1 file changed, 125 insertions(+), 38 deletions(-)

diff --git a/themes/default/views/home.blade.php b/themes/default/views/home.blade.php
index f7ef4a28d..64b892cde 100644
--- a/themes/default/views/home.blade.php
+++ b/themes/default/views/home.blade.php
@@ -640,13 +640,14 @@
 }
 
 .feature-card {
-    background: var(--color-bg-secondary);
+    background: linear-gradient(145deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-xl);
     padding: var(--spacing-xl);
-    transition: var(--transition-smooth);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
 }
 
 .feature-card::before {
@@ -655,46 +656,74 @@
     top: 0;
     left: 0;
     right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
-    transform: translateX(-100%);
-    transition: var(--transition-smooth);
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%, rgba(139, 92, 246, 0.03) 100%);
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.feature-card::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(135deg, var(--color-primary), #8b5cf6, var(--color-info));
+    border-radius: var(--radius-xl);
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.4s ease;
 }
 
 .feature-card:hover {
-    transform: translateY(-6px);
-    box-shadow: var(--shadow-2xl);
-    border-color: var(--color-primary-light);
-    background: var(--color-bg-base);
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 
+        0 20px 40px rgba(59, 130, 246, 0.15),
+        0 8px 16px rgba(0, 0, 0, 0.08);
+    border-color: transparent;
 }
 
 .feature-card:hover::before {
-    transform: translateX(0);
+    opacity: 1;
+}
+
+.feature-card:hover::after {
+    opacity: 0.8;
 }
 
 .feature-icon {
-    width: 56px;
-    height: 56px;
-    border-radius: var(--radius-md);
+    width: 64px;
+    height: 64px;
+    border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: var(--spacing-md);
     font-size: 1.75rem;
     position: relative;
-    transition: var(--transition-smooth);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-secondary));
+    box-shadow: 
+        inset 0 1px 0 rgba(255, 255, 255, 0.1),
+        0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .feature-card:hover .feature-icon {
-    transform: scale(1.1) rotate(5deg);
+    transform: scale(1.15) rotate(-5deg);
+    box-shadow: 
+        0 8px 24px rgba(59, 130, 246, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 .feature-icon svg {
-    transition: var(--transition-smooth);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 
 .feature-card:hover .feature-icon svg {
-    transform: scale(1.1);
+    transform: scale(1.2);
+    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
 }
 
 .feature-icon-primary { background: rgba(59, 130, 246, 0.1); color: var(--color-primary); }
@@ -730,15 +759,48 @@
 }
 
 .node-card {
-    background: var(--color-bg-base);
+    background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-xl);
     padding: var(--spacing-lg);
-    transition: all 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.node-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, var(--color-success), #34d399, var(--color-info));
+    opacity: 0.8;
+}
+
+.node-card::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 0;
+    right: 0;
+    height: 40px;
+    background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
+    pointer-events: none;
 }
 
 .node-card:hover {
-    box-shadow: var(--shadow-lg);
+    transform: translateY(-4px);
+    box-shadow: 
+        0 20px 40px rgba(16, 185, 129, 0.12),
+        0 8px 16px rgba(0, 0, 0, 0.06);
+    border-color: rgba(16, 185, 129, 0.3);
+}
+
+.node-card:hover::before {
+    opacity: 1;
+    background: linear-gradient(90deg, var(--color-success), var(--color-primary), #8b5cf6);
 }
 
 .node-header {
@@ -982,36 +1044,61 @@
 }
 
 .stat-card {
-    background: var(--color-bg-secondary);
+    background: linear-gradient(135deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 100%);
     border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: var(--spacing-xl);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-xl) var(--spacing-lg);
     text-align: center;
-    transition: var(--transition-smooth);
+    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
 }
 
 .stat-card::before {
     content: '';
     position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
-    transform: scale(0);
-    transition: transform 0.6s ease;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(6, 182, 212, 0.03) 100%);
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+.stat-card::after {
+    content: '';
+    position: absolute;
+    top: -100%;
+    left: -100%;
+    width: 300%;
+    height: 300%;
+    background: conic-gradient(from 0deg, transparent 0deg, rgba(59, 130, 246, 0.1) 90deg, transparent 180deg);
+    animation: stat-rotate 8s linear infinite;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+@keyframes stat-rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 }
 
 .stat-card:hover::before {
-    transform: scale(1);
+    opacity: 1;
+}
+
+.stat-card:hover::after {
+    opacity: 0.5;
 }
 
 .stat-card:hover {
-    transform: translateY(-8px) scale(1.02);
-    box-shadow: var(--shadow-2xl);
-    border-color: var(--color-primary-light);
+    transform: translateY(-12px) scale(1.03);
+    box-shadow: 
+        0 30px 60px rgba(59, 130, 246, 0.15),
+        0 15px 30px rgba(0, 0, 0, 0.08);
+    border-color: var(--color-primary);
 }
 
 .stat-icon-wrapper {