v1.0.1 - contact form needs testing

2021-11-15 16:54:24 +01:00 · 2021-11-15 16:54:24 +01:00 · 98d92d6946
commit 98d92d6946
parent 03d2367ce0
42 changed files with 847 additions and 329 deletions
--- a/src/_data/reviews.js
+++ b/src/_data/reviews.js
@ -1,6 +1,23 @@
-module.exports = [ 
-    { name: 'Bob S', quote: 'Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', stars: 3, site: 'Google Play', link: '' }, 
-    { name: 'Phil C', quote: 'otam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt', stars: 3.5, site: 'App Store', link: '' }, 
-    { name: 'Henk W', quote: 'Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id', stars: 4, site: 'App Store', link: '' }, 
-    { name: 'Jaap M', quote: 'Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit', stars: 5, site: 'Google Play', link: '' } 
-  ]
+module.exports = [
+  {
+    name: 'Andre Taris',
+    quote: 'I am a designer and researcher and as part of TU Delft’s medical design major you get to do a surgical level anatomy class at Erasmus hospital. A world first and leader in this type of collab this involved full dissection training of us medical designers and common procedure run throughs. Laparoscopic training and this is more thorough than most doctors gets hands on. This app aids at that level',
+    stars: 5,
+    site: 'App Store',
+    link: ''
+  },
+  {
+    name: 'Anthony Horsley',
+    quote: 'I\'m homeschooled and this is awesome!',
+    stars: 5,
+    site: 'App Store',
+    link: ''
+  },
+  {
+    name: 'Tom van Vugt',
+    quote: 'As a physical therapist this is one of the better apps out there for learning human anatomy, I tried multiple, but this one is easy to use and runs smoothly with lots of options.',
+    stars: 5,
+    site: 'App Store',
+    link: ''
+  }
+]
--- a/src/_data/site.json
+++ b/src/_data/site.json
@ -1,8 +1,8 @@
 {
-  "site_name": "Visual Anatomy 3d",
-  "title": "Visual Anatomy 3d",
+  "site_name": "Visual Anatomy 3D",
+  "title": "Visual Anatomy 3D",
  "description": "Learn human anatomy quickly and easily by zooming, panning, hiding layers and interacting in real time.",
-  "url": "http://www.humananatomy3d.app/",
+  "url": "https://humananatomy3d.app/",
  "locale": "en",
  "author": "Spencer Flagg"
-}
+}
--- a/src/_includes/blurb.ejs
+++ b/src/_includes/blurb.ejs
@ -1,8 +1,12 @@
 <article class="blurb__wrapper">
    <section>
        <p>
-            Learn human anatomy <em>quickly and easily</em> by zooming, panning, hiding layers and interacting in real
-            time.
+            <em>Complete</em> and <em>easy-to-use</em> virtual guide for learning, understanding, and visualizing the complexities of human anatomy in 3D.
+            Includes information and images for each anatomical system and part, multiple options to interact with the <em>3D anatomy</em> models (hiding, fading, etc), and much more.
+        </p>
+        <p class="hide-on-mobile">
+            The <%= site.site_name %> app can be downloaded and tested for free, which contains the skeleton and ligaments, other anatomical systems can be purchased separately.
+            The anatomy app is available on <em>most platforms</em> (android, iOS, windows and mac) and can be used on your phone, tablet or desktop pc.
        </p>
    </section>
    <section>
--- a/src/_includes/contact.ejs
+++ b/src/_includes/contact.ejs
@ -5,18 +5,21 @@
    <section>
        <!-- action="https://humananatomy3d.app/app/php/email/v1/SendSupportMailFromWebsite.php" -->
        <div class="form">
-            <input type="text" placeholder="👉 your email address goes here" id="fromEmail">
-            <span class="form-alert" id="emailError">your email address isn't valid 👆</span>
-            <textarea placeholder="👇 your message goes here" id="message">
+            <input type="text" placeholder="your email address goes here" id="fromEmail">
+            <span class="alert form-alert" id="emailError">your email address isn't valid</span>
+            <textarea placeholder="your message goes here" id="message">
            </textarea>
-            <button class="btn btn--contact" type="submit" id="contactSubmit" disabled>send <svg
+            <button class="btn btn--contact" type="submit" id="contactSubmit">send <svg
                    xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="32" height="32"
                    viewBox="0 0 24 24" stroke-width="2" stroke="#ffffff" fill="none" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <line x1="10" y1="14" x2="21" y2="3" />
                    <path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
-                </svg></button>
+                </svg>
+            </button>
+            <span class="alert form-alert alert--failure" id="otherError">Something went wrong. Try us on <a href="https://twitter.com/graphicvizion" target="_blank" style="font-weight: 600; color: #eee; text-decoration: underline;">Twitter</a> instead.</span>
+            <span class="alert form-alert alert--success" id="success">Thanks! We'll contact you shortly.</span>
        </div>
    </section>
 </article>
