das marketing frontend wurde auf lokalisierte urls umgestellt.

2025-11-03 15:50:10 +01:00
parent c0c1d31385
commit 55c606bdd4
47 changed files with 1592 additions and 251 deletions
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -9,21 +9,26 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n';
 import { Toaster } from 'react-hot-toast';
 import { ConsentProvider } from './contexts/consent';
+import React from 'react';

 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

 createInertiaApp({
    title: (title) => title ? `${title} - ${appName}` : appName,
-    resolve: (name) => resolvePageComponent(
-      `./pages/${name}.tsx`,
-      import.meta.glob('./pages/**/*.tsx')
-    ).then((page) => {
-      if (page) {
-        const PageComponent = (page as any).default;
-        return (props: any) => <AppLayout><PageComponent {...props} /></AppLayout>;
-      }
-      return null;
-    }),
+    resolve: (name) =>
+        resolvePageComponent(
+            `./pages/${name}.tsx`,
+            import.meta.glob('./pages/**/*.tsx')
+        ).then((page: any) => {
+            if (page?.default) {
+                const Component = page.default;
+                if (!Component.layout) {
+                    Component.layout = (page: React.ReactNode) => <AppLayout>{page}</AppLayout>;
+                }
+            }
+
+            return page;
+        }),
    setup({ el, App, props }) {
        const root = createRoot(el);

--- a/resources/js/hooks/useLocalizedRoutes.ts
+++ b/resources/js/hooks/useLocalizedRoutes.ts
@@ -1,31 +1,75 @@
-import { useLocale } from './useLocale';
+import { usePage } from '@inertiajs/react';
+import { useLocale } from './useLocale';

 type LocalizedPathInput = string | null | undefined;

 export const useLocalizedRoutes = () => {
+  const page = usePage<{ supportedLocales?: string[] }>();
  const locale = useLocale();
+  const supportedLocales = (page.props as any)?.supportedLocales ?? [];

-  const localizedPath = (path: LocalizedPathInput) => {
+  const fallbackLocale = (() => {
+    if (locale && supportedLocales.includes(locale)) {
+      return locale;
+    }
+
+    if (supportedLocales.length > 0) {
+      return supportedLocales[0];
+    }
+
+    return 'de';
+  })();
+
+  const pathRewrites: Record<string, Record<string, string>> = {
+    '/kontakt': { en: '/contact' },
+    '/contact': { de: '/kontakt' },
+    '/so-funktionierts': { en: '/how-it-works' },
+    '/how-it-works': { de: '/so-funktionierts' },
+    '/anlaesse': { en: '/occasions' },
+    '/anlaesse/hochzeit': { en: '/occasions/wedding' },
+    '/anlaesse/geburtstag': { en: '/occasions/birthday' },
+    '/anlaesse/firmenevent': { en: '/occasions/corporate-event' },
+    '/anlaesse/konfirmation': { en: '/occasions/confirmation' },
+    '/occasions/wedding': { de: '/anlaesse/hochzeit' },
+    '/occasions/birthday': { de: '/anlaesse/geburtstag' },
+    '/occasions/corporate-event': { de: '/anlaesse/firmenevent' },
+    '/occasions/confirmation': { de: '/anlaesse/konfirmation' },
+  };
+
+  const rewriteForLocale = (path: string, targetLocale: string): string => {
+    const key = path === '' ? '/' : path;
+    const normalizedKey = key.startsWith('/') ? key : `/${key}`;
+    const rewrites = pathRewrites[normalizedKey] ?? {};
+
+    return rewrites[targetLocale] ?? normalizedKey;
+  };
+
+  const localizedPath = (path: LocalizedPathInput, targetLocale?: string) => {
    if (typeof path !== 'string' || path.trim().length === 0) {
-      // Diagnose cases where components pass falsy / non-string hrefs (e.g. legacy localized routes, pagination links)
-      // This log allows us to correlate console errors from Inertia with offending components.
      console.error('[useLocalizedRoutes] Invalid path input detected', {
        path,
        locale,
        stack: new Error().stack,
      });

-      return '/';
+      return `/${fallbackLocale}`;
    }

+    const nextLocale = targetLocale && supportedLocales.includes(targetLocale)
+      ? targetLocale
+      : fallbackLocale;
+
    const trimmed = path.trim();
-    const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    const [rawPath, rawQuery] = trimmed.split('?');
+    const normalizedPath = rawPath.startsWith('/') ? rawPath : `/${rawPath}`;
+    const rewritten = rewriteForLocale(normalizedPath, nextLocale);

-//    console.debug('[useLocalizedRoutes] Resolved path', { input: path, normalized, locale });
+    const base = rewritten === '/' ? `/${nextLocale}` : `/${nextLocale}${rewritten}`;
+    const sanitisedBase = base.replace(/\/{2,}/g, '/');
+    const query = rawQuery ? `?${rawQuery}` : '';

-    // Since prefix-free, return plain path. Locale is handled via session.
-    return normalized;
+    return `${sanitisedBase}${query}`;
  };

  return { localizedPath };
-};
+};
--- a/resources/js/layouts/app/Footer.tsx
+++ b/resources/js/layouts/app/Footer.tsx
@@ -1,66 +1,96 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import { useConsent } from '@/contexts/consent';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';

 const Footer: React.FC = () => {
-    
-    const { t } = useTranslation(['marketing', 'legal', 'common']);
-    const { openPreferences } = useConsent();
-    
-    
+  const { t } = useTranslation(['marketing', 'legal', 'common']);
+  const { openPreferences } = useConsent();
+  const { localizedPath } = useLocalizedRoutes();
+
+  const links = useMemo(() => ({
+    home: localizedPath('/'),
+    impressum: localizedPath('/impressum'),
+    datenschutz: localizedPath('/datenschutz'),
+    agb: localizedPath('/agb'),
+    kontakt: localizedPath('/kontakt'),
+  }), [localizedPath]);
+
+  const currentYear = new Date().getFullYear();
+
  return (
-<footer className="bg-white border-t border-gray-200 mt-auto">
-                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-                    <div>
-                      <div className="flex items-center gap-4">
-                        <img src="/logo-transparent-md.png" alt="FotoSpiel.App Logo" className="h-12 w-auto" />
-                        <div>
-                          <Link href="/" className="text-2xl font-bold font-display text-pink-500">
-                            Die FotoSpiel.App
-                          </Link>
-                          <p className="text-gray-600 font-sans-marketing mt-2">
-                            Deine Plattform für Event-Fotos.
-                          </p>
-                        </div>
-                      </div>
-                    </div>
+    <footer className="mt-auto border-t border-gray-200 bg-white">
+      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+          <div>
+            <div className="flex items-center gap-4">
+              <img src="/logo-transparent-md.png" alt="FotoSpiel.App Logo" className="h-12 w-auto" />
+              <div>
+                <Link href={links.home} className="font-display text-2xl font-bold text-pink-500">
+                  Die FotoSpiel.App
+                </Link>
+                <p className="mt-2 font-sans-marketing text-gray-600">
+                  {t('marketing:footer.company', 'Fotospiel GmbH')}
+                </p>
+              </div>
+            </div>
+          </div>

-                    <div>
-                      <h3 className="font-semibold font-display text-gray-900 mb-4">Rechtliches</h3>
-                      <ul className="space-y-2 text-sm text-gray-600 font-sans-marketing">
-                        <li><Link href="/impressum" className="hover:text-pink-500 transition-colors">{t('legal:impressum')}</Link></li>
-                        <li><Link href="/datenschutz" className="hover:text-pink-500 transition-colors">{t('legal:datenschutz')}</Link></li>
-                        <li><Link href="/agb" className="hover:text-pink-500 transition-colors">{t('legal:agb')}</Link></li>
-                        <li><Link href="/kontakt" className="hover:text-pink-500 transition-colors">{t('marketing:nav.contact')}</Link></li>
-                        <li>
-                          <button
-                            type="button"
-                            onClick={openPreferences}
-                            className="hover:text-pink-500 transition-colors"
-                          >
-                            {t('common:consent.footer.manage_link')}
-                          </button>
-                        </li>
-                      </ul>
-                    </div>
+          <div>
+            <h3 className="font-display mb-4 font-semibold text-gray-900">
+              {t('legal:headline', 'Rechtliches')}
+            </h3>
+            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600">
+              <li>
+                <Link href={links.impressum} className="transition-colors hover:text-pink-500">
+                  {t('legal:impressum')}
+                </Link>
+              </li>
+              <li>
+                <Link href={links.datenschutz} className="transition-colors hover:text-pink-500">
+                  {t('legal:datenschutz')}
+                </Link>
+              </li>
+              <li>
+                <Link href={links.agb} className="transition-colors hover:text-pink-500">
+                  {t('legal:agb')}
+                </Link>
+              </li>
+              <li>
+                <Link href={links.kontakt} className="transition-colors hover:text-pink-500">
+                  {t('marketing:nav.contact')}
+                </Link>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  onClick={openPreferences}
+                  className="transition-colors hover:text-pink-500"
+                >
+                  {t('common:consent.footer.manage_link')}
+                </button>
+              </li>
+            </ul>
+          </div>

-                    <div>
-                      <h3 className="font-semibold font-display text-gray-900 mb-4">Social</h3>
-                      <ul className="space-y-2 text-sm text-gray-600 font-sans-marketing">
-                        <li><a href="#" className="hover:text-pink-500">Instagram</a></li>
-                        <li><a href="#" className="hover:text-pink-500">Facebook</a></li>
-                        <li><a href="#" className="hover:text-pink-500">YouTube</a></li>
-                      </ul>
-                    </div>
-                  </div>
-                  
-                  <div className="border-t border-gray-200 mt-8 pt-8 text-center text-sm text-gray-500 font-sans-marketing">
-                    &copy; 2025 Die FotoSpiel.App - Alle Rechte vorbehalten.
-                  </div>
-                </div>
-              </footer>
+          <div>
+            <h3 className="font-display mb-4 font-semibold text-gray-900">
+              {t('marketing:footer.social', 'Social')}
+            </h3>
+            <ul className="font-sans-marketing space-y-2 text-sm text-gray-600">
+              <li><a href="#" className="hover:text-pink-500">Instagram</a></li>
+              <li><a href="#" className="hover:text-pink-500">Facebook</a></li>
+              <li><a href="#" className="hover:text-pink-500">YouTube</a></li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="font-sans-marketing mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-500">
+          &copy; {currentYear} Die FotoSpiel.App – {t('marketing:footer.rights_reserved', 'Alle Rechte vorbehalten')}.
+        </div>
+      </div>
+    </footer>
  );
 };

--- a/resources/js/layouts/mainWebsite.tsx
+++ b/resources/js/layouts/mainWebsite.tsx
@@ -1,8 +1,14 @@
-import React, { useEffect } from 'react';
-import { Head, usePage, router } from '@inertiajs/react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Head, Link, router, usePage } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
 import MatomoTracker, { MatomoConfig } from '@/components/analytics/MatomoTracker';
 import CookieBanner from '@/components/consent/CookieBanner';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
+import Footer from '@/layouts/app/Footer';
+import { useAppearance } from '@/hooks/use-appearance';
+import { Button } from '@/components/ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { MoreHorizontal, Sun, Moon, Languages, LayoutDashboard, LogOut, LogIn, UserPlus } from 'lucide-react';

 interface MarketingLayoutProps {
  children: React.ReactNode;
@@ -14,11 +20,76 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
    translations?: Record<string, Record<string, string>>;
    locale?: string;
    analytics?: { matomo?: MatomoConfig };
+    supportedLocales?: string[];
+    appUrl?: string;
  }>();
  const { url } = page;
  const { t } = useTranslation('marketing');
  const i18n = useTranslation();
-  const { locale, analytics } = page.props;
+  const { locale, analytics, supportedLocales = ['de', 'en'], appUrl, auth } = page.props as any;
+  const user = auth?.user ?? null;
+  const { localizedPath } = useLocalizedRoutes();
+  const { appearance, updateAppearance } = useAppearance();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const occasionLinks = useMemo(() => ([
+    {
+      key: 'wedding',
+      label: t('nav.occasions_types.weddings', 'Hochzeiten'),
+      href: localizedPath('/anlaesse/hochzeit'),
+    },
+    {
+      key: 'birthday',
+      label: t('nav.occasions_types.birthdays', 'Geburtstage'),
+      href: localizedPath('/anlaesse/geburtstag'),
+    },
+    {
+      key: 'corporate',
+      label: t('nav.occasions_types.corporate', 'Firmenevents'),
+      href: localizedPath('/anlaesse/firmenevent'),
+    },
+    {
+      key: 'confirmation',
+      label: t('nav.occasions_types.confirmation', 'Konfirmation'),
+      href: localizedPath('/anlaesse/konfirmation'),
+    },
+  ]), [localizedPath, t]);
+
+  const navLinks = useMemo(() => ([
+    {
+      key: 'how',
+      label: t('nav.how_it_works', "So funktioniert's"),
+      href: localizedPath('/so-funktionierts'),
+    },
+    {
+      key: 'packages',
+      label: t('nav.packages', 'Pakete'),
+      href: localizedPath('/packages'),
+    },
+    {
+      key: 'occasions',
+      label: t('nav.occasions', 'Anlässe'),
+      children: occasionLinks,
+    },
+    {
+      key: 'blog',
+      label: t('nav.blog', 'Blog'),
+      href: localizedPath('/blog'),
+    },
+    {
+      key: 'contact',
+      label: t('nav.contact', 'Kontakt'),
+      href: localizedPath('/kontakt'),
+    },
+  ]), [localizedPath, occasionLinks, t]);
+
+  const ctaHref = localizedPath('/demo');
+  const themeIsDark = appearance === 'dark';
+  const themeLabel = themeIsDark ? t('nav.theme_light', 'Helles Design') : t('nav.theme_dark', 'Dunkles Design');
+  const toggleTheme = () => updateAppearance(themeIsDark ? 'light' : 'dark');
+  const handleLogout = () => {
+    router.post('/logout');
+  };

  useEffect(() => {
    if (locale && i18n.i18n.language !== locale) {
@@ -33,18 +104,37 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
    return typeof value === 'string' ? value : fallback;
  };

-  const activeLocale = locale || 'de';
-  const alternateLocale = activeLocale === 'de' ? 'en' : 'de';
-  const path = url.replace(/^\/(de|en)/, '');
-  const canonicalUrl = `https://fotospiel.app${path || '/'}`;
+  const activeLocale = locale || supportedLocales[0] || 'de';
+  const baseUrl = (typeof appUrl === 'string' && appUrl.length > 0)
+    ? appUrl.replace(/\/+$/, '')
+    : 'https://fotospiel.app';
+
+  const [rawPath, rawQuery = ''] = url.split('?');
+  const localePattern = supportedLocales.length > 0 ? supportedLocales.join('|') : 'de|en';
+  const localeRegex = new RegExp(`^/(${localePattern})(?=/|$)`, 'i');
+  const relativePath = rawPath.replace(localeRegex, '') || '/';
+  const canonicalPath = localizedPath(relativePath, activeLocale);
+  const canonicalUrl = `${baseUrl}${canonicalPath}${rawQuery ? `?${rawQuery}` : ''}`;
+
+  const buildAlternateUrl = (targetLocale: string) => {
+    const alternatePath = localizedPath(relativePath, targetLocale);
+    return `${baseUrl}${alternatePath}${rawQuery ? `?${rawQuery}` : ''}`;
+  };
+
+  const alternates = supportedLocales.reduce<Record<string, string>>((acc, currentLocale) => {
+    acc[currentLocale] = buildAlternateUrl(currentLocale);
+    return acc;
+  }, {});

  const handleLocaleChange = (nextLocale: string) => {
-    router.post('/set-locale', { locale: nextLocale }, {
-      preserveState: true,
+    const targetPath = localizedPath(relativePath, nextLocale);
+    const targetUrl = `${targetPath}${rawQuery ? `?${rawQuery}` : ''}`;
+
+    i18n.i18n.changeLanguage(nextLocale);
+    setMobileMenuOpen(false);
+    router.visit(targetUrl, {
      replace: true,
-      onSuccess: () => {
-        i18n.i18n.changeLanguage(nextLocale);
-      },
+      preserveState: false,
    });
  };

@@ -62,22 +152,261 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
          content={t('meta.description', getString('description', 'Sammle Gastfotos für Events mit QR-Codes'))}
        />
        <meta property="og:url" content={canonicalUrl} />
+        <meta property="og:locale" content={activeLocale === 'de' ? 'de_DE' : `${activeLocale}_${activeLocale.toUpperCase()}`} />
+        {supportedLocales
+          .filter((code) => code !== activeLocale)
+          .map((code) => (
+            <meta key={`og:locale:${code}`} property="og:locale:alternate" content={code === 'de' ? 'de_DE' : `${code}_${code.toUpperCase()}`} />
+          ))}
        <link rel="canonical" href={canonicalUrl} />
-        <link rel="alternate" hrefLang="x-default" href="https://fotospiel.app/" />
+        <link rel="alternate" hrefLang="x-default" href={buildAlternateUrl(supportedLocales[0] || 'de')} />
+        {Object.entries(alternates).map(([code, href]) => (
+          <link key={code} rel="alternate" hrefLang={code} href={href} />
+        ))}
      </Head>
      <MatomoTracker config={analytics?.matomo} />
      <CookieBanner />
      <div className="min-h-screen bg-white">
-        <header className="bg-white shadow-sm">
-          <div className="container mx-auto px-4 py-4">
-           
+        <header className="sticky top-0 z-40 border-b border-gray-200/60 bg-white/95 backdrop-blur">
+          <div className="container mx-auto flex items-center justify-between px-4 py-4">
+            <Link
+              href={localizedPath('/')}
+              className="flex items-center gap-3 text-gray-900"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <img src="/logo-transparent-md.png" alt="FotoSpiel.App Logo" className="h-10 w-auto" />
+              <span className="font-display text-2xl font-semibold tracking-tight text-pink-500 sm:text-3xl">
+                Die FotoSpiel.App
+              </span>
+            </Link>
+            <nav className="hidden items-center gap-6 md:flex">
+              {navLinks.map((item) => (
+                item.children ? (
+                  <div key={item.key} className="relative group">
+                    <span className="inline-flex cursor-default items-center gap-1 text-sm font-semibold text-gray-700 transition-colors group-hover:text-pink-600 font-sans-marketing">
+                      {item.label}
+                      <svg
+                        className="h-4 w-4 text-gray-400 transition group-hover:text-pink-500"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                      >
+                        <path d="M6 8L10 12L14 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                      </svg>
+                    </span>
+                    <div className="absolute left-0 top-full hidden min-w-[220px] flex-col gap-1 rounded-xl border border-gray-100 bg-white p-3 text-sm shadow-xl shadow-rose-200/50 transition group-hover:flex group-focus-within:flex">
+                      {item.children.map((child) => (
+                        <Link
+                          key={child.key}
+                          href={child.href}
+                          className="rounded-lg px-3 py-2 font-medium text-gray-600 transition hover:bg-rose-50 hover:text-pink-600 font-sans-marketing"
+                          onClick={() => setMobileMenuOpen(false)}
+                        >
+                          {child.label}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ) : (
+                    <Link
+                      key={item.key}
+                      href={item.href}
+                      className="text-sm font-semibold text-gray-700 transition hover:text-pink-600 font-sans-marketing"
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                    {item.label}
+                  </Link>
+                )
+              ))}
+            </nav>
+            <div className="flex items-center gap-2">
+              <Button
+                asChild
+                className="hidden rounded-full bg-pink-500 px-5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-pink-600 font-sans-marketing md:inline-flex"
+              >
+                <Link href={ctaHref}>
+                  {t('nav.cta_demo', 'Jetzt ausprobieren')}
+                </Link>
+              </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="rounded-full border-gray-200 text-gray-600 transition hover:border-pink-200 hover:text-pink-500"
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                    <span className="sr-only">{t('nav.preferences', 'Einstellungen')}</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56 space-y-1 p-2">
+                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400">
+                    {t('nav.preferences', 'Einstellungen')}
+                  </DropdownMenuLabel>
+                  <DropdownMenuItem
+                    onSelect={(event) => {
+                      event.preventDefault();
+                      toggleTheme();
+                    }}
+                    className="flex items-center gap-2 font-sans-marketing"
+                  >
+                    {themeIsDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+                    <span>{themeLabel}</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400">
+                    {t('nav.language', 'Sprache')}
+                  </DropdownMenuLabel>
+                  <DropdownMenuRadioGroup value={activeLocale} onValueChange={handleLocaleChange}>
+                    {supportedLocales.map((code) => (
+                      <DropdownMenuRadioItem
+                        key={code}
+                        value={code}
+                        className="flex items-center gap-2 font-sans-marketing"
+                      >
+                        <Languages className="h-4 w-4" />
+                        <span>{code.toUpperCase()}</span>
+                      </DropdownMenuRadioItem>
+                    ))}
+                  </DropdownMenuRadioGroup>
+                  <DropdownMenuSeparator />
+                  {user ? (
+                    <>
+                      <DropdownMenuLabel className="font-sans-marketing text-xs uppercase tracking-wide text-gray-400">
+                        {user.name ?? user.email}
+                      </DropdownMenuLabel>
+                      <DropdownMenuItem
+                        onSelect={(event) => {
+                          event.preventDefault();
+                          router.visit('/event-admin');
+                        }}
+                        className="flex items-center gap-2 font-sans-marketing"
+                      >
+                        <LayoutDashboard className="h-4 w-4" />
+                        <span>{t('nav.dashboard', 'Zum Admin-Bereich')}</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onSelect={(event) => {
+                          event.preventDefault();
+                          handleLogout();
+                        }}
+                        className="flex items-center gap-2 font-sans-marketing"
+                      >
+                        <LogOut className="h-4 w-4" />
+                        <span>{t('nav.logout', 'Abmelden')}</span>
+                      </DropdownMenuItem>
+                    </>
+                  ) : (
+                    <>
+                      <DropdownMenuItem
+                        onSelect={(event) => {
+                          event.preventDefault();
+                          router.visit(localizedPath('/login'));
+                        }}
+                        className="flex items-center gap-2 font-sans-marketing"
+                      >
+                        <LogIn className="h-4 w-4" />
+                        <span>{t('nav.login', 'Anmelden')}</span>
+                      </DropdownMenuItem>
+                      <DropdownMenuItem
+                        onSelect={(event) => {
+                          event.preventDefault();
+                          router.visit(localizedPath('/register'));
+                        }}
+                        className="flex items-center gap-2 font-sans-marketing"
+                      >
+                        <UserPlus className="h-4 w-4" />
+                        <span>{t('nav.register', 'Registrieren')}</span>
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <button
+                type="button"
+                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm md:hidden"
+                onClick={() => setMobileMenuOpen((open) => !open)}
+                aria-label={mobileMenuOpen ? t('nav.close_menu', 'Menü schließen') : t('nav.open_menu', 'Menü öffnen')}
+              >
+                {mobileMenuOpen ? (
+                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                    <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                ) : (
+                  <svg className="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+                    <path d="M3 6H17M3 10H17M3 14H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                  </svg>
+                )}
+              </button>
+            </div>
          </div>
+          {mobileMenuOpen && (
+            <div className="border-t border-gray-200 bg-white md:hidden">
+              <div className="container mx-auto space-y-4 px-4 py-4">
+                {navLinks.map((item) => (
+                  item.children ? (
+                    <div key={item.key} className="space-y-2">
+                      <p className="text-sm font-semibold text-gray-500">{item.label}</p>
+                      <div className="flex flex-col gap-2">
+                        {item.children.map((child) => (
+                          <Link
+                            key={child.key}
+                            href={child.href}
+                            className="rounded-lg border border-gray-100 px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600"
+                            onClick={() => setMobileMenuOpen(false)}
+                          >
+                            {child.label}
+                          </Link>
+                        ))}
+                      </div>
+                    </div>
+                  ) : (
+                    <Link
+                      key={item.key}
+                      href={item.href}
+                      className="block rounded-lg border border-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 transition hover:border-pink-200 hover:bg-rose-50 hover:text-pink-600 font-sans-marketing"
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      {item.label}
+                    </Link>
+                  )
+                ))}
+                <div className="pt-2">
+                  <Button
+                    asChild
+                    className="w-full rounded-full bg-pink-500 px-5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-pink-600 font-sans-marketing"
+                  >
+                    <Link href={ctaHref} onClick={() => setMobileMenuOpen(false)}>
+                      {t('nav.cta_demo', 'Jetzt ausprobieren')}
+                    </Link>
+                  </Button>
+                </div>
+                <div className="pt-2">
+                  <label htmlFor="marketing-language-select-mobile" className="sr-only">
+                    {t('nav.language', 'Sprache')}
+                  </label>
+                  <select
+                    id="marketing-language-select-mobile"
+                    value={activeLocale}
+                    onChange={(event) => handleLocaleChange(event.target.value)}
+                    className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm focus:border-pink-400 focus:outline-none focus:ring focus:ring-pink-200"
+                  >
+                    {supportedLocales.map((code) => (
+                      <option key={code} value={code}>
+                        {code.toUpperCase()}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            </div>
+          )}
        </header>
        <main>
          {children}
        </main>
-        {/* Footer kommt von Footer.tsx */}
-            
+        <Footer />
      </div>
    </>
  );
--- a/resources/js/pages/legal/Show.tsx
+++ b/resources/js/pages/legal/Show.tsx
@@ -11,7 +11,7 @@ type LegalShowProps = {
  slug: string;
 };

-export default function LegalShow(props: LegalShowProps) {
+const LegalShow: React.FC<LegalShowProps> = (props) => {
  const { seoTitle, title, content, effectiveFromLabel, versionLabel } = props;

  return (
@@ -41,4 +41,8 @@ export default function LegalShow(props: LegalShowProps) {
      </section>
    </MarketingLayout>
  );
-}
+};
+
+LegalShow.layout = (page: React.ReactNode) => page;
+
+export default LegalShow;
--- a/resources/js/pages/marketing/Blog.tsx
+++ b/resources/js/pages/marketing/Blog.tsx
@@ -184,4 +184,6 @@ const Blog: React.FC<Props> = ({ posts }) => {
  );
 };

-export default Blog;
+Blog.layout = (page: React.ReactNode) => page;
+
+export default Blog;
--- a/resources/js/pages/marketing/BlogShow.tsx
+++ b/resources/js/pages/marketing/BlogShow.tsx
@@ -111,4 +111,6 @@ const BlogShow: React.FC<Props> = ({ post }) => {
  );
 };

-export default BlogShow;
+BlogShow.layout = (page: React.ReactNode) => page;
+
+export default BlogShow;
--- a/resources/js/pages/marketing/CheckoutWizardPage.tsx
+++ b/resources/js/pages/marketing/CheckoutWizardPage.tsx
@@ -21,13 +21,13 @@ interface CheckoutWizardPageProps {
  };
 }

-export default function CheckoutWizardPage({
+const CheckoutWizardPage: React.FC<CheckoutWizardPageProps> = ({
  package: initialPackage,
  packageOptions,
  privacyHtml,
  googleAuth,
  paddle,
-}: CheckoutWizardPageProps) {
+}) => {
  const page = usePage<{ auth?: { user?: { id: number; email: string; name?: string; pending_purchase?: boolean } | null } }>();
  const currentUser = page.props.auth?.user ?? null;
  const googleProfile = googleAuth?.profile ?? null;
@@ -75,4 +75,8 @@ export default function CheckoutWizardPage({
      </div>
    </MarketingLayout>
  );
-}
+};
+
+CheckoutWizardPage.layout = (page: React.ReactNode) => page;
+
+export default CheckoutWizardPage;
--- a/resources/js/pages/marketing/Demo.tsx
+++ b/resources/js/pages/marketing/Demo.tsx
@@ -122,4 +122,6 @@ const DemoPage: React.FC = () => {
  );
 };

+DemoPage.layout = (page: React.ReactNode) => page;
+
 export default DemoPage;
--- a/resources/js/pages/marketing/Home.tsx
+++ b/resources/js/pages/marketing/Home.tsx
@@ -576,4 +576,6 @@ const Home: React.FC<Props> = ({ packages }) => {
  );
 };

+Home.layout = (page: React.ReactNode) => page;
+
 export default Home;
--- a/resources/js/pages/marketing/HowItWorks.tsx
+++ b/resources/js/pages/marketing/HowItWorks.tsx
@@ -420,4 +420,6 @@ const ExperiencePanel: React.FC<{ data: ExperienceGroup }> = ({ data }) => {
  );
 };

+HowItWorks.layout = (page: React.ReactNode) => page;
+
 export default HowItWorks;
--- a/resources/js/pages/marketing/Kontakt.tsx
+++ b/resources/js/pages/marketing/Kontakt.tsx
@@ -95,4 +95,6 @@ const Kontakt: React.FC = () => {
  );
 };

-export default Kontakt;
+Kontakt.layout = (page: React.ReactNode) => page;
+
+export default Kontakt;
--- a/resources/js/pages/marketing/NotFound.tsx
+++ b/resources/js/pages/marketing/NotFound.tsx
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Head, Link } from '@inertiajs/react';
+import { useTranslation } from 'react-i18next';
+import MarketingLayout from '@/layouts/mainWebsite';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
+
+interface NotFoundProps {
+  requestedPath?: string;
+}
+
+const NotFound: React.FC<NotFoundProps> = ({ requestedPath }) => {
+  const { t } = useTranslation('marketing');
+  const { localizedPath } = useLocalizedRoutes();
+  const tips = t('not_found.tips', { returnObjects: true }) as string[];
+
+  return (
+    <MarketingLayout title={t('not_found.title')}>
+      <Head title={t('not_found.title')} />
+      <section className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-900 via-gray-900 to-black text-white">
+        <div className="absolute inset-0 pointer-events-none">
+          <div className="absolute -left-32 -top-32 h-96 w-96 rounded-full bg-pink-500/30 blur-3xl" />
+          <div className="absolute right-0 top-1/3 h-80 w-80 rounded-full bg-purple-500/20 blur-3xl" />
+          <div className="absolute bottom-0 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-blue-500/20 blur-3xl" />
+        </div>
+
+        <div className="relative z-10 mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-center px-6 py-16 text-center">
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-semibold uppercase tracking-widest text-pink-200 shadow-lg shadow-pink-500/30 backdrop-blur">
+            404 · {t('not_found.title')}
+          </div>
+
+          <h1 className="text-balance text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl">
+            {t('not_found.subtitle')}
+          </h1>
+
+          {requestedPath && (
+            <p className="mt-4 text-sm text-white/60">
+              {t('not_found.requested_path_label', 'Angefragter Pfad')}: <span className="font-mono">{requestedPath}</span>
+            </p>
+          )}
+
+          <p className="mt-6 max-w-2xl text-lg text-white/70 sm:text-xl">
+            {t('not_found.description')}
+          </p>
+
+          <div className="mt-10 flex flex-col gap-6 rounded-3xl border border-white/10 bg-white/5 p-8 text-left shadow-lg shadow-black/40 backdrop-blur md:flex-row md:gap-8">
+            <div className="md:w-1/3">
+              <h2 className="text-lg font-semibold uppercase tracking-widest text-pink-200">
+                {t('not_found.tip_heading')}
+              </h2>
+              <div className="mt-4 h-1 w-16 rounded-full bg-pink-400" />
+            </div>
+            <ul className="space-y-3 text-base text-white/80 md:w-2/3">
+              {tips.map((tip, index) => (
+                <li key={`${tip}-${index}`} className="flex items-start gap-3">
+                  <span className="mt-1 flex h-6 w-6 flex-none items-center justify-center rounded-full bg-white/10 text-xs font-semibold text-pink-200">
+                    {index + 1}
+                  </span>
+                  <span>{tip}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="mt-12 flex flex-col gap-3 sm:flex-row">
+            <Link
+              href={localizedPath('/')}
+              className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 font-medium text-gray-900 shadow-lg shadow-pink-500/30 transition hover:-translate-y-1 hover:bg-pink-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+            >
+              {t('not_found.cta_home')}
+            </Link>
+            <Link
+              href={localizedPath('/packages')}
+              className="inline-flex items-center justify-center rounded-full border border-white/40 px-6 py-3 font-medium text-white transition hover:-translate-y-1 hover:border-white hover:bg-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+            >
+              {t('not_found.cta_packages')}
+            </Link>
+            <Link
+              href={localizedPath('/kontakt')}
+              className="inline-flex items-center justify-center rounded-full border border-transparent bg-gradient-to-r from-pink-500 to-purple-500 px-6 py-3 font-medium text-white shadow-lg shadow-pink-500/30 transition hover:-translate-y-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+            >
+              {t('not_found.cta_contact')}
+            </Link>
+          </div>
+        </div>
+      </section>
+    </MarketingLayout>
+  );
+};
+
+NotFound.layout = (page: React.ReactNode) => page;
+
+export default NotFound;
--- a/resources/js/pages/marketing/Occasions.tsx
+++ b/resources/js/pages/marketing/Occasions.tsx
@@ -59,7 +59,7 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
    },
  };

-  const content = occasionsContent[type as keyof typeof occasionsContent] || occasionsContent.hochzeit;
+const content = occasionsContent[type as keyof typeof occasionsContent] || occasionsContent.hochzeit;

  return (
    <MarketingLayout title={content.title}>
@@ -89,4 +89,6 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
  );
 };

+Occasions.layout = (page: React.ReactNode) => page;
+
 export default Occasions;
--- a/resources/js/pages/marketing/Packages.tsx
+++ b/resources/js/pages/marketing/Packages.tsx
@@ -1026,4 +1026,6 @@ function PackageCard({
  );
 };

+Packages.layout = (page: React.ReactNode) => page;
+
 export default Packages;
--- a/resources/js/pages/marketing/Success.tsx
+++ b/resources/js/pages/marketing/Success.tsx
@@ -80,4 +80,6 @@ const Success: React.FC = () => {
  );
 };

+Success.layout = (page: React.ReactNode) => page;
+
 export default Success;