fix/banner

public/locales/en/index.js

@@ -104,6 +104,7 @@ const en = {
         largest robotics competition"`,
         complement: `Read more at:`,
       },
+      heading: 'Award-winning AI and Robotics Research',
       achievements: [
         {
           title: 'Small Size League World Champions',

public/locales/pt-BR/index.js

@@ -102,6 +102,7 @@ const ptBR = {
         robótica do mundo"`,
         complement: 'Leia mais em:',
       },
+      heading: 'Pesquisa de IA e Robótica premiada internacionalmente',
       achievements: [
         {
           title: 'Campeões Mundiais em SSL',

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

@@ -13,12 +13,17 @@ export const SectionContainer = styled.section`
 
 export const TextContainer = styled.div`
   width: 100vw;
+  padding: 10vw;
   position: absolute;
   text-align: center;
   margin: auto;
   padding: auto;
   color: white;
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+  text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.8);
+
+  @media (max-width: 768px) {
+    padding: 0;
+  }
 `
 
 export const BannerImg = styled(Image)`

src/components/Home/BannerV2/Banner.tsx

@@ -3,13 +3,14 @@ import React from 'react'
 import { GroupPhoto } from '@/assets'
 
 import * as S from './Banner.styles'
+import { BannerDefaultProps } from './interfaces'
 
-const Banner = () => {
+const Banner = ({ translate }: BannerDefaultProps) => {
   return (
     <S.SectionContainer>
       <S.TextContainer>
         <S.Heading>ROBÔCIN</S.Heading>
-        <S.Paragraph>IA que vence competições mundiais</S.Paragraph>
+        <S.Paragraph>{translate.heading}</S.Paragraph>
       </S.TextContainer>
       <S.BannerImg src={GroupPhoto} alt="Group photo" />
     </S.SectionContainer>

src/components/Home/BannerV2/index.tsx

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

src/components/Home/BannerV2/interfaces.ts

@@ -0,0 +1,5 @@
+export interface BannerDefaultProps {
+  translate: {
+    heading: string
+  }
+}

src/pages/index.tsx

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