Add donation module

src/_mixins.scss

@@ -34,6 +34,11 @@
     text-decoration: none;
 }
 
+@mixin button {
+    @include buttonBasic;
+    border-radius: 5px;
+}
+
 @mixin homeBanner {
     background: #10141e;
     cursor: pointer;

src/pages/donate.js

@@ -0,0 +1,48 @@
+import React, {useState} from "react"
+import Layout from "../layouts/default";
+import {useStaticQuery, graphql} from "gatsby";
+import { Trans, Link, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
+
+import styles from "./donate.module.scss";
+
+import logo from "../images/roundedbglogo@10x.png";
+
+export default function DonatePage() {
+    const [amount, setAmount] = useState(5);
+    const {t} = useI18next();
+    const {language, path} = React.useContext(I18nextContext);
+
+    const { site } = useStaticQuery(
+        graphql`
+          query {
+            site {
+              siteMetadata {
+                title
+                siteUrl
+                payPalMail
+              }
+            }
+          }
+        `
+      )
+
+    return (
+        <Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
+            <section>
+                <article>
+                    <h1><Trans>donate</Trans></h1>
+
+                    <p><Trans>donateDescription</Trans></p>
+
+                    <div className={styles.priceAmount}>
+                        <label for="priceInput" className={styles.sronly}>Amount</label>
+                        <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => {setAmount(ev.target.value)}} id="priceInput" />
+                        <div>€</div>
+                    </div>
+
+                    <a className={styles.donateButton} rel="noopener" id="payPalBtn" href={"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business="+encodeURIComponent(site.siteMetadata.payPalMail)+"&item_name="+encodeURIComponent(site.siteMetadata.title)+"&currency_code=EUR&image_url="+(encodeURIComponent(site.siteMetadata.siteUrl+logo))+"&return="+(encodeURIComponent(site.siteMetadata.siteUrl+"/"+path+"thank-you/"))+"&rm=0&cancel_return="+(encodeURIComponent(site.siteMetadata.siteUrl+"/"+path))+"&amount="+amount}><span>Donate using PayPal</span><i class="fas fa-fw fa-chevron-right" aria-hidden="true"></i></a>
+                </article>
+            </section>
+        </Layout>
+    );
+}

src/pages/donate.module.scss

@@ -0,0 +1,41 @@
+@import "../variables";
+@import "../mixins";
+
+.priceAmount {
+    display: flex;
+    width: 150px;
+    margin: 20px auto;
+    border: thin solid rgba(0,0,0,.25);
+    border-radius: 5px;
+    overflow: hidden;
+    line-height: 40px;
+
+    input {
+        flex-grow: 1;
+        border: none;
+        padding-left: 10px;
+        width: 1px;
+        border-right: thin solid rgba(0,0,0,.25);
+    }
+
+    div {
+        width: 20px;
+        text-align: center;
+    }
+}
+
+.donateButton {
+    @include button;
+}
+
+.sronly {
+    border: 0;
+    clip: rect(0,0,0,0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+

src/pages/donate/thank-you.js

@@ -0,0 +1,19 @@
+import React from "react"
+import Layout from "../../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function ImprintPage() {
+    
+    const {t} = useI18next();
+    return (
+        <Layout module="donate" title={t("donate")}>
+            <section>
+                <article>
+                    <h1><Trans>donateThanks</Trans></h1>
+
+                    <p></p>
+                </article>
+            </section>
+        </Layout>
+    );
+}

src/pages/index.js

@@ -41,12 +41,12 @@ class IndexPage extends React.Component {
             <i className="fas fa-fw fa-chevron-right"></i>
           </div>
         </a>
-        <a className={styles.section + " " + styles.donationSection} href="TODO: Path">
+        <Link className={styles.section + " " + styles.donationSection} to="/donate">
           <div>
             <span><Trans>donationCatchphrase</Trans></span>
             <i className="fas fa-fw fa-chevron-right"></i>
           </div>
-        </a>
+        </Link>
       </Layout>
     )
   }

src/pages/index.module.scss

@@ -21,10 +21,6 @@
         max-height: 400px;
         transform: translate(-50%, 0%);
 
-
-
-    
-
         &:hover .profileImage {
             transform: translate(4px, -4px);
         }