407 lines
18 KiB
TypeScript
407 lines
18 KiB
TypeScript
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 { 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 } from 'lucide-react';
|
|
|
|
interface MarketingLayoutProps {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
}
|
|
|
|
type PageProps = {
|
|
translations?: Record<string, Record<string, string>>;
|
|
locale?: string;
|
|
analytics?: { matomo?: MatomoConfig };
|
|
supportedLocales?: string[];
|
|
appUrl?: string;
|
|
auth?: { user?: { name?: string; email?: string } };
|
|
};
|
|
|
|
const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
|
|
const page = usePage<PageProps>();
|
|
const { url } = page;
|
|
const { t } = useTranslation('marketing');
|
|
const i18n = useTranslation();
|
|
const { locale, analytics, supportedLocales = ['de', 'en'], appUrl, auth } = page.props;
|
|
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) {
|
|
i18n.i18n.changeLanguage(locale);
|
|
}
|
|
}, [locale, i18n]);
|
|
|
|
const marketing = page.props.translations?.marketing ?? {};
|
|
|
|
const getString = (key: string, fallback: string) => {
|
|
const value = marketing[key];
|
|
return typeof value === 'string' ? value : fallback;
|
|
};
|
|
|
|
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) => {
|
|
const targetPath = localizedPath(relativePath, nextLocale);
|
|
const targetUrl = `${targetPath}${rawQuery ? `?${rawQuery}` : ''}`;
|
|
|
|
i18n.i18n.changeLanguage(nextLocale);
|
|
setMobileMenuOpen(false);
|
|
router.visit(targetUrl, {
|
|
replace: true,
|
|
preserveState: false,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{title || t('meta.title', getString('title', 'Fotospiel'))}</title>
|
|
<meta
|
|
name="description"
|
|
content={t('meta.description', getString('description', 'Sammle Gastfotos für Events mit QR-Codes'))}
|
|
/>
|
|
<meta property="og:title" content={title || t('meta.title', getString('title', 'Fotospiel'))} />
|
|
<meta
|
|
property="og:description"
|
|
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={buildAlternateUrl(supportedLocales[0] || 'de')} />
|
|
{Object.entries(alternates).map(([code, href]) => (
|
|
<link key={code} rel="alternate" hrefLang={code} href={href} />
|
|
))}
|
|
</Head>
|
|
<MatomoTracker config={analytics?.matomo} />
|
|
<div className="min-h-screen bg-white">
|
|
<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-md font-md 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-md font-md 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>
|
|
</>
|
|
)}
|
|
</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 />
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MarketingLayout;
|