Add buttondown form and improve styling

Author: garrettmflynn

.vitepress/theme/style.css

@@ -125,14 +125,44 @@ h2 {
 /* Custom Items */
 .callout {
   margin-top: 25px;
-
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
+  row-gap: 20px;
+  column-gap: 50px;
   padding: 30px;
   border-radius: 10px;
   border: 1px solid gray;
+
+  background: #222;
+  color: white;
+}
+
+.callout form {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 250px;
+  max-width: 500px;
+}
+
+.callout input[type="email"] {
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid darkgray;
+  background: white;
+  color: black;
+}
+
+.callout input[type="submit"] {
+  margin-top: 10px;
+  cursor: pointer;
+  color: white;
+  background: var(--vp-button-brand-bg);
+  border-radius: 5px;
+  padding: 5px;
 }
 
 .projects {
@@ -148,15 +178,17 @@ h2 {
   cursor: pointer;
   border: 1px solid darkgray;
   border-radius: 10px;
+  background: var(--vp-button-alt-bg);
 }
 
 .project h3 {
   margin: 0;
   font-size: 1.5rem;
+  color: black;
 }
 
 .project h6 {
-  color: dimgray;
+  color: var(--vp-button-alt-text);
   font-size: 0.85rem;
   margin-bottom: 5px;
 }

index.md

@@ -17,11 +17,20 @@ hero:
 We make brain-computer interfaces accessible to everyone.
 
 <div class="callout">
-  <div>
-    <h5>Interested in using our products?</h5>
-    <small>Sign up to be notified for updates and early access.</small>
-  </div>
-    <small>Coming soon...</small>
+    <div>
+      <h5>Interested in using our products?</h5>
+      <small>Sign up to be notified for updates and early access.</small>
+    </div>
+    <form
+      action="https://buttondown.com/api/emails/embed-subscribe/neuralinterfaces"
+      method="post"
+      target="popupwindow"
+      onsubmit="window.open('https://buttondown.com/neuralinterfaces', 'popupwindow')"
+      class="embeddable-buttondown-form"
+    >
+      <input type="email" name="email" placeholder="Enter your email"/>
+      <input type="submit" value="Subscribe" />
+    </form>
 </div>
 
 ## Projects
@@ -37,7 +46,7 @@ Our work at Neural Interfaces allows you to access brain-responsive applications
   </div>
 
   <div class="project">
-    <a href="https://commoners.dev" target="_blank">
+    <a href="https://github.com/neuralinterfaces/commoners" target="_blank">
       <h6>Cross-Platform Development for the Rest of Us</h6>
       <h3>Commoners</h3>
     </a>