mehr übersetzungen, added pending purchase indicator. datenschutzfenster funktioniert.

resources/js/layouts/marketing/MarketingLayout.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Head, Link, usePage } from '@inertiajs/react';
+import React, { useEffect } from 'react';
+import { Head, Link, usePage, router } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 
 interface MarketingLayoutProps {
@@ -10,6 +10,14 @@ interface MarketingLayoutProps {
 const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
   const { t } = useTranslation('marketing');
   const { url } = usePage();
+  const i18n = useTranslation();
+
+  useEffect(() => {
+    const locale = url.startsWith('/en/') ? 'en' : 'de';
+    if (i18n.i18n.language !== locale) {
+      i18n.i18n.changeLanguage(locale);
+    }
+  }, [url, i18n]);
 
   const { translations } = usePage().props as any;
   const marketing = translations?.marketing || {};
@@ -39,6 +47,43 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
         <link rel="alternate" hrefLang="x-default" href="https://fotospiel.app/de" />
       </Head>
       <div className="min-h-screen bg-white">
+        <header className="bg-white shadow-sm">
+          <div className="container mx-auto px-4 py-4">
+            <nav className="flex justify-between items-center">
+              <Link href="/" className="text-xl font-bold text-gray-900">
+                Fotospiel
+              </Link>
+              <div className="hidden md:flex space-x-8">
+                <Link href="/" className="text-gray-700 hover:text-gray-900">
+                  {t('nav.home')}
+                </Link>
+                <Link href="/packages" className="text-gray-700 hover:text-gray-900">
+                  {t('nav.packages')}
+                </Link>
+                <Link href="/blog" className="text-gray-700 hover:text-gray-900">
+                  {t('nav.blog')}
+                </Link>
+                <Link href="/kontakt" className="text-gray-700 hover:text-gray-900">
+                  {t('nav.contact')}
+                </Link>
+              </div>
+              <div className="flex items-center space-x-4">
+                <select
+                  value={currentLocale}
+                  onChange={(e) => {
+                    const newLocale = e.target.value;
+                    const newPath = url.replace(/^\/(de|en)?/, `/${newLocale}`);
+                    router.visit(newPath);
+                  }}
+                  className="border border-gray-300 rounded-md px-2 py-1"
+                >
+                  <option value="de">DE</option>
+                  <option value="en">EN</option>
+                </select>
+              </div>
+            </nav>
+          </div>
+        </header>
         <main>
           {children}
         </main>
@@ -47,13 +92,13 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
             <p>&copy; 2025 Fotospiel. Alle Rechte vorbehalten.</p>
             <div className="mt-4 space-x-4">
               <Link href="/datenschutz" className="hover:underline">
-                {t('nav.privacy', getString('nav.privacy', 'Datenschutz'))}
+                {t('nav.privacy')}
               </Link>
               <Link href="/impressum" className="hover:underline">
-                {t('nav.impressum', getString('nav.impressum', 'Impressum'))}
+                {t('nav.impressum')}
               </Link>
               <Link href="/kontakt" className="hover:underline">
-                {t('nav.contact', getString('nav.contact', 'Kontakt'))}
+                {t('nav.contact')}
               </Link>
             </div>
           </div>