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

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>