--- a/src/_includes/download.ejs
+++ b/src/_includes/download.ejs
@ -5,7 +5,7 @@
        </h1>
    </header>
    <section class="download__content">
-        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
+        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">
            <% include /store-icons/ios.svg %>
                <h2>
                    iOS
@ -14,7 +14,7 @@
                    go to store
                </div>
            </a>
-        <a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr">
+        <a class="platform__wrapper" href="https://play.google.com/store/apps/details?id=com.graphicvizion.visualAnatomyHumanFr" target="_blank">
            <% include /store-icons/android.svg %>
                <h2>
                    Android
@ -23,7 +23,7 @@
                    go to store
                </div>
            </a>
-        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602">
+        <a class="platform__wrapper" href="https://apps.apple.com/il/app/visual-anatomy-3d-human/id1148048602" target="_blank">
            <% include /store-icons/macos.svg %>
                <h2>
                    macOS
@ -32,7 +32,7 @@
                    go to store
                </div>
        </a>
-        <a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21">
+        <a class="platform__wrapper" href="https://www.microsoft.com/en-us/p/visual-anatomy-human-body/9nblggh4qg21" target="_blank">
            <% include /store-icons/windows.svg %>
                <h2>
                    Windows
--- a/src/_includes/footer.ejs
+++ b/src/_includes/footer.ejs
@ -63,7 +63,7 @@
                    Play Store
                </a>
            </li>
-            <li><a href="https://www.graphicvizion.com/policies/visualacupunctureprivacypolicy.html" target="_blank">
+            <li><a href="https://humananatomy3d.app/app/policies/privacypolicy.html" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye-off" width="32"
                        height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
@ -74,7 +74,7 @@
                            d="M9.363 5.365a9.466 9.466 0 0 1 2.637 -.365c4 0 7.333 2.333 10 7c-.778 1.361 -1.612 2.524 -2.503 3.488m-2.14 1.861c-1.631 1.1 -3.415 1.651 -5.357 1.651c-4 0 -7.333 -2.333 -10 -7c1.369 -2.395 2.913 -4.175 4.632 -5.341" />
                    </svg>
                    Privacy Policy</a></li>
-            <li><a href="https://www.graphicvizion.com/policies/visualacupuncturetermsofuse.html" target="_blank"><svg
+            <li><a href="https://humananatomy3d.app/app/policies/termsofuse.html" target="_blank"><svg
                        xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-news" width="32"
                        height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none"
                        stroke-linecap="round" stroke-linejoin="round">
--- a/src/_includes/hero.ejs
+++ b/src/_includes/hero.ejs
@ -25,6 +25,6 @@
                <path id="rect22" style="fill:#ffffff;fill-rule:evenodd;stroke-width:0.116947"
                    d="M 9.9999058,0 A 10,10 0 0 1 0,10.000422 h 9.9999058 z" />
            </svg>
-            <h1 class="h1--hero">muscles, bones, organs and blood vessels in 3D</h1>
+            <h1 class="h1--hero">Interactive human anatomy in real-time 3D</h1>
        </div>
 </div>
--- a/src/_includes/info.ejs
+++ b/src/_includes/info.ejs
@ -21,6 +21,9 @@
            <li>
                highly detailed
            </li>
+            <li>
+                fully searchable
+            </li>
            <li>
                zoom, pan, and rotate in real time
            </li>
@ -28,7 +31,10 @@
                show and hide layers
            </li>
            <li>
-                get details for each body part
+                see details for each body part
+            </li>
+            <li class="hide-on-mobile">
+                add custom notes
            </li>
        </ul>
    </section>
--- a/src/_includes/layouts/base.ejs
+++ b/src/_includes/layouts/base.ejs
@ -129,16 +129,22 @@

      const fromEmail = document.getElementById('fromEmail');
      const message = document.getElementById('message');
-      const alert = document.getElementById('emailError');
+      const emailError = document.getElementById('emailError');
+      const otherError = document.getElementById('otherError');
+      const success = document.getElementById('success');
      const contactSubmit = document.getElementById('contactSubmit');

-      if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(fromEmail.value)) {
-        contactSubmit.disabled = false;
-        alert.classList.remove('form-alert--visible');
-      } else {
-        contactSubmit.disabled = true;
-        alert.classList.add('form-alert--visible');
-      }
+      // if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(fromEmail.value)) {
+      //   contactSubmit.disabled = false;
+      //   alert.classList.remove('form-alert--visible');
+      // } else {
+      //   contactSubmit.disabled = true;
+      //   alert.classList.add('form-alert--visible');
+      // }
+
+      emailError.classList.remove('form-alert--visible');
+      otherError.classList.remove('form-alert--visible');
+      success.classList.remove('form-alert--visible');

    });

