Add recruitment ("seletiva") page and section

public/locales/en/index.js

@@ -5,6 +5,7 @@ const en = {
       categories: 'Categories',
       team: 'Team',
       papers: 'Publications',
+      recruitment: 'Recruitment',
     },
   },
   footer: {
@@ -190,6 +191,10 @@ const en = {
         },
       ],
     },
+    recruitment: {
+      recruiting: "We're recruiting new members!",
+      cta: 'Learn more',
+    },
     activities: {
       competitions_card: {
         title: 'Competitions',
@@ -273,6 +278,10 @@ const en = {
       },
     },
   },
+  recruitment_page: {
+    header: "We're recruiting new members!",
+    cta: 'Apply now!',
+  },
 }
 
 export default en

public/locales/pt-BR/index.js

@@ -5,6 +5,7 @@ const ptBR = {
       categories: 'Categorias',
       team: 'Equipe',
       papers: 'Publicações',
+      recruitment: 'Seletiva',
     },
   },
   footer: {
@@ -200,6 +201,10 @@ const ptBR = {
         },
       ],
     },
+    recruitment: {
+      recruiting: 'Estamos selecionando novos membros!',
+      cta: 'Veja mais',
+    },
     activities: {
       competitions_card: {
         title: 'Competições',
@@ -288,6 +293,10 @@ const ptBR = {
       },
     },
   },
+  recruitment_page: {
+    header: 'Estamos selecionando novos membros!',
+    cta: 'Candidate-se agora!',
+  },
 }
 
 export default ptBR

src/components/Home/Recruitment/Recruitment.styles.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components'
+
+import Link from 'next/link'
+import styles from '@/styles/styles'
+
+export const Container = styled.section`
+  width: 100%;
+  height: 300px;
+  background-color: ${styles.colors.primary};
+  color: ${styles.colors.white};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 48px;
+
+  h1 {
+    font-size: 32px;
+  }
+`
+
+export const ApplicationCTA = styled(Link)`
+  padding: 24px 50px;
+  border-radius: 36px;
+  font-size: 22px;
+  border: none;
+  color: ${styles.colors.primary};
+  background-color: ${styles.colors.white};
+  font-weight: ${styles.fontWeights.bold};
+  cursor: pointer;
+`

src/components/Home/Recruitment/index.tsx

@@ -0,0 +1,17 @@
+import * as S from './Recruitment.styles'
+import useTranslation from '@/hooks/useTranslation'
+
+function Recruitment() {
+  const t = useTranslation()
+
+  return (
+    <S.Container>
+      <h1>{t.home.recruitment.recruiting}</h1>
+      <S.ApplicationCTA href="./seletiva">
+        {t.home.recruitment.cta}
+      </S.ApplicationCTA>
+    </S.Container>
+  )
+}
+
+export default Recruitment

src/components/Navbar/index.tsx

@@ -25,6 +25,10 @@ const Navbar = () => {
       label: t.navbar.options.papers,
       link: '/publications',
     },
