chore: now we have hubspot!

Signed-off-by: blam <ben@blam.sh>

microsite/core/HubSpotForm.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export class HubSpotForm extends React.Component {
+  render() {
+    return (
+      <>
+        <script src="https://js.hsforms.net/forms/v2.js" />
+        <div
+          className="Sidebar__Container"
+          dangerouslySetInnerHTML={{
+            __html: `
+          <button class="Sidebar__Button" onclick="toggleFormVisibility()">New Adopters</button>
+          <div id="Sidebar__HubSpotContainer"></div>
+        `,
+          }}
+        />
+        <script
+          type="text/javascript"
+          dangerouslySetInnerHTML={{
+            __html: `
+          if (typeof window !== undefined) {
+            window.hbspt.forms.create({
+              portalId: '21894833',
+              formId: '9a5aa2af-87f3-4a44-819f-88ee243bb61e',
+              target: '#Sidebar__HubSpotContainer',
+              pageId: '79735607665',
+            })
+          }
+
+          function toggleFormVisibility() {
+            var form = document.querySelector('.Sidebar__Container');
+            form.classList.toggle('Sidebar__Container--open');
+          }
+          `,
+          }}
+        ></script>
+      </>
+    );
+  }
+}

microsite/core/Typeform.js

@@ -1,26 +0,0 @@
-import React from 'react';
-
-export class Typeform extends React.Component {
-  componentDidMount() {
-    console.log('ere');
-  }
-  render() {
-    return (
-      <div>
-        <div id="hubspotForm"></div>
-        
-        <script src="https://js.hsforms.net/forms/v2.js" />
-        <script type="text/javascript" dangerouslySetInnerHTML={{ __html: `function setupForm() {
-            if (typeof window !== undefined) {
-                window.hbspt.forms.create({
-                portalId: '21894833',
-                formId: '9a5aa2af-87f3-4a44-819f-88ee243bb61e',
-                target: '#hubspotForm',
-                pageId: '79735607665',
-              })
-            }}` }}>
-        </script>
-      </div>
-    );
-  }
-}

microsite/static/css/custom.css

@@ -1227,3 +1227,66 @@ code {
 h3.collapsible span.arrow {
   margin-right: 4px;
 }
+
+.Sidebar__Container {
+  top: 50%;
+  right: 0;
+  position: fixed;
+  color: rgb(0, 0, 0);
+  transition: transform 250ms ease-in-out;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%) translateX(500px);
+}
+
+.Sidebar__Container--open {
+  transform: translateY(-50%);
+}
+
+.Sidebar__Button {
+  transform: rotate(-90deg) translateY(48px);
+  padding: 12px 16px;
+  border-radius: 8px 8px 0 0;
+  background-color: rgb(92, 214, 200);
+  color: rgb(0, 0, 0);
+  outline: 0;
+  border: 0;
+  font-family: Helvetica Neue, sans-serif;
+  max-height: 48px;
+  max-width: 150px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.Sidebar__Button:hover {
+  transform: rotate(-90deg) translateY(48px) scale(1.01);
+}
+
+#Sidebar__HubSpotContainer {
+  width: 500px;
+  background-color: white;
+  border-radius: 8px 0 0 8px;
+  padding: 16px;
+  padding-bottom: 0px;
+  z-index: 10001;
+  min-height: 260px;
+}
+
+#Sidebar__HubSpotContainer .hs-button {
+  padding: 12px 16px;
+  border-radius: 8px;
+  background-color: rgb(92, 214, 200);
+  color: rgb(0, 0, 0);
+  border: 0;
+}
+#Sidebar__HubSpotContainer.submitted-message {
+  min-height: 260px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 16px;
+}
+
+#Sidebar__HubSpotContainer.submitted-message p {
+  color: rgb(0, 0, 0);
+}