done product page

src/components/ImageView/ImageView.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
+  IconButton,
+  Dialog,
+  DialogContent,
+} from "@mui/material";
+import Grid from '@mui/material/Grid2';
+
+const ImageView = () => {
+  const [previewImage, setPreviewImage] = useState("https://business.aducktive.com/storage/product/23/ceGt6VWGAdW0tVUArAAkpAwk4DUu6QdGA95udBQK.webp"); // Initial preview image
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const thumbnails = [
+    "https://business.aducktive.com/storage/product/23/ceGt6VWGAdW0tVUArAAkpAwk4DUu6QdGA95udBQK.webp",
+    "https://business.aducktive.com/storage/product/24/z6wjsGoGb5X5F72TIW9JihYQR3ZnwEHFgcnfOCOF.webp",
+    "https://business.aducktive.com/storage/product/22/JtniBtfevbtO9iJy3LUozgyGGe2HLv2rVNZ7C16e.webp",
+    "https://business.aducktive.com/storage/product/25/GTyY9k0PvQUuC4cq5rUNgbIAw6H4vR6S5Ht3PSYn.webp",
+  ];
+
+  const handleThumbnailClick = (image) => {
+    setPreviewImage(image);
+  };
+
+  const handleZoomToggle = () => {
+    setIsZoomed(!isZoomed);
+  };
+
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Grid container spacing={2}>
+        {/* Image Preview Section */}
+        <Grid item size={12}>
+          <Box
+            sx={{
+              overflow: "hidden",
+              cursor: "pointer",
+            }}
+            onClick={handleZoomToggle}
+          >
+            <img
+              src={previewImage}
+              alt="Preview"
+              style={{
+                width: "100%",
+                height: "auto",
+                display: "block",
+              }}
+            />
+          </Box>
+        </Grid>
+
+        {/* Image Control Section */}
+        <Grid item size={12}>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent:"center",
+              padding: 2,
+              gap:2
+            }}
+          >
+            {thumbnails.map((thumbnail, index) => (
+              <IconButton
+                key={index}
+                onClick={() => handleThumbnailClick(thumbnail)}
+                sx={{
+                  borderRadius: 2,
+                  overflow: "hidden",
+                }}
+              >
+                <img
+                  src={thumbnail}
+                  alt={`Thumbnail ${index + 1}`}
+                  style={{
+                    width: "100%",
+                    height: "auto",
+                    maxWidth: "75px",
+                  }}
+                />
+              </IconButton>
+            ))}
+          </Box>
+        </Grid>
+
+      </Grid>
+
+      {/* Zoom Dialog */}
+      <Dialog open={isZoomed} onClose={handleZoomToggle} maxWidth="lg">
+        <DialogContent>
+          <img
+            src={previewImage}
+            alt="Zoomed Preview"
+            style={{
+              width: "100%",
+              height: "auto",
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default ImageView;

src/components/ImageView/index.js

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

src/components/NewsLetter/NewsLetter.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Box, Button, TextField, InputAdornment, Typography } from '@mui/material';
+
+
+
+const NewsLetter = () => {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: '100%',
+        height: 0,
+        paddingTop: '600px', // This sets the height based on top padding
+        overflow: 'hidden',
+        display: "flex"
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          backgroundColor: 'rgba(50, 50, 50, 0.5)', // Filter overlay
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: '#fff', // Text and button color for visibility
+        }}
+      >
+
+        <Box sx={{ width: "35%", backgroundColor: "rgba(255,255,255, 0.5)", padding: 10, textAlign:"center", color:"black" }}>
+
+          <Typography variant='h3'>
+            Let's Stay in touch
+          </Typography>
+          <Typography variant='body1'>
+            Enjoy 15% off your first order when you join our mailing list.
+          </Typography>
+          <TextField
+            label="Enter your email address"
+            variant="outlined"
+            fullWidth
+            sx={{ backgroundColor: "white", my:4 }}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    sx={{ height: "100%", borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }}
+                  >
+                    Send
+                  </Button>
+                </InputAdornment>
+              )
+            }}
+          />
+
+          <Typography variant='body1'>
+            We respect your privacy, so we never share your info.
+          </Typography>
+        </Box>
+
+      </Box>
+    </Box>
+  );
+};
+
+export default NewsLetter;

src/components/NewsLetter/index.js

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

