init FE

package.json

@@ -3,18 +3,27 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/roboto": "^5.1.0",
+    "@mui/icons-material": "^6.1.10",
+    "@mui/material": "^6.1.10",
+    "@shopify/shopify-api": "^11.6.0",
+    "@shopify/storefront-api-client": "^1.0.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dotenv": "^16.4.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^7.0.2",
     "react-scripts": "5.0.1",
+    "shopify-api-node": "^3.14.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set GENERATE_SOURCEMAP=false && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,25 +1,52 @@
-import logo from './logo.svg';
-import './App.css';
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Cart from './pages/Cart';
+import Login from './pages/Login';
+import Newsletter from './pages/Newsletter';
+import Products from './pages/Products';
+import Product from './pages/Products/Product';
+import Checkout from './pages/Checkout';
+import Navbar from './components/Navbar';
+import Header from './components/Header';
+import theme from './theme/theme';
+import { ThemeProvider } from '@mui/material';
+import Footer from './components/Footer/Footer';
 
 function App() {
+
+  useEffect(() => {
+
+  }, [])
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <ThemeProvider theme={theme}>
+      <Header />
+      <Navbar/>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/' element={<Home />} />
+          <Route path='/login' element={<Login />} />
+
+          <Route path='products'>
+            {/* All Products */}
+            <Route index element={<Products />} />
+
+            {/* Single Product */}
+            <Route path=':pid' element={<Product />} />
+
+          </Route>
+
+          <Route path='/newsletter' element={<Newsletter />} />
+          <Route path='/cart' element={<Cart />} />
+          <Route path='/checkout' element={<Checkout />} />
+        </Routes>
+      </BrowserRouter>
+      <Footer />
+    </ThemeProvider>
   );
 }
 
+
+
 export default App;

src/components/Carousel/Carousel.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { Box, IconButton } from "@mui/material";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+
+const Carousel = () => {
+
+  const items = [
+    { img_src: "https://via.placeholder.com/600x300", alt_name: "Image 1" },
+    { img_src: "https://via.placeholder.com/600x300/ff0000", alt_name: "Image 2" },
+    { img_src: "https://via.placeholder.com/600x300/00ff00", alt_name: "Image 3" },
+  ]
+
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === 0 ? items.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) =>
+      prevIndex === items.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "100vh",
+        overflow: "hidden",
+      }}
+    >
+      {items.map((item, index) => (
+        <Box
+          key={index}
+          component="img"
+          src={item.img_src}
+          alt={item.alt_name}
+          sx={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: index === currentIndex ? "block" : "none",
+          }}
+        />
+      ))}
+
+      <IconButton
+        onClick={handlePrev}
+        sx={{
+          position: "absolute",
+          left: 16,
+          top: "50%",
+          transform: "translateY(-50%)",
+          color: "white",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
+        }}
+      >
+        <ArrowBackIosIcon />
+      </IconButton>
+
+      <IconButton
+        onClick={handleNext}
+        sx={{
+          position: "absolute",
+          right: 16,
+          top: "50%",
+          transform: "translateY(-50%)",
+          color: "white",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          "&:hover": { backgroundColor: "rgba(0, 0, 0, 0.7)" },
+        }}
+      >
+        <ArrowForwardIosIcon />
+      </IconButton>
+    </Box>
+  );
+};
+
+export default Carousel;

src/components/Carousel/index.js

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

