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

weitere übersetzungen ergänzt

Browse Source
This commit is contained in:
Codex Agent
2025-11-19 13:30:42 +01:00
parent d8f365ddd6
commit 91d3e61b0e
3 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/lang/de/marketing.json
View File

@@ -175,6 +175,7 @@
"limits_label_hint": "Alle Kennzahlen auf einen Blick – ideal für Planung und Freigaben.",
"for_endcustomers": "Für Endkunden",
"for_resellers": "Für Reseller",
"view_details": "Details ansehen",
"details_show": "Details anzeigen",
"comparison_title": "Packages vergleichen",
"comparison_subtitle": "Alle Limits und Features auf einen Blick.",

1
public/lang/en/marketing.json
View File

@@ -162,6 +162,7 @@
"limits_label_hint": "Understand the exact limits for planning and approvals.",
"for_endcustomers": "For End Customers",
"for_resellers": "For Resellers",
"view_details": "View details",
"details_show": "Show Details",
"comparison_title": "Compare Packages",
"comparison_subtitle": "Every limit and feature side by side.",

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

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useMemo } from 'react';
import React, { useState, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import type { TFunction } from 'i18next';
@@ -210,6 +210,8 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
const [open, setOpen] = useState(false);
const [selectedPackage, setSelectedPackage] = useState<Package | null>(null);
const [currentStep, setCurrentStep] = useState<'overview' | 'testimonials'>('overview');
const dialogScrollRef = useRef<HTMLDivElement | null>(null);
const dialogHeadingRef = useRef<HTMLDivElement | null>(null);
const { props } = usePage();
const { auth } = props as any;
const { t } = useTranslation('marketing');
@@ -233,6 +235,12 @@ const Packages: React.FC<PackagesProps> = ({ endcustomerPackages, resellerPackag
}
}, [endcustomerPackages, resellerPackages]);
useLayoutEffect(() => {
if (open && dialogScrollRef.current) {
dialogScrollRef.current.scrollTo({ top: 0 });
}
}, [open, selectedPackage]);
const testimonials = [
{ name: tCommon('testimonials.anna.name'), text: t('packages.testimonials.anna'), rating: 5 },
@@ -665,17 +673,26 @@ function PackageCard({
{/* Modal */}
{selectedPackage && (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-6xl border border-gray-100 bg-white px-0 py-0 sm:rounded-[32px]">
<div className="max-h-[88vh] overflow-y-auto space-y-8 p-6 md:p-10">
<DialogHeader className="space-y-3 text-left">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-400">
{selectedVariant === 'reseller' ? t('packages.subscription') : t('packages.one_time')}
</p>
<DialogTitle className="text-3xl font-display text-gray-900">
{selectedPackage.name}
</DialogTitle>
<p className="text-base text-gray-600">{selectedPackage.description}</p>
</DialogHeader>
<DialogContent
className="max-w-6xl border border-gray-100 bg-white px-0 py-0 sm:rounded-[32px]"
onOpenAutoFocus={(event) => {
event.preventDefault();
dialogScrollRef.current?.scrollTo({ top: 0 });
dialogHeadingRef.current?.focus();
}}
>
<div ref={dialogScrollRef} className="max-h-[88vh] overflow-y-auto space-y-8 p-6 md:p-10">
<div ref={dialogHeadingRef} tabIndex={-1} className="outline-none">
<DialogHeader className="space-y-3 text-left">
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-400">
{selectedVariant === 'reseller' ? t('packages.subscription') : t('packages.one_time')}
</p>
<DialogTitle className="text-3xl font-display text-gray-900">
{selectedPackage.name}
</DialogTitle>
<p className="text-base text-gray-600">{selectedPackage.description}</p>
</DialogHeader>
</div>
<div className="grid gap-8 lg:grid-cols-[320px,1fr]">
<div className="space-y-6">
<div className="rounded-2xl border border-gray-100 bg-gray-50 p-6">