1aa8f3da42
- memperbaiki custom js - menyimpan menu untuk header di view service dan di foreach - menghapus file yang tidak berguna - membuat halaman outlet
110 lines
3.6 KiB
PHP
110 lines
3.6 KiB
PHP
<div class="relative min-h-screen">
|
|
@include('livewire.home.partials.jumbotron')
|
|
@include('livewire.home.partials.partners')
|
|
@include('livewire.home.partials.why')
|
|
@include('livewire.home.partials.categories')
|
|
@include('livewire.home.partials.benefits')
|
|
@include('livewire.home.partials.cta')
|
|
</div>
|
|
|
|
@assets
|
|
<style>
|
|
#brand-slider img {
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
filter: grayscale(100%);
|
|
opacity: 0.6;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#brand-slider img:hover {
|
|
filter: grayscale(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.fade-enter {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
.fade-enter-active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition: all .4s ease;
|
|
}
|
|
</style>
|
|
@endassets
|
|
|
|
@script
|
|
<script>
|
|
document.addEventListener('livewire:navigated', () => {
|
|
// brand slider
|
|
const track = document.getElementById('brand-track');
|
|
const originalChildren = Array.from(track.children);
|
|
const originalHTML = track.innerHTML;
|
|
|
|
if (originalChildren.length === 0) return;
|
|
|
|
const itemWidth = originalChildren[0].offsetWidth;
|
|
const gapStyle = window.getComputedStyle(track).gap;
|
|
const gap = parseFloat(gapStyle) || 0;
|
|
|
|
const singleSetWidth = (itemWidth + gap) * originalChildren.length;
|
|
|
|
let currentWidth = singleSetWidth;
|
|
while (currentWidth < window.innerWidth + singleSetWidth * 2) {
|
|
track.innerHTML += originalHTML;
|
|
currentWidth
|
|
+= singleSetWidth;
|
|
}
|
|
let position = 0;
|
|
const speed = 1;
|
|
|
|
function animate() {
|
|
position -= speed;
|
|
if (Math.abs(position) >=
|
|
singleSetWidth) {
|
|
position = 0;
|
|
}
|
|
|
|
track.style.transform = `translateX(${position}px)`;
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
|
|
// category pagination
|
|
const links = document.querySelectorAll('.pagination-link');
|
|
const container = document.getElementById('category-container');
|
|
|
|
links.forEach(link => {
|
|
link.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
|
|
links.forEach(l => l.classList.remove('bg-black'));
|
|
links.forEach(l => l.classList.add('bg-gray-400'));
|
|
|
|
e.target.classList.remove('bg-gray-400');
|
|
e.target.classList.add('bg-black');
|
|
|
|
fetch(link.href)
|
|
.then(res => res.text())
|
|
.then(html => {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
const newContent = doc.querySelector('#category-container')
|
|
.innerHTML;
|
|
|
|
container.classList.add('fade-enter');
|
|
setTimeout(() => {
|
|
container.innerHTML = newContent;
|
|
container.classList.remove('fade-enter');
|
|
container.classList.add('fade-enter-active');
|
|
}, 120);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endscript
|