src/components/Feature/Feature.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
+import ReplayIcon from '@mui/icons-material/Replay';
+import AssuredWorkloadIcon from '@mui/icons-material/AssuredWorkload';
+import SupportAgentIcon from '@mui/icons-material/SupportAgent';
+
+const Feature = () => {
+  const features = [
+    { icon: <AssignmentTurnedInIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Pickup at any Store', description: "Free shipping on orders over $65" },
+    { icon: <ReplayIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Free returns', description:"30-days free return policy." },
+    { icon: <AssuredWorkloadIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Secured payments', description:"We accept all major credit cards."  },
+    { icon: <SupportAgentIcon color="primary" sx={{ fontSize: 40 }} />, name: 'Customer service', description:"Top notch customer service." },
+  ];
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 2,
+        mt:5
+      }}
+    >
+      {features.map((feature, index) => (
+        <Box
+          key={index}
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+            flex: 1,
+            borderRight: index < features.length - 1 ? '1px solid #CFCFCF' : 'none', // Add right border except for the last item
+            padding: 2,
+          }}
+        >
+          {feature.icon}
+          <Typography
+            variant="body1"
+            sx={{ marginTop: 1, fontWeight: 'bold', color: 'text.primary' }}
+          >
+            {feature.name}
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ marginTop: 1, color: 'text.primary' }}
+          >
+            {feature.description}
+          </Typography>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default Feature;

src/components/Feature/index.js

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

src/components/Filter/Filter.jsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import FormControl from "@mui/material/FormControl";
+import Select from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import InputLabel from "@mui/material/InputLabel";
+import { InputBase } from "@mui/material";
+import { styled } from "@mui/material";
+
+const BootstrapInput = styled(InputBase)(({ theme }) => ({
+    'label + &': {
+        marginTop: theme.spacing(3),
+    },
+    '& .MuiInputBase-input': {
+        position: 'relative',
+        backgroundColor: "#2E2E2E",
+        border: '1px solid #ced4da',
+        color:"#FFF",
+        fontSize: 13,
+        padding: '5px 0',
+        paddingRight:'50px !important',
+        paddingLeft:"10px",
+        transition: theme.transitions.create(['border-color', 'box-shadow']),
+        '&:focus': {
+            borderRadius: 4,
+            borderColor: '#80bdff',
+            boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+        },
+    },
+    '& .MuiSvgIcon-root': {
+        color:"#FFF !important"
+    },
+}));
+
+const Filter = () => {
+
+    const [input, setInput] = useState({
+        type:0,
+        sort:0,
+        show:1,
+    })
+
+
+
+    const handleChange = (event) => {
+        setInput({...input, [event.target.name]:event.target.value });
+    };
+
+
+    return (
+        <Box
+            sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                backgroundColor: "background.black",
+                color: "white",
+                px: 2, // Add padding around the box
+                my: 4
+            }}
+        >
+            {/* Left Side: Page Title */}
+            <Typography variant="body2">
+                13 Item
+            </Typography>
+
+            {/* Right Side: Option Inputs */}
+            <Box sx={{ display: "flex", gap: 2 }}>
+
+
+                <FormControl sx={{ m: 1, display:"flex", flexDirection:"row" }} variant="standard">
+                    <Typography variant="body2" sx={{mr:1, my:"auto"}}>Filter</Typography>
+                    <Select
+                        labelId="demo-customized-select-label"
+                        id="demo-customized-select"
+                        value={input.type}
+                        onChange={handleChange}
+                        input={<BootstrapInput />}
+                        name="type"
+                    >
+                        <MenuItem value={0}>All</MenuItem>
+                        <MenuItem value={1}>Red</MenuItem>
+                    </Select>
+                </FormControl>
+
+                <FormControl sx={{ m: 1, display:"flex", flexDirection:"row" }} variant="standard">
+                    <Typography variant="body2" sx={{mr:1, my:"auto"}}>Sort By</Typography>
+                    <Select
+                        labelId="demo-customized-select-label"
+                        id="demo-customized-select"
+                        value={input.sort}
+                        onChange={handleChange}
+                        input={<BootstrapInput />}
+                        name="sort"
+                    >
+                        <MenuItem value={0}>All</MenuItem>
+                        <MenuItem value={1}>Red</MenuItem>
+                    </Select>
+                </FormControl>
+
+                <FormControl sx={{ m: 1, display:"flex", flexDirection:"row" }} variant="standard">
+                    <Typography variant="body2" sx={{mr:1, my:"auto"}}>Show</Typography>
+                    <Select
+                        labelId="demo-customized-select-label"
+                        id="demo-customized-select"
+                        value={input.show}
+                        onChange={handleChange}
+                        input={<BootstrapInput />}
+                        name="show"
+                    >
+                        <MenuItem value={0}>All</MenuItem>
+                        <MenuItem value={1}>Red</MenuItem>
+                    </Select>
+                </FormControl>
+
+            </Box>
+        </Box>
+    );
+};
+
+export default Filter;

