andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

deploy

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-14 20:42:48 +01:00
parent 273d7a83ee
commit 084117cea8
48 changed files with 2283 additions and 890 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/src/components/learn/LearnPage.tsx
View file

@ -1,10 +1,11 @@
import { useEffect, useState, useRef } from 'react';
import { useEffect, useMemo, useState, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { tDynamic } from '../../i18n';
import { getLocalizedSeoPages } from '../../lib/seoLandingPages';
import { ChevronIcon } from '../ui/icons/ChevronIcon';
import { SubNav } from '../ui/SubNav';
type LearnTab = 'data-sources' | 'faq' | 'support';
type LearnTab = 'data-sources' | 'faq' | 'articles' | 'support';
interface DataSourceDef {
id: string;
@ -173,15 +174,26 @@ function FAQItemCard({ question, answer }: { question: string; answer: string })
}
export default function LearnPage() {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const [tab, setTab] = useState<LearnTab>('faq');
const [highlightedId, setHighlightedId] = useState<string | null>(null);
const cardRefs = useRef<Record<string, HTMLDivElement | null>>({});
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
const seoPageLinks = useMemo(
() =>
getLocalizedSeoPages(i18n.language).map((page) => ({
path: page.path,
eyebrow: page.eyebrow,
title: page.title,
description: page.metaDescription,
})),
[i18n.language]
);
const LEARN_TABS = [
{ key: 'faq', label: t('learnPage.faq') },
{ key: 'data-sources', label: t('learnPage.dataSources') },
{ key: 'articles', label: t('learnPage.articles') },
{ key: 'support', label: t('learnPage.support') },
];
@ -239,6 +251,9 @@ export default function LearnPage() {
if (hash === 'faq') {
setTab('faq');
setHighlightedId(null);
} else if (hash === 'articles') {
setTab('articles');
setHighlightedId(null);
} else if (hash === 'support') {
setTab('support');
setHighlightedId(null);
@ -406,6 +421,32 @@ export default function LearnPage() {
))}
</div>
</div>
) : tab === 'articles' ? (
<div className="max-w-5xl mx-auto px-6 py-6 w-full">
<h1 className="text-2xl md:text-3xl font-bold text-warm-900 dark:text-warm-100 mb-3">
{t('learnPage.articles')}
</h1>
<p className="text-warm-600 dark:text-warm-400 mb-6">{t('learnPage.articlesIntro')}</p>
<div className="grid gap-4 md:grid-cols-2">
{seoPageLinks.map((link) => (
<a
key={link.path}
href={link.path}
className="rounded-lg border border-warm-200 bg-white p-5 transition-colors hover:border-teal-300 hover:bg-teal-50 dark:border-warm-700 dark:bg-warm-800 dark:hover:border-teal-500/60 dark:hover:bg-teal-950/30"
>
<div className="text-xs font-semibold uppercase tracking-wide text-teal-600 dark:text-teal-400">
{link.eyebrow}
</div>
<h2 className="mt-1 text-lg font-bold text-warm-900 dark:text-warm-100">
{link.title}
</h2>
<p className="mt-2 text-sm leading-relaxed text-warm-600 dark:text-warm-300">
{link.description}
</p>
</a>
))}
</div>
</div>
) : (
<div className="max-w-2xl mx-auto px-6 py-6 w-full">
<h1 className="text-2xl md:text-3xl font-bold text-warm-900 dark:text-warm-100 mb-3">