fixed language switching in the frontend

This commit is contained in:
Codex Agent
2025-12-02 13:31:58 +01:00
parent 28539754a7
commit dd3198cb79
20 changed files with 395 additions and 203 deletions

View File

@@ -38,10 +38,30 @@ const iconByUseCase: Record<string, React.ReactNode> = {
};
const HowItWorks: React.FC = () => {
const { t } = useTranslation('marketing');
const { t, ready } = useTranslation('marketing');
const { localizedPath } = useLocalizedRoutes();
const hero = t('how_it_works_page.hero', { returnObjects: true }) as {
if (!ready) {
return (
<MarketingLayout title="Fotospiel">
<Head title="Fotospiel" />
<div className="container mx-auto px-4 py-16 text-center text-gray-600 dark:text-gray-300">
<p className="text-lg">Lade Inhalte </p>
</div>
</MarketingLayout>
);
}
const hero = t('how_it_works_page.hero', {
returnObjects: true,
defaultValue: {
title: 'So funktioniert die Fotospiel App',
subtitle: '',
primaryCta: '',
secondaryCta: '',
stats: [],
},
}) as {
title: string;
subtitle: string;
primaryCta: string;
@@ -49,41 +69,67 @@ const HowItWorks: React.FC = () => {
stats: HeroStat[];
};
const experience = t('how_it_works_page.experience', { returnObjects: true }) as {
const experience = t('how_it_works_page.experience', {
returnObjects: true,
defaultValue: {
host: { label: '', intro: '', steps: [], callouts: [] },
guest: { label: '', intro: '', steps: [], callouts: [] },
},
}) as {
host: ExperienceGroup;
guest: ExperienceGroup;
};
const pillars = t('how_it_works_page.pillars', { returnObjects: true }) as Array<{
const pillars = t('how_it_works_page.pillars', {
returnObjects: true,
defaultValue: [],
}) as Array<{
title: string;
description: string;
}>;
const timeline = t('how_it_works_page.timeline', { returnObjects: true }) as TimelineItem[];
const timeline = t('how_it_works_page.timeline', {
returnObjects: true,
defaultValue: [],
}) as TimelineItem[];
const useCases = t('how_it_works_page.use_cases', { returnObjects: true }) as {
const useCases = t('how_it_works_page.use_cases', {
returnObjects: true,
defaultValue: { title: '', description: '', tabs: [] },
}) as {
title: string;
description: string;
tabs: UseCase[];
};
const checklist = t('how_it_works_page.checklist', { returnObjects: true }) as {
const checklist = t('how_it_works_page.checklist', {
returnObjects: true,
defaultValue: { title: '', items: [], cta: '' },
}) as {
title: string;
items: string[];
cta: string;
};
const faq = t('how_it_works_page.faq', { returnObjects: true }) as {
const faq = t('how_it_works_page.faq', {
returnObjects: true,
defaultValue: { title: '', items: [] },
}) as {
title: string;
items: FaqItem[];
};
const support = t('how_it_works_page.support', { returnObjects: true }) as {
const support = t('how_it_works_page.support', {
returnObjects: true,
defaultValue: { title: '', description: '', cta: '' },
}) as {
title: string;
description: string;
cta: string;
};
const heroStats = Array.isArray(hero.stats) ? hero.stats : [];
return (
<MarketingLayout title={hero.title}>
<Head title={hero.title} />
@@ -116,7 +162,7 @@ const HowItWorks: React.FC = () => {
</div>
<div className="flex-1">
<div className="grid gap-4 sm:grid-cols-3">
{hero.stats.map((stat) => (
{heroStats.map((stat) => (
<Card key={stat.label} className="border-pink-100/70 shadow-none dark:border-pink-900/40">
<CardHeader className="pb-2">
<CardTitle className="text-2xl font-semibold text-pink-600 dark:text-pink-300">

View File

@@ -1016,7 +1016,7 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
</div>
</section>
{/* Details overlay */}
{/* Details overlay */}
{selectedPackage && (
isMobile ? (
<Sheet open={open} onOpenChange={setOpen}>
@@ -1047,8 +1047,15 @@ const PackageDetailGrid: React.FC<PackageDetailGridProps> = ({
const handleDetailAutoFocus = (event: Event) => {
event.preventDefault();
dialogScrollRef.current?.scrollTo({ top: 0 });
dialogHeadingRef.current?.focus();
// Guard in case refs are not in scope when autofocusing
if (typeof dialogScrollRef !== 'undefined') {
dialogScrollRef.current?.scrollTo({ top: 0 });
}
if (typeof dialogHeadingRef !== 'undefined') {
dialogHeadingRef.current?.focus();
}
};
Packages.layout = (page: React.ReactNode) => page;