feat: add services section with card carousel for enhanced service presentation
This commit is contained in:
@@ -174,6 +174,55 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - Card Carousel Style -->
|
||||
<section id="services" 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="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12">
|
||||
<div class="max-w-xl">
|
||||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">What We Offer</p>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
|
||||
{{ theme('services_title', 'Our Services') }}
|
||||
</h2>
|
||||
<p class="text-base 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 text-sm font-medium hover:gap-3 transition-all">
|
||||
<span>View all</span>
|
||||
<x-ri-arrow-right-line class="size-4" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Control Panel Features - Modern Bento Layout -->
|
||||
<section id="panel-features" class="py-24 md:py-32 relative">
|
||||
<div class="container mx-auto px-4">
|
||||
@@ -429,55 +478,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section - Card Carousel Style -->
|
||||
<section id="services" 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="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6 mb-12">
|
||||
<div class="max-w-xl">
|
||||
<p class="text-sm font-medium text-primary uppercase tracking-wider mb-3">What We Offer</p>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-color-base mb-3">
|
||||
{{ theme('services_title', 'Our Services') }}
|
||||
</h2>
|
||||
<p class="text-base 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 text-sm font-medium hover:gap-3 transition-all">
|
||||
<span>View all</span>
|
||||
<x-ri-arrow-right-line class="size-4" />
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Infrastructure Features - Alternating Layout -->
|
||||
<section id="features" class="py-24 md:py-32">
|
||||
<div class="container mx-auto px-4">
|
||||
|
||||
Reference in New Issue
Block a user