├── src ├── constants │ ├── BASE_URL.js │ └── StylePages.js ├── assets │ ├── calendar.png │ ├── ion_book.png │ ├── mdi_pen.png │ ├── userIcon.png │ ├── whatsapp.png │ ├── githubicon.png │ ├── ifoodcard.png │ ├── pythonicon.png │ ├── aprenda_icon.png │ ├── button_apple.png │ ├── button_google.png │ ├── cardtraining1.png │ ├── cardtraining2.png │ ├── gamepasscard.png │ ├── icon_points.png │ ├── mentorphoto.png │ ├── backgroundlogin.png │ ├── button_facebook.png │ ├── iconmentorphoto.png │ ├── mdi_pen-special.png │ ├── backgroundlogin2.png │ ├── userIcon-special.png │ ├── Google_Calendar_icon.png │ ├── button_mobile_apple.png │ ├── button_mobile_google.png │ ├── iconamoon_home-fill.png │ ├── button_desejo_aprender.png │ ├── button_mobile_facebook.png │ ├── fluent_trophy-16-filled.png │ ├── heroicons-solid_share.png │ ├── mingcute_calendar-fill.png │ ├── fa-solid_chalkboard-teacher.png │ ├── iconamoon_home-fill-special.png │ ├── material-symbols_add-a-photo.png │ ├── fa-solid_chalkboard-teacher-32.png │ ├── mingcute_calendar-fill-special.png │ ├── fluent_people-community-24-filled.png │ ├── fluent_people-community-32-filled.png │ ├── fluent_trophy-16-filled-special.png │ ├── heroicons_puzzle-piece-20-solid.png │ ├── fa-solid_chalkboard-teacher-special.png │ └── heroicons_puzzle-piece-20-solid-gold.png ├── context │ ├── GlobalContext.js │ └── GlobalState.js ├── index.js ├── components │ ├── Cards │ │ ├── StyleCardMyMentor.js │ │ ├── CardConquest.js │ │ ├── CardMentor.js │ │ ├── CardMyMentor.js │ │ ├── StyleCardConquest.js │ │ ├── CardUser.js │ │ ├── StyleCardUser.js │ │ └── StyleCardMentor.js │ ├── ProgressCard │ │ ├── StyleProgressCard.js │ │ └── ProgressCard.js │ └── LateralMenu │ │ ├── StyleLateralMenu.js │ │ └── LateralMenu.js ├── GlobalStyled.js ├── App.js ├── router │ ├── coordinator.js │ └── Router.js └── pages │ ├── HomePage │ ├── StyleHomePage.js │ └── HomePage.js │ ├── TrainingPage │ └── TrainingPage.js │ ├── TimeLinePage │ └── TimeLinePage.js │ ├── SchedulePage │ └── SchedulePage.js │ ├── ConquestPage │ └── ConquestPage.js │ ├── MentorsPage │ └── MentorsPage.js │ ├── LoginPage │ ├── LoginPage.js │ └── StyleLogin.js │ └── SignUpPage │ ├── StyleSignUpPage.js │ └── SignUpPage.js ├── .gitignore ├── public └── index.html ├── package.json └── README.md /src/constants/BASE_URL.js: -------------------------------------------------------------------------------- 1 | export const BASE_URL = "" -------------------------------------------------------------------------------- /src/assets/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/calendar.png -------------------------------------------------------------------------------- /src/assets/ion_book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/ion_book.png -------------------------------------------------------------------------------- /src/assets/mdi_pen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/mdi_pen.png -------------------------------------------------------------------------------- /src/assets/userIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/userIcon.png -------------------------------------------------------------------------------- /src/assets/whatsapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/whatsapp.png -------------------------------------------------------------------------------- /src/assets/githubicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/githubicon.png -------------------------------------------------------------------------------- /src/assets/ifoodcard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/ifoodcard.png -------------------------------------------------------------------------------- /src/assets/pythonicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/pythonicon.png -------------------------------------------------------------------------------- /src/assets/aprenda_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/aprenda_icon.png -------------------------------------------------------------------------------- /src/assets/button_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_apple.png -------------------------------------------------------------------------------- /src/assets/button_google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_google.png -------------------------------------------------------------------------------- /src/assets/cardtraining1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/cardtraining1.png -------------------------------------------------------------------------------- /src/assets/cardtraining2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/cardtraining2.png -------------------------------------------------------------------------------- /src/assets/gamepasscard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/gamepasscard.png -------------------------------------------------------------------------------- /src/assets/icon_points.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/icon_points.png -------------------------------------------------------------------------------- /src/assets/mentorphoto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/mentorphoto.png -------------------------------------------------------------------------------- /src/assets/backgroundlogin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/backgroundlogin.png -------------------------------------------------------------------------------- /src/assets/button_facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_facebook.png -------------------------------------------------------------------------------- /src/assets/iconmentorphoto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/iconmentorphoto.png -------------------------------------------------------------------------------- /src/assets/mdi_pen-special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/mdi_pen-special.png -------------------------------------------------------------------------------- /src/assets/backgroundlogin2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/backgroundlogin2.png -------------------------------------------------------------------------------- /src/assets/userIcon-special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/userIcon-special.png -------------------------------------------------------------------------------- /src/context/GlobalContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from "react" 2 | 3 | export const GlobalContext = createContext() -------------------------------------------------------------------------------- /src/assets/Google_Calendar_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/Google_Calendar_icon.png -------------------------------------------------------------------------------- /src/assets/button_mobile_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_mobile_apple.png -------------------------------------------------------------------------------- /src/assets/button_mobile_google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_mobile_google.png -------------------------------------------------------------------------------- /src/assets/iconamoon_home-fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/iconamoon_home-fill.png -------------------------------------------------------------------------------- /src/assets/button_desejo_aprender.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_desejo_aprender.png -------------------------------------------------------------------------------- /src/assets/button_mobile_facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/button_mobile_facebook.png -------------------------------------------------------------------------------- /src/assets/fluent_trophy-16-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fluent_trophy-16-filled.png -------------------------------------------------------------------------------- /src/assets/heroicons-solid_share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/heroicons-solid_share.png -------------------------------------------------------------------------------- /src/assets/mingcute_calendar-fill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/mingcute_calendar-fill.png -------------------------------------------------------------------------------- /src/assets/fa-solid_chalkboard-teacher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fa-solid_chalkboard-teacher.png -------------------------------------------------------------------------------- /src/assets/iconamoon_home-fill-special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/iconamoon_home-fill-special.png -------------------------------------------------------------------------------- /src/assets/material-symbols_add-a-photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/material-symbols_add-a-photo.png -------------------------------------------------------------------------------- /src/assets/fa-solid_chalkboard-teacher-32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fa-solid_chalkboard-teacher-32.png -------------------------------------------------------------------------------- /src/assets/mingcute_calendar-fill-special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/mingcute_calendar-fill-special.png -------------------------------------------------------------------------------- /src/assets/fluent_people-community-24-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fluent_people-community-24-filled.png -------------------------------------------------------------------------------- /src/assets/fluent_people-community-32-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fluent_people-community-32-filled.png -------------------------------------------------------------------------------- /src/assets/fluent_trophy-16-filled-special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fluent_trophy-16-filled-special.png -------------------------------------------------------------------------------- /src/assets/heroicons_puzzle-piece-20-solid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/heroicons_puzzle-piece-20-solid.png -------------------------------------------------------------------------------- /src/assets/fa-solid_chalkboard-teacher-special.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/fa-solid_chalkboard-teacher-special.png -------------------------------------------------------------------------------- /src/assets/heroicons_puzzle-piece-20-solid-gold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luislauriano/athena/master/src/assets/heroicons_puzzle-piece-20-solid-gold.png -------------------------------------------------------------------------------- /src/context/GlobalState.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | 3 | function GlobalState(){ 4 | const [roleUser, setRoleUser] = useState("student") 5 | 6 | return{ 7 | roleUser, 8 | setRoleUser, 9 | } 10 | } 11 | 12 | export default GlobalState -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | 9 | 10 | ); -------------------------------------------------------------------------------- /src/components/Cards/StyleCardMyMentor.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerCardMyMentor = styled.div` 4 | display: flex; 5 | gap: 20px; 6 | 7 | div{ 8 | gap: 20px; 9 | display: flex; 10 | flex-direction: column; 11 | 12 | } 13 | ` -------------------------------------------------------------------------------- /src/GlobalStyled.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from "styled-components"; 2 | 3 | export const GlobalStyled = createGlobalStyle` 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | border-box: box-sizing; 8 | font-family: 'Poppins', sans-serif; 9 | color: #00203F; 10 | } 11 | ` -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Router from "./router/Router"; 2 | import { GlobalContext } from "./context/GlobalContext"; 3 | import { GlobalStyled } from "./GlobalStyled"; 4 | import GlobalState from "./context/GlobalState"; 5 | 6 | function App() { 7 | const context = GlobalState() 8 | 9 | return ( 10 | <> 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /src/components/Cards/CardConquest.js: -------------------------------------------------------------------------------- 1 | import { ContainerCardConquest } from "./StyleCardConquest" 2 | 3 | function CardConquest(props){ 4 | console.log(props) 5 | 6 | return( 7 | 8 |
9 | card-conquistas 10 |
11 |

GIFT Card {props.giftcard.name}

12 |

{props.giftcard.points} pontos

13 | 14 | ) 15 | } 16 | 17 | export default CardConquest -------------------------------------------------------------------------------- /src/router/coordinator.js: -------------------------------------------------------------------------------- 1 | export const goToLoginPage = (navigate)=>{ 2 | navigate("/") 3 | } 4 | 5 | export const goToHomePage = (navigate)=>{ 6 | navigate("/main") 7 | } 8 | 9 | export const goToSignUpPage = (navigate)=>{ 10 | navigate("/cadastrar") 11 | } 12 | 13 | export const goToConquestPage = (navigate)=>{ 14 | navigate("/conquistas") 15 | } 16 | 17 | export const goToMentorsPage = (navigate)=>{ 18 | navigate("/mentores") 19 | } 20 | export const goToSchedulesPage = (navigate)=>{ 21 | navigate("/agenda") 22 | } 23 | export const goToTimeLinePage = (navigate)=>{ 24 | navigate("/cronograma") 25 | } 26 | 27 | export const goToTrainingPage = (navigate)=>{ 28 | navigate("/capacitacao") 29 | } -------------------------------------------------------------------------------- /src/components/Cards/CardMentor.js: -------------------------------------------------------------------------------- 1 | import { ContainerCardMentor } from "./StyleCardMentor" 2 | import iconmentorphoto from "../../assets/iconmentorphoto.png" 3 | import { useContext } from "react" 4 | import {GlobalContext} from "../../context/GlobalContext" 5 | 6 | function CardMentor(){ 7 | const context = useContext(GlobalContext) 8 | return( 9 | 11 |
12 | Foto Mentor 13 |

Nome do Mentor

14 |

Formação Acadêmica

15 |
16 | 17 | 18 | ) 19 | } 20 | 21 | export default CardMentor -------------------------------------------------------------------------------- /src/components/Cards/CardMyMentor.js: -------------------------------------------------------------------------------- 1 | import photomentor from "../../assets/mentorphoto.png" 2 | import whatsappicon from "../../assets/whatsapp.png" 3 | import googlecalendaricon from "../../assets/Google_Calendar_icon.png" 4 | import { ContainerCardMyMentor } from "./StyleCardMyMentor" 5 | 6 | function CardMyMentor(){ 7 | return( 8 | 9 |
10 | icone-mentor 11 |
12 |
13 | icone-whatsapp-mentor 14 | icone-googlecalendar-mentor 15 |
16 | 17 | ) 18 | } 19 | 20 | export default CardMyMentor -------------------------------------------------------------------------------- /src/components/ProgressCard/StyleProgressCard.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerProgressCard = styled.div` 4 | margin-bottom: 40px; 5 | 6 | .title-progress{ 7 | margin-bottom: 20px; 8 | 9 | h1{ 10 | color: #535353; 11 | font-weight: 400; 12 | font-size: 24px; 13 | } 14 | } 15 | 16 | .progress-user{ 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | gap: 20px; 21 | 22 | span{ 23 | width: 23px; 24 | height: 23px; 25 | border-radius: 50%; 26 | background: #6ECAA1; 27 | } 28 | 29 | div{ 30 | margin: 0 auto; 31 | text-align: center; 32 | font-size: 12px; 33 | width: 150px; 34 | } 35 | } 36 | 37 | ` -------------------------------------------------------------------------------- /src/components/Cards/StyleCardConquest.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerCardConquest = styled.div` 4 | background: #F5F5F5; 5 | border-radius: 10px; 6 | width: 180px; 7 | height: 250px; 8 | // padding: 10px; 9 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 10 | border: 1px solid #D9D9D9; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: flex-start; 14 | flex-direction: column; 15 | 16 | p{ 17 | font-size: 14px; 18 | font-weight: 400; 19 | color: RGBA(30,30,30,0.38); 20 | margin: 0 0 10px 10px; 21 | } 22 | 23 | div{ 24 | width: 100%; 25 | height: 50%; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | 30 | // img{ 31 | // width: 162 32 | // } 33 | } 34 | 35 | ` -------------------------------------------------------------------------------- /src/components/Cards/CardUser.js: -------------------------------------------------------------------------------- 1 | import { ContainerCardUser } from "./StyleCardUser" 2 | import { useContext } from "react" 3 | import {GlobalContext} from "../../context/GlobalContext" 4 | 5 | function CardUser(){ 6 | const context = useContext(GlobalContext) 7 | return( 8 | 10 |
11 | {context.roleUser === "mentor" ? 12 |

Material de apoio sobre X

13 | : 14 |

Aula sobre X

} 15 | 16 |

Descrição da aula

17 |
18 | 19 | {context.roleUser === "mentor" ? 20 | 21 | : 22 | } 23 | 24 | 25 | ) 26 | } 27 | 28 | export default CardUser -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | hacka 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /src/components/Cards/StyleCardUser.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerCardUser = styled.div` 4 | background: #F5F5F5; 5 | border-radius: 10px; 6 | width: 260px; 7 | height: 200px; 8 | padding: 10px; 9 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 10 | border: 1px solid #D9D9D9; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: flex-start; 14 | flex-direction: column; 15 | 16 | div h3{ 17 | font-size: 20px; 18 | font-weight: 600; 19 | } 20 | 21 | div p{ 22 | font-size: 14px; 23 | font-weight: 400; 24 | } 25 | 26 | button{ 27 | width: 90px; 28 | height: 30px; 29 | background: ${props=> props.roleUser !== "student-special" ? "linear-gradient(169.14deg, #00203F 20%, #6ECAA1 100%)" : "#453EC8"}; 30 | border: none; 31 | color: #fff; 32 | margin-bottom: 20px; 33 | border-radius: 60px; 34 | } 35 | 36 | button:hover{ 37 | cursor: pointer; 38 | } 39 | ` -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "front-end", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^1.4.0", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 12 | "react-router-dom": "^6.11.2", 13 | "react-scripts": "5.0.1", 14 | "styled-components": "^5.3.11", 15 | "web-vitals": "^2.1.4" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/router/Router.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter, Routes, Route } from "react-router-dom" 2 | import HomePage from "../pages/HomePage/HomePage" 3 | import LoginPage from "../pages/LoginPage/LoginPage" 4 | import SignUpPage from "../pages/SignUpPage/SignUpPage" 5 | import ConquestPage from "../pages/ConquestPage/ConquestPage" 6 | import MentorsPage from "../pages/MentorsPage/MentorsPage" 7 | import SchedulesPage from "../pages/SchedulePage/SchedulePage" 8 | import TimeLinePage from "../pages/TimeLinePage/TimeLinePage" 9 | import TrainingPage from "../pages/TrainingPage/TrainingPage" 10 | 11 | function Router(){ 12 | return( 13 | 14 | 15 | }/> 16 | }/> 17 | }/> 18 | }/> 19 | }/> 20 | }/> 21 | }/> 22 | }/> 23 | 24 | 25 | ) 26 | } 27 | 28 | export default Router -------------------------------------------------------------------------------- /src/components/Cards/StyleCardMentor.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerCardMentor = styled.div` 4 | background: #F5F5F5; 5 | border-radius: 10px; 6 | width: 336px; 7 | height: 432px; 8 | padding: 10px; 9 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 10 | border: 1px solid #D9D9D9; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | flex-direction: column; 15 | 16 | div{ 17 | height: 70%; 18 | width: 90%; 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: flex-end; 22 | margin-top: 40px; 23 | } 24 | 25 | div h3{ 26 | margin-top: 120px; 27 | font-size: 20px; 28 | font-weight: 600; 29 | } 30 | 31 | div p{ 32 | font-size: 14px; 33 | font-weight: 400; 34 | } 35 | 36 | div img{ 37 | margin: 0 auto; 38 | } 39 | 40 | button{ 41 | width: 90px; 42 | height: 30px; 43 | background: ${props=> props.roleUser !== "student-special" ? "linear-gradient(169.14deg, #00203F 20%, #6ECAA1 100%)" : "#453EC8"}; 44 | border: none; 45 | color: #fff; 46 | margin-bottom: 20px; 47 | border-radius: 60px; 48 | } 49 | 50 | button:hover{ 51 | cursor: pointer; 52 | } 53 | ` -------------------------------------------------------------------------------- /src/pages/HomePage/StyleHomePage.js: -------------------------------------------------------------------------------- 1 | // import styled from "styled-components"; 2 | 3 | // export const ContainerHomePage = styled.section` 4 | // display: flex; 5 | // justify-content: space-between; 6 | // align-items: flex-start; 7 | // width: 100%; 8 | 9 | // .box-menu-lateral{ 10 | // width: 30%; 11 | // } 12 | 13 | // .box-main-menu{ 14 | // width: 68%; 15 | // // display: flex; 16 | // // justify-content: center; 17 | // // align-items: center; 18 | // // flex-direction: column; 19 | 20 | // .box-title-page{ 21 | // display: flex; 22 | // justify-content: flex-start; 23 | // align-items: center; 24 | // margin: 60px 0 30px 0; 25 | 26 | // h1{ 27 | // margin-left: 40px; 28 | // font-size: 32px; 29 | // font-weight: 400; 30 | // } 31 | 32 | // } 33 | 34 | // .box-input-data{ 35 | // margin-bottom: 120px; 36 | 37 | // input{ 38 | // width: 560px; 39 | // height: 60px; 40 | // padding-left: 60px; 41 | // border: none; 42 | // border-radius: 60px; 43 | // background: #E1E1E1; 44 | // font-size: 20px; 45 | // } 46 | // } 47 | 48 | // } 49 | 50 | // ` -------------------------------------------------------------------------------- /src/pages/TrainingPage/TrainingPage.js: -------------------------------------------------------------------------------- 1 | import LateralMenu from "../../components/LateralMenu/LateralMenu" 2 | import { ContainerPages } from "../../constants/StylePages" 3 | import cardtraining1 from "../../assets/cardtraining1.png" 4 | import cardtraining2 from "../../assets/cardtraining2.png" 5 | import trainingicon from "../../assets/ion_book.png" 6 | import { useContext } from "react" 7 | import { GlobalContext } from "../../context/GlobalContext" 8 | 9 | function TrainingPage(){ 10 | const context = useContext(GlobalContext) 11 | 12 | return( 13 | 14 |
15 | 16 |
17 |
18 |
19 | Icone MentorPage 20 |

Capacitações

21 |
22 |
23 | 24 |
25 |

Recomendados

26 |
27 |
28 |
29 | Icone TrainingPage 30 | Icone TrainingPage 31 |
32 |
33 | 34 | 35 | ) 36 | } 37 | 38 | export default TrainingPage -------------------------------------------------------------------------------- /src/components/LateralMenu/StyleLateralMenu.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components" 2 | 3 | export const ContainerLateralMenu = styled.div` 4 | width: 100%; 5 | height: 100vh; 6 | background-color: #E1E1E1; 7 | 8 | div{ 9 | width: 100%; 10 | display: flex; 11 | align-items: center; 12 | margin-bottom: 20px; 13 | } 14 | 15 | .box-display-user{ 16 | margin: 0 0 60px 60px; 17 | padding-top: 60px; 18 | 19 | div h3{ 20 | font-size: 25px; 21 | font-weight: 600, 22 | } 23 | 24 | div p{ 25 | font-size: 20px; 26 | font-weight: 400; 27 | } 28 | 29 | div{ 30 | flex-direction: column; 31 | align-items: flex-start; 32 | margin-left: 20px; 33 | } 34 | 35 | } 36 | 37 | div img{ 38 | margin-left: 20px; 39 | } 40 | 41 | div h1{ 42 | margin-left: 20px; 43 | padding-left: 10px; 44 | font-size: 32px; 45 | font-weight: 400; 46 | transition: background .2s; 47 | width: 80%; 48 | } 49 | 50 | div h1:hover{ 51 | cursor: pointer; 52 | background: ${props=> props.roleUser !== "student-special" ? "linear-gradient(169.14deg, #00203F 20%, #6ECAA1 100%)" : "#453EC8"}; 53 | border-radius: 60px; 54 | color: #fff; 55 | } 56 | 57 | div .current_page{ 58 | background: ${props=> props.roleUser !== "student-special" ? "linear-gradient(169.14deg, #00203F 20%, #6ECAA1 100%)" : "#453EC8"}; 59 | border-radius: 60px; 60 | color: #fff; 61 | } 62 | 63 | ` -------------------------------------------------------------------------------- /src/components/ProgressCard/ProgressCard.js: -------------------------------------------------------------------------------- 1 | import { ContainerProgressCard } from "./StyleProgressCard" 2 | import conquestpoints from "../../assets/icon_points.png" 3 | 4 | function ProgressCard(props){ 5 | 6 | return( 7 | 8 |
9 |

Progresso em {props.progress.name}

10 |
11 |
12 |
13 | icon-progress-card 14 |

{props.progress.name} Iniciante

15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | icon-progress-card 24 |

{props.progress.name} Iniciante

25 |
26 | 27 | 28 | 29 | 30 |
31 | icon-progress-card 32 |

{props.progress.name} Iniciante

33 |
34 | 35 | 36 | 37 |
38 | icone_troféu_conquista 39 |

{props.progress.points}

Pontos

40 |
41 |
42 | 43 | 44 | ) 45 | } 46 | 47 | export default ProgressCard -------------------------------------------------------------------------------- /src/pages/HomePage/HomePage.js: -------------------------------------------------------------------------------- 1 | import CardUser from "../../components/Cards/CardUser" 2 | import LateralMenu from "../../components/LateralMenu/LateralMenu" 3 | import { ContainerPages } from "../../constants/StylePages" 4 | import homeicon from "../../assets/iconamoon_home-fill.png" 5 | import homeiconspecial from "../../assets/iconamoon_home-fill-special.png" 6 | import { useContext } from "react" 7 | import { GlobalContext } from "../../context/GlobalContext" 8 | 9 | 10 | function HomePage(){ 11 | const context = useContext(GlobalContext) 12 | 13 | return( 14 | 15 |
16 | 17 |
18 |
19 |
20 | {context.roleUser === "student-special" ? 21 | Icone HomePage 22 | : 23 | Icone HomePage 24 | } 25 | {context.roleUser === "mentor" ? 26 |

Material de Apoio

27 | : 28 | context.roleUser === "helper" ? 29 |

Conteúdo

30 | : 31 |

Aulas

32 | } 33 | 34 |
35 |
36 | 37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 | 45 | 46 | ) 47 | } 48 | 49 | export default HomePage -------------------------------------------------------------------------------- /src/pages/TimeLinePage/TimeLinePage.js: -------------------------------------------------------------------------------- 1 | import CardUser from "../../components/Cards/CardUser" 2 | import LateralMenu from "../../components/LateralMenu/LateralMenu" 3 | import { ContainerPages } from "../../constants/StylePages" 4 | import timelineicon from "../../assets/mdi_pen.png" 5 | import timelineiconspecial from "../../assets/mdi_pen-special.png" 6 | import { useContext } from "react" 7 | import { GlobalContext } from "../../context/GlobalContext" 8 | 9 | function TimeLinePage(){ 10 | const context = useContext(GlobalContext) 11 | 12 | return( 13 | 14 |
15 | 16 |
17 |
18 |
19 | {context.roleUser === "student-special" ? 20 | Foto Usuario 21 | : 22 | Foto Usuario 23 | } 24 |

Cronograma de Estudos

25 |
26 |
27 |

Qual o nome do seu cronograma?

28 | 29 | 30 |

Qual área de interesse

31 | 32 | 33 |

Qual o prazo inicial e final do cronograma?

34 | 35 | 36 |

Quais as ferramentas serão aprendidas?

37 | 38 | 39 |

Qual o seu objetivo?

40 | 41 | 42 |
43 |
44 | 45 | 46 | ) 47 | } 48 | 49 | export default TimeLinePage -------------------------------------------------------------------------------- /src/pages/SchedulePage/SchedulePage.js: -------------------------------------------------------------------------------- 1 | import CardUser from "../../components/Cards/CardUser" 2 | import LateralMenu from "../../components/LateralMenu/LateralMenu" 3 | import { ContainerPages } from "../../constants/StylePages" 4 | import iconcalendargoogle from "../../assets/Google_Calendar_icon.png" 5 | import screencalendargoogle from "../../assets/calendar.png" 6 | import iconschedulepage from "../../assets/mingcute_calendar-fill.png" 7 | import iconschedulepagespecial from "../../assets/mingcute_calendar-fill-special.png" 8 | import { useContext } from "react" 9 | import { GlobalContext } from "../../context/GlobalContext" 10 | 11 | function SchedulesPage(){ 12 | const context = useContext(GlobalContext) 13 | 14 | return( 15 | 16 |
17 | 18 |
19 |
20 |
21 | {context.roleUser === "student-special" ? 22 | Foto Usuario 23 | : 24 | Foto Usuario 25 | } 26 |

Agenda

27 |
28 |
29 |

30 | Nossa plataforma organiza a reunião com os mentores que você 31 | se conectou para ter mais facilidade, através da ferramenta 32 | de agenda que foi escolhida para conectar ao seu perfil. 33 |

34 |
35 | 36 |
37 |

Sua agenda

38 |
39 |
40 |
41 | Calendário Google 42 |

Aluno

43 |
44 |

aluno@gmail.com

45 |

Disconnect

46 |
47 |
48 | 49 |
50 | 51 |
52 | Calendário Google Amplo 53 | 54 |
55 |
56 | 57 | 58 | ) 59 | } 60 | 61 | export default SchedulesPage -------------------------------------------------------------------------------- /src/pages/ConquestPage/ConquestPage.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import CardConquest from "../../components/Cards/CardConquest" 3 | import LateralMenu from "../../components/LateralMenu/LateralMenu" 4 | import { ContainerPages } from "../../constants/StylePages" 5 | import ProgressCard from "../../components/ProgressCard/ProgressCard" 6 | import conquesticon from "../../assets/fluent_trophy-16-filled.png" 7 | import conquesticonspecial from "../../assets/fluent_trophy-16-filled-special.png" 8 | import conquestgithubicon from "../../assets/githubicon.png" 9 | import conquestpythonicon from "../../assets/pythonicon.png" 10 | import cardxboxpass from "../../assets/gamepasscard.png" 11 | import cardifoodpass from "../../assets/ifoodcard.png" 12 | import { useContext } from "react" 13 | import { GlobalContext } from "../../context/GlobalContext" 14 | 15 | function ConquestPage(){ 16 | const context = useContext(GlobalContext) 17 | 18 | const progressUser = [ 19 | {icon: conquestgithubicon, 20 | name: "Git e Git Hub", 21 | points: 80}, 22 | {icon: conquestpythonicon, 23 | name: "Python", 24 | points: 100} 25 | ] 26 | 27 | const giftCardUser = [ 28 | {icon: cardxboxpass, 29 | name: "XBOX", 30 | points: 500}, 31 | {icon: cardifoodpass, 32 | name: "Ifood", 33 | points: 500} 34 | ] 35 | 36 | return( 37 | 38 |
39 | 40 |
41 |
42 |
43 | {context.roleUser === "student-special" ? 44 | Icone Página Conquista 45 | : 46 | Icone Página Conquista 47 | } 48 |

Conquistas

49 |
50 |
51 | {progressUser.map((progress)=>{ 52 | return( 53 | 55 | ) 56 | })} 57 | 58 |
59 |

Seus pontos:

80

60 |
61 | 62 |
63 |
64 | {giftCardUser.map((giftcard)=>{ 65 | return( 66 | 68 | ) 69 | })} 70 |
71 |
72 | 73 | 74 | ) 75 | } 76 | 77 | export default ConquestPage -------------------------------------------------------------------------------- /src/pages/MentorsPage/MentorsPage.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import LateralMenu from "../../components/LateralMenu/LateralMenu" 3 | import { ContainerPages } from "../../constants/StylePages" 4 | import CardMentor from "../../components/Cards/CardMentor" 5 | import CardMyMentor from "../../components/Cards/CardMyMentor" 6 | import mentoricon from "../../assets/fa-solid_chalkboard-teacher-32.png" 7 | import mentoriconspecial from "../../assets/fa-solid_chalkboard-teacher-special.png" 8 | import { useContext } from "react" 9 | import { GlobalContext } from "../../context/GlobalContext" 10 | 11 | function MentorsPage(){ 12 | const context = useContext(GlobalContext) 13 | const [optionMentor, setOptionMentor] = useState([ 14 | {name: "Todos", 15 | status: true}, 16 | {name: "Meus Mentores", 17 | status: false}, 18 | ]) 19 | const [displayMentor, setDisplayMentor] = useState("Todos") 20 | const selectDisplayMentor = (option) =>{ 21 | setDisplayMentor(option.name) 22 | if(!option.status){ 23 | const newStatus = [...optionMentor] 24 | 25 | for(let i=0;i 38 |
39 | 40 |
41 |
42 |
43 | {context.roleUser === "student-special" ? 44 | Icone MentorPage 45 | : 46 | Icone MentorPage 47 | } 48 |

Mentores

49 |
50 |
51 | 52 |
53 | {optionMentor.map((option)=>{ 54 | return( 55 |

selectDisplayMentor(option)}>{option.name}

56 | ) 57 | })} 58 |
59 |
60 |
61 | 62 | {displayMentor === "Todos" ? 63 | 64 | <> 65 | 66 | 67 | 68 | 69 | : 70 | 71 | 72 | } 73 | 74 | 75 |
76 |
77 | 78 | 79 | ) 80 | } 81 | 82 | export default MentorsPage -------------------------------------------------------------------------------- /src/pages/LoginPage/LoginPage.js: -------------------------------------------------------------------------------- 1 | import { useNavigate } from "react-router-dom" 2 | import {ContainerLogin, StyleBoxAboutSite, StyleBoxLogin, StyleBoxSocialLinks} from "./StyleLogin" 3 | import google_button from "../../assets/button_google.png" 4 | import facebook_button from "../../assets/button_facebook.png" 5 | import apple_button from "../../assets/button_apple.png" 6 | import google_button_mobile from "../../assets/button_mobile_google.png" 7 | import facebook_button_mobile from "../../assets/button_mobile_facebook.png" 8 | import apple_button_mobile from "../../assets/button_mobile_apple.png" 9 | import compartilhe_icon from "../../assets/fluent_people-community-24-filled.png" 10 | import apoie_icon from "../../assets/fa-solid_chalkboard-teacher.png" 11 | import apoie_mentor_icon from "../../assets/heroicons_puzzle-piece-20-solid.png" 12 | import aprenda_icon from "../../assets/aprenda_icon.png" 13 | import { goToHomePage, goToSignUpPage } from "../../router/coordinator" 14 | 15 | function LoginPage(){ 16 | const navigate = useNavigate() 17 | 18 | const icons_login = [ 19 | {image: compartilhe_icon, 20 | description: "Compartilhe materiais de tecnologia"}, 21 | {image: apoie_icon, 22 | description: "Apoie como um mentor"}, 23 | {image: apoie_mentor_icon, 24 | description: "Apoie como um mentor no ensino de pessoas autistas"}, 25 | {image: aprenda_icon, 26 | description: "Aprenda tecnologia com o apoio de mentores especializados"},] 27 | 28 | return( 29 | 30 | 31 | 32 |
33 |

Olá, o que te traz a Athena?

34 |

Faça parte de uma comunidade onde você pode criar conexões entre mentorando e mentor e aprender sobre tecnologia da melhor forma.

35 | 36 |
37 |
38 | {icons_login.map((icon)=>{ 39 | return( 40 |
41 | icone_login 42 |

{icon.description}

43 |
44 | ) 45 | })} 46 |
47 | 48 | 49 | 50 |
51 |

Bem vindo!

52 |

Cadastre-se

53 | 54 |

E-mail

55 | 56 |

Senha

57 | 58 | 59 | 60 |
61 |
62 |
63 |

Continuar com

64 |
65 |
66 | 67 | 68 | 69 |
70 | botao_login_google 71 | botao_login_facebook 72 | botao_login_apple 73 |
74 |

Já tem uma conta? goToSignUpPage(navigate)}>Cadastre-se

75 | 76 | 77 | 78 | 79 | 80 | ) 81 | } 82 | 83 | export default LoginPage -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Athena 2 | 3 | ## 📖 Introdução 4 | 5 | A Athena é uma plataforma web inovadora que possui uma gama de materiais e mentores de tecnologia. Com o objetivo de proporcionar suporte e aprendizado a pessoas com deficiência cognitivas ou neurodivergências, bem como a qualquer pessoa interessada em adquirir conhecimentos tecnológicos. 6 | 7 | Além disso, também ter materiais de aprendizado em tecnologia disponíveis para aqueles que queiram usar e compartilhar com outras pessoas. 8 | 9 | ## 🔗Link de Acesso 10 | - Deploy Vercel: [clique aqui!](https://athena-jet.vercel.app/) 11 | - Layout Figma: [clique aqui!](https://www.figma.com/file/0qSn6LRizzOON0A4fd65qh/HACKA?type=design&node-id=41-40&t=4SemDPvhUNNLc40W-0) 12 | 13 | 14 | ## 👥Equipe 15 | | [
Daniel Emidio
Tecnologia](https://www.linkedin.com/in/danielemidio1988/) |[
Luis Vinicius
Tecnologia e Negócios](https://www.linkedin.com/in/luislauriano) |[
Emmanuel Leon
Negócios e Inovação](https://www.linkedin.com/in/leonhc/) |[
Gabriella Graciano
UX Design](https://www.linkedin.com/in/gabygraciano/) |[
Felipe Ribeiro
Negócios e Inovação](https://www.linkedin.com/in/fgribeiro/) | 16 | | :---: |:---: |:---: |:---: |:---: | 17 | 18 | ## 🧭Status do Projeto 19 | - ⏳Concluído 20 | 21 | ## 📄Concepção do Projeto 22 | 23 | ## Fluxograma do Projeto 24 | |
Fluxograma | 25 | | :---: | 26 | 27 | ### Instalando 28 | - Abra o terminal GitBash e clone o link deste repositório; 29 | - Ainda dentro do terminal, insira o comando abaixo: 30 | 31 | ```bash 32 | # Instalando dependências 33 | npm install 34 | 35 | # executando o projeto no navegador 36 | npm start 37 | ``` 38 | 39 | ### Bibliotecas Utilizadas 40 | 41 | ```bash 42 | react-router-dom 43 | styled-components 44 | ``` 45 | 46 | ## 💡Programas utilizados: 47 | - VSCode 48 | 49 | ## 💻Tecnologias 50 | 51 | ![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white) 52 | ![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white) 53 | ![Javascript](https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E) 54 | ![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) 55 | ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) 56 | ![Styled-Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white) 57 | ![Git](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge&logo=git&logoColor=white) 58 | -------------------------------------------------------------------------------- /src/pages/LoginPage/StyleLogin.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import backgroundlogin from "../../assets/backgroundlogin.png" 3 | 4 | export const ContainerLogin = styled.section` 5 | width: 100%; 6 | height: 100vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | ` 11 | 12 | export const StyleBoxAboutSite = styled.div` 13 | width: 60%; 14 | height: 100%; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | flex-direction: column; 19 | 20 | .box_about{ 21 | width: 50%; 22 | height: 40%; 23 | display: flex; 24 | justify-content: center; 25 | flex-direction: column; 26 | 27 | h1{ 28 | font-weight: 600; 29 | font-size: 32px; 30 | line-height: 60px; 31 | background: linear-gradient(169.14deg, #00203F 14.54%, #6ECAA1 92.36%); 32 | -webkit-background-clip: text; 33 | -webkit-text-fill-color: transparent; 34 | background-clip: text; 35 | text-fill-color: transparent; 36 | margin-bottom: 20px; 37 | } 38 | 39 | h3{ 40 | font-weight: 600; 41 | font-size: 18px; 42 | } 43 | } 44 | 45 | .box_icons_login{ 46 | width: 80%; 47 | height: 60%; 48 | display: flex; 49 | justify-content: center; 50 | align-items: center; 51 | flex-wrap: wrap; 52 | gap: 40px; 53 | 54 | div{ 55 | width: 10vw; 56 | height: 10vh; 57 | text-align: center; 58 | font-weight: 600; 59 | 60 | img{ 61 | width: 6vw; 62 | } 63 | 64 | p{ 65 | font-size: 14px; 66 | } 67 | } 68 | 69 | } 70 | ` 71 | 72 | export const StyleBoxLogin = styled.div` 73 | width: 40%; 74 | height: 100%; 75 | display: flex; 76 | justify-content: center; 77 | align-items: center; 78 | flex-direction: column; 79 | background: url(${backgroundlogin}) no-repeat right; 80 | background-size: 100% auto; 81 | 82 | .box_form_login{ 83 | display: flex; 84 | justify-content: center; 85 | flex-direction: column; 86 | 87 | h1{ 88 | font-size: 40px; 89 | font-weight: 600; 90 | color: #fff; 91 | } 92 | 93 | h2{ 94 | font-size: 24px; 95 | font-weight: 500; 96 | color: #fff; 97 | margin-bottom: 40px; 98 | } 99 | 100 | p{ 101 | padding-left: 10px; 102 | color: #fff; 103 | } 104 | 105 | input{ 106 | width: 350px; 107 | height: 38px; 108 | background: #fff; 109 | border-radius: 600px; 110 | border: none; 111 | margin-bottom: 20px; 112 | } 113 | 114 | button{ 115 | margin-left: 140px; 116 | width: 66px; 117 | height: 66px; 118 | box-shadow: 0px 4px 4px rgba(0,0,0.25); 119 | border-radius: 50%; 120 | background: #fff; 121 | border: none; 122 | h1{ 123 | font-weight: 500; 124 | font-size: 40px; 125 | line-height: 60px; 126 | background: linear-gradient(169.14deg, #00203F 14.54%, #6ECAA1 92.36%); 127 | -webkit-background-clip: text; 128 | -webkit-text-fill-color: transparent; 129 | background-clip: text; 130 | text-fill-color: transparent; 131 | } 132 | margin-bottom: 40px; 133 | } 134 | 135 | button:hover{ 136 | cursor: pointer; 137 | } 138 | 139 | } 140 | 141 | .box-style-continue{ 142 | width: 100%; 143 | display: flex; 144 | justify-content: space-between; 145 | align-items: center; 146 | 147 | div{ 148 | width: 36%; 149 | height: 3px; 150 | background: #fff; 151 | } 152 | 153 | p{ 154 | color: #fff; 155 | font-size: 18px; 156 | } 157 | } 158 | ` 159 | 160 | export const StyleBoxSocialLinks = styled.div` 161 | padding-top: 40px; 162 | width: 100%; 163 | text-align: center; 164 | 165 | img:hover{ 166 | cursor: pointer; 167 | } 168 | 169 | div{ 170 | display: flex; 171 | justify-content: center; 172 | align-items: center; 173 | gap: 20px; 174 | } 175 | 176 | p, a{ 177 | margin-top: 20px; 178 | color: #fff; 179 | } 180 | 181 | p a:hover{ 182 | cursor: pointer; 183 | } 184 | ` -------------------------------------------------------------------------------- /src/constants/StylePages.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerPages = styled.section` 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: flex-start; 7 | width: 100%; 8 | 9 | .box-menu-lateral{ 10 | width: 30%; 11 | height: 100%; 12 | } 13 | 14 | .box-main-menu{ 15 | width: 68%; 16 | 17 | .box-title-page{ 18 | display: flex; 19 | justify-content: flex-start; 20 | align-items: center; 21 | margin: 60px 0 30px 0; 22 | 23 | h1{ 24 | margin-left: 40px; 25 | font-size: 32px; 26 | font-weight: 400; 27 | } 28 | 29 | } 30 | 31 | .box-subtitle-page{ 32 | width: 50%; 33 | margin-bottom: 40px; 34 | 35 | p{ 36 | color: rgba(30, 30, 30, 0.38); 37 | font-size: 15px; 38 | } 39 | } 40 | 41 | .box-input-data{ 42 | margin-bottom: 120px; 43 | display: flex; 44 | justify-content: center; 45 | align-items: flex-start; 46 | flex-direction: column; 47 | 48 | input{ 49 | width: 560px; 50 | height: 60px; 51 | padding-left: 60px; 52 | border: none; 53 | border-radius: 60px; 54 | background: #E1E1E1; 55 | font-size: 20px; 56 | } 57 | 58 | div{ 59 | margin: 20px 0 0 20px; 60 | display: flex; 61 | justify-content: center; 62 | gap: 60px; 63 | 64 | h3:hover{ 65 | cursor: pointer; 66 | } 67 | 68 | .active-icon{ 69 | color: rgba(30,30,30,0.81) 70 | } 71 | 72 | .disable-icon{ 73 | color: rgba(30,30,30,0.38) 74 | } 75 | } 76 | } 77 | 78 | .box-progress-user{ 79 | margin: 100px 0 40px 0; 80 | 81 | .total-points-user{ 82 | display: flex; 83 | align-items: center; 84 | gap: 32px; 85 | 86 | h1{ 87 | font-weight: 700; 88 | font-size: 36px; 89 | color: #535353; 90 | } 91 | 92 | h2{ 93 | font-weight: 700; 94 | font-size: 20px; 95 | color: #535353; 96 | } 97 | } 98 | 99 | } 100 | 101 | .box-data-page{ 102 | display: flex; 103 | justify-content: flex-start; 104 | align-items: center; 105 | gap: 60px; 106 | } 107 | 108 | 109 | } 110 | 111 | .box-calendar-page{ 112 | 113 | div h2{ 114 | margin-bottom: 40px; 115 | font-size: 32px; 116 | font-weight: 400; 117 | } 118 | 119 | .icons-calendar{ 120 | display: flex; 121 | justify-content: space-between; 122 | align-items: flex-start; 123 | width: 80%; 124 | margin-bottom: 40px; 125 | 126 | .box-calendar-user{ 127 | width: 316px; 128 | height: 192px; 129 | padding-left: 32px; 130 | border: 1px solid #D9D9D9; 131 | border-radius: 12px; 132 | display: flex; 133 | justify-content: center; 134 | flex-direction: column; 135 | 136 | div{ 137 | display: flex; 138 | gap: 20px; 139 | margin-bottom: 20px; 140 | align-items: center; 141 | 142 | img{ 143 | width: 40px; 144 | } 145 | } 146 | 147 | .status-user{ 148 | color: red; 149 | } 150 | } 151 | 152 | .box-button-calendar-user button{ 153 | width: 232px; 154 | height: 40px; 155 | border-radius: 10px; 156 | border: 1px solid #D9D9D9; 157 | box-shadow: 0px 4px 4px rgba(0,0,0,0.25); 158 | background: #F5F5F5; 159 | color: rgba(30,30,30,0.38); 160 | font-size: 15px; 161 | font-weight: 600; 162 | } 163 | 164 | .box-button-calendar-user button:hover{ 165 | cursor: pointer; 166 | } 167 | } 168 | 169 | } 170 | 171 | .box-data-timeline{ 172 | p{ 173 | font-size: 16px; 174 | font-weight: 400; 175 | margin-bottom: 10px; 176 | } 177 | 178 | input{ 179 | border-radius: 600px; 180 | border: none; 181 | background: #E1E1E1; 182 | width: 364px; 183 | height: 40px; 184 | margin-bottom: 20px; 185 | padding-left: 20px; 186 | } 187 | 188 | .input_objetive{ 189 | width: 432px; 190 | height: 132px; 191 | border-radius: 10px; 192 | 193 | margin: 0; 194 | padding: 0; 195 | box-sizing: border-box; 196 | } 197 | 198 | } 199 | 200 | ` -------------------------------------------------------------------------------- /src/pages/SignUpPage/StyleSignUpPage.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const ContainerSignUp = styled.section` 4 | width: 100%; 5 | display: flex; 6 | justify-content: space-evenly; 7 | flex-direction: column; 8 | margin-top: 200px; 9 | 10 | h1{ 11 | margin-left: 100px; 12 | font-size: 40px; 13 | } 14 | ` 15 | 16 | export const StyleBoxForm = styled.div` 17 | width: 100%; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | 22 | .box-form-user{ 23 | width: 60%; 24 | display: flex; 25 | margin-left: 100px; 26 | align-items: flex-start; 27 | gap: 40px; 28 | 29 | .box_data_form div input{ 30 | background: #E1E1E1; 31 | height: 38px; 32 | border-radius: 600px; 33 | border: none; 34 | margin-bottom: 10px; 35 | } 36 | 37 | .box_data_form div p{ 38 | margin-bottom: 4px; 39 | } 40 | 41 | .box_data_form{ 42 | .input-very-large{ 43 | width: 28vw; 44 | 45 | input{ 46 | width: 100%; 47 | } 48 | } 49 | 50 | .input-large{ 51 | width: 10vw; 52 | 53 | input{ 54 | width: 100%; 55 | } 56 | } 57 | 58 | .input-medium{ 59 | width: 10vw; 60 | 61 | input{ 62 | width: 100%; 63 | } 64 | } 65 | 66 | .input-small{ 67 | width: 4vw; 68 | 69 | input{ 70 | width: 100%; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .box-photo-user{ 77 | width: 40%; 78 | 79 | .border-photo{ 80 | border-radius: 50%; 81 | width: 240px; 82 | height: 240px; 83 | background: linear-gradient(169.14deg, #00203F 20%, #6ECAA1 100%); 84 | padding: 4px; 85 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 86 | 87 | .area-photo{ 88 | display: flex; 89 | justify-content: center; 90 | align-items: center; 91 | border-radius: 50%; 92 | width: 100%; 93 | height: 100%; 94 | background-color: #E1E1E1; 95 | } 96 | } 97 | } 98 | ` 99 | 100 | export const StyleBoxButtons = styled.div` 101 | display: flex; 102 | justify-content: space-evenly; 103 | align-itens: center; 104 | width: 80%; 105 | height: 10vh; 106 | margin: 40px 0 40px 0; 107 | 108 | button{ 109 | width: 90px; 110 | height: 30px; 111 | background: ${props=> props.roleUser !== "student-special" ? "linear-gradient(169.14deg, #00203F 20%, #6ECAA1 100%)" : "#453EC8"}; 112 | border: none; 113 | color: #fff; 114 | margin-bottom: 20px; 115 | border-radius: 60px; 116 | } 117 | 118 | button:hover{ 119 | cursor: pointer; 120 | } 121 | ` 122 | 123 | export const StyleBoxDesire = styled.div` 124 | width: 100%; 125 | display: flex; 126 | justify-content: center; 127 | flex-direction: column; 128 | padding-left: 40px; 129 | 130 | .box-title-desire{ 131 | margin: 0 0 40px 70px; 132 | } 133 | 134 | .box_cards_desires{ 135 | width: 80%; 136 | display: flex; 137 | justify-content: center; 138 | align-items: center; 139 | gap: 40px; 140 | margin-left: 100px; 141 | 142 | div{ 143 | width: 232px; 144 | height: 216px; 145 | background: rgba(225, 225, 225, 0.26); 146 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 147 | border-radius: 40px; 148 | display: flex; 149 | align-items: center; 150 | justify-content: space-evenly; 151 | flex-direction: column; 152 | 153 | 154 | h2{ 155 | width: 80%; 156 | font-size: 20px; 157 | text-align: center; 158 | } 159 | } 160 | 161 | div:hover{ 162 | cursor: pointer; 163 | background: rgba(110, 202, 161, 0.45); 164 | } 165 | 166 | .active-icon{ 167 | background: ${props=> props.roleUser !== "student-special" ? "rgba(110, 202, 161, 0.45)" : "#453EC8" }; 168 | } 169 | 170 | .active-icon h2{ 171 | color: ${props => props.roleUser === "student-special" ? "#fff" : "#00203F"}; 172 | } 173 | 174 | .active-icon:hover{ 175 | background: ${props=> props.roleUser !== "student-special" ? "rgba(110, 202, 161, 0.45)" : "#453EC8" }; 176 | } 177 | } 178 | 179 | ` 180 | 181 | export const StyleDesireSelect = styled.div` 182 | display: flex; 183 | justify-content: space-between; 184 | align-items: center; 185 | width: 100%; 186 | margin: 50px 0 100px 0; 187 | 188 | .box_input_A{ 189 | margin-left: 100px; 190 | 191 | .input-small{ 192 | 193 | input{ 194 | width: 76px; 195 | } 196 | } 197 | } 198 | 199 | .box_input_A, .box_input_B{ 200 | width: 90%; 201 | } 202 | 203 | .box_input_A div input, .box_input_B div input{ 204 | width: 32vw; 205 | background: #E1E1E1; 206 | height: 38px; 207 | border-radius: 600px; 208 | border: none; 209 | margin-bottom: 10px; 210 | } 211 | 212 | .box_input_A div p, .box_input_B div p{ 213 | margin-bottom: 4px; 214 | } 215 | 216 | ` -------------------------------------------------------------------------------- /src/components/LateralMenu/LateralMenu.js: -------------------------------------------------------------------------------- 1 | import { ContainerLateralMenu } from "./StyleLateralMenu" 2 | import {goToLoginPage, 3 | goToHomePage, 4 | goToConquestPage, 5 | goToMentorsPage, 6 | goToSchedulesPage, 7 | goToSignUpPage, 8 | goToTimeLinePage, 9 | goToTrainingPage} from "../../router/coordinator" 10 | import { useNavigate } from "react-router-dom" 11 | import { useLocation } from "react-router-dom" 12 | import { useContext } from "react" 13 | import { GlobalContext } from "../../context/GlobalContext" 14 | import homeicon from "../../assets/iconamoon_home-fill.png" 15 | import conquesticon from "../../assets/fluent_trophy-16-filled.png" 16 | import mentorsicon from "../../assets/fa-solid_chalkboard-teacher-32.png" 17 | import studenticon from "../../assets/fluent_people-community-32-filled.png" 18 | import scheduleicon from "../../assets/mingcute_calendar-fill.png" 19 | import timelineiconmentor from "../../assets/ion_book.png" 20 | import timelineicon from "../../assets/mdi_pen.png" 21 | import usericon from "../../assets/userIcon.png" 22 | import usericon_special from "../../assets/userIcon-special.png" 23 | import homeicon_special from "../../assets/iconamoon_home-fill-special.png" 24 | import conquesticon_special from "../../assets/fluent_trophy-16-filled-special.png" 25 | import mentorsicon_special from "../../assets/fa-solid_chalkboard-teacher-special.png" 26 | import scheduleicon_special from "../../assets/mingcute_calendar-fill-special.png" 27 | import timelineicon_special from "../../assets/mdi_pen-special.png" 28 | import trainingicon from "../../assets/ion_book.png" 29 | 30 | function LateralMenu(){ 31 | const navigate = useNavigate() 32 | const location = useLocation() 33 | const context = useContext(GlobalContext) 34 | 35 | return( 36 | 38 | { 39 | context.roleUser === "student" ? 40 | 41 | <> 42 |
43 | Foto Usuario 44 |
45 |

Nome do usuário

46 |

Ver perfil

47 |
48 |
49 |
50 | Icone Menu 51 |

goToHomePage(navigate)}>Aulas

