From d580697d874e0e0aad8e106bcde0fd50854e4dfd Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 22 Dec 2025 23:50:34 -0500
Subject: [PATCH] feat: enhance infrastructure features section with improved
 layout and card presentation for better user engagement

---
 themes/lucentui/views/home.blade.php | 130 +++++++++++++++++----------
 1 file changed, 81 insertions(+), 49 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index 67ff83826..fdfaec687 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -475,66 +475,98 @@
         </div>
     </section>
 
-    <!-- Infrastructure Features - Alternating Layout -->
+    <!-- Infrastructure Features -->
     <section id="features" class="py-24 md:py-32">
         <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-12">
-                <div class="text-center max-w-2xl mx-auto mb-14">
-                    <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
-                    <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
-                        {{ theme('features_title', 'Enterprise Infrastructure') }}
-                    </h2>
-                    <p class="text-base text-color-muted leading-relaxed">
-                        {{ theme('features_subtitle', 'Built on carrier-grade hardware with redundant systems, delivering the reliability your business demands') }}
-                    </p>
-                </div>
-
-            <!-- Feature Rows - Alternating -->
-            <div class="space-y-8">
-                <!-- Row 1 -->
-                <div class="flex flex-col md:flex-row gap-6">
-                    <div class="md:flex-[2] group p-8 bg-gradient-to-br from-primary/5 to-background-secondary border border-primary/20 hover:border-primary/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
-                        <div class="flex items-start gap-6">
-                            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-primary/70 flex items-center justify-center shadow-lg flex-shrink-0">
-                                <x-ri-shield-check-line class="size-8 text-white" />
-                            </div>
-                            <div>
-                                <h3 class="text-2xl font-bold text-color-base mb-3">{{ theme('feature_1_title', 'DDoS Protection') }}</h3>
-                                <p class="text-color-muted leading-relaxed">{{ theme('feature_1_desc', 'Enterprise-grade DDoS mitigation with automatic detection and filtering. Multi-layer protection keeps your services online during attacks.') }}</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="md:flex-1 group p-8 bg-gradient-to-br from-secondary/5 to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
-                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-secondary to-secondary/70 flex items-center justify-center shadow-lg mb-4">
-                            <x-ri-cpu-line class="size-7 text-white" />
-                        </div>
-                        <h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_2_title', 'Premium Hardware') }}</h3>
-                        <p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_2_desc', 'Latest-generation AMD EPYC and Intel Xeon processors paired with NVMe SSD storage.') }}</p>
+                <!-- Section Header -->
+                <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-10">
+                    <div class="max-w-2xl">
+                        <p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">Infrastructure</p>
+                        <h2 class="text-3xl md:text-4xl font-bold text-color-base mb-4">
+                            {{ theme('features_title', 'Enterprise Infrastructure') }}
+                        </h2>
+                        <p class="text-base text-color-muted leading-relaxed">
+                            {{ theme('features_subtitle', 'We\'ve built a platform that is advanced enough to compete with the large players of the industry at a fraction of the cost.') }}
+                        </p>
                     </div>
                 </div>
 
-                <!-- Row 2 -->
-                <div class="flex flex-col md:flex-row gap-6">
-                    <div class="md:flex-1 group p-8 bg-gradient-to-br from-success/5 to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
-                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg mb-4">
-                            <x-ri-flashlight-line class="size-7 text-white" />
+                <!-- 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">
+                    <!-- NVME & RAM Cached Storage -->
+                    <div class="flex-shrink-0 w-72 lg:w-auto snap-center 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" />
+                            </div>
+                            <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
+                                NVMe & RAM Cached Storage
+                            </h3>
+                            <p class="text-color-muted text-sm leading-relaxed">
+                                Each VPS caches RAM for performance beyond SSDs, while dedicated NVMe drives provide consistent IOPS for storage.
+                            </p>
                         </div>
-                        <h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_3_title', 'Instant Setup') }}</h3>
-                        <p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_3_desc', 'Deploy your VPS in under 60 seconds with automated provisioning.') }}</p>
                     </div>
-                    <div class="md:flex-1 group p-8 bg-gradient-to-br from-warning/5 to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
-                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg mb-4">
-                            <x-ri-admin-line class="size-7 text-white" />
+
+                    <!-- IPv6 Public Address -->
+                    <div class="flex-shrink-0 w-72 lg:w-auto snap-center 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" />
+                            </div>
+                            <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-secondary transition-colors">
+                                IPv6 Public Address
+                            </h3>
+                            <p class="text-color-muted text-sm leading-relaxed">
+                                Each VPS receives a static IPv6 address for public services, plus a secondary RA-based MAC address to ensure connectivity.
+                            </p>
                         </div>
-                        <h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_4_title', 'Full Root Access') }}</h3>
-                        <p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_4_desc', 'Complete administrative control over your server.') }}</p>
                     </div>
-                    <div class="md:flex-1 group p-8 bg-gradient-to-br from-info/5 to-background-secondary border border-info/20 hover:border-info/40 rounded-3xl transition-all duration-500 hover:shadow-xl">
-                        <div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-info to-info/70 flex items-center justify-center shadow-lg mb-4">
-                            <x-ri-global-line class="size-7 text-white" />
+
+                    <!-- Xterm.js/NoVNC Access -->
+                    <div class="flex-shrink-0 w-72 lg:w-auto snap-center 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" />
+                            </div>
+                            <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-success transition-colors">
+                                Xterm.js/NoVNC Access
+                            </h3>
+                            <p class="text-color-muted text-sm leading-relaxed">
+                                Each VPS comes with Xterm.js and NoVNC via our server manager for easy access and control, anytime.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Ceph Distributed Storage -->
+                    <div class="flex-shrink-0 w-72 lg:w-auto snap-center 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" />
+                            </div>
+                            <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-warning transition-colors">
+                                Ceph Storage Cluster
+                            </h3>
+                            <p class="text-color-muted text-sm leading-relaxed">
+                                Our redundant data distribution delivers IOPS beyond typical caching, fetching only unique data for a fast, smooth, and secure experience.
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- BGP IPv6 Networking -->
+                    <div class="flex-shrink-0 w-72 lg:w-auto snap-center 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" />
+                            </div>
+                            <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-info transition-colors">
+                                BGP IPv6 Networking
+                            </h3>
+                            <p class="text-color-muted text-sm leading-relaxed">
+                                We own our network, giving VPSs priority, a unique IPv6 address, and rotating IPv4 NAT for seamless inbound access.
+                            </p>
                         </div>
-                        <h3 class="text-xl font-bold text-color-base mb-2">{{ theme('feature_5_title', 'Global Network') }}</h3>
-                        <p class="text-color-muted text-sm leading-relaxed">{{ theme('feature_5_desc', 'Multiple datacenter locations with premium transit providers.') }}</p>
                     </div>
                 </div>
             </div>