From c908ae3ff5c775824c53c8dd028ab5eb2efde9f5 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Mon, 22 Dec 2025 19:12:27 -0500
Subject: [PATCH] feat: redesign additional features section with modern grid
 layout and enhanced content

---
 themes/lucentui/views/home.blade.php | 286 ++++++++++++++++++---------
 1 file changed, 189 insertions(+), 97 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index ae029c9a4..199d3b7c7 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -285,50 +285,53 @@
                     </div>
                 </div>
 
-                <!-- Additional Features Strip -->
-                <div class="lg:col-span-12 grid grid-cols-2 md:grid-cols-4 gap-4">
-                    <div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-primary/30 rounded-2xl transition-all duration-300">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                                <x-ri-refresh-line class="size-5 text-primary" />
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-color-base text-sm">OS Reinstall</h4>
-                                <p class="text-xs text-color-muted">50+ templates</p>
+                <!-- Additional Features Grid -->
+                <div class="lg:col-span-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <!-- OS Reinstall -->
+                    <div class="group relative overflow-hidden bg-gradient-to-br from-primary/5 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-6 -right-6 w-20 h-20 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/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                                <x-ri-refresh-line class="size-6 text-primary" />
                             </div>
+                            <h4 class="font-bold text-color-base text-lg mb-2">OS Reinstall</h4>
+                            <p class="text-sm text-color-muted leading-relaxed">Choose from 50+ operating system templates including Ubuntu, Debian, CentOS, Windows Server, and more. One-click reinstallation with custom configurations.</p>
                         </div>
                     </div>
-                    <div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-secondary/30 rounded-2xl transition-all duration-300">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                                <x-ri-history-line class="size-5 text-secondary" />
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-color-base text-sm">Task History</h4>
-                                <p class="text-xs text-color-muted">Full audit logs</p>
+
+                    <!-- Task History -->
+                    <div class="group relative overflow-hidden bg-gradient-to-br from-secondary/5 to-background-secondary border border-secondary/20 hover:border-secondary/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-secondary/10">
+                        <div class="absolute -top-6 -right-6 w-20 h-20 bg-secondary/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-secondary/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                                <x-ri-history-line class="size-6 text-secondary" />
                             </div>
+                            <h4 class="font-bold text-color-base text-lg mb-2">Task History</h4>
+                            <p class="text-sm text-color-muted leading-relaxed">Complete audit trail of all server operations. Track reboots, backups, OS changes, and configuration updates with timestamps and status logs.</p>
                         </div>
                     </div>
-                    <div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-success/30 rounded-2xl transition-all duration-300">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-xl bg-success/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                                <x-ri-global-line class="size-5 text-success" />
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-color-base text-sm">Network Tools</h4>
-                                <p class="text-xs text-color-muted">IPv4 + IPv6</p>
+
+                    <!-- Network Tools -->
+                    <div class="group relative overflow-hidden bg-gradient-to-br from-success/5 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-6 -right-6 w-20 h-20 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/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                                <x-ri-global-line class="size-6 text-success" />
                             </div>
+                            <h4 class="font-bold text-color-base text-lg mb-2">Network Tools</h4>
+                            <p class="text-sm text-color-muted leading-relaxed">Full IPv4 and IPv6 support with reverse DNS management. Configure network interfaces, view bandwidth statistics, and manage IP assignments.</p>
                         </div>
                     </div>
-                    <div class="group p-5 bg-background-secondary/60 hover:bg-background-secondary border border-neutral/30 hover:border-warning/30 rounded-2xl transition-all duration-300">
-                        <div class="flex items-center gap-3">
-                            <div class="w-10 h-10 rounded-xl bg-warning/10 flex items-center justify-center group-hover:scale-110 transition-transform">
-                                <x-ri-shut-down-line class="size-5 text-warning" />
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-color-base text-sm">Power Controls</h4>
-                                <p class="text-xs text-color-muted">ACPI support</p>
+
+                    <!-- Power Controls -->
+                    <div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 to-background-secondary border border-warning/20 hover:border-warning/40 rounded-2xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-warning/10">
+                        <div class="absolute -top-6 -right-6 w-20 h-20 bg-warning/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-warning/15 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+                                <x-ri-shut-down-line class="size-6 text-warning" />
                             </div>
