Make requested changes

Squash and merge the following commits into develop:
* refactor(InfoPopup): remove usage of InfoPopup
* enhancement(CategoriesHeader): add smooth scrolling
* enhancement(Publications): decrease size of PublicationCard
* enhancement: enhance Banner
* enhancement: create new banner
* enhancement: enhance logo image quality

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "editor.formatOnSave": true, 
     "editor.defaultFormatter": "esbenp.prettier-vscode"

src/assets/index.ts

@@ -1,4 +1,4 @@
-import LogoWithLabel from './logoWithLabel.png'
+import LogoWithLabel from './logo-with-label.png'
 import LogoWithLabelBright from './logoWithLabelBright.svg'
 import MenuIcon from './menuIcon.svg'
 import CloseIcon from './closeIcon.svg'
@@ -7,6 +7,8 @@ import OpenInNewIcon from './open-in-new-icon.svg'
 
 import RoboCup2023 from './groupPhotos/robocup-2023.jpg'
 
+import GroupPhoto from './groupPhotos/robocin-group-2023.jpg'
+
 export {
   LogoWithLabel,
   LogoWithLabelBright,
@@ -15,4 +17,5 @@ export {
   CloseIcon,
   ArrowIcon,
   RoboCup2023,
+  GroupPhoto,
 }

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

@@ -50,7 +50,7 @@ export const Description = styled.p`
   text-align: center;
 `
 
-export const GategorySmallCard = styled.a`
+export const GategorySmallCard = styled.div`
   width: 175px;
   height: 80px;
 
@@ -68,6 +68,8 @@ export const GategorySmallCard = styled.a`
   font-weight: ${styles.fontWeights.bold};
   text-align: center;
 
+  border: none;
+
   background: linear-gradient(
       281deg,
       rgba(48, 48, 48, 0.6),
@@ -81,6 +83,8 @@ export const GategorySmallCard = styled.a`
     transform: scale(1.05);
   }
 
+  cursor: pointer;
+
   @media (max-width: 574px) {
     width: 100%;
   }

src/components/CategoriesPage/components/Header/CategoriesHeader.tsx

@@ -4,14 +4,20 @@ import * as S from './CategoriesHeader.styles'
 
 import { CategoriesHeaderProps } from './interfaces'
 
