Add subscription form (#181)

Author: quantstruct-bot

fern/changelog/overview.mdx

@@ -1,3 +1,85 @@
 ---
 slug: changelog
 ---
+<Card
+  title={<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer' }} onClick={() => document.querySelector('input[type="email"]').focus()}>Get the (almost) daily changelog</div>}
+  icon="envelope"
+  iconType="solid"
+>
+  <form
+    method="POST"
+    action="https://customerioforms.com/forms/submit_action?site_id=TBD&form_id=TBD&success_url=https://docs.vapi.ai/changelog"
+    className="subscribe-form"
+    style={{margin: '1rem 0'}}
+    onSubmit={(e) => {
+      const emailInput = document.getElementById('email_input');
+      const emailValue = emailInput.value;
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (!emailPattern.test(emailValue)) {
+        e.preventDefault();
+        alert('Please enter a valid email address.');
+      }
+    }}
+  >
+    <div className="flex gap-2" style={{ paddingLeft: '0.5rem' }}>
+      <label htmlFor="email_input" style={{ display: 'none' }}>E-mail address</label>
+      <input
+        id="email_input"
+        type="email"
+        name="email"
+        placeholder="Enter your email"
+        required
+        style={{
+          border: '1px solid #e2e8f0',
+          borderRadius: '0.375rem',
+          padding: '0.5rem 1rem',
+          width: '100%',
+          fontSize: '0.875rem',
+          outline: 'none',
+          transition: 'border-color 0.2s ease-in-out',
+          ':focus': {
+            borderColor: '#4f46e5',
+            boxShadow: '0 0 0 1px #4f46e5'
+          },
+          '@media (prefers-color-scheme: dark)': {
+            backgroundColor: '#1f2937',
+            borderColor: '#374151',
+            color: '#f3f4f6',
+            ':focus': {
+              borderColor: '#6366f1',
+              boxShadow: '0 0 0 1px #6366f1'
+            }
+          }
+        }}
+      />
+      <button
+        type="submit"
+        style={{
+          backgroundColor: '#37aa9d', // Match the theme color
+          color: 'white',
+          fontWeight: 500,
+          padding: '0.5rem 1rem',
+          borderRadius: '0.375rem',
+          border: 'none',
+          cursor: 'pointer',
+          transition: 'all 0.2s ease-in-out',
+          ':hover': {
+            backgroundColor: '#2e8b7d', // Slightly darker shade for hover
+            transform: 'translateY(-1px)'
+          },
+          ':active': {
+            transform: 'translateY(0)'
+          },
+          '@media (prefers-color-scheme: dark)': {
+            backgroundColor: '#94ffd2', // Match the dark theme color
+            ':hover': {
+              backgroundColor: '#7cd9b0' // Slightly darker shade for hover in dark mode
+            }
+          }
+        }}
+      >
+        Submit
+      </button>
+    </div>
+  </form>
+</Card>