done Checkout Page

src/components/LoginForm/LoginForm.jsx

+import React from 'react'
+import Grid from '@mui/material/Grid2';
+import { Box, Button, TextField, Link } from '@mui/material'
+
+const LoginForm = () => {
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Handle form submission logic
+        console.log('Form submitted');
+      };
+
+    return (
+        <Grid>
+            <Box
+                component="form"
+                onSubmit={handleSubmit}
+                sx={{
+                    width: '100%',
+                    maxWidth: 400,
+                    mx: 'auto',
+                    mt: 4,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                }}
+            >
+
+                <TextField
+                    label="Email"
+                    type="email"
+                    variant="outlined"
+                    fullWidth
+                    required
+                />
+
+                <TextField
+                    label="Password"
+                    type="password"
+                    variant="outlined"
+                    fullWidth
+                    required
+                />
+
+                <Link>Forgot Password?</Link>
+
+                <Button
+                    variant="contained"
+                    color="common.black"
+                    onClick={() => { window.location.href = "/checkout" }}
+                    sx={{
+                        backgroundColor: (theme) => theme.palette.common.black,
+                        color: "white",
+                        textTransform: "none",
+                        mx: "auto",
+                        px: 8,
+                        py: 2,
+                        width: "fit-content",
+                        "&:hover": {
+                            backgroundColor: (theme) => theme.palette.grey[900],
+                        },
+                    }}>SIGN IN</Button>
+
+            </Box>
+        </Grid>
+    )
+}
+
+export default LoginForm

src/components/LoginForm/index.js

+export { default } from "./LoginForm"

src/components/SignUpForm/SignUpForm.jsx

+import React from 'react'
+import Grid from '@mui/material/Grid2';
+import { Box, Button, TextField, Link, Typography } from '@mui/material'
+
+const SignUpForm = () => {
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Handle form submission logic
+        console.log('Form submitted');
+      };
+
+    return (
+        <Grid>
+            <Box
+                component="form"
+                onSubmit={handleSubmit}
+                sx={{
+                    width: '100%',
+                    maxWidth: 400,
+                    mx: 'auto',
+                    mt: 4,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                }}
+            >
+
+                <TextField
+                    label="Full Name"
+                    variant="outlined"
+                    fullWidth
+                    required
+                />
+
+                <TextField
+                    label="Email"
+                    type="email"
+                    variant="outlined"
+                    fullWidth
+                    required
+                />
+
+                <TextField
+                    label="Password"
+                    type="password"
+                    variant="outlined"
+                    fullWidth
+                    required
+                />
+
+                <TextField
+                    label="Confirm Password"
+                    type="password"
+                    variant="outlined"
+                    fullWidth
+                    required
+                />
+
+                
+
+                <Button
+                    variant="contained"
+                    color="common.black"
+                    onClick={() => { window.location.href = "/checkout" }}
+                    sx={{
+                        backgroundColor: (theme) => theme.palette.common.black,
+                        color: "white",
+                        textTransform: "none",
+                        mx: "auto",
+                        px: 8,
+                        py: 2,
+                        width: "fit-content",
+                        "&:hover": {
+                            backgroundColor: (theme) => theme.palette.grey[900],
+                        },
+                    }}>REGISTER</Button>
+                
+                <Typography variant="body1">By registering you agree to our <Link>Terms and Conditions</Link> and <Link>Privacy Policy</Link> </Typography>
+
+            </Box>
+        </Grid>
+    )
+}
+
+export default SignUpForm

src/components/SignUpForm/index.js

+export { default } from "./SignUpForm"

src/pages/Cart.jsx

 import React from 'react'
