added category carousel

src/components/CategoryCarousel/CategoryCarousel.jsx

@@ -0,0 +1,115 @@
+import React, { useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useGetCategoriesQuery } from "../../app/api/categories.js";
+import styles from "./CategoryCarousel.module.scss";
+
+const CategoryCarousel = () => {
+  const { data, isLoading } = useGetCategoriesQuery("tree");
+  const scrollRef = useRef(null);
+  const navigate = useNavigate();
+
+  const isDragging = useRef(false);
+  const startX = useRef(0);
+  const scrollLeft = useRef(0);
+  const hasDragged = useRef(false);
+
+  const mainCategories =
+    data?.data?.filter((cat) => cat.parent_id === null) ?? [];
+
+  const scroll = (dir) => {
+    if (!scrollRef.current) return;
+    scrollRef.current.scrollBy({ left: dir * 320, behavior: "smooth" });
+  };
+
+  const onMouseDown = (e) => {
+    isDragging.current = true;
+    hasDragged.current = false;
+    startX.current = e.pageX - scrollRef.current.offsetLeft;
+    scrollLeft.current = scrollRef.current.scrollLeft;
+    scrollRef.current.style.cursor = "grabbing";
+  };
+
+  const onMouseMove = (e) => {
+    if (!isDragging.current) return;
+    e.preventDefault();
+    const x = e.pageX - scrollRef.current.offsetLeft;
+    const walk = x - startX.current;
+    if (Math.abs(walk) > 4) hasDragged.current = true;
+    scrollRef.current.scrollLeft = scrollLeft.current - walk;
+  };
+
+  const onMouseUp = () => {
+    isDragging.current = false;
+    if (scrollRef.current) scrollRef.current.style.cursor = "grab";
+  };
+
+  const handleCardClick = (e, slug) => {
+    if (hasDragged.current) {
+      e.preventDefault();
+      return;
+    }
+    navigate(`/category/${slug}`);
+  };
+
+  if (isLoading || mainCategories.length === 0) return null;
+
+  return (
+    <div className={styles.wrapper}>
+      <button
+        className={`${styles.arrow} ${styles.left}`}
+        onClick={() => scroll(-1)}
+        aria-label="Scroll left"
+      >
+        ‹
+      </button>
+
+      <div
+        className={styles.track}
+        ref={scrollRef}
+        onMouseDown={onMouseDown}
+        onMouseMove={onMouseMove}
+        onMouseUp={onMouseUp}
+        onMouseLeave={onMouseUp}
+      >
+        {mainCategories.map((cat) => {
+          const thumb =
+            cat.media?.[0]?.images_400x400 ??
+            cat.media?.[0]?.thumbnail ??
+            null;
+
+          return (
+            <div
+              key={cat.id}
+              className={styles.card}
+              onClick={(e) => handleCardClick(e, cat.slug)}
+            >
+              <div className={styles.imgWrap}>
+                {thumb ? (
+                  <img
+                    src={thumb}
+                    alt={cat.name}
+                    loading="lazy"
+                    draggable={false}
+                  />
+                ) : (
+                  <div className={styles.placeholder} />
+                )}
+              </div>
+              <span className={styles.name}>{cat.name}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      <button
+        className={`${styles.arrow} ${styles.right}`}
+        onClick={() => scroll(1)}
+        aria-label="Scroll right"
+      >
+        ›
+      </button>
+    </div>
+  );
+};
+
+export default CategoryCarousel;

src/components/CategoryCarousel/Categorycarousel.module.scss

@@ -0,0 +1,145 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 20px 0 24px 0;
+}
+
+/* ── Scrollable track ── */
+.track {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding: 4px 2px 8px 2px;
+  flex: 1;
+  cursor: grab;
+  user-select: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+/* ── Card ── */
+.card {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+  width: 180px;
+  border-radius: 12px;
+  background: #f5f5f5;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+    transform: translateY(-2px);
+
+    .imgWrap img {
+      transform: scale(1.04);
+    }
+  }
+}
+
+/* ── Image area ── */
+.imgWrap {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  background: #ebebeb;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+    pointer-events: none;
+  }
+}
+
+.placeholder {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #e0e0e0 0%, #d0d0d0 100%);
+}
+
+/* ── Name label ── */
+.name {
+  padding: 10px 12px 12px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #222;
+  text-align: center;
+  line-height: 1.4;
+  background: #fff;
+}
+
+/* ── Arrow buttons ── */
+.arrow {
+  flex: 0 0 auto;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid #ddd;
+  background: #fff;
+  font-size: 22px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #444;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  transition: background 0.15s, border-color 0.15s, color 0.15s,
+    box-shadow 0.15s;
+  padding: 0;
+  z-index: 1;
+
+  &:hover {
+    background: #d24141;
+    border-color: #d24141;
+    color: #fff;
+    box-shadow: 0 2px 8px rgba(210, 65, 65, 0.35);
+  }
+
+  &.left {
+    margin-right: 4px;
+  }
+
+  &.right {
+    margin-left: 4px;
+  }
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+  .arrow {
+    display: none;
+  }
+
+  .card {
+    width: 140px;
+  }
+}
+
+@media (max-width: 480px) {
+  .card {
+    width: 120px;
+    border-radius: 10px;
+  }
+
+  .name {
+    font-size: 12px;
+    padding: 8px 8px 10px 8px;
+  }
+}

src/components/ProductCard/imageCarousel/ImageCarousel.module.scss

@@ -4,6 +4,7 @@
   height: 100%;
   overflow: hidden;
   touch-action: pan-y;
+  border-radius: 8px;
 }
 .productImage {
   width: 99%;
@@ -149,6 +150,7 @@
   justify-content: center;
   width: 100%;
   position: relative;
+  padding: 12px;
 }
 
 .thumbnail {