-const CategoriesHeader = ({ translate }: CategoriesHeaderProps) => {
+const CategoriesHeader = ({
+  translate,
+  scrollToSection,
+}: CategoriesHeaderProps) => {
   return (
     <S.Container>
       <S.Title>{translate.title}</S.Title>
       <S.Description>{translate.description}</S.Description>
       <S.Row>
         {translate.categories.map((name) => (
-          <S.GategorySmallCard href={`#${name.toLowerCase()}`} key={name}>
+          <S.GategorySmallCard
+            onClick={() => scrollToSection(name.toLowerCase())}
+            key={name}
+          >
             {name}
           </S.GategorySmallCard>
         ))}

src/components/CategoriesPage/components/Header/index.tsx

@@ -1,11 +1,22 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 
 import Main from './CategoriesHeader'
 
 import { CategoriesHeaderProps } from './interfaces'
 
 const CategoriesHeader = ({ translate }: CategoriesHeaderProps) => {
-  return <Main translate={translate} />
+  const scrollToSection = useCallback((sectionId: string) => {
+    const section = document.getElementById(sectionId)
+
+    if (section) {
+      section.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start',
+      })
+    }
+  }, [])
+
+  return <Main translate={translate} scrollToSection={scrollToSection} />
 }
 
 export default CategoriesHeader

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

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

src/components/Home/Activities/Actitivies.tsx

@@ -7,11 +7,7 @@ import * as S from './Activities.styles'
 
 import { ActivitiesProps } from './interfaces'
 
-const Actitivies = ({
-  translate,
-  activities,
-  onClickActivity,
-}: ActivitiesProps) => {
+const Actitivies = ({ translate, activities }: ActivitiesProps) => {
   return (
     <S.Container aria-label="Activities">
       {activities &&
@@ -20,9 +16,6 @@ const Actitivies = ({
             <S.ActivityImage src={activity.image} alt="Activity Icon" />
             <S.Title>{activity.title}</S.Title>
             <S.Description>{activity.description}</S.Description>
-            <S.Button onClick={() => onClickActivity(activity.id)}>
-              {translate?.activity_card_button}
-            </S.Button>
           </S.ActivityCard>
         ))}
       <S.BackgroundImage

src/components/Home/Activities/index.tsx

@@ -8,7 +8,7 @@ import Main from './Actitivies'
 
 import { ActivitiesProps } from './interfaces'
 
-const Activities = ({ translate, onClickActivity }: ActivitiesProps) => {
+const Activities = ({ translate }: ActivitiesProps) => {
   const activitiesMap = [
     {
       image: TrophyIcon,
@@ -30,13 +30,7 @@ const Activities = ({ translate, onClickActivity }: ActivitiesProps) => {
     },
   ]
 
-  return (
-    <Main
-      translate={translate}
-      activities={activitiesMap}
-      onClickActivity={onClickActivity}
-    />
-  )
+  return <Main translate={translate} activities={activitiesMap} />
 }
 
 export default Activities

src/components/Home/Activities/interfaces.ts

@@ -13,7 +13,4 @@ export interface ActivitiesProps {
     activity_card_button: string
   }
   activities?: Activity[]
-  onClickActivity: (
-    activity: 'competitions' | 'research' | 'development'
-  ) => void
 }

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

@@ -0,0 +1,46 @@
+import styled from 'styled-components'
+import Image from 'next/image'
+
+export const SectionContainer = styled.section`
+  position: relative;
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+`
+
+export const TextContainer = styled.div`
+  width: 100vw;
+  position: absolute;
+  text-align: center;
+  margin: auto;
+  padding: auto;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+`
+
+export const BannerImg = styled(Image)`
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+`
+
+export const Heading = styled.h1`
+  font-size: 8rem;
+  font-weight: 800;
+
+  @media (max-width: 768px) {
+    font-size: 5rem;
+  }
+`
+
+export const Paragraph = styled.p`
+  font-size: 4rem;
+  font-weight: 600;
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+  }
+`

src/components/Home/BannerV2/Banner.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { GroupPhoto } from '@/assets'
+
+import * as S from './Banner.styles'
+
+const Banner = () => {
+  return (
+    <S.SectionContainer>
+      <S.TextContainer>
+        <S.Heading>ROBÔCIN</S.Heading>
+        <S.Paragraph>IA que vence competições mundiais</S.Paragraph>
+      </S.TextContainer>
+      <S.BannerImg src={GroupPhoto} alt="Group photo" />
+    </S.SectionContainer>
+  )
+}
+
+export default Banner

src/components/Home/BannerV2/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import Main from './Banner'
+
+const Banner = () => {
+  return <Main />
+}
+
+export default Banner

src/components/Home/Sponsors/Sponsors.styles.ts

@@ -54,6 +54,8 @@ export const Row = styled.div`
   gap: 32px;
   flex-wrap: wrap;
 
+  margin-top: -32px;
+
   @media (max-width: 768px) {
     width: 85%;
   }

src/components/Navbar/Navbar.tsx

@@ -19,7 +19,7 @@ const Navbar = ({
   onPressMenu,
 }: NavbarProps) => (
   <S.Container>
-    <Image src={LogoWithLabel} alt="logo" priority />
+    <Image src={LogoWithLabel} alt="logo" priority height={60} />
     <S.NavOptions>
       {navOptions?.map((option, index) => (
         <S.StyledLink

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

@@ -8,8 +8,8 @@ interface PublicationImageProps {
 }
 
 export const Container = styled.div`
-  width: 100%;
-  height: 350px;
+  width: 80%;
+  height: 200px;
 
   display: flex;
   justify-content: space-between;
@@ -23,14 +23,15 @@ export const Container = styled.div`
   background-color: white;
 
   @media (max-width: 768px) {
+    width: 100%;
     border-left: 2px solid ${styles.colors.secondary};
     height: fit-content;
   }
 `
 
 export const PublicationImg = styled.div<PublicationImageProps>`
-  width: 350px;
-  height: 350px;
+  width: 200px;
+  height: 200px;
   flex-shrink: 0;
 
   background-image: url(${({ src }) => (src.src ? src.src : src)});
@@ -58,20 +59,24 @@ export const ContentWrapper = styled.div`
 
 export const Title = styled.h1`
   max-width: 100%;
-  font-size: ${styles.fontSizes.lg};
+  font-size: ${styles.fontSizes.md};
   font-weight: ${styles.fontWeights.bold};
   color: ${styles.colors.primary};
 
+  flex-shrink: 0;
+
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 `
 
 export const Description = styled.p`
-  font-size: ${styles.fontSizes.md};
+  font-size: ${styles.fontSizes.sm};
   font-weight: ${styles.fontWeights.medium};
   color: ${styles.colors.darkGray};
 
+  flex-shrink: 0;
+
   text-align: justify;
 
   overflow: hidden;

src/components/Publications/PublicationsList/PublicationsList.styles.ts

@@ -8,17 +8,12 @@ export const Container = styled.section`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 60px;
-
   padding: 60px 14%;
+  gap: 30px;
 
   @media (max-width: 912px) {
     padding: 60px 7%;
   }
-
-  @media (max-width: 768px) {
-    gap: 30px;
-  }
 `
 
 export const Header = styled.div`

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/Banner'
+import Banner from './Home/BannerV2'
 
 export {
   Navbar,