new filter

package-lock.json

         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "animate.css": "^4.1.1",
         "axios": "^1.7.9",
         "dotenv": "^16.4.7",
+        "framer-motion": "^11.16.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.0.2",
         "react-scripts": "5.0.1",
         "shopify-api-node": "^3.14.0",
+        "swiper": "^11.2.0",
         "web-vitals": "^2.1.4"
       }
     },
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.16.0.tgz",
+      "integrity": "sha512-oL2AWqLQuw0+CNEUa0sz3mWC/n3i147CckvpQn8bLRs30b+HxTxlRi0YR2FpHHhAbWV7DKjNdHU42KHLfBWh/g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^11.16.0",
+        "motion-utils": "^11.16.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.0.tgz",
+      "integrity": "sha512-4bmEwajSdrljzDAYpu6ceEdtI4J5PH25fmN8YSx7Qxk6OMrC10CXM0D5y+VO/pFZjhmCvm2bGf7Rus482kwhzA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^11.16.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "11.16.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.16.0.tgz",
+      "integrity": "sha512-ngdWPjg31rD4WGXFi0eZ00DQQqKKu04QExyv/ymlC+3k+WIgYVFbt6gS5JsFPbJODTF/r8XiE/X+SsoT9c0ocw==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
         "node": ">=4"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.0.tgz",
+      "integrity": "sha512-rjjAKgDEs+grR2eQshVDCcE4KNPC7CI294nfcbV9gE8WCsLdvOYXDeZKUYevqAZZp8j5hE7kpT3dAGVKFBWlxQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

package.json

     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.7.9",
     "dotenv": "^16.4.7",
+    "framer-motion": "^11.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.0.2",
     "react-scripts": "5.0.1",
     "shopify-api-node": "^3.14.0",
+    "swiper": "^11.2.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/Carousel/Carousel.jsx

         overflow: "hidden",
       }}
     >
+      {/* Filter */}
+      <Box sx={{
+        position:"absolute",
+        top:0,
+        right:0,
+        backgroundColor:"rgba(0, 0, 0, 0.2)",
+        width:"100%",
+        height:"100%"
+      }}></Box>
+      
       {items.map((item, index) => (
         <Box
           key={index}

src/components/Navbar/Navbar.jsx

-import React, { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import Button from "@mui/material/Button";
 import { useSelector } from 'react-redux';
 import ProductService from "../../services/ProductService";
 
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Scrollbar, A11y, Navigation } from 'swiper/modules';
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
 function calculateTotalQuantity(cartItems) {
   return cartItems.reduce((total, item) => total + item.quantity, 0);
 }
   },
 }));
 
+function mapProductTypesWithCollections(products) {
+  // Create a Map to group collections by productType
+  const productTypeMap = new Map();
+
+  products.forEach(product => {
+    const { productType, collections } = product;
+
+    // If productType already exists, merge its collections
+    if (productTypeMap.has(productType)) {
+      const existingCollections = productTypeMap.get(productType);
+      const newCollections = collections.map(collection => collection);
+      productTypeMap.set(productType, [...new Set([...existingCollections, ...newCollections])]);
+    } else {
+      // Add a new productType with its collections
+      productTypeMap.set(productType, collections.map(collection => collection));
+    }
+  });
+
+  // Convert the Map into the desired array structure
+  return Array.from(productTypeMap, ([productType, collection]) => ({ productType, collection }));
+}
+
+function getUniqueCollections(data) {
+  return data.map(item => {
+    // Use a Map to store unique collection titles with their corresponding image
+    const uniqueCollectionsMap = new Map();
+
+    item.collection.forEach(({ title, image }) => {
+      if (!uniqueCollectionsMap.has(title)) {
+        uniqueCollectionsMap.set(title, { title, image });
+      }
+    });
+
+    // Convert the Map back to an array
+    return {
+      productType: item.productType,
+      collection: Array.from(uniqueCollectionsMap.values())
+    };
+  });
+}
+
 const Navbar = () => {
 
+  const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const [showHeader, setShowHeader] = useState(true);
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
 
   const cart = useSelector((state) => state.cart.cart)
+  const products = useSelector((state) => state.products.products.data)
   const [cartAmount, setCartAmount] = useState(0);
 
-  const [open, setOpen] = React.useState(false);
-  const [navItem, setNavItem] = useState([])
-
-  useEffect(()=>{
-    fetchProductTypes()
-  },[])
-
-  const fetchProductTypes = async () => {
-    try {
-      const data = await ProductService.getProductTypes();
-  
-      if (Array.isArray(data)) {
+  const [open, setOpen] = useState(false);
+  const [navItem, setNavItem] = useState([]);
 
-        let navItemData = data.map(({node})=>({title:`${node.toUpperCase()}`, link:`/collection/${node}` }))
-        navItemData = navItemData.filter(({title}) => (title !== "") )
-        setNavItem(navItemData);
-
-      } else {
-        setNavItem([]); 
-      }
-    } catch (error) {
-      console.error("Error fetching product types:", error);
-      setNavItem([]); // Handle error by setting fallback empty array
-    }
-  };
+  const [displayCollection, setDisplayCollection] = useState({
+    productType: null,
+    list:[]
+  })
 
   useEffect(() => {
 
 
   }, [cart])
 
+  useEffect(() => {
+
+    //Navbar item are based on products type, thus get all the item and then we should be good
+    if (products.length > 0) {
+
+      let navItemData = mapProductTypesWithCollections(products)
+      navItemData = getUniqueCollections(navItemData)
+      setNavItem(navItemData)
+
+    }
+
+  }, [products])
+
   const handleChange = (event) => {
     setLanguage(event.target.value);
   };
     };
   }, [lastScrollPos]);
 
