From d2ec0650da8b4086c48ca11838d0d477e34b4c76 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 4 Dec 2025 09:49:17 -0500
Subject: [PATCH] feat: update services section on homepage with a modern
 layout, improved styling, and enhanced category display for better user
 engagement

---
 themes/lucentui/views/home.blade.php | 74 +++++++++++++++-------------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index bf8f0c93d..4fb493ebe 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -222,42 +222,48 @@
         </section>
 
         <!-- Services Section -->
-    <div id="services" class="py-16 md:py-20">
-        <div class="container mx-auto px-4">
-            <div class="text-center mb-16">
-                <h2 class="text-4xl md:text-5xl font-bold text-color-base mb-6">
-                    {{ theme('services_title', 'Our Services') }}
-                </h2>
-                <p class="text-xl text-color-muted max-w-2xl mx-auto animate-fade-in-up">
-                    {{ theme('services_subtitle', 'Choose from our comprehensive range of server hosting solutions') }}
-                </p>
-            </div>
-
-            <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-12 items-start">
-                @foreach ($categories as $category)
-                <div
-                    class="feature-card flex flex-col h-full bg-gradient-to-br from-background-secondary/60 to-background-secondary/30 border border-neutral/80 hover:border-primary/40 p-5 md:p-6 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl animate-fade-in-up group">
-                    <div class="flex flex-col flex-1">
-                        <h3
-                            class="text-xl font-bold text-color-base mb-2 group-hover:text-primary transition-colors">
-                            {{ $category->name }}
-                        </h3>
-                        @if(theme('show_category_description', true))
-                        <article class="prose dark:prose-invert prose-sm text-color-muted mb-4">
-                            {!! $category->description !!}
-                        </article>
-                        @endif
-                    </div>
-                    <a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate
-                        class="group/nav inline-flex w-auto self-end items-center bg-primary/10 hover:bg-primary text-primary hover:text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 transform hover:scale-105">
-                        <span class="mr-2">{{ __('general.view') }}</span>
-                        <x-ri-arrow-right-line class="size-4 group-hover/nav:translate-x-1 transition-transform" />
-                    </a>
+        <section id="services" class="relative py-20 bg-gradient-to-b from-background-secondary/30 via-background to-background/50 px-8">
+            <div class="container mx-auto px-4">
+                <div class="text-center mb-16">
+                    <h2 class="text-4xl font-bold text-color-base mb-4">
+                        {{ theme('services_title', 'Our Services') }}
+                    </h2>
+                    <p class="text-lg text-color-muted max-w-2xl mx-auto">
+                        {{ theme('services_subtitle', 'Choose from our range of hosting solutions') }}
+                    </p>
+                </div>
+
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                    @foreach ($categories as $category)
+                    <div class="group relative rounded-2xl bg-background-secondary border border-neutral hover:border-primary/50 overflow-hidden transition-all duration-300 hover:scale-[1.02]">
+                        @if ($category->image)
+                        <div class="relative h-48 overflow-hidden">
+                            <img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                            <div class="absolute inset-0 bg-gradient-to-t from-background-secondary to-transparent opacity-60"></div>
+                        </div>
+                        @endif
+                        
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold text-color-base mb-2 group-hover:text-primary transition-colors">
+                                {{ $category->name }}
+                            </h3>
+                            
+                            @if(theme('show_category_description', true))
+                            <div class="prose dark:prose-invert prose-sm text-color-muted mb-4 line-clamp-2">
+                                {!! $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 hover:gap-3 transition-all">
+                                <span>{{ __('common.button.view_all') }}</span>
+                                <x-ri-arrow-right-line class="h-4 w-4" />
+                            </a>
+                        </div>
+                    </div>
+                    @endforeach
                 </div>
-                @endforeach
             </div>
-        </div>
-    </div>
+        </section>
 
     <!-- Features Section -->
     <div id="features" class="py-12 md:py-20">