struktur der webseiten-js angepasst. filament aktualisiert.

resources/js/layouts/MarketingLayout.tsx

@@ -1,108 +0,0 @@
-import React from 'react';
-import { Link } from '@inertiajs/react';
-import { usePage } from '@inertiajs/react';
-
-interface MarketingLayoutProps {
-  children: React.ReactNode;
-  title?: string;
-}
-
-const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
-  const { props } = usePage();
-  const { auth } = props as any;
-
-  return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
-      {/* Header */}
-      <header className="bg-white shadow-sm border-b border-gray-200">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center py-4">
-            {/* Logo */}
-            <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
-              FotoSpiel
-            </Link>
-            
-            {/* Navigation */}
-            <nav className="hidden md:flex space-x-8">
-              <Link href="/marketing" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
-                Home
-              </Link>
-              <Link href="/marketing/packages" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
-                Pakete
-              </Link>
-              <Link href="/marketing/blog" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
-                Blog
-              </Link>
-              <Link href="/marketing/occasions" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
-                Anlässe
-              </Link>
-              {auth.user ? (
-                <Link href="/dashboard" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
-                  Dashboard
-                </Link>
-              ) : (
-                <Link href="/marketing/register" className="text-gray-700 hover:text-pink-500 font-sans-marketing transition-colors">
-                  Registrieren
-                </Link>
-              )}
-            </nav>
-            
-            {/* Mobile Menu Button – TODO: Implementiere Dropdown */}
-            <div className="md:hidden">
-              <button className="text-gray-700 hover:text-pink-500">☰</button>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* Main Content */}
-      <main className="flex-grow">
-        {title && (
-          <title>{title}</title>
-        )}
-        {children}
-      </main>
-
-      {/* Footer */}
-      <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-4 gap-8">
-            <div className="col-span-1 md:col-span-2">
-              <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
-                FotoSpiel
-              </Link>
-              <p className="text-gray-600 font-sans-marketing mt-2">
-                Deine Plattform für Event-Fotos.
-              </p>
-            </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="/legal/impressum" className="hover:text-pink-500">Impressum</Link></li>
-                <li><Link href="/legal/datenschutz" className="hover:text-pink-500">Datenschutz</Link></li>
-                <li><Link href="/legal/agb" className="hover:text-pink-500">AGB</Link></li>
-                <li><Link href="/legal/kontakt" className="hover:text-pink-500">Kontakt</Link></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 FotoSpiel. Alle Rechte vorbehalten.
-          </div>
-        </div>
-      </footer>
-    </div>
-  );
-};
-
-export default MarketingLayout;

resources/js/layouts/app/AppLayout.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { usePage } from '@inertiajs/react';
+import Header from './Header';
+import Footer from './Footer';
+
+interface AppLayoutProps {
+  children: React.ReactNode;
+  header?: React.ReactNode;
+  footer?: React.ReactNode;
+}
+
+const AppLayout: React.FC<AppLayoutProps> = ({ children, header, footer }) => {
+  const { auth } = usePage().props;
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {header || <Header />}
+      <main>{children}</main>
+      {footer || <Footer />}
+    </div>
+  );
+};
+
+export default AppLayout;

resources/js/layouts/app/Footer.tsx

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import { Link } from '@inertiajs/react';
+import { useTranslation } from 'react-i18next';
+import { usePage } from '@inertiajs/react';
+import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
+import { useAppearance } from '@/hooks/use-appearance';
+
+
+const Footer: React.FC = () => {
+    
+    const { t } = useTranslation('marketing');
+    
+    
+  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-4 gap-8">
+                    <div className="col-span-1 md:col-span-2">
+                      <Link href="/marketing" className="text-2xl font-bold font-display text-pink-500">
+                        FotoSpiel.App
+                      </Link>
+                      <p className="text-gray-600 font-sans-marketing mt-2">
+                        Deine Plattform für Event-Fotos.
+                      </p>
+                    </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">{t('nav.impressum')}</Link></li>
+                        <li><Link href="/datenschutz" className="hover:text-pink-500">{t('nav.privacy')}</Link></li>
+                        <li><Link href="/agb" className="hover:text-pink-500">AGB</Link></li>
+                        <li><Link href="/kontakt" className="hover:text-pink-500">{t('nav.contact')}</Link></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 FotoSpiel.App - Alle Rechte vorbehalten.
+                  </div>
+                </div>
+              </footer>
+  );
+};
+
+export default Footer;

