Merge pull request #194 from estartando-devs/fix/novas-datas

Fix/novas datas
estartando-devs · May 20, 2024 · 287e9f2 · 287e9f2
2 parents f1b9b27 + 814f8ff
commit 287e9f2
Show file tree

Hide file tree

Showing 10 changed files with 171 additions and 56 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,6 +8,6 @@
   "editor.rulers": [80, 120],
   "editor.parameterHints.enabled": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
 }
diff --git a/src/components/Approved/BannerApproved/index.tsx b/src/components/Approved/BannerApproved/index.tsx
@@ -8,7 +8,7 @@ export const BannerApproved = () => (
         A lista de aprovados para os cursos já está disponível!
       </S.BannerTitle>
       <S.ContainerButton>
-        <LinkWrapper color="white" href="#resultado">
+        <LinkWrapper color="white" href="#resultado" legacyBehavior>
           <S.BannerButton>Quero ver o resultado</S.BannerButton>
         </LinkWrapper>
       </S.ContainerButton>

diff --git a/src/components/LinkWrapper/index.tsx b/src/components/LinkWrapper/index.tsx
@@ -5,18 +5,19 @@ import * as S from './styles';
 type LinkProps = {
   color?: 'primary' | 'purple' | 'white';
   href: string;
+  legacyBehavior?: boolean;
 };
 
 const LinkWrapper = ({
   color = 'primary',
   children,
   href,
-  target,
+  legacyBehavior,
   ...props
-}: PropsWithChildren<LinkProps> & { target?: string }) => (
+}: PropsWithChildren<LinkProps>) => (
   <S.ContainerLink color={color} {...props}>
-    <Link href={href} legacyBehavior>
-      {target && <a target={target}>{children}</a>}
+    <Link href={href} legacyBehavior={legacyBehavior}>
+      {children}
     </Link>
   </S.ContainerLink>
 );

diff --git a/src/components/SelectiveProcess/index.tsx b/src/components/SelectiveProcess/index.tsx
@@ -1,9 +1,20 @@
 import { ScheduleSectionProps } from '../../mocks/Schedule.mock';
 import * as S from './styles';
 
+const ScheduleDotGroup = ({ disabled }: { disabled?: boolean }) => (
+  <>
+    <S.ScheduleDot disabled={disabled}></S.ScheduleDot>
+    <S.ScheduleLittleDot></S.ScheduleLittleDot>
+    <S.ScheduleLittleDot></S.ScheduleLittleDot>
+    <S.ScheduleLittleDot></S.ScheduleLittleDot>
+    <S.ScheduleLittleDot></S.ScheduleLittleDot>
+  </>
+);
+
 export const SelectiveProcess = ({
   title,
   stagesList,
+  schedule,
 }: ScheduleSectionProps) => (
   <S.Section>
     <S.Title
@@ -25,5 +36,37 @@ export const SelectiveProcess = ({
         <S.Text variant="body2">{stage.description}</S.Text>
       </S.ContentStages>
     ))}
+
+    <S.ScheduleWrapper>
+      <S.ScheduleDotsWrapper
+        data-aos="fade-up"
+        data-aos-easing="ease-in-out"
+        data-aos-anchor-placement="top-center"
+      >
+        {schedule.map(({ key, disable }, index) => {
+          const isTheLast = index === schedule.length - 1;
+          return isTheLast ? (
+            <S.ScheduleDot key={key} disabled={disable} />
+          ) : (
+            <ScheduleDotGroup key={key} disabled={disable} />
+          );
+        })}
+      </S.ScheduleDotsWrapper>
+
+      <S.ScheduleContentWrapper>
+        {schedule.map(({ title, description, disable, key }) => (
+          <S.ScheduleItem
+            data-aos="fade-up"
+            data-aos-easing="ease-in-out"
+            data-aos-anchor-placement="top-center"
+            key={`${title}-${key}`}
+            variant="h3"
+            disabled={disable}
+          >
+            {title} - <span>{description}</span>
+          </S.ScheduleItem>
+        ))}
+      </S.ScheduleContentWrapper>
+    </S.ScheduleWrapper>
   </S.Section>
 );