@ -146,33 +152,107 @@

      const fromEmail = document.getElementById('fromEmail');
      const message = document.getElementById('message');
-      const alert = document.getElementById('emailError');
+      const emailError = document.getElementById('emailError');
+      const otherError = document.getElementById('otherError');
+      const success = document.getElementById('success');

-      var details = {
-        'hash': md5(fromEmail.value + '89745378945667832'),
-        'fromEmail': fromEmail.value,
-        'message': message.value
-      };
+      if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(fromEmail.value)) {
+        /* succeeded */
+        emailError.classList.remove('form-alert--visible');

-      var formBody = [];
-      for (var property in details) {
-        var encodedKey = encodeURIComponent(property);
-        var encodedValue = encodeURIComponent(details[property]);
-        formBody.push(encodedKey + "=" + encodedValue);
+        var details = {
+          'hash': md5(fromEmail.value + '89745378945667832'),
+          'fromEmail': fromEmail.value,
+          'message': message.value
+        };
+
+        var formBody = [];
+        for (var property in details) {
+          var encodedKey = encodeURIComponent(property);
+          var encodedValue = encodeURIComponent(details[property]);
+          formBody.push(encodedKey + "=" + encodedValue);
+        }
+        formBody = formBody.join("&");
+
+        try {
+          
+        fetch('https://humananatomy3d.app/app/php/email/v1/SendSupportMailFromWebsite.php', { mode: 'no-cors' }, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: formBody,
+        })
+          .then(response => {
+            if(response.status === 200){
+              return response.json();
+            } else {
+              otherError.classList.add('form-alert--visible');
+            }
+          })
+          .then(data => {
+            switch (data) {
+              case "succesSendingSupportEmail":
+                success.classList.add('form-alert--visible');
+                emailError.classList.remove('form-alert--visible');
+                otherError.classList.remove('form-alert--visible');
+                fromEmail.value = '';
+                message.value = '';
+                break;
+              case "invalidEmailAdres":
+                emailError.classList.add('form-alert--visible');
+                break;
+              case "failedSendingSupportEmail":
+              case "failedH":
+                otherError.classList.add('form-alert--visible');
+                break;
+              default:
+                break;
+            }
+            console.log(data)
+          });
+
+        } catch (error) {
+          otherError.classList.add('form-alert--visible');
+        }
+
+      } else {
+        /* failed */
+        emailError.classList.add('form-alert--visible');
      }
-      formBody = formBody.join("&");
-
-      fetch('https://humananatomy3d.app/app/php/email/v1/SendSupportMailFromWebsite.php', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        body: formBody,
-      })
-        .then(response => response.json())
-        .then(data => console.log(data));

    });
+
+    // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/flexgap.js
+
+    function checkFlexGap() {
+      // create flex container with row-gap set
+      var flex = document.createElement("div");
+      flex.style.display = "flex";
+      flex.style.flexDirection = "column";
+      flex.style.rowGap = "1px";
+
+      // create two, elements inside it
+      flex.appendChild(document.createElement("div"));
+      flex.appendChild(document.createElement("div"));
+
+      // append to the DOM (needed to obtain scrollHeight)
+      document.body.appendChild(flex);
+      var isSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+      //flex.parentNode.removeChild(flex);
+
+      return isSupported;
+    }
+
+    console.log(checkFlexGap());
+
+    if (checkFlexGap()) {
+      document.documentElement.classList.add("flexbox-gap");
+    } else {
+      document.documentElement.classList.add("no-flexbox-gap");
+    }
+
+
  </script>


@ -183,6 +263,7 @@
 <style>
  .site-logo {
    height: 5rem;
+    width: 5rem;
    transform: rotateZ(0deg) translateY(0.4rem);
    transition: 0.2s all;
    border: 3px solid var(--c-1);
@ -200,6 +281,10 @@
    gap: 1rem;
  }

