201 lines
11 KiB
PHP
201 lines
11 KiB
PHP
<section class="bg-body-tertiary py-5">
|
|
<div class="container py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5">
|
|
<h2 class="text-center pb-2 pb-md-3 pb-lg-4 pt-xxl-3">{{ __('reviews.title') }}</h2>
|
|
<div class="position-relative pb-xxl-3">
|
|
|
|
<!-- External slider prev/next buttons visible on screens > 500px wide (sm breakpoint) -->
|
|
<button type="button"
|
|
class="btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-start position-absolute top-50 start-0 z-2 translate-middle d-none d-sm-inline-flex mt-n4"
|
|
id="reviewsPrev" aria-label="Prev">
|
|
<i class="ci-chevron-left fs-lg animate-target"></i>
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-icon btn-outline-secondary bg-body rounded-circle animate-slide-end position-absolute top-50 start-100 z-2 translate-middle d-none d-sm-inline-flex mt-n4"
|
|
id="reviewsNext" aria-label="Next">
|
|
<i class="ci-chevron-right fs-lg animate-target"></i>
|
|
</button>
|
|
|
|
<!-- Slider -->
|
|
<div class="swiper"
|
|
data-swiper='{
|
|
"slidesPerView": 1,
|
|
"spaceBetween": 24,
|
|
"loop": true,
|
|
"navigation": {
|
|
"prevEl": "#reviewsPrev",
|
|
"nextEl": "#reviewsNext"
|
|
},
|
|
"pagination": {
|
|
"el": ".swiper-pagination",
|
|
"clickable": true
|
|
},
|
|
"breakpoints": {
|
|
"600": {
|
|
"slidesPerView": 2
|
|
},
|
|
"992": {
|
|
"slidesPerView": 3
|
|
}
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- Review -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card h-100 border-0 rounded-4 p-sm-2">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
|
|
<img src="https://dev.smgdev.top/api/storage/thumbnail_demo.png?id=4058" width="80"
|
|
alt="Image">
|
|
</div>
|
|
<div class="ps-2 ms-1">
|
|
<div class="d-flex gap-1 fs-xs pb-2 mb-1">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<h3 class="h6 mb-0">Victoria Gardner</h3>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{{ __('reviews.review1') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card h-100 border-0 rounded-4 p-sm-2">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
|
|
<img src="https://dev.smgdev.top/api/storage/thumbnail_demo.png?id=4058" width="80"
|
|
alt="Image">
|
|
</div>
|
|
<div class="ps-2 ms-1">
|
|
<div class="d-flex gap-1 fs-xs pb-2 mb-1">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<h3 class="h6 mb-0">Alexandra D.</h3>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{{ __('reviews.review2') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card h-100 border-0 rounded-4 p-sm-2">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
|
|
<img src="https://dev.smgdev.top/api/storage/thumbnail_demo.png?id=4058" width="80"
|
|
alt="Image">
|
|
</div>
|
|
<div class="ps-2 ms-1">
|
|
<div class="d-flex gap-1 fs-xs pb-2 mb-1">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<h3 class="h6 mb-0">Jenny Wilson</h3>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{{ __('reviews.review3') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card h-100 border-0 rounded-4 p-sm-2">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
|
|
<img src="https://dev.smgdev.top/api/storage/thumbnail_demo.png?id=4058" width="80"
|
|
alt="Image">
|
|
</div>
|
|
<div class="ps-2 ms-1">
|
|
<div class="d-flex gap-1 fs-xs pb-2 mb-1">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<h3 class="h6 mb-0">Sarah Miller</h3>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{{ __('reviews.review4') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card h-100 border-0 rounded-4 p-sm-2">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
|
|
<img src="https://dev.smgdev.top/api/storage/thumbnail_demo.png?id=4058" width="80"
|
|
alt="Image">
|
|
</div>
|
|
<div class="ps-2 ms-1">
|
|
<div class="d-flex gap-1 fs-xs pb-2 mb-1">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<h3 class="h6 mb-0">Emma Johnson</h3>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{{ __('reviews.review5') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review -->
|
|
<div class="swiper-slide h-auto">
|
|
<div class="card h-100 border-0 rounded-4 p-sm-2">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="ratio ratio-1x1 flex-shrink-0" style="max-width: 80px">
|
|
<img src="https://dev.smgdev.top/api/storage/thumbnail_demo.png?id=4058" width="80"
|
|
alt="Image">
|
|
</div>
|
|
<div class="ps-2 ms-1">
|
|
<div class="d-flex gap-1 fs-xs pb-2 mb-1">
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
<i class="ci-star-filled text-warning"></i>
|
|
</div>
|
|
<h3 class="h6 mb-0">Olivia Brown</h3>
|
|
</div>
|
|
</div>
|
|
<p class="mb-0">{{ __('reviews.review6') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Slider bullets (pagination) -->
|
|
<div class="swiper-pagination position-relative mt-4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|