diff --git a/src/components/Subscribe/BannerSubscribe/index.tsx b/src/components/Subscribe/BannerSubscribe/index.tsx
@@ -0,0 +1,19 @@
+import { LinkWrapper } from '../../LinkWrapper';
+import * as S from './styles';
+
+export const BannerSubscribe = () => (
+  <S.BannerApprovedContainer>
+    <S.BannerContent>
+      <S.BannerTitle variant="h2">A inscrições estão abertas!</S.BannerTitle>
+      <S.ContainerButton>
+        <LinkWrapper
+          color="white"
+          href={process.env.NEXT_PUBLIC_INSCRICOES_URL || ''}
+          legacyBehavior
+        >
+          <S.BannerButton>Inscreva-se!</S.BannerButton>
+        </LinkWrapper>
+      </S.ContainerButton>
+    </S.BannerContent>
+  </S.BannerApprovedContainer>
+);
diff --git a/src/components/Subscribe/BannerSubscribe/styles.ts b/src/components/Subscribe/BannerSubscribe/styles.ts
@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { Typography } from '../../Typography';
+
+export const BannerApprovedContainer = styled.div`
+  padding: 20px 40px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) => props.theme.palette?.design.green};
+
+  @media (max-width: 768px) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+`;
+
+export const BannerContent = styled.div`
+  width: 100%;
+  max-width: 1028px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const BannerTitle = styled(Typography).attrs({
+  variant: 'h2',
+  weight: 'bold',
+})`
+  margin-bottom: 15px;
+`;
+
+export const BannerDescription = styled(Typography).attrs({
+  variant: 'body1',
+  weight: '400',
+})`
+  margin-bottom: 30px;
+`;
+
+export const BannerButton = styled.a`
+  color: ${({ theme }) => theme.palette.design.green_dark} !important;
+  max-width: 470px;
+  padding: 14px 24px !important;
+  display: flex;
+  background: ${({ theme }) => theme.palette.design.white};
+  border-radius: 4px;
+`;
+
+export const ContainerButton = styled.div`
+  max-width: 15rem;
+
+  @media (max-width: ${({ theme: { media } }) => media.tablet_portrait}) {
+    max-width: 100%;
+  }
+`;
diff --git a/src/components/Subscribe/index.tsx b/src/components/Subscribe/index.tsx
@@ -1,6 +1,4 @@
 import Image from 'next/legacy/image';
-import Link from 'next/link';
-import { Typography } from '../Typography';
 import * as S from './styles';
 
 export const Subscribe = () => (
@@ -23,18 +21,10 @@ export const Subscribe = () => (
       <S.ContainerSubscribeContentButton
         color="purple"
         href={process.env.NEXT_PUBLIC_INSCRICOES_URL || ''}
+        legacyBehavior
       >
         <a target="_blank" rel="noreferrer noopener">{`Faça parte!`}</a>
       </S.ContainerSubscribeContentButton>
-      <S.ContainerSubscribeContentDoubts>
-        <Typography variant="body3">{`Dúvidas? Veja as`}</Typography>
-        <S.ContainerSubscribeContentDoubtsLink>
-          <Link
-            href="/perguntas-frequentes"
-            legacyBehavior
-          >{`perguntas mais frequentes`}</Link>
-        </S.ContainerSubscribeContentDoubtsLink>
-      </S.ContainerSubscribeContentDoubts>
     </S.ContainerSubscribeContent>
     <Image
       src="/images/inscricao-calendar"

diff --git a/src/mocks/Schedule.mock.ts b/src/mocks/Schedule.mock.ts
@@ -24,33 +24,38 @@ export interface ScheduleSectionProps {
 const mock: ISchedule[] = [
   {
     title: 'Inscrições',
-    description: 'Até o dia 20 de março',
-    dateEnd: '2022-03-20T12:00:00Z',
+    description: 'Até o dia 31 de maio',
+    dateEnd: '2024-05-31T12:00:00Z',
   },
   {
     title: 'Prova',
-    description: '22 de março, às 19h30',
-    dateEnd: '2022-03-22T22:30:00Z',
+    description: '03 de junho',
+    dateEnd: '2024-06-03T22:30:00Z',
   },
   {
     title: 'Resultado da Prova',
-    description: '23 de março',
+    description: '04 de junho',
     dateEnd: '2022-03-23T23:00:00Z',
   },
+  // {
+  //   title: 'Hackathon',
+  //   description: '26 de março, às 10h',
+  //   dateEnd: '2022-03-26T12:30:00Z',
+  // },
   {
-    title: 'Hackathon',
-    description: '26 de março, às 10h',
-    dateEnd: '2022-03-26T12:30:00Z',
+    title: 'Bate papo com o time',
+    description: 'Online, entre os dias 06 de junho e 14 de junho',
+    dateEnd: '2024-06-14T23:00:00Z',
   },
   {
-    title: 'Bate papo com o time',
-    description: 'Online, entre os dias 28 de março e 4 de abril',
-    dateEnd: '2022-04-04T23:00:00Z',
+    title: 'Resultado Final',
+    description: '15 de junho',
+    dateEnd: '2024-06-15T23:00:00Z',
   },
   {
     title: 'Início das Aulas',
-    description: '12 de abril ',
-    dateEnd: '2022-04-12T23:00:00Z',
+    description: '18 de junho',
+    dateEnd: '2024-06-18T23:00:00Z',
   },
 ];
 
@@ -74,14 +79,14 @@ const stagesList: Stages[] = [
     },
     key: 'stage-1',
   },
-  {
-    stage: {
-      title: 'НАСКАТНОN',
-      description:
-        'Como você trabalha em equipe? Além de conhecermos melhor suas habilidades, você já se prepara para as ferramentas que serão usadas ao longo do curso.',
-    },
-    key: 'stage-2',
-  },
+  // {
+  //   stage: {
+  //     title: 'НАСКАТНОN',
+  //     description:
+  //       'Como você trabalha em equipe? Além de conhecermos melhor suas habilidades, você já se prepara para as ferramentas que serão usadas ao longo do curso.',
+  //   },
+  //   key: 'stage-2',
+  // },
   {
     stage: {
       title: 'BATE-PAPO COM O TIME',
@@ -93,7 +98,7 @@ const stagesList: Stages[] = [
 ];
 
 export const scheduleMock: ScheduleSectionProps = {
-  title: `Nosso <span>processo seletivo</span> tem 3 etapas:`,
+  title: `Nosso <span>processo seletivo</span> tem 2 etapas:`,
   description: ` Acreditamos no poder da <span>transformação social</span> através da
   Tecnologia da Informação. Por isso, oferecemos uma formação objetiva e
   focada nas exigências do mercado de TI. Os dois cursos incluem ainda

