ormacarbon · lnobrz · Jan 17, 2023
diff --git a/.gitignore b/.gitignore
@@ -30,7 +30,3 @@ yarn-error.log*
 
 # vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
diff --git a/README.md b/README.md
@@ -1,52 +1,51 @@
-# **TESTE DE FRONTEND**
+# Zeldapi Project
 
-Neste teste, você será livre para criar uma aplicação consumindo a API que você quiser e com o tema que desejar.
-Contudo, o seu projeto deverá seguir os requisitos mínimos de conteúdo.
+## A webapp where you can find everything about The Legend of Zelda universe
 
-SUGESTÕES DE APIS:
-https://github.com/public-apis/public-apis
+Zeldapi Project is a SPA where you can dive deep into the universe of Legend of Zelda, since this application displays thousands of informations about this franchise. In Zeldapi Project you'll be able to browse into infos of:
 
----------------------------------------------------------------------
-## REQUISITOS:
+  - bosses
+  - characters
+  - dungeons
+  - games
+  - items
+  - monsters
+  - places
 
-- SEJA ORIGINAL, PROJETOS SUSPEITOS DE SEREM COPIADOS SERÃO DESCARTADOS!
-- QUEREMOS VER O SEU CÓDIGO, E NÃO O DE OUTROS.
+Furthermore, if you don't want to lose too much time by searching through thousands of items, you can simply use the application search bar
 
-## GIT
-- Faça um fork deste repositório.
-- Criar uma branch para codar as suas features.
-- Criar um pull-request quando o teste for finalizado e submetido.
+## Credits to zelda-api
 
-##### **NOTA: Será avaliado também se o nome da branch, títulos de commit, push e comentários possuem boa legibilidade.**
+All the informations presented in this site are being fetched from zelda-api, read the full documentation here: https://docs.zelda.fanapis.com/docszelda-api
 
------------------------------------------------------
+## Stacks
 
-## FRAMEWORK
+- Javascript
+- React
+- NextJS
+- Styled Components
+- React Animated CSS
 
-- Utilizar as ferramentas presentes no framework do projeto (NEXT.JS).
+## How to run this application locally
 
------------------------------------------------------
+1. clone this repository
+2. inside the project directory, run "npm install" in the terminal
+3. run "npm run dev" to run locally in development mode
 
-## ESTILOS
+## How to access this application remotelly
 
-- Os estilos deste teste devem ser feitos em styled-components (evite utilizar bootstrap, mas se necessário, use).
-- O projeto deverá conter tema claro/escuro e forma do usuário alterar entre os dois.
-- Deve ser totalmente responsivo.
+You can access Zeldapi Project here: https://zeldapi-project.vercel.app
 
------------------------------------------------------
+## Important informations
 
-## PROJETO
+- Project layout was fully inspired by The Legend Of Zelda official website: https://www.zelda.com/
+- I do not own any rights about the images that was used in Zeldapi Project
+- All the code inside this repository is mine and was fully made by myself
+- This project was made for professional and educational purposes
 
-- Deve utilizar useContext, useState e useEffect.
-- Ter ao menos 3 paginas navegáveis com router (ex: um navbar para facilitar a navegação).
-- Deve consumir uma API de sua escolha, desde que os dados sejam filtraveis e paginados. No mínimo 15 itens por requisição.
+## Contact me!
 
--------------------------------------------------------
+Found any bugs, has some improvement suggestion or liked my job and want to reach me? Go ahead:
 
