done mobile view

src/components/BillingForm/BillingForm.jsx

@@ -169,7 +169,7 @@ const BillingForm = () => {
         p: 2,
         mb: 10
       }}>
-        <Grid size={6}>
+        <Grid size={{xs:12, md:6}} sx={{mb:{xs:10, md:0}}}>
           <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>SHIPPING ADDRESS</Typography>
           <Box sx={{ display: "flex", flexDirection: "column" }}>
             <Typography variant="body2" sx={{ fontWeight: "400" }}>Mr. David Olson</Typography>
@@ -181,7 +181,7 @@ const BillingForm = () => {
             <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>CHANGE SHIPPING ADDRESS</Link>
           </Box>
         </Grid>
-        <Grid size={6}>
+        <Grid size={{xs:12, md:6}}>
           <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>BILLING ADDRESS</Typography>
           <Box sx={{ display: "flex", flexDirection: "column" }}>
             <Typography variant="body2" sx={{ fontWeight: "400" }}>Mr. David Olson</Typography>
@@ -204,13 +204,13 @@ const BillingForm = () => {
         p: 2,
         mb: 10
       }}>
-        <Grid size={6}>
+        <Grid size={{xs:12, md:6}} sx={{mb:{xs:10, md:0}}}>
           <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>EXPRESS DELIVERY (Free)</Typography>
           <Box sx={{ display: "flex", flexDirection: "column" }}>
             <Typography variant="body2" sx={{ fontWeight: "400" }}>Delivered in 3-4 business days</Typography>
           </Box>
         </Grid>
-        <Grid size={6}>
+        <Grid size={{xs:12, md:6}}>
           <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>BILLING ADDRESS</Typography>
           <Box sx={{ display: "flex", flexDirection: "column" }}>
             <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>Caibre Premium Packaging</Typography>
@@ -228,7 +228,7 @@ const BillingForm = () => {
         p: 2,
         mb: 5
       }}>
-        <Grid size={6}>
+        <Grid size={{xs:12, md:6}}>
           <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>PAYMENT METHOD</Typography>
           <Grid container spacing={2}>
 

src/components/ConfirmOrder/ConfirmOrder.jsx

@@ -161,10 +161,10 @@ const ConfirmOrder = () => {
 
       <Box>
         <Grid container>
-          <Grid size={6} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)" }}>
+          <Grid size={{xs:12, md:6}} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", mb:{xs:2, md:0} }}>
             <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>PAYMENT METHOD</Typography>
