disable atome and new navbar link

src/App.js

@@ -9,6 +9,7 @@ import ReturnExchange from './pages/ReturnExchange';
 import PrivacyNotice from './pages/PrivacyNotice';
 import ShoppingFAQs from './pages/ShoppingFAQs';
 import DeliveryInfo from './pages/DeliveryInfo';
+import ContactUs from './pages/ContactUs';
 import Product from './pages/Products/Product';
 import Checkout from './pages/Checkout';
 import Navbar from './components/Navbar';
@@ -68,6 +69,7 @@ function App() {
           <Route path='/return_and_exchange' element={<ReturnExchange />} /> 
           <Route path='/privacy_notice' element={<PrivacyNotice />} />
           <Route path='/shopping_faqs' element={<ShoppingFAQs />} /> 
+          <Route path='/contact_us' element={<ContactUs />} />
           <Route path='/collection/:pid' element={<Collection />}/>
 
         </Routes>

src/components/Navbar/Navbar.jsx

@@ -123,6 +123,7 @@ const Navbar = () => {
   const [openSideMenu, setOpenSideMenu] = useState(false);
   const [openSideCart, setOpenSideCart] = useState(false);
   const [navItem, setNavItem] = useState([]);
+  const [navItemCompanyInfo, setNavItemCompanyInfo] = useState([]);
 
   const [displayCollection, setDisplayCollection] = useState({
     productType: null,
@@ -162,8 +163,27 @@ const Navbar = () => {
 
       let navItemData = mapProductTypesWithCollections(products)
       navItemData = getUniqueCollections(navItemData)
+
       setNavItem(navItemData)
 
+      // extra info for the navbar
+      setNavItemCompanyInfo([{
+        name:"DELIVERY INFORMATION",
+        link:"/delivery_info"
+      },
+      {
+        name:"SALE TERMS & CONDITIONS",
+        link:"/sale_terms_and_condition"
+      },
+      {
+        name:"RETURNS & REFUNDS",
+        link:"/return_and_exchange"
+      },
+      {
+        name:"CONTACT US",
+        link:"/contact_us"
+      }]);
+
     }
 
   }, [products])
@@ -411,6 +431,50 @@ const Navbar = () => {
                   }}>{productType}</Typography>
               </Button>))}
 
+              {navItemCompanyInfo.map(({ name, link }) => (<Button
+                sx={{
+                  position: "relative",
+                  ':hover': {
+                    backgroundColor: "rgba(0,0,0,0)",
+                  }
+                }}
+                color="inherit"
+                onClick={() => {
+                  window.location.href = `${link}`;
+                }}
+              >
+                <Typography variant="body2"
+                  className="navItem"
+                  sx={{
+                    fontSize: {
+                      xs: "0.73rem",
+                      sm: "0.73rem",
+                      md: "0.875rem",
+                    },
+                    color: (isAtTop) ? "white" : "black",
+                    transition: "all 0.3s ease-in-out",
+                    ":hover": {
+                      color: "#95AAC5 !important"
+                    },
+                    "&::after": {
+                      content: '""',
+                      position: "absolute",
+                      left: "50%",
+                      transform: "translateX(-50%)",
+                      bottom: 2,
+                      width: "0%",
+                      height: "2px", // Thickness of the underline
+                      backgroundColor: "#95AAC5",
+                      transition: "width 0.3s ease-in-out",
+                    },
+                    ":hover::after": {
+                      width: "70%", // Expands on hover
+                    },
+                  }}>{name}</Typography>
+              </Button>))}
+
+
+
             </Box>
 
             {/* Right Section: Search and Profile */}
