done mobile design

src/assets/svg/logo.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="194" height="45" viewBox="0 0 194 45">
+  <text id="AMBER" transform="translate(97 37)" fill="#fff" font-size="37" font-family="Lato-Bold, Lato" font-weight="700" letter-spacing="0.426em"><tspan x="-96.57" y="0">AMBER</tspan></text>
+</svg>

src/components/ConfirmOrder/ConfirmOrder.jsx

@@ -208,7 +208,7 @@ const ConfirmOrder = () => {
 
         <ProductSuggestion />
 
-      </Box>
+      </Box> 
 
       <Typography variant='body2' sx={{ mb: 4, color: "#AEAEAE", letterSpacing: 1, textAlign:"center", mt:3, mb:6 }}>
         <span style={{ color: "#000", fontWeight: "bold" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES

src/components/Header/Header.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { styled } from '@mui/material/styles';
-import { Box, Typography } from '@mui/material';
+import { createStyles, styled } from '@mui/material/styles';
+import { Box, Typography, Link } from '@mui/material';
 import InstagramIcon from '@mui/icons-material/Instagram';
 import FacebookIcon from '@mui/icons-material/Facebook';
 import TwitterIcon from '@mui/icons-material/Twitter';
@@ -8,8 +8,8 @@ import PinterestIcon from '@mui/icons-material/Pinterest';
 
 const Container = styled(Box)(({theme})=>({
     backgroundColor: theme.palette.primary.main,
-    paddingTop: 20,
-    paddingBottom: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
     width: "100%",
     display:"flex",
     position:"relative",
@@ -19,6 +19,12 @@ const Container = styled(Box)(({theme})=>({
     },
 }))
 
+const headerStyle = createStyles({
+    icon:{
+        fontSize:17
+    }
+})
+
 
 const Header = () => {
 
@@ -26,12 +32,12 @@ const Header = () => {
         <Container>
             <Box sx={{color:"white", px:23}}>
                 <Box sx={{display:"flex", gap:1}}>
-                    <InstagramIcon style={{ fontSize: 20 }} />
-                    <FacebookIcon style={{ fontSize: 20 }} />
-                    <TwitterIcon style={{ fontSize: 20 }} />
-                    <PinterestIcon style={{ fontSize: 20 }} />
+                    <InstagramIcon style={headerStyle.icon} />
+                    <FacebookIcon style={headerStyle.icon} />
+                    <TwitterIcon style={headerStyle.icon} />
+                    <PinterestIcon style={headerStyle.icon} />
                 </Box>
-                <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click here to subcribe now.</Typography>
+                <Typography variant="body2" sx={{position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}>Don’t miss out on our next big thing! Click <Link sx={{color:"white", textDecoration:"underline"}}> here</Link> to subcribe now.</Typography>
             </Box>
         </Container>
     );

src/components/Navbar/Navbar.jsx

@@ -8,11 +8,58 @@ import Box from "@mui/material/Box";
 import Header from "../Header";
 import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
+import LocalMallIcon from '@mui/icons-material/LocalMall';
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import logoSrc from "../../assets/svg/logo.svg";
+import { styled } from '@mui/material/styles';
+import { MenuItem, Select, FormControl, Badge } from '@mui/material';
+import MobileNav from "./components/MobileNav";
+import { TrainRounded } from "@mui/icons-material";
+
+
+
+
+const LanguageSelect = styled(Select)(({ theme }) => ({
+  backgroundColor: 'black',
+  color: 'white',
+  border: '1px solid black',
+  fontSize: 12,
+  '& .MuiSelect-icon': {
+    color: 'white',
+  },
+  '&:hover': {
+    backgroundColor: 'white',
+    color: 'black',
+  },
+  '& .MuiMenuItem-root': {
+    backgroundColor: 'black',
+    color: 'white',
+  },
+  '& .MuiMenuItem-root:hover': {
+    backgroundColor: 'white',
+    color: 'black',
+  },
+}));
+
+const LanguageSelectItem = styled(MenuItem)(() => ({
+  backgroundColor: 'black',
+  color: 'white',
+  '&:hover': {
+    backgroundColor: 'white',
+    color: 'black',
+  },
+}));
+
 
 const Navbar = () => {
+
   const [showHeader, setShowHeader] = useState(true);
   const [lastScrollPos, setLastScrollPos] = useState(0);
+  const [language, setLanguage] = useState('English');
+
+  const handleChange = (event) => {
+    setLanguage(event.target.value);
+  };
 
   useEffect(() => {
     const handleScroll = () => {
@@ -32,91 +79,142 @@ const Navbar = () => {
   }, [lastScrollPos]);
 
   return (
-    <AppBar position="fixed" sx={{ backgroundColor: "background.black" }}>
-      {/* Conditionally render the Header */}
-      {showHeader && <Header />}
-
-      <Toolbar>
-        {/* Left Section: Logo */}
-        <Typography
-          variant="h6"
-          sx={{
-            flexGrow: 0,
-            color: "white",
-            letterSpacing: 10,
-            mx: 20,
-          }}
-        >
-          AMBER
-        </Typography>
-
-        {/* Center Section: Nav Items */}
-        <Box
-          sx={{
-            flexGrow: 1,
-            display: "flex",
-            gap: 2,
-          }}
-        >
-          <Button
-            color="inherit"
-            onClick={() => {
-              window.location.href = "/products";
-            }}
-          >
-            DISCOVER
-          </Button>
-          <Button
-            color="inherit"
-            onClick={() => {
-              window.location.href = "/";
-            }}
-          >
-            HOME
-          </Button>
-          <Button
-            color="inherit"
-            onClick={() => {
-              window.location.href = "/products";
-            }}
-          >
-            BEAUTY
-          </Button>
-          <Button
-            color="inherit"
-            onClick={() => {
-              window.location.href = "/products";
-            }}
-          >
-            SALE
-          </Button>
-        </Box>
+    <>
+      <AppBar position="fixed"
+        sx={{
+          backgroundColor: {
+            xs: "rgba(0,0,0,0)",
+            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)"
+          }
+        }}
+      >
 
-        {/* Right Section: Search and Profile */}
-        <Box sx={{ display: "flex", alignItems: "center", marginRight: 20 }}>
+        {/* Conditionally render the Header */}
+        {showHeader && <Header />}
+
+        <Toolbar sx={{
+          px: {
+            xs: 2,
+            md: 10,
+            lg: 20
+          },
+          py: 0.5
+        }} disableGutters>
+
+          {/* Left Section: Logo */}
+          <Box sx={{
+            display:{
+              xs:"none",
+              md:"none",
+              lg:"block"
+            }
+          }}>
+            <img src={logoSrc} alt="Logo"
+              style={{
+                width: 150,
+                height: 50,
+              }} />
+          </Box>
+
+          {/* Center Section: Nav Items */}
           <Box
             sx={{
-              display: "flex",
-              alignItems: "center",
-              backgroundColor: "rgba(255, 255, 255, 0.15)",
-              borderRadius: 1,
-              padding: "0 8px",
+              flexGrow: 1,
+              display: {
+                xs: "none",
+                md: "none",
+                lg: "flex"
+              },
+              gap: 2,
             }}
           >
-            <SearchIcon />
-            <InputBase
-              placeholder="Search…"
+            <Button
+              color="inherit"
+              onClick={() => {
+                window.location.href = "/products";
+              }}
+            >
+              DISCOVER
+            </Button>
+            <Button
+              color="inherit"
+              onClick={() => {
+                window.location.href = "/";
+              }}
+            >
+              HOME
+            </Button>
+            <Button
+              color="inherit"
+              onClick={() => {
+                window.location.href = "/products";
+              }}
+            >
+              BEAUTY
+            </Button>
+            <Button
+              color="inherit"
+              onClick={() => {
+                window.location.href = "/products";
+              }}
+            >
+              SALE
+            </Button>
+          </Box>
+
+          {/* Right Section: Search and Profile */}
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1.2, ml: "auto" }}>
+
+            <FormControl
               sx={{
-                color: "inherit",
+                display: {
+                  xs: "none",
+                  lg: "block"
+                }
               }}
-            />
+            >
+              <LanguageSelect
+                value={language}
+                onChange={handleChange}
+                label=""
+                MenuProps={{
+                  PaperProps: {
+                    style: {
+                      backgroundColor: 'black',
+                      color: 'white'
+                    },
+                  },
+                }}
+              >
+                <LanguageSelectItem value="English">English</LanguageSelectItem>
+                <LanguageSelectItem value="Malay">Malay</LanguageSelectItem>
+                <LanguageSelectItem value="Chinese">Chinese</LanguageSelectItem>
+              </LanguageSelect>
+            </FormControl>
+
+            <IconButton color="inherit">
+              <SearchIcon sx={{ color: "white" }} />
+            </IconButton>
+
+            <Badge badgeContent={1} color="primary">
+              <LocalMallIcon color="action" sx={{ color: "white" }} />
+            </Badge>
+
+            <IconButton color="inherit">
+              <AccountCircleIcon sx={{ color: "white" }} />
+            </IconButton>
           </Box>
-          <IconButton color="inherit">
-            <AccountCircleIcon sx={{ color: "white" }} />
-          </IconButton>
-        </Box>
-      </Toolbar>
-    </AppBar>
+
+        </Toolbar>
+      </AppBar>
+      {/* <MobileNav open={true} menu={[]}/> */}
+    </>
   );
 };
 

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { Drawer, Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider } from "@mui/material";
+import logoSrc from "../../assets/svg/logo.svg";
+import InboxIcon from "@mui/icons-material/Inbox";
+import MailIcon from "@mui/icons-material/Mail";
+
+const MobileNav = ({ open, menu = [] }) => {
+  return (
+    <Drawer
+      open={open}
+      onClose={() => {}}
+      sx={{
+        "& .MuiDrawer-paper": {
+          backgroundColor: "black",
+          color: "white",
+          width: 250,
+        },
+      }}
+    >
+      {/* Logo Section */}
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: 80,
+          borderBottom: "1px solid white",
+        }}
+      >
+        <img
+          src={logoSrc}
+          alt="Logo"
+          style={{
+            width: 150,
+            height: 50,
+          }}
+        />
+      </Box>
+
+      {/* Main Navigation */}
+      <Box sx={{ width: 250 }} role="presentation">
+        <List>
+          {menu.map((text, index) => (
+            <ListItem key={text} disablePadding>
+              <ListItemButton
+                sx={{
+                  color: "white",
+                  "&:hover": {
+                    backgroundColor: "white",
+                    color: "black",
+                  },
+                }}
+              >
+                <ListItemIcon
+                  sx={{
+                    color: "white",
+                    "&:hover": {
+                      color: "black",
+                    },
+                  }}
+                >
+                  {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                </ListItemIcon>
+                <ListItemText primary={text} />
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      </Box>
+    </Drawer>
+  );
+};
+
+export default MobileNav;

src/components/Navbar/components/MobileNav/index.js

@@ -0,0 +1 @@
+export {default} from "./MobileNav"