feat: contact page deescription

Author: mvriu5

export/pages.json

@@ -14,6 +14,12 @@ export const ContactBlock: Block = {
       localized: true,
       defaultValue: "Contact us",
     },
+    {
+      name: "description",
+      type: "textarea",
+      required: true,
+      localized: true,
+    },
     {
       name: "nameLabel",
       type: "text",

src/blocks/ContactBlock.ts

@@ -13,8 +13,12 @@ interface ContactPageContentProps {
 
 export function ContactPageContent({ locale, contactBlock }: ContactPageContentProps) {
     const desktopTopOffset = 96
+    const pageHeading = contactBlock?.heading ?? "Contact us"
+    const pageDescription = contactBlock?.description ?? "Contact us if you want to know more about CodeZero."
+
     const [desktopMode, setDesktopMode] = useState<"static" | "fixed" | "bottom">("static")
     const [desktopStyle, setDesktopStyle] = useState<{ left: number, width: number, top: number } | null>(null)
+
     const desktopWrapperRef = useRef<HTMLElement>(null)
     const desktopContainerRef = useRef<HTMLDivElement>(null)
 
@@ -77,13 +81,8 @@ export function ContactPageContent({ locale, contactBlock }: ContactPageContentP
     return (
         <div className="grid gap-8 lg:grid-cols-5">
             <section className="min-w-0 lg:col-span-3">
-                <h1 className="text-4xl font-semibold text-white">Get in touch</h1>
-                <p className="mt-4 text-white/75">
-                    Placeholder text for the contact page intro. Replace this with the final markdown content.
-                </p>
-                <p className="mt-4 text-white/75">
-                    Add details about support, response times, or how the team can help to give visitors more context.
-                </p>
+                <h1 className="text-4xl font-semibold text-white">{pageHeading}</h1>
+                <p className="mt-4 text-white/75">{pageDescription}</p>
             </section>
 
             <section ref={desktopWrapperRef} className="relative min-w-0 lg:col-span-2">

src/components/ContactPageContent.tsx

@@ -3,11 +3,11 @@
 import { AcceptTermsCheckbox } from "@/components/AcceptTermsCheckbox"
 import type { AppLocale } from "@/lib/i18n"
 import { Button, EmailInput, emailValidation, TextAreaInput, TextInput, useForm } from "@code0-tech/pictor"
+import type { FocusEvent } from "react"
 import { useMemo, useState } from "react"
 import { useWebHaptics } from "web-haptics/react"
 
 interface ContactFormContent {
-    heading: string
     nameLabel: string
     namePlaceholder: string
     emailLabel: string
@@ -22,8 +22,14 @@ interface ContactFormProps {
     locale: AppLocale
 }
 
+interface ContactFormValues {
+    name: string
+    email: string
+    message: string
+    acceptTerms: boolean
+}
+
 const defaultContent: ContactFormContent = {
-    heading: "Contact us",
     nameLabel: "Name",
     namePlaceholder: "Your name",
     emailLabel: "Email",
@@ -39,7 +45,7 @@ export function ContactForm({ content, locale }: ContactFormProps) {
 
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [submitStatus, setSubmitStatus] = useState<{ type: "success" | "error", message: string } | null>(null)
-    const initialValues = useMemo(() => ({
+    const initialValues = useMemo<ContactFormValues>(() => ({
         name: "",
         email: "",
         message: "",
@@ -70,7 +76,7 @@ export function ContactForm({ content, locale }: ContactFormProps) {
         useInitialValidation: false,
         initialValues,
         validate: validation,
-        onSubmit: (values) => {
+        onSubmit: (values: ContactFormValues) => {
             if (isSubmitting) return
 
             setIsSubmitting(true)
@@ -115,7 +121,6 @@ export function ContactForm({ content, locale }: ContactFormProps) {
 
     return (
         <div className="flex flex-col gap-4">
-            <h1 className="text-4xl font-semibold text-white">{labels.heading}</h1>
             <div className="flex flex-col gap-2 mt-6">
                 <TextInput
                     placeholder={labels.namePlaceholder}
@@ -137,7 +142,7 @@ export function ContactForm({ content, locale }: ContactFormProps) {
                             validate("email")
                         }
                     }}
-                    onBlur={(event) => {
+                    onBlur={(event: FocusEvent<HTMLInputElement>) => {
                         const value = event.currentTarget.value?.trim()
                         if (value && !emailValidation(value)) {
                             validate("email")

src/components/forms/ContactForm.tsx

@@ -3,6 +3,7 @@
 import { AcceptTermsCheckbox } from "@/components/AcceptTermsCheckbox"
 import type { AppLocale } from "@/lib/i18n"
 import { Button, EmailInput, emailValidation, TextAreaInput, TextInput, useForm } from "@code0-tech/pictor"
+import type { FocusEvent } from "react"
 import { useMemo, useState } from "react"
 import { useWebHaptics } from "web-haptics/react"
 
@@ -23,6 +24,13 @@ interface JobApplicationFormProps {
     locale: AppLocale
 }
 
+interface JobApplicationFormValues {
+    name: string
+    email: string
+    text: string
+    acceptTerms: boolean
+}
+
 const defaultContent: JobApplicationFormContent = {
     applicationHeading: "Apply now",
     applicationNameLabel: "Name",
@@ -39,7 +47,7 @@ export function JobApplicationForm({ jobSlug, content, locale }: JobApplicationF
     const labels = { ...defaultContent, ...content }
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [submitStatus, setSubmitStatus] = useState<{ type: "success" | "error", message: string } | null>(null)
-    const initialValues = useMemo(() => ({
+    const initialValues = useMemo<JobApplicationFormValues>(() => ({
         name: "",
         email: "",
         text: "",
@@ -70,7 +78,7 @@ export function JobApplicationForm({ jobSlug, content, locale }: JobApplicationF
         useInitialValidation: false,
         initialValues,
         validate: validation,
-        onSubmit: (values) => {
+        onSubmit: (values: JobApplicationFormValues) => {
             if (isSubmitting) return
 
             setIsSubmitting(true)
@@ -137,7 +145,7 @@ export function JobApplicationForm({ jobSlug, content, locale }: JobApplicationF
                             validate("email")
                         }
                     }}
-                    onBlur={(event) => {
+                    onBlur={(event: FocusEvent<HTMLInputElement>) => {
                         const value = event.currentTarget.value?.trim()
                         if (value && !emailValidation(value)) {
                             validate("email")