Merge pull request #185 from leapdao/feat/ventures-page

Add ventures page

package.json

@@ -25,6 +25,9 @@
     "tinytime": "^0.2.6"
   },
   "devDependencies": {
+    "@beyonk/svelte-carousel": "^2.8.0",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "css-loader": "^3.2.0",
     "husky": "^3.0.9",
     "marked": "^0.3.19",
@@ -34,6 +37,8 @@
     "serve-handler": "^6.1.2",
     "style-loader": "^1.0.0",
     "svelte": "^3.0.0",
+    "svelte-fa": "^2.1.1",
+    "svelte-feather-icons": "^3.2.2",
     "svelte-loader": "^2.9.0",
     "webpack": "^4.7.0"
   }

src/components/Nav.svelte

@@ -43,9 +43,6 @@
   }
 
   @media screen and (max-width: 900px) {
-  #about{
-  display: none;
-  }
     .menu {
       font-size: 1.5rem;
 
@@ -61,9 +58,6 @@
   }
 
   @media screen and (max-width: 360px) {
-    #about{
-    display: none;
-    }
     .menu {
       left: 0;
       right: 0;
@@ -95,17 +89,14 @@
     <li>
       <a rel="prefetch" href="/">~</a>
     </li>
-    <li id="about">
-      <a rel="prefetch" href="/about">About</a>
-    </li>
     <li>
-      <a rel="prefetch" href="/blog">Blog</a>
+      <a rel="prefetch" href="/ventures">Ventures</a>
     </li>
     <li>
-      <a href="/resources" rel="prefetch">Resources</a>
+      <a rel="prefetch" href="/earn">Community</a>
     </li>
     <li>
-      <a rel="prefetch" href="/earn">Earn</a>
+      <a rel="prefetch" href="/blog">Blog</a>
     </li>
     <li>
       <a rel="prefetch" href="/interspace">Space</a>

src/components/NewsLetter.svelte

@@ -0,0 +1,113 @@
+<script>
+  import { onMount } from "svelte";
+
+  function buildRequestUrl(form) {
+    const action = form.getAttribute("action");
+    const formData = new FormData(form);
+    const url = Array.from(formData.entries()).reduce(
+      (memo, [key, value]) => `${memo}&${key}=${encodeURIComponent(value)}`,
+      action
+    );
+    return `${url}&_=${Date.now()}`;
+  }
+
+  function register2(form) {
+    const alertEl = form.querySelector(".alert");
+    const emailEl = form.querySelector(".email");
+    const submitEl = form.querySelector(".submit");
+
+    // jsonp
+    const callbackName = `antiJQuery_${Date.now()}`;
+    const url = `${buildRequestUrl(form)}&c=${callbackName}`;
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = url;
+    document.head.appendChild(script);
+
+    alertEl.innerText = "Subscribing...";
+    emailEl.setAttribute("disabled", true);
+    submitEl.setAttribute("disabled", true);
+
+    // callback for jsonp
+    window[callbackName] = result => {
+      try {
+        if (result.result !== "success") {
+          alertEl.innerHTML = result.msg;
+          emailEl.removeAttribute("disabled");
+          submitEl.removeAttribute("disabled");
+          emailEl.style.display = "block";
+          submitEl.style.display = "block";
+        } else {
+          alertEl.innerHTML = "Thank you!";
+        }
+      } catch (err) {
+        alertEl.innerHTML = "Ops, there was an error.";
+        emailEl.removeAttribute("disabled");
+        submitEl.removeAttribute("disabled");
+      }
+
+      // cleaning up
+      document.head.removeChild(script);
+      window[callbackName] = undefined;
+    };
+  }
+
+  let subscribeForm;
+  onMount(() => {
+    subscribeForm.addEventListener("submit", e => {
+      e.preventDefault();
+      register2(e.target);
+    });
+
+    if (window.location.hash === "#subscribe") {
+      window.scrollTo(
+        0,
+        subscribeForm.getBoundingClientRect().top + window.scrollY
+      );
+    }
+  });
+</script>
+
+<style>
+  .flex-container {
+    display: flex;
+    padding: 0.5em 0em;
+    width: 80%;
+  }
+  input {
+    flex-grow: 1;
+  }
+</style>
+
+<div class="content">
+  <h2>Get involved!</h2>
+  <p>
+    Reports & Updates are random but high quality, sign up for our newsletter!
+  </p>
+  <form
+    bind:this={subscribeForm}
+    id="mc-embedded-subscribe-form"
+    action="https://leapdao.us19.list-manage.com/subscribe/post-json?u=6a1b0204c404c1a1c4b498537&amp;id=f12a24a1f3&amp;c=?"
+    method="post"
+    class="newsletter">
+    <div class="flex-container">
+      <input
+        id="email"
+        type="email"
+        value=""
+        name="EMAIL"
+        placeholder="Email address"
+        class="email" />
+      <button class="submit button">Subscribe</button>
+    </div>
+    <p class="alert" />
+
+    <div style="position: absolute; left: -5000px;" aria-hidden="true">
+      <input
+        type="text"
+        name="b_6a1b0204c404c1a1c4b498537_f12a24a1f3"
+        tabindex="-1"
+        value="" />
+    </div>
+  </form>
+</div>