refact/Home&AboutPage #90

src/components/About/About.js

@@ -1,82 +1,45 @@
 import React from 'react';
 import '../../style/pages/HomePage/About.css';
+import NavbarAlt from '../Navbar/NavbarAlt'
 
 function About(){
  return(
  <div className='about-container'>
- <div className='imagem-inferior'>
- <img src='/imagens/logoCheery_Up_3_-removebg-preview.png' alt='Logo Cereja'/>
+ <div className='aboutInfo'>
+ <div className='aboutTitulo'>
+ Quem somos?
+ </div>
+ <div className='aboutTexto'>
+ Cheery Up é um projeto que dá atenção à saúde psicológica da sociedade, 
+ especialmente no contexto da pandemia do Covid-19. O propósito da Cheery Up 
+ consiste em uma plataforma web para ajudar profissionais da psicologia
+ à monitorar e acompanhar a saúde mental de seus pacientes.
+ A plataforma irá oferecer ferramentas para melhor fiscalização do
+ comportamento psicológico dos pacientes, tais como Dashboards e 
+ Quadros de Evolução.
+ A Cheery Up nasceu a partir de uma ideia de uma professora da Universidade
+ de Brasília, Carla Rocha, na qual é desenvolvida uma ideia para ajudar 
+ a sociedade em um momento tão delicado como a Pandemia do Covid-19.
+ Esse movimento foi abraçado por um grupo de estudantes da UnB, que juntos
+ à supervisão da Professora Carla e suas monitoras, está tornando o projeto
+ Cheery Up real. 
+ Portanto, aos psicólogos que querem facilitar seu trabalho, 
+ além de ajudar a sociedade, não percam tempo e façam seu Cadastro!
+
+ </div>
  </div>
- <div className='titulo-about'>
- <h1>Somos a </h1>
- <img src='/imagens/logoUpper2-removebg-preview.png' alt='Logo Cheery Up'/>
+ <div className='aboutImagem'>
+ <img src = '/imagens/Cheery Up !.png' alt='Cereja Feliz' width='100%' height='100%'/>
  </div>
- <div className='texto-about'>
- <Texto />
- </div>
-
  </div>
  )
 }
 
