Merge pull request #55 from frontendcafe/issue-21/footer

Issue 21/footer

package.json

@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
+    "@fortawesome/free-regular-svg-icons": "^5.15.4",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.15",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.js

@@ -1,4 +1,5 @@
 import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
 import Main from "./components/Main/index";
 import Information from './views/information/Information';
 import Sucursales from "./views/sucursales/index.js"
@@ -44,6 +45,7 @@ function App() {
           <Gallery></Gallery>
         </Route>
       </Switch>
+      <Footer />
     </div>
   );
 }

src/components/Footer/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faInstagram,
+  faTwitter,
+  faWhatsapp,
+  faFacebook,
+} from "@fortawesome/free-brands-svg-icons";
+import Logo from "../../assets/logo_wineberry.png";
+import "./styles.scss";
+
+const Footer = () => {
+  return (
+    <div className="footer">
+      <div className="footer__logo">
+        <img
+          src={Logo}
+          title="Logo Wineberry"
+          alt="Logo Wineberry"
+          className="footer__logo-img"
+        />
+      </div>
+      <div className="footer__section">
+        <ul>
+          <li className="footer__section-item">
+            <Link to={{ pathname: "/", hash: "#BodegaWineberry" }}>
+              Bodega Wineberry
+            </Link>
+          </li>
+          <li className="footer__section-item">
+            {" "}
+            <Link to={{ pathname: "/", hash: "#nuestrosVinos" }}>
+              Nuestros Vinos
+            </Link>
+          </li>
+          <li className="footer__section-item">
+            <Link to={{ pathname: "/", hash: "#galeria" }}>Galeria</Link>{" "}
+          </li>
+          <li className="footer__section-item">
+            <Link to={{ pathname: "/", hash: "#contacto" }}>Contactanos</Link>
+          </li>
+          <li className="footer__section-item">
+            <Link to={{ pathname: "/", hash: "#sobre-nosotros" }}>
+              Sobre nosotros
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div className="footer__socialmedia">
+        <div className="footer__socialmedia-title">
+          Seguinos en nuestras redes
+        </div>
+        <div className="footer__socialmedia-icon">
+          <a href={"https://instagram.com/"}>
+            <FontAwesomeIcon color="white" icon={faInstagram} className="fa-lg" />
+          </a>
+          <a href={"https://twitter.com/"}>
+            <FontAwesomeIcon color="white" icon={faTwitter} className="fa-lg" />
+          </a>
+          <a href={"https://facebook.com/"}>
+            <FontAwesomeIcon color="white" icon={faFacebook} className="fa-lg" />
+          </a>
+        </div>
+        <div className="footer__socialmedia-wsp">
+          <FontAwesomeIcon color="white" icon={faWhatsapp} className="fa-lg" />
+          <span>(+54 9) 11 26062011</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Footer/styles.scss

@@ -0,0 +1,85 @@
+@use "src/styles/utils" as *;
+
+.footer {
+  font-size: 12px;
+  background-color: $color-secondary;
+  color: $color-bg;
+  margin-top: 40px;
+  height: 132px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+
+  &__logo {
+    &-img{
+      height: 100px;
+      width: 100px;
+    }
+  }
+
+  &__section {
+    display: none;
+  }
+
+  &__socialmedia {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    height: 100px;
+
+    &-icon {
+      a:nth-child(2), a:nth-child(3) {
+        margin-left: 10px;
+      }
+    }
+
+    &-wsp {
+      span {
+        margin-left: 10px;
+      }
+    }
+
+
+  }
+
+  @include media(md) {
+    height: 419px;
+    font-size: $size-lg;
+
+    &__logo {
+      &-img {
+        height: 270px;
+        width: 270px;
+      }
+    }
+
+    &__section {
+      display: flex;
+      align-items: center;
+      height: 270px;
+      ul {
+        list-style: none;
+        li {
+          margin: 10px;
+        }
+      }
+    }
+
+    &__socialmedia {
+      &-icon {
+        margin-top: 10px;
+      }
+
+      &-wsp {
+        margin-top: 10px;
+        span {
+          font-size: $size-lg;
+        }
+      }
+    }
+  }
+}
+
+