Merge pull request #88 from codiini/main

Create form for email collection

Author: fulldecent

source/_includes/email-collection.html

@@ -0,0 +1,95 @@
+<div class="email-collection-container my-5" style="padding-top:75px; padding-bottom: 75px;">
+  <div class="container">
+    <div class="row align-items-center g-4">
+      <div class="col-md-6 text-center">
+        <img
+          class="img-fluid illustration-image"
+          src="/images/email-illustration.svg"
+          alt="Illustration of an email inbox"
+          width="300"
+          height="300"
+        >
+      </div>
+      <div class="col-md-6">
+        <div class="card rounded-0 border-0 bg-white shadow-sm p-4">
+          <div class="card-body">
+            <h3 class="fw-bold mb-3 fs-2">Stay ahead of licensing changes</h3>
+            <p class="lead text-muted mb-4">
+              Get instant notifications on evolving nursing regulations that impact your practice straight to your
+              inbox.
+            </p>
+            <form id="email-subscription-form">
+              {%- include states-select.html -%}
+              <div class="mt-3">
+                <div class="input-group">
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    class="form-control form-control-lg text-black"
+                    placeholder="Enter your email address"
+                    required
+                  >
+                  <button
+                    type="submit"
+                    onclick="sendEmail(event)"
+                    class="btn btn-lg text-white"
+                    style="background-color: #0000ff;"
+                  >
+                    Stay informed
+                  </button>
+                </div>
+              </div>
+            </form>
+            <div id="subscription-message" class="mt-3 text-center small"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .email-collection-container {
+    background: #f2f2ff;
+  }
+
+  .btn-primary {
+    transition: all 0.3s ease;
+  }
+
+  .btn-primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+
+  .illustration-image {
+    transition: transform 0.3s ease;
+  }
+
+  .illustration-image:hover {
+    transform: scale(1.02);
+  }
+</style>
+
+<script>
+  function sendEmail(event) {
+    event.preventDefault();
+    const stateSelect = document.getElementById('state');
+    const selectedState = stateSelect.options[stateSelect.selectedIndex].textContent;
+    const email = document.getElementById('email').value;
+
+    if (!selectedState || selectedState === 'What state do you want to practice in?') {
+      alert('Please select a state');
+      return;
+    }
+
+    if (!email) {
+      alert('Please enter your email address');
+      return;
+    }
+
+    const mailtoUrl = `mailto:support@acls.net?subject=${encodeURIComponent('RN Mobility Email Signup')}&body=${encodeURIComponent(`Hello, I would like to sign up to receive email notifications on Nursing licensing in ${selectedState}. My email address is ${email}`)}`;
+    window.location.href = mailtoUrl;
+  }
+</script>

source/_includes/states-select.html

@@ -0,0 +1,16 @@
+<select name="state" id="state" class="form-control form-control-lg">
+  <option value="">What state do you want to practice in?</option>
+  {%- assign states = 'Alabama,Alaska,Arizona,Arkansas,California,Colorado,Connecticut,Delaware,Florida,Georgia,Hawaii,Idaho,Illinois,Indiana,Iowa,Kansas,Kentucky,Louisiana,Maine,Maryland,Massachusetts,Michigan,Minnesota,Mississippi,Missouri,Montana,Nebraska,Nevada,New Hampshire,New Jersey,New Mexico,New York,North Carolina,North Dakota,Ohio,Oklahoma,Oregon,Pennsylvania,Rhode Island,South Carolina,South Dakota,Tennessee,Texas,Utah,Vermont,Virginia,Washington,West Virginia,Wisconsin,Wyoming'
+    | split: ','
+  -%}
+  {%- assign codes = 'AL,AK,AZ,AR,CA,CO,CT,DE,FL,GA,HI,ID,IL,IN,IA,KS,KY,LA,ME,MD,MA,MI,MN,MS,MO,MT,NE,NV,NH,NJ,NM,NY,NC,ND,OH,OK,OR,PA,RI,SC,SD,TN,TX,UT,VT,VA,WA,WV,WI,WY'
+    | split: ','
+  -%}
+
+  {%- for state in states -%}
+    {%- assign index = forloop.index0 -%}
+    <option value="{{ codes[index] }}">
+      {{- state -}}
+    </option>
+  {%- endfor -%}
+</select>

source/_layouts/home.html

@@ -11,6 +11,8 @@
       <!-- Page content -->
       {{ content }}
     </div>
+    {%- include email-collection.html -%}
+
     {%- include footer.html -%}
 
     <!-- Bootstrap JS -->

source/_layouts/other.html

@@ -14,6 +14,7 @@
       {%- endif -%}
       {{ content }}
     </div>
+    {%- include email-collection.html -%}
     {%- include footer.html -%}
 
     <script

source/_layouts/page.html

@@ -16,6 +16,7 @@
         {{ content }}
       </div>
     </div>
+    {%- include email-collection.html -%}
     {%- include footer.html -%}
 
     <script