+  const renderCollectionDisplay = (colletion) => {
+
+    let { title, image } = colletion
+
+    return (
+      <SwiperSlide>
+        <Box
+          className="animate__animated animate__fadeIn animate__fast"
+          sx={{
+            backgroundImage: `url(${image.url})`,
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center center",
+            height: "100%",
+            paddingTop: "85%",
+            position: "relative",
+            cursor: "pointer"
+          }}
+          onClick={()=>{
+            sessionStorage.setItem('amber-select-collection',title)
+            sessionStorage.setItem('amber-select-product-type',displayCollection.productType)
+            window.location.href = `/products`;
+          }}
+        >
+          <Typography
+            variant="body1"
+            sx={{
+              color: "white",
+              fontWeight: "bolder",
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)"
+            }}
+          >
+            {title.toUpperCase()}
+          </Typography>
+        </Box>
+      </SwiperSlide>
+    )
+
+  }
+
+  const swipeToLeft = () => {
+    if (swiperRef.current) {
+      swiperRef.current.slidePrev(); // Move to the previous slide
+    }
+  };
+
+  const swipeToRight = () => {
+    if (swiperRef.current) {
+      swiperRef.current.slideNext(); // Move to the previous slide
+    }
+  };
+
+  const displayCollectionList = (collection, productType) => {
+    setDisplayCollection({
+      productType,
+      list:collection
+    })
+  }
+
+  const hideCollectionList = () => {
+    setDisplayCollection([])
+  }
+
   return (
     <>
       <AppBar position="fixed"
         sx={{
-          backgroundColor: {
-            xs: "background.black",
-            md: "rgba(0,0,0,0.9)",
-            lg: "background.black"
-          },
-          boxShadow: {
-            xs: "none",
-            md: "none",
-            lg: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)"
+          backgroundColor: "rgba(255, 255, 255, 0.3)", // Transparent white background
+          backdropFilter: "blur(10px)", // Apply blur effect
+          boxShadow: 0,
+          borderBottom: '1px solid white',
+          transition: "all 0.2s ease-in-out",
+          ":hover": {
+            backgroundColor: "rgba(255,255,255,1)",
+            backdropFilter: "none"
           }
         }}
+        onMouseLeave={() => {
+          hideCollectionList()
+        }}
       >
 
         {/* Conditionally render the Header */}
 
           {/* Left Section: Logo */}
           <Box sx={{
-            mr:5,
+            mr: 5,
             display: {
               xs: "none",
               md: "none",
                 md: "none",
                 lg: "flex"
               },
-              gap: 2,
+              gap: 2
             }}
           >
 
-            {navItem.map(({ title, link }) => (<Button
+            {navItem.map(({ productType, collection }) => (<Button
+              sx={{
+                position: "relative",
+                ':hover': {
+                  backgroundColor: "rgba(0,0,0,0)",
+                  color: "#95AAC5"
+                }
+              }}
               color="inherit"
               onClick={() => {
-
-                sessionStorage.setItem('amber-select-product-type',title.toLocaleLowerCase())
-                window.location.href = link;
-              
+                sessionStorage.setItem('amber-select-product-type', productType)
+                window.location.href = `/products`;
+              }}
+              onMouseEnter={() => {
+                displayCollectionList(collection, productType)
               }}
             >
-              {title}
+              <Typography variant="body2"
+                sx={{
+                  fontWeight: "400",
+                  color: "black",
+                  transition: "all 0.3s ease-in-out",
+                  ":hover": {
+                    color: "#95AAC5"
+                  }
+                }}>{productType}</Typography>
             </Button>))}
 
           </Box>
           </Box>
 
         </Toolbar>
+
+        {/* On Hover Collection */}
+        <Box className="animate__animated animate__fadeIn" sx={{ backgroundColor: "white", position: "relative", py: 5, display: (displayCollection?.list?.length > 0) ? "block" : "none" }}>
+          <ChevronLeftIcon
+            style={{
+              cursor: "pointer",
+              color: "black",
+              position: "absolute",
+              top: "50%",
+              fontSize: 50,
+              left: 40,
+              transform: "translateY(-50%)",
+            }}
+            onClick={swipeToLeft}
+          />
+
+          <Box sx={{ px: 20 }}>
+            <Swiper
+              modules={[Navigation, Scrollbar, A11y]}
+              spaceBetween={20}
+              slidesPerView={4}
+              pagination={{ clickable: true }}
+              scrollbar={{ draggable: true }}
+              onSwiper={(swiper) => (swiperRef.current = swiper)}
+            >
+              {displayCollection?.list?.map((colletion) => {
+                return renderCollectionDisplay(colletion)
+              })}
+
+            </Swiper>
+          </Box>
+
+          <KeyboardArrowRightIcon
+            style={{
+              cursor: "pointer",
+              color: "black",
+              fontSize: 50,
+              position: "absolute",
+              top: "50%",
+              right: 40,
+              transform: "translateY(-50%)",
+            }}
+            onClick={swipeToRight}
+          />
+        </Box>
+
       </AppBar>
 
       <MobileNav open={open} menu={navItem} onClose={() => { setOpen(false) }} />

src/components/ProductDetails/ProductDetails.jsx

   const [alert, setAlert] = useState({ open: false, severity: '', message: '' });
 
   useEffect(() => {
-    if (product) {
+    if (!isEmptyObject(product)) {
 
       console.log("Product: ", product)
+      debugger
 
       let productVariants = product?.variants?.nodes
 
         // find variant price if it all match initial variant selection
         for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
           let { amount, currencyCode } = price;
-        
+
           // Convert array to object
           const optionsObject = selectedOptions.reduce(
             (a, { name, value }) => ({ ...a, [name]: value }),
             {}
           );
-        
+
           if (hasMatchingProperties(newVariantSelection, optionsObject)) {
             newVariantSelection = { ...newVariantSelection, amount, currencyCode, id, quantityAvailable };
             break; // Exit the loop when condition is met
       // find variant price if it all match initial variant selection
       for (const { selectedOptions, price, id, quantityAvailable } of productVariants) {
         let { amount, currencyCode } = price;
-      
+
         // Convert array to object
         const optionsObject = selectedOptions.reduce(
           (a, { name, value }) => ({ ...a, [name]: value }),
           {}
         );
-      
+
         if (hasMatchingProperties(newVariantSelection, optionsObject)) {
           newVariantSelection = { ...newVariantSelection, amount, currencyCode, id, quantityAvailable };
-          if(quantityAvailable == 0) setQuantity(0)
+          if (quantityAvailable == 0) setQuantity(0)
           else setQuantity(1)
           break; // Exit the loop when condition is met
         }
     if (isEmptyObject(cart) || isEmptyObject(cartHistory)) {
 
       dispatch(createCart())
-      .then(() => {
-        showAlert('success', 'Cart created successfully!');
-      })
-      .catch(() => {
-        showAlert('error', 'Failed to create cart. Please try again.');
-      })
-      .finally(() => setShowLoader(false));
+        .then(() => {
+          showAlert('success', 'Cart created successfully!');
+        })
+        .catch(() => {
+          showAlert('error', 'Failed to create cart. Please try again.');
+        })
+        .finally(() => setShowLoader(false));
 
     } else {
 
       console.log("ADD ITEM:", variantSelection)
-      
+
       dispatch(addItemToCart({
         cartId: cartHistory.id,
-        lines:[
+        lines: [
           {
-            merchandiseId:variantSelection.id,
+            merchandiseId: variantSelection.id,
             quantity
           }
         ]
       }))
-      .then(() => {
-        showAlert('success', 'Item added to cart successfully!');
-      })
-      .catch(() => {
-        showAlert('error', 'Failed to add item to cart. Please try again.');
-      })
-      .finally(() => setShowLoader(false));
+        .then(() => {
+          showAlert('success', 'Item added to cart successfully!');
+        })
+        .catch(() => {
+          showAlert('error', 'Failed to add item to cart. Please try again.');
+        })
+        .finally(() => setShowLoader(false));
     }
 
   }
         {/* Section 1: Product Info */}
         <Box>
           <Typography variant="h5" sx={{ fontWeight: "bold", mb: 2 }}>
-            {product.title}
+            {product?.title}
           </Typography>
           <Typography variant="body2" color="text.secondary">
             {product?.collections?.nodes[0]?.title}
           </Typography>
+
+
           <Typography
             variant="body1"
             sx={{ fontWeight: "bold" }}
           >
-            {`${variantSelection.currencyCode} ${parseFloat(variantSelection.amount).toFixed(2)}`}
-          </Typography>
-          <Typography
-            variant="body1"
-          >
-            {(variantSelection?.quantityAvailable == 0) ? <span style={{color:"red", fontWeight:"bolder"}}>{`OUT OF STOCK`}</span> : `IN STOCK: ${variantSelection?.quantityAvailable}`}
+            {(variantSelection?.quantityAvailable == 0) ? <span style={{ color: "red", fontWeight: "bolder" }}>{`OUT OF STOCK`}</span> : `${variantSelection.currencyCode} ${parseFloat(variantSelection.amount).toFixed(2)}`}
           </Typography>
+
         </Box>
 
         {/* Section 2: Variants */}
           {variants.map(({ name, options }, index) => {
 
             return (
-              <>
-                <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb:1 }}>
+              <Box sx={{ display: (name == "Title") ? "none" : "block" }}>
+                <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 1 }}>
                   {name}
                 </Typography>
 
                     </Button>
                   ))}
                 </Box>
-              </>
+              </Box>
             )
 
           })}
             Description
           </Typography>
           <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
-            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}></div>
+            <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
           </Typography>
         </Box>
 
             },
           }}
         >
