Consulting Page for React (A|B Testing)

.env.example

@@ -30,6 +30,9 @@ NEXT_PUBLIC_GITHUB_SHA=0000000000000000000000000000000000000000
 # Current site URL
 SITE_URL=***
 
+#JOTFORM API KEY
+JOTFORM_API_KEY=***
+
 # Recaptcha Keys
 GOOGLE_RECAPTCHA_KEY=***
 

app/api/lead-capture/route.ts

@@ -0,0 +1,66 @@
+import { NextRequest } from "next/server";
+
+/**
+ * Receives lead-capture answers from the V3LeadCapture block and forwards them
+ * to JotForm's submissions API, keeping the API key server-side.
+ *
+ * Body: { jotFormId: string, fields: Record<qid, value> }
+ * Each `fields` key is a JotForm question id (qid); JotForm expects them encoded
+ * as `submission[{qid}]=value`.
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const apiKey = process.env.JOTFORM_API_KEY;
+    if (!apiKey) {
+      return Response.json(
+        { message: "JotForm is not configured." },
+        { status: 500 }
+      );
+    }
+
+    const { jotFormId, fields } = await request.json();
+
+    if (!jotFormId || !fields || typeof fields !== "object") {
+      return Response.json(
+        { message: "Missing jotFormId or fields." },
+        { status: 400 }
+      );
+    }
+
+    const body = new URLSearchParams();
+    for (const [qid, value] of Object.entries(fields)) {
+      if (value != null && value !== "") {
+        body.append(`submission[${qid}]`, String(value));
+      }
+    }
+
+    const res = await fetch(
+      `https://api.jotform.com/form/${encodeURIComponent(
+        jotFormId
+      )}/submissions?apiKey=${encodeURIComponent(apiKey)}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: body.toString(),
+      }
+    );
+
+    if (!res.ok) {
+      const detail = await res.text();
+      console.error("JotForm submission failed:", res.status, detail);
+      return Response.json(
+        { message: "Failed to submit lead." },
+        { status: 502 }
+      );
+    }
+
+    return Response.json({ ok: true }, { status: 200 });
+  } catch (error) {
+    console.error("lead-capture error:", error);
+    return Response.json({ message: "Unexpected error." }, { status: 500 });
+  }
+}
+
+export async function GET() {
+  return Response.json({ message: "Unsupported method" }, { status: 405 });
+}

app/consulting/[filename]/page.tsx

@@ -161,7 +161,7 @@ export async function generateMetadata(
 
   const seo =
     newPage?.props?.data?.consultingv2?.seo ||
-    oldPage.props?.data?.consulting?.seo;
+    oldPage?.props?.data?.consulting?.seo;
 
   const headerUrl = newPage?.props?.header?.url || oldPage?.props?.header?.url;
   if (seo && !seo.canonical) {

components/blocks-renderer.tsx

@@ -160,6 +160,50 @@ const Spacer = dynamic(() =>
   import("./blocks/spacer/spacer").then((mod) => mod.Spacer)
 );
 
+const V3Hero = dynamic(() =>
+  import("./blocks/v3/hero/hero").then((mod) => mod.V3Hero)
+);
+
+const V3LogoCarousel = dynamic(() =>
+  import("./blocks/v3/logoCarousel/logoCarousel").then(
+    (mod) => mod.V3LogoCarousel
+  )
+);
+
+const V3FeatureSteps = dynamic(() =>
+  import("./blocks/v3/featureSteps/featureSteps").then(
+    (mod) => mod.V3FeatureSteps
+  )
+);
+
+const V3Process = dynamic(() =>
+  import("./blocks/v3/process/process").then((mod) => mod.V3Process)
+);
+
+const V3Statistics = dynamic(() => import("./blocks/v3/statistics/statistics"));
+
+const V3Cta = dynamic(() =>
+  import("./blocks/v3/cta/cta").then((mod) => mod.V3Cta)
+);
+
+const V3Testimonials = dynamic(() =>
+  import("./blocks/v3/testimonials/testimonials").then(
+    (mod) => mod.V3Testimonials
+  )
+);
+
+const V3StackCards = dynamic(() =>
+  import("./blocks/v3/stackCards/stackCards").then((mod) => mod.V3StackCards)
+);
+
+const V3Faq = dynamic(() =>
+  import("./blocks/v3/faq/faq").then((mod) => mod.V3Faq)
+);
+
+const V3LeadCapture = dynamic(() =>
+  import("./blocks/v3/leadCapture/leadCapture").then((mod) => mod.V3LeadCapture)
+);
+
 const componentMap = {
   AboutUs,
   Carousel,
@@ -198,6 +242,16 @@ const componentMap = {
   TechnologyCardCarousel,
   Spacer,
   UtilityButton,
+  V3Hero,
+  V3LogoCarousel,
+  V3FeatureSteps,
+  V3Process,
+  V3Statistics,
+  V3Cta,
+  V3Testimonials,
+  V3StackCards,
+  V3Faq,
+  V3LeadCapture,
 };
 
 export const Blocks = ({ prefix, blocks }) => {

components/blocks/index.ts

@@ -54,12 +54,32 @@ import { SpacerSchema } from "./spacer/spacer.schema";
 import { tableBlockSchema } from "./tableLayout.schema";
 import { testimonialsListSchema } from "./testimonialsList";
 import { upcomingEventsBlockSchema } from "./upcomingEvents";
+import { V3FeatureStepsSchema } from "./v3/featureSteps/featureSteps.schema";
+import { V3HeroSchema } from "./v3/hero/hero.schema";
+import { V3ProcessSchema } from "./v3/process/process.schema";
+import { V3StatisticsTemplate } from "./v3/statistics/statistics.schema";
+import { V3CtaSchema } from "./v3/cta/cta.schema";
+import { V3LogoCarouselSchema } from "./v3/logoCarousel/logoCarousel.schema";
+import { V3TestimonialsSchema } from "./v3/testimonials/testimonials.schema";
+import { V3StackCardsSchema } from "./v3/stackCards/stackCards.schema";
+import { V3FaqSchema } from "./v3/faq/faq.schema";
+import { V3LeadCaptureSchema } from "./v3/leadCapture/leadCapture.template";
 import { verticalImageLayoutBlockSchema } from "./verticalImageLayout";
 import { verticalListItemSchema } from "./verticalListItem";
 import { videoEmbedBlockSchema } from "./videoEmbed.schema";
 
 //NOTE: this is the order that blocks will appear in the Tina Editor
 export const pageBlocks: Template[] = [
+  V3HeroSchema,
+  V3LogoCarouselSchema,
+  V3FeatureStepsSchema,
+  V3ProcessSchema,
+  V3StatisticsTemplate,
+  V3CtaSchema,
+  V3TestimonialsSchema,
+  V3StackCardsSchema,
+  V3FaqSchema,
+  V3LeadCaptureSchema,
   BreadcrumbSchema,
   ImageTextBlockSchema,
   LogoCarouselSchema,

components/blocks/v3/cta/cta.schema.tsx

@@ -0,0 +1,48 @@
+import type { Template } from "tinacms";
+import alternatingHeadingSchema from "../../../blocksSubtemplates/alternatingHeading.schema";
+import { buttonSchema } from "../../../button/templateButton.schema";
+import { backgroundSchema } from "../../../layout/v2ComponentWrapper.schema";
+
+export const V3CtaSchema: Template = {
+  name: "v3Cta",
+  label: "<V3> CTA",
+  ui: {
+    defaultItem: {
+      background: {
+        backgroundColour: 7,
+        redGlow: true,
+        gridOverlay: true,
+      },
+      heading: "Let's build something **you're proud of.**",
+      description:
+        "Get in touch and we'll set up an initial meeting to show you where we'd start.",
+      buttons: [{ buttonText: "Book your initial meeting", colour: 0 }],
+    },
+  },
+  fields: [
+    //@ts-expect-error – custom component typing won't be pinned down
+    backgroundSchema,
+    alternatingHeadingSchema,
+    {
+      type: "rich-text",
+      label: "Description",
+      name: "description",
+      description: "Supporting text shown beneath the heading.",
+      toolbarOverride: ["bold", "italic", "link"],
+    },
+    {
+      type: "object",
+      label: "Buttons",
+      name: "buttons",
+      list: true,
+      description: "A row of buttons. Max 2.",
+      ui: {
+        defaultItem: { buttonText: "Book your initial meeting" },
+        max: 2,
+        itemProps: (item) => ({ label: item?.buttonText ?? "Button" }),
+      },
+      //@ts-expect-error – fields are not being recognized
+      fields: buttonSchema,
+    },
+  ],
+};

components/blocks/v3/cta/cta.tsx

@@ -0,0 +1,46 @@
+import AlternatingText from "@/components/alternating-text";
+import ButtonRow from "@/components/blocksSubtemplates/buttonRow";
+import V2ComponentWrapper from "@/components/layout/v2ComponentWrapper";
+import { Container } from "@/components/util/container";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+
+export function V3Cta({ data }) {
+  return (
+    <V2ComponentWrapper data={data}>
+      <Container
+        size="custom"
+        padding="px-4 sm:px-8"
+        className="flex flex-col items-center py-24 text-center md:py-32"
+      >
+        {data?.heading && (
+          <h2
+            data-tina-field={tinaField(data, "heading")}
+            className="max-w-3xl text-4xl text-white lg:text-6xl"
+          >
+            <AlternatingText text={data.heading} />
+          </h2>
+        )}
+        {data?.description && (
+          <div
+            data-tina-field={tinaField(data, "description")}
+            className="mt-6 max-w-sm lg:max-w-2xl"
+          >
+            <TinaMarkdown
+              content={data.description}
+              components={{
+                p: (props) => (
+                  <p
+                    {...props}
+                    className="text-base font-light text-gray-300"
+                  />
+                ),
+              }}
+            />
+          </div>
+        )}
+        <ButtonRow data={data} className="mt-8 items-center justify-center" />
+      </Container>
+    </V2ComponentWrapper>
+  );
+}

components/blocks/v3/faq/faq.schema.tsx

@@ -0,0 +1,68 @@
+import type { Template } from "tinacms";
+import alternatingHeadingSchema from "../../../blocksSubtemplates/alternatingHeading.schema";
+import { backgroundSchema } from "../../../layout/v2ComponentWrapper.schema";
+
+// Rich-text nested inside a list isn't coerced from a string, so its default
+// must be a rich-text AST object (matching accordionSchema's accordionItems).
+const answerDefault = (text: string) => ({
+  type: "root",
+  children: [{ type: "p", children: [{ type: "text", text }] }],
+});
+
+export const V3FaqSchema: Template = {
+  name: "v3Faq",
+  label: "<V3> FAQ",
+  ui: {
+    defaultItem: {
+      heading: "Frequently asked questions",
+      faqs: [
+        {
+          question: "How much does it cost?",
+          answer: answerDefault(
+            "Every engagement is scoped to your goals, so there's no single price. The Health Check and first session are free, and you'll get a clear, costed plan before you commit to anything."
+          ),
+        },
+        {
+          question: "Do you work with our existing team?",
+          answer: answerDefault("Yes — we embed alongside your team."),
+        },
+        {
+          question: "Can you rescue a project that's already in trouble?",
+          answer: answerDefault("Absolutely. We start with a Health Check."),
+        },
+      ],
+    },
+  },
+  fields: [
+    //@ts-expect-error – custom component typing won't be pinned down
+    backgroundSchema,
+    alternatingHeadingSchema,
+    {
+      type: "object",
+      label: "Questions",
+      name: "faqs",
+      list: true,
+      description: "The list of question / answer pairs.",
+      ui: {
+        itemProps: (item) => ({ label: item?.question ?? "Question" }),
+        defaultItem: {
+          question: "New question?",
+          answer: answerDefault("Answer goes here."),
+        },
+      },
+      fields: [
+        {
+          type: "string",
+          label: "Question",
+          name: "question",
+        },
+        {
+          type: "rich-text",
+          label: "Answer",
+          name: "answer",
+          toolbarOverride: ["bold", "italic", "link"],
+        },
+      ],
+    },
+  ],
+};