MilenaSuzumura · MilenaSuzumura · Oct 7, 2023 · Oct 10, 2023 · Jun 12, 2024
diff --git a/app/frontend/package-lock.json b/app/frontend/package-lock.json
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@react-google-maps/api": "^2.19.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

diff --git a/app/frontend/public/favicon.ico b/app/frontend/public/favicon.ico
diff --git a/app/frontend/public/index.html b/app/frontend/public/index.html
@@ -1,15 +1,14 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="pt">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/lionLogo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Zoo Functions</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/app/frontend/public/lionLogo.png b/app/frontend/public/lionLogo.png
diff --git a/app/frontend/public/logo192.png b/app/frontend/public/logo192.png
diff --git a/app/frontend/public/logo512.png b/app/frontend/public/logo512.png
diff --git a/app/frontend/public/manifest.json b/app/frontend/public/manifest.json
@@ -3,17 +3,17 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "lionLogo.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "lionLogo.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "lionLogo.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/app/frontend/src/App.css b/app/frontend/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/app/frontend/src/App.js b/app/frontend/src/App.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Home from './pages/Home'
 import './App.css';
+import './css/header.css'
+import './css/home.css'
 
 
 class App extends React.Component {

diff --git a/app/frontend/src/componets/Header.js b/app/frontend/src/componets/Header.js
@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import lionLogo from '../images/lionLogo.png';
+
+function Header() {
+  return (
+    <header>
+      <div id="header-image">
+        <img src={lionLogo} alt="logo" id="logo" />
+      </div>
+      <div id="header-link">
+        <Link to='entradas' className="button-header">Entradas</Link>
+        <Link to='' className="button-header">Cronogramas</Link>
+        <Link to='' className="button-header">Colaboradores</Link>
+        <Link to='' className="button-header">Animais</Link>
+        <Link to='' className="button-header" id="button-login">Login</Link>
+        <Link to='' className="button-header" id="button-cadastro">Cadastro</Link>
+      </div>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/app/frontend/src/css/header.css b/app/frontend/src/css/header.css
@@ -0,0 +1,38 @@
+header {
+    background-color: rgba(7, 49, 0, 1);
+}
+
+#header-link {
+    text-align: end;
+    display: inline-block;
+    width: 60%;
+    padding-top: 20px;
+}
+
+#header-image {
+    width: 40%;
+    text-align: start;
+    display: inline-block;
+}
+
+.button-header {
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 10px;
+    height: 40px;
+}
+
+#button-login {
+    background-color: rgba(9, 36, 5, 1);
+}
+
+#button-cadastro {
+    background-color: rgba(6, 23, 3, 1);
+}
+
+#logo {
+    width: 50px;
+    text-align: start;
+}
diff --git a/app/frontend/src/css/home.css b/app/frontend/src/css/home.css
@@ -0,0 +1,3 @@
+#home-image-lion, #home-image-penguin {
+   width: 100%;
+}
diff --git a/app/frontend/src/images/girafa.jpg b/app/frontend/src/images/girafa.jpg
diff --git a/app/frontend/src/images/lion.jpg b/app/frontend/src/images/lion.jpg
diff --git a/app/frontend/src/images/lionLogo.png b/app/frontend/src/images/lionLogo.png
diff --git a/app/frontend/src/images/poucos-pinguins.jpg b/app/frontend/src/images/poucos-pinguins.jpg
diff --git a/app/frontend/src/images/tigre.jpg b/app/frontend/src/images/tigre.jpg
diff --git a/app/frontend/src/logo.svg b/app/frontend/src/logo.svg
diff --git a/app/frontend/src/pages/Entradas.js b/app/frontend/src/pages/Entradas.js
diff --git a/app/frontend/src/pages/Home.js b/app/frontend/src/pages/Home.js
@@ -1,6 +1,72 @@
+import React from 'react'
+import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
+
+import Header from "../componets/Header";
+import lion from '../images/lion.jpg';
+import penguin from '../images/poucos-pinguins.jpg';
+import girafa from '../images/girafa.jpg';
+import tigre from '../images/tigre.jpg';
+
 function Home() {
+  const containerStyle = {
+    width: '400px',
+    height: '400px'
+  };
+
+  const center = { lat: -25.559623473260427, lng: -49.2314230896749 };
+
+    const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: "YOUR_API_KEY"
+  })
+
+  const [map, setMap] = React.useState(null)
+
+  const onLoad = React.useCallback(function callback(map) {
+    // This is just an example of getting and using the map instance!!! don't just blindly copy!
+    const bounds = new window.google.maps.LatLngBounds(center);
+    map.fitBounds(bounds);
+
+    setMap(map)
+  }, [])
+
+  const onUnmount = React.useCallback(function callback(map) {
+    setMap(null)
+  }, [])
+
   return (
-    <h1>Teste</h1>
+    <div>
+      <Header />
+      <img src={lion} id="home-image-lion" />
+      <div>
+      <h1>Parque Zoológico Municipal de Curitiba</h1>
+      <p>O Parque Zoológico Municipal de Curitiba tem como objetivo garantir qualidade de vida para animais selvagens obtidos na caça ilegal, dando-lhes alimentação adequada, atividades desenvolvidas por biólogos e um local protegido de serem caçados.</p>
+      <img src={penguin} id="home-image-penguin" />
+      <h2>Conservação</h2>
+      <p>Alguns dos animais não podem voltar a natureza por não fazer parte do habitate e é custoso de mandá-los de volta com algum biologo para ajudá-lo a ser inserido. Por isso, tentamos imitar o seu habitate natural com as atividades propostas e dietas restritas</p>
+      <img src={girafa} id="home-image-lion" />
+      <h2>Biólogos</h2>
+      <p>Nossos biólogos são escolhidos com cuidado para que eles consigam atender cada espécie com sua própria necessidade.</p>
+      <img src={tigre} id="home-image-lion" />
+      <h2>Doações</h2>
+      <p>Felizmente, nossos ganhos são suficientes para nos manter, porém com a ajuda da população, podemos melhorar nossas atividades e aumentarmos o número de animais resgatados.</p>
+      </div>
+      <h1>Dia de Funcionamento</h1>
+      <p>Terça à Domingo.</p>
+      <button>Saiba mais sobre os horários</button>
+      <h3>Localização: Rua inexistente, 05. Centro. Curitiba Paraná Contato: Whatsapp, email telefone fixo Redes sociais Instagram, facebook e Youtube.</h3>
+{ isLoaded ? <GoogleMap
+        mapContainerStyle={containerStyle}
+        center={center}
+        zoom={10}
+        onLoad={onLoad}
+        onUnmount={onUnmount}
+        >
+        { /* Child components, such as markers, info windows, etc. */ }
+        <></>
+      </GoogleMap> : <></> }
+      <p>Mais informações: Home, ingressos, funcionarios, horarios</p>
+    </div>
   );
 }