resources/js/layouts/app/Header.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback } 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 { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
+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 { Sun, Moon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Header: React.FC = () => {
+  const { auth } = usePage().props as any;
+  const { t } = useTranslation('auth');
+  const { appearance, updateAppearance } = useAppearance();
+  const { localizedPath } = useLocalizedRoutes();
+
+  const toggleTheme = () => {
+    const newAppearance = appearance === 'dark' ? 'light' : 'dark';
+    updateAppearance(newAppearance);
+  };
+
+  const handleLanguageChange = useCallback(async (value: string) => {
+    console.log('handleLanguageChange called with:', value);
+    try {
+      const response = await fetch('/set-locale', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
+        },
+        body: JSON.stringify({ locale: value }),
+      });
+
+      console.log('fetch response:', response.status);
+      if (response.ok) {
+        console.log('calling i18n.changeLanguage with:', value);
+        i18n.changeLanguage(value);
+        // Reload only the locale prop to update the page props
+        router.reload({ only: ['locale'] });
+      }
+    } catch (error) {
+      console.error('Failed to change locale:', error);
+    }
+  }, []);
+
+  const handleLogout = () => {
+    router.post('/logout');
+  };
+
+  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">
+        <div className="flex justify-between items-center">
+          <Link href={localizedPath('/')} className="text-2xl font-bold text-gray-800 dark:text-gray-200">
+            Die Fotospiel.App
+          </Link>
+          <nav className="flex space-x-8">
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/')}>
+                {t('header.home', 'Home')}
+              </Link>
+            </Button>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/packages')}>
+                {t('header.packages', 'Pakete')}
+              </Link>
+            </Button>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/blog')}>
+                {t('header.blog', 'Blog')}
+              </Link>
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+                  Anlässe
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem asChild>
+                  <Link href={localizedPath('/anlaesse/hochzeit')} className="w-full flex items-center">
+                    {t('header.occasions.wedding', 'Hochzeit')}
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={localizedPath('/anlaesse/geburtstag')} className="w-full flex items-center">
+                    {t('header.occasions.birthday', 'Geburtstag')}
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href={localizedPath('/anlaesse/firmenevent')} className="w-full flex items-center">
+                    {t('header.occasions.corporate', 'Firmenevent')}
+                  </Link>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">
+              <Link href={localizedPath('/kontakt')}>
+                {t('header.contact', 'Kontakt')}
+              </Link>
+            </Button>
+          </nav>
+          <div className="flex items-center space-x-4">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={toggleTheme}
+              className="h-8 w-8"
+            >
+              <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={i18n.language || 'de'} onValueChange={handleLanguageChange}>
+              <SelectTrigger className="w-[70px] h-8">
+                <SelectValue placeholder="DE" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="de">DE</SelectItem>
+                <SelectItem value="en">EN</SelectItem>
+              </SelectContent>
+            </Select>
+            {auth.user ? (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+                    <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>
+                    </Avatar>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56" 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>
+                    </div>
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem asChild>
+                    <Link href={localizedPath('/profile')}>
+                      Profil
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem asChild>
+                    <Link href={localizedPath('/profile/orders')}>
+                      Bestellungen
+                    </Link>
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={handleLogout}>
+                    Abmelden
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            ) : (
+              <>
+                <Link
+                  href={localizedPath('/login')}
+                  className="text-gray-700 hover:text-pink-600 dark:text-gray-300 dark:hover:text-pink-400 font-medium transition-colors duration-200"
+                >
+                  {t('header.login')}
+                </Link>
+                <Link
+                  href={localizedPath('/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"
+                >
+                  {t('header.register')}
+                </Link>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

resources/js/layouts/mainWebsite.tsx

@@ -59,63 +59,19 @@ 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/" />
       </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={activeLocale}
-                  onChange={(event) => handleLocaleChange(event.target.value)}
-                  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>
-        <footer className="bg-gray-800 text-white py-8">
-          <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="/datenschutz" className="hover:underline">
-                {t('nav.privacy')}
-              </Link>
-              <Link href="/impressum" className="hover:underline">
-                {t('nav.impressum')}
-              </Link>
-              <Link href="/kontakt" className="hover:underline">
-                {t('nav.contact')}
-              </Link>
-            </div>
-          </div>
-        </footer>
+        {/* Footer kommt von Footer.tsx */}
+            
       </div>
     </>
   );