implemented prototype of farming station component page

01-frontend/public/locales/de/translation.json

@@ -21,6 +21,8 @@
   "clearCart": "Warenkorb leeren",
   "close": "Schließen",
   "completeYourOrder": "Bestellung abschließen",
+  "components": "Komponenten",
+  "componentsFarmingStation": "Komponenten der Indoor-Farming-Station",
   "contact": "Kontakt",
   "country": "Land",
   "currentAccount": "Konto des aktuellen Benutzers",

01-frontend/public/locales/en/translation.json

@@ -21,6 +21,8 @@
   "clearCart": "Clear cart",
   "close": "Close",
   "completeYourOrder": "Complete your order",
+  "components": "Components",
+  "componentsFarmingStation": "Components of the indoor farming station",
   "contact": "Contact",
   "country": "Country",
   "currentAccount": "Account of current user",

01-frontend/src/App.tsx

@@ -12,7 +12,7 @@ import Orders from './pages/Orders';
 import Payment from './pages/Payment';
 import Product from './pages/Product';
 import { CustomThemeProvider } from './theme/ThemeContext';
-import FSModel from './pages/FSModel';
+import Components from './pages/Components.tsx';
 import AdminPanel from './pages/AdminPanel';
 
 export default function App() {
@@ -31,7 +31,7 @@ export default function App() {
                 <Route path="*" element={<NoPage />} />
                 <Route path="/product/:id" element={<Product />} />
                 <Route path="/checkout" element={<Payment />} />
-                <Route path="/fsmodel" element={<FSModel />} />
+                <Route path="/components" element={<Components />} />
                 <Route path="/contact" element={<Contact />} />
                 <Route path='/account' element={<Account />} />
                 <Route path='/orders' element={<Orders />} />

01-frontend/src/helper/navbar/NavBar.tsx

@@ -29,7 +29,7 @@ export default function NavBar() {
 
     const [itemNames, setItemNames] = React.useState<string[]>([]); // Für Autocomplete
 
-    const pageKeys = ['fsmodel', 'admin', 'checkout', 'contact'];
+    const pageKeys = ['components', 'checkout', 'contact', 'admin'];
     const settingKeys = ['account', 'orders', 'logout'];
 
     const pages = pageKeys.map(key => ({ key, label: t(key) }));

01-frontend/src/pages/Components.tsx

@@ -0,0 +1,95 @@
+import { Box, Typography, Grid, List, ListItem, ListItemText } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import "./pages.css";
+import farmingStation from '../assets/fscomponents/fs_components_0.png';
+import growrack from '../assets/fscomponents/fs_components_1.png';
+import tank from '../assets/fscomponents/fs_components_2.png';
+import control from '../assets/fscomponents/fs_components_3.png';
+import light from '../assets/fscomponents/fs_components_4.png';
+import pump from '../assets/fscomponents/fs_components_5.png';
+import flowerpots from '../assets/fscomponents/fs_components_6.png';
+import pipes from '../assets/fscomponents/fs_components_7.png';
+
+export default function Components() {
+
+    const { t } = useTranslation();
+    const [hoverIndex, setHoverIndex] = useState<number | null>(null);
+
+    const components = [
+        "Regal",
+        "Tank",
+        "Steuerung",
+        "Beleuchtung",
+        "Pumpe",
+        "Pflanztöpfe",
+        "Schläuche"
+    ];
+
+    const componentImages = [
+        growrack,
+        tank,
+        control,
+        light,
+        pump,
+        flowerpots,
+        pipes
+    ];
+
+    return (
+        <Box sx={{ pt: 4, display: 'flex', justifyContent: 'center' }}>
+            <Box sx={{ maxWidth: 900, width: '100%' }}>
+                <Typography
+                    variant="h3"
+                    align="center"
+                    gutterBottom
+                    sx={{ color: 'text.primary' }}
+                >
+                    {t('componentsFarmingStation')}
+                </Typography>
+
+                <Grid container spacing={4} justifyContent="center">
+                    <Grid item xs={12} md={6} sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+                        <Box
+                            component="img"
+                            src={hoverIndex !== null ? componentImages[hoverIndex] : farmingStation}
+                            alt={t('componentsFarmingStation')}
+                            sx={{
+                                maxWidth: '100%',
+                                height: 'auto',
+                                maxHeight: '80vh',
+                                borderRadius: 2,
+                                border: '3px solid green',
+                                boxSizing: 'border-box',
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={12} md={6} sx={{ mb: 2 }}>
+                        <List>
+                            {components.map((item, index) => (
+                                <ListItem
+                                    key={index}
+                                    disablePadding
+                                    onMouseEnter={() => setHoverIndex(index)}
+                                    onMouseLeave={() => setHoverIndex(null)}
+                                >
+                                    <ListItemText
+                                        primaryTypographyProps={{
+                                            variant: 'h5',
+                                            sx: {
+                                                color: hoverIndex === index ? 'green' : 'text.primary',
+                                                transition: 'color 0.2s ease',
+                                            },
+                                        }}
+                                        primary={item}
+                                    />
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Grid>
+                </Grid>
+            </Box>
+        </Box>
+    );
+}

01-frontend/src/pages/FSModel.tsx

@@ -1,24 +0,0 @@
-import { Box, Typography } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import "./pages.css";
-
-export default function FSModel() {
-
-    const { t } = useTranslation();
-
-    return (
-        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
-            <Typography
-                variant="h3"
-                align="center"
-                gutterBottom
-                sx={{ color: 'text.primary' }}
-            >
-                {t('categories')}
-            </Typography>
-            <Typography variant="subtitle1" align="center" sx={{ mb: 4 }}>
-                ...
-            </Typography>
-        </Box>
-    );
-}

01-frontend/src/pages/pages.css

@@ -68,6 +68,10 @@
     color: var(--text-color);
 }
 
+.page-background.page-background--no-space-between {
+    justify-content: flex-start !important;
+}
+
 .impressum-container {
     display: flex;
     flex-direction: column;