src/components/ProductDetails/ProductDetails.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+import {
+  Box,
+  Typography,
+  Select,
+  MenuItem,
+  Button,
+  FormControl,
+  InputLabel,
+} from "@mui/material";
+import Grid from '@mui/material/Grid2';
+
+const ProductDetails = () => {
+  return (
+    <Box sx={{ position: "relative"}}>
+      {/* Flex Container */}
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 2}}>
+        {/* Section 1: Product Info */}
+        <Box>
+          <Typography variant="h5" sx={{fontWeight:"bold", mb:2}}>Product Name</Typography>
+          <Typography variant="body2" color="text.secondary">
+            Product Type
+          </Typography>
+          <Typography
+            variant="body1"
+            sx={{ fontWeight: "bold" }}
+          >
+            $99.99
+          </Typography>
+        </Box>
+
+        {/* Section 2: Description */}
+        <Box sx={{mb:5}}>
+          <Typography variant="h6" color="text.secondary" sx={{fontWeight:"bold", mb:3}}>
+            Description
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{fontWeight:"400", mb:3 }}>
+            Materials : Plain Soft Crepe with embroidery.
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{fontWeight:"400" }}>
+            Care Instruction : Handwash for better care - Machine wash cotton items in cold or warm water. Do not use hot water as it may shrink the fabric - Use normal wash cycle and gentle detergent - Avoid using any harsh chemicals like bleach - Tumble dry on low setting, then promptly remove the item from the dryer to avoid wrinkles - Iron to remove wrinkle. Adding a spray starch will revive the crispness of cotton fabrics. Note : - Sale items are not returnable, exchangeable & refundable - Change of mind not applicable - Wrong washing, storing or ironing method which may cause product damage will not be entertained - Due to lighting effects, monitor’s brightness, contrast setting, etc., they could be some slight differences in the colour tone of the pictures and the actual item. Delivery : Postage will take around 3-5 working days from purchasing date
+          </Typography>
+        </Box>
+
+        {/* Section 3: Controls */}
+        <Grid container spacing={2} sx={{mt:"auto"}}>
+          {/* Size Select */}
+          <Grid item size={12}>
+            <FormControl fullWidth>
+              <InputLabel>Size</InputLabel>
+              <Select defaultValue="">
+                <MenuItem value="small">Small</MenuItem>
+                <MenuItem value="medium">Medium</MenuItem>
+                <MenuItem value="large">Large</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          {/* Color Select */}
+          <Grid item size={12}>
+            <FormControl fullWidth>
+              <InputLabel>Color</InputLabel>
+              <Select defaultValue="">
+                <MenuItem value="red">Red</MenuItem>
+                <MenuItem value="blue">Blue</MenuItem>
+                <MenuItem value="green">Green</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          {/* Material Select */}
+          <Grid item size={12}>
+            <FormControl fullWidth>
+              <InputLabel>Material</InputLabel>
+              <Select defaultValue="">
+                <MenuItem value="cotton">Cotton</MenuItem>
+                <MenuItem value="wool">Wool</MenuItem>
+                <MenuItem value="silk">Silk</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+
+          {/* Buy Now Button */}
+          <Grid item size={12}>
+            <Button
+              variant="contained"
+              color="common.black"
+              fullWidth
+              sx={{
+                backgroundColor: (theme) => theme.palette.common.black,
+                color: "white",
+                textTransform: "none",
+                mt: 2,
+                "&:hover": {
+                  backgroundColor: (theme) => theme.palette.grey[900],
+                },
+              }}
+            >
+              BUY NOW
+            </Button>
+          </Grid>
+        </Grid>
+      </Box>
+
+    </Box>
+  );
+};
+
+export default ProductDetails;

src/components/ProductDetails/index.js

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

src/components/ProductHistoryList/ProductHistoryList.jsx

