Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: unify stats strip layout and enhance card styling for improved visual consistency

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-22 23:31:38 -05:00
parent da34f7058f
commit eeddfda612
1 changed files with 28 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
themes/lucentui/views/home.blade.php
View File

@@ -119,55 +119,45 @@
</div> </div>
</section> </section>
<!-- Stats Strip - Modern Grid Cards --> <!-- Stats Strip - Unified Container -->
<section class="py-16 relative"> <section class="py-12 relative">
<div class="container mx-auto px-4"> <div class="container mx-auto px-4">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"> <div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-10">
<!-- Uptime Card --> <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-4">
<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"> <!-- Uptime -->
<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="text-center lg:border-r lg:border-neutral/20 last:border-r-0">
<div class="relative z-10"> <div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
<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-5 text-primary" />
<x-ri-shield-check-fill class="size-6 text-success" />
</div> </div>
<div class="text-4xl md:text-5xl font-black text-success mb-1">99.9%</div> <div class="text-3xl md:text-4xl font-black text-color-base mb-1">99.9%</div>
<div class="text-sm text-color-muted font-medium">{{ theme('stats_uptime_title', 'Uptime Goal') }}</div> <div class="text-sm text-color-muted">{{ theme('stats_uptime_title', 'Uptime Goal') }}</div>
</div> </div>
</div>
<!-- Support Card --> <!-- Support -->
<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="text-center lg:border-r lg:border-neutral/20 last:border-r-0">
<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="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
<div class="relative z-10"> <x-ri-customer-service-2-fill class="size-5 text-primary" />
<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>
<div class="text-4xl md:text-5xl font-black text-primary mb-1">24/7</div> <div class="text-3xl md:text-4xl font-black text-color-base mb-1">24/7</div>
<div class="text-sm text-color-muted font-medium">{{ theme('stats_support_title', 'Expert Support') }}</div> <div class="text-sm text-color-muted">{{ theme('stats_support_title', 'Expert Support') }}</div>
</div> </div>
</div>
<!-- Users Card --> <!-- Users -->
<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="text-center lg:border-r lg:border-neutral/20 last:border-r-0">
<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="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
<div class="relative z-10"> <x-ri-group-fill class="size-5 text-primary" />
<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>
<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-3xl md:text-4xl font-black text-color-base 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 class="text-sm text-color-muted">{{ theme('stats_users_title', 'Registered Users') }}</div>
</div> </div>
</div>
<!-- Servers Card --> <!-- Servers -->
<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="text-center">
<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="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
<div class="relative z-10"> <x-ri-server-fill class="size-5 text-primary" />
<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>
<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-3xl md:text-4xl font-black text-color-base 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 class="text-sm text-color-muted">{{ theme('stats_servers_title', 'Servers Deployed') }}</div>
</div> </div>
</div> </div>
</div> </div>