feat: implement kiosk mode functionality and update UI elements accordingly

src/components/MainPageLayout.js

@@ -291,8 +291,22 @@ const MainPageLayout = () => {
   const currentPath = location.pathname;
   const { t } = useTranslation();
   const [starHovered, setStarHovered] = React.useState(false);
+  
+  // State to track kiosk mode
+  const [isKiosk, setIsKiosk] = React.useState(() => window.growheadskiosk === true);
+  
+  // Listen for the custom event
+  React.useEffect(() => {
+    const handleKioskChange = () => {
+      setIsKiosk(window.growheadskiosk === true);
+    };
+    
+    window.addEventListener('growheadskiosk-change', handleKioskChange);
+    return () => window.removeEventListener('growheadskiosk-change', handleKioskChange);
+  }, []);
+  
   const translatedContent = {
-    buildYourSet: t('sections.buildYourSet'),
+    buildYourSet: isKiosk ? 'Schau in den Stecklingskatalog' : t('sections.buildYourSet'),
     selectSeedRate: t('sections.selectSeedRate'),
     outdoorSeason: t('sections.outdoorSeason')
   };
@@ -317,7 +331,7 @@ const MainPageLayout = () => {
   const allContentBoxes = {
     home: [
       { title: t('sections.seeds'), image: "/assets/images/seeds.avif", bgcolor: "#e1f0d3", link: "/Kategorie/Seeds" },
-      { title: t('sections.konfigurator'), image: "/assets/images/konfigurator.avif", bgcolor: "#e8f5d6", link: "/Konfigurator" }
+      { title: isKiosk ? 'Stecklingskatalog' : t('sections.konfigurator'), image: isKiosk ? "/assets/images/cutlings2.avif" : "/assets/images/konfigurator.avif", bgcolor: "#e8f5d6", link: isKiosk ? "https://cloneheads.de" : "/Konfigurator" }
     ],
     aktionen: [
       { title: t('sections.oilPress'), image: "/assets/images/presse.jpg", bgcolor: "#e1f0d3", link: "/Artikel/Graveda-10t-presse-tagesmiete-inkl-prepress-vorpressform" },

src/components/header/CategoryList.js

@@ -197,7 +197,7 @@ class CategoryList extends Component {
           aria-label="Zur Startseite"
           onClick={isMobile ? this.handleMobileCategoryClick : undefined}
           sx={{
-            fontSize: "0.75rem",
+            fontSize: "0.85rem",
             textTransform: "none",
             whiteSpace: "nowrap",
             opacity: 0.9,
@@ -275,7 +275,7 @@ class CategoryList extends Component {
           aria-label="Neuheiten"
           onClick={isMobile ? this.handleMobileCategoryClick : undefined}
           sx={{
-            fontSize: "0.75rem",
+            fontSize: "0.85rem",
             textTransform: "none",
             whiteSpace: "nowrap",
             opacity: 0.9,
@@ -353,7 +353,7 @@ class CategoryList extends Component {
           aria-label={this.props.t ? this.props.t('navigation.soon') : 'Demnächst'}
           onClick={isMobile ? this.handleMobileCategoryClick : undefined}
           sx={{
-            fontSize: "0.75rem",
+            fontSize: "0.85rem",
             textTransform: "none",
             whiteSpace: "nowrap",
             opacity: 0.9,
@@ -435,7 +435,7 @@ class CategoryList extends Component {
                   size="small"
                   onClick={isMobile ? this.handleMobileCategoryClick : undefined}
                   sx={{
-                    fontSize: "0.75rem",
+                    fontSize: "0.85rem",
                     textTransform: "none",
                     whiteSpace: "nowrap",
                     opacity: 0.9,
@@ -506,7 +506,7 @@ class CategoryList extends Component {
               alignItems: "center",
               height: "33px", // Match small button height
               px: 1,
-              fontSize: "0.75rem",
+              fontSize: "0.85rem",
               opacity: 0.9,
             }}
           >
@@ -522,7 +522,7 @@ class CategoryList extends Component {
           aria-label={this.props.t ? this.props.t('navigation.konfiguratorAria') : 'Zum Konfigurator'}
           onClick={isMobile ? this.handleMobileCategoryClick : undefined}
           sx={{
-            fontSize: "0.75rem",
+            fontSize: "0.85rem",
             textTransform: "none",
             whiteSpace: "nowrap",
             opacity: 0.9,

src/services/SocketManager.js

@@ -153,6 +153,12 @@ class SocketManager {
         auth: this._buildSocketAuth()
       });
 
+      this._socket.on('kiosk', () => {
+        window.growheadskiosk = true;
+        window.dispatchEvent(new Event('growheadskiosk-change'));
+        console.warn('Kiosk mode enabled via socket event');
+      });
+
       // Always refresh auth data before reconnect attempts.
       if (this._socket.io && this._socket.io.on) {
         this._socket.io.on('reconnect_attempt', () => {