Add listmonk mailing list form

src/app/club/page.tsx

@@ -94,15 +94,37 @@ export default function Club() {
         </div>
         <div className="lg:pl-20">
           <ul role="list">
-            <SocialLink href="/WSCC-Membership-Form.pdf" icon={UserPlusIcon}>
-              Membership Form
-            </SocialLink>
-            <SocialLink href="https://groups.orcashub.org/invites/YkP79vjDtz" icon={AtSymbolIcon} className="mt-4">
-              Club Member Mailing List
-            </SocialLink>
-            <SocialLink href="https://groups.orcashub.org/invites/Lg87tP3G2V" icon={AtSymbolIcon} className="mt-4">
-              West Sound Neighbor to Neighbor Mailing List
-            </SocialLink>
+            <form method="post" action="https://lists.orcas.community/subscription/form" className="listmonk-form">
+              <div className="flex flex-col gap-y-2">
+                <h3 className="text-lg font-semibold text-gray-900">Join our mailing list</h3>
+                <input type="hidden" name="nonce" />
+                <div>
+                  <label htmlFor="email" className="sr-only">Email</label>
+                  <input
+                    type="email"
+                    name="email"
+                    id="email"
+                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    placeholder="you@example.com" />
+                </div>
+                <div>
+                  <label htmlFor="name" className="sr-only">Name</label>
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                    placeholder="Jane Doe" />
+                </div>
+                <input className="hidden" type="checkbox" name="l" checked value="ea5f1e67-2ff0-4762-8893-0645e93a8306" />
+                <input
+                  className="w-full rounded-md flex justify-center border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  id="submit"
+                  type="submit"
+                  value="Subscribe"
+                />
+              </div>
+            </form>
             <SocialLink
               href="mailto:contact@westsoundhall.org"
               icon={EnvelopeIcon}

src/app/club/payment.tsx

@@ -279,7 +279,7 @@ function CheckoutForm({
           </h2>
 
           <div className="rounded-md mb-3 px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-200 focus-within:ring-2 focus-within:ring-indigo-600">
-            <label htmlFor="name" className="block text-xs font-medium text-gray-900">
+            <label htmlFor="email" className="block text-xs font-medium text-gray-900">
               Email
             </label>
             <input