diff --git a/src/assets/img/graph.svg b/src/assets/img/graph.svg
new file mode 100644
index 0000000..b9e3f69
--- /dev/null
+++ b/src/assets/img/graph.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/components/Collaborations/index.js b/src/components/Collaborations/index.js
new file mode 100644
index 0000000..e3b3a0d
--- /dev/null
+++ b/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) => (
+
+
+ 
+
+
+ ))}
+
+ );
+
+};
\ No newline at end of file
diff --git a/src/components/Collaborations/styles.js b/src/components/Collaborations/styles.js
new file mode 100644
index 0000000..94cc49b
--- /dev/null
+++ b/src/components/Collaborations/styles.js
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+ margin-right: 1vw;
+
+`;
diff --git a/src/i18n/locales/pt-br.json b/src/i18n/locales/pt-br.json
index a3fba06..a009ad8 100644
--- a/src/i18n/locales/pt-br.json
+++ b/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 OpenDevUFCG 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 open source dentro desse curso e que realmente fazem ela acontecer!"
}
}
}
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
new file mode 100644
index 0000000..ae22087
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+ {t("about.mainTitle")}
+ { t('about.firstPartDescription')}
+
+
+
+
+
+
+
+
+
+ {t("about.collaborationsTitle")}
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/about/styles.js b/src/pages/about/styles.js
new file mode 100644
index 0000000..f11c1db
--- /dev/null
+++ b/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;
+
+`;
\ No newline at end of file
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 054bd8b..22b7cc3 100644
--- a/src/styles/globals.css
+++ b/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;