ECOMMERCE/resources/views/components/grocery/shop-by-lifestyle.blade.php

47 lines
1.6 KiB
PHP

<section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
<h2 class="h3 text-center pb-1 pb-sm-2 pb-md-3 pb-lg-0 mb-4 mb-lg-5">Brands</h2>
<div class="swiper pb-lg-2"
data-swiper='{
"slidesPerView": 1,
"spaceBetween": 24,
"pagination": {
"el": ".swiper-pagination",
"clickable": true
},
"breakpoints": {
"500": {
"slidesPerView": 2
},
"768": {
"slidesPerView": 3
},
"992": {
"slidesPerView": 4
}
}
}'>
<div class="swiper-wrapper">
@foreach($brands as $brand)
<!-- Category -->
<div class="swiper-slide text-center">
<div
class="position-relative d-inline-block text-dark-emphasis bg-warning-subtle rounded-circle p-5 mb-4">
<img width="64" height="64" src="{{ $brand->image_url }}" alt="{{ $brand->name }}" class="img-fluid">
</div>
<h3 class="h5 mb-2">
<a class="animate-underline stretched-link"
href="{{ route('product.index', ['filter[brand]' => $brand->id]) }}">
<span class="animate-target">{{ $brand->name }}</span>
</a>
</h3>
{{-- <p class="fs-sm mb-0">Foods that don't contain gluten</p> --}}
</div>
@endforeach
</div>
<!-- Slider pagination (Bullets) -->
<div class="swiper-pagination position-static mt-3 mt-sm-4"></div>
</div>
</section>