+                            <h4 class="font-bold text-color-base text-lg mb-2">Power Controls</h4>
+                            <p class="text-sm text-color-muted leading-relaxed">Full ACPI power management with graceful shutdown, hard reset, and power cycle options. Schedule automated restarts and monitor power state in real-time.</p>
                         </div>
                     </div>
                 </div>
@@ -337,47 +340,49 @@
     </section>
 
     <!-- Services Section - Card Carousel Style -->
-    <section id="services" class="py-24 md:py-32 bg-gradient-to-b from-background-secondary/50 to-transparent">
+    <section id="services" class="py-24 md:py-32">
         <div class="container mx-auto px-4">
-            <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
-                <div class="max-w-2xl">
-                    <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
-                        {{ theme('services_title', 'Our Services') }}
-                    </h2>
-                    <p class="text-xl text-color-muted leading-relaxed">
-                        {{ theme('services_subtitle', 'Choose the perfect option for your needs — all with full control panel access for all services we offer to give you total control') }}
-                    </p>
-                </div>
-                <a href="#services" class="group inline-flex items-center gap-2 text-primary font-semibold hover:gap-4 transition-all">
-                    <span>View all services</span>
-                    <x-ri-arrow-right-line class="size-5" />
-                </a>
-            </div>
-
-            <!-- Services Cards - Horizontal Scroll on Mobile -->
-            <div class="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory lg:grid lg:grid-cols-4 lg:overflow-visible scrollbar-hide">
-                @foreach ($categories as $index => $category)
-                <div class="flex-shrink-0 w-80 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-server-line class="size-7 text-primary" />
-                        </div>
-                        <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
-                            {{ $category->name }}
-                        </h3>
-                        @if(theme('show_category_description', true))
-                        <div class="text-color-muted text-sm leading-relaxed mb-6 line-clamp-3">
-                            {!! strip_tags($category->description) !!}
-                        </div>
-                        @endif
-                        <a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate
-                            class="inline-flex items-center gap-2 text-primary font-semibold text-sm group-hover:gap-3 transition-all">
-                            <span>{{ __('general.view') }}</span>
-                            <x-ri-arrow-right-line class="size-4" />
-                        </a>
+            <div class="bg-gradient-to-b from-background-secondary/50 to-background-secondary/20 rounded-3xl p-8 md:p-12">
+                <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-8 mb-16">
+                    <div class="max-w-2xl">
+                        <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-color-base mb-6 leading-tight">
+                            {{ theme('services_title', 'Our Services') }}
+                        </h2>
+                        <p class="text-xl text-color-muted leading-relaxed">
+                            {{ theme('services_subtitle', 'Choose the perfect option for your needs — all with full control panel access for all services we offer to give you total control') }}
+                        </p>
                     </div>
+                    <a href="#services" class="group inline-flex items-center gap-2 text-primary font-semibold hover:gap-4 transition-all">
+                        <span>View all services</span>
+                        <x-ri-arrow-right-line class="size-5" />
+                    </a>
+                </div>
+
+                <!-- Services Cards - Horizontal Scroll on Mobile -->
+                <div class="flex gap-6 overflow-x-auto pb-4 snap-x snap-mandatory lg:grid lg:grid-cols-4 lg:overflow-visible scrollbar-hide">
+                    @foreach ($categories as $index => $category)
+                    <div class="flex-shrink-0 w-80 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-server-line class="size-7 text-primary" />
+                            </div>
+                            <h3 class="text-xl font-bold text-color-base mb-3 group-hover:text-primary transition-colors">
+                                {{ $category->name }}
+                            </h3>
+                            @if(theme('show_category_description', true))
+                            <div class="text-color-muted text-sm leading-relaxed mb-6 line-clamp-3">
+                                {!! strip_tags($category->description) !!}
+                            </div>
+                            @endif
+                            <a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate
+                                class="inline-flex items-center gap-2 text-primary font-semibold text-sm group-hover:gap-3 transition-all">
+                                <span>{{ __('general.view') }}</span>
+                                <x-ri-arrow-right-line class="size-4" />
+                            </a>
+                        </div>
+                    </div>
+                    @endforeach
                 </div>