diff --git a/src/mocks/course.mock.ts b/src/mocks/course.mock.ts
@@ -18,15 +18,15 @@ const coursesData: CourseData = {
     coursePresentation:
       'A nossa formação em Programação Front-end prepara você para atuar no desenvolvimento de aplicações web, criando interfaces e integrando com APIs. Temos como objetivo torná-lo apto a atuar nas maiores empresas de tecnologia do mercado, ensinando os principais conceitos e ferramentas exigidas, além da experiência de desenvolver uma solução real com os designers e outros devs formados pelo Estartando Devs.',
     courseModules: [
-      'Como funciona a internet',
-      'O mercado de tecnologia',
+      'Mercado de Tecnologia e Fundamentos da Internet',
+      'Git e Github: Versionamento de código',
       'HTML5',
       'CSS3',
-      'Versionamento de código com git',
       'Sass',
-      'Lógica de programação com Javascript',
-      'Scrum',
-      'React Js',
+      'Javascript',
+      'TypeScript',
+      'Orientação a Objetos',
+      'Angular',
     ],
   },
   backend: {
@@ -36,17 +36,15 @@ const coursesData: CourseData = {
     coursePresentation:
       'A nossa formação em Programação Back-end prepara você para atuar no desenvolvimento de APIs e disponibilizar os recursos desenvolvidos em cloud. Temos como objetivo torná-lo apto a atuar nas maiores empresas de tecnologia do mercado, ensinando os principais conceitos e ferramentas exigidas, além da experiência de desenvolver uma solução real com os designers e outros devs formados pelo Estartando Devs.',
     courseModules: [
-      'Como funciona a internet',
-      'O mercado de tecnologia',
-      'Conhecimentos basicos de HTML5, CSS3',
-      'Versionamento de código com git',
-      'Lógica de programação com Javascript',
-      'Arquitetura de dados',
-      'NodeJS',
-      'SQL e NoSQL',
-      'Banco de dados',
-      'API REST / GraphQL',
-      'SOLID',
+      'Mercado de Tecnologia e Fundamentos da Internet',
+      'Controle de versionamento (Git)',
+      'Conhecendo a linguagem C#',
+      'Bancos de Dados (SGBD)',
+      'Diagramas de Classes (UML)',
+      'Conhecendo o ASP.NET Core',
+      'Fundamentos de Arquitetura de Software',
+      'Introdução ao Domain-Driven Design (DDD)',
+      'Deploy da Aplicação',
     ],
   },
   design: {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,8 +10,10 @@ import {
   OurResults,
   SelectiveProcess,
   StudentProfile,
+  Subscribe,
   WhatWeTeach,
 } from '../components';
+import { BannerSubscribe } from '../components/Subscribe/BannerSubscribe';
 import {
   cousesMock,
   howWeDoMock,
@@ -38,13 +40,15 @@ const Home = () => {
 
   return (
     <Layout>
+      <BannerSubscribe />
       <Header />
       <WhatWeTeach {...whatWeTeachMock} />
       <Courses {...cousesMock} />
       <HowWeDo {...howWeDoMock} />
       <StudentProfile {...studentProfileSection} />
       <SelectiveProcess {...scheduleMock} />
       <OurResults />
+      <Subscribe />
       <Footer />
     </Layout>
   );