[feature] about component

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 <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."
         }
     }
 }

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 (
+        <>
+        <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>
+        </About>
+        </>
+    )
+}

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;
+
+`;

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;