Enhance category and timeline entry forms with icon selection options; update image display settings for hero slides, products, and signature items to use circular images. Improve welcome page layout for better responsiveness and add autoplay functionality to the hero carousel.

resources/views/welcome.blade.php

@@ -193,9 +193,9 @@
             Biziň aýratynlyklarymyz
             <div class="absolute -bottom-4 left-0 w-full h-[2px] bg-outline-variant sketch-border"></div>
         </h2>
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-4">
+        <div class="flex overflow-x-auto hide-scrollbar gap-8 pb-12 pr-margin-mobile md:pr-margin-desktop snap-x snap-mandatory">
             @foreach($signatureItems as $item)
-                <article class="flex flex-col gap-4 relative group">
+                <article class="flex-shrink-0 w-[85vw] md:w-[350px] snap-center flex flex-col gap-4 relative group">
                     <div class="h-[160px] w-full relative sketch-border bg-surface-container overflow-hidden">
                         @if($item->image)
                             <img alt="{{ $item->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="{{ Storage::url($item->image) }}"/>
@@ -360,11 +360,22 @@
         });
     }
 
+    // Autoplay — advances every 5 seconds, stops on manual interaction
+    let heroAutoplay = setInterval(() => {
+        currentSlide = (currentSlide + 1) % totalSlides;
+        updateCarousel();
+    }, 5000);
+
+    [prevBtn, nextBtn].forEach((btn) => {
+        btn?.addEventListener('click', () => clearInterval(heroAutoplay));
+    });
+
     // Swipe logic for hero
     let startX;
     if (heroCarousel) {
         heroCarousel.addEventListener('touchstart', (e) => {
             startX = e.touches[0].clientX;
+            clearInterval(heroAutoplay);
         }, { passive: true });
 
         heroCarousel.addEventListener('touchend', (e) => {