Add mailerlite

src/components/custom/Navbar/Navbar.vue

@@ -73,6 +73,28 @@
                 </a>
               </span>
             </li>
+            <li class="mr-2">
+              <a
+                href="javascript:;"
+                onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+              >
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  data-prefix="far"
+                  data-icon="envelope"
+                  class="h-5 w-5 mt-1"
+                  role="img"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 512 512"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
+                  ></path>
+                </svg>
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -210,6 +232,28 @@
               </a>
             </span>
           </li>
+          <li class="ml-4 mt-1">
+            <a
+              href="javascript:;"
+              onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="far"
+                data-icon="envelope"
+                class="h-5 w-5"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  fill="currentColor"
+                  d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
+                ></path>
+              </svg>
+            </a>
+          </li>
         </ul>
       </div>
     </header>

src/components/marketing/sections/cta-sections/Footer.vue

@@ -118,6 +118,28 @@
                 />
               </svg>
             </a>
+
+            <a
+              class="text-gray-400 hover:text-gray-500"
+              href="javascript:;"
+              onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                data-prefix="far"
+                data-icon="envelope"
+                class="h-5 w-5 mt-1"
+                role="img"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 512 512"
+              >
+                <path
+                  fill="currentColor"
+                  d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
+                ></path>
+              </svg>
+            </a>
           </div>
         </div>
         <div
@@ -162,9 +184,24 @@
       <div class="mt-12 border-t border-gray-200 pt-8">
         <p class="text-base leading-6 text-gray-400 xl:text-center">
           &#xA9; 2021 ThreeFold, All rights reserved.
-          <a class="leading-6 text-gray-500 hover:text-gray-900" target="_blank" href="https://new.threefold.io/info/legal#/legal__terms_conditions_websites">Terms & Conditions | </a>
+          <a
-          <a class="leading-6 text-gray-500 hover:text-gray-900" target="_blank" href="https://new.threefold.io/info/legal#/legal__privacypolicy">Privacy Policy | </a>
+            class="leading-6 text-gray-500 hover:text-gray-900"
-          <a class="leading-6 text-gray-500 hover:text-gray-900" target="_blank" href="#">Impressum</a>
+            target="_blank"
+            href="https://new.threefold.io/info/legal#/legal__terms_conditions_websites"
+            >Terms & Conditions |
+          </a>
+          <a
+            class="leading-6 text-gray-500 hover:text-gray-900"
+            target="_blank"
+            href="https://new.threefold.io/info/legal#/legal__privacypolicy"
+            >Privacy Policy |
+          </a>
+          <a
+            class="leading-6 text-gray-500 hover:text-gray-900"
+            target="_blank"
+            href="#"
+            >Impressum</a
+          >
         </p>
       </div>
     </div>
@@ -180,5 +217,5 @@ export default {
 <style scoped>
 ul {
   list-style-type: none;
-};
+}
 </style>

src/index.html

@@ -3,15 +3,55 @@
 
 <head>
     ${head}
-    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
-    <script
+    <script type="text/javascript">
-        type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>
+        window.$crisp = [];
+        window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+        (function() {
+            d = document;
+            s = d.createElement("script");
+            s.src = "https://client.crisp.chat/l.js";
+            s.async = 1;
+            d.getElementsByTagName("head")[0].appendChild(s);
+        })();
+    </script>
 
+    <!-- MailerLite Universal -->
+    <script>
+        (function(m, a, i, l, e, r) {
+            m["MailerLiteObject"] = e;
+
+            function f() {
+                var c = {
+                    a: arguments,
+                    q: [],
+                };
+                var r = this.push(c);
+                return "number" != typeof r ? r : f.bind(c.q);
+            }
+            f.q = f.q || [];
+            m[e] = m[e] || f.bind(f.q);
+            m[e].q = m[e].q || f.q;
+            r = a.createElement(i);
+            var _ = a.getElementsByTagName(i)[0];
+            r.async = 1;
+            r.src = l + "?v" + ~~(new Date().getTime() / 1000000);
+            _.parentNode.insertBefore(r, _);
+        })(
+            window,
+            document,
+            "script",
+            "https://static.mailerlite.com/js/universal.js",
+            "ml"
+        );
+
+        var ml_account = ml("accounts", "1778010", "x2d3d9f8n1", "load");
+    </script>
+    <!-- End MailerLite Universal -->
 </head>
 
 <body ${bodyAttrs}>
-
     <script>
         // Add dark / light detection that runs before Vue.js load. Borrowed from overreacted.io
         // for this starter, i used the code from gridsome.org