parfum/resources/views/livewire/home/index.blade.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
    <style>
        #brand-slider img {
            user-select: none;
            -webkit-user-drag: none;
            filter: brightness(0) invert(1);
            opacity: 0.6;
            transition: all 0.3s ease;
            pointer-events: auto;
        }

        #brand-slider img:hover {
            /* filter: brightness(0) invert(1); */
            filter: none;
            opacity: 1;
            transform: scale(1.05);
        }

        .cursor-grab {
            cursor: grab;
        }

        .cursor-grabbing {
            cursor: grabbing;
        }

        .fade-enter {
            opacity: 0;
            transform: translateY(10px);
        }

        .fade-enter-active {
            opacity: 1;
            transform: translateY(0);
            transition: all .4s ease;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .category-item {
            opacity: 0;
            animation: fadeUp 0.45s ease forwards;
        }
    </style>
@endassets

@script
    <script>
        document.addEventListener('livewire:navigated', () => {
            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;
            let isDown = false;
            let startX;
            let scrollLeft;
            let animationId;

            track.addEventListener('mousedown', (e) => {
                isDown = true;
                track.classList.add('cursor-grabbing');
                track.classList.remove('cursor-grab');
                startX = e.pageX - track.offsetLeft;
                scrollLeft = position;
                e.preventDefault();

                cancelAnimationFrame(animationId);
            });

            window.addEventListener('mouseup', () => {
                if (!isDown) return;
                isDown = false;
                track.classList.remove('cursor-grabbing');
                track.classList.add('cursor-grab');
                animate();
            });

            window.addEventListener('mousemove', (e) => {
                if (!isDown) return;
                e.preventDefault();
                const x = e.pageX - track.offsetLeft;
                const walk = (x - startX) * 1;
                position = scrollLeft + walk;
                track.style.transform = `translateX(${position}px)`;
            });

            function animate() {
                if (isDown) return;

                position -= speed;

                if (position <= -singleSetWidth) {
                    position += singleSetWidth;
                } else if (position > 0) {
                    position -= singleSetWidth;
                }

                track.style.transform = `translateX(${position}px)`;
                animationId = requestAnimationFrame(animate);
            }

            animate();

            const links = document.querySelectorAll('.pagination-link');
            const container = document.getElementById('category-container');

            if (links.length > 0 && container) {
                links.forEach(link => {
                    link.addEventListener('click', e => {
                        e.preventDefault();

                        const targetPage = new URL(link.href).searchParams.get('page') || '1';

                        // Update all dots (mobile & desktop)
                        links.forEach(l => {
                            const lPage = new URL(l.href).searchParams.get('page') || '1';
                            const isActive = lPage === targetPage;

                            const isMobile = l.closest('nav').classList.contains(
                                'lg:hidden');

                            if (isActive) {
                                l.classList.add('bg-home-primary');
                                if (isMobile) {
                                    l.classList.add('w-8');
                                    l.classList.remove('w-2', 'bg-gray-300');
                                } else {
                                    l.classList.add('h-12');
                                    l.classList.remove('h-6', 'bg-gray-200');
                                }
                            } else {
                                l.classList.remove('bg-home-primary', 'w-8', 'h-12');
                                if (isMobile) {
                                    l.classList.add('bg-gray-300', 'w-2');
                                } else {
                                    l.classList.add('bg-gray-200', 'h-6');
                                }
                            }
                        });

                        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