-## REQUISITOS DIFERENCIAIS:
-
-- Código tentando seguir SOLID.
-- Código performático.
-- Utilizar inglês no projeto todo.
-- Utilizar Injeção de Dependências.
-- Fazer deploy do mesmo (heroku, netlify, aws, vercel, github pages ou outro da preferência).
+- linkedin: https://www.linkedin.com/in/lucas-nobrz/
+- email: lucasnobre37@outlook.com
diff --git a/components/Cover/Cover.jsx b/components/Cover/Cover.jsx
@@ -0,0 +1,24 @@
+import {
+  BackgroundContainer,
+  CoverContainer,
+  PreTitle,
+  Title,
+  MainText,
+  TextContainer,
+} from "./styles";
+
+const Cover = ({ preTitleText, titleText, mainText }) => {
+  return (
+    <BackgroundContainer>
+      <CoverContainer>
+        <TextContainer className="animated">
+          {preTitleText && <PreTitle>{preTitleText}</PreTitle>}
+          <Title>{titleText}</Title>
+          {mainText && <MainText>{mainText}</MainText>}
+        </TextContainer>
+      </CoverContainer>
+    </BackgroundContainer>
+  );
+};
+
+export default Cover;
diff --git a/components/Cover/styles.jsx b/components/Cover/styles.jsx
@@ -0,0 +1,83 @@
+import styled from "styled-components";
+import { bitter, hyliaSerif, kadwa } from "../../public/fonts/fonts";
+
+export const BackgroundContainer = styled.section`
+  background-image: url("/illustrations/mobile-background.jpg");
+  background-size: cover;
+  max-width: 100%;
+  height: 600px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-bottom: 3px solid #d3ac5c;
+
+  @media (min-width: 1070px) {
+    background-image: url("/illustrations/background-1.png");
+  }
+`;
+
+export const CoverContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  border-bottom: 3px solid #d3ac5c;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const TextContainer = styled.div`
+  @media (min-width: 744px) {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    align-items: center;
+    width: 40%;
+  }
+`;
+
+export const PreTitle = styled.h2`
+  font-family: ${bitter.style.fontFamily};
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.62em;
+  line-height: 12px;
+  color: #f0f0f0;
+  text-align: center;
+
+  @media (min-width: 744px) {
+    font-size: 1.25em;
+  }
+`;
+
+export const Title = styled.h1`
+  font-family: ${hyliaSerif.style.fontFamily};
+  font-style: normal;
+  font-weight: 400;
+  font-size: 3em;
+  line-height: 45px;
+  color: #f0f0f0;
+  text-align: center;
+
+  @media (min-width: 744px) {
+    font-size: 6.25em;
+    margin-top: 40px;
+  }
+`;
+
+export const MainText = styled.p`
+  font-family: ${bitter.style.fontFamily};
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 17px;
+  text-align: center;
+  color: #f0f0f0;
+  margin: 26px 30px 0px 30px;
+
+  @media (min-width: 744px) {
+    font-size: 1.25em;
+    margin: 80px 30px 0px 50px;
+    line-height: 40px;
+  }
+`;
diff --git a/components/Error/ErrorComponent.jsx b/components/Error/ErrorComponent.jsx
@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { ErrorContainer, ErrorDescription, ErrorTitle } from "./styles";
+import { GlobalContext } from "../../storage/global";
+
+const ErrorComponent = ({ title, message }) => {
+  const globalContext = useContext(GlobalContext);
+
+  return (
+    <ErrorContainer className="animated">
+      <ErrorTitle
+        className={
+          globalContext.lightTheme
+            ? "lightThemeFontColor"
+            : "darkThemeFontColor"
+        }
+      >
+        {title}
+      </ErrorTitle>
+      <ErrorDescription
+        className={
+          globalContext.lightTheme
+            ? "lightThemeFontColor"
+            : "darkThemeFontColor"
+        }
+      >
+        {message}
+      </ErrorDescription>
+    </ErrorContainer>
+  );
+};
+
+export default ErrorComponent;
diff --git a/components/Error/styles.jsx b/components/Error/styles.jsx
@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import { hyliaSerif, bitter } from "../../public/fonts/fonts";
+
+export const ErrorContainer = styled.section`
+  height: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: center;
+  margin: 50px;
+`;
+
+export const ErrorTitle = styled.h1`
+  font-family: ${hyliaSerif.style.fontFamily};
+  font-style: normal;
+  font-weight: 400;
+  font-size: 2em;
+  line-height: 45px;
+  text-align: center;
+  color: #f0f0f0;
+  margin-bottom: 30px;
+`;
+
+export const ErrorDescription = styled.p`
+  font-family: ${bitter.style.fontFamily};
+  font-style: normal;
+  font-weight: 400;
+  font-size: 1em;
+  line-height: 19px;
+  text-align: center;
+  color: #f0f0f0;
+  margin-top: 10px;
+
+  &:first-child {
+    margin-top: 0px;
+  }
+`;
diff --git a/components/Footer/Footer.jsx b/components/Footer/Footer.jsx
@@ -0,0 +1,51 @@
+import {
+  BackgroundContainer,
+  ContactItem,
+  FooterContainer,
+  FooterTitle,
+  RightsContainer,
+} from "./styles";
+import Image from "next/image";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <BackgroundContainer>
+      <FooterContainer>
+        <Image
+          src="/illustrations/dark-theme-logo.svg"
+          alt="zeldapi logo"
+          width={100}
+          height={40}
+          style={{ marginTop: "40px" }}
+        />
+        <FooterTitle>Liked my job? Contact me!</FooterTitle>
+        <ul>
+          <ContactItem>
+            <Link href="mailto:lucasnobre37@outlook.com" className="footerLink">
+              lucasnobre37@outlook.com
+            </Link>
+          </ContactItem>
+          <ContactItem>
+            <Link href="https://github.com/lnobrz" className="footerLink">
+              https://github.com/lnobrz
+            </Link>
+          </ContactItem>
+          <ContactItem>
+            <Link
+              href="https://www.linkedin.com/in/lucas-nobrz/"
+              className="footerLink"
+            >
+              https://www.linkedin.com/in/lucas-nobrz/
+            </Link>
+          </ContactItem>
+        </ul>
+        <RightsContainer>
+          Lucas Nobre, 2023. Some Rights Reserved.
+        </RightsContainer>
+      </FooterContainer>
+    </BackgroundContainer>
+  );
+};
+
+export default Footer;
diff --git a/components/Footer/styles.jsx b/components/Footer/styles.jsx
@@ -0,0 +1,58 @@
+import styled from "styled-components";
+import { bitter } from "../../public/fonts/fonts";
+
+export const BackgroundContainer = styled.footer`
+  width: 100%;
+  background: url("/illustrations/background-3.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+`;
+
+export const FooterContainer = styled.div`
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  border-top: 2px solid #d3ac5c;
+`;
+
+export const FooterTitle = styled.h1`
+  font-family: ${bitter.style.fontFamily};
+  font-style: normal;
+  font-weight: 700;
+  font-size: 1em;
+  line-height: 19px;
+  color: #f0f0f0;
+  margin: 30px;
+`;
+
+export const ContactItem = styled.li`
+  font-family: ${bitter.style.fontFamily};
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0.75em;
+  line-height: 14px;
+  text-align: center;
+  color: #f0f0f0;
+  margin-bottom: 10px;
+`;
+
+export const RightsContainer = styled.div`
+  display: flex;
+  flex-flow: column-wrap;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  background: linear-gradient(180deg, #032520 0%, #0b131b 100%);
+  font-family: ${bitter.style.fontFamily};
+  font-style: normal;
+  font-weight: 500;
+  font-size: 0.62em;
+  line-height: 12px;
+  text-align: center;
+  color: #f0f0f0;
+  margin-top: 50px;
+`;