enhancement: enhance various pages and components

src/components/CategoriesPage/components/Categories/index.tsx

@@ -2,15 +2,14 @@ import React from 'react'
 
 import SSL from './assets/small-size-league.png'
 import VSS from './assets/very-small-size-league.png'
-import Simulation from './assets/2d-simulation.png'
-import Drone from './assets/drone.jpeg'
+import { Drone, TwoDimensionSim } from '@/assets'
 
 import Main from './Categories'
 
 import { CategoriesDefaultProps } from './interfaces'
 
 const Categories = ({ translate }: CategoriesDefaultProps) => {
-  const images = [SSL, VSS, Simulation, Drone]
+  const images = [SSL, VSS, TwoDimensionSim, Drone]
 
   return <Main categories={translate} images={images} />
 }

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

@@ -1,18 +1,35 @@
 import React from 'react'
+import { useRouter } from 'next/router'
+
+import { resultsTables } from '@/data/tables'
 
 import { ExpandableTable } from '@/components'
 
 import { CategoryDefaultProps } from './interfaces'
 
 import * as S from './Category.styles'
 
+type ResultTableKey = 'vssl' | 'ssl' | 'simulation' | 'drone'
+type localeType = 'en' | 'pt-BR'
+
+const titleMap: Record<string, ResultTableKey> = {
+  'Small Size League': 'ssl',
+  'Very Small Size League': 'vssl',
+  '2D Simulation': 'simulation',
+  'Drone': 'drone',
+}
+
 const Category = ({
   title,
   image,
   competitions,
   description,
   approaches,
 }: CategoryDefaultProps) => {
+  const router = useRouter()
+  const { locale } = router
+  const lang = locale === 'en' ? 'en' : 'ptBR'
+
   return (
     <S.Container id={title.toLowerCase()}>
       <S.Divider />
@@ -45,7 +62,7 @@ const Category = ({
         </>
       )}
       <S.TableWrapper>
-        <ExpandableTable />
+        <ExpandableTable data={resultsTables[lang][titleMap[title]]} />
       </S.TableWrapper>
     </S.Container>
   )

src/components/CategoriesPage/components/Category/interfaces.ts

@@ -9,4 +9,5 @@ export interface CategoryDefaultProps {
   competitions: string
   description: string
   approaches?: Approach[]
+  tables?: any[]
 }

src/components/CategoriesPage/components/Header/interfaces.ts

@@ -4,5 +4,5 @@ export interface CategoriesHeaderProps {
     description: string
     categories: string[]
   }
-  scrollToSection: (sectionId: string) => void
+  scrollToSection?: (sectionId: string) => void
 }

src/components/Home/BannerV2/Banner.styles.ts

@@ -19,7 +19,7 @@ export const TextContainer = styled.div`
   margin: auto;
   padding: auto;
   color: white;
-  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.8);
+  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
 
   @media (max-width: 768px) {
     padding: 0;

src/components/Home/Bannerv3/index.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image'
+import { StyledBanner, StyledImage, StyledContent } from './style'
+import { Robot } from '@/assets'
+
+const Banner = ({ translate }: { translate: any }) => {
+  return (
+    <StyledBanner>
+      <StyledImage src={Robot} alt="Robô" />
+      <StyledContent>
+        <h2>
+          <span>RobôCIn:</span> {translate.title}
+        </h2>
+        <p>{translate.complement}</p>
+      </StyledContent>
+    </StyledBanner>
+  )
+}
+
+export default Banner

src/components/Home/Bannerv3/style.ts

@@ -0,0 +1,58 @@
+import Image from 'next/image'
+import styled from 'styled-components'
+
+export const StyledBanner = styled.section`
+  padding: 12vh 12vw 6vh;
+  min-height: 100vh;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2vw;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`
+
+export const StyledImage = styled(Image)`
+  width: calc(16vw + 200px);
+  height: auto;
+
+  @media (max-width: 768px) {
+    width: 80vw;
+  }
+`
+
+export const StyledContent = styled.div`
+  text-align: right;
+  width: calc(48vw + 2rem);
+
+  h2 {
+    font-size: calc(0.3rem + 3vw);
+    font-weight: 900;
+    margin-bottom: calc(2vh + 1rem);
+
+    span {
+      color: #469c57;
+    }
+  }
+
+  p {
+    font-size: calc(0.8rem + 0.75vw);
+  }
+
+  @media (max-width: 768px) {
+    text-align: left;
+    width: calc(80vw + 2rem);
+
+    h2 {
+      font-size: calc(2rem + 1vw);
+      margin-bottom: calc(4vh + 0.5rem);
+    }
+
+    p {
+      font-size: calc(1.6rem + 0.3vw);
+    }
+  }
+`

src/components/Home/Sponsors/Sponsors.tsx

@@ -44,10 +44,7 @@ const Sponsors = ({ translate }: SponsorsProps) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          <S.Mail>
-            <S.MailIcon src={Mail} alt="Mail Icon" />
-            [email protected]
-          </S.Mail>
+          <S.Mail>📫 [email protected]</S.Mail>
         </a>
       </S.Column>
     </S.Container>

src/components/Navbar/Navbar.tsx

@@ -58,6 +58,7 @@ const Navbar = ({
         languages={languages}
         router={router}
         locale={locale}
+        onNavigate={onPressMenu}
         onChangeLanguage={onChangeLanguage}
         data-testid="menu"
       />

src/components/Navbar/components/Menu/Menu.tsx

@@ -9,6 +9,7 @@ const Menu = ({
   languages,
   router,
   locale,
+  onNavigate,
   onChangeLanguage,
 }: Omit<NavbarProps, 'isMenuOpen' | 'onPressMenu'>) => {
   return (
@@ -18,6 +19,7 @@ const Menu = ({
           key={index + option.label}
           href={option.link}
           active={router?.asPath === option.link ? 'true' : 'false'}
+          onClick={onNavigate}
         >
           {option.label}
         </S.MenuStyledLink>

src/components/Navbar/components/Menu/index.tsx

@@ -9,6 +9,7 @@ const Menu = ({
   languages,
   router,
   locale,
+  onNavigate,
   onChangeLanguage,
 }: Omit<NavbarProps, 'isMenuOpen' | 'onPressMenu'>) => {
   return (
@@ -17,6 +18,7 @@ const Menu = ({
       languages={languages}
       router={router}
       locale={locale}
+      onNavigate={onNavigate}
       onChangeLanguage={onChangeLanguage}
     />
   )

src/components/Navbar/index.tsx

@@ -44,6 +44,8 @@ const Navbar = () => {
   }
 
   const handleMenu = () => {
+    console.log('menu')
+
     setOpenMenu((prev) => !prev)
   }
 

src/components/Navbar/interfaces.ts

@@ -17,5 +17,6 @@ export interface NavbarProps {
   locale?: string
   isMenuOpen?: boolean
   onChangeLanguage?: React.ChangeEventHandler<HTMLSelectElement>
+  onNavigate?: () => void
   onPressMenu?: () => void
 }

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

@@ -52,7 +52,7 @@ export const ContentWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  gap: 24px;
+  gap: 16px;
   padding: 36px;
   overflow: hidden;
 `
