soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

struktur der webseiten-js angepasst. filament aktualisiert.

Browse Source
This commit is contained in:
Codex Agent
2025-10-08 19:02:00 +02:00
parent b3e6b6b597
commit cee279cbab
42 changed files with 359 additions and 844 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/app.tsx
View File

@@ -4,7 +4,7 @@ import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createRoot } from 'react-dom/client';
import { initializeTheme } from './hooks/use-appearance';
import AppLayout from './Components/Layout/AppLayout';
import AppLayout from './layouts/app/AppLayout';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import { Toaster } from 'react-hot-toast';

25
resources/js/components/marketing/MarketingFooter.tsx
View File

@@ -1,25 +0,0 @@
import React from 'react';
import { Link } from '@inertiajs/react';
const MarketingFooter: React.FC = () => {
return (
<footer className="bg-gray-800 text-white py-8 px-4">
<div className="container mx-auto text-center">
<p>&copy; 2025 Fotospiel GmbH. Alle Rechte vorbehalten.</p>
<div className="mt-4 space-x-4">
<Link href="/impressum" className="hover:text-[#FFB6C1]">
Impressum
</Link>
<Link href="/datenschutz" className="hover:text-[#FFB6C1]">
Datenschutz
</Link>
<Link href="/kontakt" className="hover:text-[#FFB6C1]">
Kontakt
</Link>
</div>
</div>
</footer>
);
};
export default MarketingFooter;

83
resources/js/components/marketing/MarketingHeader.tsx
View File

@@ -1,83 +0,0 @@
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;

2
resources/js/i18n.ts
View File

@@ -14,7 +14,7 @@ i18n
lng: localStorage.getItem('i18nextLng') || 'de',
fallbackLng: 'de',
supportedLngs: ['de', 'en'],
ns: ['marketing', 'auth', 'common'],
ns: ['marketing', 'auth', 'common', 'legal'],
defaultNS: 'marketing',
debug: import.meta.env.DEV,
interpolation: {

108
resources/js/layouts/MarketingLayout.tsx
View File

@@ -1,108 +0,0 @@
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">
&copy; 2025 FotoSpiel. Alle Rechte vorbehalten.
</div>
</div>
</footer>
</div>
);
};
export default MarketingLayout;

3
resources/js/components/Layout/AppLayout.tsx → resources/js/layouts/app/AppLayout.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import Header from './Header';
import Footer from './Footer';
interface AppLayoutProps {
children: React.ReactNode;
@@ -15,7 +16,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children, header, footer }) => {
<div className="min-h-screen bg-background text-foreground">
{header || <Header />}
<main>{children}</main>
{footer}
{footer || <Footer />}
</div>
);
};

55
resources/js/layouts/app/Footer.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React, { useCallback } from 'react';
import { Link } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { usePage } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useAppearance } from '@/hooks/use-appearance';
const Footer: React.FC = () => {
const { t } = useTranslation('marketing');
return (
<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.App
</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="/impressum" className="hover:text-pink-500">{t('nav.impressum')}</Link></li>
<li><Link href="/datenschutz" className="hover:text-pink-500">{t('nav.privacy')}</Link></li>
<li><Link href="/agb" className="hover:text-pink-500">AGB</Link></li>
<li><Link href="/kontakt" className="hover:text-pink-500">{t('nav.contact')}</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">
&copy; 2025 FotoSpiel.App - Alle Rechte vorbehalten.
</div>
</div>
</footer>
);
};
export default Footer;

4
resources/js/components/Layout/Header.tsx → resources/js/layouts/app/Header.tsx
View File