+    {
+      label: t.navbar.options.recruitment,
+      link: '/seletiva',
+    },
   ]
 
   const languages = [

src/components/Recruitment/styles.ts

@@ -0,0 +1,44 @@
+import styled from 'styled-components'
+import Image from 'next/image'
+
+import styles from '@/styles/styles'
+import Link from 'next/link'
+
+export const Container = styled.div`
+  padding: 150px 30px 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`
+
+export const BannerImage = styled(Image)`
+  width: 100%;
+  height: 700px;
+  object-fit: cover;
+  display: block;
+`
+
+export const ApplicationLink = styled(Link)`
+  padding: 20px 40px;
+  border-radius: 36px;
+  font-size: 22px;
+  border: none;
+  margin: 40px 0 20px;
+  color: ${styles.colors.white};
+  background-color: ${styles.colors.primary};
+  cursor: pointer;
+`
+
+export const FaqContainer = styled.section`
+  max-width: 600px;
+  font-size: ${styles.fontSizes.md};
+
+  ul {
+    list-style: none;
+  }
+
+  li {
+    margin: 16px 0;
+  }
+`

src/components/index.ts

@@ -7,6 +7,7 @@ import Activities from './Home/Activities'
 import AboutUs from './Home/AboutUs'
 import Sponsors from './Home/Sponsors'
 import Banner from './Home/Bannerv3'
+import Recruitment from './Home/Recruitment'
 
 export {
   Navbar,
@@ -17,4 +18,5 @@ export {
   AboutUs,
   Sponsors,
   Banner,
+  Recruitment,
 }

src/pages/index.tsx

@@ -2,7 +2,14 @@ import React from 'react'
 
 import useTranslation from '@/hooks/useTranslation'
 
-import { Footer, Activities, AboutUs, Sponsors, Banner } from '@/components'
+import {
+  Footer,
+  Activities,
+  AboutUs,
+  Sponsors,
+  Banner,
+  Recruitment,
+} from '@/components'
 
 import * as S from '../styles/home.styles'
 
@@ -13,6 +20,7 @@ export default function Home() {
     <S.PageWrap>
       <S.ContentWrap>
         <Banner translate={t.home.banner.headline} />
+        <Recruitment />
         <AboutUs translate={t.home.about_us} />
         <Activities translate={t.home.activities} />
         <Sponsors translate={t.home.sponsors} />

src/pages/seletiva/index.tsx

@@ -0,0 +1,151 @@
+import useTranslation from '@/hooks/useTranslation'
+
+import { Footer } from '@/components'
+
+import { PageWrap, ContentWrap } from '../../styles/pages.styles'
+
+import * as S from '../../components/Recruitment/styles'
+import Link from 'next/link'
+
+const RecruitmentPage = () => {
+  const t = useTranslation()
+
+  return (
+    <PageWrap>
+      <ContentWrap>
+        <S.Container>
+          <h1 style={{ textAlign: 'center' }}>{t.recruitment_page.header}</h1>
+          <S.ApplicationLink
+            href="https://docs.google.com/forms/d/1BzwpruRIOyFXa9feMs6U_ph1tqfy08fZUa0LVh2ugqg/closedform"
+            target="_blank"
+          >
+            {t.recruitment_page.cta}
+          </S.ApplicationLink>
+          <Link
+            href="https://drive.google.com/file/d/1oTGm5KmXLPwaJQtHD4PlIW8D-vxSwom1/view?usp=sharing"
+            target="_blank"
+            style={{ textDecoration: 'underline', fontSize: '16px' }}
+          >
+            Confira o edital
+          </Link>
+          <hr
+            style={{
+              margin: '40px 0',
+              color: 'gray',
+              width: '40%',
+            }}
+          />
+          <h1>Perguntas Frequentes</h1>
+          <S.FaqContainer>
+            <div>
+              <ul>
+                <li>
+                  <b>Pergunta:</b> Estou no começo do curso e não possuo
+                  conhecimento na área, consigo participar?
+                  <p>
+                    <b>Resposta:</b> Sim!
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Estou no ensino superior mas não faço parte
+                  da UFPE, posso me inscrever?
+                  <p>
+                    <b>Resposta:</b> Infelizmente não.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> O projeto envolve bolsa?
+                  <p>
+                    <b>Resposta:</b> O RobôCIn não oferece bolsa para membros da
+                    equipe. Entretanto, é possível desenvolver projetos de
+                    pesquisa e iniciação científica dentro da equipe com os
+                    professores orientadores que podem concorrer a bolsas em
+                    órgãos de incentivo.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Quantas vagas temos?
+                  <p>
+                    <b>Resposta:</b> Não temos um número fixo de vagas, vai
+                    depender do desempenho das pessoas candidatas e da demanda
+                    da equipe.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Quais são as áreas de atuação?
+                  <p>
+                    <b>Resposta:</b> Temos as áreas de Comunicação, Mecânica,
+                    Eletrônica, Embarcados e Software.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Escolhi na inscrição que queria fazer parte
+                  da área X, posso fazer um projeto da área Y?
+                  <p>
+                    <b>Resposta:</b> Não, escolhemos ter um projeto de cada área
+                    com a finalidade de suprir as necessidades da equipe. A
+                    robótica envolve diversos conhecimentos, levando cada membro
+                    a trabalhar em diversas áreas com o tempo, mas temos a
+                    expectativa de que, caso ingresse no RobôCIn, a pessoa
+                    candidata inicialmente trabalhará na área escolhida.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> O projeto tem carga horária obrigatória?
+                  <p>
+                    <b>Resposta:</b> Somos bem flexíveis quanto ao horário, pois
+                    existem semanas de provas e projetos, mas tentamos manter 2
+                    turnos de dedicação por semana.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> A partir de qual período posso me inscrever?
+                  <p>
+                    <b>Resposta:</b> Aceitamos alunos de qualquer período, sendo
+                    assim, não existe nenhuma restrição.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Como funciona o processo seletivo?
+                  <p>
+                    <b>Resposta:</b> O processo seletivo é dividido em 05 fases:
+                    inscrição, semana de lançamento, projeto individual,
+                    entrevista e trainee. Avaliamos a pessoa candidata a partir
+                    das informações fornecidas na inscrição, da participação e
+                    engajamento no desenvolvimento do projeto individual, pelo
+                    alinhamento na entrevista e também pelo empenho no trainee.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Como faço para entrar no Discord da seletiva?
+                  <p>
+                    <b>Resposta:</b> Fique atento ao e-mail fornecido no
+                    formulário de inscrição; enviaremos o convite por ele.
+                  </p>
+                </li>
+                <li>
+                  <b>Pergunta:</b> Como sei se fui aprovado(a) ou não?
+                  <p>
+                    <b>Resposta:</b> Fique atento ao e-mail fornecido no
+                    formulário de inscrição; enviaremos o resultado por ele.
+                  </p>
+                </li>
+              </ul>
+              <p>
+                Ficou com alguma dúvida que não foi respondida? Entre em contato
+                com a gente!
+              </p>
+              <ul>
+                <li>Instagram: @robocinufpe</li>
+                <li>E-mail: [email protected]</li>
+              </ul>
+            </div>
+          </S.FaqContainer>
+        </S.Container>
+      </ContentWrap>
+      <Footer />
+    </PageWrap>
+  )
+}
+
+export default RecruitmentPage