refactor: contactpagecontent to contactsection & allowed rendering other

blocks in the contact section

Author: mvriu5

src/app/(landing)/[locale]/contact/page.tsx

@@ -1,8 +1,7 @@
-import { ContactPageContent } from "@/components/ContactPageContent"
+import { PageBlocks } from "@/components/ui/PageBlockRenderer"
 import { LandingContainer } from "@/components/ui/LandingContainer"
 import { createLandingMetadata, getPageLocale, type LocalePageParams } from "@/lib/appRoute"
 import { getLandingPage } from "@/lib/cms"
-import { findPageBlock } from "@/lib/pageBlocks"
 import { notFound } from "next/navigation"
 
 export const generateMetadata = createLandingMetadata("contact")
@@ -12,13 +11,10 @@ export default async function ContactPage({ params }: { params: LocalePageParams
     const page = await getLandingPage("contact", locale)
     if (!page) notFound()
 
-    const contactBlock = findPageBlock(page, "contact")
-
     return (
-        <LandingContainer className="pt-32">
-                <div className="mx-auto w-full max-w-5xl">
-                    <ContactPageContent locale={locale} contactBlock={contactBlock} />
-                </div>
+        <LandingContainer>
+            <div className="h-28" aria-hidden="true" />
+            <PageBlocks blocks={page.layout} locale={locale} />
         </LandingContainer>
     )
 }

src/components/ContactPageContent.tsx …c/components/sections/ContactSection.tsxsrc/components/ContactPageContent.tsx renamed to src/components/sections/ContactSection.tsx src/components/ContactPageContent.tsx renamed to src/components/sections/ContactSection.tsx

@@ -1,35 +1,32 @@
 "use client"
 
 import { ContactForm } from "@/components/forms/ContactForm"
+import { useDesktopPinnedPosition } from "@/hooks/useDesktopPinnedPosition"
 import type { ContactLayoutBlock } from "@/lib/cms"
 import type { AppLocale } from "@/lib/i18n"
-import { useDesktopPinnedPosition } from "@/hooks/useDesktopPinnedPosition"
 
-interface ContactPageContentProps {
+interface ContactSectionProps {
     locale: AppLocale
-    contactBlock: ContactLayoutBlock | null
+    content?: ContactLayoutBlock | null
 }
 
-export function ContactPageContent({ locale, contactBlock }: ContactPageContentProps) {
+export function ContactSection({ locale, content }: ContactSectionProps) {
     const desktopTopOffset = 128
-    const pageHeading = contactBlock?.heading ?? "Contact us"
-    const pageDescription = contactBlock?.description ?? "Contact us if you want to know more about CodeZero."
+    const pageHeading = content?.heading ?? "Contact us"
+    const pageDescription = content?.description ?? "Contact us if you want to know more about CodeZero."
 
     const { wrapperRef: desktopWrapperRef, containerRef: desktopContainerRef } = useDesktopPinnedPosition<HTMLElement, HTMLDivElement>(desktopTopOffset)
 
     return (
-        <div className="grid gap-8 lg:grid-cols-2">
+        <div className="mx-auto grid w-full max-w-5xl gap-8 lg:grid-cols-2">
             <section className="min-w-0">
                 <h1 className="text-4xl font-semibold text-white">{pageHeading}</h1>
                 <p className="mt-4 text-secondary">{pageDescription}</p>
             </section>
 
             <section ref={desktopWrapperRef} className="relative min-w-0">
-                <div
-                    ref={desktopContainerRef}
-                    className="relative z-10"
-                >
-                    <ContactForm content={contactBlock} locale={locale} />
+                <div ref={desktopContainerRef} className="relative z-10">
+                    <ContactForm content={content} locale={locale} />
                 </div>
             </section>
         </div>

src/components/ui/PageBlockRenderer.tsx

@@ -29,6 +29,7 @@ import { ActionListSection } from "../sections/ActionListSection"
 import { SubscriptionConfiguratorSection, type SubscriptionIcons } from "../sections/SubscriptionConfiguratorSection"
 import { PricingSection } from "../sections/PricingSection"
 import { SmallPricingSection } from "../sections/SmallPricingSection"
+import { ContactSection } from "../sections/ContactSection"
 import { getIcon } from "@/components/ui/IconRenderer"
 import type { ActionItem, SubscriptionConfigData, SubscriptionConfiguratorBlockData } from "@/lib/cms"
 
@@ -183,6 +184,7 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
 
         return <SmallPricingSection content={block as Extract<PageBlock, { blockType: "smallPricing" }>} locale={options.locale ?? "en"} packages={config.packages} />
     },
+    contact: (block, options) => <ContactSection content={block as Extract<PageBlock, { blockType: "contact" }>} locale={options.locale ?? "en"} />,
 }
 
 function renderPageBlock(block: PageBlock, options: PageBlockRenderOptions) {