-          ADD TO CART {showLoader && <CircularProgress sx={{ml:1}} color="white" size={20} />} 
+          ADD TO CART {showLoader && <CircularProgress sx={{ ml: 1 }} color="white" size={20} />}
         </Button>
 
-        { cart?.lines?.nodes?.length > 0 && <Button
+        {cart?.lines?.nodes?.length > 0 && <Button
           onClick={() => { window.location.href = '/cart' }}
           variant="contained"
           color="common.black"

src/components/ProductList/ProductList.jsx

 import { styled } from "@mui/material";
 //REDUX
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchProductsByTags, fetchProductsByCollection } from '../../redux/slices/productSlice';
+import { fetchProducts } from '../../redux/slices/productSlice';
 
 //UTIL FUNCTION
 function getAllTags(data) {
 
 function getAllCollection(data) {
   const products = data || [];
-  const allCollection = products.flatMap(product => product.collections.nodes);
+  const allCollection = products.flatMap(product => product.collections);
   const uniqueCollection = Array.from(
     new Map(allCollection.map(item => [item.title, item])).values()
   );
 
   const products = useSelector((state) => state.products.products.data) // only used as referenced
   const [filteredProducts, setFilteredProducts] = useState([]) // this one is the actual data to be rendered
-  const [categoryFilterOption, setCategoryFilterOption] = useState([])
+  const [tagFilterOption, setTagFilterOption] = useState([])
   const [collectionFilterOption, setCollectionFilterOption] = useState([])
   const dispatch = useDispatch();
 
   //filter
-  const [category, setCategory] = useState('all');
+  const [tags, setTags] = useState('all');
   const [collection, setCollection] = useState('all');
   const [sort, setSort] = useState('title')
 
   useEffect(() => {
 
-    // if user come from select collection
-    if (sessionStorage.getItem('amber-select-collection')) {
+    dispatch(fetchProducts())
 
-      let { id } = JSON.parse(sessionStorage.getItem('amber-select-collection'))
-      dispatch(fetchProductsByCollection({ collectionId: id }))
+  }, [])
 
-    } else if (sessionStorage.getItem('amber-select-category')) {
 
-      let tag = sessionStorage.getItem('amber-select-category')
-      dispatch(fetchProductsByTags({ tag }))
+  useEffect(() => {
 
-    }
+    console.log("Products: ", products)
+    if (products.length > 0) {
+      let productType = sessionStorage.getItem('amber-select-product-type')
+      let newFilteredProducts = products.filter(
+        (product) => product.productType === productType
+      );
 
-  }, [])
+      setFilteredProducts(newFilteredProducts)
 
-  useEffect(() => {
+      const tagList = getAllTags(newFilteredProducts);
+      setTagFilterOption(tagList);
 
-    console.log(products)
-    let productType = sessionStorage.getItem('amber-select-product-type')
-    let newFilteredProducts = products.filter(
-      (product) => product.productType === productType
-    );
 
-    setFilteredProducts(newFilteredProducts)
+      // Filter will only exist if the user haven't click on collection
+      if (!sessionStorage.getItem('amber-select-collection')) {
+        const collectionList = getAllCollection(newFilteredProducts);
+        setCollectionFilterOption(collectionList);
+      }else{
+        setCollection(sessionStorage.getItem('amber-select-collection'))
+      }
 
-    if (sessionStorage.getItem('amber-select-collection')){
-      const categoryList = getAllTags(newFilteredProducts) // yes we use tags as category, while I was coding this, this is the only way to implement category
-      setCategoryFilterOption(categoryList)
-    } else if (sessionStorage.getItem('amber-select-category')) {
-      const collectionList = getAllCollection(newFilteredProducts)
-      setCollectionFilterOption(collectionList)
     }
-    
+
 
   }, [products])
 
 
       let productType = sessionStorage.getItem('amber-select-product-type')
 
-      // Category
       let newFilteredProducts = products.filter(
-        (product) => {
+        (product) => product.productType === productType
+      );
 
-          if(category == 'all'){
+      // Tags
+      newFilteredProducts = newFilteredProducts.filter(
+        (product) => {
+          if (tags == 'all') {
             return product.productType === productType
           } else {
-            return product.productType === productType && product.tags.includes(category)
+            return product.productType === productType && product.tags.includes(tags)
           }
 
         }
       );
-
+      
       // Collection
       newFilteredProducts = newFilteredProducts.filter(
         (product) => {
 
-          if(collection == 'all'){
-            
+          if (collection == 'all') {
             return product.productType === productType
           } else {
-            
-            return product.productType === productType && product.collections.nodes.some(data => data.title === collection)
+            return product.productType === productType && product.collections.some(data => data.title === collection)
           }
 
         }
       );
+      
 
       if (sort === "title") {
         newFilteredProducts = newFilteredProducts.sort((a, b) => a.title.localeCompare(b.title));
 
     }
 
-  }, [category, collection, sort])
-
-  useEffect(() => {
-    if (products) console.log(products)
-  }, [products])
-
-
-
+  }, [tags, collection, sort])
 
   const handleChange = (event) => {
     //setInput({ ...input, [event.target.name]: event.target.value });
   };
 
-  const renderProduct = (id, img_url, title, collection, price, currency, extra_desc) => {
+  const renderProduct = (id, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
 
     return (
-      <Grid item size={{ xs: 6, sm: 6, md: 4 }}>
+      <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
+
         <Box
           onClick={() => { window.location.href = `/products/${id}` }}
           sx={{
             NEW
           </Button> */}
 
-          <Box sx={{ py: 5 }}>
-            <Typography variant="body1" sx={{fontWeight:"400", mb:1}}>
-              {collection}
+          <Box sx={{ pb: 5, pt: 3, width: "80%" }}>
+            <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
+              {collection_name}
             </Typography>
-            <Typography variant="h4" sx={{ fontWeight: "bolder", mb:1 }}>
+            <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
               {title}
             </Typography>
-            <Typography variant="body1" sx={{fontWeight:"400", mb:1}}>
-              {`${currency} ${parseFloat(price).toFixed(2)}`}
+            <Typography variant="body1" sx={{ fontWeight: "400" }}>
+              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
             </Typography>
             <Typography variant="body1" sx={{ mt: 2 }}>
               {extra_desc}
         sx={{
           display: "flex",
           justifyContent: "space-between",
-          py:0,
-          flexDirection:{
-            xs:"column",
-            sm:"row",
-            md:"row",
-            lg:"row"
+          py: 0,
+          flexDirection: {
+            xs: "column",
+            sm: "row",
+            md: "row",
+            lg: "row"
           },
           alignItems: "center",
           backgroundColor: "background.black",
         }}
       >
         {/* Left Side: Page Title */}
-        <Typography variant="body2" sx={{fontSize:10, mt:{xs:1, sm:1, md:0}}}>
+        <Typography variant="body2" sx={{ fontSize: 10, mt: { xs: 1, sm: 1, md: 0 } }}>
           {`${filteredProducts.length} Item`}
         </Typography>
 
         {/* Right Side: Option Inputs */}
-        <Box sx={{ display: "flex", gap: 2, flexDirection:{
-            xs:"column",
-            sm:"row",
-            md:"row",
-            lg:"row"
-          }, }}>
-
-          {/* length 1, cause we know upon selecting by tags, there would be only 1 category, which mean no need to view this option */}
-          {(categoryFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Category</Typography>
+        <Box sx={{
+          display: "flex", gap: 2, flexDirection: {
+            xs: "column",
+            sm: "row",
+            md: "row",
+            lg: "row"
+          },
+        }}>
+
+          {(tagFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Tag</Typography>
             <Select
-              value={category}
+              value={tags}
               onChange={(event) => {
-                setCategory(event.target.value);
+                setTags(event.target.value);
               }}
               sx={{
-                '& .MuiSelect-select':{
-                  border:"none"
+                '& .MuiSelect-select': {
+                  border: "none"
                 }
               }}
-              input={<BootstrapInput  />}
+              input={<BootstrapInput />}
               name="type"
             >
               <MenuItem value={'all'}>All</MenuItem>
-              {categoryFilterOption?.map((data) => (<MenuItem value={data}>{data}</MenuItem>))}
+              {tagFilterOption?.map((data) => (<MenuItem value={data}>{data}</MenuItem>))}
             </Select>
           </FormControl>}
 
                 setCollection(event.target.value);
               }}
               sx={{
-                '& .MuiSelect-select':{
-                  border:"none"
+                '& .MuiSelect-select': {
+                  border: "none"
                 }
               }}
               input={<BootstrapInput />}
               name="type"
             >
               <MenuItem value={'all'}>All</MenuItem>
-              {collectionFilterOption?.map(({title}) => (<MenuItem value={title}>{title}</MenuItem>))}
+              {collectionFilterOption?.map(({ title }) => (<MenuItem value={title}>{title}</MenuItem>))}
             </Select>
           </FormControl>}
 
                 setSort(event.target.value);
               }}
               sx={{
-                '& .MuiSelect-select':{
-                  border:"none"
+                '& .MuiSelect-select': {
+                  border: "none"
                 }
               }}
               input={<BootstrapInput />}
 
       {/* LIST */}
       <Box sx={{ mb: 5 }}>
-        <Grid container spacing={0.3} columns={12}>
+        <Grid container spacing={0.5} columns={12}>
           {filteredProducts.map((product, index) => {
 
-            let { id, title, compareAtPriceRange, images, collections } = product
-            let price = compareAtPriceRange.maxVariantPrice.amount
-            let currency = compareAtPriceRange.maxVariantPrice.currencyCode
-            let img_url = images.nodes[0].url
-            let collection_name = collections.nodes[0]?.title
+            let { id, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+
+            let minPrice = minVariantPrice.amount
+            let minPriceCurrency = minVariantPrice.currencyCode
+            let maxPrice = maxVariantPrice.amount
+            let maxPriceCurrency = maxVariantPrice.currencyCode
+
+            let img_url = images[0].url
+            let collection_name = collections[0].title
 
             // ID
             const parts = id.split('/');
 
 
             if (index < size) {
-              return renderProduct(prodID, img_url, title, collection_name, price, currency, "")
+              return renderProduct(prodID, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")
             }
 
           })}

src/components/ProductSelected/ProductSelected.jsx

-import { useEffect } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { Box, Typography, Button, useMediaQuery } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchProducts } from '../../redux/slices/productSlice';
 
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Scrollbar, A11y } from 'swiper/modules';
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
 const ProductSelected = () => {
 
+  const swiperRef = useRef(null); // Create a ref for the Swiper instance
   const products = useSelector((state) => state.products.products.data)
   const dispatch = useDispatch();
 
+  const [filterProducts, setFilterProducts] = useState([])
+
   useEffect(() => {
 
-    dispatch(fetchProducts({maxResults: 4, sortBy:'TITLE', customQuery:"tag:new"}))
+    dispatch(fetchProducts())
 
   }, [])
 
-  const renderProduct = (id, img_url, title, collection, price, currency, extra_desc) => {
+  useEffect(() => {
+
+    if (products.length > 0) {
+      setFilterProducts(products.filter(({ selected }) => selected))
+    }
+
+  }, [products])
+
+  const swipeToLeft = () => {
+    if (swiperRef.current) {
+      swiperRef.current.slidePrev(); // Move to the previous slide
+    }
+  };
+
+  const swipeToRight = () => {
+    if (swiperRef.current) {
+      swiperRef.current.slideNext(); // Move to the previous slide
+    }
+  };
+
+
+  const renderProduct = (id, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc) => {
 
     return (
       <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
+
         <Box
           onClick={() => { window.location.href = `/products/${id}` }}
           sx={{
             NEW
           </Button> */}
 
-          <Box sx={{ pb: 5, pt:3 }}>
-            <Typography variant="body1" sx={{fontWeight:"400", mb:1}}>
-              {collection}
+          <Box sx={{ pb: 5, pt: 3 }}>
+            <Typography variant="body1" sx={{ fontWeight: "400", mb: 1 }}>
+              {collection_name}
             </Typography>
-            <Typography variant="h5" sx={{ fontWeight: "bolder", mb:1}}>
+            <Typography variant="h5" sx={{ fontWeight: "bolder", mb: 1 }}>
               {title}
             </Typography>
-            <Typography variant="body1" sx={{fontWeight:"400"}}>
-              {`${currency} ${parseFloat(price).toFixed(2)}`}
+            <Typography variant="body1" sx={{ fontWeight: "400" }}>
+              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
             </Typography>
             <Typography variant="body1" sx={{ mt: 2 }}>
               {extra_desc}
   }
 
 
-  const isMobileScreen = useMediaQuery((theme) => theme.breakpoints.down('sm'))
-
-  const displayedImages = isMobileScreen ? products.slice(0, 2) : products.slice(0, 4);
-
   return (
-    <Box sx={{ mb: 5 }}>
-      <Grid container spacing={1} columns={12}>
-        {displayedImages.map((product, index) => {
+    <Box sx={{
+      mb: 5,
+    }}>
+
+      {/* OFFSET PURPOSE */}
+      <Grid size={{ xs: 12, md: 4 }} sx={{ mx: "auto", display: "flex", alignItems: "center", justifyContent: "center", my: 4 }}>
+        <ChevronLeftIcon
+          style={{
+            cursor:"pointer",
+            color:"#B7B7B7"
+          }}
+          onClick={swipeToLeft}
+        />
+        <Typography variant="h4" sx={{mx:2}}>
+          NEW IN
+        </Typography>
+
+        <KeyboardArrowRightIcon
+          style={{
+            cursor:"pointer",
+            color:"#B7B7B7"
+          }}
+          onClick={swipeToRight}
+        />
+      </Grid>
 
-          let { id, title, compareAtPriceRange, images, collections } = product
-          let price = compareAtPriceRange.maxVariantPrice.amount
-          let currency = compareAtPriceRange.maxVariantPrice.currencyCode
-          let img_url = images.nodes[0].url
-          let collection_name = collections.nodes[0]?.title
+      <Swiper
+        modules={[Scrollbar, A11y]}
+        spaceBetween={20}
+        breakpoints={{
+          0: { slidesPerView: 2 }, // For very small screens
+          640: { slidesPerView: 2 }, // For screens >= 640px
+          1024: { slidesPerView: 4 }, // For screens >= 1024px
+        }}
+        pagination={{ clickable: true }}
+        scrollbar={{ draggable: true }}
+        onSwiper={(swiper) => (swiperRef.current = swiper)}
+      >
+        {filterProducts.map((product, index) => {
+
+          let { id, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants } = product
+
+          let minPrice = minVariantPrice.amount
+          let minPriceCurrency = minVariantPrice.currencyCode
+          let maxPrice = maxVariantPrice.amount
+          let maxPriceCurrency = maxVariantPrice.currencyCode
+
+          let img_url = images[0].url
+          let collection_name = collections[0].title
 
           // ID
           const parts = id.split('/');
           let prodID = parts[parts.length - 1];
 
-
-          return renderProduct(prodID, img_url, title, collection_name, price, currency, "")
+          return (
+            <SwiperSlide>
+              {renderProduct(prodID, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "")}
+            </SwiperSlide>
+          )
 
         })}
-      </Grid>
+
+      </Swiper>
     </Box>
   );
 };

src/index.js

 import App from './App';
 import { Provider } from 'react-redux';
 import store from './redux/store';
+
+// CSS STUFF
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'animate.css';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';

src/pages/Home.jsx

 import Feature from '../components/Feature'
 import { Link } from '@mui/material'
 import VideoAds from '../components/VideoAds'
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import ProductType from '../components/ProductType';
 import NewsLetter from '../components/NewsLetter';
-
 import ProductService from "../services/ProductService"
-
 import AmberHomeWallpaper from "../assets/images/titleBg.jpg";
 import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.jpg";
 import AmberClothing from "../assets/images/amberClothing.jpg"
         }
       }}>
 
-        <Grid container sx={{
-          py:{
-            xs:3,
-            md:3,
-            lg:6
-          }
-        }}>
-
-          {/* OFFSET PURPOSE */}
-
-          <Grid size={{xs:12, md:4}} sx={{mx:"auto", display:"flex", alignItems:"center", justifyContent:"center" }}>
-            {/* Icon at the start */}
-            <KeyboardArrowLeftIcon sx={{ mr: 3, color: "#B7B7B7" }} />
-            <Typography variant="h4">
-              NEW IN
-            </Typography>
-            {/* Icon at the end */}
-            <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} />
-          </Grid>
-
-        </Grid>
-
         <ProductSelected />
         
       </Box>

src/pages/Products/Product.jsx

         <Grid size={{ xs: 12, md: 6 }}>
           <Box sx={{ paddingRight: 1 }}>
             <Box>
-              <ImageView />
+              {/* <ImageView /> */}
             </Box>
           </Box>
         </Grid>

src/pages/Products/index.jsx

 
 const Products = () => {
 
-  const [title, setTitle] = useState('')
-  const [image, setImage] = useState('')
-
   useEffect(()=>{
     
     // if user come from select collection
-    if(sessionStorage.getItem('amber-select-collection')){
-
-      let { id, name, src } = JSON.parse(sessionStorage.getItem('amber-select-collection'))
-      setTitle(name)
-      setImage(src)
-
-    }else if(sessionStorage.getItem('amber-select-category')){
+    if(sessionStorage.getItem('amber-select-product-type')){
 
-      let category = sessionStorage.getItem('amber-select-category')
-      setTitle(category)
+      let selectProductType = sessionStorage.getItem('amber-select-product-type')
 
     }else{
       window.location.href = '/'
 
   return (
     <>
-      <PageTitle title={title} image={image} />
       <Box sx={{
+        mt:15,
         px: {
           xs: 2,
           md: 12,

src/redux/slices/productSlice.js

 
 export const fetchProducts = createAsyncThunk(
   'product/fetchProducts',
-  async ({maxResults, sortBy, customQuery}) => {
+  async () => {
 
-    const response = await ProductService.getProducts(maxResults, sortBy, customQuery)
+    const response = await ProductService.getProducts()
     return response
 
   }

src/services/ProductService.js

 import { createStorefrontApiClient } from '@shopify/storefront-api-client';
 import { REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon'
-
-const defaultQuery = 'status:active, product_type:clothing, product_categroy:dresses';
-const defaultResult = 250;
-const defaultSortBy = 'TITLE';
+import { formatProductData } from '../utils/helpers'
 
 const client = createStorefrontApiClient({
   storeDomain: `https://${REACT_APP_SHOP_NAME}/api/2024-10/graphql.json`,
   publicAccessToken: REACT_APP_ACCESS_TOKEN,
 });
 
-// getProduct(5, CREATED_AT, 'product_type:clothing'); 
-const getProducts = async (maxResults = defaultResult, sortBy = defaultSortBy, customQuery = defaultQuery) => {
-
-  const query = `{
-    products(first: ${maxResults}, query: "${customQuery}", sortKey:${sortBy}) {
-      nodes {
-        id
-        title
-        productType
-        compareAtPriceRange {
-          maxVariantPrice {
-            amount
-            currencyCode
-          }
-          minVariantPrice {
-            amount
-            currencyCode
-          }
-        }
-        images(first: 4) {
-          nodes {
-            src
-            url
-          }
-        }
-        collections(first: 55) {
-          nodes {
-            title
-          }
-        }
-        variants(first: 200) {
-          nodes {
-            id
-            title
-            price {
-              amount
-              currencyCode
-            }
-          }
-        }
-      }
-      pageInfo {
-        hasNextPage
-        hasPreviousPage
-      }
-    }
-  }`
-
-  const { data, errors, extensions } = await client.request(query, {
-    variables: {
-      handle: 'sample-product',
-    },
-  });
-
-  return data.products.nodes
-
-}
-
-const getProduct = async (id = "") => {
-
-  const query = `{
-    product(id: "gid://shopify/Product/${id}") {
-      id
-      title
-      descriptionHtml
-      productType
-      compareAtPriceRange {
-        maxVariantPrice {
-          currencyCode
-          amount
-        }
-        minVariantPrice {
-          amount
-          currencyCode
-        }
-      }
-      images(first: 4) {
-        nodes {
-          src
-          url
-        }
-      }
-      variants(first: 200) {
-        nodes {
-          id
-          title
-          price {
-            amount
-            currencyCode
-          }
-          selectedOptions {
-            name
-            value
-          }
-          quantityAvailable
-        }
-      }
-      collections(first: 20) {
-        nodes {
-          title
-        }
-      }
-    }
-  }`
-
-  const { data, errors, extensions } = await client.request(query, {
-    variables: {
-      handle: 'sample-product',
-    },
-  });
-
-  return data.product
+const getProducts = async (maxResults = 2) => {
 
-}
+  let hasNextCursor = true
+  let products = []; 
+  let cursor = ``
 
-const getProductsByCollection = async (collectionId) => {
+  while (hasNextCursor) {
 
-  const query = `{
-    collection(id: "${collectionId}") {
-      products(first: 250) {
+    const query = `{
+      products(first: ${2}, ${cursor},  sortKey: CREATED_AT) {
         nodes {
           id
           title
           createdAt
           productType
           tags
-          compareAtPriceRange {
-            maxVariantPrice {
+          priceRange {
+            minVariantPrice {
               amount
               currencyCode
             }
-            minVariantPrice {
+            maxVariantPrice {
               amount
               currencyCode
             }
           }
           images(first: 4) {
             nodes {
-              src
               url
             }
           }
-          collections(first: 55) {
+          collections(first: 10) {
             nodes {
               title
+              image {
+                url
+              }
             }
           }
-        }
-      }
-    }
-  }`
-
-  const { data, errors, extensions } = await client.request(query, {
-    variables: {},
-  });
-
-  return data.collection.products.nodes
-}
-
-const getProductsByTags = async (tag) => {
-
-  let customQuery = `query: "tag:${tag}"`
-  if(tag == 'all') customQuery = ''
-
-  const query = `{
-    products(first: 250, ${customQuery}) {
-      nodes {
-        id
-        title
-        createdAt
-        productType
-        tags
-        compareAtPriceRange {
-          maxVariantPrice {
-            amount
-            currencyCode
-          }
-          minVariantPrice {
-            amount
-            currencyCode
+          variants(first: 200) {
+            nodes {
+              id
+              title
+              price {
+                amount
+                currencyCode
+              }
+            }
           }
-        }
-        images(first: 4) {
-          nodes {
-            src
-            url
+          metafield(key: "selected", namespace: "custom") {
+            key
+            value
           }
         }
-        collections(first: 5) {
-          nodes {
-            title
-          }
+        pageInfo {
+          hasNextPage
+          hasPreviousPage
+          endCursor
+          startCursor
         }
       }
-    }
-  }`
-
-  const { data, errors, extensions } = await client.request(query, {
-    variables: {},
-  });
-
-  return data.products.nodes
-}
-
-const getProductTypes = async () => {
-  const query = `{
-    productTypes(first: 250) {
-      edges {
-        node
-      }
-    }  
-  }`
-
-  const { data, errors, extensions } = await client.request(query, {
-    variables: {},
-  });
+    }`
 
-  // make sure clothing to be always the first
-  const edges = data.productTypes.edges
-  const reorderedEdges = [
-    ...edges.filter(edge => edge.node === "clothing"),
-    ...edges.filter(edge => edge.node !== "clothing")
-  ];
+    const { data, errors, extensions } = await client.request(query, {
+      variables: {},
+    });
 
-  return reorderedEdges
-}
+    let { pageInfo, nodes } = data?.products
 
-const getCollections = async (name) => {
+    products = [...products, ...nodes]
 
-  const query = `{
-    products(first: 250, query: "product_type:${name}") {
-      nodes {
-        createdAt
-        productType
-        collections(first: 1) {
-          nodes {
-            title
-            id
-            image {
-              src
-            }
-          }
-        }
-      }
+    if(pageInfo?.hasNextPage) {
+      cursor = `after:"${pageInfo?.endCursor}"`
+    }else{
+      cursor = ``
+      hasNextCursor = false
     }
-  }`
 
-  const { data, errors, extensions } = await client.request(query, {
-    variables: {},
-  });
+  }
 
-  const uniqueCollections = new Map();
+  products = products.map((product) => formatProductData(product))
 
-  // Iterate through all products
-  data.products.nodes.forEach((product) => {
-    // Iterate through each collection within a product
-    product.collections.nodes.forEach((collection) => {
-      const { title, id, image } = collection;
-
-      // Use the collection ID as a unique key to avoid duplicates
-      if (!uniqueCollections.has(id)) {
-        uniqueCollections.set(id, {
-          name: title,
-          id,
-          src: image ? image.src : null, // Handle null image gracefully
-        });
-      }
-    });
-  });
-
-  return Array.from(uniqueCollections.values());
+  return products
 
 }
 
-const getTags = async (productType) => {
+const getProduct = async (id = "") => {
 
   const query = `{
-  products(first: 250, query: "product_type:${productType}") {
-      nodes {
-        createdAt
-        tags
+    product(id: "gid://shopify/Product/${id}") {
+      id
+      title
+      productType
+      priceRange {
+        minVariantPrice {
+          amount
+          currencyCode
+        }
+        maxVariantPrice {
+          amount
+          currencyCode
+        }
+      }
+      images(first: 4) {
+        nodes {
+          url
+        }
+      }
+      collections(first: 55) {
+        nodes {
+          title
+        }
+      }
+      variants(first: 200) {
+        nodes {
+          id
+          title
+          price {
+            amount
+            currencyCode
+          }
+        }
       }
     }
   }`
 
   const { data, errors, extensions } = await client.request(query, {
-    variables: {},
-  });
-
-  const tagSet = new Set();
-
-  // Iterate through each item in the data
-  data.products.nodes.forEach(item => {
-    if (item.tags && Array.isArray(item.tags)) {
-      item.tags.forEach(tag => tagSet.add(tag));
-    }
+    variables: {
+    },
   });
 
-  // Convert the Set back into an array and return
-  return Array.from(tagSet);
+  return formatProductData(data.product)
 
 }
 
-
 const ProductService = {
   getProducts,
-  getProduct,
-  getProductsByCollection,
-  getProductsByTags,
-  getProductTypes,
-  getCollections,
-  getTags
+  getProduct
 }
 
 export default ProductService

src/utils/helpers.js

+// Cause I want to have a properly standardize product data cause I hate those "nodes" thinggy
+// and to prevent render error in case some data doesn't exist, I want a default value
+
+export const formatProductData = (product) => {
+
+    if(!product) return
+
+    return {
+        id: product?.id || null,
+        title: product?.title || "",
+        createdAt: product?.createdAt,
+        collections: product?.collections?.nodes || [],
+        tags:product?.tags || [],
+        images: product?.images?.nodes || [],
+        selected: (product?.metafield?.key == "selected") ? product?.metafield?.value == "true" : false, // cause I want to have a true false value, somehow BE return text value "true", thus == used to convert it to proper boolean value
+        minVariantPrice: product?.priceRange?.minVariantPrice || {amount:0 , currencyCode:''},
+        maxVariantPrice: product?.priceRange?.maxVariantPrice || {amount:0 , currencyCode:''},
+        productType: product?.productType || null,
+        variants: product?.variants?.nodes || []
+    }
+
+}