@@ -0,0 +1,120 @@
+import {useState} from 'react';
+import { Box, Typography, IconButton, Pagination } from '@mui/material';
+
+import Grid from '@mui/material/Grid2';
+
+const ProductHistoryList = () => {
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
+  const totalPages = 5;
+
+  const handleChangePage = (event, value) => {
+    setCurrentPage(value);
+  };
+
+  const handlePrevious = () => {
+    setCurrentPage((prev) => (prev > 1 ? prev - 1 : 1));
+  };
+
+  const handleNext = () => {
+    setCurrentPage((prev) => (prev < totalPages ? prev + 1 : totalPages));
+  };
+
+  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) => (<Grid item size={2} key={index}>
+          <Box
+            sx={{
+              overflow: 'hidden',
+              position: 'relative'
+            }}
+          >
+            <img
+              src={image.url}
+              alt={image.title}
+              style={{
+                width: '100%',
+                aspectRatio: '4 / 4',
+                objectFit: 'cover',
+              }}
+            />
+
+            <Box sx={{ py: 5 }}>
+              <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+                {image.title}
+              </Typography>
+              <Typography variant="h6" >
+                {`RM ${image.price}`}
+              </Typography>
+            </Box>
+          </Box>
+        </Grid>))}
+      </Grid>
+      {/* Pagination Controls */}
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          mt: 4,
+        }}
+      >
+        <Pagination
+          count={totalPages}
+          page={currentPage}
+          onChange={handleChangePage}
+          sx={{ mx: 2 }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default ProductHistoryList;

src/components/ProductHistoryList/index.js

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

src/components/ProductList/ProductList.jsx

@@ -8,6 +8,7 @@ const ProductList = ({ size }) => {
 
   const images = [
     {
+      id: 1,
       url: 'https://via.placeholder.com/300',
       title: 'KEMBOJA IN BEIGE',
       price: 123.90,
@@ -15,6 +16,7 @@ const ProductList = ({ size }) => {
       extra_desc: "or 3 payments of 68.50 MYR with Atome"
     },
     {
+      id: 2,
       url: 'https://via.placeholder.com/300',
       title: 'KEMBOJA IN BEIGE',
       price: 123.90,
@@ -22,6 +24,7 @@ const ProductList = ({ size }) => {
       extra_desc: "or 3 payments of 68.50 MYR with Atome"
     },
     {
+      id: 3,
       url: 'https://via.placeholder.com/300',
       title: 'KEMBOJA IN BEIGE',
       price: 123.90,
@@ -29,6 +32,7 @@ const ProductList = ({ size }) => {
       extra_desc: "or 3 payments of 68.50 MYR with Atome"
     },
     {
+      id: 4,
       url: 'https://via.placeholder.com/300',
       title: 'KEMBOJA IN BEIGE',
       price: 123.90,
@@ -36,6 +40,7 @@ const ProductList = ({ size }) => {
       extra_desc: "or 3 payments of 68.50 MYR with Atome"
     },
     {
+      id: 5,
       url: 'https://via.placeholder.com/300',
       title: 'KEMBOJA IN BEIGE',
       price: 123.90,
@@ -43,6 +48,7 @@ const ProductList = ({ size }) => {
       extra_desc: "or 3 payments of 68.50 MYR with Atome"
     },
     {
+      id: 6,
       url: 'https://via.placeholder.com/300',
       title: 'KEMBOJA IN BEIGE',
       price: 123.90,
@@ -60,10 +66,13 @@ const ProductList = ({ size }) => {
 
             return <Grid item size={4} key={index}>
               <Box
+                onClick={()=>{ window.location.href = `/products/${image.id}` }}
                 sx={{
                   overflow: 'hidden',
-                  position: 'relative'
+                  position: 'relative',
+                  cursor: 'pointer'
                 }}
+        
               >
                 <img
                   src={image.url}

src/components/ProductSuggestion/ProductSuggestion.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Box, Typography, Button } from '@mui/material';
+
+import Grid from '@mui/material/Grid2';
+
+const ProductSuggestion = () => {
+
+  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: '4 / 4',
+                objectFit: 'cover',
+              }}
+            />
+
+            <Box sx={{ py: 5 }}>
+              <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+                {image.title}
+              </Typography>
+              <Typography variant="h6" >
+                {`RM ${image.price}`}
+              </Typography>
+            </Box>
+          </Box>
+        </Grid>))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default ProductSuggestion;

src/components/ProductSuggestion/index.js

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

src/components/ProductType/ProductType.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Box, Button, Typography } from '@mui/material';
+
+const ProductType = () => {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: '100%',
+        height: 0,
+        paddingTop: '600px', // This sets the height based on top padding
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          backgroundColor: 'rgba(0, 0, 0, 0.5)', // Filter overlay
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: '#fff', // Text and button color for visibility
+        }}
+      >
+        <Typography variant="h4" gutterBottom>
+          Some Type
+        </Typography>
+        <Button variant="contained" color="primary">
+          SHOP NOW
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default ProductType;

src/components/ProductType/index.js

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

src/components/VideoAds/VideoAds.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+
+const VideoAds = ({ video_url, height, width }) => {
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        overflow: 'hidden',
+        width: width || '100%',
+        height: height || '300px',
+      }}
+    >
+      <video
+        src={video_url}
+        autoPlay
+        loop
+        muted
+        playsInline
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: 'auto',
+        }}
+      />
+    </Box>
+  );
+};
+
+VideoAds.propTypes = {
+  video_url: PropTypes.string.isRequired,
+  height: PropTypes.string,
+  width: PropTypes.string,
+};
+
+VideoAds.defaultProps = {
+  video_url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+  height: '300px',
+  width: '100%',
+};
+
+export default VideoAds;