@@ -514,7 +578,7 @@ const Navbar = () => {
       </AppBar>
       {showSearch && <SearchProduct onClose={() => { setShowSearch(false) }} />}
 
-      <MobileNav open={openSideMenu} menu={navItem} onClose={() => { setOpenSideMenu(false) }} />
+      <MobileNav open={openSideMenu} menu={navItem} infomenu={navItemCompanyInfo} onClose={() => { setOpenSideMenu(false) }} />
       <SideCart open={openSideCart} onClose={() => { setOpenSideCart(false) }} />
 
     </>

src/components/Navbar/components/MobileNav/MobileNav.jsx

@@ -5,7 +5,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Grid from '@mui/material/Grid2';
 import logoSrc from "../../../../assets/images/amberlogo.png";
 
-const MobileNav = ({ open, onClose, menu = [] }) => {
+const MobileNav = ({ open, onClose, menu = [], infomenu = [] }) => {
 
   // React.useEffect(()=>{
 
@@ -20,7 +20,7 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
       <Grid
         size={6}
         className="animate__animated animate__fadeIn animate__fast"
-        sx={{pr:1, pb:1}}
+        sx={{ pr: 1, pb: 1 }}
       >
         <Box
           sx={{
@@ -31,7 +31,7 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
             paddingTop: "80%",
             position: "relative",
             cursor: "pointer",
-            mb:1,
+            mb: 1,
             transition: "transform 0.3s ease",
             ":hover": {
               transform: "scale(1.1)"
@@ -168,6 +168,37 @@ const MobileNav = ({ open, onClose, menu = [] }) => {
           </Accordion>
         ))}
 
+        {infomenu.map(({ name, link }) => (
+          <Accordion
+            disableGutters={true}
+            onClick={() => {
+              window.location.href = `${link}`;
+            }}
+            sx={{
+              backgroundColor: "rgba(0,0,0,0)",
+              boxShadow: "none"
+            }}>
+            <AccordionSummary
+              aria-controls="panel1-content"
+              id="panel1-header"
+            >
+              <Typography
+                variant="body1"
+                sx={{
+                  fontSize: {
+                    xs: "0.73rem",
+                    sm: "0.73rem",
+                    md: "0.875rem",
+                  },
+                }}
+              >
+                {name?.toUpperCase()}
+              </Typography>
+            </AccordionSummary>
+          </Accordion>
+        ))}
+
+
       </Box>
     </Drawer>
   );

src/components/ProductList/ProductList.jsx

@@ -15,6 +15,7 @@ import { useSelector, useDispatch } from "react-redux";
 import { fetchProducts } from "../../redux/slices/productSlice";
 import { useNavigate } from "react-router-dom";
 import defaultImage from "../../assets/images/default.png"
+import atomeLogo from "../../assets/images/atome.webp"
 
 //UTIL FUNCTION
 function getAllTags(data) {
@@ -130,7 +131,7 @@ const ProductList = ({ size = 99999 }) => {
 
       // Collection
       newFilteredProducts = newFilteredProducts.filter((product) => {
-        if (collection == "all" || collection == "collection" ) {
+        if (collection == "all" || collection == "collection") {
           return product.productType === productType;
         } else {
           return (
@@ -293,6 +294,19 @@ const ProductList = ({ size = 99999 }) => {
               {`${minDiscountPriceCurrency} ${parseFloat(minDiscountPrice).toFixed(2)}`}
             </Typography>}
 
+            {/* <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "100",
+                fontSize: {
+                  xs: "0.73rem",
+                  sm: "0.73rem",
+                  md: "0.875rem",
+                },
+              }}
+            >
+              or 3 payments of <span style={{fontWeight:"900"}}>  {`${parseFloat((minPrice/3)).toFixed(2)} ${minPriceCurrency}`}</span> with <span style={{fontWeight:"900"}}>Atome <img style={{marginLeft:5, verticalAlign:"middle"}} width="15" src={atomeLogo} /> </span>
+            </Typography> */}
 
           </Box>
         </Box>
@@ -308,9 +322,9 @@ const ProductList = ({ size = 99999 }) => {
           display: "flex",
           justifyContent: "space-between",
           py: {
-            xs:0,
-            sm:0,
-            md:1
+            xs: 0,
+            sm: 0,
+            md: 1
           },
           flexDirection: {
             xs: "column",

src/pages/ContactUs.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Box, Typography } from '@mui/material'
+import LocalPhoneIcon from '@mui/icons-material/LocalPhone'
+
+const ContactUs = () => {
+  return (
+    <Box sx={{
+      mt: 10,
+      px: {
+        xs: 2,
+        md: 5,
+        lg: 5
+      },
+      mb: {
+        xs: 0,
+        md: 5,
+        lg: 10
+      },
+      display: "flex",
+      height: "50vh",
+    }}>
+
+      <Box sx={{mx:"auto", my:"auto"}}>
+
+        <Typography variant="h4" sx={{ maxWidth: 650, mb: 2 }}><span style={{ fontWeight: "bold" }}>AMBER MODE (M) SDN BHD (1109469-M) <br /> </span> Lot G-77, Wangsa Walk Mall, <br />Wangsa Avenue, <br />No.9, Jalan Wangsa Perdana 1, <br />Bandar Wangsa Maju, <br />53300 Kuala Lumpur, <br />Malaysia</Typography>
+        <Typography
+          variant="h4"
+          sx={{ display: "flex", alignItems: "center" }}
+        >
+          <LocalPhoneIcon sx={{ mr: 1 }} />
+          +60 17228 2072
+        </Typography>
+
+      </Box>
+
+    </Box>
+  )
+}
+
+export default ContactUs