From 2ca773e4d45855348ff625a135187ba472b5745f Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Tue, 1 Nov 2022 19:36:39 -0300 Subject: [PATCH 1/6] [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/6] [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/6] [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; From 7d8a5e03c8b7495bc8e67029c9d7ff90ef01660d Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Wed, 2 Nov 2022 00:08:08 -0300 Subject: [PATCH 4/6] [ADD] Collaborations component + styles --- src/components/Collaborations/index.js | 37 +++++++++++++++++++++++++ src/components/Collaborations/styles.js | 6 ++++ 2 files changed, 43 insertions(+) create mode 100644 src/components/Collaborations/index.js create mode 100644 src/components/Collaborations/styles.js 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) => ( + + + {contributorData.login} + + + ))} + + ); + +}; \ 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; + +`; From c523382a5792c618646268b9d325e83173008249 Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Wed, 2 Nov 2022 00:08:44 -0300 Subject: [PATCH 5/6] [ADD] add colab in about component --- src/i18n/locales/pt-br.json | 4 +++- src/pages/about/index.js | 16 ++++++++++++++-- src/pages/about/styles.js | 26 +++++++++++++++++++++++++- 3 files changed, 42 insertions(+), 4 deletions(-) diff --git a/src/i18n/locales/pt-br.json b/src/i18n/locales/pt-br.json index 128500d..a009ad8 100644 --- a/src/i18n/locales/pt-br.json +++ b/src/i18n/locales/pt-br.json @@ -10,7 +10,9 @@ "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." + "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 index 4f95a68..ae22087 100644 --- a/src/pages/about/index.js +++ b/src/pages/about/index.js @@ -1,7 +1,8 @@ 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 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"; @@ -17,12 +18,23 @@ export default function AboutUs() { {t("about.mainTitle")} { t('about.firstPartDescription')} - + + + + + {t("about.collaborationsTitle")} + + + + + + + ) diff --git a/src/pages/about/styles.js b/src/pages/about/styles.js index 1bcb24c..5418a04 100644 --- a/src/pages/about/styles.js +++ b/src/pages/about/styles.js @@ -25,7 +25,7 @@ export const Texts = styled.div` export const Wrapper = styled.div` - width: 84vw; + width: 80vw; `; export const Title = styled.div` @@ -50,4 +50,28 @@ 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 From 2c64e4b8aec4e007230014a8239d5d3ffd1f25b2 Mon Sep 17 00:00:00 2001 From: vitor barbosa Date: Wed, 2 Nov 2022 00:12:47 -0300 Subject: [PATCH 6/6] [FIX] align text --- src/pages/about/styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/about/styles.js b/src/pages/about/styles.js index 5418a04..f11c1db 100644 --- a/src/pages/about/styles.js +++ b/src/pages/about/styles.js @@ -26,6 +26,7 @@ export const Texts = styled.div` export const Wrapper = styled.div` width: 80vw; + text-align: center; `; export const Title = styled.div`