Added Rating product without logic

01-frontend/src/helper/RatingCard.tsx

@@ -0,0 +1,9 @@
+import { Typography } from "@mui/material";
+
+export default function RatingCard() {
+    return (
+        <Typography variant="h5">
+            Hier steht ein Rating
+        </Typography>
+    );
+}

01-frontend/src/helper/Ratings.tsx

@@ -0,0 +1,32 @@
+import { Button, Divider, Rating, TextField, Typography } from "@mui/material";
+import RatingCard from "./RatingCard";
+
+export default function Ratings() {
+    return (
+        <>
+            <div className='contact-divider-box'>
+                <Divider className='contact-divider' />
+            </div>
+                <div className="rating-card-body">
+                    <Typography variant="h5">
+                    Rate this product:</Typography>
+                    <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+                    <TextField
+                        label="Rating text"
+                        multiline
+                        minRows={4}
+                        maxRows={16}
+                    />
+                    <Button variant="contained" color="primary" className="rating-button">
+                        Submit
+                    </Button>
+                </div>
+            <div className='contact-divider-box'>
+                <Divider className='contact-divider' />
+            </div>
+            <Typography variant="h5">
+                Ratings:
+            </Typography>
+            <RatingCard /></>
+    );
+}

01-frontend/src/helper/helper.css

@@ -8,3 +8,14 @@
 .item-card-button{
     color: green;
 }
+
+.rating-card-body{
+    display: grid;
+    align-items: center; /* Vertikale Zentrierung */
+    width: 100%;
+    gap: 30px;
+}
+
+.rating-button{
+    max-width: 200px;
+}

01-frontend/src/pages/Product.tsx

@@ -14,9 +14,10 @@ import {
     Typography,
 } from '@mui/material';
 import { useState } from 'react';
-import Item from '../components/Item';
 import { useLocation, useNavigate } from 'react-router-dom';
+import Item from '../components/Item';
 import { useBasket } from '../helper/BasketProvider';
+import Ratings from '../helper/Ratings';
 
 
 export default function Product() {
@@ -68,7 +69,7 @@ export default function Product() {
     };
 
     return (
-        <div className='page-background'>
+        <div className='product-page-background'>
             <Container maxWidth="lg" sx={{ py: 4 }} >
                 <Grid container spacing={4}>
                     {/* Left Column - Image */}
@@ -174,11 +175,13 @@ export default function Product() {
 
                 </Grid>
                 <div className='contact-divider-box'>
-                <Divider className='contact-divider'/>
-</div>
-                        <Typography variant="body1">
-                            {item.description}
-                        </Typography>
+                    <Divider className='contact-divider' />
+                </div>
+                <Typography variant="body1">
+                    {item.description}
+                </Typography>
+
+                <Ratings />
             </Container>
         </div>
     );

01-frontend/src/pages/pages.css

@@ -110,3 +110,15 @@
   width: 100%;
   margin: 25px 0; /* Abstand hinzufügen */
 }
+
+.product-page-background {
+    background: linear-gradient(135deg, #ece9e6, #ffffff);
+    height: 100%;
+    min-height: 600px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0; /* Abstand oben und unten */
+    box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
+}