feat: stack services cards vertically on mobile

This commit is contained in:
2025-12-23 10:26:14 -05:00
parent b58f711de2
commit a9f7193ce5

View File

@@ -175,10 +175,10 @@
</a> </a>
</div> </div>
<!-- Services Cards - Horizontal Scroll on Mobile --> <!-- Services Cards - Stacked on Mobile, Grid on Larger Screens -->
<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"> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
@foreach ($categories as $index => $category) @foreach ($categories as $index => $category)
<div class="flex-shrink-0 w-80 lg:w-auto snap-center group"> <div class="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="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"> <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" /> <x-ri-server-line class="size-7 text-primary" />