237 lines
8.6 KiB
TypeScript
237 lines
8.6 KiB
TypeScript
import { lazy, Suspense } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CheckIcon } from '../ui/icons/CheckIcon';
|
|
import { LogoIcon } from '../ui/icons/LogoIcon';
|
|
import HomeFinalCta from '../home/HomeFinalCta';
|
|
import Footer from '../ui/Footer';
|
|
import { usePageMeta } from '../../hooks/usePageMeta';
|
|
import {
|
|
getLocalizedSeoLandingPage,
|
|
type SeoFaq,
|
|
type SeoLandingKey,
|
|
type SeoLink,
|
|
type SeoSection,
|
|
} from '../../lib/seoLandingPages';
|
|
import { safeJsonLd } from '../../lib/json-ld';
|
|
|
|
const ProductShowcase = lazy(() => import('../home/ProductShowcase'));
|
|
|
|
function ProductShowcaseFallback() {
|
|
return (
|
|
<div className="mx-auto min-h-[28rem] max-w-6xl rounded-lg bg-navy-900" aria-hidden="true" />
|
|
);
|
|
}
|
|
|
|
function JsonLd({ data }: { data: unknown }) {
|
|
return (
|
|
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: safeJsonLd(data) }} />
|
|
);
|
|
}
|
|
|
|
function FaqJsonLd({ faq }: { faq: SeoFaq[] }) {
|
|
return (
|
|
<JsonLd
|
|
data={{
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
mainEntity: faq.map((item) => ({
|
|
'@type': 'Question',
|
|
name: item.question,
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: item.answer,
|
|
},
|
|
})),
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function LinkGrid({ links }: { links: SeoLink[] }) {
|
|
return (
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
{links.map((link) => (
|
|
<a
|
|
key={link.path}
|
|
href={link.path}
|
|
className="rounded-lg border border-warm-200 bg-white p-4 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"
|
|
>
|
|
<h3 className="font-bold text-navy-950 dark:text-warm-100">{link.label}</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-warm-600 dark:text-warm-300">
|
|
{link.description}
|
|
</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SectionGrid({ sections }: { sections: SeoSection[] }) {
|
|
return (
|
|
<div className="grid gap-5 md:grid-cols-2">
|
|
{sections.map((section) => (
|
|
<article
|
|
key={section.title}
|
|
className="rounded-lg border border-warm-200 bg-white p-6 dark:border-warm-700 dark:bg-warm-800"
|
|
>
|
|
<h2 className="text-xl font-bold">{section.title}</h2>
|
|
<p className="mt-3 leading-relaxed text-warm-700 dark:text-warm-300">{section.body}</p>
|
|
{section.bullets && (
|
|
<ul className="mt-4 space-y-2">
|
|
{section.bullets.map((bullet) => (
|
|
<li key={bullet} className="flex gap-2 text-sm text-warm-700 dark:text-warm-300">
|
|
<CheckIcon className="mt-0.5 h-4 w-4 shrink-0 text-teal-600 dark:text-teal-400" />
|
|
<span>{bullet}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</article>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SeoLandingPage({
|
|
pageKey,
|
|
onOpenDashboard,
|
|
}: {
|
|
pageKey: SeoLandingKey;
|
|
onOpenDashboard: () => void;
|
|
}) {
|
|
const { t, i18n } = useTranslation();
|
|
const page = getLocalizedSeoLandingPage(pageKey, i18n.language);
|
|
usePageMeta(page.metaTitle, page.metaDescription);
|
|
|
|
return (
|
|
<main className="flex-1 overflow-y-auto bg-warm-50 text-navy-950 dark:bg-navy-950 dark:text-warm-100">
|
|
<FaqJsonLd faq={page.faq} />
|
|
|
|
<section className="bg-navy-950 text-white">
|
|
<div className="mx-auto max-w-6xl px-6 py-16 md:px-10 md:py-20">
|
|
<nav className="mb-6 text-sm font-medium text-warm-400" aria-label={t('seo.breadcrumb')}>
|
|
<a href="/" className="hover:text-teal-200">
|
|
{t('mobileMenu.home')}
|
|
</a>
|
|
<span className="mx-2">/</span>
|
|
<span className="text-warm-200">{page.eyebrow}</span>
|
|
</nav>
|
|
<p className="mb-4 text-sm font-semibold uppercase tracking-wide text-teal-300">
|
|
{page.eyebrow}
|
|
</p>
|
|
<h1 className="max-w-4xl text-3xl font-extrabold leading-tight md:text-5xl">
|
|
{page.title}
|
|
</h1>
|
|
<p className="mt-6 max-w-3xl text-lg leading-relaxed text-warm-300">{page.intro}</p>
|
|
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
|
<button
|
|
onClick={onOpenDashboard}
|
|
className="rounded-lg border border-[#d27a11] bg-[#f09a22] px-6 py-3 font-semibold text-navy-950 shadow-lg shadow-[#7a3905]/25 transition-colors hover:bg-[#df8614]"
|
|
>
|
|
{page.cta}
|
|
</button>
|
|
<a
|
|
href="/data-sources"
|
|
className="rounded-lg border-2 border-teal-400 px-6 py-[10px] text-center font-semibold text-teal-300 transition-colors hover:bg-teal-400/10"
|
|
>
|
|
{t('seo.reviewDataSources')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-navy-950 px-6 py-12 md:px-10 md:py-16">
|
|
<div className="mx-auto max-w-6xl">
|
|
<Suspense fallback={<ProductShowcaseFallback />}>
|
|
<ProductShowcase className="mx-auto" />
|
|
</Suspense>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto grid max-w-6xl gap-8 px-6 py-12 md:grid-cols-[0.85fr_1.15fr] md:px-10 md:py-16">
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 rounded-md border border-teal-200 bg-teal-50 px-3 py-1.5 text-sm font-semibold text-teal-700 dark:border-teal-400/30 dark:bg-teal-400/10 dark:text-teal-200">
|
|
<LogoIcon className="h-4 w-4" />
|
|
Perfect Postcode
|
|
</div>
|
|
<h2 className="mt-5 text-2xl font-bold md:text-3xl">{t('seo.whatYouCanCompare')}</h2>
|
|
<p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
|
|
{t('seo.whatYouCanCompareDesc')}
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-3">
|
|
{page.points.map((point) => (
|
|
<div
|
|
key={point}
|
|
className="flex gap-3 rounded-lg border border-warm-200 bg-white p-4 dark:border-warm-700 dark:bg-warm-800"
|
|
>
|
|
<CheckIcon className="mt-0.5 h-5 w-5 shrink-0 text-teal-600 dark:text-teal-400" />
|
|
<p className="leading-relaxed text-warm-700 dark:text-warm-300">{point}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
|
|
<div className="mb-7 max-w-3xl">
|
|
<h2 className="text-2xl font-bold md:text-3xl">{t('seo.howToUseIt')}</h2>
|
|
<p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
|
|
{t('seo.howToUseItDesc')}
|
|
</p>
|
|
</div>
|
|
<SectionGrid sections={page.workflows} />
|
|
</section>
|
|
|
|
<section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
|
|
<SectionGrid sections={page.sections} />
|
|
</section>
|
|
|
|
<section className="bg-white py-14 dark:bg-navy-900">
|
|
<div className="mx-auto max-w-6xl px-6 md:px-10">
|
|
<div className="mb-7 max-w-3xl">
|
|
<h2 className="text-2xl font-bold md:text-3xl">{t('seo.methodAndLimitations')}</h2>
|
|
<p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
|
|
{t('seo.methodAndLimitationsDesc')}
|
|
</p>
|
|
</div>
|
|
<SectionGrid sections={page.methodology} />
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto max-w-6xl px-6 py-14 md:px-10">
|
|
<div className="mb-7 max-w-3xl">
|
|
<h2 className="text-2xl font-bold md:text-3xl">{t('seo.questionsBuyersAsk')}</h2>
|
|
</div>
|
|
<div className="grid gap-4">
|
|
{page.faq.map((item) => (
|
|
<details
|
|
key={item.question}
|
|
className="rounded-lg border border-warm-200 bg-white p-5 dark:border-warm-700 dark:bg-warm-800"
|
|
>
|
|
<summary className="cursor-pointer font-bold">{item.question}</summary>
|
|
<p className="mt-3 leading-relaxed text-warm-700 dark:text-warm-300">{item.answer}</p>
|
|
</details>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
|
|
<div className="mb-7 max-w-3xl">
|
|
<h2 className="text-2xl font-bold md:text-3xl">{t('seo.relatedGuides')}</h2>
|
|
<p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
|
|
{t('seo.relatedGuidesDesc')}
|
|
</p>
|
|
</div>
|
|
<LinkGrid links={page.relatedLinks} />
|
|
</section>
|
|
|
|
<section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
|
|
<HomeFinalCta
|
|
onOpenDashboard={onOpenDashboard}
|
|
trackingLocation={`seo_${pageKey}_bottom`}
|
|
/>
|
|
</section>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|