src/components/Filter/index.js

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

src/components/Footer/Footer.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Box, Typography, TextField, Button, InputAdornment } from '@mui/material';
+import SearchIcon from "@mui/icons-material/Search";
+import Grid from '@mui/material/Grid2';
+
+const Footer = () => {
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'background.default',
+        mb: 10,
+        mt: 15
+      }}
+    >
+
+      <Grid container spacing={2} justifyContent="space-evenly">
+
+        <Grid item xs={12} sm={6} md={3} sx={{ position: "relative" }}>
+
+          <Typography variant="h5" sx={{
+            color: 'primary.main', // Use primary color
+            letterSpacing: 15,
+            fontWeight: "bold",
+            position: "absolute",
+            top:-60
+          }}>
+            AMBER
+          </Typography>
+
+          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
+            Contact Info
+          </Typography>
+          <Typography variant="body2" sx={{ mb: 2 }}><span style={{ fontWeight: "bold" }}>Phone:</span> +4 (509) 120 6705</Typography>
+          <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}>
+          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
+            Get Help
+          </Typography>
+          <nav>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Delivery Information</a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Sale Terms & Conditions</a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Returns & Refunds</a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Privacy Notice</a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Shopping FAQs</a>
+            </Typography>
+          </nav>
+        </Grid>
+
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
+            Popular Categories
+          </Typography>
+          <nav>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Dresses <span>(45)</span></a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Tops <span>(45)</span></a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Skirts <span>(45)</span></a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Scarves <span>(45)</span></a>
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <a href="#" style={{ textDecoration: 'none', color: 'inherit' }}>Mens <span>(45)</span></a>
+            </Typography>
+          </nav>
+        </Grid>
+
+
+
+        <Grid item xs={12} sm={6} md={3}>
+          <Typography variant="body1" sx={{ fontWeight: "bold", mb: 4 }}>
+            Let’s stay in touch
+          </Typography>
+          <Box
+            component="form"
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1,
+            }}
+            noValidate
+          >
+            <TextField
+              variant="outlined"
+              placeholder="your email address"
+              sx={{ p: 0, mb: 2 }}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="end">
+                    <Button variant='contained' sx={{ mr: 2 }}>
+                      Subscribe
+                    </Button>
+                  </InputAdornment>
+                ),
+              }}
+            />
+
+            <Typography variant="body2" >Keep up to date with our latest  news and <br /> special offers.</Typography>
+
+
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default Footer;

src/components/Footer/index.js

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

src/components/Header/Header.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { Box, Typography } from '@mui/material';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import TwitterIcon from '@mui/icons-material/Twitter';
+import PinterestIcon from '@mui/icons-material/Pinterest';
+
+const Container = styled(Box)(({theme})=>({
+    backgroundColor: theme.palette.primary.main,
+    paddingTop: 20,
+    paddingBottom: 20,
+    width: "100%",
+    display:"flex",
+    position:"relative",
+    minHeight:"fit-content",
+    [`@media (max-width: ${theme.breakpoints.values.md}px)`]: {
+        display: "none"
+    },
+}))
+
+
+const Header = () => {
+
+    return (
+        <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 }} />
+                </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>
+            </Box>
+        </Container>
+    );
+};
+
+export default Header;

src/components/Header/index.js

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

