108 lines
4.4 KiB
TypeScript
108 lines
4.4 KiB
TypeScript
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">
|
||
© 2025 FotoSpiel. Alle Rechte vorbehalten.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default MarketingLayout; |