nicht nutzbarer stand, header menü ist nicht intertia initialisiert. aber schick. codex änderungen noch enthalten.

2025-10-06 13:46:29 +02:00
parent d70faf7a9d
commit 5ee510b05d
29 changed files with 493 additions and 784 deletions
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -26,6 +26,11 @@ createInertiaApp({
    setup({ el, App, props }) {
        const root = createRoot(el);

+        // Sync i18n with initial locale from props
+        if (props.initialPage && props.initialPage.props && props.initialPage.props.locale) {
+            i18n.changeLanguage(props.initialPage.props.locale);
+        }
+
        root.render(
            <I18nextProvider i18n={i18n}>
                <App {...props} />
--- a/resources/js/components/Layout/Header.tsx
+++ b/resources/js/components/Layout/Header.tsx
@@ -1,16 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { usePage } from '@inertiajs/react';
 import { Link, router } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
+import i18n from '@/i18n';
 import { useAppearance } from '@/hooks/use-appearance';
 import { Button } from '@/components/ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
 import { Sun, Moon } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { marketing as marketingRoute, packages as packagesRoute, blog as blogRoute, kontakt as kontaktRoute, login as loginRoute, register as registerRoute, anlaesseType } from '@/routes';

 const Header: React.FC = () => {
+  useEffect(() => {
+    console.log('Header mounted - Inertia initialized?', typeof window.Inertia !== 'undefined' ? 'Yes' : 'No');
+    console.log('Inertia links on page:', document.querySelectorAll('a[data-inertia]').length);
+  }, []);
  const { auth, locale } = usePage().props as any;
  const { t } = useTranslation('auth');
  const { appearance, updateAppearance } = useAppearance();
@@ -21,74 +28,114 @@ const Header: React.FC = () => {
  };

  const handleLanguageChange = (value: string) => {
-    router.visit(`/${value}`, { preserveState: true, replace: true });
+    router.post(
+      '/set-locale',
+      { locale: value },
+      {
+        preserveState: true,
+        replace: true,
+        onSuccess: () => {
+          i18n.changeLanguage(value);
+        },
+      },
+    );
  };

  const handleLogout = () => {
-    router.post(`/${locale}/logout`);
+    router.post('/logout');
  };

+  const occasionUrl = (typeKey: 'hochzeit' | 'geburtstag' | 'firmenevent') =>
+    `/anlaesse/${typeKey}`;
+
  return (
-    <header className="fixed top-0 z-50 w-full bg-white dark:bg-gray-900 shadow-lg border-b-2 border-gray-200 dark:border-gray-700">
-      <div className="container mx-auto px-4 py-4">
+    <header className="fixed top-0 z-50 w-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-lg border-b border-gray-200/50 dark:border-gray-700/50">
+      <div className="container mx-auto px-4 py-3">
        <div className="flex justify-between items-center">
-          <Link href={`/${locale}`} className="text-2xl font-bold text-gray-800 dark:text-gray-200">
+          <Link
+            href={marketingRoute().url}
+            className="text-2xl font-bold text-gray-800 dark:text-gray-200 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200"
+          >
            Fotospiel
          </Link>
-          <nav className="flex space-x-8">
-            <Link href={`/${locale}`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              Home
-            </Link>
-            <Link href={`/${locale}/packages`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              Pakete
-            </Link>
-            <Link href={`/${locale}/blog`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              Blog
-            </Link>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-                  Anlässe
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem asChild>
-                  <Link href={`/${locale}/anlaesse/hochzeit`}>
-                    Hochzeit
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link href={`/${locale}/anlaesse/geburtstag`}>
-                    Geburtstag
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link href={`/${locale}/anlaesse/firmenevent`}>
-                    Firmenevent
-                  </Link>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <Link href={`/${locale}/kontakt`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
-              Kontakt
-            </Link>
-          </nav>
+          <NavigationMenu className="hidden md:flex">
+            <NavigationMenuList className="space-x-1">
+              <NavigationMenuItem>
+                <NavigationMenuLink href={marketingRoute().url} className={cn(
+                  navigationMenuTriggerStyle(),
+                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
+                )}>
+                  {t('header.home', 'Home')}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink href={packagesRoute().url} className={cn(
+                  navigationMenuTriggerStyle(),
+                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
+                )}>
+                  {t('header.packages', 'Pakete')}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink href={blogRoute().url} className={cn(
+                  navigationMenuTriggerStyle(),
+                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
+                )}>
+                  {t('header.blog', 'Blog')}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200">
+                      Anlässe
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl">
+                    <DropdownMenuItem asChild>
+                      <Link href={occasionUrl('hochzeit')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
+                        {t('header.occasions.wedding', 'Hochzeit')}
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link href={occasionUrl('geburtstag')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
+                        {t('header.occasions.birthday', 'Geburtstag')}
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link href={occasionUrl('firmenevent')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
+                        {t('header.occasions.corporate', 'Firmenevent')}
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </NavigationMenuItem>
+              <NavigationMenuItem>
+                <NavigationMenuLink href={kontaktRoute().url} className={cn(
+                  navigationMenuTriggerStyle(),
+                  "text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
+                )}>
+                  {t('header.contact', 'Kontakt')}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            </NavigationMenuList>
+          </NavigationMenu>
          <div className="flex items-center space-x-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={toggleTheme}
-              className="h-8 w-8"
+              className="h-8 w-8 hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200"
            >
              <Sun className={cn("h-4 w-4", appearance === "dark" && "hidden")} />
              <Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
              <span className="sr-only">Theme Toggle</span>
            </Button>
            <Select value={locale} onValueChange={handleLanguageChange}>
-              <SelectTrigger className="w-[70px] h-8">
+              <SelectTrigger className="w-[70px] h-8 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-pink-50 dark:hover:bg-pink-900/20">
                <SelectValue placeholder="DE" />
              </SelectTrigger>
-              <SelectContent>
+              <SelectContent className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
                <SelectItem value="de">DE</SelectItem>
                <SelectItem value="en">EN</SelectItem>
              </SelectContent>
@@ -96,33 +143,33 @@ const Header: React.FC = () => {
            {auth.user ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
-                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                  <Button variant="ghost" className="relative h-8 w-8 rounded-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={auth.user?.avatar} alt={auth.user?.name || 'User'} />
-                      <AvatarFallback>{(auth.user?.name || auth.user?.email || 'U').charAt(0)}</AvatarFallback>
+                      <AvatarFallback className="bg-pink-100 dark:bg-pink-900 text-pink-600 dark:text-pink-400">{(auth.user?.name || auth.user?.email || 'U').charAt(0)}</AvatarFallback>
                    </Avatar>
                  </Button>
                </DropdownMenuTrigger>
-                <DropdownMenuContent className="w-56" align="end" forceMount>
+                <DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl" align="end" forceMount>
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
-                      <p className="text-sm font-medium leading-none">{auth.user?.name || auth.user?.email || 'User'}</p>
-                      <p className="text-xs leading-none text-muted-foreground">{auth.user?.email || ''}</p>
+                      <p className="text-sm font-medium leading-none text-gray-900 dark:text-gray-100">{auth.user?.name || auth.user?.email || 'User'}</p>
+                      <p className="text-xs leading-none text-gray-500 dark:text-gray-400">{auth.user?.email || ''}</p>
                    </div>
                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
+                  <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
                  <DropdownMenuItem asChild>
-                    <Link href="/profile">
+                    <Link href="/profile" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                      Profil
                    </Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
-                    <Link href="/profile/orders">
+                    <Link href="/profile/orders" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                      Bestellungen
                    </Link>
                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem onClick={handleLogout}>
+                  <DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
+                  <DropdownMenuItem onClick={handleLogout} className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
                    Abmelden
                  </DropdownMenuItem>
                </DropdownMenuContent>
@@ -130,14 +177,14 @@ const Header: React.FC = () => {
            ) : (
              <>
                <Link
-                  href={`/${locale}/login`}
-                  className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+                  href={loginRoute().url}
+                  className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-pink-50 dark:hover:bg-pink-900/20 px-3 py-2 rounded-md transition-all duration-200"
                >
                  {t('header.login')}
                </Link>
                <Link
-                  href={`/${locale}/register`}
-                  className="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
+                  href={registerRoute().url}
+                  className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white px-4 py-2 rounded-md transition-all duration-200 shadow-md hover:shadow-lg"
                >
                  {t('header.register')}
                </Link>
--- a/resources/js/hooks/useLocale.ts
+++ b/resources/js/hooks/useLocale.ts
@@ -0,0 +1,6 @@
+import { usePage } from '@inertiajs/react';
+
+export const useLocale = () => {
+  const { locale } = usePage().props as any;
+  return locale;
+};
--- a/resources/js/hooks/useLocalizedRoutes.ts
+++ b/resources/js/hooks/useLocalizedRoutes.ts
@@ -1,64 +1,12 @@
-import { useMemo } from 'react';
-import { usePage } from '@inertiajs/react';
-
-declare const route: ((name: string, params?: Record<string, unknown>, absolute?: boolean) => string) | undefined;
-
-type PageProps = {
-  locale?: string;
-  url?: string;
-};
+import { useLocale } from './useLocale';

 export const useLocalizedRoutes = () => {
-  const page = usePage<PageProps>();
-  const currentUrl = page.url ?? (typeof window !== 'undefined' ? window.location.pathname : '/') ?? '/';
+  const locale = useLocale();

-  return useMemo(() => {
-    let locale = page.props.locale;
+  const localizedPath = (path: string) => {
+    // Since prefix-free, return plain path. Locale is handled via session.
+    return path.startsWith('/') ? path : `/${path}`;
+  };

-    if (!locale) {
-      if (currentUrl.startsWith('/en')) {
-        locale = 'en';
-      } else if (currentUrl.startsWith('/de')) {
-        locale = 'de';
-      }
-    }
-
-    if (!locale) {
-      locale = 'de';
-    }
-
-    const localePrefix = locale ? `/${locale}` : '';
-
-    const localizedPath = (path = '/') => {
-      if (!path || path === '/') {
-        return localePrefix || '/';
-      }
-
-      const normalized = path.startsWith('/') ? path : `/${path}`;
-      const result = `${localePrefix}${normalized}`;
-
-      return result.replace(/\/+$/, '').replace(/\/+/g, '/');
-    };
-
-    const localizedRoute = (name: string, params: Record<string, unknown> = {}, absolute = false) => {
-      if (typeof route === 'function') {
-        const payload = locale ? { locale, ...params } : params;
-
-        try {
-          return route(name, payload, absolute);
-        } catch (error) {
-          console.warn('Failed to resolve route', name, error);
-        }
-      }
-
-      return localizedPath(name.startsWith('/') ? name : `/${name}`);
-    };
-
-    return {
-      locale,
-      localePrefix,
-      localizedPath,
-      localizedRoute,
-    };
-  }, [page.props.locale, currentUrl]);
+  return { localizedPath };
 };
--- a/resources/js/i18n.ts
+++ b/resources/js/i18n.ts
@@ -20,9 +20,8 @@ i18n
      loadPath: '/lang/{{lng}}/{{ns}}.json',
    },
    detection: {
-      order: ['path', 'localStorage', 'htmlTag'],
-      lookupFromPathIndex: 0,
-      caches: ['localStorage'],
+      order: ['sessionStorage', 'localStorage', 'htmlTag'],
+      caches: ['sessionStorage'],
    },
    react: {
      useSuspense: false,
--- a/resources/js/layouts/marketing/MarketingLayout.tsx
+++ b/resources/js/layouts/marketing/MarketingLayout.tsx
@@ -13,15 +13,14 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
  const { url } = page;
  const { t } = useTranslation('marketing');
  const i18n = useTranslation();
-  const { locale, localizedPath } = useLocalizedRoutes();
+  const { locale } = usePage().props as any;
+  const { localizedPath } = useLocalizedRoutes();

  useEffect(() => {
-    const localeCandidate = locale || (url.startsWith('/en/') ? 'en' : 'de');
-
-    if (localeCandidate && i18n.i18n.language !== localeCandidate) {
-      i18n.i18n.changeLanguage(localeCandidate);
+    if (locale && i18n.i18n.language !== locale) {
+      i18n.i18n.changeLanguage(locale);
    }
-  }, [url, i18n, locale]);
+  }, [locale, i18n]);

  const marketing = page.props.translations?.marketing ?? {};

@@ -30,15 +29,19 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
    return typeof value === 'string' ? value : fallback;
  };

-  const activeLocale = locale || (url.startsWith('/en/') ? 'en' : 'de');
+  const activeLocale = locale || 'de';
  const alternateLocale = activeLocale === 'de' ? 'en' : 'de';
  const path = url.replace(/^\/(de|en)/, '');
-  const canonicalUrl = `https://fotospiel.app${localizedPath(path || '/')}`;
+  const canonicalUrl = `https://fotospiel.app${path || '/'}`;

  const handleLocaleChange = (nextLocale: string) => {
-    const normalizedPath = url.replace(/^\/(de|en)/, '') || '/';
-    const destination = normalizedPath === '/' ? `/${nextLocale}` : `/${nextLocale}${normalizedPath}`;
-    router.visit(destination);
+    router.post('/set-locale', { locale: nextLocale }, {
+      preserveState: true,
+      replace: true,
+      onSuccess: () => {
+        i18n.i18n.changeLanguage(nextLocale);
+      },
+    });
  };

  return (
@@ -56,28 +59,28 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
        />
        <meta property="og:url" content={canonicalUrl} />
        <link rel="canonical" href={canonicalUrl} />
-        <link rel="alternate" hrefLang="de" href={`https://fotospiel.app/de${path}`} />
-        <link rel="alternate" hrefLang="en" href={`https://fotospiel.app/en${path}`} />
-        <link rel="alternate" hrefLang="x-default" href="https://fotospiel.app/de" />
+        <link rel="alternate" hreflang="de" href={`https://fotospiel.app/de${path}`} />
+        <link rel="alternate" hreflang="en" href={`https://fotospiel.app/en${path}`} />
+        <link rel="alternate" hreflang="x-default" href="https://fotospiel.app/" />
      </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={localizedPath('/')} className="text-xl font-bold text-gray-900">
+              <Link href="/" className="text-xl font-bold text-gray-900">
                Fotospiel
              </Link>
              <div className="hidden md:flex space-x-8">
-                <Link href={localizedPath('/')} className="text-gray-700 hover:text-gray-900">
+                <Link href="/" className="text-gray-700 hover:text-gray-900">
                  {t('nav.home')}
                </Link>
-                <Link href={localizedPath('/packages')} className="text-gray-700 hover:text-gray-900">
+                <Link href="/packages" className="text-gray-700 hover:text-gray-900">
                  {t('nav.packages')}
                </Link>
-                <Link href={localizedPath('/blog')} className="text-gray-700 hover:text-gray-900">
+                <Link href="/blog" className="text-gray-700 hover:text-gray-900">
                  {t('nav.blog')}
                </Link>
-                <Link href={localizedPath('/kontakt')} className="text-gray-700 hover:text-gray-900">
+                <Link href="/kontakt" className="text-gray-700 hover:text-gray-900">
                  {t('nav.contact')}
                </Link>
              </div>
@@ -101,13 +104,13 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
          <div className="container mx-auto px-4 text-center">
            <p>&copy; 2025 Fotospiel. Alle Rechte vorbehalten.</p>
            <div className="mt-4 space-x-4">
-              <Link href={localizedPath('/datenschutz')} className="hover:underline">
+              <Link href="/datenschutz" className="hover:underline">
                {t('nav.privacy')}
              </Link>
-              <Link href={localizedPath('/impressum')} className="hover:underline">
+              <Link href="/impressum" className="hover:underline">
                {t('nav.impressum')}
              </Link>
-              <Link href={localizedPath('/kontakt')} className="hover:underline">
+              <Link href="/kontakt" className="hover:underline">
                {t('nav.contact')}
              </Link>
            </div>
--- a/resources/js/pages/marketing/Kontakt.tsx
+++ b/resources/js/pages/marketing/Kontakt.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Head, Link, useForm, usePage } from '@inertiajs/react';
 import { useTranslation } from 'react-i18next';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
 import MarketingLayout from '@/layouts/marketing/MarketingLayout';

 const Kontakt: React.FC = () => {
@@ -12,6 +13,7 @@ const Kontakt: React.FC = () => {

  const { flash } = usePage().props as any;
  const { t } = useTranslation('marketing');
+  const { localizedPath } = useLocalizedRoutes();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
--- a/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/AuthStep.tsx
@@ -3,8 +3,8 @@ import { usePage } from "@inertiajs/react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useCheckoutWizard } from "../WizardContext";
-import LoginForm, { AuthUserPayload } from "../../auth/LoginForm";
-import RegisterForm, { RegisterSuccessPayload } from "../../auth/RegisterForm";
+import LoginForm, { AuthUserPayload } from "../../../auth/LoginForm";
+import RegisterForm, { RegisterSuccessPayload } from "../../../auth/RegisterForm";

 interface AuthStepProps {
  privacyHtml: string;
--- a/resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
+++ b/resources/js/pages/marketing/checkout/steps/ConfirmationStep.tsx
@@ -15,12 +15,12 @@ export const ConfirmationStep: React.FC<ConfirmationStepProps> = ({ onViewProfil
      <Alert>
        <AlertTitle>Willkommen bei FotoSpiel</AlertTitle>
        <AlertDescription>
-          {Ihr Paket "" ist aktiviert. Wir haben Ihnen eine Bestaetigung per E-Mail gesendet.}
+          Ihr Paket wurde aktiviert. Wir haben Ihnen eine Bestätigung per E-Mail gesendet.
        </AlertDescription>
      </Alert>
      <div className="flex flex-wrap gap-3 justify-end">
        <Button variant="outline" onClick={onViewProfile}>
-          Profil oeffnen
+          Profil öffnen
        </Button>
        <Button>Zum Admin-Bereich</Button>
      </div>