src/components/Navbar/Navbar.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
+import InputBase from "@mui/material/InputBase";
+import SearchIcon from "@mui/icons-material/Search";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+
+const Navbar = () => {
+  return (
+    <AppBar position="static" sx={{backgroundColor:"background.black"}}>
+      <Toolbar>
+        {/* Left Section: Logo */}
+        <Typography variant="h6" sx={{ flexGrow: 0, color:"white", letterSpacing:10, marginLeft:20 }}>
+          AMBER
+        </Typography>
+
+        {/* Center Section: Nav Items */}
+        <Box
+          sx={{
+            flexGrow: 1,
+            display: "flex",
+            justifyContent: "center",
+            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>
+
+        {/* Right Section: Search and Profile */}
+        <Box sx={{ display: "flex", alignItems: "center", marginRight:20 }}>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              backgroundColor: "rgba(255, 255, 255, 0.15)",
+              borderRadius: 1,
+              padding: "0 8px",
+            }}
+          >
+            <SearchIcon />
+            <InputBase
+              placeholder="Search…"
+              sx={{
+                color: "inherit",
+              }}
+            />
+          </Box>
+          <IconButton color="inherit">
+            <AccountCircleIcon sx={{color:"white"}}/>
+          </IconButton>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Navbar;

src/components/Navbar/index.js

@@ -0,0 +1 @@
+export { default } from './Navbar'

src/components/PageTitle/PageTitle.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+
+const PageTitle = () => {
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        minHeight: "300px",
+        backgroundImage: `url("https://p16-va.lemon8cdn.com/tos-alisg-v-a3e477-sg/1bab0c0797934592bb5a705ad62ed4c4~tplv-tej9nj120t-origin.webp")`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        color: "white",
+        textAlign: "center",
+        overflow: "hidden", // Ensures the dim layer stays inside the box
+        display:"flex"
+      }}
+    >
+      {/* Overlay */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)", // Adjust opacity to control dimness
+          zIndex: 1,
+        }}
+      />
+      
+      {/* Title */}
+      <Typography
+        variant="h3"
+        sx={{
+          position: "relative",
+          zIndex: 2,
+          margin:"auto auto"
+        }}
+      >
+        ATMA SARI COLLECTION
+      </Typography>
+    </Box>
+  );
+};
+
+export default PageTitle;

src/components/PageTitle/index.js

@@ -0,0 +1 @@
+export { default } from './PageTitle'

src/components/ProductList/ProductList.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+
+const ProductList = ({ size }) => {
+
+
+
+  const images = [
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    }
+  ];
+
+  return (
+    <Box sx={{ mb: 5 }}>
+      <Grid container spacing={1} columns={12}>
+        {images.map((image, index) => {
+
+          if (index < size) {
+
+            return <Grid item size={4} key={index}>
+              <Box
+                sx={{
+                  overflow: 'hidden',
+                  position: 'relative'
+                }}
+              >
+                <img
+                  src={image.url}
+                  alt={image.title}
+                  style={{
+                    width: '100%',
+                    aspectRatio: '3 / 4',
+                    objectFit: 'cover',
+                  }}
+                />
+
+                <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+                  NEW
+                </Button>
+
+                <Box sx={{ py: 5 }}>
+                  <Typography variant="body2" >
+                    {image.description}
+                  </Typography>
+                  <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+                    {image.title}
+                  </Typography>
+                  <Typography variant="body" >
+                    {`RM ${image.price}`}
+                  </Typography>
+                  <Typography variant="body2" sx={{ mt: 2 }}>
+                    {image.extra_desc}
+                  </Typography>
+                </Box>
+              </Box>
+            </Grid>
+
+
+          }
+
+        })}
+      </Grid>
+    </Box>
+  );
+};
+
+export default ProductList;

src/components/ProductList/index.js

@@ -0,0 +1 @@
+export { default } from './ProductList'

