80 lines
2.6 KiB
PHP
80 lines
2.6 KiB
PHP
<div class="relative min-h-screen">
|
|
<x-sections.ui.home.hero :$totalMembersCount :$formattedTotalMembersCount :$latestMembers :$testimonials
|
|
:$bestSellingPerfumes />
|
|
<x-sections.ui.home.brands :$brands />
|
|
<x-sections.ui.home.why :$whyChooseUs />
|
|
<x-sections.ui.home.categories :$categories />
|
|
<x-sections.ui.home.benefits :$perfumeFeatures />
|
|
<x-sections.ui.home.cta :$totalMembersCount :$formattedTotalMembersCount :$latestMembers />
|
|
</div>
|
|
|
|
|
|
@assets
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<style>
|
|
.swiper-wrapper.\!ease-linear {
|
|
transition-timing-function: linear !important;
|
|
}
|
|
|
|
.brand-swiper .swiper-wrapper {
|
|
transition-timing-function: linear !important;
|
|
}
|
|
</style>
|
|
@endassets
|
|
|
|
@script
|
|
<script>
|
|
document.addEventListener('livewire:navigated', () => {
|
|
// Initialize Hero Best Selling Swiper
|
|
const bestSellingSwiper = new Swiper('.best-selling-swiper .swiper', {
|
|
loop: true,
|
|
speed: 10000,
|
|
autoplay: {
|
|
delay: 0,
|
|
disableOnInteraction: false,
|
|
},
|
|
slidesPerView: 1,
|
|
spaceBetween: 24,
|
|
breakpoints: {
|
|
1024: {
|
|
slidesPerView: 2,
|
|
}
|
|
},
|
|
allowTouchMove: true,
|
|
grabCursor: true,
|
|
freeMode: true,
|
|
});
|
|
|
|
// Initialize Testimonials Swiper
|
|
const testimonialsSwiper = new Swiper('.testimonials-swiper', {
|
|
loop: true,
|
|
speed: 800,
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: '.testimonials-button-next',
|
|
prevEl: '.testimonials-button-prev',
|
|
},
|
|
slidesPerView: 1,
|
|
grabCursor: true,
|
|
});
|
|
|
|
// Initialize Brand Swiper
|
|
const brandSwiper = new Swiper('.brand-swiper', {
|
|
loop: true,
|
|
speed: 3000,
|
|
autoplay: {
|
|
delay: 0,
|
|
disableOnInteraction: false,
|
|
},
|
|
slidesPerView: 'auto',
|
|
allowTouchMove: true,
|
|
grabCursor: true,
|
|
});
|
|
});
|
|
</script>
|
|
@endscript
|