src/components/VideoAds/index.js

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

src/pages/Home.jsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import { Box, Typography } from '@mui/material'
+import Grid from '@mui/material/Grid2';
 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 { Link } from '@mui/material'
+import VideoAds from '../components/VideoAds'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import ProductType from '../components/ProductType';
+import NewsLetter from '../components/NewsLetter';
 
 const Home = () => {
 
@@ -38,11 +42,42 @@ const Home = () => {
           <Link href="#" sx={{ position: "absolute", right: 0, textDecoration: "underline" }}>VIEW ALL</Link>
 
         </Box>
-
         <ProductSelected />
+      </Box>
+
+      <VideoAds width={"100%"} height={700} />
+
+      <Box sx={{ px: 24, mb: 10 }}>
+
+
+        <Box sx={{ flexGrow: 1, mt: 10 }}>
+          <Grid container spacing={2}>
+            <Grid size={12}>
+              <ProductType />
+            </Grid>
+            <Grid size={6}>
+              <ProductType />
+            </Grid>
+            <Grid size={6}>
+              <ProductType />
+            </Grid>
+            <Grid size={12}>
+              <ProductType />
+            </Grid>
+          </Grid>
+        </Box>
+
+      </Box>
+
+      <NewsLetter />
+
+      <Box sx={{ px: 24, my: 10 }}>
+
         <SocialMedia />
         <Feature />
       </Box>
+
+
     </>
   )
 }

src/pages/Products/Product.jsx

@@ -1,6 +1,13 @@
 import React, { useEffect } from 'react'
-import { useParams } from 'react-router-dom'
-
+import { Box, Typography } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import Grid from '@mui/material/Grid2';
+import ImageView from '../../components/ImageView/ImageView';
+import ProductDetails from '../../components/ProductDetails';
+import ProductSuggestion from '../../components/ProductSuggestion';
+import ProductHistoryList from '../../components/ProductHistoryList';
+import SocialMedia from '../../components/SocialMedia'
+import Feature from '../../components/Feature'
 
 const Product = () => {
 
@@ -8,10 +15,62 @@ const Product = () => {
 
   useEffect(() => {
 
-  },[])
+  }, [])
 
   return (
-    <div>{`Product: ${pid}`}</div>
+
+    <Box sx={{ mt: 10, px: 24 }}>
+      <Grid container spacing={0}>
+        <Grid size={6}>
+          <Box sx={{ paddingRight: 1 }}>
+            <Box>
+              <ImageView />
+            </Box>
+          </Box>
+        </Grid>
+
+        <Grid size={6} xs>
+          <Box>
+            <Box>
+              <ProductDetails />
+            </Box>
+          </Box>
+        </Grid>
+      </Grid>
+
+      <Box sx={{
+        width: "100%",
+        borderTop: "1px solid rgba(0,0,0,0.2)",
+        py: 4,
+        textAlign: "center"
+      }}>
+        <Typography variant='body1' sx={{ fontWeight: "400", mb: 4 }}>
+          YOU MAY ALSO LIKE
+        </Typography>
+
+        <ProductSuggestion />
+
+      </Box>
+
+      <Box sx={{
+        width: "100%",
+        borderTop: "1px solid rgba(0,0,0,0.2)",
+        py: 4,
+        textAlign: "center"
+      }}>
+        <Typography variant='body1' sx={{ fontWeight: "400", mb: 4 }}>
+          RECENTLY VIEWED 
+        </Typography>
+
+        <ProductHistoryList />
+
+      </Box>
+
+
+      <SocialMedia />
+      <Feature />
+    </Box>
+
   )
 }
 

src/theme/theme.js

@@ -7,7 +7,7 @@ let theme = createTheme({
         main:"#95AAC5"
     },
     secondary:{
-        main:"##A3ADAE"
+        main:"#A3ADAE"
     },
     background:{
         paper:"#CCC",