feat: remove hubspot and create our own dialog CTA (#2)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

Minor - My pull request introduces a new non-breaking feature.

Reviewed-on: #2
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

.vscode/settings.json

@@ -2,5 +2,11 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["typescript"]
+  "eslint.validate": [
+    "typescript"
+  ],
+  "sonarlint.connectedMode.project": {
+    "connectionId": "nhcarrigan",
+    "projectKey": "nhcarrigan_website-headers"
+  }
 }

eslint.config.js

@@ -12,7 +12,8 @@ export default [
   },
   {
     rules: {
-      "no-console": "off"
+      "no-console": "off",
+      "max-lines": "off"
     }
   }
 ];

src/index.ts

@@ -165,7 +165,7 @@ footer {
   position: fixed;
   bottom: 0;
   height: 75px;
-  padding-left: 100px;
+  padding: 0 10px;
 }
 a {
   color: unset;
@@ -185,9 +185,6 @@ a {
   #tree-nation-offset-website {
     display: none;
   }
-  footer {
-    padding-right: 100px;
-  }
 }
 `;
 
@@ -221,6 +218,7 @@ videoOverlay.style.opacity = "0.25";
 videoOverlay.style.width = "100vw";
 videoOverlay.style.height = "100vh";
 videoOverlay.style.objectFit = "cover";
+videoOverlay.style.zIndex = "10000";
 
 // #endregion
 
@@ -249,11 +247,6 @@ const interval = setInterval(() => {
 `;
 const fontAwesome = document.createElement("script");
 fontAwesome.src = "https://kit.fontawesome.com/f949111719.js";
-const hubspot = document.createElement("script");
-hubspot.src = "https://js.hs-scripts.com/47086586.js";
-hubspot.async = true;
-hubspot.defer = true;
-hubspot.id = "hs-script-loader";
 const analytics = document.createElement("script");
 analytics.defer = true;
 analytics.setAttribute("domain", "nhcarrigan.com");
@@ -293,7 +286,6 @@ head?.appendChild(styles);
 
 head?.appendChild(treeNation);
 head?.appendChild(fontAwesome);
-head?.appendChild(hubspot);
 head?.appendChild(analytics);
 head?.appendChild(analytics2);
 
@@ -318,3 +310,64 @@ playButton?.addEventListener("click", () => {
     playButton.innerHTML = "<i class=\"fa-solid fa-pause\"></i>";
   }
 });
+
+// #endregion
+
+// #region CTA
+
+const cta = document.createElement("dialog");
+cta.style.position = "fixed";
+cta.style.top = "50%";
+cta.style.left = "50%";
+cta.style.transform = "translate(-50%, -50%)";
+cta.style.padding = "10px";
+cta.style.borderRadius = "10px";
+cta.style.backgroundColor = "var(--background)";
+cta.style.color = "var(--foreground)";
+cta.style.textAlign = "center";
+cta.style.width = "95%";
+cta.style.maxWidth = "400px";
+cta.id = "community-cta";
+cta.innerHTML = `
+  <h1 autofocus>Hello~!</h1>
+  <div style="display: flex; justify-content: space-around; margin-bottom: 10px;">
+    <img src="https://cdn.nhcarrigan.com/profile.png" alt="Naomi Carrigan" style="width: 100px; height: 100px; border-radius: 50%;">
+    <p>
+      Consider joining our community so you can keep up to date on all of our latest activities!
+    </p>
+  </div>
+  <a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer" style="padding: 10px; background: var(--foreground); color: var(--background); outline: none">Okay, take me there~!</a>
+`;
+
+const modalBg = document.createElement("div");
+modalBg.style.zIndex = "4999";
+modalBg.style.position = "fixed";
+modalBg.style.top = "0";
+modalBg.style.left = "0";
+modalBg.style.width = "100vw";
+modalBg.style.height = "100vh";
+modalBg.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+modalBg.style.display = "none";
+modalBg.id = "modal-bg";
+const closeModal = (): void => {
+  cta.close();
+  modalBg.style.display = "none";
+};
+const handleModalClick = (event: MouseEvent): void => {
+  event.stopPropagation();
+  if (event.target === cta) {
+    closeModal();
+  }
+};
+const showModal = (): void => {
+  cta.showModal();
+  modalBg.style.display = "block";
+  modalBg.addEventListener("click", closeModal);
+  const closeButton = cta.querySelector("button");
+  closeButton?.addEventListener("click", closeModal);
+  cta.addEventListener("click", handleModalClick);
+};
+
+body?.appendChild(cta);
+body?.appendChild(modalBg);
+showModal();