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>
<!-- 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">