feat: refactor infrastructure cards layout to grid for improved responsiveness and visual consistency

This commit is contained in:
2025-12-22 23:53:15 -05:00
parent d580697d87
commit 11a871c100

View File

@@ -492,10 +492,10 @@
</div>
</div>
<!-- Infrastructure Cards - Horizontal Scroll on Mobile -->
<div class="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory lg:grid lg:grid-cols-5 lg:overflow-visible scrollbar-hide">
<!-- Infrastructure Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- NVME & RAM Cached Storage -->
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
<div class="group">
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-primary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<x-ri-hard-drive-3-line class="size-7 text-primary" />
@@ -510,7 +510,7 @@
</div>
<!-- IPv6 Public Address -->
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
<div class="group">
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-secondary/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-secondary/20 to-secondary/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<x-ri-global-line class="size-7 text-secondary" />
@@ -525,7 +525,7 @@
</div>
<!-- Xterm.js/NoVNC Access -->
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
<div class="group">
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-success/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success/20 to-success/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<x-ri-terminal-box-line class="size-7 text-success" />
@@ -540,7 +540,7 @@
</div>
<!-- Ceph Distributed Storage -->
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
<div class="group">
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-warning/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-warning/20 to-warning/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<x-ri-database-2-line class="size-7 text-warning" />
@@ -555,7 +555,7 @@
</div>
<!-- BGP IPv6 Networking -->
<div class="flex-shrink-0 w-72 lg:w-auto snap-center group">
<div class="group">
<div class="h-full bg-background-secondary/80 hover:bg-background-secondary border border-neutral/30 hover:border-info/40 rounded-3xl p-8 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info/20 to-info/5 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<x-ri-route-line class="size-7 text-info" />