deploy

frontend/src/components/landing/SeoContentPage.tsx

@@ -1,21 +1,29 @@
+import { lazy, Suspense } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CheckIcon } from '../ui/icons/CheckIcon';
+import HomeFinalCta from '../home/HomeFinalCta';
+import { usePageMeta } from '../../hooks/usePageMeta';
 import {
-  SEO_CONTENT_PAGES,
+  getLocalizedSeoContentPage,
   type SeoContentKey,
   type SeoFaq,
   type SeoLink,
   type SeoSection,
 } from '../../lib/seoLandingPages';
+import { safeJsonLd } from '../../lib/json-ld';
 
 const PUBLIC_URL = 'https://perfect-postcode.co.uk';
+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: JSON.stringify(data).replace(/</g, '\\u003c') }}
-    />
+    <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: safeJsonLd(data) }} />
   );
 }
 
@@ -91,9 +99,10 @@ export default function SeoContentPage({
   pageKey: SeoContentKey;
   onOpenDashboard: () => void;
 }) {
-  const { t } = useTranslation();
-  const page = SEO_CONTENT_PAGES[pageKey];
+  const { t, i18n } = useTranslation();
+  const page = getLocalizedSeoContentPage(pageKey, i18n.language);
   const url = `${PUBLIC_URL}${page.path}`;
+  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">
@@ -136,7 +145,7 @@ export default function SeoContentPage({
           {page.cta && (
             <button
               onClick={onOpenDashboard}
-              className="mt-8 rounded-lg bg-coral-500 px-6 py-3 font-semibold text-white shadow-lg shadow-coral-500/25 transition-colors hover:bg-coral-600"
+              className="mt-8 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>
@@ -144,6 +153,14 @@ export default function SeoContentPage({
         </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 max-w-5xl px-6 py-14 md:px-10">
         <SectionList sections={page.sections} />
       </section>
@@ -178,6 +195,13 @@ export default function SeoContentPage({
           <RelatedLinks links={page.relatedLinks} />
         </div>
       </section>
+
+      <section className="mx-auto max-w-5xl px-6 pb-16 md:px-10">
+        <HomeFinalCta
+          onOpenDashboard={onOpenDashboard}
+          trackingLocation={`seo_${pageKey}_bottom`}
+        />
+      </section>
     </main>
   );
 }