feat: remove stats strip section and reorganize control panel features layout for improved clarity and user experience
This commit is contained in:
@@ -119,51 +119,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Stats Strip - Unified Container -->
|
|
||||||
<section class="py-12 relative">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-10">
|
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-4">
|
|
||||||
<!-- Uptime -->
|
|
||||||
<div class="text-center lg:border-r lg:border-neutral/20 last:border-r-0">
|
|
||||||
<div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
|
|
||||||
<x-ri-shield-check-fill class="size-5 text-primary" />
|
|
||||||
</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">{{ theme('stats_uptime_title', 'Uptime Goal') }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Support -->
|
|
||||||
<div class="text-center lg:border-r lg:border-neutral/20 last:border-r-0">
|
|
||||||
<div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
|
|
||||||
<x-ri-customer-service-2-fill class="size-5 text-primary" />
|
|
||||||
</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">{{ theme('stats_support_title', 'Expert Support') }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Users -->
|
|
||||||
<div class="text-center lg:border-r lg:border-neutral/20 last:border-r-0">
|
|
||||||
<div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
|
|
||||||
<x-ri-group-fill class="size-5 text-primary" />
|
|
||||||
</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">{{ theme('stats_users_title', 'Registered Users') }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Servers -->
|
|
||||||
<div class="text-center">
|
|
||||||
<div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 mb-3">
|
|
||||||
<x-ri-server-fill class="size-5 text-primary" />
|
|
||||||
</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">{{ theme('stats_servers_title', 'Servers Deployed') }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Services Section - Card Carousel Style -->
|
<!-- Services Section - Card Carousel Style -->
|
||||||
<section id="services" class="py-24 md:py-32">
|
<section id="services" class="py-24 md:py-32">
|
||||||
<div class="container mx-auto px-4">
|
<div class="container mx-auto px-4">
|
||||||
@@ -357,8 +312,8 @@
|
|||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Bento Grid - Row 2: 4 Medium Cards -->
|
<!-- Bento Grid - Row 2: Firewall & Backups -->
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||||
<!-- Firewall Manager -->
|
<!-- Firewall Manager -->
|
||||||
<div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
|
<div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
|
||||||
<div class="relative z-10 h-full flex flex-col">
|
<div class="relative z-10 h-full flex flex-col">
|
||||||
@@ -390,7 +345,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bento Grid - Row 3: Storage & Power -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||||
<!-- Storage Manager -->
|
<!-- Storage Manager -->
|
||||||
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
|
<div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
|
||||||
<div class="relative z-10 h-full flex flex-col">
|
<div class="relative z-10 h-full flex flex-col">
|
||||||
@@ -425,49 +383,52 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bento Grid - Row 3: Quick Features Strip -->
|
<!-- Bento Grid - Row 4: OS Reinstall & Task History -->
|
||||||
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||||
<!-- OS Reinstall -->
|
<!-- OS Reinstall -->
|
||||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-primary/30 rounded-2xl transition-all duration-300">
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-primary/30 rounded-2xl transition-all duration-300">
|
||||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
<div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||||
<x-ri-refresh-line class="size-5 text-primary" />
|
<x-ri-refresh-line class="size-6 text-primary" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-semibold text-color-base text-sm">OS Reinstall</h4>
|
<h4 class="font-semibold text-color-base">OS Reinstall</h4>
|
||||||
<p class="text-xs text-color-muted">50+ templates</p>
|
<p class="text-sm text-color-muted">50+ templates</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Task History -->
|
<!-- Task History -->
|
||||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-secondary/30 rounded-2xl transition-all duration-300">
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-secondary/30 rounded-2xl transition-all duration-300">
|
||||||
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
<div class="w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||||
<x-ri-history-line class="size-5 text-secondary" />
|
<x-ri-history-line class="size-6 text-secondary" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-semibold text-color-base text-sm">Task History</h4>
|
<h4 class="font-semibold text-color-base">Task History</h4>
|
||||||
<p class="text-xs text-color-muted">Full audit logs</p>
|
<p class="text-sm text-color-muted">Full audit logs</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bento Grid - Row 5: Network & ISO Mount -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||||
<!-- Network Tools -->
|
<!-- Network Tools -->
|
||||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-success/30 rounded-2xl transition-all duration-300">
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-success/30 rounded-2xl transition-all duration-300">
|
||||||
<div class="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
<div class="w-12 h-12 rounded-xl bg-success/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||||
<x-ri-global-line class="size-5 text-success" />
|
<x-ri-global-line class="size-6 text-success" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-semibold text-color-base text-sm">Network</h4>
|
<h4 class="font-semibold text-color-base">Network</h4>
|
||||||
<p class="text-xs text-color-muted">IPv4/IPv6 & rDNS</p>
|
<p class="text-sm text-color-muted">IPv4/IPv6 & rDNS</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ISO Mount -->
|
<!-- ISO Mount -->
|
||||||
<div class="group flex items-center gap-4 p-4 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-info/30 rounded-2xl transition-all duration-300">
|
<div class="group flex items-center gap-4 p-5 bg-background/30 hover:bg-background/50 border border-neutral/10 hover:border-info/30 rounded-2xl transition-all duration-300">
|
||||||
<div class="w-10 h-10 rounded-xl bg-info/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
<div class="w-12 h-12 rounded-xl bg-info/10 flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||||
<x-ri-disc-line class="size-5 text-info" />
|
<x-ri-disc-line class="size-6 text-info" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 class="font-semibold text-color-base text-sm">ISO Mount</h4>
|
<h4 class="font-semibold text-color-base">ISO Mount</h4>
|
||||||
<p class="text-xs text-color-muted">Custom images</p>
|
<p class="text-sm text-color-muted">Custom images</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user