@@ -55,8 +55,8 @@ const Header: React.FC = () => {
<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="{localizedPath('/')}" className="text-2xl font-bold text-gray-800 dark:text-gray-200">
Fotospiel
<Link href={localizedPath('/')} className="text-2xl font-bold text-gray-800 dark:text-gray-200">
Die Fotospiel.App
</Link>
<nav className="flex space-x-8">
<Button asChild variant="ghost" className="text-gray-700 hover:text-pink-600 hover:bg-pink-50 dark:text-gray-300 dark:hover:text-pink-400 dark:hover:bg-pink-950/20 font-sans-marketing text-lg font-medium transition-all duration-200">

50
resources/js/layouts/marketing/MarketingLayout.tsx → resources/js/layouts/mainWebsite.tsx
View File

@@ -59,63 +59,19 @@ const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) =>
/>
<meta property="og:url" content={canonicalUrl} />
<link rel="canonical" href={canonicalUrl} />
<link rel="alternate" hreflang="de" href={`https://fotospiel.app/de${path}`} />
<link rel="alternate" hreflang="en" href={`https://fotospiel.app/en${path}`} />
<link rel="alternate" hreflang="x-default" href="https://fotospiel.app/" />
</Head>
<div className="min-h-screen bg-white">
<header className="bg-white shadow-sm">
<div className="container mx-auto px-4 py-4">
<nav className="flex justify-between items-center">
<Link href="/" className="text-xl font-bold text-gray-900">
Fotospiel
</Link>
<div className="hidden md:flex space-x-8">
<Link href="/" className="text-gray-700 hover:text-gray-900">
{t('nav.home')}
</Link>
<Link href="/packages" className="text-gray-700 hover:text-gray-900">
{t('nav.packages')}
</Link>
<Link href="/blog" className="text-gray-700 hover:text-gray-900">
{t('nav.blog')}
</Link>
<Link href="/kontakt" className="text-gray-700 hover:text-gray-900">
{t('nav.contact')}
</Link>
</div>
<div className="flex items-center space-x-4">
<select
value={activeLocale}
onChange={(event) => handleLocaleChange(event.target.value)}
className="border border-gray-300 rounded-md px-2 py-1"
>
<option value="de">DE</option>
<option value="en">EN</option>
</select>
</div>
</nav>
</div>
</header>
<main>
{children}
</main>
<footer className="bg-gray-800 text-white py-8">
<div className="container mx-auto px-4 text-center">
<p>&copy; 2025 Fotospiel. Alle Rechte vorbehalten.</p>
<div className="mt-4 space-x-4">
<Link href="/datenschutz" className="hover:underline">
{t('nav.privacy')}
</Link>
<Link href="/impressum" className="hover:underline">
{t('nav.impressum')}
</Link>
<Link href="/kontakt" className="hover:underline">
{t('nav.contact')}
</Link>
</div>
</div>
</footer>
{/* Footer kommt von Footer.tsx */}
</div>
</>
);

2
resources/js/pages/auth/register.tsx
View File

@@ -14,7 +14,7 @@ interface RegisterProps {
privacyHtml?: string;
}
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
const [privacyOpen, setPrivacyOpen] = useState(false);

48
resources/js/pages/legal/Datenschutz.tsx
View File

