Build page on /solutions/cloud-native-development

package.json

@@ -35,7 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "1.79.0",
-    "vanilla-framework": "4.20.2"
+    "vanilla-framework": "4.21.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

static/js/modals.js

@@ -309,3 +309,26 @@ function getCustomFields(event) {
   const textarea = document.getElementById("Comments_from_lead__c");
   textarea.value = message;
 }
+
+// Fix Tab and modal js conflicts
+(function () {
+  document.querySelectorAll(".p-tabs__link").forEach((tab) => {
+    tab.addEventListener("click", function (event) {
+      event.preventDefault();
+
+      document.querySelectorAll(".p-tabs__link").forEach((t) => {
+        t.setAttribute("aria-selected", "false");
+        t.setAttribute("tabindex", "-1");
+      });
+      this.setAttribute("aria-selected", "true");
+      this.removeAttribute("tabindex");
+
+      document
+        .querySelectorAll("[role='tabpanel']")
+        .forEach((panel) => (panel.style.display = "none"));
+      document.getElementById(
+        this.getAttribute("aria-controls")
+      ).style.display = "block";
+    });
+  });
+})();

templates/solutions/cloud-native-development/form-data.json

@@ -0,0 +1,39 @@
+{
+  "form": {
+    "/solutions/cloud-native-development": {
+      "templatePath": "/solutions/cloud-native-development/index.html",
+      "isModal": true,
+      "modalId": "cloud-native-development-modal",
+      "formData": {
+        "title": "Get in touch",
+        "formId": "6134",
+        "returnUrl": "/solutions/cloud-native-development#contact-form-success",
+        "product": ""
+      },
+      "fieldsets": [
+        {
+          "title": "Contact Canonical to discuss your app modernization needs and find out how our open source technologies can help you.",
+          "id": "about-you",
+          "noCommentsFromLead": true,
+          "fields": [
+            {
+              "type": "tel",
+              "id": "phone",
+              "label": "Phone number"
+            },
+            {
+              "type": "text",
+              "id": "company",
+              "label": "Company"
+            },
+            {
+              "type": "text",
+              "id": "title",
+              "label": "Job title"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}