83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
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);
|
|
usePage();
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
|
|
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">
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
<Link href="/" className="text-2xl font-bold text-gray-900">
|
|
Die Fotospiel.App
|
|
</Link>
|
|
<svg className="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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 strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
</div>
|
|
<nav className="hidden md:flex space-x-6 items-center">
|
|
<Link href="/#how-it-works" className="text-gray-600 hover:text-gray-900">
|
|
So funktioniert es
|
|
</Link>
|
|
<Link href="/#features" className="text-gray-600 hover:text-gray-900">
|
|
Features
|
|
</Link>
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="text-gray-600 hover:text-gray-900"
|
|
>
|
|
Anlässe
|
|
</button>
|
|
{isOpen && (
|
|
<div className="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg z-10">
|
|
{occasions.map((occasion) => (
|
|
<Link
|
|
key={occasion.href}
|
|
href={occasion.href}
|
|
className="block px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-50 transition"
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
{occasion.label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link href="/blog" className="text-gray-600 hover:text-gray-900">
|
|
Blog
|
|
</Link>
|
|
<Link href="/packages" className="text-gray-600 hover:text-gray-900">
|
|
Packages
|
|
</Link>
|
|
<Link href="/kontakt" className="text-gray-600 hover:text-gray-900">
|
|
Kontakt
|
|
</Link>
|
|
<Link
|
|
href="/packages"
|
|
className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition"
|
|
>
|
|
Packages entdecken
|
|
</Link>
|
|
</nav>
|
|
<button className="md:hidden text-gray-600">☰</button>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default MarketingHeader; |