+import { Box, Button, IconButton } from '@mui/material'
+import SocialMedia from '../components/SocialMedia'
+import Feature from '../components/Feature'
+import Grid from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
 
 const Cart = () => {
+
+  function createData(img_src, description, colour, quantity, price) {
+    return { img_src, description, colour, quantity, price };
+  }
+
+  const rows = [
+    {
+      img_src: 'https://via.placeholder.com/300',
+      name: 'MELUR',
+      description: 'Atma Sari New Raya Collection 2024',
+      colour: 'black',
+      quantity: 1,
+      price: 335.50
+    },
+    {
+      img_src: 'https://via.placeholder.com/300',
+      name: 'MELUR2',
+      description: 'Atma Sari New Raya Collection 2025',
+      colour: 'red',
+      quantity: 2,
+      price: 665.00
+    },
+  ];
+
   return (
-    <div>Cart</div>
+    <>
+      <Box sx={{ px: 24, my: 10 }}>
+
+
+        {/* Header */}
+        <Grid container spacing={2} alignItems="center" sx={{ mb: 5 }}>
+
+          {/* Type */}
+          <Grid item size={2}>
+            <Typography variant="body2">
+              <p>Mens Fashion <span style={{ fontWeight: "bold", marginLeft: 10, display: "inline-block" }}>Shopping Bag</span></p>
+            </Typography>
+          </Grid>
+
+          <Grid item size={4} offset={{ xs: 3 }}>
+            <Typography variant="h5" sx={{ fontWeight: "bold" }}>
+              SHOPPING BAG
+            </Typography>
+          </Grid>
+
+        </Grid>
+
+        {/* Product List */}
+        <TableContainer>
+          <Table sx={{ minWidth: 650, borderTop: "1px solid rgba(0,0,0,0.4)", borderBottom: "1px solid rgba(0,0,0,0.4)", mb: 5 }}>
+            <TableHead>
+              <TableRow>
+                <TableCell width={150}>
+                  <Typography variant='body1'>Item</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography variant='body1'>Description</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Colour</Typography>
+                </TableCell>
+                <TableCell align='center'>
+
+                  <Typography variant='body1'>Quantity</Typography>
+                </TableCell>
+                <TableCell align='center'>
+                  <Typography variant='body1'>Unit Price</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  sx={{
+                    '& td, & th': { border: 0 },
+                    '&:last-child td, &:last-child th': { border: 0 }
+                  }}
+                >
+                  <TableCell component="th" scope="row">
+                    <img
+                      src={row.img_src}
+                      alt={row.img_src}
+                      style={{
+                        width: 100,
+                        height: 100,
+                        aspectRatio: '4 / 4',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
+                    <Typography variant='body2'>{row.description}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='h6' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Box sx={{ display: "flex", justifyContent: "center" }}>
+                      <IconButton>
+                        <RemoveIcon sx={{ fontSize: 16, margin: "0 15px" }} />
+                      </IconButton>
+                      <p style={{ fontSize: 20, fontWeight: "bold" }}>{row.quantity}</p>
+                      <IconButton >
+                        <AddIcon sx={{ fontSize: 16, margin: "0 15px" }} />
+                      </IconButton>
+                    </Box>
+                  </TableCell>
+                  <TableCell align='center'>
+                    <Typography variant='h6' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+
+        {/* INVOICES */}
+        <Grid container spacing={2} sx={{ mb: 5 }}>
+
+          <Grid item size={3} sx={{ ml: "auto" }}>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ mb: 2 }}
+            >
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>Subtotal</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+            </Box>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ mb: 2 }}
+            >
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>Shipping</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+            </Box>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ mb: 2 }}
+            >
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>Taxes</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+            </Box>
+            <Box
+              display="flex"
+              justifyContent="space-between"
+              alignItems="center"
+              sx={{ mb: 2 }}
+            >
+              <Typography variant="body1" sx={{ fontWeight: "400" }}>Total</Typography>
+              <Typography variant="body1" sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(500).toFixed(2)}`}</Typography>
+            </Box>
+          </Grid>
+
+        </Grid>
+
+        {/* BUY NOW */}
+        <Box sx={{ mb: 15 }}>
+          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <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"}}
+              sx={{
+                backgroundColor: (theme) => theme.palette.common.black,
+                color: "white",
+                textTransform: "none",
+                px: 8,
+                py: 2,
+                "&:hover": {
+                  backgroundColor: (theme) => theme.palette.grey[900],
+                },
+              }}>BUY NOW</Button>
+          </Box>
+        </Box>
+
+        <SocialMedia />
+        <Feature />
+      </Box>
+    </>
   )
 }
 

src/pages/Checkout.jsx

-import React from 'react'
+import React, {useState} from 'react'
+import { Box, Button, IconButton, TextField, Typography } from '@mui/material'
+import SocialMedia from '../components/SocialMedia'
+import Feature from '../components/Feature'
+import LoginForm from '../components/LoginForm'
+import SignUpForm from '../components/SignUpForm'
+
+
+import Grid from '@mui/material/Grid2';
 
 const Checkout = () => {
+
+  const [content, setContent] = useState(0);
+
   return (
-    <div>Checkout</div>
+    <Box sx={{ px: 24, my: 10 }}>
+
+      {/* Header */}
+      <Grid container spacing={2} sx={{ mb: 5 }}>
+
+        <Grid item size={4} sx={{ mx: "auto" }}>
+          <Typography variant="h5" sx={{ fontWeight: "bold", textAlign: "center" }}>
+            {[
+              'LOGIN',
+              'SHIPPING',
+              'BILLING',
+              'CONFIRMATION'
+            ][content]}
+          </Typography>
+        </Grid>
+
+      </Grid>
+
+      {/* Navigation */}
+      <Grid container>
+
+        <Grid item size={12} sx={{ borderTop: "1px solid rgba(0,0,0,0.2)", borderBottom: "1px solid rgba(0,0,0,0.2)", display: "flex", justifyContent: "space-evenly", py: 1 }}>
+
+          <Typography variant="body1" onClick={()=>{setContent(0)}} sx={{cursor:"pointer", color:(content == 0) ? "#93ABC7" : "black" }}>Login</Typography> 
+          <Typography variant="body1" onClick={()=>{setContent(1)}} sx={{cursor:"pointer", color:(content == 1) ? "#93ABC7" : "black" }}>Shipping</Typography> 
+          <Typography variant="body1" onClick={()=>{setContent(2)}} sx={{cursor:"pointer", color:(content == 2) ? "#93ABC7" : "black" }}>Billing</Typography> 
+          <Typography variant="body1" onClick={()=>{setContent(3)}} sx={{cursor:"pointer", color:(content == 3) ? "#93ABC7" : "black" }}>Confirmation</Typography>
+
+        </Grid>
+
+      </Grid>
+
+      {/* 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" }}>
+
+          <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)" }}>
+
+          <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 }}>
+
+          <Typography variant="body2">Make purchases faster using previously saved details. Track previous orders and easily request returns from the website.</Typography>
+
+          <LoginForm/>
+
+        </Grid>
+
+        <Grid item size={6} sx={{ textAlign: "center", py: 4, px: 8 }}>
+
+          <Typography variant="body2">You’ll need an account to purchase watches, track and review orders, and manage your personal details.</Typography>
+
+          <SignUpForm/>
+
+        </Grid>
+
+
+      </Grid>}
+
+
+      <SocialMedia />
+      <Feature />
+
+    </Box>
   )
 }