feat: add forms woohoo! (#54)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [ ] 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

- [ ] I have run the linter and resolved any errors.
- [ ] My pull request uses an appropriate title, matching the conventional commit standards.
- [ ] 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

_No response_

Reviewed-on: https://codeberg.org/nhcarrigan/portfolio/pulls/54
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

package.json

@@ -21,6 +21,7 @@
     "@react-three/fiber": "9.0.0-beta.1",
     "crisp-sdk-web": "1.0.25",
     "next": "15.0.2",
+    "next-hubspot": "1.4.0-beta.1",
     "next-plausible": "3.12.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",

pnpm-lock.yaml

@@ -40,6 +40,9 @@ importers:
       next:
         specifier: 15.0.2
         version: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      next-hubspot:
+        specifier: 1.4.0-beta.1
+        version: 1.4.0-beta.1(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-plausible:
         specifier: 3.12.2
         version: 3.12.2(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2691,6 +2694,17 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  next-hubspot@1.4.0-beta.1:
+    resolution: {integrity: sha512-GDzyWLirrKDZcbH0k7JQuUA8O/xmxFXwLX5rp+41/mtjOzTMyz0GalvC2VZfmcNUExAqDNkvGRRDDpBTGhwb7Q==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      next: 15.0.2
+      react: 18.3.1
+      react-dom: 18.3.1
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   next-plausible@3.12.2:
     resolution: {integrity: sha512-jyOYLAdwaZZR6nrzFhN9xfVjzYOG6mIQ/LLDCfdAS99ELy759cKfNxluGo+pI2Xh9cYxTFYYZGlnkyR3IPy4yg==}
     peerDependencies:
@@ -6769,6 +6783,13 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  next-hubspot@1.4.0-beta.1(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+
   next-plausible@3.12.2(next@15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       next: 15.0.2(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)

src/app/contact/page.tsx

@@ -3,6 +3,7 @@
  * @license Naomi's Public License
  * @author Naomi Carrigan
  */
+import Script from "next/script";
 import { Rule } from "../../components/rule";
 import { Social } from "../../components/social";
 import { Donate, HireMe, Socials } from "../../config/Socials";
@@ -15,6 +16,17 @@ import type { JSX } from "react";
 const Contact = (): JSX.Element => {
   return (
     <main className="w-4/5 text-center max-w-4xl m-auto mt-16 mb-16 rounded-lg">
+      <style>
+        {`.hbspt-form {
+            max-width: 750px;
+            margin: auto;
+            background-color: #04624f;
+            border-radius: 1rem;
+            padding: 1rem;
+            margin-bottom: 100px;
+            font-family: "Fira Code", monospace;
+        }`}
+      </style>
       <h1 className="text-5xl">{`Contact Us`}</h1>
       <p>
         {`We offer many different ways to get in touch with us. This page lists
@@ -29,6 +41,9 @@ const Contact = (): JSX.Element => {
         {`With ${Socials.length.toLocaleString("en-GB")} choices, you shouldn't have any complaints!
         :3`}
       </p>
+      <p>
+        {`But if none of these work for you at all, there's a direct contact form at the bottom of this list!`}
+      </p>
       <Rule />
       <section>
         <div>
@@ -64,6 +79,17 @@ const Contact = (): JSX.Element => {
           )}
         </div>
       </section>
+      <Script
+        src="//js.hsforms.net/forms/embed/v2.js"
+        strategy="beforeInteractive"
+        type="text/javascript"
+      ></Script>
+      <Script strategy="afterInteractive">
+        {`hbspt.forms.create({
+            portalId: "47086586",
+            formId: "4db250c8-a1a7-4a62-94d7-82592fa83a58",
+        });`}
+      </Script>
     </main>
   );
 };

src/app/newsletter/page.tsx

@@ -0,0 +1,48 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+"use client";
+import Script from "next/script";
+import type { JSX } from "react";
+
+/**
+ * Renders the /polycule page.
+ * @returns A React Component.
+ */
+const Newsletter = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-4/5 text-center
+        max-w-4xl m-auto mt-16 mb-1 rounded-lg">
+        <h1 className="text-5xl">{`Newsletter`}</h1>
+        <p>{`Don't want to join our chat server? Not a fan of our other platforms for announcing product updates? You can subscribe to our newsletter to receive the same information via a regular ol' email.`}</p>
+      </main>
+      <style>
+        {`.hbspt-form {
+            max-width: 750px;
+            margin: auto;
+            background-color: #04624f;
+            border-radius: 1rem;
+            padding: 1rem;
+            margin-bottom: 100px;
+            font-family: "Fira Code", monospace;
+        }`}
+      </style>
+      <Script
+        src="//js.hsforms.net/forms/embed/v2.js"
+        strategy="beforeInteractive"
+        type="text/javascript"
+      ></Script>
+      <Script strategy="afterInteractive">
+        {`hbspt.forms.create({
+            portalId: "47086586",
+            formId: "1ed1ea33-a8f4-4956-8ccd-f72f44765ad9",
+        });`}
+      </Script>
+    </>
+  );
+};
+
+export default Newsletter;

src/app/sales/page.tsx

@@ -0,0 +1,48 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+"use client";
+import Script from "next/script";
+import type { JSX } from "react";
+
+/**
+ * Renders the /polycule page.
+ * @returns A React Component.
+ */
+const Sales = (): JSX.Element => {
+  return (
+    <>
+      <main className="w-4/5 text-center
+        max-w-4xl m-auto mt-16 mb-1 rounded-lg">
+        <h1 className="text-5xl">{`Sales Inquiry`}</h1>
+        <p>{`This form allows you to send a general sales inquiry to our team. Upon submission, you will be taken to our consultation booking page. Note that general inquiries are low priority - if you need an urgent response, you should use the booking page to schedule a paid consultation.`}</p>
+      </main>
+      <style>
+        {`.hbspt-form {
+            max-width: 750px;
+            margin: auto;
+            background-color: #04624f;
+            border-radius: 1rem;
+            padding: 1rem;
+            margin-bottom: 100px;
+            font-family: "Fira Code", monospace;
+        }`}
+      </style>
+      <Script
+        src="//js.hsforms.net/forms/embed/v2.js"
+        strategy="beforeInteractive"
+        type="text/javascript"
+      ></Script>
+      <Script strategy="afterInteractive">
+        {`hbspt.forms.create({
+            portalId: "47086586",
+            formId: "fa90d8cb-40e2-4f36-b7a8-2bda6ac1d0cb",
+        });`}
+      </Script>
+    </>
+  );
+};
+
+export default Sales;

src/config/NavItems.ts

@@ -28,6 +28,8 @@ export const NavItems = [
   { href: "/koikatsu", text: "Koikatsu Scenes" },
   { href: "/ref", text: "Reference Sheet" },
   { href: "/projects", text: "Our Projects" },
+  { href: "/sales", text: "Sales Inquiries" },
+  { href: "/newsletter", text: "Newsletter" },
 ].sort((a, b) => {
   return a.text.localeCompare(b.text);
 });