Feat/add subscribe banner (#3731)

* feat(docs): add home page subscribe banner

* fix(docs): update contact form to support hubspot tracking data but use manual API submission to better control form state

* chore(docs): add integrity check to home page hubspot script

docs/_pages/index/_form.html

@@ -0,0 +1,89 @@
+<div class="section section-newsletter">
+  <div class="container">
+    <div class="newsletter-content">
+      <div class="subtitle">
+        Subscribe to the newsletter to hear about the latest updates, features,
+        and innovations in Terragrunt.
+      </div>
+
+      <div class="form-container">
+        <form id="custom-subscribe-form" class="custom-form" data-form-id="437b604f-ae08-40cf-b68f-707ae19ab6e9"
+          data-portal-id="8376079" data-form-id="437b604f-ae08-40cf-b68f-707ae19ab6e9" data-portal-id="8376079">
+          <div class="form-group">
+            <input type="email" name="email" placeholder="Enter your email" required class="custom-input" />
+            <button type="submit" class="btn btn-primary">
+              <span class="button-text">Subscribe</span>
+              <span class="button-loader"></span>
+            </button>
+          </div>
+        </form>
+
+        <div class="success-message">
+          <div class="checkmark">✓</div>
+          <p>Thank you for subscribing!</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script src="https://js.hsforms.net/forms/v2.js"
+  integrity="sha384-q76RAq6B4dY4CMbjZq8VvC7aCwpEKifANmGs8hSbR2p7aWzsGOhqij/8mNG7S08u"></script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const customForm = document.getElementById("custom-subscribe-form");
+    const formContainer = document.querySelector(".form-container");
+    const submitButton = document.querySelector('button[type="submit"]');
+
+    customForm.addEventListener("submit", function (e) {
+      e.preventDefault();
+      submitButton.classList.add("loading");
+
+      const email = customForm.querySelector('input[name="email"]').value;
+
+      // Submit to HubSpot using their API
+      const portalId = customForm.getAttribute("data-portal-id");
+      const formId = customForm.getAttribute("data-form-id");
+
+      const data = {
+        submittedAt: Date.now(),
+        fields: [
+          {
+            name: "email",
+            value: email,
+          },
+        ],
+        context: {
+          pageUri: window.location.href,
+          pageName: document.title,
+        },
+      };
+
+      fetch(
+        `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(data),
+        },
+      )
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error("Network response was not ok");
+          }
+          return response.json();
+        })
+        .then((result) => {
+          console.log("Success:", result);
+          formContainer.classList.add("success");
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+          submitButton.classList.remove("loading");
+        });
+    });
+  });
+</script>

docs/_pages/index/_header.html

@@ -2,19 +2,31 @@
   {% include navbar.html %}
   <div class="index-page__header">
     <div class="img-container">
-      <img src='{{site.baseurl}}/assets/img/home/[email protected]' alt='Hero' class="header-shapes-hero" />
+      <img
+        src="{{site.baseurl}}/assets/img/home/[email protected]"
+        alt="Hero"
+        class="header-shapes-hero"
+      />
     </div>
     <div class="text-container">
-        <h1>DRY and maintainable <strong>OpenTofu/Terraform</strong> code.</h1>
-        <span class='subtitle'>
-          Terragrunt is a flexible orchestration tool that allows
-          Infrastructure as Code to scale. 
-        </span>
-        <a href="{{site.baseurl}}/docs#getting-started" class='btn btn-white btn-lg'>Get Started</a>
-        <div class="header-shapes-bottom"></div>
+      <h1>DRY and maintainable <strong>OpenTofu/Terraform</strong> code.</h1>
+      <span class="subtitle">
+        Terragrunt is a flexible orchestration tool that allows Infrastructure
+        as Code to scale.
+      </span>
+      <a
+        href="{{site.baseurl}}/docs#getting-started"
+        class="btn btn-white btn-lg"
+        >Get Started</a
+      >
+      <div class="header-shapes-bottom"></div>
     </div>
   </div>
-  <div class='header-bg'>
-    <img src='{{site.baseurl}}/assets/img/home/[email protected]' alt='Shape' class="header-shapes-top" />
+  <div class="header-bg">
+    <img
+      src="{{site.baseurl}}/assets/img/home/[email protected]"
+      alt="Shape"
+      class="header-shapes-top"
+    />
   </div>
 </div>

docs/_pages/index/index.html

@@ -5,8 +5,7 @@
 ---
 
 <div class="main">
-  {% include_relative _header.html %}
-  {% include_relative _key-features.html %}
-  {% include_relative _built_by.html %}
+  {% include_relative _header.html %} {% include_relative _form.html %} {%
+  include_relative _key-features.html %} {% include_relative _built_by.html %}
   {% include links-n-use-cases.html %}
 </div>