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=***
 

.gitignore

@@ -14,6 +14,9 @@ public/admin/.gitignore
 # testing
 /coverage
 
+# playwright-mcp scratch output (snapshots, console logs, screenshots)
+.playwright-mcp/
+
 # next.js
 /.next/
 /out/

app/api/lead-capture/route.ts

@@ -0,0 +1,73 @@
+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`. An array value is a multi-option field, encoded
+ * as `submission[{qid}][{index}]=value` (e.g. location → country + state).
+ */
+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 (Array.isArray(value)) {
+        value.forEach((entry, index) => {
+          if (entry != null && entry !== "") {
+            body.append(`submission[${qid}][${index}]`, String(entry));
+          }
+        });
+      } else 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) {

app/consulting/index.tsx

@@ -23,6 +23,11 @@ export default function ConsultingIndex({ tinaProps }) {
   const categories = useMemo(() => {
     return node.categories.reduce((acc, curr) => {
       const mappedPages = curr.pages.reduce((pageAcc, p) => {
+        // Skip entries with neither an external URL nor a linked page —
+        // otherwise reading p.page.id below crashes the build prerender.
+        if (!p.externalUrl && !p.page?.id) {
+          return pageAcc;
+        }
         const mappedPage = {
           url:
             p.externalUrl ||

components/blocks-renderer.tsx

@@ -160,6 +160,62 @@ 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 V3VideoHighlights = dynamic(() =>
+  import("./blocks/v3/videoHighlights/videoHighlights").then(
+    (mod) => mod.V3VideoHighlights
+  )
+);
+
+const V3CardCarousel = dynamic(() =>
+  import("./blocks/v3/cardCarousel/cardCarousel").then(
+    (mod) => mod.V3CardCarousel
+  )
+);
+
 const componentMap = {
   AboutUs,
   Carousel,
@@ -198,6 +254,18 @@ const componentMap = {
   TechnologyCardCarousel,
   Spacer,
   UtilityButton,
+  V3Hero,
+  V3LogoCarousel,
+  V3FeatureSteps,
+  V3Process,
+  V3Statistics,
+  V3Cta,
+  V3Testimonials,
+  V3StackCards,
+  V3Faq,
+  V3LeadCapture,
+  V3VideoHighlights,
+  V3CardCarousel,
 };
 
 export const Blocks = ({ prefix, blocks }) => {

components/blocks/index.ts

@@ -54,12 +54,36 @@ 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 { V3VideoHighlightsSchema } from "./v3/videoHighlights/videoHighlights.schema";
+import { V3CardCarouselSchema } from "./v3/cardCarousel/cardCarousel.schema";
 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,
+  V3VideoHighlightsSchema,
+  V3CardCarouselSchema,
   BreadcrumbSchema,
   ImageTextBlockSchema,
   LogoCarouselSchema,