fix footer email + style footer mobile

assets/css/src/calendar-strip.css

@@ -115,7 +115,6 @@
 @media screen and (max-width: 800px) {
   .calendar-strip {
     --padding-vertical: 1rem;
-    margin-top: 2rem;
     border-top: var(--border);
   }
 

assets/css/src/footer.css

@@ -23,14 +23,23 @@
   margin-bottom: 2rem;
 }
 
+.main-footer form {
+  position: relative;
+}
+
+.main-footer form p {
+  font-weight: bold;
+}
 .main-footer form input {
   width: 100%;
   border-bottom: var(--border);
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.3rem;
 }
 
-.main-footer form input::after {
-  content: "→";
+.main-footer form button {
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 @media screen and (max-width: 800px) {
@@ -38,4 +47,15 @@
     grid-template-columns: 1fr;
     row-gap: 1rem;
   }
+
+  .main-footer .logo {
+    margin-bottom: 3rem;
+  }
+
+  .main-footer form {
+    width: 12rem;
+  }
+  .main-footer .social-icons {
+    margin-bottom: 1rem;
+  }
 }

assets/css/src/generic.css

@@ -230,7 +230,6 @@ img.show {
 .main-nav a,
 .main-nav .burger-btn,
 .main-nav .close-btn,
-.main-footer a,
 .collapsable__content a:not(.ticket-link) {
   display: block;
   scale: 1;
@@ -239,6 +238,7 @@ img.show {
 }
 
 .filters button,
+.main-footer a,
 .anchors-strip a {
   display: inline-block;
   scale: 1;

assets/css/src/hero.css

@@ -90,6 +90,13 @@
   }
 
   .hero {
+    padding: calc(var(--padding-vertical) / 1.2) var(--space-m) 2rem
+      var(--space-m) !important;
     border-bottom: none !important;
+    height: auto;
+  }
+
+  .hero__image {
+    height: 60vw;
   }
 }

site/snippets/footer.php

@@ -13,10 +13,46 @@
       </p>
     </div>
   </div>
-  <form action="">
+  <div 
+    x-data="{
+      btnMsg: 's\'inscrire',
+      submit(event) {
+        event.preventDefault()
+        
+        const email = this.$refs.emailInput.value;
+        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        
+        if (emailRegex.test(email)) {
+          const options = {
+            method: 'POST',
+            body: JSON.stringify({
+              email
+            })
+          }
+
+          fetch('/brevo-create-contact.json', options)
+            .then(res => res.json())
+            .then(json => {
+              console.log(json)
+              this.$refs.emailInput.value = 'Vous êtes inscrit !'
+              this.$refs.emailSubmit.setAttribute('disabled', 'true')
+            })
+        } else {
+          this.btnMsg = 'email invalide'
+          this.$refs.emailInput.value = ''
+          setTimeout(() => {
+            this.btnMsg = 'réessayer'
+          }, 2000)
+        } 
+      }
+    }"
+  >
     <p>S'inscrire à la newsletter</p>
-    <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email">
-  </form>
+    <form action="">
+      <input placeholder="e-mail" type="email" name="email" autocomplete="email" id="email" x-ref="emailInput">
+      <button type="submit" @click="submit" x-ref="emailSubmit">→</button>
+    </form>
+  </div>
   <div class="main-footer__infos">
     <?= $site->footerInfos() ?>
   </div>