Added bgcolor to Item page

01-frontend/src/pages/Product.tsx

@@ -28,7 +28,7 @@ export default function Product() {
     if (!item) {
         return <div>Item not found</div>;
     }
-    
+
 
     const handleAddToCart = () => {
         addToBasket(item.id, quantity);
@@ -38,10 +38,11 @@ export default function Product() {
     const discountedPrice = item.price * (1 - item.discount / 100);
 
     return (
-        <Container maxWidth="lg" sx={{ py: 4 }}>
-            <Grid container spacing={4}>
-                {/* Left Column - Image */}
-               
+        <div className='page-background'>
+            <Container maxWidth="lg" sx={{ py: 4 }} >
+                <Grid container spacing={4}>
+                    {/* Left Column - Image */}
+
                     <Card elevation={2} sx={{ width: '100%', maxWidth: 400 }}>
                         <Box
                             component="img"
@@ -50,10 +51,10 @@ export default function Product() {
                             sx={{ width: '100%', height: 'auto' }}
                         />
                     </Card>
-              
 
-                {/* Right Column - Product Details */}
-              
+
+                    {/* Right Column - Product Details */}
+
                     <Stack spacing={3}>
                         <Typography variant="h4" component="h1">
                             {item.name}
@@ -134,8 +135,9 @@ export default function Product() {
                             </Typography>
                         </Box>
                     </Stack>
-                
-            </Grid>
-        </Container>
+
+                </Grid>
+            </Container>
+        </div>
     );
 };