feat: use cf turnstile

assets/css/style.css

@@ -354,6 +354,7 @@ em {
     color: var(--primary-color);
     border-radius: 3px;
     margin-top: 2rem;
+    margin-bottom: 2rem;
 }
 
 .js-modal button {
@@ -509,11 +510,11 @@ em {
 
     .js-modal__content {
         max-width: 500px;
-        max-height: 400px;
+        max-height: 500px;
         left: 50%;
         top: 50%;
         margin-left: -250px;
-        margin-top: -200px;
+        margin-top: -250px;
         border-radius: 10px;
     }
 }

src/_includes/layouts/base.liquid

@@ -19,5 +19,6 @@
       {{ content }}
     </main>
 
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js"></script>
   </body>
 </html>

src/index.liquid

@@ -120,7 +120,8 @@ layout: layouts/base
         <h2>Join the waitlist</h2>
         <p>Currently flo is in early preview and we'll let you know when we're on the App Store.</p>
         <input id="email" type="email" placeholder="john@doe.com" required>
-        <button id="submit">Submit</button>
+        <div class="cf-turnstile" data-callback="enableSubmit" data-sitekey="0x4AAAAAAAi7bs0DROJL1xPi" data-size="flexible"></div>
+        <button id="submit" disabled>Submit</button>
     </div>
 </div>
 
@@ -133,6 +134,10 @@ const closeModal = document.getElementById('closeModal')
 const emailForm = document.getElementById('email')
 const submitButton = document.getElementById('submit')
 
+function enableSubmit() {
+  submitButton.removeAttribute('disabled')
+}
+
 openModal.onclick = function() {
     modal.style.display = 'block'