From d4fe4adb54dab9aba32d7ee87d7193a15f59514e Mon Sep 17 00:00:00 2001
From: abhiramtx <7253115-abhiramtx@users.noreply.replit.com>
Date: Sat, 8 Nov 2025 23:22:16 +0000
Subject: [PATCH] Update statistics cards with icons and remove hover effects

Refactors the `.stats-card` CSS to remove hover effects and align text left. Introduces `.stats-icon` class for icon styling. Updates `home.html` to include Feather icons for each stat card.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: acd03652-4b33-4e9b-8d09-dfa3dd90b3e5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/Ue2suQm
---
 static/css/styles.css | 38 ++++++++++++++++++++++++++------------
 templates/home.html   |  4 ++++
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index d5c7320..399c4f3 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -470,36 +470,50 @@ hr {
 }
 
 .stats-card {
-    text-align: center;
-    padding: 32px;
     background: rgba(26, 26, 26, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 16px;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 32px;
+    text-align: left;
 }
 
-.stats-card:hover {
-    background: rgba(26, 26, 26, 0.6);
-    transform: translateY(-4px);
-    box-shadow: 0 12px 24px rgba(255, 255, 255, 0.05);
+.stats-icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+    color: var(--white);
+}
+
+.stats-icon svg {
+    width: 32px;
+    height: 32px;
+    stroke-width: 2;
 }
 
 .stats-card-header {
     font-family: var(--font-display);
-    font-size: clamp(40px, 5vw, 64px);
+    font-size: clamp(40px, 5vw, 56px);
     color: var(--accent);
-    margin: 0;
+    margin: 0 0 8px 0;
     font-weight: 700;
+    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .stats-card-info {
-    margin: 16px 0 0;
+    margin: 0;
     font-family: var(--font-body);
-    font-size: clamp(14px, 1.5vw, 16px);
-    color: var(--gray-300);
+    font-size: 14px;
+    color: var(--gray-400);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     font-weight: 500;
+    line-height: 1.5;
 }
 
 .stats-button {
diff --git a/templates/home.html b/templates/home.html
index 9d1329d..c216388 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -43,8 +43,12 @@
                 <hr>
 
                 <div class="stats-cards">
+                    {% set icons = ['award', 'target', 'users', 'calendar'] %}
                     {% for stat in stats %}
                     <div class="stats-card">
+                        <div class="stats-icon">
+                            <i data-feather="{{ icons[loop.index0] }}"></i>
+                        </div>
                         <h1 class="stats-card-header">{{ stat.value }}</h1>
                         <p class="stats-card-info">{{ stat.label }}</p>
                     </div>