[Feature] collaborations component

src/components/Collaborations/index.js

@@ -0,0 +1,37 @@
+import React, { Component, useEffect, useState } from 'react'
+import axios from 'axios'
+import { Wrapper } from "./styles";
+const api = {
+    baseUrl: "https://api.github.com"
+}
+
+export default function Collaborations() {
+
+    const [githubData, setGithubData] = useState([]);
+
+    useEffect(() => {
+        axios
+            .get(api.baseUrl + "/repos/OpenDevUFCG/roadmap-cc/contributors")
+            .then((res) => {
+                setGithubData(res.data)
+            });
+    }, []);
+
+    return (
+        <>
+            {githubData.map((contributorData) => (
+                    <Wrapper>
+                        <a href={`https://github.com/${contributorData.login}`} target="_blank">
+                        <img    
+                            key={contributorData.login}
+                            src={contributorData.avatar_url} 
+                            alt={contributorData.login}
+                            style={{ width: 64, borderRadius: 40}}
+                        />
+                        </a>
+                    </Wrapper>
+            ))}
+        </>
+    );
+
+};

src/components/Collaborations/styles.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  margin-right: 1vw;
+
+`;

src/i18n/locales/pt-br.json

@@ -6,6 +6,13 @@
             "home": "Home",
             "trails": "Trilhas",
             "about": "Sobre nós"
+        },
+        "about": {
+            "mainTitle": "Sobre nós",
+            "firstPartDescription": "Cada trilha representa quais cadeiras você vai pagar para focar em uma determinada área mas, claro, isso não significa que você deve pagar elas se não você não vai ser um verdadeiro engenherio de software ou ciêntista de dados, elas servem como um guia, mas no final das contas você faz o seu caminho nesse curso.",
+            "secondPartDescription": "O Roadmap é um projeto da <strong>OpenDevUFCG</strong> que nasceu da necessidade descrever melhor as oportunidades que o curso pode oferecer, mostrando as disciplinas em um sistema de trilhas para que você consiga atuar em uma área específica da sua escolha.",
+            "collaborationsTitle": "Contribuidores",
+            "collaborationsDescription": "Aqueles que fizeram esse projeto acontecer desde o início até o que  ele é hoje e que, portanto, merecem serem reconhecidos e agradecidos por todo o tempo e o esforço investidos nesse projeto. São vocês que movem a cultura <strong>open source</strong> dentro desse curso e que realmente fazem ela acontecer!"   
         }
     }
 }

src/pages/about/index.js

@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react'
+import { useTranslation, Trans } from 'react-i18next';
+import { Header } from '~/components/Header';
+import Collaborations from '~/components/Collaborations'
+import { About, Texts, Graph, Title, Paragraph, Wrapper, Container } from "./styles";
+import graph from '~/assets/img/graph.svg'
+import Image from "next/image";
+
+export default function AboutUs() {
+
+    const { t } = useTranslation();
+
+    return (
+        <>
+        <Header/>
+        <About>
+            <Texts>
+                <Wrapper>
+                    <Title>{t("about.mainTitle")}</Title>
+                    <Paragraph>{ t('about.firstPartDescription')}</Paragraph>
+                    <Paragraph>
+                        <Trans i18nKey={'about.secondPartDescription'}/>
+                    </Paragraph>
+                </Wrapper>
+                <Graph>
+                    <Image src={graph}/>
+                </Graph>
+            </Texts>
+            <Wrapper>
+                <Title>{t("about.collaborationsTitle")}</Title>
+                <Paragraph>
+                    <Trans i18nKey={'about.collaborationsDescription'}/>
+                </Paragraph>
+                <Container>
+                    <Collaborations/>
+                </Container>
+            </Wrapper>
+        </About>
+        </>
+    )
+}

src/pages/about/styles.js

@@ -0,0 +1,78 @@
+import styled from "styled-components";
+
+export const About = styled.div`
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  @media (max-width: 640px) {
+    justify-content: center;
+  }
+`;
+export const Texts = styled.div`
+
+  width: 80vw;
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: 480px) {
+    flex-direction: column-reverse;
+    align-items: center;
+    text-align: center;
+  }
+`;
+
+export const Wrapper = styled.div`
+
+  width: 80vw;
+  text-align: center;
+`;
+
+export const Title = styled.div`
+
+  font-size: 24px;
+  color: var(--light-green);
+  font-weight: bold;
+
+  @media (max-width: 480px) {
+    margin-top: 4vh;
+  }  
+`;
+
+export const Paragraph = styled.div`
+
+  font-size: 16px;
+  color: var(--dark-grey);  
+  margin-top: 4vh;
+`;
+
+export const Graph = styled.div`
+
+  margin-top: 2vh;
+
+`;
+
+export const Contribuitors = styled.div`
+
+  width: 80vw;
+
+
+  @media (min-width: 480px) {
+    margin-top: 4vh;
+  }
+
+  @media (max-width: 480px) {
+    text-align: center;
+  }
+`;
+
+export const Container = styled.div`
+
+  width: 80vw;
+  height: 28vh;
+  margin-top: 2%;
+  display: flex;
+  flex-wrap: wrap;
+
+`;

src/styles/globals.css

@@ -11,6 +11,7 @@ body {
   overflow-x: hidden;
 
   --darker-blue: #002626;
+  --light-green: #418671;
   --dark-blue: #0e4749;
   --dark-grey: #292D34;
   --green: #95c623;