fixed language switching in the frontend
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user