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

feat(i18n): Complete localization of marketing frontend with react-i18next, prefixed URLs, JSON migrations, and automation

Browse Source
This commit is contained in:
Codex Agent
2025-10-03 13:05:13 +02:00
parent 1845d83583
commit 60f8de9162
46 changed files with 3454 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/js/app.tsx
View File

@@ -4,16 +4,32 @@ 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 { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
createInertiaApp({
title: (title) => title ? `${title} - ${appName}` : appName,
resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
resolve: (name) => resolvePageComponent(
`./Pages/${name}.tsx`,
import.meta.glob('./Pages/**/*.tsx')
).then((page) => {
if (page) {
const PageComponent = (page as any).default;
return (props: any) => <AppLayout><PageComponent {...props} /></AppLayout>;
}
return null;
}),
setup({ el, App, props }) {
const root = createRoot(el);
root.render(<App {...props} />);
root.render(
<I18nextProvider i18n={i18n}>
<App {...props} />
</I18nextProvider>
);
},
progress: {
color: '#4B5563',

23
resources/js/components/Layout/AppLayout.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import Header from './Header';
interface AppLayoutProps {
children: React.ReactNode;
header?: React.ReactNode;
footer?: React.ReactNode;
}
const AppLayout: React.FC<AppLayoutProps> = ({ children, header, footer }) => {
const { auth } = usePage().props;
return (
<div className="min-h-screen bg-background text-foreground">
{header || <Header />}
<main>{children}</main>
{footer}
</div>
);
};
export default AppLayout;

153
resources/js/components/Layout/Header.tsx Normal file
View File

@@ -0,0 +1,153 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import { Link, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { useAppearance } from '@/hooks/use-appearance';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Sun, Moon } from 'lucide-react';
import { cn } from '@/lib/utils';
const Header: React.FC = () => {
const { auth, locale } = usePage().props as any;
const { t } = useTranslation('auth');
const { appearance, updateAppearance } = useAppearance();
const toggleTheme = () => {
const newAppearance = appearance === 'dark' ? 'light' : 'dark';
updateAppearance(newAppearance);
};
const handleLanguageChange = (value: string) => {
router.visit(`/${value}`, { preserveState: true, replace: true });
};
const handleLogout = () => {
router.post(`/${locale}/logout`);
};
return (
<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={`/${locale}`} className="text-2xl font-bold text-gray-800 dark:text-gray-200">
Fotospiel
</Link>
<nav className="flex space-x-8">
<Link href={`/${locale}`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Home
</Link>
<Link href={`/${locale}/packages`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Pakete
</Link>
<Link href={`/${locale}/blog`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Blog
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Anlässe
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem asChild>
<Link href={`/${locale}/anlaesse/hochzeit`}>
Hochzeit
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={`/${locale}/anlaesse/geburtstag`}>
Geburtstag
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href={`/${locale}/anlaesse/firmenevent`}>
Firmenevent
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link href={`/${locale}/kontakt`} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
Kontakt
</Link>
</nav>
<div className="flex items-center space-x-4">
<Button
variant="ghost"
size="icon"
onClick={toggleTheme}
className="h-8 w-8"
>
<Sun className={cn("h-4 w-4", appearance === "dark" && "hidden")} />
<Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
<span className="sr-only">Theme Toggle</span>
</Button>
<Select value={locale} onValueChange={handleLanguageChange}>
<SelectTrigger className="w-[70px] h-8">
<SelectValue placeholder="DE" />
</SelectTrigger>
<SelectContent>
<SelectItem value="de">DE</SelectItem>
<SelectItem value="en">EN</SelectItem>
</SelectContent>
</Select>
{auth.user ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
<Avatar className="h-8 w-8">
<AvatarImage src={auth.user.avatar} alt={auth.user.name} />
<AvatarFallback>{auth.user.name.charAt(0)}</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{auth.user.name}</p>
<p className="text-xs leading-none text-muted-foreground">{auth.user.email}</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">
Profil
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/profile/orders">
Bestellungen
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleLogout}>
Abmelden
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
) : (
<>
<Link
href={`/${locale}/login`}
className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
>
{t('header.login')}
</Link>
<Link
href={`/${locale}/register`}
className="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
>
{t('header.register')}
</Link>
</>
)}
</div>
</div>
</div>
</header>
);
};
export default Header;

27
resources/js/components/ui/switch.tsx Normal file
View File

@@ -0,0 +1,27 @@
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "@/lib/utils"
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch }

68
resources/js/hooks/use-appearance.ts Normal file
View File

@@ -0,0 +1,68 @@
import { useEffect, useState } from 'react';
type Appearance = 'light' | 'dark' | 'system';
export function useAppearance(): { appearance: Appearance; updateAppearance: (mode: Appearance) => void } {
const [appearance, setAppearance] = useState<Appearance>('system');
useEffect(() => {
const stored = localStorage.getItem('theme') as Appearance | null;
if (stored) {
setAppearance(stored);
} else {
setAppearance('system');
}
}, []);
const updateAppearance = (mode: Appearance) => {
setAppearance(mode);
localStorage.setItem('theme', mode);
if (mode === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
useEffect(() => {
if (appearance === 'system') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
const listener = (e: MediaQueryListEvent) => {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
};
mediaQuery.addEventListener('change', listener);
return () => mediaQuery.removeEventListener('change', listener);
} else if (appearance === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [appearance]);
return { appearance, updateAppearance };
}
export function initializeTheme() {
const stored = localStorage.getItem('theme') as Appearance | null;
if (stored) {
if (stored === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
} else {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
if (mediaQuery.matches) {
document.documentElement.classList.add('dark');
}
}
}

29
resources/js/i18n.js Normal file
View File

@@ -0,0 +1,29 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'de',
debug: process.env.NODE_ENV === 'development',
interpolation: {
escapeValue: false,
},
backend: {
loadPath: '/lang/{{lng}}/{{ns}}.json',
},
ns: ['marketing', 'auth'],
defaultNS: 'marketing',
supportedLngs: ['de', 'en'],
detection: {
order: ['path', 'cookie', 'localStorage', 'htmlTag', 'subdomain'],
lookupFromPathIndex: 0,
caches: ['cookie'],
},
});
export default i18n;

79
resources/js/layouts/marketing/MarketingLayout.tsx
View File

@@ -1,45 +1,66 @@
import React, { ReactNode } from 'react';
import { Head } from '@inertiajs/react';
import MarketingHeader from '@/components/marketing/MarketingHeader';
import MarketingFooter from '@/components/marketing/MarketingFooter';
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
interface MarketingLayoutProps {
children: ReactNode;
children: React.ReactNode;
title?: string;
description?: string;
}
const MarketingLayout: React.FC<MarketingLayoutProps> = ({
children,
title = 'Fotospiel - Event-Fotos einfach und sicher mit QR-Codes',
description = 'Sammle Gastfotos für Events mit QR-Codes und unserer PWA-Plattform. Für Hochzeiten, Firmenevents und mehr. Kostenloser Einstieg.'
}) => {
const MarketingLayout: React.FC<MarketingLayoutProps> = ({ children, title }) => {
const { t } = useTranslation('marketing');
const { url } = usePage();
const { translations } = usePage().props as any;
const marketing = translations?.marketing || {};
const getString = (key: string, fallback: string) => {
const value = marketing[key];
return typeof value === 'string' ? value : fallback;
};
const currentLocale = url.startsWith('/en/') ? 'en' : 'de';
const alternateLocale = currentLocale === 'de' ? 'en' : 'de';
const path = url.replace(/^\/(de|en)?/, '');
const canonicalUrl = `https://fotospiel.app/${currentLocale}${path}`;
const alternateUrl = `https://fotospiel.app/${alternateLocale}${path}`;
return (
<>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<style>{`
@keyframes aurora {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.bg-aurora {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: aurora 15s ease infinite;
}
`}</style>
<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} />
<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/de" />
</Head>
<div className="bg-gray-50 text-gray-900 min-h-screen flex flex-col font-sans antialiased">
<MarketingHeader />
<main className="flex-grow">
<div className="min-h-screen bg-white">
<main>
{children}
</main>
<MarketingFooter />
<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', getString('nav.privacy', 'Datenschutz'))}
</Link>
<Link href="/impressum" className="hover:underline">
{t('nav.impressum', getString('nav.impressum', 'Impressum'))}
</Link>
<Link href="/kontakt" className="hover:underline">
{t('nav.contact', getString('nav.contact', 'Kontakt'))}
</Link>
</div>
</div>
</footer>
</div>
</>
);
};
export default MarketingLayout;
export default MarketingLayout;

45
resources/js/pages/Profile/Account.tsx Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { useForm } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
const ProfileAccount = () => {
const { data, setData, post, processing, errors } = useForm({
name: '',
email: '',
});
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
post('/profile/account');
};
return (
<div className="container mx-auto py-8">
<Card>
<CardHeader>
<CardTitle>Account bearbeiten</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<Label htmlFor="name">Name</Label>
<Input id="name" value={data.name} onChange={(e) => setData('name', e.target.value)} />
{errors.name && <p className="text-red-500 text-sm">{errors.name}</p>}
</div>
<div>
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" value={data.email} onChange={(e) => setData('email', e.target.value)} />
{errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
</div>
<Button type="submit" disabled={processing}>Speichern</Button>
</form>
</CardContent>
</Card>
</div>
);
};
export default ProfileAccount;

38
resources/js/pages/Profile/Index.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import Account from './Account';
import Orders from './Orders';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
const ProfileIndex = () => {
const { user } = usePage().props as any;
return (
<div className="container mx-auto py-8 space-y-6">
<Card>
<CardHeader>
<CardTitle>Mein Profil</CardTitle>
</CardHeader>
<CardContent>
<p>Hallo, {user.name}!</p>
<p>Email: {user.email}</p>
</CardContent>
</Card>
<Tabs defaultValue="account" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="orders">Bestellungen</TabsTrigger>
</TabsList>
<TabsContent value="account">
<Account />
</TabsContent>
<TabsContent value="orders">
<Orders />
</TabsContent>
</Tabs>
</div>
);
};
export default ProfileIndex;

61
resources/js/pages/Profile/Orders.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import { usePage } from '@inertiajs/react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { format } from 'date-fns';
interface Purchase {
id: number;
created_at: string;
package: {
name: string;
price: number;
};
status: string;
}
const ProfileOrders = () => {
const { purchases } = usePage().props as any;
return (
<div className="container mx-auto py-8">
<Card>
<CardHeader>
<CardTitle>Bestellungen</CardTitle>
</CardHeader>
<CardContent>
<Table>
<TableHeader>
<TableRow>
<TableHead>Paket</TableHead>
<TableHead>Preis</TableHead>
<TableHead>Datum</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{purchases.map((purchase) => (
<TableRow key={purchase.id}>
<TableCell>{purchase.package.name}</TableCell>
<TableCell>{purchase.package.price} €</TableCell>
<TableCell>{format(new Date(purchase.created_at), 'dd.MM.yyyy')}</TableCell>
<TableCell>
<Badge variant={purchase.status === 'completed' ? 'default' : 'secondary'}>
{purchase.status}
</Badge>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
{purchases.length === 0 && (
<p className="text-center text-muted-foreground py-8">Keine Bestellungen gefunden.</p>
)}
</CardContent>
</Card>
</div>
);
};
export default ProfileOrders;

24
resources/js/pages/auth/login.tsx
View File

@@ -1,5 +1,6 @@
import { FormEvent, useEffect, useState } from 'react';
import { Head, useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import InputError from '@/components/input-error';
import TextLink from '@/components/text-link';
import { Button } from '@/components/ui/button';
@@ -18,6 +19,7 @@ interface LoginProps {
export default function Login({ status, canResetPassword }: LoginProps) {
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const { t } = useTranslation('auth');
const { data, setData, post, processing, errors, clearErrors } = useForm({
email: '',
@@ -52,13 +54,13 @@ export default function Login({ status, canResetPassword }: LoginProps) {
}, [errors, hasTriedSubmit]);
return (
<AuthLayout title="Log in to your account" description="Enter your email and password below to log in">
<Head title="Log in" />
<AuthLayout title={t('login.title')} description={t('login.description')}>
<Head title={t('login.title')} />
<form onSubmit={submit} className="flex flex-col gap-6">
<div className="grid gap-6">
<div className="grid gap-2">
<Label htmlFor="email">Email address</Label>
<Label htmlFor="email">{t('login.email')}</Label>
<Input
id="email"
type="email"
@@ -67,7 +69,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
autoFocus
tabIndex={1}
autoComplete="email"
placeholder="email@example.com"
placeholder={t('login.email_placeholder')}
value={data.email}
onChange={(e) => {
setData('email', e.target.value);
@@ -81,10 +83,10 @@ export default function Login({ status, canResetPassword }: LoginProps) {
<div className="grid gap-2">
<div className="flex items-center">
<Label htmlFor="password">Password</Label>
<Label htmlFor="password">{t('login.password')}</Label>
{canResetPassword && (
<TextLink href={request()} className="ml-auto text-sm" tabIndex={5}>
Forgot password?
{t('login.forgot')}
</TextLink>
)}
</div>
@@ -95,7 +97,7 @@ export default function Login({ status, canResetPassword }: LoginProps) {
required
tabIndex={2}
autoComplete="current-password"
placeholder="Password"
placeholder={t('login.password_placeholder')}
value={data.password}
onChange={(e) => {
setData('password', e.target.value);
@@ -115,19 +117,19 @@ export default function Login({ status, canResetPassword }: LoginProps) {
checked={data.remember}
onCheckedChange={(checked) => setData('remember', Boolean(checked))}
/>
<Label htmlFor="remember">Remember me</Label>
<Label htmlFor="remember">{t('login.remember')}</Label>
</div>
<Button type="submit" className="mt-4 w-full" tabIndex={4} disabled={processing}>
{processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
Log in
{t('login.submit')}
</Button>
</div>
<div className="text-center text-sm text-muted-foreground">
Don't have an account?{' '}
{t('login.no_account')}{' '}
<TextLink href={register()} tabIndex={5}>
Sign up
{t('login.sign_up')}
</TextLink>
</div>
</form>

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

@@ -1,5 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';
@@ -18,6 +19,7 @@ import MarketingLayout from '@/layouts/marketing/MarketingLayout';
export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
const [privacyOpen, setPrivacyOpen] = useState(false);
const [hasTriedSubmit, setHasTriedSubmit] = useState(false);
const { t } = useTranslation('auth');
const { data, setData, post, processing, errors, clearErrors } = useForm({
username: '',
@@ -60,23 +62,23 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}, [errors, hasTriedSubmit]);
return (
<MarketingLayout title="Registrieren">
<MarketingLayout title={t('register.title')}>
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-4xl w-full space-y-8">
<div className="bg-white rounded-lg shadow-md p-8">
<div>
<h2 className="mt-6 text-center text-3xl font-bold text-gray-900 font-display">
Willkommen bei Fotospiel – Erstellen Sie Ihren Account
{t('register.welcome')}
</h2>
<p className="mt-4 text-center text-gray-600 font-sans-marketing">
Registrierung ermöglicht Zugriff auf Events, Galerien und personalisierte Features.
{t('register.description')}
</p>
{initialPackage && (
<div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
<h3 className="text-lg font-semibold text-blue-900 mb-2">{initialPackage.name}</h3>
<p className="text-blue-800 mb-2">{initialPackage.description}</p>
<p className="text-sm text-blue-700">
{initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}
{initialPackage.price === 0 ? t('register.package_price_free') : t('register.package_price', { price: initialPackage.price })}
</p>
</div>
)}
@@ -85,7 +87,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="md:col-span-1">
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
Vorname *
{t('register.first_name')} *
</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -102,7 +104,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Vorname"
placeholder={t('register.first_name_placeholder')}
/>
</div>
{errors.first_name && <p key={`error-first_name`} className="text-sm text-red-600 mt-1">{errors.first_name}</p>}
@@ -110,7 +112,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-1">
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
Nachname *
{t('register.last_name')} *
</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -127,7 +129,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Nachname"
placeholder={t('register.last_name_placeholder')}
/>
</div>
{errors.last_name && <p key={`error-last_name`} className="text-sm text-red-600 mt-1">{errors.last_name}</p>}
@@ -135,7 +137,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-2">
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
E-Mail-Adresse *
{t('register.email')} *
</label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -152,7 +154,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
placeholder="email@example.com"
placeholder={t('register.email_placeholder')}
/>
</div>
{errors.email && <p key={`error-email`} className="text-sm text-red-600 mt-1">{errors.email}</p>}
@@ -160,7 +162,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-2">
<label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
Adresse *
{t('register.address')} *
</label>
<div className="relative">
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -177,7 +179,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Adresse"
placeholder={t('register.address_placeholder')}
/>
</div>
{errors.address && <p key={`error-address`} className="text-sm text-red-600 mt-1">{errors.address}</p>}
@@ -185,7 +187,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-1">
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
Telefon *
{t('register.phone')} *
</label>
<div className="relative">
<Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -202,7 +204,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Telefonnummer"
placeholder={t('register.phone_placeholder')}
/>
</div>
{errors.phone && <p key={`error-phone`} className="text-sm text-red-600 mt-1">{errors.phone}</p>}
@@ -210,7 +212,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-1">
<label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
Benutzername *
{t('register.username')} *
</label>
<div className="relative">
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -227,7 +229,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Benutzername"
placeholder={t('register.username_placeholder')}
/>
</div>
{errors.username && <p key={`error-username`} className="text-sm text-red-600 mt-1">{errors.username}</p>}
@@ -235,7 +237,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-1">
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
Passwort *
{t('register.password')} *
</label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -255,7 +257,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Passwort"
placeholder={t('register.password_placeholder')}
/>
</div>
{errors.password && <p key={`error-password`} className="text-sm text-red-600 mt-1">{errors.password}</p>}
@@ -263,7 +265,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
<div className="md:col-span-1">
<label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 mb-1">
Passwort bestätigen *
{t('register.confirm_password')} *
</label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
@@ -283,7 +285,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
}
}}
className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
placeholder="Passwort bestätigen"
placeholder={t('register.confirm_password_placeholder')}
/>
</div>
{errors.password_confirmation && <p key={`error-password_confirmation`} className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
@@ -305,15 +307,14 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
/>
<label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
Ich stimme der{' '}
{t('register.privacy_consent')}{' '}
<button
type="button"
onClick={() => setPrivacyOpen(true)}
className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
>
Datenschutzerklärung
</button>{' '}
zu.
{t('register.privacy_policy')}
</button>.
</label>
{errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
</div>
@@ -321,7 +322,7 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
{Object.keys(errors).length > 0 && (
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="p-4 bg-red-50 border border-red-200 rounded-md mb-6">
<h4 className="text-sm font-medium text-red-800 mb-2">Fehler bei der Registrierung:</h4>
<h4 className="text-sm font-medium text-red-800 mb-2">{t('register.errors_title')}</h4>
<ul className="text-sm text-red-800 space-y-1">
{Object.entries(errors).map(([key, value]) => (
<li key={key} className="flex items-start">
@@ -338,14 +339,14 @@ export default function Register({ package: initialPackage, privacyHtml }: Regis
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
>
{processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
Account erstellen
{t('register.submit')}
</button>
<div className="text-center">
<p className="text-sm text-gray-600">
Bereits registriert?{' '}
{t('register.has_account')}{' '}
<a href="/login" className="font-medium text-[#FFB6C1] hover:text-[#FF69B4]">
Anmelden
{t('register.login')}
</a>
</p>
</div>

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

@@ -1,5 +1,6 @@
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
@@ -13,6 +14,7 @@ interface Props {
const Blog: React.FC<Props> = ({ posts }) => {
const { url } = usePage();
const { t } = useTranslation('marketing');
const renderPagination = () => {
if (!posts.links || posts.links.length <= 3) return null;
@@ -37,28 +39,28 @@ const Blog: React.FC<Props> = ({ posts }) => {
};
return (
<MarketingLayout title="Blog - Fotospiel">
<Head title="Blog - Fotospiel" />
<MarketingLayout title={t('blog.title')}>
<Head title={t('blog.title')} />
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unser Blog</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Tipps, Tricks und Inspiration für perfekte Event-Fotos.</p>
<Link href="#posts" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
Zum Blog
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('blog.hero_title')}</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('blog.hero_description')}</p>
<Link href="#posts" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
{t('blog.hero_cta')}
</Link>
</div>
</section>
{/* Posts Section */}
<section id="posts" className="py-20 px-4 bg-white">
<section id="posts" className="py-20 px-4 bg-white dark:bg-gray-900">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Neueste Beiträge</h2>
<h2 className="text-3xl font-bold text-center mb-12 font-display text-gray-900 dark:text-gray-100">{t('blog.posts_title')}</h2>
{posts.data.length > 0 ? (
<>
<div className="grid md:grid-cols-2 gap-8">
{posts.data.map((post) => (
<div key={post.id} className="bg-gray-50 p-6 rounded-lg">
<div key={post.id} className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg">
{post.featured_image && (
<img
src={post.featured_image}
@@ -66,20 +68,20 @@ const Blog: React.FC<Props> = ({ posts }) => {
className="w-full h-48 object-cover rounded mb-4"
/>
)}
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">
<h3 className="text-xl font-semibold mb-2 font-sans-marketing text-gray-900 dark:text-gray-100">
<Link href={`/blog/${post.slug}`} className="hover:text-[#FFB6C1]">
{post.title}
</Link>
</h3>
<p className="mb-4 text-gray-700 font-serif-custom">{post.excerpt}</p>
<p className="text-sm text-gray-500 mb-4 font-sans-marketing">
Veröffentlicht am {post.published_at}
<p className="mb-4 text-gray-700 dark:text-gray-300 font-serif-custom">{post.excerpt}</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mb-4 font-sans-marketing">
{t('blog.by')} {post.author?.name || t('blog.team')} | {t('blog.published_at')} {post.published_at}
</p>
<Link
href={`/blog/${post.slug}`}
className="text-[#FFB6C1] font-semibold font-sans-marketing hover:underline"
>
Weiterlesen
{t('blog.read_more')}
</Link>
</div>
))}
@@ -87,7 +89,7 @@ const Blog: React.FC<Props> = ({ posts }) => {
{renderPagination()}
</>
) : (
<p className="text-center text-gray-600 font-serif-custom">Keine Beiträge verfügbar.</p>
<p className="text-center text-gray-600 dark:text-gray-400 font-serif-custom">{t('blog.empty')}</p>
)}
</div>
</section>

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

@@ -1,5 +1,6 @@
import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
@@ -16,15 +17,17 @@ interface Props {
}
const BlogShow: React.FC<Props> = ({ post }) => {
const { t } = useTranslation('blog_show');
return (
<MarketingLayout title={`${post.title} - Fotospiel Blog`}>
<Head title={`${post.title} - Fotospiel Blog`} />
<MarketingLayout title={`${post.title} ${t('title_suffix')}`}>
<Head title={`${post.title} ${t('title_suffix')}`} />
{/* Hero Section */}
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
<p className="text-lg mb-8">
Von {post.author?.name || 'Dem Fotospiel Team'} | {new Date(post.published_at).toLocaleDateString('de-DE')}
{t('by_author')} {post.author?.name || t('team')} | {t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE')}
</p>
{post.featured_image && (
<img
@@ -50,7 +53,7 @@ const BlogShow: React.FC<Props> = ({ post }) => {
href="/blog"
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
>
Zurück zum Blog
{t('back_to_blog')}
</Link>
</div>
</section>

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

@@ -1,13 +1,21 @@
import React from 'react';
import { Head, Link, useForm } from '@inertiajs/react';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import { Package } from '@/types'; // Annahme: Typ für Package
interface Package {
id: number;
name: string;
description: string;
price: number;
}
interface Props {
packages: Package[];
}
const Home: React.FC<Props> = ({ packages }) => {
const { t } = useTranslation('marketing');
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
email: '',
@@ -21,237 +29,203 @@ const Home: React.FC<Props> = ({ packages }) => {
});
};
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [errors]);
return (
<MarketingLayout title="Home - Fotospiel">
<Head title="Fotospiel - Event-Fotos einfach und sicher mit QR-Codes" />
<MarketingLayout title={t('home.title')}>
<Head title={t('home.hero_title')} />
{/* Hero Section */}
<section id="hero" className="bg-aurora-enhanced text-white py-20 px-4">
<section id="hero" className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
<div className="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
<div className="md:w-1/2 text-center md:text-left">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Fotospiel</h1>
<p className="text-xl md:text-2xl mb-8 font-sans-marketing">Sammle Gastfotos für Events mit QR-Codes. Unsere sichere PWA-Plattform für Gäste und Organisatoren – einfach, mobil und datenschutzkonform. Besser als Konkurrenz, geliebt von Tausenden.</p>
<Link href="/packages" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition font-sans-marketing">
Jetzt starten – Kostenlos
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('home.hero_title')}</h1>
<p className="text-xl md:text-2xl mb-8 font-sans-marketing">{t('home.hero_description')}</p>
<Link
href="/packages"
className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-bold hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-300 inline-block"
>
{t('home.cta_explore')}
</Link>
</div>
<div className="md:w-1/2">
<img
src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop"
alt="Event-Fotos mit QR"
className="rounded-lg shadow-lg w-full"
style={{ filter: 'drop-shadow(0 10px 8px rgba(0,0,0,0.1))' }}
src="/images/hero-image.jpg"
alt={t('home.hero_image_alt')}
className="w-full h-auto rounded-lg shadow-lg"
/>
</div>
</div>
</section>
{/* How it works Section */}
<section id="how-it-works" className="py-20 px-4 bg-gray-50">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</h2>
<div className="grid md:grid-cols-4 gap-8">
{/* How it Works Section */}
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div className="container mx-auto max-w-6xl">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.how_title')}</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1558618047-3c8d6b4d3b0a?w=300&h=200&fit=crop"
alt="QR-Code generieren"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Event erstellen & QR generieren</h3>
<p className="text-gray-600 font-serif-custom">Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</p>
<div className="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl">1</span>
</div>
<h3 className="text-xl font-semibold mb-2">{t('home.step1_title')}</h3>
<p>{t('home.step1_desc')}</p>
</div>
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=200&fit=crop"
alt="Fotos hochladen"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Fotos hochladen via QR</h3>
<p className="text-gray-600 font-serif-custom">Gäste: QR scannen, PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
<div className="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl">2</span>
</div>
<h3 className="text-xl font-semibold mb-2">{t('home.step2_title')}</h3>
<p>{t('home.step2_desc')}</p>
</div>
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop"
alt="Freigaben & Likes"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Freigaben & Likes</h3>
<p className="text-gray-600 font-serif-custom">Emotions auswählen, Fotos liken, Galerie browsen – alles anonym.</p>
</div>
<div className="text-center">
<img
src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=300&h=200&fit=crop"
alt="Download & Teilen"
className="w-12 h-12 mx-auto mb-4 rounded-full"
/>
<h3 className="font-semibold mb-2 font-sans-marketing">Download & Teilen</h3>
<p className="text-gray-600 font-serif-custom">Freigegebene Fotos herunterladen, Event abschließen und QR archivieren.</p>
<div className="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-2xl">3</span>
</div>
<h3 className="text-xl font-semibold mb-2">{t('home.step3_title')}</h3>
<p>{t('home.step3_desc')}</p>
</div>
</div>
</div>
</section>
{/* Features Section */}
<section id="features" className="py-20 px-4 bg-white">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel mit QR?</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="text-center p-6">
<img
src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop"
alt="Sichere QR-Uploads"
className="w-16 h-16 mx-auto mb-4 rounded-full"
/>
<h3 className="text-xl font-semibold mb-2 font-display">Sichere QR-Uploads</h3>
<p className="text-gray-600 font-serif-custom">GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne PII-Speicherung.</p>
<section className="py-20 px-4 dark:bg-gray-700">
<div className="container mx-auto max-w-6xl">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.features_title')}</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2">{t('home.feature1_title')}</h3>
<p>{t('home.feature1_desc')}</p>
</div>
<div className="text-center p-6">
<img
src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=250&fit=crop"
alt="Mobile PWA & QR"
className="w-16 h-16 mx-auto mb-4 rounded-full"
/>
<h3 className="text-xl font-semibold mb-2 font-display">Mobile PWA & QR</h3>
<p className="text-gray-600 font-serif-custom">Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2">{t('home.feature2_title')}</h3>
<p>{t('home.feature2_desc')}</p>
</div>
<div className="text-center p-6">
<img
src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop"
alt="Schnell & Einfach"
className="w-16 h-16 mx-auto mb-4 rounded-full"
/>
<h3 className="text-xl font-semibold mb-2 font-display">Schnell & Einfach mit QR</h3>
<p className="text-gray-600 font-serif-custom">Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2">{t('home.feature3_title')}</h3>
<p>{t('home.feature3_desc')}</p>
</div>
</div>
</div>
</section>
{/* Packages Teaser Section */}
<section id="pricing" className="py-20 px-4 bg-gray-50">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Packages</h2>
<p className="text-center text-lg text-gray-600 mb-8 font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
{/* Packages Teaser */}
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div className="container mx-auto max-w-6xl">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.packages_title')}</h2>
<div className="grid md:grid-cols-2 gap-8 mb-8">
{packages.slice(0, 2).map((pkg) => (
<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('home.currency.euro')}</p>
<Link href={`/packages/${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>
</div>
))}
</div>
<div className="text-center">
<Link href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition font-sans-marketing">
Alle Packages ansehen
<Link href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-bold hover:bg-pink-600 transition">
{t('home.all_packages')}
</Link>
</div>
</div>
</section>
{/* Contact Section */}
<section id="contact" className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-2xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Kontakt</h2>
<form key={`home-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
<section id="contact" className="py-20 px-4 dark:bg-gray-700">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.contact_title')}</h2>
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium mb-2 font-sans-marketing">Name</label>
<label htmlFor="name" className="block text-sm font-medium mb-2">
{t('home.name_label')}
</label>
<input
type="text"
id="name"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
className="w-full p-3 border rounded-lg"
/>
{errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
{errors.name && <p className="text-red-500 text-sm">{errors.name}</p>}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium mb-2 font-sans-marketing">E-Mail</label>
<label htmlFor="email" className="block text-sm font-medium mb-2">
{t('home.email_label')}
</label>
<input
type="email"
id="email"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
className="w-full p-3 border rounded-lg"
/>
{errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
{errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium mb-2 font-sans-marketing">Nachricht</label>
<label htmlFor="message" className="block text-sm font-medium mb-2">
{t('home.message_label')}
</label>
<textarea
id="message"
rows={4}
value={data.message}
onChange={(e) => setData('message', e.target.value)}
rows={4}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
></textarea>
{errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
className="w-full p-3 border rounded-lg"
/>
{errors.message && <p className="text-red-500 text-sm">{errors.message}</p>}
</div>
<button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
{processing ? 'Sendet...' : 'Senden'}
<button
type="submit"
disabled={processing}
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-bold hover:bg-pink-600 transition disabled:opacity-50"
>
{processing ? t('home.sending') : t('home.send')}
</button>
</form>
{Object.keys(errors).length === 0 && data.message && !processing && (
<p className="mt-4 text-green-600 text-center font-serif-custom">Nachricht gesendet!</p>
)}
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [errors]);
</div>
</section>
{/* Testimonials Section */}
<section className="py-20 px-4 bg-gray-50">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Was unsere Kunden sagen</h2>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div className="bg-white p-6 rounded-lg">
<p className="mb-4 font-serif-custom">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</p>
<p className="font-semibold font-sans-marketing">- Anna & Max</p>
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div className="container mx-auto max-w-6xl">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.testimonials_title')}</h2>
<div className="grid md:grid-cols-3 gap-8">
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<p className="italic mb-4">"{t('home.testimonial1')}"</p>
<p className="font-semibold">- Anna M.</p>
</div>
<div className="bg-white p-6 rounded-lg">
<p className="mb-4 font-serif-custom">"Großes Firmenevent – alle Fotos zentral via QR."</p>
<p className="font-semibold font-sans-marketing">- Team XYZ GmbH</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<p className="italic mb-4">"{t('home.testimonial2')}"</p>
<p className="font-semibold">- Max S.</p>
</div>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<p className="italic mb-4">"{t('home.testimonial3')}"</p>
<p className="font-semibold">- Lisa K.</p>
</div>
</div>
</div>
</section>
{/* FAQ Section */}
<section className="py-20 px-4 bg-white">
<div className="container mx-auto max-w-3xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
<div className="space-y-4">
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold font-display">Ist es kostenlos?</h3>
<p className="font-serif-custom">Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold font-display">Datenschutz?</h3>
<p className="font-serif-custom">100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. Siehe <Link href="/datenschutz" className="text-[#FFB6C1]">Datenschutzerklärung</Link>.</p>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold font-display">Wie funktioniert QR-Sharing?</h3>
<p className="font-serif-custom">Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
</div>
</div>
</div>
</section>
{/* Packages Section (aus aktuellem TSX, angepasst) */}
<section className="py-20 px-4 bg-white">
<section className="py-20 px-4 dark:bg-gray-700">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Pakete</h2>
<div className="grid md:grid-cols-3 gap-8">
{packages.map((pkg) => (
<div key={pkg.id} className="bg-gray-50 p-6 rounded-lg text-center">
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-display">€{pkg.price}</p>
<Link
href={`/marketing/buy/${pkg.id}`}
className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition font-sans-marketing"
>
Kaufen
</Link>
</div>
))}
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.faq_title')}</h2>
<div className="space-y-4">
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
<h3 className="font-semibold">{t('home.faq1_q')}</h3>
<p>{t('home.faq1_a')}</p>
</div>
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
<h3 className="font-semibold">{t('home.faq2_q')}</h3>
<p>{t('home.faq2_a')}</p>
</div>
</div>
</div>
</section>

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

@@ -1,5 +1,6 @@
import React from 'react';
import { Head, Link, useForm, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
const Kontakt: React.FC = () => {
@@ -10,6 +11,7 @@ const Kontakt: React.FC = () => {
});
const { flash } = usePage().props as any;
const { t } = useTranslation('marketing');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -18,72 +20,72 @@ const Kontakt: React.FC = () => {
});
};
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [errors]);
return (
<MarketingLayout title="Kontakt - Fotospiel">
<Head title="Kontakt - Fotospiel" />
<div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<MarketingLayout title={t('kontakt.title')}>
<Head title={t('kontakt.title')} />
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl mx-auto">
<h1 className="text-3xl font-bold text-center mb-8 font-display">Kontakt</h1>
<p className="text-center text-gray-600 mb-8 font-sans-marketing">Haben Sie Fragen? Schreiben Sie uns!</p>
<h1 className="text-3xl font-bold text-center mb-8 font-display text-gray-900 dark:text-gray-100">{t('kontakt.title')}</h1>
<p className="text-center text-gray-600 dark:text-gray-300 mb-8 font-sans-marketing">{t('kontakt.description')}</p>
<form key={`kontakt-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">Name</label>
<input
type="text"
id="name"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.name')}</label>
<input
type="text"
id="name"
value={data.name}
onChange={(e) => setData('name', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>
{errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">E-Mail</label>
<input
type="email"
id="email"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
<label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.email')}</label>
<input
type="email"
id="email"
value={data.email}
onChange={(e) => setData('email', e.target.value)}
required
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
/>
{errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2 font-sans-marketing">Nachricht</label>
<textarea
id="message"
value={data.message}
onChange={(e) => setData('message', e.target.value)}
rows={4}
required
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
<label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 font-sans-marketing">{t('kontakt.message')}</label>
<textarea
id="message"
value={data.message}
onChange={(e) => setData('message', e.target.value)}
rows={4}
required
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
></textarea>
{errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
</div>
<button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
{processing ? 'Sendet...' : 'Senden'}
{processing ? t('kontakt.sending') : t('kontakt.send')}
</button>
</form>
{flash?.success && <p className="mt-4 text-green-600 text-center font-serif-custom">{flash.success}</p>}
{flash?.success && <p className="mt-4 text-green-600 dark:text-green-400 text-center font-serif-custom">{flash.success}</p>}
{Object.keys(errors).length > 0 && (
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="mt-4 p-4 bg-red-100 border border-red-400 rounded-md">
<div key={`general-errors-${Object.keys(errors).join('-')}`} className="mt-4 p-4 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-600 rounded-md">
<ul className="list-disc list-inside">
{Object.values(errors).map((error, index) => (
<li key={`error-${index}`} className="font-serif-custom">{error}</li>
<li key={`error-${index}`} className="font-serif-custom text-red-700 dark:text-red-300">{error}</li>
))}
</ul>
</div>
)}
React.useEffect(() => {
if (Object.keys(errors).length > 0) {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}, [errors]);
<div className="mt-8 text-center">
<Link href="/" className="text-[#FFB6C1] hover:underline font-sans-marketing">Zurück zur Startseite</Link>
<Link href="/" className="text-[#FFB6C1] hover:underline font-sans-marketing">{t('kontakt.back_home')}</Link>
</div>
</div>
</div>

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

@@ -1,83 +1,77 @@
import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { Head, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
interface Props {
interface OccasionsProps {
type: string;
}
const Occasions: React.FC<Props> = ({ type }) => {
const occasions = {
weddings: {
title: 'Hochzeiten',
description: 'Erfangen Sie die magischen Momente Ihrer Hochzeit mit professionellen Fotos.',
features: ['Unbegrenzte Fotos', 'Sofort-Download', 'Privat-Event-Code', 'Emotionen tracken'],
image: '/images/wedding-lights-background.svg' // Platzhalter
const Occasions: React.FC<OccasionsProps> = ({ type }) => {
const { t } = useTranslation('marketing');
const occasionsContent = {
hochzeit: {
title: t('occasions.weddings.title'),
description: t('occasions.weddings.description'),
features: [
t('occasions.weddings.benefit1'),
t('occasions.weddings.benefit2'),
t('occasions.weddings.benefit3'),
t('occasions.weddings.benefit4'),
],
cta: t('occasions.cta'),
},
birthdays: {
title: 'Geburtstage',
description: 'Feiern Sie Geburtstage unvergesslich mit unseren Event-Foto-Lösungen.',
features: ['Schnelle Einrichtung', 'Gäste teilen Fotos', 'Themen-Filter', 'Druck-Optionen'],
image: '/images/birthday-placeholder.jpg'
geburtstag: {
title: t('occasions.birthdays.title'),
description: t('occasions.birthdays.description'),
features: [
t('occasions.birthdays.benefit1'),
t('occasions.birthdays.benefit2'),
t('occasions.birthdays.benefit3'),
t('occasions.birthdays.benefit4'),
],
cta: t('occasions.cta'),
},
'corporate-events': {
title: 'Firmenevents',
description: 'Professionelle Fotos für Teamevents, Konferenzen und Unternehmensfeiern.',
features: ['Branding-Integration', 'Sichere Cloud-Speicher', 'Analytics & Reports', 'Schnelle Bearbeitung'],
image: '/images/corporate-placeholder.jpg'
firmenevent: {
title: t('occasions.corporate.title'),
description: t('occasions.corporate.description'),
features: [
t('occasions.corporate.benefit1'),
t('occasions.corporate.benefit2'),
t('occasions.corporate.benefit3'),
t('occasions.corporate.benefit4'),
],
cta: t('occasions.cta'),
},
'family-celebrations': {
title: 'Familienfeiern',
description: 'Erinnerungen an Taufen, Jubiläen und Familienzusammenkünfte festhalten.',
features: ['Persönliche Alben', 'Gemeinsame Zugriffe', 'Einfache Bedienung', 'Hohe Qualität'],
image: '/images/family-placeholder.jpg'
}
};
const occasion = occasions[type as keyof typeof occasions] || occasions.weddings;
const content = occasionsContent[type as keyof typeof occasionsContent] || occasionsContent.hochzeit;
return (
<MarketingLayout title={`${occasion.title} - Fotospiel`}>
<Head title={`${occasion.title} - Fotospiel`} />
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{occasion.title}</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{occasion.description}</p>
{occasion.image && (
<img
src={occasion.image}
alt={occasion.title}
className="mx-auto rounded-lg shadow-lg max-w-4xl w-full"
/>
)}
</div>
</section>
{/* Features Section */}
<section className="py-20 px-4 bg-white">
<MarketingLayout title={content.title}>
<Head title={content.title} />
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-20 px-4">
<div className="container mx-auto max-w-4xl">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel für {occasion.title}?</h2>
<div className="grid md:grid-cols-2 gap-8">
{occasion.features.map((feature, index) => (
<div key={index} className="bg-gray-50 p-6 rounded-lg flex items-center">
<div className="w-8 h-8 bg-[#FFB6C1] rounded-full flex items-center justify-center mr-4">
<span className="text-white text-sm font-bold font-sans-marketing">✓</span>
<div className="text-center mb-12">
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-6 font-display">{content.title}</h1>
<p className="text-xl text-gray-600 dark:text-gray-300 mb-8 font-sans-marketing">{content.description}</p>
<a href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-bold hover:bg-pink-600 transition">
{content.cta}
</a>
</div>
<div className="grid md:grid-cols-3 gap-8">
{content.features.map((feature, index) => (
<div key={index} className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md text-center">
<div className="w-12 h-12 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
<span className="text-white font-bold">{index + 1}</span>
</div>
<p className="text-gray-700 font-serif-custom">{feature}</p>
<h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-gray-100">{feature}</h3>
</div>
))}
</div>
<div className="text-center mt-12">
<Link
href="/marketing/packages"
className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-[#FF69B4] transition"
>
Passendes Paket wählen
</Link>
</div>
</div>
</section>
</div>
</MarketingLayout>
);
};

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

@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -40,11 +41,12 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
const [currentStep, setCurrentStep] = useState('step1');
const { props } = usePage();
const { auth } = props as any;
const { t } = useTranslation('marketing');
const testimonials = [
{ name: 'Anna M.', text: 'Das Starter-Paket war perfekt für unsere Hochzeit – einfach und günstig!', rating: 5 },
{ name: 'Max B.', text: 'Pro-Paket mit Analytics hat uns geholfen, die besten Momente zu finden.', rating: 5 },
{ name: 'Lisa K.', text: 'Als Reseller spare ich Zeit mit dem M-Paket – super Support!', rating: 5 },
{ name: 'Anna M.', text: t('packages.testimonials.anna'), rating: 5 },
{ name: 'Max B.', text: t('packages.testimonials.max'), rating: 5 },
{ name: 'Lisa K.', text: t('packages.testimonials.lisa'), rating: 5 },
];
const allPackages = [...endcustomerPackages, ...resellerPackages];
@@ -72,21 +74,21 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
};
return (
<MarketingLayout title="Packages">
<MarketingLayout title={t('packages.title')}>
{/* Hero Section */}
<section className="bg-aurora-enhanced text-white py-20 px-4">
<section className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
<div className="container mx-auto text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">Unsere Packages</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
<Link href="#endcustomer" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 transition">
Jetzt entdecken
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('packages.hero_title')}</h1>
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{t('packages.hero_description')}</p>
<Link href="#endcustomer" className="bg-white dark:bg-gray-800 text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-gray-100 dark:hover:bg-gray-700 transition">
{t('packages.cta_explore')}
</Link>
</div>
</section>
<section id="endcustomer" className="py-20 px-4">
<section id="endcustomer" className="py-20 px-4 dark:bg-gray-600">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Für Endkunden</h2>
<h2 className="text-3xl font-bold text-center mb-12 font-display">{t('packages.section_endcustomer')}</h2>
{/* Mobile Carousel for Endcustomer Packages */}
<div className="block md:hidden">
@@ -95,35 +97,35 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
{endcustomerPackages.map((pkg) => (
<CarouselItem key={pkg.id} className="pl-1 basis-full">
<div
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('packages.currency.euro')}`}
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
<li>• {pkg.events} Events</li>
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
<li>• {pkg.events} {t('packages.one_time')}</li>
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
</li>
))}
{pkg.limits?.max_photos && <li>• Max. {pkg.limits.max_photos} Fotos</li>}
{pkg.limits?.gallery_days && <li>• Galerie {pkg.limits.gallery_days} Tage</li>}
{pkg.limits?.max_guests && <li>• Max. {pkg.limits.max_guests} Gäste</li>}
{pkg.watermark_allowed === false && <li><Badge variant="secondary">Kein Watermark</Badge></li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
{pkg.limits?.max_photos && <li>• {t('packages.max_photos')} {pkg.limits.max_photos}</li>}
{pkg.limits?.gallery_days && <li>• {t('packages.gallery_days')} {pkg.limits.gallery_days}</li>}
{pkg.limits?.max_guests && <li>• {t('packages.max_guests')} {pkg.limits.max_guests}</li>}
{pkg.watermark_allowed === false && <li><Badge variant="secondary">{t('packages.no_watermark')}</Badge></li>}
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
{t('packages.view_details')}
</Button>
</div>
</CarouselItem>
@@ -140,35 +142,35 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
{endcustomerPackages.map((pkg) => (
<div
key={pkg.id}
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFB6C1] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-sans-marketing">
{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
{pkg.price === 0 ? t('packages.free') : `${pkg.price} ${t('packages.currency.euro')}`}
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
<li>• {pkg.events} Events</li>
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
<li>• {pkg.events} {t('packages.one_time')}</li>
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
</li>
))}
{pkg.limits?.max_photos && <li>• Max. {pkg.limits.max_photos} Fotos</li>}
{pkg.limits?.gallery_days && <li>• Galerie {pkg.limits.gallery_days} Tage</li>}
{pkg.limits?.max_guests && <li>• Max. {pkg.limits.max_guests} Gäste</li>}
{pkg.watermark_allowed === false && <li><Badge variant="secondary">Kein Watermark</Badge></li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
{pkg.limits?.max_photos && <li>• {t('packages.max_photos')} {pkg.limits.max_photos}</li>}
{pkg.limits?.gallery_days && <li>• {t('packages.gallery_days')} {pkg.limits.gallery_days}</li>}
{pkg.limits?.max_guests && <li>• {t('packages.max_guests')} {pkg.limits.max_guests}</li>}
{pkg.watermark_allowed === false && <li><Badge variant="secondary">{t('packages.no_watermark')}</Badge></li>}
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
{t('packages.view_details')}
</Button>
</div>
))}
@@ -178,63 +180,63 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
{/* Comparison Section for Endcustomer */}
<div className="mt-12">
<h3 className="text-2xl font-bold text-center mb-6 font-display">Endkunden-Pakete vergleichen</h3>
<h3 className="text-2xl font-bold text-center mb-6 font-display">{t('packages.comparison_title')}</h3>
<div className="block md:hidden">
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="price">
<AccordionTrigger className="font-sans-marketing">Preis</AccordionTrigger>
<AccordionTrigger className="font-sans-marketing">{t('packages.price')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}</p>
<p>{pkg.price === 0 ? t('free') : `${pkg.price} ${t('currency.euro')}`}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="max-photos">
<AccordionTrigger className="font-sans-marketing">Max. Fotos {getFeatureIcon('max_photos')}</AccordionTrigger>
<AccordionTrigger className="font-sans-marketing">{t('packages.max_photos_label')} {getFeatureIcon('max_photos')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.limits?.max_photos || 'Unbegrenzt'}</p>
<p>{pkg.limits?.max_photos || t('unlimited')}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="max-guests">
<AccordionTrigger className="font-sans-marketing">Max. Gäste {getFeatureIcon('max_guests')}</AccordionTrigger>
<AccordionTrigger className="font-sans-marketing">{t('packages.max_guests_label')} {getFeatureIcon('max_guests')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.limits?.max_guests || 'Unbegrenzt'}</p>
<p>{pkg.limits?.max_guests || t('unlimited')}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="gallery-days">
<AccordionTrigger className="font-sans-marketing">Galerie Tage {getFeatureIcon('gallery_days')}</AccordionTrigger>
<AccordionTrigger className="font-sans-marketing">{t('packages.gallery_days_label')} {getFeatureIcon('gallery_days')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
<div key={pkg.id} className="text-center">
<p className="font-bold">{pkg.name}</p>
<p>{pkg.limits?.gallery_days || 'Unbegrenzt'}</p>
<p>{pkg.limits?.gallery_days || t('unlimited')}</p>
</div>
))}
</div>
</AccordionContent>
</AccordionItem>
<AccordionItem value="watermark">
<AccordionTrigger className="font-sans-marketing">Watermark {getFeatureIcon('no_watermark')}</AccordionTrigger>
<AccordionTrigger className="font-sans-marketing">{t('packages.watermark_label')} {getFeatureIcon('no_watermark')}</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-3 gap-4 p-4">
{endcustomerPackages.map((pkg) => (
@@ -252,7 +254,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
<Table>
<TableHeader>
<TableRow>
<TableHead>Feature</TableHead>
<TableHead>{t('packages.feature')}</TableHead>
{endcustomerPackages.map((pkg) => (
<TableHead key={pkg.id} className="text-center">
{pkg.name}
@@ -262,39 +264,39 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-semibold">Preis</TableCell>
<TableCell className="font-semibold">{t('packages.price')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.price === 0 ? 'Kostenlos' : `${pkg.price} €`}
{pkg.price === 0 ? t('free') : `${pkg.price} ${t('currency.euro')}`}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Max. Fotos {getFeatureIcon('max_photos')}</TableCell>
<TableCell className="font-semibold">{t('packages.max_photos_label')} {getFeatureIcon('max_photos')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.limits?.max_photos || 'Unbegrenzt'}
{pkg.limits?.max_photos || t('unlimited')}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Max. Gäste {getFeatureIcon('max_guests')}</TableCell>
<TableCell className="font-semibold">{t('packages.max_guests_label')} {getFeatureIcon('max_guests')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.limits?.max_guests || 'Unbegrenzt'}
{pkg.limits?.max_guests || t('unlimited')}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Galerie Tage {getFeatureIcon('gallery_days')}</TableCell>
<TableCell className="font-semibold">{t('packages.gallery_days_label')} {getFeatureIcon('gallery_days')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.limits?.gallery_days || 'Unbegrenzt'}
{pkg.limits?.gallery_days || t('unlimited')}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell className="font-semibold">Watermark {getFeatureIcon('no_watermark')}</TableCell>
<TableCell className="font-semibold">{t('packages.watermark_label')} {getFeatureIcon('no_watermark')}</TableCell>
{endcustomerPackages.map((pkg) => (
<TableCell key={pkg.id} className="text-center">
{pkg.watermark_allowed === false ? <Check className="w-4 h-4 text-green-500" /> : <X className="w-4 h-4 text-red-500" />}
@@ -307,9 +309,9 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
</div>
</section>
<section className="py-20 px-4 bg-gray-50">
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Für Reseller</h2>
<h2 className="text-3xl font-bold text-center mb-12 font-display">{t('packages.section_reseller')}</h2>
{/* Mobile Carousel for Reseller Packages */}
<div className="block md:hidden">
@@ -318,32 +320,32 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
{resellerPackages.map((pkg) => (
<CarouselItem key={pkg.id} className="pl-1 basis-full">
<div
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
{pkg.price} € / Jahr
{pkg.price} {t('packages.currency.euro')} / {t('packages.year')}
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
</li>
))}
{pkg.limits?.max_tenants && <li>• Max. {pkg.limits.max_tenants} Tenants</li>}
{pkg.limits?.max_events && <li>• Max. {pkg.limits.max_events} Events/Jahr</li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
{pkg.limits?.max_tenants && <li>• {t('packages.max_tenants')} {pkg.limits.max_tenants}</li>}
{pkg.limits?.max_events && <li>• {t('packages.max_events_year')} {pkg.limits.max_events}</li>}
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
{t('packages.view_details')}
</Button>
</div>
</CarouselItem>
@@ -360,32 +362,32 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
{resellerPackages.map((pkg) => (
<div
key={pkg.id}
className="bg-white p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border hover:shadow-lg transition-all duration-300"
>
<div className="text-center mb-4">
<ShoppingCart className="w-12 h-12 text-[#FFD700] mx-auto" />
</div>
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-gray-600 dark:text-gray-300 mb-4 font-serif-custom">{pkg.description}</p>
<p className="text-2xl font-bold text-[#FFD700] mb-4 font-sans-marketing">
{pkg.price} € / Jahr
{pkg.price} {t('packages.currency.euro')} / {t('packages.year')}
</p>
<ul className="text-sm text-gray-600 mb-6 space-y-1 font-sans-marketing">
<ul className="text-sm text-gray-600 dark:text-gray-300 mb-6 space-y-1 font-sans-marketing">
{pkg.features.map((feature, index) => (
<li key={index} className="flex items-center">
{getFeatureIcon(feature)} {feature}
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
</li>
))}
{pkg.limits?.max_tenants && <li>• Max. {pkg.limits.max_tenants} Tenants</li>}
{pkg.limits?.max_events && <li>• Max. {pkg.limits.max_events} Events/Jahr</li>}
{pkg.branding_allowed && <li><Badge variant="secondary">Custom Branding</Badge></li>}
{pkg.limits?.max_tenants && <li>• {t('packages.max_tenants')} {pkg.limits.max_tenants}</li>}
{pkg.limits?.max_events && <li>• {t('packages.max_events_year')} {pkg.limits.max_events}</li>}
{pkg.branding_allowed && <li><Badge variant="secondary">{t('packages.custom_branding')}</Badge></li>}
</ul>
<Button
variant="outline"
onClick={() => handleCardClick(pkg)}
className="w-full mt-4 font-sans-marketing"
>
Details anzeigen
{t('packages.view_details')}
</Button>
</div>
))}
@@ -395,25 +397,25 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
</section>
{/* FAQ Section */}
<section className="py-20 px-4">
<section className="py-20 px-4 dark:bg-gray-700">
<div className="container mx-auto">
<h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
<h2 className="text-3xl font-bold text-center mb-12 font-display">{t('packages.faq_title')}</h2>
<div className="grid md:grid-cols-2 gap-8">
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Was ist das Free-Paket?</h3>
<p className="text-gray-600 font-sans-marketing">Ideal für Tests: 30 Fotos, 7 Tage Galerie, mit Watermark.</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_free')}</h3>
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_free_desc')}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Kann ich upgraden?</h3>
<p className="text-gray-600 font-sans-marketing">Ja, jederzeit im Dashboard – Limits werden sofort erweitert.</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_upgrade')}</h3>
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_upgrade_desc')}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Was für Reseller?</h3>
<p className="text-gray-600 font-sans-marketing">Jährliche Subscriptions mit Dashboard, Branding und Support.</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_reseller')}</h3>
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_reseller_desc')}</p>
</div>
<div className="bg-white p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">Zahlungssicher?</h3>
<p className="text-gray-600 font-sans-marketing">Sichere Zahlung via Stripe/PayPal, 14 Tage Rückgaberecht.</p>
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h3 className="text-xl font-semibold mb-2 font-display">{t('packages.faq_payment')}</h3>
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{t('packages.faq_payment_desc')}</p>
</div>
</div>
</div>
@@ -424,51 +426,51 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl font-display">{selectedPackage.name} - Details</DialogTitle>
<DialogTitle className="text-2xl font-display">{selectedPackage.name} - {t('packages.details')}</DialogTitle>
</DialogHeader>
<Tabs value={currentStep} onValueChange={setCurrentStep} className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="step1">Details</TabsTrigger>
<TabsTrigger value="step2">Kundenmeinungen</TabsTrigger>
<TabsTrigger value="step1">{t('packages.details')}</TabsTrigger>
<TabsTrigger value="step2">{t('packages.customer_opinions')}</TabsTrigger>
</TabsList>
<TabsContent value="step1" className="mt-4">
<div className="space-y-4">
<div className="text-center">
<h2 className="text-3xl font-bold font-display">{selectedPackage.name}</h2>
<p className="text-2xl font-bold text-[#FFB6C1] mt-2">
{selectedPackage.price === 0 ? 'Kostenlos' : `${selectedPackage.price} €`}
{selectedPackage.price === 0 ? t('packages.free') : `${selectedPackage.price} ${t('packages.currency.euro')}`}
</p>
</div>
<p className="text-gray-600 font-sans-marketing">{selectedPackage.description}</p>
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing">{selectedPackage.description}</p>
<div className="grid grid-cols-2 gap-4">
{selectedPackage.features.map((feature, index) => (
<Badge key={`feature-${index}`} variant="secondary" className="flex items-center justify-center gap-1">
{getFeatureIcon(feature)} {feature}
{getFeatureIcon(feature)} {t(`packages.feature_${feature}`)}
</Badge>
))}
{selectedPackage.limits?.max_photos && (
<Badge variant="outline" className="flex items-center justify-center gap-1">
<Image className="w-4 h-4" /> Max. {selectedPackage.limits.max_photos} Fotos
<Image className="w-4 h-4" /> {t('packages.max_photos')} {selectedPackage.limits.max_photos}
</Badge>
)}
{selectedPackage.limits?.max_guests && (
<Badge variant="outline" className="flex items-center justify-center gap-1">
<Users className="w-4 h-4" /> Max. {selectedPackage.limits.max_guests} Gäste
<Users className="w-4 h-4" /> {t('packages.max_guests')} {selectedPackage.limits.max_guests}
</Badge>
)}
{selectedPackage.limits?.gallery_days && (
<Badge variant="outline" className="flex items-center justify-center gap-1">
<Calendar className="w-4 h-4" /> {selectedPackage.limits.gallery_days} Tage Galerie
<Calendar className="w-4 h-4" /> {t('packages.gallery_days')} {selectedPackage.limits.gallery_days}
</Badge>
)}
{selectedPackage.watermark_allowed === false && (
<Badge variant="secondary" className="flex items-center justify-center gap-1">
<Shield className="w-4 h-4" /> Kein Watermark
<Shield className="w-4 h-4" /> {t('packages.no_watermark')}
</Badge>
)}
{selectedPackage.branding_allowed && (
<Badge variant="secondary" className="flex items-center justify-center gap-1">
<Image className="w-4 h-4" /> Custom Branding
<Image className="w-4 h-4" /> {t('packages.custom_branding')}
</Badge>
)}
</div>
@@ -478,7 +480,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
href={`/buy-packages/${selectedPackage.id}`}
className="w-full block bg-[#FFB6C1] text-white py-3 rounded-md font-semibold font-sans-marketing hover:bg-[#FF69B4] transition text-center"
>
Zur Bestellung
{t('packages.to_order')}
</Link>
) : (
<Link
@@ -488,7 +490,7 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
localStorage.setItem('preferred_package', JSON.stringify(selectedPackage));
}}
>
Zur Bestellung
{t('packages.to_order')}
</Link>
)}
</div>
@@ -496,11 +498,11 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
</TabsContent>
<TabsContent value="step2" className="mt-4">
<div className="space-y-4">
<h3 className="text-xl font-semibold mb-4 font-display">Was Kunden sagen</h3>
<h3 className="text-xl font-semibold mb-4 font-display">{t('packages.what_customers_say')}</h3>
<div className="grid md:grid-cols-3 gap-4">
{testimonials.map((testimonial, index) => (
<div key={index} className="bg-white p-4 rounded-lg shadow-md">
<p className="text-gray-600 font-sans-marketing mb-2">"{testimonial.text}"</p>
<div key={index} className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<p className="text-gray-600 dark:text-gray-300 font-sans-marketing mb-2">"{testimonial.text}"</p>
<p className="font-semibold font-sans-marketing">{testimonial.name}</p>
<div className="flex">
{[...Array(testimonial.rating)].map((_, i) => <Star key={i} className="w-4 h-4 text-yellow-400 fill-current" />)}
@@ -508,8 +510,8 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
</div>
))}
</div>
<button onClick={() => setOpen(false)} className="w-full mt-4 text-gray-500 underline">
Schließen
<button onClick={() => setOpen(false)} className="w-full mt-4 text-gray-500 dark:text-gray-400 underline">
{t('packages.close')}
</button>
</div>
</TabsContent>

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

@@ -1,11 +1,13 @@
import React from 'react';
import { usePage, router } from '@inertiajs/react';
import { Head } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
import { Loader } from 'lucide-react';
const Success: React.FC = () => {
const { auth, flash } = usePage().props as any;
const { t } = useTranslation('success');
if (auth.user && auth.user.email_verified_at) {
// Redirect to admin
@@ -14,7 +16,7 @@ const Success: React.FC = () => {
<div className="flex items-center justify-center min-h-screen bg-gray-50">
<div className="text-center">
<Loader className="animate-spin inline-block w-8 h-8 border border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-2" />
<p className="text-gray-600">Wird weitergeleitet...</p>
<p className="text-gray-600">{t('redirecting')}</p>
</div>
</div>
);
@@ -22,26 +24,26 @@ const Success: React.FC = () => {
if (auth.user && !auth.user.email_verified_at) {
return (
<MarketingLayout title="E-Mail verifizieren">
<MarketingLayout title={t('verify_email')}>
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
E-Mail verifizieren
{t('verify_email')}
</h2>
<p className="text-gray-600 mb-6">
Bitte überprüfen Sie Ihre E-Mail und klicken Sie auf den Verifizierungslink.
{t('check_email')}
</p>
<form method="POST" action="/email/verification-notification">
<button
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300"
>
Verifizierung erneut senden
{t('resend_verification')}
</button>
</form>
<p className="mt-4 text-sm text-gray-600">
Bereits registriert? <a href="/login" className="text-blue-600 hover:text-blue-500">Anmelden</a>
{t('already_registered')} <a href="/login" className="text-blue-600 hover:text-blue-500">{t('login')}</a>
</p>
</div>
</div>
@@ -51,24 +53,24 @@ const Success: React.FC = () => {
}
return (
<MarketingLayout title="Kauf abschließen">
<MarketingLayout title={t('complete_purchase')}>
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
<div className="text-center">
<h2 className="text-2xl font-bold text-gray-900 mb-4">
Kauf abschließen
{t('complete_purchase')}
</h2>
<p className="text-gray-600 mb-6">
Melden Sie sich an, um fortzufahren.
{t('login_to_continue')}
</p>
<a
href="/login"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300 block mb-2"
>
Anmelden
{t('login')}
</a>
<p className="text-sm text-gray-600">
Kein Konto? <a href="/register" className="text-blue-600 hover:text-blue-500">Registrieren</a>
{t('no_account')} <a href="/register" className="text-blue-600 hover:text-blue-500">{t('register')}</a>
</p>
</div>
</div>