From 2ca773e4d45855348ff625a135187ba472b5745f Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Tue, 1 Nov 2022 19:36:39 -0300 Subject: [PATCH 1/3] [ADD] about basic component + texts in PT --- src/i18n/locales/pt-br.json | 5 +++++ src/pages/about/index.js | 29 +++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/pages/about/index.js 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 From e6a50806f5fcc9756a63ec3452ea6a36603d2a97 Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Tue, 1 Nov 2022 19:36:49 -0300 Subject: [PATCH 2/3] [ADD] import fixing graph --- src/assets/img/graph.svg | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/assets/img/graph.svg 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 From e2a794e22369c7f973c71320803353fe4c20daf3 Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Tue, 1 Nov 2022 19:37:38 -0300 Subject: [PATCH 3/3] [ADD] about styles --- src/pages/about/styles.js | 53 +++++++++++++++++++++++++++++++++++++++ src/styles/globals.css | 1 + 2 files changed, 54 insertions(+) create mode 100644 src/pages/about/styles.js 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;