feat: add sobre and made some changes in other files

src/components/AboutSection.tsx

@@ -21,7 +21,7 @@ export const AboutSection = () => {
         <Text>
         A perifaCode é uma ONG que tem com objetivo “desgourmetizar” o mercado digital, preenchido, em sua maioria, por um estereótipo ao qual precisa ser mudado para ser mais inclusivo e com esse propósito a ONG foi criada em 2019 para capacitar, discutir e fazer ouvir a voz da periferia dentro do mercado digital. 
 
-        Realizamos diversos eventos presenciais para capacitar esses jovens da periferia e contavam com vários grupos espalhados pelas redes sociais, contamos com uma comunidade ativa no Discord para discutirmos sobre programação e temas relacionados.
+        Realizamos diversos eventos presenciais para capacitar esses jovens da periferia e contamos com vários grupos espalhados pelas redes sociais, além de uma comunidade ativa no Discord para discutirmos sobre programação e temas relacionados.
         </Text>
       </Flex>
     </Flex>

src/components/LinkButton.tsx

@@ -6,12 +6,11 @@ type LinkButtonProps = {
   href: string,
 }
 
-export const LinkButton = ({ children, href }: LinkButtonProps) => {
+export const LinkButton = ({ children, href, ...props}: LinkButtonProps) => {
   return (
     <Link href={href} passHref>
       <ChakraLink
-        target="_blank"
-        rel="noopener noreferrer"
+        {...props}
         my="0.5rem"
         bg="brand.primary"
         width="fit-content"

src/components/Navbar/index.tsx

@@ -4,9 +4,10 @@ import { NavItem } from "./NavItem"
 export const Navbar = () => {
   return (
     <Flex as="nav" gap="1.5rem">
-      <NavItem href="/" label="Home" />
-      <NavItem href="/about" label="About" />
-      <NavItem href="/blog" label="Blog" />
+      <NavItem href="/" label="Página inicial" />
+      <NavItem href="/sobre" label="Sobre nós" />
+      <NavItem href="/manifesto" label="Manifesto" />
+      <NavItem href="/coc" label="Código de conduta" />
     </Flex>
   )
 }

src/pages/coc.tsx

@@ -3,13 +3,9 @@ import { gql } from "graphql-request"
 import { GetStaticProps } from "next"
 import { graphcms } from "../services/graphcms"
 import styles from "../styles/BasicPage.module.scss"
+import { BasicPageProps } from "../types/BasicPageProps"
 
-type CocProps = {
-  title: string
-  content: string
-}
-
-const Coc = ({ title, content }: CocProps) => {
+const Coc = ({ title, content }: BasicPageProps) => {
   return (
     <Container maxW={1180} my="2rem">
       <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>

src/pages/manifesto.tsx

@@ -3,13 +3,11 @@ import { gql } from "graphql-request"
 import { GetStaticProps } from "next"
 import { graphcms } from "../services/graphcms"
 import styles from "../styles/BasicPage.module.scss"
+import { BasicPageProps } from "../types/BasicPageProps"
+
 
-type ManifestoProps = {
-  title: string
-  content: string
-}
 
-const Manifesto = ({ title, content }: ManifestoProps) => {
+const Manifesto = ({ title, content }: BasicPageProps) => {
   return (
     <Container maxW={1180} my="2rem">
       <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>

src/pages/sobre.tsx

@@ -0,0 +1,39 @@
+import { Container, Heading } from "@chakra-ui/react"
+import { gql } from "graphql-request"
+import { GetStaticProps } from "next"
+import { graphcms } from "../services/graphcms"
+import styles from "../styles/BasicPage.module.scss"
+import { BasicPageProps } from "../types/BasicPageProps"
+
+const Sobre = ({ title, content }: BasicPageProps) => {
+  return (
+    <Container maxW={1180} my="2rem">
+      <Heading as="h1" textTransform="uppercase" my="2rem">{title}</Heading>
+      <div className={styles.content} dangerouslySetInnerHTML={{ __html: content }} />
+    </Container>
+  )
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  const query = gql`
+    {
+      basicPage(where: { slug: "sobre" }) {
+        title,
+        content {
+          html
+        }
+      }
+    }
+  `
+  const { basicPage } = await graphcms.request(query)
+  const { title, content } = basicPage
+  return {
+    props: {
+      title,
+      content: content.html,
+    },
+  }
+}
+
+
+export default Sobre

src/styles/BasicPage.module.scss

@@ -7,7 +7,7 @@
     font-weight: 700;
     margin: .5rem 0;
   }
-  ul {
+  ul, ol {
     margin-left: 2rem;
   }
 }

src/types/BasicPageProps.ts

@@ -0,0 +1,4 @@
+export type BasicPageProps = {
+  title: string
+  content: string
+}