98 lines
4.0 KiB
TypeScript
98 lines
4.0 KiB
TypeScript
import React, { useMemo } from 'react';
|
||
import { Link } from '@inertiajs/react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { useConsent } from '@/contexts/consent';
|
||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||
|
||
const Footer: React.FC = () => {
|
||
const { t } = useTranslation(['marketing', 'legal', 'common']);
|
||
const { openPreferences } = useConsent();
|
||
const { localizedPath } = useLocalizedRoutes();
|
||
|
||
const links = useMemo(() => ({
|
||
home: localizedPath('/'),
|
||
impressum: localizedPath('/impressum'),
|
||
datenschutz: localizedPath('/datenschutz'),
|
||
agb: localizedPath('/agb'),
|
||
kontakt: localizedPath('/kontakt'),
|
||
}), [localizedPath]);
|
||
|
||
const currentYear = new Date().getFullYear();
|
||
|
||
return (
|
||
<footer className="mt-auto border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
|
||
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 gap-8 md:grid-cols-3">
|
||
<div>
|
||
<div className="flex items-center gap-4">
|
||
<img src="/logo-transparent-md.png" alt="Fotospiel App Logo" className="h-12 w-auto" />
|
||
<div>
|
||
<Link href={links.home} className="font-display text-2xl font-bold text-pink-500">
|
||
Die Fotospiel App
|
||
</Link>
|
||
<p className="mt-2 font-sans-marketing text-gray-600 dark:text-gray-300">
|
||
{t('marketing:footer.company', 'S.E.B. Fotografie')}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-display mb-4 font-semibold text-gray-900 dark:text-gray-50">
|
||
{t('legal:headline', 'Rechtliches')}
|
||
</h3>
|
||
<ul className="font-sans-marketing space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>
|
||
<Link href={links.impressum} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
|
||
{t('legal:impressum')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={links.datenschutz} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
|
||
{t('legal:datenschutz')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={links.agb} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
|
||
{t('legal:agb')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link href={links.kontakt} className="transition-colors hover:text-pink-500 dark:hover:text-pink-300">
|
||
{t('marketing:nav.contact')}
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<button
|
||
type="button"
|
||
onClick={openPreferences}
|
||
className="transition-colors hover:text-pink-500 dark:hover:text-pink-300"
|
||
>
|
||
{t('common:consent.footer.manage_link')}
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="font-display mb-4 font-semibold text-gray-900 dark:text-gray-50">
|
||
{t('marketing:footer.social', 'Social')}
|
||
</h3>
|
||
<ul className="font-sans-marketing space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">Instagram</a></li>
|
||
<li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">Facebook</a></li>
|
||
<li><a href="#" className="hover:text-pink-500 dark:hover:text-pink-300">YouTube</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="font-sans-marketing mt-8 border-t border-gray-200 pt-8 text-center text-sm text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
||
© {currentYear} Die Fotospiel App – {t('marketing:footer.rights_reserved', 'Alle Rechte vorbehalten')}.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
);
|
||
};
|
||
|
||
export default Footer;
|