Descarte seus resíduos de forma segura
+Ajude o meio ambiente encontrando facilmente o ponto de coleta mais próximo.
+ +Hello World
-
+
- );
+ )
}
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/Header.tsx b/src/Header.tsx
new file mode 100644
index 0000000..173a4fc
--- /dev/null
+++ b/src/Header.tsx
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+
+interface HeaderProps {
+ title: string;
+}
+
+const Header: React.FC{props.title}
+
+
+ 
+
+
+
+ {
+ submited
+ ?
+
+ );
+}
+
+export default CreatePoint;
\ No newline at end of file
diff --git a/src/pages/CreatePoint/styles.css b/src/pages/CreatePoint/styles.css
new file mode 100644
index 0000000..e76776a
--- /dev/null
+++ b/src/pages/CreatePoint/styles.css
@@ -0,0 +1,242 @@
+#page-create-point {
+ width: 100%;
+ max-width: 1100px;
+
+ margin: 0 auto;
+}
+
+#page-create-point header {
+ margin-top: 48px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#page-create-point header a {
+ color: var(--title-color);
+ font-weight: bold;
+ text-decoration: none;
+
+ display: flex;
+ align-items: center;
+}
+
+#page-create-point header a svg {
+ margin-right: 16px;
+ color: var(--primary-color);
+}
+
+#page-create-point form {
+ margin: 80px auto;
+ padding: 64px;
+ max-width: 730px;
+ background: #FFF;
+ border-radius: 8px;
+
+ display: flex;
+ flex-direction: column;
+}
+
+#page-create-point form h1 {
+ font-size: 36px;
+}
+
+#page-create-point form fieldset {
+ margin-top: 64px;
+ min-inline-size: auto;
+ border: 0;
+}
+
+#page-create-point form legend {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 40px;
+}
+
+#page-create-point form legend h2 {
+ font-size: 24px;
+}
+
+#page-create-point form legend span {
+ font-size: 14px;
+ font-weight: normal;
+ color: var(--text-color);
+}
+
+#page-create-point form .field-group {
+ flex: 1;
+ display: flex;
+}
+
+#page-create-point form .field {
+ flex: 1;
+
+ display: flex;
+ flex-direction: column;
+ margin-bottom: 24px;
+}
+
+#page-create-point form .field input[type=text],
+#page-create-point form .field input[type=email],
+#page-create-point form .field input[type=number] {
+ flex: 1;
+ background: #F0F0F5;
+ border-radius: 8px;
+ border: 0;
+ padding: 16px 24px;
+ font-size: 16px;
+ color: #6C6C80;
+}
+
+#page-create-point form .field select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ flex: 1;
+ background: #F0F0F5;
+ border-radius: 8px;
+ border: 0;
+ padding: 16px 24px;
+ font-size: 16px;
+ color: #6C6C80;
+}
+
+#page-create-point form .field input::placeholder {
+ color: #A0A0B2;
+}
+
+#page-create-point form .field label {
+ font-size: 14px;
+ margin-bottom: 8px;
+}
+
+#page-create-point form .field :disabled {
+ cursor: not-allowed;
+}
+
+#page-create-point form .field-group .field + .field {
+ margin-left: 24px;
+}
+
+#page-create-point form .field-group input + input {
+ margin-left: 24px;
+}
+
+#page-create-point form .field-check {
+ flex-direction: row;
+ align-items: center;
+}
+
+#page-create-point form .field-check input[type=checkbox] {
+ background: #F0F0F5;
+}
+
+#page-create-point form .field-check label {
+ margin: 0 0 0 8px;
+}
+
+#page-create-point form .leaflet-container {
+ width: 100%;
+ height: 350px;
+ border-radius: 8px;
+ margin-bottom: 24px;
+}
+
+#page-create-point form button {
+ width: 276px;
+ height: 56px;
+ padding-right: 20px;
+ background: var(--primary-color);
+ border-radius: 8px;
+ color: #FFF;
+ font-weight: bold;
+ font-size: 16px;
+ border: 0;
+ align-self: flex-end;
+ margin-top: 40px;
+ transition: background-color 0.2s;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ outline: none;
+}
+
+#page-create-point form button span {
+ width: 50px;
+ margin-right: 10px;
+ height: 54px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.2s;
+ background: rgba(0, 0, 0, 0.08);
+}
+
+#page-create-point form button:hover {
+ background: #2FB86E;
+}
+
+.items-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 16px;
+ list-style: none;
+}
+
+.items-grid li {
+ background: #f5f5f5;
+ border: 2px solid #f5f5f5;
+ height: 180px;
+ border-radius: 8px;
+ padding: 32px 24px 16px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+
+ text-align: center;
+
+ cursor: pointer;
+}
+
+.items-grid li span {
+ flex: 1;
+ margin-top: 12px;
+
+ display: flex;
+ align-items: center;
+ color: var(--title-color)
+}
+
+.items-grid li.selected {
+ background: #E1FAEC;
+ border: 2px solid #34CB79;
+}
+
+
+.confirm-modal {
+ background: rgba(255, 255, 255, 0.93);;
+ width: 100%;
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ z-index: 9000;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.confirm-modal .animation {
+ flex-basis: 100%;
+}
+
+.confirm-modal .animation h1 {
+ color: #417505;
+}
\ No newline at end of file
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
new file mode 100644
index 0000000..475c9e6
--- /dev/null
+++ b/src/pages/Home/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { FiLogIn } from 'react-icons/fi'
+
+import './styles.css';
+
+import logo from '../../assets/logo.svg';
+import { Link } from 'react-router-dom';
+
+const Home = () => {
+ return(
+
+
+ :
+ null
+ }
+
+ Ponto de coleta
+
+ Ponto de coleta
cadastrado com sucesso!
+
+
+
+
+ );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/pages/Home/styles.css b/src/pages/Home/styles.css
new file mode 100644
index 0000000..3521461
--- /dev/null
+++ b/src/pages/Home/styles.css
@@ -0,0 +1,107 @@
+#page-home {
+ height: 100vh;
+
+ background: url('../../assets/home-background.svg') no-repeat 1080px bottom;
+}
+
+#page-home .content {
+ width: 100%;
+ height: 100%;
+ max-width: 1100px;
+ margin: 0 auto;
+ padding: 0 30px;
+
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+#page-home .content header {
+ margin: 48px 0 0;
+}
+
+#page-home .content main {
+ flex: 1;
+ max-width: 560px;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#page-home .content main h1 {
+ font-size: 54px;
+ color: var(--title-color);
+}
+
+#page-home .content main p {
+ font-size: 24px;
+ margin-top: 24px;
+ line-height: 38px;
+}
+
+#page-home .content main a {
+ width: 100%;
+ max-width: 360px;
+ height: 72px;
+ background: var(--primary-color);
+ border-radius: 8px;
+ text-decoration: none;
+
+ display: flex;
+ align-items: center;
+ overflow: hidden;
+
+ margin-top: 40px;
+}
+
+#page-home .content main a span {
+ display: block;
+ background: rgba(0, 0, 0, 0.08);
+ width: 72px;
+ height: 72px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background-color 0.2s;
+}
+
+#page-home .content main a span svg {
+ color: #FFF;
+ width: 20px;
+ height: 20px;
+}
+
+#page-home .content main a strong {
+ flex: 1;
+ text-align: center;
+ color: #FFF;
+}
+
+#page-home .content main a:hover {
+ background: #2FB86E;
+}
+
+@media(max-width: 900px) {
+ #page-home .content {
+ align-items: center;
+ text-align: center;
+ }
+
+ #page-home .content header {
+ margin: 48px auto 0;
+ }
+
+ #page-home .content main {
+ align-items: center;
+ }
+
+ #page-home .content main h1 {
+ font-size: 42px;
+ }
+
+ #page-home .content main p {
+ font-size: 24px;
+ }
+}
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..1974350
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Route, BrowserRouter } from 'react-router-dom';
+
+import Home from './pages/Home';
+import CreatePoint from './pages/CreatePoint';
+
+const Routes = () => {
+ return (
+
+
+
+
+
+
+
+