52 |
53 |
54 | Icone Menu 55 |

goToConquestPage(navigate)}>Conquistas

56 |
57 |
58 | Icone Menu 59 |

goToMentorsPage(navigate)}>Mentores

60 |
61 |
62 | Icone Menu 63 |

goToSchedulesPage(navigate)}>Agenda

64 |
65 |
66 | Icone Menu 67 |

goToTimeLinePage(navigate)}>Cronograma de estudo

68 |
69 | 70 | 71 | : 72 | 73 | '' 74 | } 75 | 76 | { 77 | context.roleUser === "mentor" ? 78 | 79 | <> 80 |
81 | Foto Usuario 82 |
83 |

Nome do usuário

84 |

Ver perfil

85 |
86 |
87 |
88 | Icone Menu 89 |

goToHomePage(navigate)}>Material de Apoio

90 |
91 |
92 | Icone Menu 93 |

goToConquestPage(navigate)}>Conquistas

94 |
95 |
96 | Icone Menu 97 |

goToMentorsPage(navigate)}>Alunos

98 |
99 |
100 | Icone Menu 101 |

goToSchedulesPage(navigate)}>Agenda

102 |
103 |
104 | Icone Menu 105 |

goToTrainingPage(navigate)}>Capacitações

106 |
107 | 108 | 109 | : 110 | 111 | '' 112 | } 113 | 114 | { 115 | context.roleUser === "helper" ? 116 | 117 | <> 118 |
119 | Foto Usuario 120 |
121 |

Nome do usuário

122 |

Ver perfil

123 |
124 |
125 |
126 | Icone Menu 127 |

goToHomePage(navigate)}>Conteúdo