src/components/ProductSelected/ProductSelected.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+
+const ProductSelected = () => {
+
+
+
+  const images = [
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    },
+    {
+      url: 'https://via.placeholder.com/300',
+      title: 'KEMBOJA IN BEIGE',
+      price: 123.90,
+      description: "Atma Sari Kurta Raya Collection 2024",
+      extra_desc: "or 3 payments of 68.50 MYR with Atome"
+    }
+  ];
+
+  return (
+    <Box sx={{ mb: 5 }}>
+      <Grid container spacing={1} columns={12}>
+        {images.map((image, index) => (<Grid item size={3} key={index}>
+          <Box
+            sx={{
+              overflow: 'hidden',
+              position: 'relative'
+            }}
+          >
+            <img
+              src={image.url}
+              alt={image.title}
+              style={{
+                width: '100%',
+                aspectRatio: '3 / 4',
+                objectFit: 'cover',
+              }}
+            />
+
+            <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+              NEW
+            </Button>
+
+            <Box sx={{ py: 5 }}>
+              <Typography variant="body2" >
+                {image.description}
+              </Typography>
+              <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+                {image.title}
+              </Typography>
+              <Typography variant="body" >
+                {`RM ${image.price}`}
+              </Typography>
+              <Typography variant="body2" sx={{ mt: 2 }}>
+                {image.extra_desc}
+              </Typography>
+            </Box>
+          </Box>
+        </Grid>))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default ProductSelected;

src/components/ProductSelected/index.js

@@ -0,0 +1 @@
+export { default } from './ProductSelected'

src/components/SocialMedia/SocialMedia.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import InstagramIcon from '@mui/icons-material/Instagram';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import TwitterIcon from '@mui/icons-material/Twitter';
+
+const SocialMedia = () => {
+  const socialMedia = [
+    { icon: <InstagramIcon color="primary" />, name: 'Instagram' },
+    { icon: <FacebookIcon color="primary" />, name: 'Facebook' },
+    { icon: <TwitterIcon color="primary" />, name: 'Twitter' },
+  ];
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 5,
+        padding: 2,
+        py: 4,
+        borderTop:"1px solid #CFCFCF",
+        borderBottom:"1px solid #CFCFCF"
+      }}
+    >
+      {socialMedia.map((media, index) => (
+        <Box
+          key={index}
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+          }}
+        >
+          {media.icon}
+          <Typography variant="body1" sx={{ fontWeight: 'bold' }}>
+            {media.name}
+          </Typography>
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default SocialMedia;

src/components/SocialMedia/index.js

@@ -0,0 +1 @@
+export { default } from './SocialMedia'

src/index.css

@@ -1,13 +1,351 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+
+
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+  
+  /* Sections
+     ========================================================================== */
+  
+  /**
+   * Remove the margin in all browsers.
+   */
+  
+  body {
+    margin: 0;
+  }
+  
+  /**
+   * Render the `main` element consistently in IE.
+   */
+  
+  main {
+    display: block;
+  }
+  
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+  
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+  
+  /* Grouping content
+     ========================================================================== */
+  
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+  
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /* Text-level semantics
+     ========================================================================== */
+  
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+  
+  a {
+    background-color: transparent;
+  }
+  
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+  
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+  
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+  
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+  
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+  
+  /**
+   * Add the correct font size in all browsers.
+   */
+  
+  small {
+    font-size: 80%;
+  }
+  
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+  
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  
+  sub {
+    bottom: -0.25em;
+  }
+  
+  sup {
+    top: -0.5em;
+  }
+  
+  /* Embedded content
+     ========================================================================== */
+  
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+  
+  img {
+    border-style: none;
+  }
+  
+  /* Forms
+     ========================================================================== */
+  
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+  
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+  
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+  
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+  
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+  
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+  
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+  
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+  
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+  
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+  
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+  
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  
+  /**
+   * Correct the padding in Firefox.
+   */
+  
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+  
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+  
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+  
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+  
+  progress {
+    vertical-align: baseline;
+  }
+  
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+  
+  textarea {
+    overflow: auto;
+  }
+  
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+  
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+  
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+  
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+  
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+  
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+  
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+  
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+  
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+  
+  /* Interactive
+     ========================================================================== */
+  
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+  
+  details {
+    display: block;
+  }
+  
+  /*
+   * Add the correct display in all browsers.
+   */
+  
+  summary {
+    display: list-item;
+  }
+  
+  /* Misc
+     ========================================================================== */
+  
+  /**
+   * Add the correct display in IE 10+.
+   */
+  
+  template {
+    display: none;
+  }
+  
+  /**
+   * Add the correct display in IE 10.
+   */
+  
+  [hidden] {
+    display: none;
+  }

src/index.js

@@ -2,7 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
+// import reportWebVitals from './reportWebVitals';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -11,7 +16,7 @@ root.render(
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// // If you want to start measuring performance in your app, pass a function
+// // to log results (for example: reportWebVitals(console.log))
+// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();

src/pages/Cart.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Cart = () => {
+  return (
+    <div>Cart</div>
+  )
+}
+
+export default Cart

src/pages/Checkout.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Checkout = () => {
+  return (
+    <div>Checkout</div>
+  )
+}
+
+export default Checkout

src/pages/Home.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Box, Typography } from '@mui/material'
+import Carousel from '../components/Carousel'
+import ProductSelected from '../components/ProductSelected'
+import SocialMedia from '../components/SocialMedia'
+import Feature from '../components/Feature'
+import {Link} from '@mui/material'
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+
+const Home = () => {
+
+  return (
+    <>
+      <Carousel />
+      <Box sx={{ px: 24, mb: 10 }}>
+
+        <Box sx={{
+          display: "flex",
+          position: "relative",
+          py: 5
+        }}>
+          <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" }}>
+              NEW IN
+            </Typography>
+            <KeyboardArrowRightIcon sx={{ ml: 3, color: "#B7B7B7" }} /> {/* Icon at the end */}
+          </Box>
+
+          <Link href="#" sx={{ position: "absolute", right: 0, textDecoration: "underline" }}>VIEW ALL</Link>
+
+        </Box>
+
+        <ProductSelected />
+        <SocialMedia />
+        <Feature />
+      </Box>
+    </>
+  )
+}
+
+export default Home

src/pages/Login.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Login = () => {
+  return (
+    <div>Login</div>
+  )
+}
+
+export default Login

src/pages/Newsletter.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Newsletter = () => {
+  return (
+    <div>Newsletter</div>
+  )
+}
+
+export default Newsletter

src/pages/Products/Product.jsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+
+
+const Product = () => {
+
+  let { pid } = useParams();
+
+  useEffect(() => {
+
+  },[])
+
+  return (
+    <div>{`Product: ${pid}`}</div>
+  )
+}
+
+export default Product

src/pages/Products/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import PageTitle from '../../components/PageTitle'
+import Filter from '../../components/Filter'
+import ProductList from '../../components/ProductList'
+import { Box } from '@mui/material'
+import SocialMedia from '../../components/SocialMedia'
+import Feature from '../../components/Feature'
+
+const Products = () => {
+  return (
+    <>
+      <PageTitle />
+      <Box sx={{ px: 24, mb:10 }}>
+        <Filter />
+        <ProductList size={5}/>
+        <SocialMedia />
+        <Feature />
+      </Box>
+    </>
+  )
+}
+
+export default Products

src/theme/theme.js

@@ -0,0 +1,43 @@
+import { createTheme, responsiveFontSizes } from '@mui/material';
+
+// theme override
+let theme = createTheme({
+  palette:{
+    primary:{
+        main:"#95AAC5"
+    },
+    secondary:{
+        main:"##A3ADAE"
+    },
+    background:{
+        paper:"#CCC",
+        default:"#FFFFFF",
+        black:"#000"
+    }
+  },
+  // general style override
+  typography: {
+    allVariants: {
+      fontWeight: "lighter", // Applies to all text variants
+    },
+  },
+  // component style override
+  components:{
+    MuiButton:{
+      styleOverrides:{
+        root:{
+          borderRadius:0,
+          fontWeight:"lighter",
+          paddingLeft:30,
+          paddingRight:30,
+          color:"#FFF",
+        }
+      }
+    }
+  }
+
+})
+
+theme = responsiveFontSizes(theme)
+
+export default theme;