migrate template

resources/js/app.js

@@ -1 +1,62 @@
-//
+import Splide from '@splidejs/splide';
+import '@splidejs/splide/css/core';
+
+document.addEventListener('DOMContentLoaded', () => {
+    initCategoryPills();
+    initProductSplides();
+});
+
+function initCategoryPills() {
+    const pills = document.querySelectorAll('.category-pill');
+    const containers = document.querySelectorAll('.category-products');
+
+    if (pills.length === 0) {
+        return;
+    }
+
+    pills.forEach((pill) => {
+        pill.addEventListener('click', () => {
+            const targetId = pill.dataset.categoryId;
+
+            // Toggle pill active state
+            pills.forEach((p) => {
+                p.classList.remove('bg-tertiary-fixed-dim');
+                p.classList.add('bg-surface');
+            });
+            pill.classList.add('bg-tertiary-fixed-dim');
+            pill.classList.remove('bg-surface');
+
+            // Show matching container, hide others
+            containers.forEach((container) => {
+                if (container.dataset.categoryId === targetId) {
+                    container.classList.remove('hidden');
+                } else {
+                    container.classList.add('hidden');
+                }
+            });
+        });
+    });
+}
+
+function initProductSplides() {
+    const splideElements = document.querySelectorAll('.product-splide');
+
+    splideElements.forEach((el) => {
+        new Splide(el, {
+            type: 'slide',
+            perPage: 3,
+            perMove: 1,
+            gap: '2rem',
+            pagination: false,
+            arrows: true,
+            breakpoints: {
+                1024: {
+                    perPage: 2,
+                },
+                640: {
+                    perPage: 1,
+                },
+            },
+        }).mount();
+    });
+}