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/i18n/locales/pt-br.json b/src/i18n/locales/pt-br.json
index a3fba06..128500d 100644
--- a/src/i18n/locales/pt-br.json
+++ b/src/i18n/locales/pt-br.json
@@ -6,6 +6,11 @@
"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."
}
}
}
diff --git a/src/pages/about/index.js b/src/pages/about/index.js
new file mode 100644
index 0000000..4f95a68
--- /dev/null
+++ b/src/pages/about/index.js
@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react'
+import { useTranslation, Trans } from 'react-i18next';
+import { Header } from '~/components/Header';
+import { About, Texts, Collaborations, Graph, Title, Paragraph, Wrapper } 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')}
+
+
+
+
+
+
+
+
+ )
+}
\ 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..1bcb24c
--- /dev/null
+++ b/src/pages/about/styles.js
@@ -0,0 +1,53 @@
+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: 84vw;
+`;
+
+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;
+
+`;
\ 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;