feat: NewIncident

frontend/src/global.css

@@ -32,6 +32,18 @@ form input {
     padding: 0 24px;
 }
 
+form textarea {
+    width: 100%;
+    min-height: 140px;
+    height: 60px;
+    line-height: 24px;
+    resize: vertical;
+    color: #333333;
+    border: 1px solid #dcdce6;
+    border-radius: 8px;
+    padding: 0 24px;
+}
+
 .button {
     width: 100%;
     height: 60px;

frontend/src/pages/NewIncident/index.js

@@ -1,10 +1,31 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { FiArrowLeft } from 'react-icons/fi';
 
 import './styles.css';
 
 import logoImg from '../../assets/logo.svg';
 
 export default function NewIncident() {
-    return (<h1>NewIncident</h1>);
+    return (
+        <div className="new-incident-container">
+            <div className="content">
+                <section>
+                    <img src={logoImg} alt="Be The Hero" />
+                    <h1> Cadastrar novo caso </h1>
+                    <p> Descreve o caso detalhadamente para encontrar um herói para revolver isso.</p>
+                    <Link className="back-link" to="/profile"> <FiArrowLeft size={16} color="#E02041" />
+                        Voltar para Home
+                    </Link>
+                </section>
+                <form>
+                    <input placeholder="Título do caso" />
+                    <textarea placeholder="Descrição" />
+                    <input placeholder="Valor em reais" />
+
+                    <button className="button" type="submit">Cadastrar</button>
+                </form>
+            </div>
+        </div>
+    );
 }

frontend/src/pages/NewIncident/styles.css

@@ -0,0 +1,56 @@
+/* merge css 
+    newIncident = Register
+    Portanto, unificar ambos no css global
+*/
+
+.new-incident-container {
+    width: 100%;
+    max-width: 1120px;
+    height: 100vh;
+    margin: 0 auto;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.new-incident-container .content {
+    width: 100%;
+    padding: 96px;
+    background: #f0f0f5;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.new-incident-container .content section {
+    width: 100%;
+    max-width: 380px;
+}
+
+.new-incident-container .content section h1 {
+    margin: 64px 0 32px;
+    font-size: 32px;
+}
+
+.new-incident-container .content section p {
+    font-size: 18px;
+    color: #737380;
+    line-height: 32px;
+}
+
+.new-incident-container .content form {
+    width: 100%;
+    max-width: 450px;
+}
+
+.new-incident-container .content form input {
+    margin-top: 8px;
+}
+
+.new-incident-container .content form textarea {
+    margin-top: 8px;
+}