temp feature home

src/components/ProductType/ProductType.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button, Typography } from '@mui/material';
 
-const ProductType = ({title}) => {
+const ProductType = ({title, link, img_url}) => {
   return (
     <Box
       sx={{
@@ -9,7 +9,10 @@ const ProductType = ({title}) => {
         width: '100%',
         height: 0,
         paddingTop: '600px', // This sets the height based on top padding
+        backgroundImage: `url(${img_url})`,
         overflow: 'hidden',
+        backgroundSize:'cover',
+        backgroundPosition: 'center center'
       }}
     >
       <Box
@@ -27,10 +30,10 @@ const ProductType = ({title}) => {
           color: '#fff', // Text and button color for visibility
         }}
       >
-        <Typography variant="h4" gutterBottom>
+        <Typography variant="h5" gutterBottom sx={{fontWeight:"600", letterSpacing:7}}>
           {title}
         </Typography>
-        <Button variant="contained" color="primary">
+        <Button variant="contained" color="primary" onClick={()=>{ window.location.href = link }}>
           SHOP NOW
         </Button>
       </Box>

src/pages/Home.jsx

@@ -14,6 +14,10 @@ import NewsLetter from '../components/NewsLetter';
 
 import ProductService from "../services/ProductService"
 
+import AmberHomeWallpaper from "../assets/images/titleBg.jpg";
+import AmberBeautyWallpaper from "../assets/images/amberBeautyWallpaper.jpg";
+import AmberClothing from "../assets/images/amberClothing.jpg"
+
 const Home = () => {
 
   React.useEffect(()=>{
@@ -84,13 +88,13 @@ const Home = () => {
         <Box sx={{ flexGrow: 1, mt: 10 }}>
           <Grid container spacing={2}>
             <Grid size={12}>
-              <ProductType title={'CLOTHING'}/>
+              <ProductType title={'CLOTHING'} link={'/collection/clothing'} img_url={AmberClothing}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType title={'BEAUTY'}/>
+              <ProductType title={'BEAUTY'} link={'/collection/beauty'} img_url={AmberBeautyWallpaper}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType title={'HOME'}/>
+              <ProductType title={'HOME'} link={'/collection/home'} img_url={AmberHomeWallpaper} />
             </Grid>
           </Grid>
         </Box>