-function Texto(){
+function Texto() {
  return(
- <ul>
- <h1 className='objetivo'>Nosso Objetivo:</h1>
- <li>
- <h2>
- Ajudar a sociedade, principalmente nesse difícil cenário de pandemia.
- </h2>
- </li>
- <br></br>
- <br></br>
-
- <h1 className='objetivo'>Como faremos isso?</h1>
- <li>
- <h2>
- Dando uma atenção especial para saúde mental
- daqueles afetados pelo contexto epidêmico.
- </h2>
- </li>
- <br></br>
- <br></br>
+ <div>
 
- <h1 className='objetivo'>Quem pode nos ajudar?</h1>
- <li>
- <h2>
- Você, profissional da psicologia, que quer se aliar
- à nossa luta!
- </h2>
- </li>
- <br></br>
- <br></br>
-
- <h1 className='objetivo'>Sobre a ferramenta:</h1>
-
- <li>
- <h2>
- A Cheery Up é uma plataforma web que ajudará os psicólogos
- à monitorar e acompanhar a saúde mental de seus 
- pacientes.
- </h2>
- </li>
- <li>
- <h2>
- Tudo isso com o apoio de Dashboards e Quadros de evolução.
- Venha experimentar essa incrível ferramenta!
- </h2>
- </li>
- <br></br>
- <br></br>
- </ul>
- /*<h3 className='sobre-nos'>
- Cheery Up é um projeto que dá atenção à saúde mental da sociedade, 
- especialmente no contexto da pandemia do Covid-19. O propósito da Cheery Up 
- consiste em uma plataforma web para ajudar profissionais da psicologia
- à monitorar e acompanhar a saúde psicológica de seus pacientes.
- Portanto, convidamos você, psicólogo, a se juntar à nossa luta nesse 
- momento tão delicado no país e no mundo.
- </h3>*/
+ </div>
  )
 }
 

src/components/Body/Body.js

@@ -7,17 +7,28 @@ function Body() {
  return (
  <div className='body-container'>
  <div className='imagem-superior'>
- <img src="/imagens/logoCerebro5-Frontal-removebg-preview.png" alt="Imagem Logo"/>
+ <img src="/imagens/imagemHome.png" alt="Imagem Logo"/>
  </div>
- <div>
- <h1 className='msg-convite'>Junte-se à nossa causa</h1>
+ <div className='convite'>
+ <h1 className='mensagem'>Faça parte da nossa equipe!</h1>
+ <h2 className='submensagem'>
+ Escolha a ferramenta que facilita
+ a gerência de seus pacientes.
+ </h2>
  </div>
  <div className='body-botao'>
  <ButtonCad>
- Cadastre-se
+ Faça seu Cadastro
  </ButtonCad>
  </div>
+ <div className='rodape'>
+ <div className='imagem-rodape'>
+ <img src="/imagens/github.png" alt="Imagem Logo" width='50' height='50'/>
+ </div>
+ </div>
+
  </div>
+
  )
 }
 

src/components/Navbar/MenuItems.js

@@ -1,15 +1,15 @@
 
 export const MenuItems = [
- {
- title: 'Home',
- url: 'http://localhost:3000/',
- cName: 'nav-links'
- },
- {
- title: 'Serviços',
- url: '#',
- cName: 'nav-links'
- },
+ // {
+ //  title: 'Home',
+ //  url: 'http://localhost:3000/',
+ //  cName: 'nav-links'
+ // },
+ // {
+ //  title: 'Serviços',
+ //  url: '#',
+ //  cName: 'nav-links'
+ // },
  {
  title: 'Login',
  url: 'http://localhost:3000/Login',
@@ -22,9 +22,20 @@ export const MenuItems = [
  ID : 'some-id'
  },
  {
- title: 'Cadastre-se',
+ title: 'Cadastre',
  url: 'http://localhost:3000/SignUP',
  cName: 'nav-links'
  }
 
+]
+
+// Fiz esse export para aparecer apenas "Home" na Navbar.
+// Além disso, fiz um novo arquivo.js chamado "NavbarAlt.js" para 
+// exportar essa nova Navbar.
+export const MenuItemsAlt = [
+ {
+ title: 'Home',
+ url: 'http://localhost:3000/',
+ cName: 'nav-linksAlt'
+ },
 ]

src/components/Navbar/Navbar.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react'
-//import { useState } from 'react'
-//import { Link } from 'react-router-dom'
-import { MenuItems } from "./MenuItems"
+import { MenuItems} from "./MenuItems"
 import { Button } from "../Button/Button"
 import '../../style/pages/HomePage/Navbar.css'
 
-
+//import { useState } from 'react'
+//import { Link } from 'react-router-dom'
 
 
 
@@ -20,7 +19,7 @@ class Navbar extends Component {
  return(
  <nav className="NavbarItems">
  <div className='logo-cheeryUp'>
- <img src = '/imagens/logoUpper-removebg-preview.png' alt='Logo'/>
+ <img src = '/imagens/logoNavbar.png' alt='Logo'/>
  </div>
  <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
  {MenuItems.map((item, index) => {

src/components/Navbar/NavbarAlt.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import { MenuItemsAlt } from "./MenuItems"
+import { Button } from "../Button/Button"
+import '../../style/pages/HomePage/Navbar.css'
+
+/*
+ Fiz esse novo arquivo no intuito de termos uma Navbar alternativa,
+ que mostre apenas o botão Home.
+ Essa Navbar seria usada nas seguintes paginas:
+ About, Cadastro de Psicologo, Login, etc
+*/
+
+class NavbarAlt extends Component {
+ state = { clicked: false }
+
+ handleClick = () => {
+ this.setState({ clicked: !this.state.clicked })
+ }
+
+ render() {
+ return(
+ <nav className="NavbarItemsAlt">
+ <div className='logo-cheeryUpAlt'>
+ <img src = '/imagens/logoNavbarAlt.png' alt='Logo'/>
+ </div>
+ <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
+ {MenuItemsAlt.map((item, index) => {
+ return (
+ <li key={index}>
+ <a className={item.cName} href={item.url}>
+ {item.title}
+ </a>
+ </li>
+ )
+ })}
+ </ul>
+
+ </nav>
+ )
+ }
+}
+
+export default NavbarAlt

src/pages/AboutPage/AboutPage.js

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { Component } from 'react';
 import Navbar from "../../components/Navbar/Navbar";
 import About from '../../components/About/About';
+import NavbarAlt from '../../components/Navbar/NavbarAlt';
 
 function AboutPage() {
  return(
  <div className='AboutPage'>
- <Navbar />
+ <NavbarAlt />
  <About />
  </div>
  ) 

src/pages/HomePage/Home.js

@@ -1,16 +1,14 @@
 import React from 'react';
-//import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom'
 import Navbar from "../../components/Navbar/Navbar";
 import Body from '../../components/Body/Body';
-import About from '../../components/About/About';
-//import {BrowserRouter as Router} from 'react-router-dom';
+import {BrowserRouter as Router} from 'react-router-dom';
 
 function Home() {
  return(
- <div className='Homepage'>
+ <div>
  <Navbar />
  <Body />
- <About />
  </div>
  ) 
 }