+  .no-flexbox-gap .site-header>*:not(:last-child) {
+    margin-right: 1rem;
+  }
+
  .site-title {
    font-family: Bebas Neue;
    font-style: normal;
--- a/src/_includes/pricing.ejs
+++ b/src/_includes/pricing.ejs
@ -172,7 +172,7 @@
                <h2>
                    lifetime
                    <span>
-                        
+                     full version
                    </span>
                </h2>
            </header>
--- a/src/_includes/screenshots.ejs
+++ b/src/_includes/screenshots.ejs
@ -4,7 +4,8 @@
            Hi-res imagery everywhere you need it
        </h1>
        <aside>
-            Visual Anatomy 3d runs portrait and landscape, on all your devices.
+            The <%= site.site_name %> app is currently available for iOS and Android, with desktop support added later.
+            The app supports portrait mode, text-scaling, and it includes 3 color themes.
        </aside>
    </header>
    <section>
--- a/src/_includes/system-icons/circulatory.svg
+++ b/src/_includes/system-icons/circulatory.svg
--- a/src/_includes/system-icons/digestive.svg
+++ b/src/_includes/system-icons/digestive.svg
--- a/src/_includes/system-icons/endocrine.svg
+++ b/src/_includes/system-icons/endocrine.svg
--- a/src/_includes/system-icons/integumentary.svg
+++ b/src/_includes/system-icons/integumentary.svg
--- a/src/_includes/system-icons/ligamentous.svg
+++ b/src/_includes/system-icons/ligamentous.svg
--- a/src/_includes/system-icons/lymphatic.svg
+++ b/src/_includes/system-icons/lymphatic.svg
--- a/src/_includes/system-icons/muscular.svg
+++ b/src/_includes/system-icons/muscular.svg
--- a/src/_includes/system-icons/nervous.svg
+++ b/src/_includes/system-icons/nervous.svg
--- a/src/_includes/system-icons/respiratory.svg
+++ b/src/_includes/system-icons/respiratory.svg
--- a/src/_includes/system-icons/skeletal.svg
+++ b/src/_includes/system-icons/skeletal.svg
--- a/src/_includes/system-icons/urogenital.svg
+++ b/src/_includes/system-icons/urogenital.svg
--- a/src/_includes/systems.ejs
+++ b/src/_includes/systems.ejs
@ -1,10 +1,11 @@
 <article class="system__wrapper">
    <header>
        <h1 id="systems">
-            6 detailed body systems
+            <%= systems.filter(system => system.status !== 'soon').length %> detailed body systems
        </h1>
        <aside>
-            Switch between all systems of the body with the push of a button
+            The <%= site.site_name %> app includes <strong><%= systems.filter(system => system.status !== 'soon').length %></strong> body systems, which can be hidden or shown (in layers) and colored to easily distinguish the individual anatomical parts.
+            All body systems can be viewed individually or in customizable combinations.
        </aside>
    </header>
    <section>
@ -12,8 +13,8 @@
            <% systems.forEach((system, index)=> { %>
                <li onclick="zoom('<%= system.slug %>')"
                    class="system system--<%= system.slug %> system--<%= system.status %> <%= index === 0 ? 'system--selected' : '' %>">
-                    <img src="/assets/images/systems/icons/<%= system.slug %>.png" alt="<%= system.name %>"
-                        title="<%= system.name %>">
+                    
+                    <%- include('/system-icons/'+system.slug+'.svg') %>
                    <span>
                        <%= system.name %>
                    </span>
@ -23,7 +24,7 @@
        <div class="system__zoom-wrapper">
            <img class="zoom__image--bkg %>"
                src="/assets/images/systems/layers/bkg.png" alt="background">
-            <% systems.forEach((system, index)=> { %>
+            <% systems.filter(system => system.status !== 'soon').forEach((system, index)=> { %>
                <img class="zoom__image zoom__image--<%= system.slug %> <%= index === 0 ? 'zoom__image--visible' : '' %>"
                    src="/assets/images/systems/layers/<%= system.slug %>.png" alt="<%= system.name %>"
                    title="<%= system.name %>">
--- a/src/assets/styles/_blurb.css
+++ b/src/assets/styles/_blurb.css
@ -2,7 +2,6 @@ article.blurb__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
-    padding: 2rem 4rem;
 }

 .blurb__wrapper section {
@ -11,24 +10,40 @@ article.blurb__wrapper {
    justify-content: center;
    align-items: center;
    position: relative;
+    gap: 1.5rem;
+}
+
+.no-flexbox-gap .blurb__wrapper section > *:not(:last-child) {
+    margin-bottom: 1.5rem;
 }

 .blurb__wrapper p {
    font-family: Nunito, sans-serif;
-    font-size: max(1.5rem, 12pt);
+    font-size: max(1.2rem, 10pt);
 }

+@media screen and (max-width: 768px) {
+    .hide-on-mobile {
+        display: none;
+    }
+}
+
+
 .blurb__wrapper p em {
-    background-color: var(--c-3);
-    padding: 0 .25em;
+    /* background-color: var(--c-3);
+    padding: 0 .25em; */
    font-style: normal;
+    font-weight: 800;
 }

 .before-and-after {
+    --ratio: 781/1347;
+    /* --ratio: 1347/781; */
+    --height: 30rem;
    position: relative;
-    height: 25rem;
-    width: calc(25rem * (781/1347));
-    aspect-ratio: 781/1347;
+    height: var(--height);
+    width: calc(var(--height) * var(--ratio));
+    aspect-ratio: var(--ratio);
    border: 2px solid white;
    border-radius: var(--r-1);
    overflow: hidden;
@ -49,7 +64,7 @@ article.blurb__wrapper {
    appearance: none;
    width: 100%;
    height: 100%;
-    background: rgba(242, 242, 242, 0.3);
+    background: rgba(168, 96, 96, 0);
    outline: none;
    margin: 0;
    transition: all 0.2s;
--- a/src/assets/styles/_contact.css
+++ b/src/assets/styles/_contact.css
@ -5,34 +5,48 @@
    width: var(--viewportWidth);
    margin-top: 2rem;
    padding: 4rem 2rem 6rem 2rem;
+    align-items: center;
+}
+
+.contact__wrapper header, .contact__wrapper section {
+    width: min(60rem, var(--viewportWidth));
+    align-items: center;
 }

 .contact__wrapper section {
    display: flex;
    flex-direction: column;
-    align-items: center;
 }

 .contact__wrapper .form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
-    gap: 1rem
+    gap: 1rem;
+}
+
+.no-flexbox-gap .contact__wrapper .form > *:not(:last-child) {
+    margin-bottom: 1em;
+}
+
+.contact__wrapper h1 {
+    text-align: center;
 }

 .contact__wrapper input {
    border-radius: max(1rem, 16pt);
-    padding: 0.5rem 1rem;
+    padding: 0.5em 1em;
    width: min(35ch, 90vw);
    font-size: max(1rem, 16pt);
+    color: var(--c-2);
 }

 .contact__wrapper textarea {
    color: black;
    border-radius: max(1rem, 16pt);
-    padding: 0.5rem 1rem;
+    padding: 0.5em 1em;
    width: min(35ch, 90vw);
-    min-height: 10rem;
+    min-height: 10em;
    font-size: max(1rem, 16pt);
 }

@ -47,11 +61,15 @@
    align-items: center;
    justify-content: center;
    line-height: 0;
-    padding: 0.5rem 1.5rem;
+    padding: 0.5em 1.5em;
    transition: 0.2s all;
    gap: 0.5rem;
 }

+.no-flexbox-gap .btn--contact > *:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
 .btn--contact svg {
    height: 1em;
 }
@ -81,11 +99,31 @@
    opacity: 0;
    display: block;
    margin-top: -1rem;
-    height: 0;
+    max-height: 0;
+    width: min(35ch, 90vw);
+    font-size: max(1rem, 16pt);
+}
+
+.alert--failure {
+    border-radius: max(1rem, 16pt);
+    padding: 0.5em 1em;
+    width: min(35ch, 90vw);
+    font-size: max(1rem, 16pt);
+    color: white;
+    background: red;
+}
+
+.alert--success {
+    border-radius: max(1rem, 16pt);
+    padding: 0.5em 1em;
+    width: min(35ch, 90vw);
+    font-size: max(1rem, 16pt);
+    color: var(--c-2);
+    background: limegreen;
 }

 .form-alert--visible {
    margin-top: 0;
-    height: 1rem;
+    max-height: max(4 * 1rem, 4 * 16pt);
    opacity: 1;
 }
--- a/src/assets/styles/_download.css
+++ b/src/assets/styles/_download.css
@ -27,6 +27,10 @@
    transition: all 0.2s;
 }

+.no-flexbox-gap .platform__wrapper > *:not(:last-child) {
+    margin-bottom: 1rem;
+}
+
 .platform__wrapper:hover {
    border-color: var(--c-3);
 }
--- a/src/assets/styles/_footer.css
+++ b/src/assets/styles/_footer.css
@ -7,6 +7,11 @@ footer {
    padding: 4rem 2rem 6rem 2rem;
 }

+.no-flexbox-gap footer > *:not(:last-child) {
+    margin-bottom: 3rem;
+    margin-right: 3rem;
+}
+
 footer section {
    display: flex;
    flex-direction: column;
@ -35,6 +40,11 @@ footer ul {
    column-gap: 3rem;
 }

+.no-flexbox-gap footer ul > *:not(:last-child) {
+    margin-bottom: 0.5rem;
+    margin-right: 0.3rem;
+}
+
 footer li {
 line-height: 1;
 font-size: 1rem;
@ -57,6 +67,10 @@ footer li a {
    transition: .2s all;
 }

+.no-flexbox-gap footer li a > *:not(:last-child) {
+    margin-right: 0.5rem;
+}
+
 footer li a:hover {
    color: var(--c-3);
 }
--- a/src/assets/styles/_hero.css
+++ b/src/assets/styles/_hero.css
@ -20,7 +20,7 @@
 }

 .hero__banner h1 {
-    width: 15ch;
+    width: 14ch;
    font-size: 4.2rem;
 }

@ -51,11 +51,19 @@ gap: 1rem;
 align-items: center;
 }

+.no-flexbox-gap .hero__info > *:not(:last-child) {
+    margin-bottom: 1rem;
+}
+
 .hero__info .platform-list {
 display: flex;
 gap: 0.8rem;
 }

+.no-flexbox-gap .hero__info .platform-list > *:not(:last-child) {
+    margin-right: 0.8rem;
+}
+
 .hero__info .platform-list svg {
 height: 1.8rem;
 width: 1.8rem;
--- a/src/assets/styles/_info.css
+++ b/src/assets/styles/_info.css
@ -3,6 +3,10 @@ article.info__wrapper {
    gap: 3rem;
 }

+.no-flexbox-gap article.info__wrapper > *:not(:last-child) {
+    margin-right: 3rem;
+}
+
 .info__wrapper section {
    width: 50%;
    display: flex;
--- a/src/assets/styles/_nav.css
+++ b/src/assets/styles/_nav.css
@ -14,6 +14,10 @@
    gap: 1rem;
  }

+  .no-flexbox-gap nav ul > *:not(:last-child) {
+    margin-right: 1rem;
+}
+
  nav ul li {
    white-space: nowrap;
    font-family: Nunito, sans-serif;
--- a/src/assets/styles/_pricing.css
+++ b/src/assets/styles/_pricing.css
@ -54,6 +54,10 @@
    font-size: 1.5rem;
 }

+.no-flexbox-gap .level__content li > *:not(:last-child) {
+    margin-bottom: 0.25rem;
+}
+
 .level__content li svg {
    width: 1.5rem;
 }
--- a/src/assets/styles/_reviews.css
+++ b/src/assets/styles/_reviews.css
@ -3,7 +3,7 @@

   .reviews-wrapper blockquote {
    font-family: 'DM Serif Display', serif;
-    font-size: 3.4rem;
+    font-size: 2.4rem;
    line-height: .9;
    margin: 0 2rem;
 }
@ -14,12 +14,20 @@
    align-items: center;
 }

+.no-flexbox-gap .rating-wrapper > *:not(:last-child) {
+    margin-right: 1rem;
+}
+
 .reviews {
    display: flex;
    flex-direction: column;
    gap: 2rem
 }

+.no-flexbox-gap .reviews > *:not(:last-child) {
+    margin-bottom: 2rem;
+}
+
 .review {
    display: flex;
    flex-direction: column;
--- a/src/assets/styles/_screenshots.css
+++ b/src/assets/styles/_screenshots.css
@ -30,6 +30,10 @@
    padding-bottom: 2rem;
 }

+.no-flexbox-gap .glide__slides > *:not(:last-child) {
+    margin-right: 1rem;
+}
+
 .glide__slide img {
    max-width: 12rem;
 }
--- a/src/assets/styles/_systems.css
+++ b/src/assets/styles/_systems.css
@ -14,6 +14,11 @@
    gap: 1rem;
 }

+.no-flexbox-gap .system__list > *:not(:last-child) {
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+
 .system__list li {
    aspect-ratio: 1;
    height: 9rem;
@ -34,6 +39,7 @@
 }

 .system__list li:hover img,
+.system__list li:hover svg,
 .system__list li:hover span {
    transform: scale(1.05);
 }
@ -43,8 +49,18 @@
    transition: all 0.2s;
 }

+.system__list li svg {
+    width: 4rem;
+    height: 4rem;
+    transition: all 0.2s;
+}
+
+.system__list li svg path {
+    fill: #bbb;
+}
+
 .system__list li span {
-    color: var(--c-bkg);
+    color: #bbb;
    transition: all 0.2s;
 }

@ -52,6 +68,14 @@
    background-color: var(--c-3);
 }

+.system__list li.system--selected svg path {
+    fill: var(--c-bkg);
+}
+
+.system__list li.system--selected span {
+    color: var(--c-bkg);
+}
+
 .system__zoom-wrapper {
    position: relative;
    background-color: var(--c-1);
@ -65,11 +89,18 @@
 }

 li.system--soon {
-    background: lightgray;
-    color: gray;
+    opacity: 0.5;
    pointer-events: none;
 }

+li.system--soon::after {
+    content: '(coming soon)';
+    color: #bbb;
+    font-size: smaller;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
 .zoom__image {
    position: absolute;
    top: 0;
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@ -169,6 +169,11 @@ article {
  width: min(60rem, var(--viewportWidth));
 }

+.no-flexbox-gap article > *:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+
 article > header {
  display: flex;
  flex-direction: column;
@ -176,6 +181,10 @@ article > header {
  gap: 2rem;
 }

+.no-flexbox-gap article > header > *:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
 article > header > aside {
  font-size: max(1rem, 10pt)
 }
--- a/src/posts/2020-02-02-my-first-post.md
+++ b/src/posts/2020-02-02-my-first-post.md
@ -1,19 +0,0 @@
---
-title: 'My first post'
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-date: 2020-02-02T00:00:00Z
---
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Example with image:
-
-![Error](/assets/images/posts/error.png)
-
-Example code block:
-
-```js
-function myFunction() {
-  return true;
-}
-```
--- a/src/posts/2020-03-03-my-second-post.md
+++ b/src/posts/2020-03-03-my-second-post.md
@ -1,19 +0,0 @@
---
-title: 'My second post'
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-date: 2020-03-03T00:00:00Z
---
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Example with image:
-
-![Error](/assets/images/posts/error.png)
-
-Example code block:
-
-```js
-function myFunction() {
-  return true;
-}
-```
--- a/src/posts/2020-05-05-eleventy-starter-boilerplate-presentation.md
+++ b/src/posts/2020-05-05-eleventy-starter-boilerplate-presentation.md
@ -1,151 +0,0 @@
---
-title: 'Eleventy Starter Boilerplate Presentation'
-description: Everything you need to use this Eleventy Boilerplate template
-date: 2020-05-05T00:00:00Z
---
-
-[![Eleventy starter boilerplate banner](/assets/images/posts/eleventy-js-starter-boilerplate.png)](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/)
-
-🚀 Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. ⚡️ Built with [Eleventy](https://www.11ty.dev), [ESLint](https://eslint.org), [Prettier](https://prettier.io), [Webpack](https://webpack.js.org), [PostCSS](https://postcss.org), [Tailwind CSS](https://tailwindcss.com) and [Netlify CMS](https://www.netlifycms.org) (optional).
-
-Clone this project and use it to create your own [Eleventy](https://www.11ty.dev) blog. You can check a [Eleventy js blog templates demo](https://creativedesignsguru.com/demo/Eleventy-Starter-Boilerplate/).
-
-The GitHub repository is located [Eleventy Starter Boilerplate](https://github.com/ixartz/Eleventy-Starter-Boilerplate).
-
-### Features
-
-Production-ready in mind:
-
- 🔥 [11ty](https://www.11ty.dev) for Static Site Generator
- 🎨 Integrate with [Tailwind CSS](https://tailwindcss.com) (with [PurgeCSS](https://purgecss.com), remove unused CSS)
- 💅 [PostCSS](https://postcss.org) for processing [Tailwind CSS](https://tailwindcss.com)
- ⚡️ Lazy load images with [lazysizes](https://github.com/aFarkas/lazysizes)
- ✨ Compress image with [Imagemin](https://github.com/imagemin/imagemin)
- 🎈 Syntax Highlighting with [Prism.js](https://prismjs.com)
- ☕ Minify HTML & CSS with [HTMLMinifier](https://www.npmjs.com/package/html-minifier) and [cssnano](https://cssnano.co)
- ✏️ Linter with [ESLint](https://eslint.org)
- 🛠 Code Formatter with [Prettier](https://prettier.io)
- 💨 Live reload
- 📦 Module Bundler with [Webpack](https://webpack.js.org)
- 🦊 Templating with [EJS](https://ejs.co)
- 🤖 SEO metadata and [Open Graph](https://ogp.me/) tags
- ⚙️ [JSON-LD](https://developers.google.com/search/docs/guides/intro-structured-data) for richer indexing
- 🗺 Sitemap.xml
- ⚠️ 404 page
- 📖 Pagination
- ✅ Cache busting
- 💯 Maximize lighthouse score
- 🌈 Include a FREE minimalist blog theme
- 🗒 Netlify CMS (optional)
-
-### Philosophy
-
- Minimal code (HTML, CSS & JS). Add what you need
- SEO-friendly
- 🚀 Production-ready
-
-### Requirements
-
- Node.js and npm
-
-### Premium Themes ([Eleventy Themes](https://creativedesignsguru.com/category/eleventy/))
-
-| [Blue Dark Eleventy Theme](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [Blue Eclatant Eleventy Theme](https://creativedesignsguru.com/blue-eclatant-eleventy-theme/) |
-| --- | --- |
-| [![Blue Dark Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/blue-dark-mode-eleventy-theme-homepage-xs.png)](https://creativedesignsguru.com/blue-dark-eleventy-theme/) | [![Blue Eclatant Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/eclatant-blue-eleventy-theme-homepage-xs.png)](https://creativedesignsguru.com/blue-eclatant-eleventy-theme/) |
-
-| [Blue Modern Eleventy Theme](https://creativedesignsguru.com/blue-modern-eleventy-theme/) | [Blue Minimalist Eleventy Theme](https://creativedesignsguru.com/blue-minimalist-eleventy-theme/) |
-| --- | --- |
-| [![Blue Modern Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/modern-blue-eleventy-theme-homepage-xs.png)](https://creativedesignsguru.com/blue-modern-eleventy-theme/) | [![Blue Minimalist Eleventy Theme premium](https://creativedesignsguru.com/assets/images/themes/minimalist-blue-eleventy-theme-homepage-xs.png)](https://creativedesignsguru.com/blue-minimalist-eleventy-theme/) |
-
-### Getting started
-
-Run the following command on your local environment:
-
-```shell
-git clone --depth=1 https://github.com/ixartz/Eleventy-Starter-Boilerplate.git my-project-name
-cd my-project-name
-npm install
-```
-
-Then, you can run locally in development mode with live reload:
-
-```shell
-npm run dev
-```
-
-Open http://localhost:8080 with your favorite browser to see your blog.
-
-### Project structure
-
-```shell
-.
-├── public             # Static files
-│   └── assets
-│       └── images     # Images not needed by Webpack
-└── src
-    ├── _data          # Eleventy data folder
-    ├── _includes
-    │   └── layouts    # HTML layout files
-    ├── assets         # Assets folder that needs to be processed by Webpack
-    │   ├── images
-    │   │   └── posts  # Images used in your blog posts (will be compressed by Webpack)
-    │   └── styles     # Your blog CSS files
-    └── posts          # Your blog posts
-```
-
-### Customization
-
-You can easily configure Eleventy Starter Boilerplate. Please change the following file:
-
- `public/assets/images/logo.png`: your blog logo
- `public/apple-touch-icon.png`, `public/favicon.ico`, `public/favicon-16x16.png` and `public/favicon-32x32.png`: your blog favicon, you can generate from https://favicon.io/favicon-converter/
- `src/_data/site.json`: your blog configuration
- `src/_includes/layouts`: your blog HTML layout
- `src/assets/styles/main.css`: your blog CSS file using Tailwind CSS
-
-### Deploy to production
-
-You can see the results locally in production mode with:
-
-```shell
-npm run serve
-```
-
-The generated HTML and CSS files are minified. It will also removed unused CSS from [Tailwind CSS](https://tailwindcss.com).
-
-You can create an optimized production build with:
-
-```shell
-npm run build
-```
-
-Now, your blog is ready to be deployed. All generated files are located at `_site` folder, which you can deploy with any hosting service.
-
-### Deploy to Netlify
-
-Clone this repository on own GitHub account and deploy to Netlify:
-
-[![Netlify Deploy button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ixartz/Eleventy-Starter-Boilerplate)
-
-### Remove Netlify files and Netlify CMS
-
-If you don't use Netlify, you can easily remove all Netlify related files:
-
- `public/admin`, the entier folder
- `src/_includes/layouts/base.ejs`, the loaded script `netlify-identity-widget.js` and the inline script `if (window.netlifyIdentity) { ...`
- `netlify.toml`, the entire file
-
-### Contributions
-
-Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
-
-### License
-
-Licensed under the MIT License, Copyright © 2020
-
-See [LICENSE](https://github.com/ixartz/Eleventy-Starter-Boilerplate/blob/master/LICENSE) for more information.
-
-### GitHub
-
-The GitHub repository is located [Eleventy Starter Boilerplate](https://github.com/ixartz/Eleventy-Starter-Boilerplate) maintained by [Creative Design Guru](https://creativedesignsguru.com).
--- a/src/posts/2020-06-06-my-third-post.md
+++ b/src/posts/2020-06-06-my-third-post.md
@ -1,19 +0,0 @@
---
-title: 'My third post'
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-date: 2020-06-06T00:00:00Z
---
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Example with image:
-
-![Error](/assets/images/posts/error.png)
-
-Example code block:
-
-```js
-function myFunction() {
-  return true;
-}
-```
--- a/src/posts/2020-07-07-my-forth-post.md
+++ b/src/posts/2020-07-07-my-forth-post.md
@ -1,19 +0,0 @@
---
-title: 'My forth post'
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-date: 2020-07-07T00:00:00Z
---
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Example with image:
-
-![Error](/assets/images/posts/error.png)
-
-Example code block:
-
-```js
-function myFunction() {
-  return true;
-}
-```
--- a/src/posts/2020-08-08-my-fifth-post.md
+++ b/src/posts/2020-08-08-my-fifth-post.md
@ -1,19 +0,0 @@
---
-title: 'My fifth post'
-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-date: 2020-08-08T00:00:00Z
---
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
-Example with image:
-
-![Error](/assets/images/posts/error.png)
-
-Example code block:
-
-```js
-function myFunction() {
-  return true;
-}
-```
--- a/src/posts/2020-08-08-my-first-post.md
+++ b/src/posts/2020-08-08-my-first-post.md
@ -0,0 +1,7 @@
+---
+title: 'My first post'
+description: 'Watch here for my future blog.'
+date: 2020-08-08T00:00:00Z
+---
+
+Blog coming soon. :)