update

components/contact/ContactCtaSection.module.css

@@ -1,6 +1,6 @@
 .section {
   background: #ffffff;
-  padding-bottom: var(--space-16);
+  padding-block: var(--space-24);
 }
 
 .inner {

components/contact/ContactCtaSection.tsx

@@ -4,6 +4,13 @@ import { companyData } from "@/data/companyData";
 import styles from "./ContactCtaSection.module.css";
 import { contactCtaData, type ContactInfo } from "./ContactCtaData";
 
+interface ContactCtaSectionProps {
+  heading?: string;
+  lead?: string;
+  buttonLabel?: string;
+  buttonHref?: string;
+}
+
 function resolveCompanyContact(
   item: Extract<ContactInfo, { type: "company" }>,
 ) {
@@ -32,8 +39,17 @@ function resolveCompanyContact(
   return null;
 }
 
-export default function ContactCtaSection() {
-  const { heading, lead, buttonLabel, buttonHref, contacts } = contactCtaData;
+export default function ContactCtaSection({
+  heading,
+  lead,
+  buttonLabel,
+  buttonHref,
+}: ContactCtaSectionProps = {}) {
+  const resolvedHeading = heading ?? contactCtaData.heading;
+  const resolvedLead = lead ?? contactCtaData.lead;
+  const resolvedButtonLabel = buttonLabel ?? contactCtaData.buttonLabel;
+  const resolvedButtonHref = buttonHref ?? contactCtaData.buttonHref;
+  const { contacts } = contactCtaData;
 
   return (
     <section className={styles.section} aria-labelledby="contact-cta-heading">
@@ -42,19 +58,19 @@ export default function ContactCtaSection() {
           <div className={styles.top}>
             <div className={styles.text}>
               <h2 id="contact-cta-heading" className={styles.heading}>
-                {heading}
+                {resolvedHeading}
               </h2>
-              <p className={styles.lead}>{lead}</p>
+              <p className={styles.lead}>{resolvedLead}</p>
             </div>
-
-            <Link href={buttonHref} className="btn btn--filled-inverse">
+          </div>
+          <div>
+            <Link href={resolvedButtonHref} className="btn btn--filled-inverse">
               <span className="btn-icon animate" aria-hidden="true">
                 <ArrowRightIcon size={16} weight="bold" />
               </span>
-              {buttonLabel}
+              {resolvedButtonLabel}
             </Link>
           </div>
-
           <hr className={styles.divider} aria-hidden="true" />
 
           <div className={styles.contactRow}>