feat: added product page

components/product-card/ProductCard.jsx

@@ -0,0 +1,58 @@
+import { Button, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import Image from 'next/image';
+
+const ProductCard = () => {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '590px',
+        border: 'none',
+        mb: '75px',
+        backgroundColor: '#F5ECD4',
+      }}
+    >
+      <Box width="100%">
+        <Image
+          src="/images/product-card-image.jpg"
+          alt="product image"
+          width={373.33}
+          height={249}
+        />
+      </Box>
+      <Box
+        width="100%"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography fontSize="24px" align="center" pt={1} pb={3}>
+          MINIMALIST PRINTED MUG
+        </Typography>
+        <Typography align="center" fontSize="18px" m={2}>
+          Our simple and sturdy mugs are made to last. With a minimalist desings
+          you will soon be enjoying your next brew.
+        </Typography>
+        <Typography fontSize="24px" align="center" pt={4}>
+          $20
+        </Typography>
+        <Box textAlign="center" mt={1}>
+          <Button
+            sx={{
+              backgroundColor: '#CBA213',
+              height: 50,
+              width: 150,
+              color: 'white',
+            }}
+          >
+            Add to cart
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default ProductCard;

components/products-hero/ProductsHero.jsx

@@ -0,0 +1,81 @@
+import { Container, Grid, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import ProductCard from '../product-card/ProductCard';
+import Sort from '../sort/sort';
+
+const ProductsHero = () => {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Container
+        sx={{
+          width: '1273px',
+          height: '300px',
+          mt: 25,
+        }}
+      >
+        <Typography
+          fontFamily={'body1.fontFamily'}
+          height="120px"
+          fontSize="64px"
+          align="center"
+          color="primary.main"
+        >
+          Welcome to our Store!
+        </Typography>
+        <Typography fontSize="24px" align="center">
+          Our focus is to bring you the very best in the world of coffee.
+          Everything from fresh coffee beans, the best coffee powders and
+          capsules as well as other miscellaneous items such as cups and mugs.
+          Take a look to see if anything takes your fancy.
+        </Typography>
+      </Container>
+      <Box textAlign="center" width="100%">
+        <Sort />
+      </Box>
+      <Container
+        sx={{
+          mt: 25,
+        }}
+      >
+        <Grid container spacing={2}>
+          <Grid item md={4} xs={12} sx={{ height: '500px' }}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <ProductCard />
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+
+export default ProductsHero;

components/sort/Sort.jsx

@@ -0,0 +1,5 @@
+const Sort = () => {
+  return <button>Sort</button>;
+};
+
+export default Sort;

pages/products/index.js

@@ -0,0 +1,32 @@
+import { Box } from '@mui/system';
+import Head from 'next/head';
+import ProductsHero from '../../components/products-hero/ProductsHero';
+
+const Products = () => {
+  return (
+    <>
+      <Box sx={{ width: '100%', height: '100%' }}>
+        <Head>
+          <title>NextJS template</title>
+          <meta name="description" content="Random data with pagination..." />
+        </Head>
+        <ProductsHero />
+      </Box>
+    </>
+  );
+};
+
+// export async function getStaticProps({ locale }) {
+//   const queryClient = new QueryClient();
+
+//   await queryClient.prefetchQuery(['randomData', 1], () => getData(1));
+
+//   return {
+//     props: {
+//       dehydratedState: dehydrate(queryClient),
+//       ...(await serverSideTranslations(locale, ['pagination'])),
+//     },
+//   };
+// }
+
+export default Products;