Merge pull request #81 from skcode7/footer-issue-9

Footer issue 9

src/components/footer/footer.js

@@ -1,20 +1,54 @@
-import React from 'react'
+import React from 'react';
+import { Link } from "gatsby";
+import styles from './footer.module.css';
+import escudo from "../../images/logo-escudo-ec.svg";
+//import SocialNetworks from './social-networks';
 
 const Footer = () => (
-  <footer className="bg-yellow-500">
-    <nav className="flex justify-between max-w-4xl p-4 mx-auto text-sm md:p-8">
-      <p className="text-white font-bold">JavaScript Ecuador</p>
+  <footer className={styles.footer}>
+    <div className={styles.flex}>
+      <div className={styles.col}>
+        <h4 className={styles.footer__title}>RECURSOS</h4>
+        <ul>
+          <li>Acerca de</li>
+          <Link to="/blog" ><li>Blog</li> </Link>
+          <Link to="/cuentas"><li>Cuentas</li></Link>
+        </ul>
+      </div>
+      <div className={styles.col}>
+        <h4 className={styles.footer__title}>AYUDA</h4> 
+        <ul>
+          <li>Organizar un Meetup</li>
+          <li>Dar una Charla/Taller</li>
+          <li>Publicar un Post</li>
+          <li>Informar un problema</li>
+          <Link to="/code-of-conduct"><li>Código de Conducta</li></Link>
+        </ul>
+      </div>
+
+      <div className={styles.col}>
+        <h4 className={styles.footer__title}>COMUNIDAD</h4>
+        <ul>
+        <Link to="/eventos"><li>Eventos</li></Link>
+          <li>¿Cómo ayudar?</li>
+          <li>Quiero ser Patrocinador</li>
+          <li>Registrar mi ciudad</li>
+          <li>Descargo de responsabilidad</li>
+        </ul>
+      </div>
+
+      <div className={styles.col}>
+        <h1 >Ecuador.js</h1>
+        <img src={escudo} alt="Escudo del Ecuador" />
+        {/* <SocialNetworks /> */}
+      </div>
+    </div>
+
+    <p>¿Encontraste un error? <span><a href="https://github.com/javascriptecuador/web/issues/new/choose"  target="_blank">Repórtalo </a></span></p>
+
+    <h2>2019 - 2020 Ecuador.js</h2>
+    <h3>All rights reserved</h3>
 
-      <p>
-        <a
-          className="font-bold text-white no-underline"
-          href="https://github.com/javascriptecuador/web"
-          target="_blank"
-          rel="noopener noreferrer">
-          GitHub
-        </a>
-      </p>
-    </nav>
   </footer>
 );
 

src/components/footer/footer.module.css

@@ -0,0 +1,125 @@
+.footer {
+    background-color: #FEF6DD;
+    color: #000;
+    background-image: url('../../images/widgets/lines.svg');
+    height: 500px;
+    padding: 5em 10em 0 10em;
+    position: relative;
+}
+
+.footer__title {
+    font-size: 14px;
+    padding-bottom: 2em;
+    font-weight: 700;
+}
+
+.footer h1 {
+    font-size: 64px;
+    font-weight: 700;
+}
+
+.footer h2 {
+    font-size: 25px;
+    font-weight: 700;
+    text-align: center;
+}
+
+.footer h3 {
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+}
+
+.footer p {
+    text-align: center;
+    padding-bottom: 1em;
+}
+
+.footer span {
+    text-decoration: underline;
+}
+
+.footer img {
+    top: 9.5em;
+    right: 6%;
+    position: absolute;
+}
+
+.flex {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 5em;
+}
+
+.col {
+    width: 25%;
+}
+
+.col li {
+    font-size: 14px;
+    line-height: 24px;
+}
+
+@media only screen and (max-width: 800px) {
+    .footer {
+        height: 550px;
+        padding: 3em 10em 0 2em;
+    }
+
+    .footer h1 {
+        font-size: 54px;
+        padding-left: 2em;
+    }
+
+    .footer img {
+        top: 7.5em;
+        right: 4em;
+        position: absolute;
+    }
+
+    .flex {
+        padding-bottom: 3em;
+    }
+
+    .col {
+        width: 50%;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    .footer {
+        height: 810px;
+        padding: 1em 0 0 2em;
+    }
+
+    .footer__title {
+        font-size: 14px;
+        padding-top: 2em;
+        padding-bottom: 0.5em;
+        font-weight: 700;
+    }
+
+    .footer h1 {
+        font-size: 34px;
+        padding-top: 1.5em;
+    }
+
+    .footer img {
+        top: 36.5em;
+        right: 16%;
+        position: absolute;
+    }
+
+    .footer p {
+        padding: 4.5em 0 1em 0;
+    }
+
+    .flex {
+        display: inline;
+        padding-bottom: 3em;
+    }
+
+    .col {
+        width: 100%;
+    }
+}

src/data/contributors.json

@@ -83,11 +83,11 @@
     "rol": "Co-Organizador",
     "name": "Carlos G. Encalada B.",
     "photo": "https://avatars2.githubusercontent.com/u/55223838?v=4",
-    "github": "http://karlosencalada.dev",
+    "github": "https://github.com/skcode7",
     "website": "http://karlosencalada.dev",
-    "email": "http://karlosencalada.dev",
-    "twitter": "http://karlosencalada.dev",
-    "description": "Lorem ipsum dolor sit amet consectetur adipiscing elit id tempus cras orci accumsan, commodo semper sagittis consequat turpis hac malesuada felis nisi senectus est. "
+    "email": "mailto:admin@karlosencalada.dev",
+    "twitter": "https://twitter.com/karlosrocker",
+    "description": "Desarrollador Low Code, consultor de ERPs, entusiasta de GNU-Linux y usuario de Jamstack"
   },
   {
     "rol": "Co-Organizador",