@@ -1,39 +1,39 @@
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import MarketingLayout from '@/layouts/MarketingLayout';
import { Head, Link } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
const Datenschutz: React.FC = () => {
const { props } = usePage();
const { __ } = props as any; // Für i18n
const { t } = useTranslation('legal');
const { localizedPath } = useLocalizedRoutes();
return (
<MarketingLayout title={__('legal.datenschutz_title')}>
<Head title={__('legal.datenschutz_title')} />
<MarketingLayout title={t('datenschutz_title')}>
<Head title={t('datenschutz_title')} />
<div className="container mx-auto px-4 py-8">
<h1 className="text-2xl font-bold mb-4 font-display">{__('legal.datenschutz')}</h1>
<p className="mb-4 font-sans-marketing">{__('legal.datenschutz_intro')}</p>
<p className="mb-4 font-sans-marketing">{__('legal.responsible')}</p>
<p className="mb-4 font-sans-marketing">{__('legal.data_collection')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{__('legal.payments')}</h2>
<h1 className="text-2xl font-bold mb-4 font-display">{t('datenschutz')}</h1>
<p className="mb-4 font-sans-marketing">{t('datenschutz_intro')}</p>
<p className="mb-4 font-sans-marketing">{t('responsible')}</p>
<p className="mb-4 font-sans-marketing">{t('data_collection')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{t('payments')}</h2>
<p className="mb-4 font-sans-marketing">
{__('legal.payments_desc')} <a href="https://stripe.com/de/privacy" target="_blank" rel="noopener noreferrer">{__('legal.stripe_privacy')}</a> {__('legal.and')} <a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" target="_blank" rel="noopener noreferrer">{__('legal.paypal_privacy')}</a>.
{t('payments_desc')} <a href="https://stripe.com/de/privacy" target="_blank" rel="noopener noreferrer">{t('stripe_privacy')}</a> {t('and')} <a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" target="_blank" rel="noopener noreferrer">{t('paypal_privacy')}</a>.
</p>
<p className="mb-4 font-sans-marketing">{__('legal.data_retention')}</p>
<p className="mb-4 font-sans-marketing">{t('data_retention')}</p>
<p className="mb-4 font-sans-marketing">
{__('legal.rights')} <Link href={localizedPath('/kontakt')}>{__('legal.contact')}</Link>.
{t('rights')} <Link href={localizedPath('/kontakt')}>{t('contact')}</Link>.
</p>
<p className="mb-4 font-sans-marketing">{__('legal.cookies')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{__('legal.personal_data')}</h2>
<p className="mb-4 font-sans-marketing">{__('legal.personal_data_desc')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{__('legal.account_deletion')}</h2>
<p className="mb-4 font-sans-marketing">{__('legal.account_deletion_desc')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{__('legal.data_security')}</h2>
<p className="mb-4 font-sans-marketing">{__('legal.data_security_desc')}</p>
<p className="mb-4 font-sans-marketing">{t('cookies')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{t('personal_data')}</h2>
<p className="mb-4 font-sans-marketing">{t('personal_data_desc')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{t('account_deletion')}</h2>
<p className="mb-4 font-sans-marketing">{t('account_deletion_desc')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{t('data_security')}</h2>
<p className="mb-4 font-sans-marketing">{t('data_security_desc')}</p>
</div>
</MarketingLayout>
);

35
resources/js/pages/legal/Impressum.tsx
View File

@@ -1,29 +1,30 @@
import React from 'react';
import { Head, Link } from '@inertiajs/react';
import MarketingLayout from '@/layouts/MarketingLayout';
import { usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
const Impressum: React.FC = () => {
const { props } = usePage();
const { __ } = props as any; // Für i18n
const { t } = useTranslation('legal');
const { localizedPath } = useLocalizedRoutes();
return (
<MarketingLayout title={__('legal.impressum_title')}>
<Head title={__('legal.impressum_title')} />
<MarketingLayout title={t('impressum_title')}>
<Head title={t('impressum_title')} />
<div className="container mx-auto px-4 py-8">
<h1 className="text-2xl font-bold mb-4 font-display">{__('legal.impressum')}</h1>
<p className="mb-4 font-sans-marketing">{__('legal.impressum_section')}</p>
<h1 className="text-2xl font-bold mb-4 font-display">{t('impressum')}</h1>
<p className="mb-4 font-sans-marketing">{t('impressum_section')}</p>
<p className="mb-4 font-sans-marketing">
{__('legal.company')}<br />
{__('legal.address')}<br />
{__('legal.representative')}<br />
{__('legal.contact')}: <Link href={route('kontakt')}>{__('legal.contact')}</Link>
{t('company')}<br />
{t('address')}<br />
{t('representative')}<br />
{t('contact')}: <Link href={localizedPath('/kontakt')}>{t('contact')}</Link>
</p>
<p className="mb-4 font-sans-marketing">{__('legal.vat_id')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{__('legal.monetization')}</h2>
<p className="mb-4 font-sans-marketing">{__('legal.monetization_desc')}</p>
<p className="mb-4 font-sans-marketing">{__('legal.register_court')}</p>
<p className="mb-4 font-sans-marketing">{__('legal.commercial_register')}</p>
<p className="mb-4 font-sans-marketing">{t('vat_id')}</p>
<h2 className="text-xl font-semibold mb-2 font-display">{t('monetization')}</h2>
<p className="mb-4 font-sans-marketing">{t('monetization_desc')}</p>
<p className="mb-4 font-sans-marketing">{t('register_court')}</p>
<p className="mb-4 font-sans-marketing">{t('commercial_register')}</p>
</div>
</MarketingLayout>
);

2
resources/js/pages/marketing/Blog.tsx
View File

@@ -2,7 +2,7 @@
import { Head, Link } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
interface Props {
posts: {

2
resources/js/pages/marketing/BlogShow.tsx
View File

@@ -2,7 +2,7 @@
import { Head, Link } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
interface Props {
post: {

2
resources/js/pages/marketing/CheckoutWizardPage.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import { Head, usePage } from "@inertiajs/react";
import MarketingLayout from "@/layouts/marketing/MarketingLayout";
import MarketingLayout from "@/layouts/mainWebsite";
import type { CheckoutPackage } from "./checkout/types";
import { CheckoutWizard } from "./checkout/CheckoutWizard";
import { Button } from "@/components/ui/button";

4
resources/js/pages/marketing/Home.tsx
View File

@@ -2,7 +2,7 @@
import { Head, Link, useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
interface Package {
id: number;
@@ -124,7 +124,7 @@ const Home: React.FC<Props> = ({ packages }) => {
<div key={pkg.id} className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md text-center">
<h3 className="text-2xl font-bold mb-2">{pkg.name}</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">{pkg.description}</p>
<p className="text-3xl font-bold text-[#FFB6C1]">{pkg.price} {t('common.currency.euro')}</p>
<p className="text-3xl font-bold text-[#FFB6C1]">{pkg.price} {t('currency.euro')}</p>
<Link href={`${localizedPath('/register')}?package_id=${pkg.id}`} className="mt-4 inline-block bg-[#FFB6C1] text-white px-6 py-2 rounded-full hover:bg-pink-600">
{t('home.view_details')}
</Link>

2
resources/js/pages/marketing/Kontakt.tsx
View File

@@ -2,7 +2,7 @@
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
const Kontakt: React.FC = () => {
const { data, setData, post, processing, errors, reset } = useForm({

2
resources/js/pages/marketing/Occasions.tsx
View File

@@ -2,7 +2,7 @@
import { Head, Link } from '@inertiajs/react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
interface OccasionsProps {
type: string;

6
resources/js/pages/marketing/Packages.tsx
View File

@@ -9,7 +9,7 @@ import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
import { ArrowRight, ShoppingCart, Check, X, Users, Image, Calendar, Shield, Star } from 'lucide-react';
interface Package {
@@ -204,7 +204,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('common.currency.euro')}`}</p>
<p>{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('currency.euro')}`}</p>
</div>
))}
</div>
@@ -281,7 +281,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
<TableCell className="font-semibold">{t('packages.price')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('common.currency.euro')}`}
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('currency.euro')}`}
</TableCell>
))}
</TableRow>

48
resources/js/pages/marketing/PaymentForm.tsx
View File

@@ -1,48 +0,0 @@
import React from 'react';
import { useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Alert, AlertDescription } from '@/components/ui/alert';
interface PaymentFormProps {
packageId: number;
packagePrice: number; // Add price as prop
onSuccess?: () => void;
}
export default function PaymentForm({ packageId, packagePrice, onSuccess }: PaymentFormProps) {
const { t } = useTranslation('marketing');
const { data, setData, post, processing, errors, setError } = useForm({
package_id: packageId,
payment: '', // For error messages
});
const handlePaymentSubmit = (e: React.FormEvent) => {
e.preventDefault();
setError('payment', t('payment.coming_soon') || 'Zahlungssystem wird bald verfügbar sein. Kontaktieren Sie uns für weitere Details.');
};
return (
<Card>
<CardHeader>
<CardTitle>{t('payment.title')}</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<form onSubmit={handlePaymentSubmit} className="space-y-4">
<div className="text-center text-sm text-muted-foreground">
{t('payment.placeholder') || 'Das Zahlungssystem wird bald eingerichtet. Bitte kontaktieren Sie uns für den Kauf des Pakets.'}
</div>
<Alert>
<AlertDescription>
{t('payment.contact_us') || 'Kontaktieren Sie uns unter support@fotospiel.de für den Kauf.'}
</AlertDescription>
</Alert>
<Button type="submit" className="w-full" disabled={processing}>
{processing ? 'Wird verarbeitet...' : t('payment.contact') || 'Kontaktieren'}
</Button>
</form>
</CardContent>
</Card>
);
}

2
resources/js/pages/marketing/Success.tsx
View File

@@ -2,7 +2,7 @@
import { usePage, router } from '@inertiajs/react';
import { Head } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import MarketingLayout from '@/layouts/mainWebsite';
import { Loader } from 'lucide-react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';

43
resources/js/pages/marketing/SuccessStep.tsx
View File

@@ -1,43 +0,0 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { CheckCircle } from 'lucide-react';
import { router } from '@inertiajs/react';
interface Package {
id: number;
name: string;
description: string;
price: number;
}
interface SuccessStepProps {
package: Package;
}
export default function SuccessStep({ package: pkg }: SuccessStepProps) {
const { t } = useTranslation('marketing');
const handleDashboard = () => {
router.visit('/admin');
};
return (
<Card>
<CardHeader className="text-center">
<CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
<CardTitle className="text-2xl">{t('success.title')}</CardTitle>
</CardHeader>
<CardContent className="space-y-4 text-center">
<p>{t('success.message', { package: pkg.name })}</p>
<p className="text-lg font-semibold">
{pkg.price === 0 ? t('success.free_assigned') : t('success.paid_assigned')}
</p>
<Button onClick={handleDashboard} className="w-full">
{t('success.go_to_dashboard')}
</Button>
</CardContent>
</Card>
);
}