Product slider categories home page

2 files changed, 15 insertions, 2 deletions

diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js
index bc740810..5df75c3c 100644
--- a/src/components/layouts/Header.js
+++ b/src/components/layouts/Header.js
@@ -31,7 +31,7 @@ const menus = [
 export default function Header({ title }) {
   const router = useRouter();
   const { q = '' } = router.query;
-  const [searchQuery, setSearchQuery] = useState(q);
+  const [searchQuery, setSearchQuery] = useState(q != '*' ? q : '');
   const [suggestions, setSuggestions] = useState([]);
   const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index ddc505c7..cf663995 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -2,11 +2,24 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import ProductCard from "./ProductCard";
 import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
 import "swiper/css";
+import Image from "../elements/Image";
+import Link from "../elements/Link";
 
-export default function ProductSlider({ products }) {
+export default function ProductSlider({ 
+  products, 
+  bannerMode = false 
+}) {
   return (
     <>
+      { bannerMode && (
+        <Image src={products.image} alt={products.name} className="absolute top-0 left-0 h-full max-w-[55%]" />
+      ) }
       <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}>
+        { bannerMode && (
+          <SwiperSlide>
+            <Link href={`/shop/search?category=${products.name}`} className="w-full h-full block"></Link>
+          </SwiperSlide>
+        ) }
         {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
             <ProductCard data={product} />