Make requested changes

Squash and merge the following commits into develop:
* fix: change Publications page assets
* refactor: Publications
* fix: categories and results

public/locales/en/index.js

@@ -22,7 +22,7 @@ const en = {
       that compete in various categories, such as:`,
       categories: [
         'Small Size League',
-        'Very Small Size League',
+        'Very Small Size Soccer',
         '2D Simulation',
         'Drone',
       ],
@@ -45,9 +45,9 @@ const en = {
         table_header: 'Small Size League - Results',
       },
       {
-        title: 'Very Small Size League',
+        title: 'Very Small Size Soccer',
         competitions: 'LARC | IronCup',
-        description: `The Very Small Size Soccer (VSS) competition 
+        description: `The Very Small Size Soccer (VSSS) competition 
         is a multifaceted challenge that necessitates excellence in 
         key domains within RobôCIn. This includes advanced computer 
         vision techniques for extracting critical game-related 
@@ -74,7 +74,7 @@ const en = {
             executed by our players.`,
           },
         ],
-        table_header: 'Very Small Size League - Results',
+        table_header: 'Very Small Size Soccer - Results',
       },
       {
         title: '2D Simulation',
@@ -266,7 +266,7 @@ const en = {
         recent: 'Most recent',
       },
       publication_card: {
-        url_label: 'Paper',
+        url_label: 'Read',
       },
       filter_results: {
         fallback: 'Oops! No publications were found for this year.',

public/locales/pt-BR/index.js

@@ -22,7 +22,7 @@ const ptBR = {
       disputam títulos em várias categorias de competições, como:`,
       categories: [
         'Small Size League',
-        'Very Small Size League',
+        'Very Small Size Soccer',
         '2D Simulation',
         'Drone',
       ],
@@ -44,9 +44,9 @@ const ptBR = {
         table_header: 'Small Size League - Resultados',
       },
       {
-        title: 'Very Small Size League',
+        title: 'Very Small Size Soccer',
         competitions: 'LARC | IronCup',
-        description: `Very Small Size Soccer (VSS) é uma competição 
+        description: `Very Small Size Soccer (VSSS) é uma competição 
         que requer desenvolvimento nas principais áreas do RobôCIn, 
         visão computacional para detectar informações sobre a situação 
         do jogo; inteligência artificial para planejar todos os 
@@ -69,7 +69,7 @@ const ptBR = {
             estratégia e decisões que nossos jogadores fazem.`,
           },
         ],
-        table_header: 'Very Small Size League - Resultados',
+        table_header: 'Very Small Size Soccer - Resultados',
       },
       {
         title: '2D Simulation',
@@ -281,7 +281,7 @@ const ptBR = {
         recent: 'Mais recentes',
       },
       publication_card: {
-        url_label: 'Paper',
+        url_label: 'Leia',
       },
       filter_results: {
         fallback: 'Oops! Nenhuma publicação foi encontrada para esse ano.',

src/assets/index.ts

@@ -18,6 +18,8 @@ import TwoDimensionSim from './2d-sim.jpg'
 
 import RobotModel from './robot-model.jpg'
 
+import Lab from './robocin-lab-2.jpg'
+
 export {
   LogoWithLabel,
   LogoWithLabelBright,
@@ -33,4 +35,5 @@ export {
   TwoDimensionSim,
   RobotModel,
   AltGroupPhoto,
+  Lab,
 }

src/components/CategoriesPage/components/Category/Category.tsx

@@ -13,7 +13,7 @@ type ResultTableKey = 'vssl' | 'ssl' | 'simulation' | 'drone'
 
 const titleMap: Record<string, ResultTableKey> = {
   'Small Size League': 'ssl',
-  'Very Small Size League': 'vssl',
+  'Very Small Size Soccer': 'vssl',
   '2D Simulation': 'simulation',
   Drone: 'drone',
 }

src/components/CategoriesPage/components/Header/CategoriesHeader.styles.ts

@@ -64,7 +64,7 @@ export const GategorySmallCard = styled.div`
 
   color: white;
   text-transform: uppercase;
-  font-size: ${styles.fontSizes.md};
+  font-size: ${styles.fontSizes.sm};
   font-weight: ${styles.fontWeights.bold};
   text-align: center;
 

src/components/Publications/PublicationCardV2/PublicationCard.styles.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components'
+import styles from '@/styles/styles'
+
+export const Container = styled.div`
+  width: 80%;
+  min-height: 200px;
+  height: fit-content;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+
+  border-radius: 24px;
+  border: 2px solid ${styles.colors.secondary};
+  box-shadow: 10px 0 ${styles.colors.secondary};
+
+  background-color: white;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    border-left: 2px solid ${styles.colors.secondary};
+    height: fit-content;
+  }
+`
+
+export const Wrapper = styled.div`
+  width: 100%;
+`
+
+export const Date = styled.p`
+  font-size: ${styles.fontSizes.sm};
+  font-weight: ${styles.fontWeights.thin};
+`
+
+export const Title = styled.p`
+  font-size: ${styles.fontSizes.lg};
+  font-weight: ${styles.fontWeights.bold};
+`
+
+export const Authors = styled.p`
+  font-size: ${styles.fontSizes.md};
+  margin-top: 20px;
+`
+
+export const AnchorText = styled.p`
+  font-size: ${styles.fontSizes.xs};
+  text-align: right;
+  color: ${styles.colors.primary};
+`

src/components/Publications/PublicationCardV2/PublicationCard.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { PublicationCardDefaultProps as PublicationCardProps } from './interfaces'
+
+import * as S from './PublicationCard.styles'
+
+const PublicationCard = ({ publication, translate }: PublicationCardProps) => {
+  return (
+    <S.Container>
+      <S.Wrapper>
+        <S.Date>{publication?.year}</S.Date>
+        <S.Title>{publication?.title}</S.Title>
+        <S.Authors>{publication?.description}</S.Authors>
+        <a href={publication?.url} rel="noopener noreferrer" target="_blank">
+          <S.AnchorText>{translate?.url_label}</S.AnchorText>
+        </a>
+      </S.Wrapper>
+    </S.Container>
+  )
+}
+
+export default PublicationCard

src/components/Publications/PublicationCardV2/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { PublicationCardDefaultProps } from './interfaces'
+
+import Main from './PublicationCard'
+
+const PublicationCard = ({
+  publication,
+  translate,
+}: PublicationCardDefaultProps) => {
+  return <Main publication={publication} translate={translate} />
+}
+
+export default PublicationCard

src/components/Publications/PublicationCardV2/interfaces.ts

@@ -0,0 +1,4 @@
+export interface PublicationCardDefaultProps {
+  translate: any
+  publication: any
+}

src/components/Publications/PublicationsList/PublicationsList.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import PublicationCard from '../PublicationCard'
+import PublicationCard from '../PublicationCardV2'
 
 import * as S from './PublicationsList.styles'
 
@@ -41,11 +41,8 @@ const PublicationsList = ({
         publications?.map((publication, index) => (
           <PublicationCard
             key={`${publication.url}-${index}`}
+            publication={publication}
             translate={translate.publication_card}
-            title={publication.title}
-            description={publication.description}
-            image={publication?.image}
-            url={publication.url}
           />
         ))
       )}

src/components/Publications/PublicationsList/index.tsx

@@ -1,34 +1,28 @@
 import React, { useState, useMemo, useEffect } from 'react'
-import publications from '@/data/publications'
+import { scientificPublications } from '@/data/publications'
 
 import Main from './PublicationsList'
 
 import { PublicationsListDefaultProps } from './interfaces'
 import { useRouter } from 'next/router'
 
-const PublicationsList = ({
-  translate,
-}: // publications,
-PublicationsListDefaultProps) => {
+const PublicationsList = ({ translate }: PublicationsListDefaultProps) => {
   const router = useRouter()
   const { locale } = router
   const language = locale === 'en' ? 'en' : 'ptBR'
 
   const [lang, setLang] = useState(language)
   const [filteredPublications, setFilteredPublications] = useState(
-    publications[lang]
+    scientificPublications
   )
 
-  // const currentDate = new Date()
-  // const currentYear = currentDate.getFullYear()
-  const currentYear = 2020
-
   const yearFilterOptions = useMemo(() => {
-    const startYear = 2016
-    const yearOptionsRange = Array(currentYear - startYear + 1)
+    const initialYear = 2020
+    const finalYear = 2023
+    const yearOptionsRange = Array(finalYear - initialYear + 1)
       .fill(undefined)
       .map((_, index) => {
-        const year = currentYear - index
+        const year = finalYear - index
         return {
           label: year.toString(),
           value: year.toString(),
@@ -53,11 +47,11 @@ PublicationsListDefaultProps) => {
     const { value: filterValue } = e.target
 
     if (filterValue === 'all') {
-      setFilteredPublications(publications[lang])
+      setFilteredPublications(scientificPublications)
       return
     }
 
-    const filteredData = publications[lang].filter(
+    const filteredData = scientificPublications.filter(
       (publication) => publication.year === filterValue
     )
     setFilteredPublications(filteredData)
@@ -68,7 +62,7 @@ PublicationsListDefaultProps) => {
   }, [locale])
 
   useEffect(() => {
-    setFilteredPublications(publications[lang])
+    setFilteredPublications(scientificPublications)
   }, [lang])
 
   return (

src/components/Publications/TDPSection/TDPSection.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { AltGroupPhoto, OpenInNewIcon } from '@/assets'
+import { Lab, OpenInNewIcon } from '@/assets'
 
 import * as S from './TDPSection.styles'
 
@@ -10,7 +10,7 @@ const TDPSection = ({ translate, tdpsUrl }: TDPSectionProps) => {
   return (
     <>
       <S.Container>
-        <S.Picture src={AltGroupPhoto} alt="Group" priority />
+        <S.Picture src={Lab} alt="Group" priority />
         <S.Content>
           <S.Title>{translate.title}</S.Title>
           <S.Description>{translate.description}</S.Description>