128 |
129 |
130 | Icone Menu 131 |

goToConquestPage(navigate)}>Conquistas

132 |
133 | 134 | 135 | : 136 | 137 | '' 138 | } 139 | 140 | { 141 | context.roleUser === "student-special" ? 142 | 143 | <> 144 |
145 | Foto Usuario 146 |
147 |

Nome do usuário

148 |

Ver perfil

149 |
150 |
151 |
152 | Icone Menu 153 |

goToHomePage(navigate)}>Aulas

154 |
155 |
156 | Icone Menu 157 |

goToConquestPage(navigate)}>Conquistas

158 |
159 |
160 | Icone Menu 161 |

goToMentorsPage(navigate)}>Mentores

162 |
163 |
164 | Icone Menu 165 |

goToSchedulesPage(navigate)}>Agenda

166 |
167 |
168 | Icone Menu 169 |

goToTimeLinePage(navigate)}>Cronograma de estudo

170 |
171 | 172 | 173 | : 174 | 175 | '' 176 | } 177 | 178 | 179 | ) 180 | } 181 | 182 | export default LateralMenu -------------------------------------------------------------------------------- /src/pages/SignUpPage/SignUpPage.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react" 2 | import { useContext } from "react" 3 | import { GlobalContext } from "../../context/GlobalContext" 4 | import { goToLoginPage, goToHomePage } from "../../router/coordinator" 5 | import { useNavigate } from "react-router-dom" 6 | import photo from "../../assets/material-symbols_add-a-photo.png" 7 | import { ContainerSignUp, StyleBoxForm, StyleBoxDesire, StyleDesireSelect, StyleBoxButtons } from "./StyleSignUpPage" 8 | import button_desejo_aprender_especialistas from "../../assets/heroicons_puzzle-piece-20-solid.png" 9 | import button_desejo_compartilhar from "../../assets/heroicons-solid_share.png" 10 | import button_desejo_ensinar from "../../assets/fa-solid_chalkboard-teacher.png" 11 | import button_desejo_aprender from "../../assets/fluent_people-community-24-filled.png" 12 | import button_desejo_aprender_especialista_ativo from "../../assets/heroicons_puzzle-piece-20-solid-gold.png" 13 | 14 | function SignUpPage(){ 15 | 16 | const context = useContext(GlobalContext) 17 | const navigate = useNavigate() 18 | const [iconsDesire, setIconsDesire] = useState([ 19 | {image: button_desejo_aprender, 20 | description: "Desejo aprender", 21 | module: "student", 22 | status: false}, 23 | {image: button_desejo_ensinar, 24 | description: "Desejo ensinar", 25 | module: "mentor", 26 | status: false}, 27 | {image: button_desejo_aprender_especialistas, 28 | description: "Desejo aprender com apoio de especialistas", 29 | module: "student-special", 30 | status: false}, 31 | {image: button_desejo_compartilhar, 32 | description: "Desejo compartilhar conteúdos", 33 | module: "helper", 34 | status: false}, 35 | ]) 36 | const [optionDesire, setOptionDesire] = useState("") 37 | 38 | const selectIcon = (optionSelect) =>{ 39 | optionSelect.description === optionDesire? setOptionDesire("") : setOptionDesire(optionSelect.description) 40 | context.setRoleUser(optionSelect.module) 41 | if(!optionSelect.status){ 42 | const newStatus = [...iconsDesire] 43 | 44 | for(let i=0;i{ 56 | 57 | const updatedIconsDesire = [...iconsDesire]; 58 | 59 | if (context.roleUser === "student-special") { 60 | updatedIconsDesire[2].image = button_desejo_aprender_especialista_ativo 61 | } else { 62 | updatedIconsDesire[2].image = button_desejo_aprender_especialistas 63 | } 64 | 65 | setIconsDesire(updatedIconsDesire) 66 | 67 | },[context.roleUser]) 68 | 69 | return( 70 | 71 |

