Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: update services section on homepage with a modern layout, improved styling, and enhanced category display for better user engagement

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-04 09:49:17 -05:00
parent a17dd150fd
commit d2ec0650da
1 changed files with 40 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
themes/lucentui/views/home.blade.php
View File

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