@@ -81,10 +81,14 @@ export const Description = styled.p`
 
   overflow: hidden;
   display: -webkit-box;
-  -webkit-line-clamp: 5;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 
   margin-bottom: auto;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-wrap: nowrap;
 `
 
 export const LinkWrapper = styled.a`
@@ -99,6 +103,8 @@ export const LinkIcon = styled(Image)`
 `
 
 export const LinkLabel = styled(Title)`
+  margin-left: 8px;
+  font-size: 1.2rem;
   text-transform: uppercase;
   text-decoration: underline;
 `

src/components/Publications/PublicationsList/index.tsx

@@ -1,17 +1,27 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo, useEffect } from 'react'
+import publications from '@/data/publications'
 
 import Main from './PublicationsList'
 
 import { PublicationsListDefaultProps } from './interfaces'
+import { useRouter } from 'next/router'
 
 const PublicationsList = ({
   translate,
-  publications,
-}: PublicationsListDefaultProps) => {
-  const [filteredPublications, setFilteredPublications] = useState(publications)
+}: // publications,
+PublicationsListDefaultProps) => {
+  const router = useRouter()
+  const { locale } = router
+  const language = locale === 'en' ? 'en' : 'ptBR'
 
-  const currentDate = new Date()
-  const currentYear = currentDate.getFullYear()
+  const [lang, setLang] = useState(language)
+  const [filteredPublications, setFilteredPublications] = useState(
+    publications[lang]
+  )
+
+  // const currentDate = new Date()
+  // const currentYear = currentDate.getFullYear()
+  const currentYear = 2020
 
   const yearFilterOptions = useMemo(() => {
     const startYear = 2016
@@ -43,16 +53,24 @@ const PublicationsList = ({
     const { value: filterValue } = e.target
 
     if (filterValue === 'all') {
-      setFilteredPublications(publications)
+      setFilteredPublications(publications[lang])
       return
     }
 
-    const filteredData = publications.filter(
+    const filteredData = publications[lang].filter(
       (publication) => publication.year === filterValue
     )
     setFilteredPublications(filteredData)
   }
 
+  useEffect(() => {
+    setLang(locale === 'en' ? 'en' : 'ptBR')
+  }, [locale])
+
+  useEffect(() => {
+    setFilteredPublications(publications[lang])
+  }, [lang])
+
   return (
     <Main
       translate={translate}

src/components/Publications/TDPSection/TDPSection.tsx

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

src/components/index.ts

@@ -6,7 +6,7 @@ import InfoPopup from './InfoPopup'
 import Activities from './Home/Activities'
 import AboutUs from './Home/AboutUs'
 import Sponsors from './Home/Sponsors'
-import Banner from './Home/BannerV2'
+import Banner from './Home/Bannerv3'
 
 export {
   Navbar,

src/pages/index.tsx

@@ -13,7 +13,7 @@ export default function Home() {
   return (
     <S.PageWrap>
       <S.ContentWrap>
-        <Banner translate={t.home.banner} />
+        <Banner translate={t.home.banner.headline} />
         <AboutUs translate={t.home.about_us} />
         <Activities translate={t.home.activities} />
         <Sponsors translate={t.home.sponsors} />