Seite läuft wieder, menü bringt keine fehler mehr

This commit is contained in:
Codex Agent
2025-10-07 11:52:03 +02:00
parent 5ee510b05d
commit dd5545605c
33 changed files with 1902 additions and 1361 deletions

View File

@@ -27,7 +27,11 @@ createInertiaApp({
const root = createRoot(el);
// Sync i18n with initial locale from props
if (props.initialPage && props.initialPage.props && props.initialPage.props.locale) {
if (
props.initialPage &&
props.initialPage.props &&
typeof props.initialPage.props.locale === 'string'
) {
i18n.changeLanguage(props.initialPage.props.locale);
}

View File

@@ -1,26 +1,22 @@
import React, { useEffect } from 'react';
import React 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 { 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();
const { localizedPath } = useLocalizedRoutes();
const toggleTheme = () => {
const newAppearance = appearance === 'dark' ? 'light' : 'dark';
@@ -28,114 +24,80 @@ const Header: React.FC = () => {
};
const handleLanguageChange = (value: string) => {
router.post(
'/set-locale',
{ locale: value },
{
preserveState: true,
replace: true,
onSuccess: () => {
i18n.changeLanguage(value);
},
router.post('/set-locale', { locale: value }, {
preserveState: true,
replace: true,
onSuccess: () => {
i18n.changeLanguage(value);
},
);
});
};
const handleLogout = () => {
router.post('/logout');
};
const occasionUrl = (typeKey: 'hochzeit' | 'geburtstag' | 'firmenevent') =>
`/anlaesse/${typeKey}`;
return (
<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">
<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={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"
>
<Link href="{localizedPath('/')}" className="text-2xl font-bold text-gray-800 dark:text-gray-200">
Fotospiel
</Link>
<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>
<nav className="flex space-x-8">
<Link href={localizedPath('/')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.home', 'Home')}
</Link>
<Link href={localizedPath('/packages')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.packages', 'Pakete')}
</Link>
<Link href={localizedPath('/blog')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.blog', '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={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>
<Link href={localizedPath('/kontakt')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
{t('header.contact', 'Kontakt')}
</Link>
</nav>
<div className="flex items-center space-x-4">
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
className="h-8 w-8 hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200"
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={locale} onValueChange={handleLanguageChange}>
<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">
<SelectTrigger className="w-[70px] h-8">
<SelectValue placeholder="DE" />
</SelectTrigger>
<SelectContent className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
<SelectContent>
<SelectItem value="de">DE</SelectItem>
<SelectItem value="en">EN</SelectItem>
</SelectContent>
@@ -143,33 +105,33 @@ const Header: React.FC = () => {
{auth.user ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<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">
<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 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>
<AvatarFallback>{(auth.user?.name || auth.user?.email || 'U').charAt(0)}</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl" align="end" forceMount>
<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 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>
<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 className="bg-gray-200 dark:bg-gray-700" />
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
<Link href={localizedPath('/profile')}>
Profil
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/profile/orders" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
<Link href={localizedPath('/profile/orders')}>
Bestellungen
</Link>
</DropdownMenuItem>
<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">
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
Abmelden
</DropdownMenuItem>
</DropdownMenuContent>
@@ -177,14 +139,14 @@ const Header: React.FC = () => {
) : (
<>
<Link
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"
href={localizedPath('/login')}
className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
>
{t('header.login')}
</Link>
<Link
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"
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>

View File

@@ -1,17 +1,21 @@
import React, { useState } from 'react';
import React, { useMemo, useState } from 'react';
import { Link } from '@inertiajs/react';
import { usePage } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
const MarketingHeader: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const { url } = usePage();
usePage();
const { localizedPath } = useLocalizedRoutes();
const occasions = [
{ href: '/de/occasions/weddings', label: 'Hochzeiten' },
{ href: '/de/occasions/birthdays', label: 'Geburtstage' },
{ href: '/de/occasions/corporate-events', label: 'Firmenevents' },
{ href: '/de/occasions/family-celebrations', label: 'Familienfeiern' },
];
const occasions = useMemo(
() => [
{ href: localizedPath('/anlaesse/hochzeit'), label: 'Hochzeiten' },
{ href: localizedPath('/anlaesse/geburtstag'), label: 'Geburtstage' },
{ href: localizedPath('/anlaesse/firmenevent'), label: 'Firmenevents' },
],
[localizedPath]
);
return (
<header className="bg-white shadow-md sticky top-0 z-50">

View File

@@ -1,11 +1,30 @@
import { useLocale } from './useLocale';
type LocalizedPathInput = string | null | undefined;
export const useLocalizedRoutes = () => {
const locale = useLocale();
const localizedPath = (path: string) => {
const localizedPath = (path: LocalizedPathInput) => {
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 '/';
}
const trimmed = path.trim();
const normalized = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
console.debug('[useLocalizedRoutes] Resolved path', { input: path, normalized, locale });
// Since prefix-free, return plain path. Locale is handled via session.
return path.startsWith('/') ? path : `/${path}`;
return normalized;
};
return { localizedPath };

View File

@@ -1,11 +1,12 @@
import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { Head, Link, usePage } from '@inertiajs/react';
import MarketingLayout from '@/layouts/MarketingLayout';
import { usePage } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
const Datenschutz: React.FC = () => {
const { props } = usePage();
const { __ } = props as any; // Für i18n
const { localizedPath } = useLocalizedRoutes();
return (
<MarketingLayout title={__('legal.datenschutz_title')}>
@@ -21,7 +22,7 @@ const Datenschutz: React.FC = () => {
</p>
<p className="mb-4 font-sans-marketing">{__('legal.data_retention')}</p>
<p className="mb-4 font-sans-marketing">
{__('legal.rights')} <Link href="/de/kontakt">{__('legal.contact')}</Link>.
{__('legal.rights')} <Link href={localizedPath('/kontakt')}>{__('legal.contact')}</Link>.
</p>
<p className="mb-4 font-sans-marketing">{__('legal.cookies')}</p>

View File

@@ -14,27 +14,65 @@ interface Props {
}
const Blog: React.FC<Props> = ({ posts }) => {
const { localizedPath } = useLocalizedRoutes();
const { t } = useTranslation('marketing');
const resolvePaginationHref = React.useCallback(
(raw?: string | null) => {
if (!raw) {
return null;
}
try {
const parsed = new URL(
raw,
typeof window !== 'undefined' ? window.location.origin : 'http://localhost'
);
const normalized = `${parsed.pathname}${parsed.search}`;
return localizedPath(normalized);
} catch (error) {
console.warn('[Marketing Blog] Fallback resolving pagination link', { raw, error });
return localizedPath(raw);
}
},
[localizedPath]
);
const renderPagination = () => {
if (!posts.links || posts.links.length <= 3) return null;
return (
<div className="mt-12 text-center">
<div className="flex justify-center space-x-2">
{posts.links.map((link, index) => (
<Link
key={index}
href={link.url || '#'}
className={`px-3 py-2 rounded ${
link.active
? 'bg-[#FFB6C1] text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
dangerouslySetInnerHTML={{ __html: link.label }}
/>
))}
{posts.links.map((link, index) => {
const href = resolvePaginationHref(link.url);
const baseClasses = `px-3 py-2 rounded ${
link.active
? 'bg-[#FFB6C1] text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`;
if (!href) {
return (
<span
key={index}
className={`${baseClasses} cursor-default`}
dangerouslySetInnerHTML={{ __html: link.label }}
/>
);
}
return (
<Link
key={index}
href={href}
className={baseClasses}
dangerouslySetInnerHTML={{ __html: link.label }}
/>
);
})}
</div>
</div>
);

View File

@@ -56,7 +56,7 @@ const Home: React.FC<Props> = ({ packages }) => {
</div>
<div className="md:w-1/2">
<img
src="/images/hero-image.jpg"
src="https://via.placeholder.com/600x400/FFB6C1/FFFFFF?text=Fotospiel+Hero"
alt={t('home.hero_image_alt')}
className="w-full h-auto rounded-lg shadow-lg"
/>

View File

@@ -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;

View File

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

View File

@@ -0,0 +1,46 @@
{
"login_failed": "Ungültige E-Mail oder Passwort.",
"login_success": "Sie sind nun eingeloggt.",
"registration_failed": "Registrierung fehlgeschlagen.",
"registration_success": "Registrierung erfolgreich fortfahren mit Kauf.",
"already_logged_in": "Sie sind bereits eingeloggt.",
"failed_credentials": "Falsche Anmeldedaten.",
"header": {
"login": "Anmelden",
"register": "Registrieren",
"home": "Startseite",
"packages": "Pakete",
"blog": "Blog",
"occasions": {
"wedding": "Hochzeit",
"birthday": "Geburtstag",
"corporate": "Firmenevent"
},
"contact": "Kontakt"
},
"login": {
"title": "Anmelden",
"username_or_email": "Username oder E-Mail",
"password": "Passwort",
"remember": "Angemeldet bleiben",
"submit": "Anmelden"
},
"register": {
"title": "Registrieren",
"name": "Vollständiger Name",
"username": "Username",
"email": "E-Mail-Adresse",
"password": "Passwort",
"password_confirmation": "Passwort bestätigen",
"first_name": "Vorname",
"last_name": "Nachname",
"address": "Adresse",
"phone": "Telefonnummer",
"privacy_consent": "Ich stimme der Datenschutzerklärung zu und akzeptiere die Verarbeitung meiner persönlichen Daten.",
"submit": "Registrieren"
},
"verification": {
"notice": "Bitte bestätigen Sie Ihre E-Mail-Adresse.",
"resend": "E-Mail erneut senden"
}
}

View File

@@ -33,16 +33,14 @@ return [
'resend' => 'E-Mail erneut senden',
],
'header' => [
'home' => 'Home',
'home' => 'Startseite',
'packages' => 'Pakete',
'blog' => 'Blog',
'contact' => 'Kontakt',
'login' => 'Anmelden',
'register' => 'Registrieren',
'occasions' => [
'wedding' => 'Hochzeit',
'birthday' => 'Geburtstag',
'corporate' => 'Firmenevent',
],
'contact' => 'Kontakt',
],
];

View File

@@ -239,5 +239,10 @@
},
"currency": {
"euro": "€"
},
"common": {
"currency": {
"euro": "€"
}
}
}

View File

@@ -1,45 +0,0 @@
<?php
return [
'failed' => 'These credentials do not match our records.',
'password' => 'The provided password is incorrect.',
'throttle' => 'Too many login attempts. Please try again in :seconds seconds.',
'login' => [
'title' => 'Log In',
'username_or_email' => 'Username or Email',
'password' => 'Password',
'remember' => 'Remember Me',
'submit' => 'Log In',
],
'register' => [
'title' => 'Register',
'name' => 'Full Name',
'username' => 'Username',
'email' => 'Email Address',
'password' => 'Password',
'password_confirmation' => 'Confirm Password',
'first_name' => 'First Name',
'last_name' => 'Last Name',
'address' => 'Address',
'phone' => 'Phone Number',
'privacy_consent' => 'I agree to the privacy policy and accept the processing of my personal data.',
'submit' => 'Register',
],
'verification' => [
'notice' => 'Please confirm your email address.',
'resend' => 'Resend Email',
],
'header' => [
'home' => 'Home',
'packages' => 'Packages',
'blog' => 'Blog',
'contact' => 'Contact',
'login' => 'Login',
'register' => 'Register',
'occasions' => [
'wedding' => 'Wedding',
'birthday' => 'Birthday',
'corporate' => 'Corporate Event',
],
],
];

View File

@@ -1,22 +1,21 @@
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center space-x-2">
<a href="/" class="text-2xl font-bold text-gray-900">Die Fotospiel.App</a>
<a href="{{ route('marketing') }}" class="text-2xl font-bold text-gray-900">Die Fotospiel.App</a>
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<nav class="hidden md:flex space-x-6 items-center">
<a href="/#how-it-works" class="text-gray-600 hover:text-gray-900">{{ __('marketing.nav.how_it_works') }}</a>
<a href="/#features" class="text-gray-600 hover:text-gray-900">{{ __('marketing.nav.features') }}</a>
<a href="{{ route('marketing') }}#how-it-works" class="text-gray-600 hover:text-gray-900">{{ __('marketing.nav.how_it_works') }}</a>
<a href="{{ route('marketing') }}#features" class="text-gray-600 hover:text-gray-900">{{ __('marketing.nav.features') }}</a>
<div x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.away="open = false" class="relative">
<button class="text-gray-600 hover:text-gray-900" @click.stop="open = !open">{{ __('marketing.nav.occasions') }}</button>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg z-10">
<a href="{{ route('occasions.type', ['locale' => app()->getLocale(), 'type' => 'weddings']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.weddings') }}</a>
<a href="{{ route('occasions.type', ['locale' => app()->getLocale(), 'type' => 'birthdays']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.birthdays') }}</a>
<a href="{{ route('occasions.type', ['locale' => app()->getLocale(), 'type' => 'corporate-events']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.corporate') }}</a>
<a href="{{ route('occasions.type', ['locale' => app()->getLocale(), 'type' => 'family-celebrations']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.family') }}</a>
<a href="{{ route('anlaesse.type', ['type' => 'hochzeit']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.weddings') }}</a>
<a href="{{ route('anlaesse.type', ['type' => 'geburtstag']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.birthdays') }}</a>
<a href="{{ route('anlaesse.type', ['type' => 'firmenevent']) }}" class="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition">{{ __('marketing.nav.occasions_types.corporate') }}</a>
</div>
</div>
<a href="{{ route('blog') }}" class="text-gray-600 hover:text-gray-900">{{ __('marketing.nav.blog') }}</a>