Add Mollie payment integration to CartTab and OrderProcessingService

- Introduced Mollie payment method in CartTab, allowing users to select it alongside existing payment options.
- Implemented loading and error handling for the Mollie component.
- Updated OrderProcessingService to create Mollie payment intents.
- Adjusted PaymentMethodSelector to switch to Mollie when specific delivery methods are selected.
- Enhanced CartTab to store cart items for Mollie payments and calculate total amounts accordingly.

prerender/seo/feeds.cjs

@@ -37,7 +37,7 @@ const generateProductsXml = (allProductsData = [], baseUrl, config) => {
       710: "Home & Garden > Kitchen & Dining > Kitchen Tools & Utensils", // Grinder
       
       // Measuring & Packaging
-      186: "Business & Industrial > Science & Laboratory", // Wiegen & Verpacken
+      186: "Business & Industrial", // Wiegen & Verpacken
       187: "Business & Industrial > Science & Laboratory > Lab Equipment", // Waagen
       346: "Home & Garden > Kitchen & Dining > Food Storage", // Vakuumbeutel
       355: "Home & Garden > Kitchen & Dining > Food Storage", // Boveda & Integra Boost
@@ -109,14 +109,14 @@ const generateProductsXml = (allProductsData = [], baseUrl, config) => {
       302: "Home & Garden > Tools", // Erntemaschinen
       
       // Hardware & Plumbing
-      222: "Hardware > Plumbing Fixtures", // PE-Teile
-      374: "Hardware > Plumbing Fixtures", // Verbindungsteile
+      222: "Hardware > Plumbing", // PE-Teile
+      374: "Hardware > Plumbing > Plumbing Fittings", // Verbindungsteile
       
       // Electronics & Control
       314: "Electronics > Electronics Accessories", // Steuergeräte
       408: "Electronics > Electronics Accessories", // GrowControl
       344: "Business & Industrial > Science & Laboratory > Lab Equipment", // Messgeräte
-      555: "Business & Industrial > Science & Laboratory > Lab Equipment", // Mikroskope
+      555: "Business & Industrial > Science & Laboratory > Lab Equipment > Microscopes", // Mikroskope
       
       // Camping & Outdoor
       226: "Sporting Goods > Outdoor Recreation > Camping & Hiking", // Zeltzubehör
@@ -126,7 +126,7 @@ const generateProductsXml = (allProductsData = [], baseUrl, config) => {
       240: "Home & Garden > Plants", // Anbauzubehör
       
       // Office & Media
-      424: "Business & Industrial > Office Supplies", // Etiketten & Schilder
+      424: "Office Supplies > Labels", // Etiketten & Schilder
       387: "Media > Books", // Literatur
       
       // General categories
@@ -140,14 +140,7 @@ const generateProductsXml = (allProductsData = [], baseUrl, config) => {
       450: "Home & Garden", // Restposten
     };
     
-    const category = categoryMappings[categoryId] || "Home & Garden > Plants";
-    
-    // Validate that the category is not empty or too generic
-    if (!category || category.trim() === "") {
-      return "Home & Garden > Plants";
-    }
-    
-    return category;
+    return categoryMappings[categoryId] || "Home & Garden > Plants";
   };
 
   let productsXml = `<?xml version="1.0" encoding="UTF-8"?>
@@ -157,7 +150,7 @@ const generateProductsXml = (allProductsData = [], baseUrl, config) => {
     <link>${baseUrl}</link>
     <description>${config.descriptions.short}</description>
     <lastBuildDate>${currentDate}</lastBuildDate>
-    <language>de-DE</language>`;
+    <language>${config.language}</language>`;
 
   // Helper function to clean text content of problematic characters
   const cleanTextContent = (text) => {

src/App.js

@@ -18,14 +18,13 @@ import BugReportIcon from "@mui/icons-material/BugReport";
 
 import SocketProvider from "./providers/SocketProvider.js";
 import SocketContext from "./contexts/SocketContext.js";
-import { CarouselProvider } from "./contexts/CarouselContext.js";
 import config from "./config.js";
 import ScrollToTop from "./components/ScrollToTop.js";
 //import TelemetryService from './services/telemetryService.js';
 
 import Header from "./components/Header.js";
 import Footer from "./components/Footer.js";
-import MainPageLayout from "./components/MainPageLayout.js";
+import Home from "./pages/Home.js";
 
 // Lazy load all route components to reduce initial bundle size
 const Content = lazy(() => import(/* webpackChunkName: "content" */ "./components/Content.js"));
@@ -51,10 +50,6 @@ const Widerrufsrecht = lazy(() => import(/* webpackChunkName: "legal" */ "./page
 const GrowTentKonfigurator = lazy(() => import(/* webpackChunkName: "konfigurator" */ "./pages/GrowTentKonfigurator.js"));
 const ChatAssistant = lazy(() => import(/* webpackChunkName: "chat" */ "./components/ChatAssistant.js"));
 
-// Lazy load separate pages that are truly different
-const PresseverleihPage = lazy(() => import(/* webpackChunkName: "presseverleih" */ "./pages/PresseverleihPage.js"));
-const ThcTestPage = lazy(() => import(/* webpackChunkName: "thc-test" */ "./pages/ThcTestPage.js"));
-
 // Import theme from separate file to reduce main bundle size
 import defaultTheme from "./theme.js";
 // Lazy load theme customizer for development only
@@ -200,68 +195,60 @@ const AppContent = ({ currentTheme, onThemeChange }) => {
             <CircularProgress color="primary" />
           </Box>
         }>
-          <CarouselProvider>
-            <Routes>
-              {/* Main pages using unified component */}
-              <Route path="/" element={<MainPageLayout />} />
-              <Route path="/aktionen" element={<MainPageLayout />} />
-              <Route path="/filiale" element={<MainPageLayout />} />
+          <Routes>
+            {/* Home page with text only */}
+            <Route path="/" element={<Home />} />
 
-              {/* Category page - Render Content in parallel */}
-              <Route
-                path="/Kategorie/:categoryId"
-                element={<Content socket={socket} socketB={socketB} />}
-              />
-              {/* Single product page */}
-              <Route
-                path="/Artikel/:seoName"
-                element={<ProductDetailWithSocket />}
-              />
+            {/* Category page - Render Content in parallel */}
+            <Route
+              path="/Kategorie/:categoryId"
+              element={<Content socket={socket} socketB={socketB} />}
+            />
+            {/* Single product page */}
+            <Route
+              path="/Artikel/:seoName"
+              element={<ProductDetailWithSocket />}
+            />
 
-              {/* Search page - Render Content in parallel */}
-              <Route path="/search" element={<Content socket={socket} socketB={socketB} />} />
+            {/* Search page - Render Content in parallel */}
+            <Route path="/search" element={<Content socket={socket} socketB={socketB} />} />
 
-              {/* Profile page */}
-              <Route path="/profile" element={<ProfilePageWithSocket />} />
+            {/* Profile page */}
+            <Route path="/profile" element={<ProfilePageWithSocket />} />
 
-              {/* Reset password page */}
-              <Route
-                path="/resetPassword"
-                element={<ResetPassword socket={socket} socketB={socketB} />}
-              />
+            {/* Reset password page */}
+            <Route
+              path="/resetPassword"
+              element={<ResetPassword socket={socket} socketB={socketB} />}
+            />
 
-              {/* Admin page */}
-              <Route path="/admin" element={<AdminPage socket={socket} socketB={socketB} />} />
-              
-              {/* Admin Users page */}
-              <Route path="/admin/users" element={<UsersPage socket={socket} socketB={socketB} />} />
-              
-              {/* Admin Server Logs page */}
-              <Route path="/admin/logs" element={<ServerLogsPage socket={socket} socketB={socketB} />} />
+            {/* Admin page */}
+            <Route path="/admin" element={<AdminPage socket={socket} socketB={socketB} />} />
+            
+            {/* Admin Users page */}
+            <Route path="/admin/users" element={<UsersPage socket={socket} socketB={socketB} />} />
+            
+            {/* Admin Server Logs page */}
+            <Route path="/admin/logs" element={<ServerLogsPage socket={socket} socketB={socketB} />} />
 
-              {/* Legal pages */}
-              <Route path="/datenschutz" element={<Datenschutz />} />
-              <Route path="/agb" element={<AGB />} />
-              <Route path="/404" element={<NotFound404 />} />
-              <Route path="/sitemap" element={<Sitemap />} />
-              <Route path="/impressum" element={<Impressum />} />
-              <Route
-                path="/batteriegesetzhinweise"
-                element={<Batteriegesetzhinweise />}
-              />
-              <Route path="/widerrufsrecht" element={<Widerrufsrecht />} />
+            {/* Legal pages */}
+            <Route path="/datenschutz" element={<Datenschutz />} />
+            <Route path="/agb" element={<AGB />} />
+            <Route path="/404" element={<NotFound404 />} />
+            <Route path="/sitemap" element={<Sitemap />} />
+            <Route path="/impressum" element={<Impressum />} />
+            <Route
+              path="/batteriegesetzhinweise"
+              element={<Batteriegesetzhinweise />}
+            />
+            <Route path="/widerrufsrecht" element={<Widerrufsrecht />} />
 
-              {/* Grow Tent Configurator */}
-              <Route path="/Konfigurator" element={<GrowTentKonfigurator />} />
+            {/* Grow Tent Configurator */}
+            <Route path="/Konfigurator" element={<GrowTentKonfigurator />} />
 
-              {/* Separate pages that are truly different */}
-              <Route path="/presseverleih" element={<PresseverleihPage />} />
-              <Route path="/thc-test" element={<ThcTestPage />} />
-
-              {/* Fallback for undefined routes */}
-              <Route path="*" element={<Navigate to="/" replace />} />
-            </Routes>
-          </CarouselProvider>
+            {/* Fallback for undefined routes */}
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
         </Suspense>
       </Box>
       {/* Conditionally render the Chat Assistant */}

src/components/Header.js

@@ -38,7 +38,7 @@ class Header extends Component {
   render() {
     // Get socket directly from context in render method
     const {socket,socketB} = this.context;
-    const { isHomePage, isProfilePage, isAktionenPage, isFilialePage } = this.props;
+    const { isHomePage, isProfilePage } = this.props;
 
     return (
       <AppBar position="sticky" color="primary" elevation={0} sx={{ zIndex: 1100 }}>
@@ -94,7 +94,7 @@ class Header extends Component {
             </Box>
           </Container>
         </Toolbar>
-        {(isHomePage || this.props.categoryId || isProfilePage || isAktionenPage || isFilialePage) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId} socket={socket} socketB={socketB} />}
+        {(isHomePage || this.props.categoryId || isProfilePage) && <CategoryList categoryId={209} activeCategoryId={this.props.categoryId} socket={socket} socketB={socketB} />}
       </AppBar>
     );
   }
@@ -105,12 +105,10 @@ const HeaderWithContext = (props) => {
   const location = useLocation();
   const isHomePage = location.pathname === '/';
   const isProfilePage = location.pathname === '/profile';
-  const isAktionenPage = location.pathname === '/aktionen';
-  const isFilialePage = location.pathname === '/filiale';
   
   return (
     <SocketContext.Consumer>
-      {({socket,socketB}) => <Header {...props} socket={socket} socketB={socketB} isHomePage={isHomePage} isProfilePage={isProfilePage} isAktionenPage={isAktionenPage} isFilialePage={isFilialePage} />}
+      {({socket,socketB}) => <Header {...props} socket={socket} socketB={socketB} isHomePage={isHomePage} isProfilePage={isProfilePage} />}
     </SocketContext.Consumer>
   );
 };

src/components/MainPageLayout.js

@@ -1,349 +0,0 @@
-import React from "react";
-import { useLocation } from "react-router-dom";
-import Container from "@mui/material/Container";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Paper from "@mui/material/Paper";
-import Grid from "@mui/material/Grid";
-import ChevronLeft from "@mui/icons-material/ChevronLeft";
-import ChevronRight from "@mui/icons-material/ChevronRight";
-import { Link } from "react-router-dom";
-import SharedCarousel from "./SharedCarousel.js";
-import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
-
-const MainPageLayout = () => {
-  const location = useLocation();
-  const currentPath = location.pathname;
-
-  // Determine which page we're on
-  const isHome = currentPath === "/";
-  const isAktionen = currentPath === "/aktionen";
-  const isFiliale = currentPath === "/filiale";
-
-  // Get navigation config based on current page
-  const getNavigationConfig = () => {
-    if (isHome) {
-      return {
-        leftNav: { text: "Aktionen", link: "/aktionen" },
-        rightNav: { text: "Filiale", link: "/filiale" }
-      };
-    } else if (isAktionen) {
-      return {
-        leftNav: { text: "Filiale", link: "/filiale" },
-        rightNav: { text: "Home", link: "/" }
-      };
-    } else if (isFiliale) {
-      return {
-        leftNav: { text: "Home", link: "/" },
-        rightNav: { text: "Aktionen", link: "/aktionen" }
-      };
-    }
-    return { leftNav: null, rightNav: null };
-  };
-
-  // Define all titles for layered rendering
-  const allTitles = {
-    home: "ine annabis eeds & uttings",
-    aktionen: "Aktionen", 
-    filiale: "Filiale"
-  };
-
-  // Define all content boxes for layered rendering
-  const allContentBoxes = {
-    home: [
-      {
-        title: "Samen",
-        image: "/assets/images/seeds.jpg",
-        bgcolor: "#e1f0d3",
-        link: "/Kategorie/Samen"
-      },
-      {
-        title: "Stecklinge",
-        image: "/assets/images/cutlings.jpg",
-        bgcolor: "#e8f5d6",
-        link: "/Kategorie/Stecklinge"
-      }
-    ],
-    aktionen: [
-      {
-        title: "Ölpresse ausleihen",
-        image: "/assets/images/presse.jpg",
-        bgcolor: "#e1f0d3",
-        link: "/presseverleih"
-      },
-      {
-        title: "THC Test",
-        image: "/assets/images/purpl.jpg",
-        bgcolor: "#e8f5d6",
-        link: "/thc-test"
-      }
-    ],
-    filiale: [
-      {
-        title: "Trachenberger Straße 14",
-        image: "/assets/images/filiale1.jpg",
-        bgcolor: "#e1f0d3",
-        link: "/filiale"
-      },
-      {
-        title: "01129 Dresden",
-        image: "/assets/images/filiale2.jpg",
-        bgcolor: "#e8f5d6",
-        link: "/filiale"
-      }
-    ]
-  };
-
-  // Get opacity for each page layer
-  const getOpacity = (pageType) => {
-    if (pageType === "home" && isHome) return 1;
-    if (pageType === "aktionen" && isAktionen) return 1;
-    if (pageType === "filiale" && isFiliale) return 1;
-    return 0;
-  };
-
-  const navConfig = getNavigationConfig();
-
-  return (
-    <Container maxWidth="lg" sx={{ py: 2 }}>
-      <style>{getCombinedAnimatedBorderStyles(['seeds', 'cutlings'])}</style>
-      
-      {/* Main Navigation Header */}
-      <Box sx={{ 
-        display: "flex", 
-        alignItems: "center", 
-        justifyContent: "space-between", 
-        mb: 4,
-        mt: 2,
-        px: 0,
-        transition: "all 0.3s ease-in-out"
-      }}>
-        {/* Left Navigation - Layered rendering */}
-        <Box sx={{ 
-          display: "flex", 
-          alignItems: "center", 
-          flexShrink: 0,
-          justifyContent: "flex-start",
-          position: "relative",
-          mr: 2
-        }}>
-          {["Aktionen", "Filiale", "Home"].map((text, index) => {
-            const isActive = navConfig.leftNav && navConfig.leftNav.text === text;
-            const link = text === "Aktionen" ? "/aktionen" : text === "Filiale" ? "/filiale" : "/";
-            
-            return (
-              <Box
-                key={text}
-                component={Link}
-                to={link}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  textDecoration: "none",
-                  color: "inherit",
-                  transition: "all 0.3s ease",
-                  opacity: isActive ? 1 : 0,
-                  position: index === 0 ? "relative" : "absolute",
-                  left: index !== 0 ? 0 : "auto",
-                  pointerEvents: isActive ? "auto" : "none",
-                  "&:hover": {
-                    transform: "translateX(-5px)",
-                    color: "primary.main"
-                  }
-                }}
-              >
-                <ChevronLeft sx={{ fontSize: "2rem", mr: 1 }} />
-                <Typography
-                  sx={{
-                    fontFamily: "SwashingtonCP",
-                    fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },
-                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                    lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                    whiteSpace: "nowrap"
-                  }}
-                >
-                  {text}
-                </Typography>
-              </Box>
-            );
-          })}
-        </Box>
-
-        {/* Center Title - Layered rendering - This defines the height for centering */}
-        <Box sx={{ 
-          flex: 1, 
-          display: "flex", 
-          justifyContent: "center",
-          alignItems: "center",
-          px: 0,
-          position: "relative",
-          minWidth: 0
-        }}>
-          {Object.entries(allTitles).map(([pageType, title]) => (
-            <Typography
-              key={pageType}
-              variant="h3"
-              component="h1"
-              sx={{
-                fontFamily: "SwashingtonCP",
-                fontSize: { xs: "2.125rem", sm: "2.125rem", md: "3rem" },
-                textAlign: "center",
-                color: "primary.main",
-                textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)",
-                transition: "opacity 0.5s ease-in-out",
-                opacity: getOpacity(pageType),
-                position: pageType === "home" ? "relative" : "absolute",
-                top: pageType !== "home" ? "50%" : "auto",
-                left: pageType !== "home" ? "50%" : "auto",
-                transform: pageType !== "home" ? "translate(-50%, -50%)" : "none",
-                width: "100%",
-                pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none",
-                lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                wordWrap: "break-word",
-                hyphens: "auto"
-              }}
-            >
-              {title}
-            </Typography>
-          ))}
-        </Box>
-
-        {/* Right Navigation - Layered rendering */}
-        <Box sx={{ 
-          display: "flex", 
-          alignItems: "center", 
-          flexShrink: 0,
-          justifyContent: "flex-end",
-          position: "relative",
-          ml: 2
-        }}>
-          {["Aktionen", "Filiale", "Home"].map((text, index) => {
-            const isActive = navConfig.rightNav && navConfig.rightNav.text === text;
-            const link = text === "Aktionen" ? "/aktionen" : text === "Filiale" ? "/filiale" : "/";
-            
-            return (
-              <Box
-                key={text}
-                component={Link}
-                to={link}
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  textDecoration: "none",
-                  color: "inherit",
-                  transition: "all 0.3s ease",
-                  opacity: isActive ? 1 : 0,
-                  position: index === 0 ? "relative" : "absolute",
-                  right: index !== 0 ? 0 : "auto",
-                  pointerEvents: isActive ? "auto" : "none",
-                  "&:hover": {
-                    transform: "translateX(5px)",
-                    color: "primary.main"
-                  }
-                }}
-              >
-                <Typography
-                  sx={{
-                    fontFamily: "SwashingtonCP",
-                    fontSize: { xs: "1.25rem", sm: "1.25rem", md: "2.125rem" },  
-                    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.3)",
-                    lineHeight: { xs: "1.2", sm: "1.2", md: "1.1" },
-                    whiteSpace: "nowrap"
-                  }}
-                >
-                  {text}
-                </Typography>
-                <ChevronRight sx={{ fontSize: "2rem", ml: 1 }} />
-              </Box>
-            );
-          })}
-        </Box>
-      </Box>
-
-      {/* Content Boxes - Layered rendering */}
-      <Box sx={{ position: "relative", mb: 4 }}>
-        {Object.entries(allContentBoxes).map(([pageType, contentBoxes]) => (
-          <Grid 
-            key={pageType}
-            container 
-            spacing={0} 
-            sx={{ 
-              transition: "opacity 0.5s ease-in-out",
-              opacity: getOpacity(pageType),
-              position: pageType === "home" ? "relative" : "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              pointerEvents: getOpacity(pageType) === 1 ? "auto" : "none"
-            }}
-          >
-            {contentBoxes.map((box, index) => (
-              <Grid key={`${pageType}-${index}`} item xs={12} sm={6} sx={{ p: 2, width: "50%" }}>
-                <div className={`animated-border-card ${index === 0 ? 'seeds-card' : 'cutlings-card'}`}>
-                  <Paper
-                    component={Link}
-                    to={box.link}
-                    sx={{
-                      p: 0,
-                      textDecoration: "none",
-                      color: "text.primary",
-                      borderRadius: 2,
-                      overflow: "hidden",
-                      height: { xs: 150, sm: 200, md: 300 },
-                      display: "flex",
-                      flexDirection: "column",
-                      boxShadow: 10,
-                      transition: "all 0.3s ease",
-                      "&:hover": {
-                        transform: "translateY(-5px)",
-                        boxShadow: 20,
-                      },
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        height: "100%",
-                        bgcolor: box.bgcolor,
-                        backgroundImage: `url("${box.image}")`,
-                        backgroundSize: "contain",
-                        backgroundPosition: "center",
-                        backgroundRepeat: "no-repeat",
-                        position: "relative",
-                      }}
-                    >
-                      <Box
-                        sx={{
-                          position: "absolute",
-                          bottom: 0,
-                          left: 0,
-                          right: 0,
-                          bgcolor: "rgba(27, 94, 32, 0.8)",
-                          p: 1,
-                        }}
-                      >
-                        <Typography
-                          sx={{
-                            fontSize: "1.6rem",
-                            color: "white",
-                            fontFamily: "SwashingtonCP",
-                          }}
-                        >
-                          {box.title}
-                        </Typography>
-                      </Box>
-                    </Box>
-                  </Paper>
-                </div>
-              </Grid>
-            ))}
-          </Grid>
-        ))}
-      </Box>
-
-      {/* Shared Carousel */}
-      <SharedCarousel />
-    </Container>
-  );
-};
-
-export default MainPageLayout; 

src/components/Mollie.js

@@ -0,0 +1,381 @@
+import React, { Component, useState } from "react";
+import { Button, Box, Typography, CircularProgress } from "@mui/material";
+import config from "../config.js";
+
+// Function to lazy load Mollie script
+const loadMollie = () => {
+  return new Promise((resolve, reject) => {
+    // Check if Mollie is already loaded
+    if (window.Mollie) {
+      resolve(window.Mollie);
+      return;
+    }
+
+    // Create script element
+    const script = document.createElement('script');
+    script.src = 'https://js.mollie.com/v1/mollie.js';
+    script.async = true;
+    
+    script.onload = () => {
+      if (window.Mollie) {
+        resolve(window.Mollie);
+      } else {
+        reject(new Error('Mollie failed to load'));
+      }
+    };
+    
+    script.onerror = () => {
+      reject(new Error('Failed to load Mollie script'));
+    };
+    
+    document.head.appendChild(script);
+  });
+};
+
+const CheckoutForm = ({ mollie }) => {
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  React.useEffect(() => {
+    if (!mollie) return;
+
+    let mountedComponents = {
+      cardNumber: null,
+      cardHolder: null,
+      expiryDate: null,
+      verificationCode: null
+    };
+
+    try {
+      // Create Mollie components
+      const cardNumber = mollie.createComponent('cardNumber');
+      const cardHolder = mollie.createComponent('cardHolder');
+      const expiryDate = mollie.createComponent('expiryDate');
+      const verificationCode = mollie.createComponent('verificationCode');
+
+      // Store references for cleanup
+      mountedComponents = {
+        cardNumber,
+        cardHolder,
+        expiryDate,
+        verificationCode
+      };
+
+      // Mount components
+      cardNumber.mount('#card-number');
+      cardHolder.mount('#card-holder');
+      expiryDate.mount('#expiry-date');
+      verificationCode.mount('#verification-code');
+
+      // Set up error handling
+      cardNumber.addEventListener('change', event => {
+        const errorElement = document.querySelector('#card-number-error');
+        if (errorElement) {
+          if (event.error && event.touched) {
+            errorElement.textContent = event.error;
+          } else {
+            errorElement.textContent = '';
+          }
+        }
+      });
+
+      cardHolder.addEventListener('change', event => {
+        const errorElement = document.querySelector('#card-holder-error');
+        if (errorElement) {
+          if (event.error && event.touched) {
+            errorElement.textContent = event.error;
+          } else {
+            errorElement.textContent = '';
+          }
+        }
+      });
+
+      expiryDate.addEventListener('change', event => {
+        const errorElement = document.querySelector('#expiry-date-error');
+        if (errorElement) {
+          if (event.error && event.touched) {
+            errorElement.textContent = event.error;
+          } else {
+            errorElement.textContent = '';
+          }
+        }
+      });
+
+      verificationCode.addEventListener('change', event => {
+        const errorElement = document.querySelector('#verification-code-error');
+        if (errorElement) {
+          if (event.error && event.touched) {
+            errorElement.textContent = event.error;
+          } else {
+            errorElement.textContent = '';
+          }
+        }
+      });
+
+      // Components are now mounted and ready
+
+    } catch (error) {
+      console.error('Error creating Mollie components:', error);
+      setErrorMessage('Failed to initialize payment form. Please try again.');
+    }
+
+    // Cleanup function
+    return () => {
+      try {
+        if (mountedComponents.cardNumber) mountedComponents.cardNumber.unmount();
+        if (mountedComponents.cardHolder) mountedComponents.cardHolder.unmount();
+        if (mountedComponents.expiryDate) mountedComponents.expiryDate.unmount();
+        if (mountedComponents.verificationCode) mountedComponents.verificationCode.unmount();
+      } catch (error) {
+        console.error('Error cleaning up Mollie components:', error);
+      }
+    };
+  }, [mollie]);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    
+    if (!mollie || isSubmitting) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setErrorMessage(null);
+
+    try {
+      const { token, error } = await mollie.createToken();
+
+      if (error) {
+        setErrorMessage(error.message || 'Payment failed. Please try again.');
+        setIsSubmitting(false);
+        return;
+      }
+
+      if (token) {
+        // Handle successful token creation
+        // Create a payment completion event similar to Stripe
+        const mollieCompletionData = {
+          mollieToken: token,
+          paymentMethod: 'mollie'
+        };
+        
+        // Dispatch a custom event to notify the parent component
+        const completionEvent = new CustomEvent('molliePaymentComplete', {
+          detail: mollieCompletionData
+        });
+        window.dispatchEvent(completionEvent);
+        
+        // For now, redirect to profile with completion data
+        const returnUrl = `${window.location.origin}/profile?complete&mollie_token=${token}`;
+        window.location.href = returnUrl;
+      }
+    } catch (error) {
+      console.error('Error creating Mollie token:', error);
+      setErrorMessage('Payment failed. Please try again.');
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Box sx={{ maxWidth: 600, mx: 'auto', p: 3 }}>
+      <Typography variant="h6" gutterBottom>
+        Kreditkarte oder Sofortüberweisung
+      </Typography>
+      
+      <form onSubmit={handleSubmit}>
+        <Box sx={{ mb: 3 }}>
+          <Typography variant="body2" gutterBottom>
+            Kartennummer
+          </Typography>
+          <Box
+            id="card-number"
+            sx={{
+              p: 2,
+              border: '1px solid #e0e0e0',
+              borderRadius: 1,
+              minHeight: 40,
+              backgroundColor: '#fff'
+            }}
+          />
+          <Typography 
+            id="card-number-error" 
+            variant="caption" 
+            sx={{ color: 'error.main', minHeight: 16, display: 'block' }}
+          />
+        </Box>
+
+        <Box sx={{ mb: 3 }}>
+          <Typography variant="body2" gutterBottom>
+            Karteninhaber
+          </Typography>
+          <Box
+            id="card-holder"
+            sx={{
+              p: 2,
+              border: '1px solid #e0e0e0',
+              borderRadius: 1,
+              minHeight: 40,
+              backgroundColor: '#fff'
+            }}
+          />
+          <Typography 
+            id="card-holder-error" 
+            variant="caption" 
+            sx={{ color: 'error.main', minHeight: 16, display: 'block' }}
+          />
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+          <Box sx={{ flex: 1 }}>
+            <Typography variant="body2" gutterBottom>
+              Ablaufdatum
+            </Typography>
+            <Box
+              id="expiry-date"
+              sx={{
+                p: 2,
+                border: '1px solid #e0e0e0',
+                borderRadius: 1,
+                minHeight: 40,
+                backgroundColor: '#fff'
+              }}
+            />
+            <Typography 
+              id="expiry-date-error" 
+              variant="caption" 
+              sx={{ color: 'error.main', minHeight: 16, display: 'block' }}
+            />
+          </Box>
+
+          <Box sx={{ flex: 1 }}>
+            <Typography variant="body2" gutterBottom>
+              Sicherheitscode
+            </Typography>
+            <Box
+              id="verification-code"
+              sx={{
+                p: 2,
+                border: '1px solid #e0e0e0',
+                borderRadius: 1,
+                minHeight: 40,
+                backgroundColor: '#fff'
+              }}
+            />
+            <Typography 
+              id="verification-code-error" 
+              variant="caption" 
+              sx={{ color: 'error.main', minHeight: 16, display: 'block' }}
+            />
+          </Box>
+        </Box>
+
+        <Button 
+          variant="contained" 
+          disabled={!mollie || isSubmitting} 
+          type="submit"
+          fullWidth
+          sx={{ 
+            mt: 2,
+            backgroundColor: '#2e7d32',
+            '&:hover': {
+              backgroundColor: '#1b5e20'
+            }
+          }}
+        >
+          {isSubmitting ? (
+            <>
+              <CircularProgress size={20} sx={{ mr: 1, color: 'white' }} />
+              Verarbeitung...
+            </>
+          ) : (
+            'Bezahlung Abschließen'
+          )}
+        </Button>
+        
+        {errorMessage && (
+          <Typography 
+            variant="body2" 
+            sx={{ color: 'error.main', mt: 2, textAlign: 'center' }}
+          >
+            {errorMessage}
+          </Typography>
+        )}
+      </form>
+    </Box>
+  );
+};
+
+class Mollie extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mollie: null,
+      loading: true,
+      error: null,
+    };
+    this.molliePromise = loadMollie();
+  }
+
+  componentDidMount() {
+    this.molliePromise
+      .then((MollieClass) => {
+        try {
+          // Initialize Mollie with profile key
+          const mollie = MollieClass(config.mollieProfileKey, { 
+            locale: 'de_DE', 
+            testmode: true  // Set to false for production
+          });
+          this.setState({ mollie, loading: false });
+        } catch (error) {
+          console.error('Error initializing Mollie:', error);
+          this.setState({ 
+            error: 'Failed to initialize payment system. Please try again.',
+            loading: false 
+          });
+        }
+      })
+      .catch((error) => {
+        console.error('Error loading Mollie:', error);
+        this.setState({ 
+          error: 'Failed to load payment system. Please try again.',
+          loading: false 
+        });
+      });
+  }
+
+  render() {
+    const { mollie, loading, error } = this.state;
+
+    if (loading) {
+      return (
+        <Box sx={{ textAlign: 'center', py: 4 }}>
+          <CircularProgress sx={{ color: '#2e7d32' }} />
+          <Typography variant="body1" sx={{ mt: 2 }}>
+            Zahlungskomponente wird geladen...
+          </Typography>
+        </Box>
+      );
+    }
+
+    if (error) {
+      return (
+        <Box sx={{ textAlign: 'center', py: 4 }}>
+          <Typography variant="body1" sx={{ color: 'error.main' }}>
+            {error}
+          </Typography>
+          <Button 
+            variant="outlined" 
+            onClick={() => window.location.reload()}
+            sx={{ mt: 2 }}
+          >
+            Seite neu laden
+          </Button>
+        </Box>
+      );
+    }
+
+    return <CheckoutForm mollie={mollie} />;
+  }
+}
+
+export default Mollie;

src/components/SharedCarousel.js

@@ -1,229 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import ChevronLeft from "@mui/icons-material/ChevronLeft";
-import ChevronRight from "@mui/icons-material/ChevronRight";
-import CategoryBox from "./CategoryBox.js";
-import SocketContext from "../contexts/SocketContext.js";
-import { useCarousel } from "../contexts/CarouselContext.js";
-
-// Helper to process and set categories
-const processCategoryTree = (categoryTree) => {
-  if (
-    categoryTree &&
-    categoryTree.id === 209 &&
-    Array.isArray(categoryTree.children)
-  ) {
-    return categoryTree.children;
-  } else {
-    return [];
-  }
-};
-
-// Check for cached data
-const getProductCache = () => {
-  if (typeof window !== "undefined" && window.productCache) {
-    return window.productCache;
-  }
-  if (
-    typeof global !== "undefined" &&
-    global.window &&
-    global.window.productCache
-  ) {
-    return global.window.productCache;
-  }
-  return null;
-};
-
-// Initialize categories
-const initializeCategories = () => {
-  const productCache = getProductCache();
-
-  if (productCache && productCache["categoryTree_209"]) {
-    const cached = productCache["categoryTree_209"];
-    if (cached.categoryTree) {
-      return processCategoryTree(cached.categoryTree);
-    }
-  }
-  return [];
-};
-
-const SharedCarousel = () => {
-  const { carouselRef, filteredCategories, setFilteredCategories, moveCarousel } = useCarousel();
-  const context = useContext(SocketContext);
-  const [rootCategories, setRootCategories] = useState([]);
-
-  useEffect(() => {
-    const initialCategories = initializeCategories();
-    setRootCategories(initialCategories);
-  }, []);
-
-  useEffect(() => {
-    // Only fetch from socket if we don't already have categories
-    if (
-      rootCategories.length === 0 &&
-      context && context.socket && context.socket.connected &&
-      typeof window !== "undefined"
-    ) {
-      context.socket.emit("categoryList", { categoryId: 209 }, (response) => {
-        if (response && response.categoryTree) {
-          // Store in cache
-          try {
-            if (!window.productCache) window.productCache = {};
-            window.productCache["categoryTree_209"] = {
-              categoryTree: response.categoryTree,
-              timestamp: Date.now(),
-            };
-          } catch (err) {
-            console.error(err);
-          }
-          setRootCategories(response.categoryTree.children || []);
-        }
-      });
-    }
-  }, [context, context?.socket?.connected, rootCategories.length]);
-
-  useEffect(() => {
-    const filtered = rootCategories.filter(
-      (cat) => cat.id !== 689 && cat.id !== 706
-    );
-    setFilteredCategories(filtered);
-  }, [rootCategories, setFilteredCategories]);
-
-  // Create duplicated array for seamless scrolling
-  const displayCategories = [...filteredCategories, ...filteredCategories];
-
-  if (filteredCategories.length === 0) {
-    return null;
-  }
-
-  return (
-    <Box sx={{ mt: 3 }}>
-      <Typography
-        variant="h4"
-        component="h1"
-        sx={{
-          mb: 2,
-          fontFamily: "SwashingtonCP",
-          color: "primary.main",
-          textAlign: "center",
-          textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"
-        }}
-      >
-        Kategorien
-      </Typography>
-
-      <div 
-        className="carousel-wrapper"
-        style={{
-          position: 'relative',
-          overflow: 'hidden',
-          width: '100%',
-          maxWidth: '1200px',
-          margin: '0 auto',
-          padding: '0 20px',
-          boxSizing: 'border-box'
-        }}
-      >
-        {/* Left Arrow */}
-        <IconButton
-          onClick={() => moveCarousel("left")}
-          aria-label="Vorherige Kategorien anzeigen"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            left: '8px',
-            transform: 'translateY(-50%)',
-            zIndex: 1200,
-            backgroundColor: 'rgba(255, 255, 255, 0.9)',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-            width: '48px',
-            height: '48px',
-            borderRadius: '50%'
-          }}
-        >
-          <ChevronLeft />
-        </IconButton>
-
-        {/* Right Arrow */}
-        <IconButton
-          onClick={() => moveCarousel("right")}
-          aria-label="Nächste Kategorien anzeigen"
-          style={{
-            position: 'absolute',
-            top: '50%',
-            right: '8px',
-            transform: 'translateY(-50%)',
-            zIndex: 1200,
-            backgroundColor: 'rgba(255, 255, 255, 0.9)',
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-            width: '48px',
-            height: '48px',
-            borderRadius: '50%'
-          }}
-        >
-          <ChevronRight />
-        </IconButton>
-
-        <div 
-          className="carousel-container"
-          style={{
-            position: 'relative',
-            overflow: 'hidden',
-            padding: '20px 0',
-            width: '100%',
-            maxWidth: '1080px',
-            margin: '0 auto',
-            zIndex: 1,
-            boxSizing: 'border-box'
-          }}
-        >
-          <div 
-            className="home-carousel-track" 
-            ref={carouselRef}
-            style={{
-              display: 'flex',
-              gap: '16px',
-              transition: 'none',
-              alignItems: 'flex-start',
-              width: 'fit-content',
-              overflow: 'visible',
-              position: 'relative',
-              transform: 'translateX(0px)',
-              margin: '0 auto'
-            }}
-          >
-            {displayCategories.map((category, index) => (
-              <div
-                key={`${category.id}-${index}`}
-                className="carousel-item"
-                style={{
-                  flex: '0 0 130px',
-                  width: '130px',
-                  maxWidth: '130px',
-                  minWidth: '130px',
-                  height: '130px',
-                  maxHeight: '130px',
-                  minHeight: '130px',
-                  boxSizing: 'border-box',
-                  position: 'relative'
-                }}
-              >
-                <CategoryBox
-                  id={category.id}
-                  name={category.name}
-                  seoName={category.seoName}
-                  image={category.image}
-                  bgcolor={category.bgcolor}
-                />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </Box>
-  );
-};
-
-export default SharedCarousel; 

src/components/profile/CartTab.js

@@ -51,6 +51,9 @@ class CartTab extends Component {
       showStripePayment: false,
       StripeComponent: null,
       isLoadingStripe: false,
+      showMolliePayment: false,
+      MollieComponent: null,
+      isLoadingMollie: false,
       showPaymentConfirmation: false,
       orderCompleted: false,
       originalCartItems: []
@@ -116,7 +119,7 @@ class CartTab extends Component {
           // Determine payment method - respect constraints
           let prefillPaymentMethod = template.payment_method || "wire";
           const paymentMethodMap = {
-            "credit_card": "stripe",
+            "credit_card": "mollie",//stripe
             "bank_transfer": "wire",
             "cash_on_delivery": "onDelivery",
             "cash": "cash"
@@ -319,6 +322,27 @@ class CartTab extends Component {
     }
   };
 
+  loadMollieComponent = async () => {
+    this.setState({ isLoadingMollie: true });
+    
+    try {
+      const { default: Mollie } = await import("../Mollie.js");
+      this.setState({
+        MollieComponent: Mollie,
+        showMolliePayment: true,
+        isCompletingOrder: false,
+        isLoadingMollie: false,
+      });
+    } catch (error) {
+      console.error("Failed to load Mollie component:", error);
+      this.setState({
+        isCompletingOrder: false,
+        isLoadingMollie: false,
+        completionError: "Failed to load payment component. Please try again.",
+      });
+    }
+  };
+
   handleCompleteOrder = () => {
     this.setState({ completionError: null }); // Clear previous errors
 
@@ -363,6 +387,25 @@ class CartTab extends Component {
       this.orderService.createStripeIntent(totalAmount, this.loadStripeComponent);
       return;
     }
+    // Handle Mollie payment differently
+    if (paymentMethod === "mollie") {
+      // Store the cart items used for Mollie payment in sessionStorage for later reference
+      try {
+        sessionStorage.setItem('molliePaymentCart', JSON.stringify(cartItems));
+      } catch (error) {
+        console.error("Failed to store Mollie payment cart:", error);
+      }
+      
+      // Calculate total amount for Mollie
+      const subtotal = cartItems.reduce(
+        (total, item) => total + item.price * item.quantity,
+        0
+      );
+      const totalAmount = Math.round((subtotal + deliveryCost) * 100); // Convert to cents
+      
+      this.orderService.createMollieIntent(totalAmount, this.loadMollieComponent);
+      return;
+    }
 
     // Handle regular orders
     const orderData = {
@@ -398,6 +441,9 @@ class CartTab extends Component {
       showStripePayment,
       StripeComponent,
       isLoadingStripe,
+      showMolliePayment,
+      MollieComponent,
+      isLoadingMollie,
       showPaymentConfirmation,
       orderCompleted,
     } = this.state;
@@ -434,7 +480,7 @@ class CartTab extends Component {
           <CartDropdown 
             cartItems={cartItems} 
             socket={this.context.socket}
-            showDetailedSummary={showStripePayment}
+            showDetailedSummary={showStripePayment || showMolliePayment}
             deliveryMethod={deliveryMethod}
             deliveryCost={deliveryCost}
           />
@@ -442,7 +488,7 @@ class CartTab extends Component {
 
         {cartItems.length > 0 && (
           <Box sx={{ mt: 3 }}>
-            {isLoadingStripe ? (
+            {isLoadingStripe || isLoadingMollie ? (
               <Box sx={{ textAlign: 'center', py: 4 }}>
                 <Typography variant="body1">
                   Zahlungskomponente wird geladen...
@@ -468,9 +514,29 @@ class CartTab extends Component {
                 </Box>
                 <StripeComponent clientSecret={stripeClientSecret} />
               </>
+            ) : showMolliePayment && MollieComponent ? (
+              <>
+                <Box sx={{ mb: 2 }}>
+                  <Button
+                    variant="outlined"
+                    onClick={() => this.setState({ showMolliePayment: false })}
+                    sx={{ 
+                      color: '#2e7d32', 
+                      borderColor: '#2e7d32',
+                      '&:hover': {
+                        backgroundColor: 'rgba(46, 125, 50, 0.04)',
+                        borderColor: '#1b5e20'
+                      }
+                    }}
+                  >
+                    ← Zurück zur Bestellung
+                  </Button>
+                </Box>
+                <MollieComponent />
+              </>
             ) : (
               <CheckoutForm
-                  paymentMethod={paymentMethod}
+                paymentMethod={paymentMethod}
                 invoiceAddress={invoiceAddress}
                 deliveryAddress={deliveryAddress}
                 useSameAddress={useSameAddress}
@@ -478,7 +544,7 @@ class CartTab extends Component {
                 addressFormErrors={addressFormErrors}
                 termsAccepted={termsAccepted}
                 note={note}
-                  deliveryMethod={deliveryMethod}
+                deliveryMethod={deliveryMethod}
                 hasStecklinge={hasStecklinge}
                 isPickupOnly={isPickupOnly}
                 deliveryCost={deliveryCost}

src/components/profile/OrderProcessingService.js

@@ -270,6 +270,10 @@ class OrderProcessingService {
       });
     }
   }
+  // Create Mollie payment intent
+  createMollieIntent(totalAmount, loadMollieComponent) {
+    loadMollieComponent();
+  }
 
   // Calculate delivery cost
   getDeliveryCost() {

src/components/profile/PaymentMethodSelector.js

@@ -24,7 +24,7 @@ const PaymentMethodSelector = ({ paymentMethod, onChange, deliveryMethod, onDeli
   // Handle delivery method changes - auto-switch to stripe when DHL/DPD is selected
   useEffect(() => {
     if ((deliveryMethod === "DHL" || deliveryMethod === "DPD") && paymentMethod === "cash") {
-      handlePaymentMethodChange({ target: { value: "stripe" } });
+      handlePaymentMethodChange({ target: { value: "mollie" } });
     }
   }, [deliveryMethod, paymentMethod, handlePaymentMethodChange]);
 
@@ -42,8 +42,22 @@ const PaymentMethodSelector = ({ paymentMethod, onChange, deliveryMethod, onDeli
       description: "Bezahlen Sie per Banküberweisung",
       disabled: totalAmount === 0,
     },
-    {
+    /*{
       id: "stripe",
+      name: "Karte oder Sofortüberweisung (Stripe)",
+      description: totalAmount < 0.50 && totalAmount > 0 
+        ? "Bezahlen Sie per Karte oder Sofortüberweisung (Mindestbetrag: 0,50 €)"
+        : "Bezahlen Sie per Karte oder Sofortüberweisung",
+      disabled: totalAmount < 0.50 || (deliveryMethod !== "DHL" && deliveryMethod !== "DPD" && deliveryMethod !== "Abholung"),
+      icons: [
+        "/assets/images/giropay.png",
+        "/assets/images/maestro.png",
+        "/assets/images/mastercard.png",
+        "/assets/images/visa_electron.png",
+      ],
+    },*/
+    {
+      id: "mollie",
       name: "Karte oder Sofortüberweisung",
       description: totalAmount < 0.50 && totalAmount > 0 
         ? "Bezahlen Sie per Karte oder Sofortüberweisung (Mindestbetrag: 0,50 €)"

src/config.js

@@ -3,6 +3,7 @@ const config = {
   apiBaseUrl: "",
   googleClientId: "928121624463-jbgfdlgem22scs1k9c87ucg4ffvaik6o.apps.googleusercontent.com",
   stripePublishableKey: "pk_test_51R7lltRtpe3h1vwJzIrDb5bcEigTLBHrtqj9SiPX7FOEATSuD6oJmKc8xpNp49ShpGJZb2GShHIUqj4zlSIz4olj00ipOuOAnu",
+  mollieProfileKey: "pfl_AtcRTimCff",
   
   // SEO and Business Information
   siteName: "Growheads.de",

src/contexts/CarouselContext.js

@@ -1,225 +0,0 @@
-import React, { createContext, useContext, useRef, useEffect, useState } from 'react';
-
-const CarouselContext = createContext();
-
-export const useCarousel = () => {
-  const context = useContext(CarouselContext);
-  if (!context) {
-    throw new Error('useCarousel must be used within a CarouselProvider');
-  }
-  return context;
-};
-
-export const CarouselProvider = ({ children }) => {
-  const carouselRef = useRef(null);
-  const scrollPositionRef = useRef(0);
-  const animationIdRef = useRef(null);
-  const isPausedRef = useRef(false);
-  const resumeTimeoutRef = useRef(null);
-  
-  const [filteredCategories, setFilteredCategories] = useState([]);
-
-  // Initialize refs properly
-  useEffect(() => {
-    isPausedRef.current = false;
-    scrollPositionRef.current = 0;
-  }, []);
-
-  // Auto-scroll effect
-  useEffect(() => {
-    if (filteredCategories.length === 0) return;
-
-    const startAnimation = () => {
-      if (!carouselRef.current) {
-        return false;
-      }
-
-      isPausedRef.current = false;
-      
-      const itemWidth = 146; // 130px + 16px gap
-      const totalWidth = filteredCategories.length * itemWidth;
-
-      const animate = () => {
-        if (!animationIdRef.current || isPausedRef.current) {
-          return;
-        }
-
-        scrollPositionRef.current += 0.5;
-
-        if (scrollPositionRef.current >= totalWidth) {
-          scrollPositionRef.current = 0;
-        }
-
-        if (carouselRef.current) {
-          const transform = `translateX(-${scrollPositionRef.current}px)`;
-          carouselRef.current.style.transform = transform;
-        }
-
-        animationIdRef.current = requestAnimationFrame(animate);
-      };
-
-      if (!isPausedRef.current) {
-        animationIdRef.current = requestAnimationFrame(animate);
-        return true;
-      }
-      return false;
-    };
-
-    // Try immediately, then with increasing delays
-    if (!startAnimation()) {
-      const timeout1 = setTimeout(() => {
-        if (!startAnimation()) {
-          const timeout2 = setTimeout(() => {
-            if (!startAnimation()) {
-              const timeout3 = setTimeout(startAnimation, 2000);
-              return () => clearTimeout(timeout3);
-            }
-          }, 1000);
-          return () => clearTimeout(timeout2);
-        }
-      }, 100);
-      
-      return () => {
-        isPausedRef.current = true;
-        clearTimeout(timeout1);
-        if (animationIdRef.current) {
-          cancelAnimationFrame(animationIdRef.current);
-        }
-        if (resumeTimeoutRef.current) {
-          clearTimeout(resumeTimeoutRef.current);
-        }
-      };
-    }
-
-    return () => {
-      isPausedRef.current = true;
-      if (animationIdRef.current) {
-        cancelAnimationFrame(animationIdRef.current);
-      }
-      if (resumeTimeoutRef.current) {
-        clearTimeout(resumeTimeoutRef.current);
-      }
-    };
-  }, [filteredCategories]);
-
-  // Additional effect for when ref becomes available
-  useEffect(() => {
-    if (filteredCategories.length > 0 && carouselRef.current && !animationIdRef.current) {
-      isPausedRef.current = false;
-      
-      const itemWidth = 146;
-      const totalWidth = filteredCategories.length * itemWidth;
-
-      const animate = () => {
-        if (!animationIdRef.current || isPausedRef.current) {
-          return;
-        }
-
-        scrollPositionRef.current += 0.5;
-
-        if (scrollPositionRef.current >= totalWidth) {
-          scrollPositionRef.current = 0;
-        }
-
-        if (carouselRef.current) {
-          const transform = `translateX(-${scrollPositionRef.current}px)`;
-          carouselRef.current.style.transform = transform;
-        }
-
-        animationIdRef.current = requestAnimationFrame(animate);
-      };
-
-      if (!isPausedRef.current) {
-        animationIdRef.current = requestAnimationFrame(animate);
-      }
-    }
-  });
-
-  // Manual navigation
-  const moveCarousel = (direction) => {
-    if (!carouselRef.current) return;
-
-    // Pause auto-scroll
-    isPausedRef.current = true;
-    if (animationIdRef.current) {
-      cancelAnimationFrame(animationIdRef.current);
-      animationIdRef.current = null;
-    }
-
-    const itemWidth = 146;
-    const moveAmount = itemWidth * 3;
-    const totalWidth = filteredCategories.length * itemWidth;
-
-    if (direction === "left") {
-      scrollPositionRef.current -= moveAmount;
-      if (scrollPositionRef.current < 0) {
-        scrollPositionRef.current = totalWidth + scrollPositionRef.current;
-      }
-    } else {
-      scrollPositionRef.current += moveAmount;
-      if (scrollPositionRef.current >= totalWidth) {
-        scrollPositionRef.current = scrollPositionRef.current % totalWidth;
-      }
-    }
-
-    // Apply smooth transition
-    carouselRef.current.style.transition = "transform 0.5s ease-in-out";
-    carouselRef.current.style.transform = `translateX(-${scrollPositionRef.current}px)`;
-
-    // Remove transition after animation
-    setTimeout(() => {
-      if (carouselRef.current) {
-        carouselRef.current.style.transition = "none";
-      }
-    }, 500);
-
-    // Clear existing timeout
-    if (resumeTimeoutRef.current) {
-      clearTimeout(resumeTimeoutRef.current);
-    }
-
-    // Resume auto-scroll after 3 seconds
-    resumeTimeoutRef.current = setTimeout(() => {
-      isPausedRef.current = false;
-
-      const animate = () => {
-        if (!animationIdRef.current || isPausedRef.current) {
-          return;
-        }
-
-        scrollPositionRef.current += 0.5;
-
-        if (scrollPositionRef.current >= totalWidth) {
-          scrollPositionRef.current = 0;
-        }
-
-        if (carouselRef.current) {
-          carouselRef.current.style.transform = `translateX(-${scrollPositionRef.current}px)`;
-        }
-
-        animationIdRef.current = requestAnimationFrame(animate);
-      };
-
-      animationIdRef.current = requestAnimationFrame(animate);
-    }, 3000);
-  };
-
-  const value = {
-    carouselRef,
-    scrollPositionRef,
-    animationIdRef,
-    isPausedRef,
-    resumeTimeoutRef,
-    filteredCategories,
-    setFilteredCategories,
-    moveCarousel
-  };
-
-  return (
-    <CarouselContext.Provider value={value}>
-      {children}
-    </CarouselContext.Provider>
-  );
-};
-
-export default CarouselContext; 

src/pages/Home.js

@@ -0,0 +1,652 @@
+import React, { useState, useEffect, useContext, useRef } from "react";
+import Container from "@mui/material/Container";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Grid from "@mui/material/Grid";
+import IconButton from "@mui/material/IconButton";
+import ChevronLeft from "@mui/icons-material/ChevronLeft";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import { Link } from "react-router-dom";
+import CategoryBox from "../components/CategoryBox.js";
+import SocketContext from "../contexts/SocketContext.js";
+import { getCombinedAnimatedBorderStyles } from "../utils/animatedBorderStyles.js";
+
+// @note SwashingtonCP font is now loaded globally via index.css
+
+// Carousel styles - Simple styles for JavaScript-based animation
+const carouselStyles = `
+  .carousel-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    z-index: 1;
+  }
+  
+  
+  .carousel-wrapper .carousel-container {
+    position: relative;
+    overflow: hidden;
+    padding: 20px 0;
+    width: 100%;
+    max-width: 1080px;
+    margin: 0 auto;
+    z-index: 1;
+  }
+  
+  .carousel-wrapper .home-carousel-track {
+    display: flex;
+    gap: 16px;
+    transition: none;
+    align-items: flex-start;
+    width: 1200px;
+    max-width: 100%;
+    overflow: visible;
+    position: relative;
+    z-index: 1;
+  }
+  
+  .carousel-wrapper .carousel-item {
+    flex: 0 0 130px;
+    width: 130px !important;
+    max-width: 130px;
+    min-width: 130px;
+    height: 130px !important;
+    max-height: 130px;
+    min-height: 130px;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .carousel-nav-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 20;
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    width: 48px;
+    height: 48px;
+  }
+  
+  .carousel-nav-button:hover {
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  }
+  
+  .carousel-nav-left {
+    left: 8px;
+  }
+  
+  .carousel-nav-right {
+    right: 8px;
+  }
+`;
+
+// Generate combined styles for both seeds and cutlings cards
+const animatedBorderStyle = getCombinedAnimatedBorderStyles([
+  "seeds",
+  "cutlings",
+]);
+
+const Home = () => {
+  const carouselRef = useRef(null);
+  const scrollPositionRef = useRef(0);
+  const animationIdRef = useRef(null);
+  const isPausedRef = useRef(false);
+  const resumeTimeoutRef = useRef(null);
+  
+  // @note Initialize refs properly
+  useEffect(() => {
+    isPausedRef.current = false;
+    scrollPositionRef.current = 0;
+  }, []);
+  // Helper to process and set categories
+  const processCategoryTree = (categoryTree) => {
+    if (
+      categoryTree &&
+      categoryTree.id === 209 &&
+      Array.isArray(categoryTree.children)
+    ) {
+      return categoryTree.children;
+    } else {
+      return [];
+    }
+  };
+
+  // Check for cached data - handle both browser and prerender environments
+  const getProductCache = () => {
+    if (typeof window !== "undefined" && window.productCache) {
+      return window.productCache;
+    }
+    if (
+      typeof global !== "undefined" &&
+      global.window &&
+      global.window.productCache
+    ) {
+      return global.window.productCache;
+    }
+    return null;
+  };
+
+  // Initialize rootCategories from cache if available (for prerendering)
+  const initializeCategories = () => {
+    const productCache = getProductCache();
+
+    if (productCache && productCache["categoryTree_209"]) {
+      const cached = productCache["categoryTree_209"];
+      //const cacheAge = Date.now() - cached.timestamp;
+      //const tenMinutes = 10 * 60 * 1000;
+      if (/*cacheAge < tenMinutes &&*/ cached.categoryTree) {
+        return processCategoryTree(cached.categoryTree);
+      }
+    }
+    return [];
+  };
+
+  const [rootCategories, setRootCategories] = useState(() =>
+    initializeCategories()
+  );
+  const context = useContext(SocketContext);
+
+  useEffect(() => {
+    // Only fetch from socket if we don't already have categories and we're in browser
+    if (
+      rootCategories.length === 0 &&
+      context && context.socket && context.socket.connected &&
+      typeof window !== "undefined"
+    ) {
+      context.socket.emit("categoryList", { categoryId: 209 }, (response) => {
+        if (response && response.categoryTree) {
+          // Store in cache
+          try {
+            if (!window.productCache) window.productCache = {};
+            window.productCache["categoryTree_209"] = {
+              categoryTree: response.categoryTree,
+              timestamp: Date.now(),
+            };
+          } catch (err) {
+            console.error(err);
+          }
+          setRootCategories(response.categoryTree.children || []);
+        }
+      });
+    }
+  }, [context, context?.socket?.connected, rootCategories.length]);
+
+  // Filter categories (excluding specific IDs)
+  const filteredCategories = rootCategories.filter(
+    (cat) => cat.id !== 689 && cat.id !== 706
+  );
+
+  // Create duplicated array for seamless scrolling
+  const displayCategories = [...filteredCategories, ...filteredCategories];
+
+  // Auto-scroll effect
+  useEffect(() => {
+    if (filteredCategories.length === 0) return;
+
+    // @note Add a small delay to ensure DOM is ready after prerender
+    const startAnimation = () => {
+      if (!carouselRef.current) {
+        return false;
+      }
+
+      // @note Reset paused state when starting animation
+      isPausedRef.current = false;
+      
+      const itemWidth = 146; // 130px + 16px gap
+      const totalWidth = filteredCategories.length * itemWidth;
+
+      const animate = () => {
+        // Check if we should be animating
+        if (!animationIdRef.current || isPausedRef.current) {
+          return;
+        }
+
+        scrollPositionRef.current += 0.5; // Speed of scrolling
+
+        // Reset position for seamless loop
+        if (scrollPositionRef.current >= totalWidth) {
+          scrollPositionRef.current = 0;
+        }
+
+        if (carouselRef.current) {
+          const transform = `translateX(-${scrollPositionRef.current}px)`;
+          carouselRef.current.style.transform = transform;
+        }
+
+        animationIdRef.current = requestAnimationFrame(animate);
+      };
+
+      // Only start animation if not paused
+      if (!isPausedRef.current) {
+        animationIdRef.current = requestAnimationFrame(animate);
+        return true;
+      }
+      return false;
+    };
+
+    // Try immediately, then with increasing delays to handle prerender scenarios
+    if (!startAnimation()) {
+      const timeout1 = setTimeout(() => {
+        if (!startAnimation()) {
+          const timeout2 = setTimeout(() => {
+            if (!startAnimation()) {
+              const timeout3 = setTimeout(startAnimation, 2000);
+              return () => clearTimeout(timeout3);
+            }
+          }, 1000);
+          return () => clearTimeout(timeout2);
+        }
+      }, 100);
+      
+      return () => {
+        isPausedRef.current = true;
+        clearTimeout(timeout1);
+        if (animationIdRef.current) {
+          cancelAnimationFrame(animationIdRef.current);
+        }
+        if (resumeTimeoutRef.current) {
+          clearTimeout(resumeTimeoutRef.current);
+        }
+      };
+    }
+
+    return () => {
+      isPausedRef.current = true;
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+      if (resumeTimeoutRef.current) {
+        clearTimeout(resumeTimeoutRef.current);
+      }
+    };
+  }, [filteredCategories]);
+
+  // Additional effect to handle cases where categories are available but ref wasn't ready
+  useEffect(() => {
+    if (filteredCategories.length > 0 && carouselRef.current && !animationIdRef.current) {
+      // @note Reset paused state when starting animation
+      isPausedRef.current = false;
+      
+      const itemWidth = 146;
+      const totalWidth = filteredCategories.length * itemWidth;
+
+      const animate = () => {
+        if (!animationIdRef.current || isPausedRef.current) {
+          return;
+        }
+
+        scrollPositionRef.current += 0.5;
+
+        if (scrollPositionRef.current >= totalWidth) {
+          scrollPositionRef.current = 0;
+        }
+
+        if (carouselRef.current) {
+          const transform = `translateX(-${scrollPositionRef.current}px)`;
+          carouselRef.current.style.transform = transform;
+        }
+
+        animationIdRef.current = requestAnimationFrame(animate);
+      };
+
+      if (!isPausedRef.current) {
+        animationIdRef.current = requestAnimationFrame(animate);
+      }
+    }
+  });
+
+  // Manual navigation
+  const moveCarousel = (direction) => {
+    if (!carouselRef.current) return;
+
+    // Pause auto-scroll
+    isPausedRef.current = true;
+    if (animationIdRef.current) {
+      cancelAnimationFrame(animationIdRef.current);
+      animationIdRef.current = null;
+    }
+
+    const itemWidth = 146;
+    const moveAmount = itemWidth * 3; // Move 3 items at a time
+    const totalWidth = filteredCategories.length * itemWidth;
+
+    if (direction === "left") {
+      scrollPositionRef.current -= moveAmount;
+      // Handle wrapping for infinite scroll
+      if (scrollPositionRef.current < 0) {
+        scrollPositionRef.current = totalWidth + scrollPositionRef.current;
+      }
+    } else {
+      scrollPositionRef.current += moveAmount;
+      // Handle wrapping for infinite scroll
+      if (scrollPositionRef.current >= totalWidth) {
+        scrollPositionRef.current = scrollPositionRef.current % totalWidth;
+      }
+    }
+
+    // Apply smooth transition for manual navigation
+    carouselRef.current.style.transition = "transform 0.5s ease-in-out";
+    carouselRef.current.style.transform = `translateX(-${scrollPositionRef.current}px)`;
+
+    // Remove transition after animation completes
+    setTimeout(() => {
+      if (carouselRef.current) {
+        carouselRef.current.style.transition = "none";
+      }
+    }, 500);
+
+    // Clear any existing resume timeout
+    if (resumeTimeoutRef.current) {
+      clearTimeout(resumeTimeoutRef.current);
+    }
+
+    // Resume auto-scroll after 3 seconds
+    resumeTimeoutRef.current = setTimeout(() => {
+      isPausedRef.current = false;
+
+      const animate = () => {
+        if (!animationIdRef.current || isPausedRef.current) {
+          return;
+        }
+
+        scrollPositionRef.current += 0.5;
+
+        if (scrollPositionRef.current >= totalWidth) {
+          scrollPositionRef.current = 0;
+        }
+
+        if (carouselRef.current) {
+          carouselRef.current.style.transform = `translateX(-${scrollPositionRef.current}px)`;
+        }
+
+        animationIdRef.current = requestAnimationFrame(animate);
+      };
+
+      animationIdRef.current = requestAnimationFrame(animate);
+    }, 3000);
+  };
+ 
+
+  return (
+    <Container maxWidth="lg" sx={{ pt: 4, pb: 2, maxWidth: '1200px !important' }}>
+      {/* Inject the animated border and carousel styles */}
+      <style>{animatedBorderStyle}</style>
+      <style>{carouselStyles}</style>
+
+      <Typography
+          variant="h3"
+          component="h1"
+          sx={{
+            mb: 4,
+            fontFamily: "SwashingtonCP",
+            color: "primary.main",
+            textAlign: "center",
+            textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"       
+          }}
+        >
+          ine annabis eeds & uttings
+        </Typography>
+
+      <Grid container sx={{ display: "flex", flexDirection: "row" }}>
+        {/* Seeds Category Box */}
+        <Grid item xs={12} sm={6} sx={{ p: 2, width: "50%" }}>
+          <div className="animated-border-card seeds-card">
+            <Paper
+              component={Link}
+              to="/Kategorie/Seeds"
+              sx={{
+                p: 0,
+                textDecoration: "none",
+                color: "text.primary",
+                borderRadius: 2,
+                overflow: "hidden",
+                height: { xs: 150, sm: 200, md: 300 },
+                display: "flex",
+                flexDirection: "column",
+                transition: "all 0.3s ease",
+                boxShadow: 10,
+                "&:hover": {
+                  transform: "translateY(-5px)",
+                  boxShadow: 20,
+                },
+              }}
+            >
+              {/* Image Container - Place your seeds image here */}
+              <Box
+                sx={{
+                  height: "100%",
+                  bgcolor: "#e1f0d3",
+                  backgroundImage: 'url("/assets/images/seeds.jpg")',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  position: "relative",
+                }}
+              >
+                {/* Overlay text - optional */}
+                <Box
+                  sx={{
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    bgcolor: "rgba(27, 94, 32, 0.8)",
+                    p: 1,
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontSize: "1.6rem",
+                      color: "white",
+                      fontFamily: "SwashingtonCP",
+                    }}
+                  >
+                    Seeds
+                  </Typography>
+                </Box>
+              </Box>
+            </Paper>
+          </div>
+        </Grid>
+
+        {/* Cutlings Category Box */}
+        <Grid item xs={12} sm={6} sx={{ p: 2, width: "50%" }}>
+          <div className="animated-border-card cutlings-card">
+            <Paper
+              component={Link}
+              to="/Kategorie/Stecklinge"
+              sx={{
+                p: 0,
+                textDecoration: "none",
+                color: "text.primary",
+                borderRadius: 2,
+                overflow: "hidden",
+                height: { xs: 150, sm: 200, md: 300 },
+                display: "flex",
+                flexDirection: "column",
+                boxShadow: 10,
+                transition: "all 0.3s ease",
+                "&:hover": {
+                  transform: "translateY(-5px)",
+                  boxShadow: 20,
+                },
+              }}
+            >
+              {/* Image Container - Place your cutlings image here */}
+              <Box
+                sx={{
+                  height: "100%",
+                  bgcolor: "#e8f5d6",
+                  backgroundImage: 'url("/assets/images/cutlings.jpg")',
+                  backgroundSize: "contain",
+                  backgroundPosition: "center",
+                  backgroundRepeat: "no-repeat",
+                  position: "relative",
+                }}
+              >
+                {/* Overlay text - optional */}
+                <Box
+                  sx={{
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    bgcolor: "rgba(27, 94, 32, 0.8)",
+                    p: 1,
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      fontSize: "1.6rem",
+                      color: "white",
+                      fontFamily: "SwashingtonCP",
+                    }}
+                  >
+                    Stecklinge
+                  </Typography>
+                </Box>
+              </Box>
+            </Paper>
+          </div>
+        </Grid>
+      </Grid>
+
+      {/* Continuous Rotating Carousel for Categories */}
+      <Box sx={{ mt: 3 }}>
+        <Typography
+          variant="h4"
+          component="h1"
+          sx={{
+            mb: 2,
+            fontFamily: "SwashingtonCP",
+            color: "primary.main",
+            textAlign: "center",
+            textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"
+          }}
+        >
+          Kategorien
+        </Typography>
+
+        {filteredCategories.length > 0 && (
+          <div 
+            className="carousel-wrapper"
+            style={{
+              position: 'relative',
+              overflow: 'hidden',
+              width: '100%',
+              maxWidth: '1200px',
+              margin: '0 auto',
+              padding: '0 20px',
+              boxSizing: 'border-box'
+            }}
+          >
+            {/* Left Arrow */}
+            <IconButton
+              onClick={() => moveCarousel("left")}
+              aria-label="Vorherige Kategorien anzeigen"
+              style={{
+                position: 'absolute',
+                top: '50%',
+                left: '8px',
+                transform: 'translateY(-50%)',
+                zIndex: 1200,
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+                width: '48px',
+                height: '48px',
+                borderRadius: '50%'
+              }}
+            >
+              <ChevronLeft />
+            </IconButton>
+
+            {/* Right Arrow */}
+            <IconButton
+              onClick={() => moveCarousel("right")}
+              aria-label="Nächste Kategorien anzeigen"
+              style={{
+                position: 'absolute',
+                top: '50%',
+                right: '8px',
+                transform: 'translateY(-50%)',
+                zIndex: 1200,
+                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+                width: '48px',
+                height: '48px',
+                borderRadius: '50%'
+              }}
+            >
+              <ChevronRight />
+            </IconButton>
+
+            <div 
+              className="carousel-container"
+              style={{
+                position: 'relative',
+                overflow: 'hidden',
+                padding: '20px 0',
+                width: '100%',
+                maxWidth: '1080px',
+                margin: '0 auto',
+                zIndex: 1,
+                boxSizing: 'border-box'
+              }}
+            >
+              <div 
+                className="home-carousel-track" 
+                ref={carouselRef}
+                style={{
+                  display: 'flex',
+                  gap: '16px',
+                  transition: 'none',
+                  alignItems: 'flex-start',
+                  width: 'fit-content',
+                  overflow: 'visible',
+                  position: 'relative',
+                  transform: 'translateX(0px)',
+                  margin: '0 auto'
+                }}
+              >
+                {displayCategories.map((category, index) => (
+                  <div
+                    key={`${category.id}-${index}`}
+                    className="carousel-item"
+                    style={{
+                      flex: '0 0 130px',
+                      width: '130px',
+                      maxWidth: '130px',
+                      minWidth: '130px',
+                      height: '130px',
+                      maxHeight: '130px',
+                      minHeight: '130px',
+                      boxSizing: 'border-box',
+                      position: 'relative'
+                    }}
+                  >
+                    <CategoryBox
+                      id={category.id}
+                      name={category.name}
+                      seoName={category.seoName}
+                      image={category.image}
+                      bgcolor={category.bgcolor}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </Box>
+    </Container>
+  );
+};
+
+export default Home;

src/pages/PresseverleihPage.js

@@ -1,46 +0,0 @@
-import React from "react";
-import Container from "@mui/material/Container";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-
-const PresseverleihPage = () => {
-  return (
-    <Container maxWidth="lg" sx={{ pt: 4, pb: 2, maxWidth: '1200px !important' }}>
-      <Typography
-        variant="h3"
-        component="h1"
-        sx={{
-          mb: 4,
-          fontFamily: "SwashingtonCP",
-          color: "primary.main",
-          textAlign: "center",
-          textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"
-        }}
-      >
-        Ölpresse ausleihen
-      </Typography>
-      
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          minHeight: "50vh",
-          textAlign: "center"
-        }}
-      >
-        <Typography
-          variant="h5"
-          sx={{
-            color: "text.secondary",
-            fontStyle: "italic"
-          }}
-        >
-          Inhalt kommt bald...
-        </Typography>
-      </Box>
-    </Container>
-  );
-};
-
-export default PresseverleihPage; 

src/pages/ThcTestPage.js

@@ -1,46 +0,0 @@
-import React from "react";
-import Container from "@mui/material/Container";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-
-const ThcTestPage = () => {
-  return (
-    <Container maxWidth="lg" sx={{ pt: 4, pb: 2, maxWidth: '1200px !important' }}>
-      <Typography
-        variant="h3"
-        component="h1"
-        sx={{
-          mb: 4,
-          fontFamily: "SwashingtonCP",
-          color: "primary.main",
-          textAlign: "center",
-          textShadow: "3px 3px 10px rgba(0, 0, 0, 0.4)"
-        }}
-      >
-        THC Test
-      </Typography>
-      
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          minHeight: "50vh",
-          textAlign: "center"
-        }}
-      >
-        <Typography
-          variant="h5"
-          sx={{
-            color: "text.secondary",
-            fontStyle: "italic"
-          }}
-        >
-          Inhalt kommt bald...
-        </Typography>
-      </Box>
-    </Container>
-  );
-};
-
-export default ThcTestPage;