soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions 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

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>