From 408f83a4c509236afc25e6933052ad97b7411d05 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 22 Dec 2025 19:08:44 -0500
Subject: [PATCH] feat: enhance stats strip layout with modern grid design and
 improved card styles

---
 themes/lucentui/views/home.blade.php | 76 +++++++++++++++-------------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index fe40ff934..ae029c9a4 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -119,47 +119,55 @@
         </div>
     </section>
 
-    <!-- Stats Strip - Horizontal Flow -->
-    <section class="py-8 border-y border-neutral/20 bg-background-secondary/30 backdrop-blur-sm">
+    <!-- Stats Strip - Modern Grid Cards -->
+    <section class="py-16 relative">
         <div class="container mx-auto px-4">
-            <div class="flex flex-wrap items-center justify-center gap-8 md:gap-16 lg:gap-24">
-                <div class="flex items-center gap-4 group">
-                    <div class="w-14 h-14 rounded-2xl bg-success/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                        <x-ri-time-line class="size-7 text-success" />
-                    </div>
-                    <div>
-                        <div class="text-3xl font-black text-success">99.9%</div>
-                        <div class="text-sm text-color-muted">{{ theme('stats_uptime_title', 'Uptime SLA') }}</div>
+            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
+                <!-- Uptime Card -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-success/10 to-background-secondary border border-success/20 hover:border-success/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-success/10">
+                    <div class="absolute -top-8 -right-8 w-24 h-24 bg-success/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                            <x-ri-shield-check-fill class="size-6 text-success" />
+                        </div>
+                        <div class="text-4xl md:text-5xl font-black text-success mb-1">99.9%</div>
+                        <div class="text-sm text-color-muted font-medium">{{ theme('stats_uptime_title', 'Uptime Goal') }}</div>
                     </div>
                 </div>
-                <div class="hidden md:block w-px h-12 bg-neutral/30"></div>
-                <div class="flex items-center gap-4 group">
-                    <div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                        <x-ri-customer-service-2-line class="size-7 text-primary" />
-                    </div>
-                    <div>
-                        <div class="text-3xl font-black text-primary">24/7</div>
-                        <div class="text-sm text-color-muted">{{ theme('stats_support_title', 'Expert Support') }}</div>
+
+                <!-- Support Card -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-primary/10 to-background-secondary border border-primary/20 hover:border-primary/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-primary/10">
+                    <div class="absolute -top-8 -right-8 w-24 h-24 bg-primary/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                            <x-ri-customer-service-2-fill class="size-6 text-primary" />
+                        </div>
+                        <div class="text-4xl md:text-5xl font-black text-primary mb-1">24/7</div>
+                        <div class="text-sm text-color-muted font-medium">{{ theme('stats_support_title', 'Expert Support') }}</div>
                     </div>
                 </div>
-                <div class="hidden md:block w-px h-12 bg-neutral/30"></div>
-                <div class="flex items-center gap-4 group">
-                    <div class="w-14 h-14 rounded-2xl bg-purple-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                        <x-ri-group-line class="size-7 text-purple-500" />
-                    </div>
-                    <div>
-                        <div class="text-3xl font-black text-purple-500">{{ number_format(\App\Models\User::count()+1439) }}+</div>
-                        <div class="text-sm text-color-muted">{{ theme('stats_users_title', 'Active Users') }}</div>
+
+                <!-- Users Card -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/10 to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/10">
+                    <div class="absolute -top-8 -right-8 w-24 h-24 bg-purple-500/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                            <x-ri-group-fill class="size-6 text-purple-500" />
+                        </div>
+                        <div class="text-4xl md:text-5xl font-black text-purple-500 mb-1">{{ number_format(\App\Models\User::count()+1439) }}+</div>
+                        <div class="text-sm text-color-muted font-medium">{{ theme('stats_users_title', 'Registered Users') }}</div>
                     </div>
                 </div>
-                <div class="hidden md:block w-px h-12 bg-neutral/30"></div>
-                <div class="flex items-center gap-4 group">
-                    <div class="w-14 h-14 rounded-2xl bg-orange-500/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                        <x-ri-server-line class="size-7 text-orange-500" />
-                    </div>
-                    <div>
-                        <div class="text-3xl font-black text-orange-500">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
-                        <div class="text-sm text-color-muted">{{ theme('stats_servers_title', 'VPS Deployed') }}</div>
+
+                <!-- Servers Card -->
+                <div class="group relative overflow-hidden bg-gradient-to-br from-orange-500/10 to-background-secondary border border-orange-500/20 hover:border-orange-500/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-orange-500/10">
+                    <div class="absolute -top-8 -right-8 w-24 h-24 bg-orange-500/10 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-500"></div>
+                    <div class="relative z-10">
+                        <div class="w-12 h-12 rounded-xl bg-orange-500/20 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                            <x-ri-server-fill class="size-6 text-orange-500" />
+                        </div>
+                        <div class="text-4xl md:text-5xl font-black text-orange-500 mb-1">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
+                        <div class="text-sm text-color-muted font-medium">{{ theme('stats_servers_title', 'Virtual Servers Deployed') }}</div>
                     </div>
                 </div>
             </div>