PERFIL

72 | 73 | 74 |
75 |
76 |
77 |

Nome Completo

78 | 79 |
80 |
81 |

E-mail

82 | 83 |
84 |
85 |

Confirmar e-mail

86 | 87 |
88 |
89 |

Senha

90 | 91 |
92 |
93 |
94 |
95 |

Data de nascimento

96 | 97 |
98 |
99 |

Gênero

100 | 101 |
102 |
103 |

Cidade

104 | 105 |
106 |
107 |
108 |
109 |

CPF

110 | 111 |
112 |
113 |

Numero de Celular

114 | 115 |
116 |
117 |

UF

118 | 119 |
120 | 121 |
122 |
123 |
124 | 125 | 126 |
127 |
128 | photo-perfil 129 |
130 |
131 | 132 |
133 | 134 | 136 |
137 |

O que você deseja?

138 |
139 |
140 | 141 | {iconsDesire.map((icon)=>{ 142 | return( 143 |
selectIcon(icon)}> 144 | botão desejo plataforma 145 |

{icon.description}

146 |
147 | ) 148 | })} 149 |
150 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | {optionDesire === "Desejo ensinar" ? 159 | <> 160 |
161 |
162 |

Formação Acadêmica

163 | 164 |
165 |
166 |

Especialidade Principal

167 | 168 |
169 |
170 |

Quais disciplinas são relevantes em suas especialidades?

171 | 172 |
173 |
174 |

Quais Ferramentas você possui experiência?

175 | 176 |
177 |
178 |

Você possui capacitação para ensinar pessoas com deficiência cognitiva / neurodivergência ou que precise de um apoio educacional mais especializado e inclusivo?

179 | 180 |
181 |
182 |
183 |
184 |

Quantos anos de experiência você possui?

185 | 186 |
187 |
188 |

URL do LinkedIn

189 | 190 |
191 |
192 |

Especialidade

193 | 194 |
195 |
196 |

Quais softSkills você domina?

197 | 198 |
199 |
200 | 201 | 202 | : 203 | ""} 204 | {optionDesire === "Desejo aprender com apoio de especialistas" ? 205 | <> 206 |
207 |
208 |

Informações sobre a deficiência cognitiva/neurodivergência

209 | 210 |
211 |
212 |

Preferencias de aprendizagem

213 | 214 |
215 |
216 |

Quais as necessidades de suporte?

217 | 218 |
219 | 220 |
221 |
222 |
223 |

Informações adicionais sobre as necessidades ou desafios especificos relacionados a deficiência cognitiva

224 | 225 |
226 |
227 |

Comentários ou informações adicionais

228 | 229 |
230 | 231 |
232 | 233 | : 234 | ""} 235 | 236 | 237 | 238 | ) 239 | } 240 | 241 | export default SignUpPage --------------------------------------------------------------------------------