From 3c1ef297e983307033743b82abc18652596d15de Mon Sep 17 00:00:00 2001
From: mathusan <matu@mail.de>
Date: Tue, 17 Jun 2025 22:44:05 +0200
Subject: [PATCH] Contact page und home page verbessert

---
 01-frontend/src/helper/homepage/ItemCard.css | 25 ++++++++
 01-frontend/src/pages/Contact.tsx            | 14 ++---
 01-frontend/src/pages/Home.tsx               | 66 ++++++++++++++------
 3 files changed, 79 insertions(+), 26 deletions(-)
 create mode 100644 01-frontend/src/helper/homepage/ItemCard.css

diff --git a/01-frontend/src/helper/homepage/ItemCard.css b/01-frontend/src/helper/homepage/ItemCard.css
new file mode 100644
index 0000000..f06c739
--- /dev/null
+++ b/01-frontend/src/helper/homepage/ItemCard.css
@@ -0,0 +1,25 @@
+/* FilterItem.css */
+
+/* Container um jedes Filter-Widget */
+.filter-item {
+    margin-bottom: 1.5rem;
+}
+
+/* Überschrift (FormLabel) */
+.filter-item__label {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    /* nutze die CSS-Variable, die GlobalStyles füllen */
+    color: var(--text-color);
+}
+
+/* Das Material-UI FormControl-Element */
+.filter-item__group {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Jeder Radio-Button mit Label */
+.filter-item__option {
+    color: var(--text-color);
+}
diff --git a/01-frontend/src/pages/Contact.tsx b/01-frontend/src/pages/Contact.tsx
index d6df019..9a608a6 100644
--- a/01-frontend/src/pages/Contact.tsx
+++ b/01-frontend/src/pages/Contact.tsx
@@ -57,13 +57,13 @@ export default function Impressum() {
                 Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen ...
             </Typography>
 
-            <ul>
-                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Berichtigung unrichtiger Daten (Art. 16 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Löschung der Daten (Art. 17 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Einschränkung der Verarbeitung (Art. 18 DSGVO)</Typography></li>
-                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li>
-            </ul>
+            <Box component="ul" sx={{ listStyle: 'none', p: 0, m: 0 }}>
+                <li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)</Typography></li>
+                <li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Berichtigung unrichtiger Daten (Art. 16 DSGVO)</Typography></li>
+                <li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Löschung der Daten (Art. 17 DSGVO)</Typography></li>
+                <li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Einschränkung der Verarbeitung (Art. 18 DSGVO)</Typography></li>
+                <li><Typography variant="body2" sx={{ color: 'text.primary', mb: 0.5 }}> • Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li>
+            </Box>
 
             <Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}>
                 III. Informationen zur Datenverarbeitung
diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx
index 4ecbe1b..906c1ae 100644
--- a/01-frontend/src/pages/Home.tsx
+++ b/01-frontend/src/pages/Home.tsx
@@ -89,18 +89,18 @@ export default function Home() {
         });
     }, [items, priceRange, selectedCategory, selectedRating, searchQuery]);
 
-    
-        // Lese die Suchanfrage aus der URL
-        useEffect(() => {
-            const params = new URLSearchParams(location.search);
-            const query = params.get("search");
-            setSearchQuery(query);
-        }, [location.search]);
+
+    // Lese die Suchanfrage aus der URL
+    useEffect(() => {
+        const params = new URLSearchParams(location.search);
+        const query = params.get("search");
+        setSearchQuery(query);
+    }, [location.search]);
+
+
 
 
 
-    // Items, die aktuell angezeigt werden
-    const visibleItems: ItemWithImage[] = filteredItems;
 
     // Container Ref
     const containerRef = useRef<HTMLDivElement>(null);
@@ -167,17 +167,45 @@ export default function Home() {
                     onChange={handleRatingChange}
                 />
             </div>
-            <div className="page-background page-background-center" ref={containerRef}>
-                <Box className="cardgrid">
-                    {visibleItems.length === 0 ? (
-                        <Alert variant="filled" severity="warning" className="no-results">{t('noItemsFound')}</Alert>
-                    ) : (
-                        visibleItems.map((item) => (
-                            <ItemCard key={item.id} item={item} />
-                        ))
-                    )}
-                </Box>
+            return (
+            <div
+                className="home-page-background"
+                style={{ backgroundColor: theme.palette.homepage }}
+            >
+                <div className="sidebar sidebar-filter">
+                    {/* … Sidebar mit Filtern … */}
+                </div>
+
+                {/* hier kommt Dein angepasster Hauptbereich */}
+                <main
+                    className="page-background page-background-center"
+                    ref={containerRef}
+                >
+                    <Box className="cardgrid">
+                        {filteredItems.length === 0 ? (
+                            <Alert
+                                variant="filled"
+                                severity="error"
+                                sx={{
+                                    bgcolor: theme.palette.error.main,
+                                    color: theme.palette.getContrastText(
+                                        theme.palette.error.main
+                                    ),
+                                    width: "100%",
+                                    justifyContent: "center",
+                                }}
+                            >
+                                {t("noItemsFound")}
+                            </Alert>
+                        ) : (
+                            filteredItems.map(item => (
+                                <ItemCard key={item.id} item={item} />
+                            ))
+                        )}
+                    </Box>
+                </main>
             </div>
+            );
         </div>
     );
 }