-            <Box sx={{ display: "flex", flexDirection: "row" }}>
-              <Typography variant='body2' sx={{ mr: 5 }}>PAYMENT METHOD</Typography>
+            <Box sx={{ display: "flex", flexDirection: {xs:"column", md:"row"} }}>
+              <Typography variant='body2' sx={{ mr: 5 }}>Credit Card Number</Typography>
               <Typography variant="body2" sx={{ display: 'flex' }}>
                 {[...Array(12)].map((_, index) => (
                   <FiberManualRecordIcon sx={{ fontSize: 'inherit', verticalAlign: 'middle', mr: ((index + 1) % 4 == 0) ? 2 : 0 }} />
@@ -173,8 +173,9 @@ const ConfirmOrder = () => {
               </Typography>
             </Box>
           </Grid>
-          <Grid size={6}>
+          <Grid size={{xs:12, md:6}} sx={{pl:{xs:0, md:2}, pb:2}}>
             <Typography variant='body1' sx={{ fontWeight: "500", mb: 5 }}>SHIPPING DETAILS</Typography>
+            <Typography variant='body2' sx={{mb:3}}>Your will receive your order in 3-4 business days</Typography>
             <Button
               variant="contained"
               color="common.black"

src/components/Feature/Feature.jsx

@@ -17,10 +17,12 @@ const Feature = () => {
     <Box
       sx={{
         display: 'flex',
+        flexDirection: { xs: 'column', sm: 'row' }, // Stack on small screens, horizontal on larger screens
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: 2,
-        mt:5
+        mt: 5,
+        gap: { xs: 4, sm: 0 }, // Add spacing between items on smaller screens
       }}
     >
       {features.map((feature, index) => (
@@ -32,7 +34,7 @@ const Feature = () => {
             alignItems: 'center',
             textAlign: 'center',
             flex: 1,
-            borderRight: index < features.length - 1 ? '1px solid #CFCFCF' : 'none', // Add right border except for the last item
+            borderRight: { sm: index < features.length - 1 ? '1px solid #CFCFCF' : 'none' }, // Only show right border on larger screens
             padding: 2,
           }}
         >

src/components/Filter/Filter.jsx

@@ -84,7 +84,7 @@ const Filter = () => {
                     </Select>
                 </FormControl>
 
-                <FormControl sx={{ m: 1, display:"flex", flexDirection:"row" }} variant="standard">
+                <FormControl sx={{ m: 1, display:{xs:"none", sm:"none", md:"flex" }, flexDirection:"row" }} variant="standard">
                     <Typography variant="body2" sx={{mr:1, my:"auto"}}>Sort By</Typography>
                     <Select
                         labelId="demo-customized-select-label"
@@ -99,7 +99,7 @@ const Filter = () => {
                     </Select>
                 </FormControl>
 
-                <FormControl sx={{ m: 1, display:"flex", flexDirection:"row" }} variant="standard">
+                <FormControl sx={{ m: 1, display:{xs:"none", sm:"none", md:"flex" }, flexDirection:"row" }} variant="standard">
                     <Typography variant="body2" sx={{mr:1, my:"auto"}}>Show</Typography>
                     <Select
                         labelId="demo-customized-select-label"

src/components/Footer/Footer.jsx

@@ -9,13 +9,18 @@ const Footer = () => {
       sx={{
         backgroundColor: 'background.default',
         mb: 10,
-        mt: 15
+        mt: 15,
+        px:{
+          xs:2,
+          md:12,
+          lg:20
+        }
       }}
     >
 
       <Grid container spacing={2} justifyContent="space-evenly">
 
-        <Grid item xs={12} sm={6} md={3} sx={{ position: "relative" }}>
+        <Grid item size={{xs:12, sm:6, md:3}} sx={{ position: "relative" }}>
 
           <Typography variant="h5" sx={{
             color: 'primary.main', // Use primary color
@@ -34,7 +39,7 @@ const Footer = () => {
           <Typography variant="body2" sx={{ maxWidth: 250 }}><span style={{ fontWeight: "bold" }}>Address:</span> Lot G-77, Wangsa Walk Mall, Wangsa Avenue, No.9, Jalan Wangsa Perdana 1, Bandar Wangsa Maju, 53300 Kuala Lumpur, Malaysia</Typography>
         </Grid>
 
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item size={{xs:12, sm:6, md:3}}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Get Help
           </Typography>
@@ -57,7 +62,7 @@ const Footer = () => {
           </nav>
         </Grid>
 
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item size={{xs:12, sm:6, md:3}}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Popular Categories
           </Typography>
@@ -82,7 +87,7 @@ const Footer = () => {
 
 
 
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item size={{xs:12, sm:6, md:3}}>
           <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
             Let’s stay in touch
           </Typography>

src/components/Navbar/Navbar.jsx

@@ -14,10 +14,11 @@ 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";
-
-
-
+import MenuIcon from "@mui/icons-material/Menu";
+import CategoryIcon from '@mui/icons-material/Category';
+import HomeIcon from '@mui/icons-material/Home';
+import BrushIcon from '@mui/icons-material/Brush';
+import LoyaltyIcon from '@mui/icons-material/Loyalty';
 
 const LanguageSelect = styled(Select)(({ theme }) => ({
   backgroundColor: 'black',
@@ -57,6 +58,35 @@ const Navbar = () => {
   const [lastScrollPos, setLastScrollPos] = useState(0);
   const [language, setLanguage] = useState('English');
 
+  const [open, setOpen] = React.useState(false);
+
+  const toggleDrawer = (newOpen) => () => {
+    setOpen(newOpen);
+  };
+
+  const navItem = [
+    {
+      title: "DISCOVER",
+      link: "/products",
+      icon: <CategoryIcon />
+    },
+    {
+      title: "HOME",
+      link: "/",
+      icon: <HomeIcon />
+    },
+    {
+      title: "BEAUTY",
+      link: "/products",
+      icon: <BrushIcon />
+    },
+    {
+      title: "SALE",
+      link: "/products",
+      icon: <LoyaltyIcon />
+    }
+  ]
+
   const handleChange = (event) => {
     setLanguage(event.target.value);
   };
@@ -83,8 +113,8 @@ const Navbar = () => {
       <AppBar position="fixed"
         sx={{
           backgroundColor: {
-            xs: "rgba(0,0,0,0)",
-            md: "rgba(0,0,0,0.9)",
+            xs: showHeader ? "rgba(0,0,0,0)" : "background.black",// somehow the logic for scrolling header is the same so I just gonna use showHeader state
+            md: "rgba(0,0,0,0.9)", 
             lg: "background.black"
           },
           boxShadow: {
@@ -109,10 +139,10 @@ const Navbar = () => {
 
           {/* Left Section: Logo */}
           <Box sx={{
-            display:{
-              xs:"none",
-              md:"none",
-              lg:"block"
+            display: {
+              xs: "none",
+              md: "none",
+              lg: "block"
             }
           }}>
             <img src={logoSrc} alt="Logo"
@@ -122,6 +152,30 @@ const Navbar = () => {
               }} />
           </Box>
 
+          {/* SIDEBAR BUTTON */}
+          <Box sx={{
+            display: {
+              xs: "block",
+              md: "block",
+              lg: "none"
+            }
+          }}>
+
+            <IconButton
+              onClick={() => setOpen(true)}
+              sx={{
+                backgroundColor: "transparent",
+                color: "white",
+                "&:hover": {
+                  backgroundColor: "rgba(0, 0, 0, 0.1)",
+                },
+              }}
+            >
+              <MenuIcon fontSize="large" />
+            </IconButton>
+
+          </Box>
+
           {/* Center Section: Nav Items */}
           <Box
             sx={{
@@ -134,38 +188,16 @@ const Navbar = () => {
               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
+
+            {navItem.map(({ title, link }) => (<Button
               color="inherit"
               onClick={() => {
-                window.location.href = "/products";
+                window.location.href = link;
               }}
             >
-              SALE
-            </Button>
+              {title}
+            </Button>))}
+
           </Box>
 
           {/* Right Section: Search and Profile */}
@@ -213,7 +245,8 @@ const Navbar = () => {
 
         </Toolbar>
       </AppBar>
-      {/* <MobileNav open={true} menu={[]}/> */}
+
+      <MobileNav open={open} menu={navItem} onClose={()=>{setOpen(false)}} />
     </>
   );
 };

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

@@ -1,14 +1,12 @@
 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";
+import logoSrc from "../../../../assets/svg/logo.svg";
 
-const MobileNav = ({ open, menu = [] }) => {
+const MobileNav = ({ open, onClose, menu = [] }) => {
   return (
     <Drawer
       open={open}
-      onClose={() => {}}
+      onClose={onClose}
       sx={{
         "& .MuiDrawer-paper": {
           backgroundColor: "black",
@@ -24,7 +22,6 @@ const MobileNav = ({ open, menu = [] }) => {
           justifyContent: "center",
           alignItems: "center",
           height: 80,
-          borderBottom: "1px solid white",
         }}
       >
         <img
@@ -40,8 +37,8 @@ const MobileNav = ({ open, menu = [] }) => {
       {/* Main Navigation */}
       <Box sx={{ width: 250 }} role="presentation">
         <List>
-          {menu.map((text, index) => (
-            <ListItem key={text} disablePadding>
+          {menu.map(({title, link, icon}) => (
+            <ListItem key={title} disablePadding>
               <ListItemButton
                 sx={{
                   color: "white",
@@ -51,17 +48,8 @@ const MobileNav = ({ open, menu = [] }) => {
                   },
                 }}
               >
-                <ListItemIcon
-                  sx={{
-                    color: "white",
-                    "&:hover": {
-                      color: "black",
-                    },
-                  }}
-                >
-                  {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-                </ListItemIcon>
-                <ListItemText primary={text} />
+                {icon}
+                <ListItemText sx={{ml:2}} primary={title} />
               </ListItemButton>
             </ListItem>
           ))}

src/components/NewsLetter/NewsLetter.jsx

@@ -31,7 +31,7 @@ const NewsLetter = () => {
         }}
       >
 
-        <Box sx={{ width: "35%", backgroundColor: "rgba(255,255,255, 0.5)", padding: 10, textAlign:"center", color:"black" }}>
+        <Box sx={{ width: {xs:"80%", md:"35%"}, backgroundColor: "rgba(255,255,255, 0.5)", padding: 10, textAlign:"center", color:"black" }}>
 
           <Typography variant='h3'>
             Let's Stay in touch

src/components/ProductHistoryList/ProductHistoryList.jsx

@@ -69,7 +69,7 @@ const ProductHistoryList = () => {
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {images.map((image, index) => (<Grid item size={2} key={index}>
+        {images.map((image, index) => (<Grid item size={{xs:12, md:2}} key={index}>
           <Box
             sx={{
               overflow: 'hidden',

src/components/ProductList/ProductList.jsx

@@ -2,9 +2,7 @@ import React from 'react';
 import { Box, Typography, Button } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 
-const ProductList = ({ size }) => {
-
-
+const ProductList = ({ size = 99999 }) => {
 
   const images = [
     {
@@ -64,7 +62,7 @@ const ProductList = ({ size }) => {
 
           if (index < size) {
 
-            return <Grid item size={4} key={index}>
+            return <Grid item size={{xs:6, sm:6, md:3}} key={index}>
               <Box
                 onClick={()=>{ window.location.href = `/products/${image.id}` }}
                 sx={{
@@ -104,8 +102,6 @@ const ProductList = ({ size }) => {
                 </Box>
               </Box>
             </Grid>
-
-
           }
 
         })}

src/components/ProductSelected/ProductSelected.jsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { Box, Typography, Button } from '@mui/material';
+import { Box, Typography, Button, useMediaQuery } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 
 const ProductSelected = () => {
 
-
-
   const images = [
     {
       url: 'https://via.placeholder.com/300',
@@ -37,10 +35,14 @@ const ProductSelected = () => {
     }
   ];
 
+  const isMobileScreen = useMediaQuery((theme) => theme.breakpoints.down('sm'))
+
+  const displayedImages = isMobileScreen ? images.slice(0, 2) : images;
+
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {images.map((image, index) => (<Grid item size={3} key={index}>
+        {displayedImages.map((image, index) => (<Grid item size={{ xs: 6, md: 3 }} key={index}>
           <Box
             sx={{
               overflow: 'hidden',

src/components/ProductSuggestion/ProductSuggestion.jsx

@@ -39,7 +39,7 @@ const ProductSuggestion = () => {
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {images.map((image, index) => (<Grid item size={3} key={index}>
+        {images.map((image, index) => (<Grid item size={{xs:12, md:3}} key={index}>
           <Box
             sx={{
               overflow: 'hidden',

src/components/ShippingForm/ShippingForm.jsx

@@ -43,8 +43,17 @@ const ShippingForm = () => {
       }}
     >
       <Grid container>
-
-        <Grid item size={6} sx={{ gap: 3, display: 'flex', flexDirection: 'column' }}>
+        {/* Left Column */}
+        <Grid
+          item
+          size={{ xs: 12, md: 6 }}
+          sx={{
+            gap: 3,
+            display: 'flex',
+            flexDirection: 'column',
+            order: { xs: 2, md: 1 }, // Flip order on xs
+          }}
+        >
           <FieldContainer label="Title">
             <TextField variant="outlined" fullWidth required />
           </FieldContainer>
@@ -67,18 +76,35 @@ const ShippingForm = () => {
           </FieldContainer>
         </Grid>
 
-        <Grid item size={6} sx={{ gap: 3, display: 'flex', flexDirection: 'column', px: 4, height: "100%" }}>
-
+        {/* Right Column */}
+        <Grid
+          item
+          size={{ xs: 12, md: 6 }}
+          sx={{
+            gap: 3,
+            display: 'flex',
+            flexDirection: 'column',
+            px: { xs: 0, md: 5 },
+            height: '100%',
+            py: { xs: 3, md: 0 },
+            order: { xs: 1, md: 2 }, // Flip order on xs
+          }}
+        >
           <Grid
             container
             spacing={2}
-            sx={{ position: 'relative', width: '100%', backgroundColor: '#F7FBFF', textAlign: 'center' }}
+            sx={{
+              position: 'relative',
+              width: '100%',
+              backgroundColor: '#F7FBFF',
+              textAlign: 'center',
+            }}
           >
             {/* First Section */}
             <Grid
               item
               size={12}
-              sx={{ px: 5, py: 3, borderBottom: '1px solid #ddd', mx: "auto" }}
+              sx={{ px: 5, py: 3, borderBottom: '1px solid #ddd', mx: 'auto' }}
             >
               <Typography variant="h6" sx={{ fontWeight: 500 }}>
                 SHIPPING RESTRICTIONS AND DUTIES MAY APPLY
@@ -86,18 +112,22 @@ const ShippingForm = () => {
             </Grid>
 
             {/* Second Section */}
-            <Grid item size={12} sx={{ px: 5, py: 3, mx: "auto" }}>
+            <Grid item size={12} sx={{ px: 5, py: 3, mx: 'auto' }}>
               <Typography variant="h6" sx={{ fontWeight: 500 }}>
                 NEED HELP?
               </Typography>
-              <Typography variant="body2" sx={{ mb: 1 }}>CALL US: +44 (0)10 2345 6789</Typography>
-              <Typography variant="body2" sx={{ mb: 1 }}>EMAIL CUSTOMER CARE | SHIPPING INFORMATION</Typography>
-              <Typography variant="body2" sx={{ mb: 1 }}>RETURNS & EXCHANGES</Typography>
+              <Typography variant="body2" sx={{ mb: 1 }}>
+                CALL US: +44 (0)10 2345 6789
+              </Typography>
+              <Typography variant="body2" sx={{ mb: 1 }}>
+                EMAIL CUSTOMER CARE | SHIPPING INFORMATION
+              </Typography>
+              <Typography variant="body2" sx={{ mb: 1 }}>
+                RETURNS & EXCHANGES
+              </Typography>
             </Grid>
           </Grid>
-
         </Grid>
-
       </Grid>
 
       <FieldContainer label="Address Line 1">

src/components/SocialMedia/SocialMedia.jsx

@@ -15,13 +15,14 @@ const SocialMedia = () => {
     <Box
       sx={{
         display: 'flex',
-        justifyContent: 'center',
+        flexDirection: { xs: 'column', sm: 'row' }, // Stack on small screens
+        justifyContent: { xs: 'center', sm: 'space-around' }, // Adjust spacing
         alignItems: 'center',
-        gap: 5,
+        gap: { xs: 2, sm: 5 }, // Smaller gap on small screens
         padding: 2,
         py: 4,
-        borderTop:"1px solid #CFCFCF",
-        borderBottom:"1px solid #CFCFCF"
+        borderTop: '1px solid #CFCFCF',
+        borderBottom: '1px solid #CFCFCF',
       }}
     >
       {socialMedia.map((media, index) => (
@@ -29,7 +30,7 @@ const SocialMedia = () => {
           key={index}
           sx={{
             display: 'flex',
-            flexDirection: 'row',
+            flexDirection: { xs: 'column', sm: 'row' }, // Stack icon and text on small screens
             alignItems: 'center',
             gap: 1,
           }}

src/components/VideoAds/VideoAds.jsx

@@ -10,6 +10,7 @@ const VideoAds = ({ video_url, height, width }) => {
         overflow: 'hidden',
         width: width || '100%',
         height: height || '300px',
+        
       }}
     >
       <video

src/pages/Cart.jsx

@@ -40,20 +40,32 @@ const Cart = () => {
 
   return (
     <>
-      <Box sx={{ px: 24, my: 10 }}>
+      <Box sx={{
+        px: {
+          xs: 2,
+          md: 12,
+          lg: 20
+        },
+        mb: {
+          xs: 0,
+          md: 5,
+          lg: 10
+        },
+        mt:10
+      }}>
 
 
         {/* Header */}
-        <Grid container spacing={2} alignItems="center" sx={{ mb: 5 }}>
+        <Grid container spacing={2} alignItems="center" sx={{ mb: 5, flexDirection: { xs: 'column-reverse', lg: 'row' } }}> 
 
           {/* Type */}
-          <Grid item size={2}>
+          <Grid item size={{xs:12, lg:2}}>
             <Typography variant="body2">
-              <p>Mens Fashion <span style={{ fontWeight: "bold", marginLeft: 10, display: "inline-block" }}>Shopping Bag</span></p>
+              <p>Mens Fashion <span style={{ fontWeight: "bold", display: "inline-block" }}>Shopping Bag</span></p>
             </Typography>
           </Grid>
 
-          <Grid item size={4} offset={{ xs: 3 }}>
+          <Grid item size={{xs:12, md:4}}>
             <Typography variant="h5" sx={{ fontWeight: "bold" }}>
               SHOPPING BAG
             </Typography>
@@ -135,7 +147,7 @@ const Cart = () => {
         {/* INVOICES */}
         <Grid container spacing={2} sx={{ mb: 5 }}>
 
-          <Grid item size={3} sx={{ ml: "auto" }}>
+          <Grid item size={{xs:12, sm:4, md:3}} sx={{ ml: "auto" }}>
             <Box
               display="flex"
               justifyContent="space-between"
@@ -178,18 +190,22 @@ const Cart = () => {
 
         {/* BUY NOW */}
         <Box sx={{ mb: 15 }}>
-          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection:{xs:"column-reverse", md:"row" } }}>
             <Typography variant='body2'><span style={{ fontWeight: "bolder" }}>NEED HELP?</span> CALL US: +44 (0)10 2345 6789 | EMAIL CUSTOMER CARE | SHIPPING INFORMATION | RETURNS & EXCHANGES</Typography>
             <Button
               variant="contained"
               color="common.black"
-              onClick={()=>{window.location.href = "/checkout"}}
+              onClick={() => { window.location.href = "/checkout" }}
               sx={{
                 backgroundColor: (theme) => theme.palette.common.black,
                 color: "white",
                 textTransform: "none",
                 px: 8,
                 py: 2,
+                mb: {
+                  xs:5,
+                  md:0
+                },
                 "&:hover": {
                   backgroundColor: (theme) => theme.palette.grey[900],
                 },

src/pages/Checkout.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Box, Button, IconButton, TextField, Typography } from '@mui/material'
+import { Box, Typography, Link } from '@mui/material'
 import SocialMedia from '../components/SocialMedia'
 import Feature from '../components/Feature'
 import LoginForm from '../components/LoginForm'
@@ -13,9 +13,22 @@ import Grid from '@mui/material/Grid2';
 const Checkout = () => {
 
   const [content, setContent] = useState(0);
+  const [showLoginForm, setShowLoginForm] = useState(true);
 
   return (
-    <Box sx={{ px: 24, my: 10 }}>
+    <Box sx={{
+      px: {
+        xs: 2,
+        md: 12,
+        lg: 20
+      },
+      mb: {
+        xs: 0,
+        md: 5,
+        lg: 10
+      },
+      mt: 10
+    }}>
 
       {/* Header */}
       <Grid container spacing={2} sx={{ mb: 5 }}>
@@ -50,32 +63,64 @@ const Checkout = () => {
       {/* Content */}
       {(content == 0) && <Grid container sx={{ mb: 5 }}>
 
-        <Grid item size={6} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)", py: 4, textAlign: "center" }}>
+        <Grid item size={{ xs: 12, md: 6 }} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)", py: 4, textAlign: "center", display: { xs: "none", md: "block" } }}>
 
           <Typography variant="body1" sx={{ fontWeight: "500" }}>EXISTING CUSTOMER</Typography>
 
         </Grid>
 
-        <Grid item size={6} sx={{ textAlign: "center", py: 4, borderBottom: "1px solid rgba(0,0,0,0.2)" }}>
+        <Grid item size={{ xs: 12, md: 6 }} sx={{ textAlign: "center", py: 4, borderBottom: "1px solid rgba(0,0,0,0.2)", display: { xs: "none", md: "block" } }}>
 
           <Typography variant="body1" sx={{ fontWeight: "500" }}>NEW CUSTOMER</Typography>
 
         </Grid>
 
-        <Grid item size={6} sx={{ borderRight: "1px solid rgba(0,0,0,0.2)", py: 4, textAlign: "center", px: 8 }}>
+        <Grid
+          item
+          size={{ xs: 12, md: 6 }}
+          sx={{
+            borderRight: { xs: "none", md: "1px solid rgba(0,0,0,0.2)" },
+            py: 4,
+            textAlign: "center",
+            px: 8,
+            display: {
+              xs: showLoginForm ? "block" : "none",
+              md: "block"
+            }
+          }}>
+
+          <Typography variant="h6" sx={{ fontWeight: "500", mb: 3, display: { xs: "block", md: "none" } }}>EXISTING CUSTOMER</Typography>
 
           <Typography variant="body2">Make purchases faster using previously saved details. Track previous orders and easily request returns from the website.</Typography>
 
           <LoginForm />
 
+          <Typography variant="body1" sx={{ fontWeight: "400", mt: 5, display: { xs: "block", md: "none" } }}>Didnt have any Account? <Link onClick={() => { setShowLoginForm(false) }} sx={{ textDecoration: "underline" }}> here</Link> to subcribe now.</Typography>
+
+
         </Grid>
 
-        <Grid item size={6} sx={{ textAlign: "center", py: 4, px: 8 }}>
+        <Grid
+          item
+          size={{ xs: 12, md: 6 }}
+          sx={{
+            textAlign: "center",
+            py: 4,
+            px: 8,
+            display: {
+              xs: showLoginForm ? "none" : "block",
+              md: "block"
+            }
+          }}>
+
+          <Typography variant="h6" sx={{ fontWeight: "500", mb: 3, display: { xs: "block", md: "none" } }}>NEW CUSTOMER</Typography>
 
           <Typography variant="body2">You’ll need an account to purchase watches, track and review orders, and manage your personal details.</Typography>
 
           <SignUpForm />
 
+          <Typography variant="body1" sx={{ fontWeight: "400", mt: 5, display: { xs: "block", md: "none" } }}>Already have an Account? <Link onClick={() => { setShowLoginForm(true) }} sx={{ textDecoration: "underline" }}> here</Link> to subcribe now.</Typography>
+
         </Grid>
 
 
@@ -83,25 +128,27 @@ const Checkout = () => {
 
       {(content == 1) && <Grid container sx={{ mb: 5 }}>
         <Grid item size={12}>
-          <ShippingForm/>
+          <ShippingForm />
         </Grid>
       </Grid>}
 
       {(content == 2) && <Grid container sx={{ mb: 5 }}>
         <Grid item size={12}>
-          <BillingForm/>
+          <BillingForm />
         </Grid>
       </Grid>}
 
       {(content == 3) && <Grid container sx={{ mb: 5 }}>
         <Grid item size={12}>
-          <ConfirmOrder/>
+          <ConfirmOrder />
         </Grid>
       </Grid>}
 
 
-      <SocialMedia />
-      <Feature />
+      <Box sx={{display: {xs:"none", md:"block"}  }}>
+        <SocialMedia />
+        <Feature />
+      </Box>
 
     </Box>
   )

src/pages/Home.jsx

@@ -17,48 +17,78 @@ const Home = () => {
   return (
     <>
       <Carousel />
-      <Box sx={{ px: 24, mb: 10 }}>
-
-        <Box sx={{
-          display: "flex",
-          position: "relative",
-          py: 5
+      <Box sx={{
+        px: {
+          xs: 2,
+          md: 12,
+          lg: 20
+        },
+        mb: {
+          xs: 0,
+          md: 5,
+          lg: 10
+        }
+      }}>
+
+        <Grid container sx={{
+          py:{
+            xs:3,
+            md:3,
+            lg:6
+          }
         }}>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              mx: "auto"
-            }}
-          >
-            <KeyboardArrowLeftIcon sx={{ mr: 3, color: "#B7B7B7" }} /> {/* Icon at the start */}
-            <Typography variant="h4" sx={{ mx: "auto" }}>
+
+          {/* OFFSET PURPOSE */}
+          <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center" }}></Grid>
+
+          <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>
-            <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} /> {/* Icon at the end */}
-          </Box>
+            {/* Icon at the end */}
+            <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} />
+          </Grid>
 
-          <Link href="#" sx={{ position: "absolute", right: 0, textDecoration: "underline" }}>VIEW ALL</Link>
+          <Grid size={{xs:12, md:2}} sx={{display:"flex", alignItems:"center", py:{xs:2, md:0} }}>
+            <Link href="#" sx={{ color:"#000", textDecoration: "underline", m:{xs:"auto auto auto auto", md:"0 0 0 auto"}}}>VIEW ALL</Link>
+          </Grid>
+
+        </Grid>
 
-        </Box>
         <ProductSelected />
+        
       </Box>
 
-      <VideoAds width={"100%"} height={700} />
-
-      <Box sx={{ px: 24, mb: 10 }}>
-
+      <VideoAds width={"100%"} height={{
+        xs: 350,
+        md: 500,
+        lg: 750,
+      }} />
+
+      <Box sx={{
+        px: {
+          xs: 2,
+          md: 12,
+          lg: 20
+        },
+        mb: {
+          xs: 2,
+          md: 5,
+          lg: 10
+        }
+      }}>
 
         <Box sx={{ flexGrow: 1, mt: 10 }}>
           <Grid container spacing={2}>
             <Grid size={12}>
               <ProductType />
             </Grid>
-            <Grid size={6}>
+            <Grid size={{xs:12, md:6}}>
               <ProductType />
             </Grid>
-            <Grid size={6}>
+            <Grid size={{xs:12, md:6}}>
               <ProductType />
             </Grid>
             <Grid size={12}>
@@ -71,7 +101,11 @@ const Home = () => {
 
       <NewsLetter />
 
-      <Box sx={{ px: 24, my: 10 }}>
+      <Box sx={{ px:{
+        xs:2,
+        md:12,
+        lg:20
+      }, mb: 10 }}>
 
         <SocialMedia />
         <Feature />

src/pages/Products/Product.jsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import { Box, Typography } from '@mui/material';
 import { useParams } from 'react-router-dom';
 import Grid from '@mui/material/Grid2';
+import logoSrc from "../../assets/svg/logo.svg";
 import ImageView from '../../components/ImageView/ImageView';
 import ProductDetails from '../../components/ProductDetails';
 import ProductSuggestion from '../../components/ProductSuggestion';
@@ -19,9 +20,29 @@ const Product = () => {
 
   return (
 
-    <Box sx={{ mt: 10, px: 24 }}>
-      <Grid container spacing={0}>
-        <Grid size={6}>
+    <Box sx={{
+      px: {
+        xs: 2,
+        md: 12,
+        lg: 20
+      },
+      mb: {
+        xs: 0,
+        md: 5,
+        lg: 10
+      }
+    }}>
+      <Grid container spacing={0} sx={{ mt: 10, mb:5 }}>
+
+        <Grid size={12} sx={{ backgroundColor: "#000", textAlign:"center", display:{xs:"block", md:"none"} }}>
+          <img src={logoSrc} alt="Logo"
+            style={{
+              width: 150,
+              height: 50
+            }} />
+        </Grid>
+
+        <Grid size={{ xs: 12, md: 6 }}>
           <Box sx={{ paddingRight: 1 }}>
             <Box>
               <ImageView />
@@ -29,7 +50,7 @@ const Product = () => {
           </Box>
         </Grid>
 
-        <Grid size={6} xs>
+        <Grid size={{ xs: 12, md: 6 }}>
           <Box>
             <Box>
               <ProductDetails />
@@ -59,7 +80,7 @@ const Product = () => {
         textAlign: "center"
       }}>
         <Typography variant='body1' sx={{ fontWeight: "400", mb: 4 }}>
-          RECENTLY VIEWED 
+          RECENTLY VIEWED
         </Typography>
 
         <ProductHistoryList />

src/pages/Products/index.jsx

@@ -10,9 +10,20 @@ const Products = () => {
   return (
     <>
       <PageTitle />
-      <Box sx={{ px: 24, mb:10 }}>
+      <Box sx={{
+        px: {
+          xs: 2,
+          md: 12,
+          lg: 20
+        },
+        mb: {
+          xs: 0,
+          md: 5,
+          lg: 10
+        }
+      }}>
         <Filter />
-        <ProductList size={5}/>
+        <ProductList />
         <SocialMedia />
         <Feature />
       </Box>