Footer

src/components/Footer/index.tsx

@@ -1,5 +1,68 @@
-import * as S from './styles';
+import Image from 'next/image';
+import Link from 'next/link';
+import { AiFillGithub } from 'react-icons/ai';
+import { IoGlobeOutline } from 'react-icons/io5';
+
+import Logo from '@public/img/logo.svg';
 
-const Footer = () => <S.Footer>Footer</S.Footer>;
+import * as S from './styles';
 
+const Footer = () => {
+  return (
+    <S.Footer>
+      <Link href="/" passHref>
+        <S.Logo>
+          <Image
+            src={Logo}
+            width={50}
+            height={50}
+            objectFit="contain"
+            alt="logo"
+          />
+          <h2>MYCHINE</h2>
+        </S.Logo>
+      </Link>
+      <S.Links>
+        <Link href="/" passHref>
+          <S.CustomLink> Termos de uso </S.CustomLink>
+        </Link>
+        <Link
+          href="https://unbarqdsw2021-1.github.io/2021.1_G7_Mychine_docs/"
+          passHref
+        >
+          <S.CustomLink> Documentação </S.CustomLink>
+        </Link>
+        <Link
+          href="https://github.com/UnBArqDsw2021-1/2021.1_G7_Mychine_App"
+          passHref
+        >
+          <S.CustomLink> Repositório</S.CustomLink>
+        </Link>
+        <Link href="/" passHref>
+          <S.CustomLink> Sobre </S.CustomLink>
+        </Link>
+      </S.Links>
+      <S.Links>
+        <Link
+          href="https://github.com/UnBArqDsw2021-1/2021.1_G7_Mychine_App"
+          passHref
+        >
+          <S.CustomLink>
+            {' '}
+            <AiFillGithub color="black" size={30} />{' '}
+          </S.CustomLink>
+        </Link>
+        <Link
+          href="https://unbarqdsw2021-1.github.io/2021.1_G7_Mychine_docs/"
+          passHref
+        >
+          <S.CustomLink>
+            {' '}
+            <IoGlobeOutline color="black" size={30} />{' '}
+          </S.CustomLink>
+        </Link>
+      </S.Links>
+    </S.Footer>
+  );
+};
 export default Footer;

src/components/Footer/styles.tsx

@@ -1,6 +1,67 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Footer = styled.footer`
   grid-area: footer;
   grid-column: 1/-1;
+  top: 8px;
+  display: flex;
+  flex-direction: column;
+  background: #00000050;
+  align-items: center;
+`;
+
+export const Logo = styled.div`
+  ${({ theme }) => css`
+    position: relative;
+    display: inline-flexbox;
+    gap: 1rem;
+    align-items: center;
+    margin-right: ${theme.spacings.xlarge};
+    cursor: pointer;
+    color: ${theme.colors.primary};
+    text-shadow: 
+        /* first layer at 1px */ -1px -1px 0px white,
+      0px -1px 0px white, 1px -1px 0px white, -1px 0px 0px white,
+      1px 0px 0px white, -1px 1px 0px white, 0px 1px 0px white,
+      1px 1px 0px white, /* second layer at 2px */ -2px -2px 0px white,
+      -1px -2px 0px white, 0px -2px 0px white, 1px -2px 0px white,
+      2px -2px 0px white, 2px -1px 0px white, 2px 0px 0px white,
+      2px 1px 0px white, 2px 2px 0px white, 1px 2px 0px white, 0px 2px 0px white,
+      -1px 2px 0px white, -2px 2px 0px white, -2px 1px 0px white,
+      -2px 0px 0px white, -2px -1px 0px white;
+
+    @media (max-width: 600px) {
+      margin-right: ${theme.spacings.large};
+    }
+  `}
+`;
+
+export const Links = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    gap: ${theme.spacings.large};
+
+    @media (max-width: 600px) {
+      gap: calc(${theme.spacings.large} / 2);
+    }
+  `}
+`;
+
+export const CustomLink = styled.a`
+  ${({ theme }) => css`
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: ${theme.spacings.small};
+    padding: 1rem;
+    color: black;
+    font-weight: ${theme.font.weight.light};
+    font-size: ${theme.font.sizes.medium};
+    text-decoration: none;
+    text-shadow: 1px 1px 1px #333;
+    cursor: pointer;
+  `}
 `;

src/styles/global.tsx

@@ -32,6 +32,7 @@ const GlobalStyle = createGlobalStyle`
     dl,
     dd {
       margin: 0;
+      margin: 0;
     }
 
     /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

src/templates/Base/index.tsx

@@ -1,4 +1,4 @@
-// import Footer from '@components/Footer';
+import Footer from '@components/Footer';
 import Navbar from '@components/Navbar';
 
 import * as S from './styles';
@@ -11,7 +11,7 @@ const BaseTemplate = ({ children }: IBaseTemplateProps) => (
   <S.Container>
     <Navbar />
     <S.Main>{children}</S.Main>
-    {/* <Footer /> */}
+    <Footer />
   </S.Container>
 );