-                @endforeach
             </div>
         </div>
     </section>
@@ -523,33 +528,120 @@
         </div>
     </section>
 
-    <!-- CTA Section - Full Width Modern -->
+    <!-- CTA Section - Modern Split Design -->
     <section class="py-24 md:py-32">
         <div class="container mx-auto px-4">
-            <div class="relative overflow-hidden bg-gradient-to-br from-primary via-primary/90 to-secondary rounded-[3rem] p-12 md:p-20">
-                <!-- Background Effects -->
-                <div class="absolute inset-0 overflow-hidden pointer-events-none">
-                    <div class="absolute top-0 left-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
-                    <div class="absolute bottom-0 right-1/4 w-64 h-64 bg-white/5 rounded-full blur-3xl"></div>
-                </div>
-
-                <div class="relative z-10 text-center max-w-3xl mx-auto">
-                    <h2 class="text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">
-                        {{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
-                    </h2>
-                    <p class="text-xl text-white/80 mb-10 leading-relaxed">
-                        {{ theme('cta_subtitle', 'Join thousands of users who trust our platform for reliable, high-performance virtual servers with full control panel access') }}
-                    </p>
-                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                        <a href="#services" class="group inline-flex items-center justify-center gap-3 bg-white hover:bg-white/90 text-primary px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-xl hover:-translate-y-1">
-                            <x-ri-server-line class="size-5" />
-                            <span>{{ theme('cta_primary_text', 'View VPS Plans') }}</span>
-                            <x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
-                        </a>
-                        <a href="{{ theme('help_link', 'https://help.yourserver.com') }}" class="group inline-flex items-center justify-center gap-3 bg-white/10 hover:bg-white/20 text-white border border-white/30 px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 backdrop-blur-sm hover:-translate-y-1">
-                            <x-ri-mail-line class="size-5" />
-                            <span>{{ theme('cta_secondary_text', 'Contact Support') }}</span>
-                        </a>
+            <div class="relative overflow-hidden bg-gradient-to-br from-background-secondary to-background-secondary/80 border border-neutral/30 rounded-3xl">
+                <div class="grid lg:grid-cols-2 gap-0">
+                    <!-- Left Content -->
+                    <div class="relative p-10 md:p-16 lg:p-20">
+                        <!-- Decorative Elements -->
+                        <div class="absolute top-0 left-0 w-32 h-32 bg-primary/10 rounded-full blur-3xl"></div>
+                        <div class="absolute bottom-0 right-0 w-24 h-24 bg-secondary/10 rounded-full blur-2xl"></div>
+                        
+                        <div class="relative z-10">
+                            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
+                                <x-ri-rocket-fill class="size-4" />
+                                <span>Get Started Today</span>
+                            </div>
+                            
+                            <h2 class="text-4xl md:text-5xl font-black text-color-base mb-6 leading-tight">
+                                {{ theme('cta_title', 'Ready to Deploy Your VPS?') }}
+                            </h2>
+                            
+                            <p class="text-lg text-color-muted mb-8 leading-relaxed">
+                                {{ theme('cta_subtitle', 'Join thousands of users who trust our platform for reliable, high-performance virtual servers with full control panel access') }}
+                            </p>
+                            
+                            <!-- Feature List -->
+                            <div class="grid sm:grid-cols-2 gap-4 mb-10">
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
+                                        <x-ri-check-line class="size-4 text-success" />
+                                    </div>
+                                    <span class="text-sm text-color-base">Instant Deployment</span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
+                                        <x-ri-check-line class="size-4 text-success" />
+                                    </div>
+                                    <span class="text-sm text-color-base">Full Root Access</span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
+                                        <x-ri-check-line class="size-4 text-success" />
+                                    </div>
+                                    <span class="text-sm text-color-base">99.9% Uptime SLA</span>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <div class="w-8 h-8 rounded-lg bg-success/20 flex items-center justify-center flex-shrink-0">
+                                        <x-ri-check-line class="size-4 text-success" />
+                                    </div>
+                                    <span class="text-sm text-color-base">24/7 Expert Support</span>
+                                </div>
+                            </div>
+                            
+                            <!-- CTA Buttons -->
+                            <div class="flex flex-col sm:flex-row gap-4">
+                                <a href="#services" class="group inline-flex items-center justify-center gap-3 bg-primary hover:bg-primary/90 text-white px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 shadow-lg shadow-primary/25 hover:shadow-xl hover:shadow-primary/30 hover:-translate-y-1">
+                                    <x-ri-server-line class="size-5" />
+                                    <span>{{ theme('cta_primary_text', 'View VPS Plans') }}</span>
+                                    <x-ri-arrow-right-line class="size-5 group-hover:translate-x-1 transition-transform" />
+                                </a>
+                                <a href="{{ theme('help_link', 'https://help.yourserver.com') }}" class="group inline-flex items-center justify-center gap-3 bg-background hover:bg-background/80 text-color-base border border-neutral/50 hover:border-primary/30 px-8 py-4 rounded-2xl font-bold text-lg transition-all duration-300 hover:-translate-y-1">
+                                    <x-ri-mail-line class="size-5" />
+                                    <span>{{ theme('cta_secondary_text', 'Contact Support') }}</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Right Side - Visual Element -->
+                    <div class="relative hidden lg:flex items-center justify-center bg-gradient-to-br from-primary/10 via-secondary/5 to-transparent p-12">
+                        <!-- Decorative Background -->
+                        <div class="absolute inset-0 overflow-hidden">
+                            <div class="absolute top-1/4 right-1/4 w-64 h-64 bg-primary/20 rounded-full blur-3xl animate-pulse"></div>
+                            <div class="absolute bottom-1/4 left-1/4 w-48 h-48 bg-secondary/15 rounded-full blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
+                        </div>
+                        
+                        <!-- Floating Stats Cards -->
+                        <div class="relative z-10 space-y-4 w-full max-w-sm">
+                            <div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg transform hover:-translate-y-1 transition-transform">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-12 h-12 rounded-xl bg-success/20 flex items-center justify-center">
+                                        <x-ri-check-double-line class="size-6 text-success" />
+                                    </div>
+                                    <div>
+                                        <div class="text-2xl font-black text-color-base">{{ number_format(\App\Models\Service::count()+2560) }}+</div>
+                                        <div class="text-sm text-color-muted">Servers Deployed</div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg transform translate-x-8 hover:-translate-y-1 transition-transform">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
+                                        <x-ri-user-star-line class="size-6 text-primary" />
+                                    </div>
+                                    <div>
+                                        <div class="text-2xl font-black text-color-base">{{ number_format(\App\Models\User::count()+1439) }}+</div>
+                                        <div class="text-sm text-color-muted">Happy Customers</div>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            <div class="bg-background/90 backdrop-blur-sm border border-neutral/30 rounded-2xl p-5 shadow-lg hover:-translate-y-1 transition-transform">
+                                <div class="flex items-center gap-4">
+                                    <div class="w-12 h-12 rounded-xl bg-warning/20 flex items-center justify-center">
+                                        <x-ri-timer-flash-line class="size-6 text-warning" />
+                                    </div>
+                                    <div>
+                                        <div class="text-2xl font-black text-color-base">&lt; 60s</div>
+                                        <div class="text-sm text-color-muted">Average Deploy Time</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>