+ 
+
+ )
+}
\ No newline at end of file
diff --git a/Front/src/components/AnuncioCard/styles.css b/Front/src/components/AnuncioCard/styles.css
new file mode 100644
index 00000000..3f59df88
--- /dev/null
+++ b/Front/src/components/AnuncioCard/styles.css
@@ -0,0 +1,46 @@
+.anuncio-card {
+ width: 30%;
+ padding: 1rem;
+ margin-bottom: 2.5rem;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ background: #111;
+ color: #fff;
+}
+
+.anuncio-card img {
+ max-width: 100%;
+ margin-bottom: 1rem;
+}
+
+.anuncio-card h2 {
+ margin-bottom: 1rem;
+
+}
+
+.anuncio-card p {
+ margin-bottom: 1rem;
+}
+
+.anuncio-card svg {
+ color: #c19d1a;
+}
+
+.anuncio-card a {
+ /* cores */
+ background: #c19d1a;
+ color: #000;
+
+ /* tamanho/formato */
+ border: 2px solid #af9127;
+ border-radius: 4px;
+ padding: 1rem .5rem;
+
+ /* posicionamentos */
+ align-items: center;
+ text-align: center;
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/Front/src/components/CarroCard/index.jsx b/Front/src/components/CarroCard/index.jsx
new file mode 100644
index 00000000..a62b2ee5
--- /dev/null
+++ b/Front/src/components/CarroCard/index.jsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react"
+
+import { CarroEditCard } from "../../components/CarroEditCard"
+
+import './styles.css'
+
+export function CarroCard({ carro }) {
+ const [showEdit, setShowEdit] = useState(false)
+
+ function onShow() {
+ setShowEdit(true)
+ }
+
+ function onClose() {
+ setShowEdit(false)
+ }
+
+ return (
+ {anuncio.nome}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/Front/src/components/CarroCard/styles.css b/Front/src/components/CarroCard/styles.css
new file mode 100644
index 00000000..d04dc3d1
--- /dev/null
+++ b/Front/src/components/CarroCard/styles.css
@@ -0,0 +1,18 @@
+.card {
+ display: flex;
+ margin: 1em;
+ border: solid 1px black;
+}
+
+.card h3 {
+ display: flex;
+ flex-direction: row;
+ padding: 0 3em;
+ margin-right: 30em;
+ width: 100%;
+}
+
+.btn-excluir {
+ background-color: rgb(197, 5, 5);
+}
+
diff --git a/Front/src/components/CarroEditCard/index.jsx b/Front/src/components/CarroEditCard/index.jsx
new file mode 100644
index 00000000..c70eb73a
--- /dev/null
+++ b/Front/src/components/CarroEditCard/index.jsx
@@ -0,0 +1,134 @@
+import { useState, useEffect } from "react"
+
+import './styles.css'
+
+export function CarroEditCard({ carro }) {
+ const [donos, setDonos] = useState([])
+ const [nome, setNome] = useState('')
+ const [marca, setMarca] = useState('')
+ const [anoFabricacao, setAnoFabricacao] = useState(0)
+ const [donoCarro, setDonoCarro] = useState('')
+ const [descricao, setDescricao] = useState('')
+ const [fotoCarro, setFotoCarro] = useState(null);
+
+ const url = import.meta.env.VITE_URL
+
+ useEffect(() => {
+ const donosURL = `${url}/donos`;
+
+ async function getDonos(url) {
+ const response = await fetch(url);
+ const data = await response.json();
+
+ setDonos(data);
+ }
+
+ getDonos(donosURL);
+
+ }, [])
+
+ // transformar em base64
+ const getBase64 = async (file) => {
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.readAsDataURL(file);
+ reader.onloadend = () => {
+ const base64data = reader.result;
+ resolve(base64data);
+ }
+ });
+ }
+
+ function submit(e) {
+ e.preventDefault();
+
+ let render = fotoCarro ? getBase64(fotoCarro) : null
+
+ axios.post(`${url}/donos/busca`, {
+ nome: donoCarro
+ })
+ .then(response => {
+ render.then(renderResponse => {
+ axios.put(`${url}/carros/${carro.id}`, {
+ nome,
+ marca,
+ ano_fabricacao: anoFabricacao,
+ descricao,
+ dono_carro_id: response.data[0].id,
+ foto_carro: renderResponse ? renderResponse.split(",")[1] : null
+ })
+ .then(() => alert("Campos editados com sucesso"))
+ .catch(error => console.log(error))
+
+ })
+ .catch(error => console.log(error))
+
+ })
+ .catch(error => console.log(error))
+ }
+
+ function onDelete() {
+ axios.delete(`${url}/carros/${carro.id}`)
+ .then(() => alert("Registro deletado com sucesso"))
+ .catch(error => console.log(error));
+ }
+
+ return (
+ {carro.nome}
+ + {showEdit && ( +
+
+ )}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/Front/src/components/CarroEditCard/styles.css b/Front/src/components/CarroEditCard/styles.css
new file mode 100644
index 00000000..acac91ed
--- /dev/null
+++ b/Front/src/components/CarroEditCard/styles.css
@@ -0,0 +1,61 @@
+div.edit-card-container {
+ background-color: black;
+ display: flex;
+ flex-direction: column;
+
+ padding: 1em;
+}
+
+.edit-card-container form {
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+}
+
+.edit-card-container input[type=text] {
+ width: 100%;
+ margin-bottom: 1em;
+ background-color: black;
+ border: 1px solid black;
+ padding: .5em;
+}
+
+.edit-card-container h1 {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.edit-card-container h1 input {
+ padding: .5em;
+}
+
+.edit-card-container textarea {
+ width: 100%;
+ background-color: black;
+ color: white;
+ border: 1px solid white;
+ padding: .5em;
+ margin-bottom: .5em;
+}
+
+.edit-card-container select {
+ width: 100%;
+ background-color: black;
+ color: white;
+ border: 1px solid white;
+ padding: .5em;
+}
+
+
+.edit-card-container .file-p {
+ margin-top: 1em;
+}
+
+.edit-card-container button {
+ margin-top: 1em;
+}
+
+.edit-card-container .btn-excluir {
+ background-color: rgb(202, 9, 9);
+}
\ No newline at end of file
diff --git a/Front/src/components/DonoCard/index.jsx b/Front/src/components/DonoCard/index.jsx
new file mode 100644
index 00000000..357464d1
--- /dev/null
+++ b/Front/src/components/DonoCard/index.jsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react"
+
+import { DonoEditCard } from "../../components/DonoEditCard"
+
+import './styles.css'
+
+export function DonoCard({ dono }) {
+ const [showEdit, setShowEdit] = useState(false)
+
+ function onShow() {
+ setShowEdit(true)
+ }
+
+ function onClose() {
+ setShowEdit(false)
+ }
+
+ return (
+
+
+ Editar
+ + + +
+
+
+ )
+}
\ No newline at end of file
diff --git a/Front/src/components/DonoCard/styles.css b/Front/src/components/DonoCard/styles.css
new file mode 100644
index 00000000..a9771d86
--- /dev/null
+++ b/Front/src/components/DonoCard/styles.css
@@ -0,0 +1,21 @@
+div.card {
+ display: flex;
+ margin: 1em;
+ border: 1px solid rgba(255, 255, 255, 0.634);
+}
+
+div.card h3 {
+ display: flex;
+ flex-direction: row;
+ padding: 0 3em;
+ margin-right: 30em;
+ width: 100%;
+}
+
+.btn-excluir {
+ background-color: rgb(197, 5, 5);
+}
+
+div.card button {
+ background-color: #c19d1a;
+}
diff --git a/Front/src/components/DonoEditCard/index.jsx b/Front/src/components/DonoEditCard/index.jsx
new file mode 100644
index 00000000..c5cd89b2
--- /dev/null
+++ b/Front/src/components/DonoEditCard/index.jsx
@@ -0,0 +1,70 @@
+import { useState, useEffect } from "react"
+
+import './styles.css'
+
+export function DonoEditCard({ dono }) {
+ const [nome, setNome] = useState('');
+ const [email, setEmail] = useState('');
+ const [telefone, setTelefone] = useState('');
+
+ const url = import.meta.env.VITE_URL
+
+ function submit(e) {
+ e.preventDefault();
+
+ axios.put(`${url}/donos/${dono.id}`, {
+ nome,
+ email,
+ telefone
+ })
+ .then(() => alert("Campos editados com sucesso"))
+ .catch(error => console.log(error))
+ }
+
+ function onDelete() {
+ axios.delete(`${url}/donos/${dono.id}`)
+ .then(() => alert("Registro deletado com sucesso"))
+ .catch(error => console.log(error));
+ }
+
+ return (
+ {dono.nome}
+ + {showEdit && ( +
+
+ )}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/Front/src/components/DonoEditCard/styles.css b/Front/src/components/DonoEditCard/styles.css
new file mode 100644
index 00000000..a8548db8
--- /dev/null
+++ b/Front/src/components/DonoEditCard/styles.css
@@ -0,0 +1,33 @@
+div.edit-card-container {
+ background-color: black;
+ color: white;
+ display: flex;
+ flex-direction: column;
+
+ padding: 1em;
+}
+
+div.edit-card-container form {
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+}
+
+div.edit-card-container h1 {
+ margin-bottom: 1em;
+}
+
+div.edit-card-container input[type=text] {
+ width: 100%;
+ color: white;
+ border: 1px solid white;
+ margin-bottom: 1em;
+}
+
+.edit-card-container button {
+ margin-top: 1em;
+}
+
+.edit-card-container .btn-excluir {
+ background-color: rgb(202, 9, 9);
+}
\ No newline at end of file
diff --git a/Front/src/components/Footer/index.jsx b/Front/src/components/Footer/index.jsx
new file mode 100644
index 00000000..d76b752f
--- /dev/null
+++ b/Front/src/components/Footer/index.jsx
@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom"
+
+import { FaStar } from "react-icons/fa"
+
+import './styles.css'
+
+export function Footer() {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/Front/src/components/Footer/styles.css b/Front/src/components/Footer/styles.css
new file mode 100644
index 00000000..d142b3a0
--- /dev/null
+++ b/Front/src/components/Footer/styles.css
@@ -0,0 +1,22 @@
+footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ height: 200px;
+
+ border-top: 1px solid #c19d1a;
+ color: #fff;
+ background-color: #121212;
+}
+
+footer h3, footer p {
+ margin-bottom: 1.2em;
+}
+
+
+footer span {
+ font-weight: bold;
+ color: #c19d1a;
+}
\ No newline at end of file
diff --git a/Front/src/components/NavBar/index.jsx b/Front/src/components/NavBar/index.jsx
new file mode 100644
index 00000000..9bcb352d
--- /dev/null
+++ b/Front/src/components/NavBar/index.jsx
@@ -0,0 +1,61 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { BiSearchAlt2 } from 'react-icons/bi'
+import { AiFillCar } from 'react-icons/ai'
+
+import './styles.css'
+
+export function NavBar() {
+ const [ search, setSearch ] = useState('')
+ const navigate = useNavigate()
+
+ function handleSubmit(event) {
+ event.preventDefault()
+ navigate(`/search?q=${search}`)
+ setSearch('')
+ }
+
+ return (
+
+ )
+}
+
+/*
+ onSubmit: (evento de envio, 'submit: enviar')
+ o onSubmit é um evento java script comum como o onclick por exempo, porém com suas funcionalidades semânticas específicas. o onSubmit é usado para manipular formulários e assim que o botão 'type submit' for clicado, o evento 'onSubmit' é disparado. Lembrando que o botão type submit tem que ser filho da tag form para podermos passar o evento dentro da tag e ela ser diparada assim que clicada no seu respectivo botão.
+
+ a sintaxe do jsx esconde a passagem do parâmetro que fazemos na função e escrevemos dentro do evento onSubmit mas não se engane, ela está lá.
+
+ event.preventDefault(): (traduzindo: 'evitar padrão')
+ o parametro da função handleSubmit(event) é preenchido através do onSubmit, que é um evento e cada evento tem uma função, seja onClick ou um checkbox, etc. A função complementar seguida do evento, essa que estamos analisando, a preventDefault faz literalmente o que o nome diz, seu evento continua funcionando normalmente mas evitamos seu comportamento padrâo, no checkbox por exemplo, como foi explicado no site do MDN, ele continua funcionando mas sua caixinha de 'check' não é preenchida com o 'v'. No caso do nosso onSubmit, o formulário é enviado através de parametros HTTP porém sua página não faz o reload, o reload geralmente é feito por padrão.
+
+ useNavigate():
+ Hook do react-router-dom que armazena em uma variável uma função 'navigate' que em seu parâmetro escreve uma string específica no HTTP, gerando um parâmetro HTTP,
+
+ propriedade value do input text:
+ é literalmente o valor default(padrao) do input, ele é inserido lá com a a variável de estado 'search', assim que chamamos a função no onSubmit, usamos sua função set para deixar a variável search vazia refletindo dentro do valor(value) do input text
+*/
\ No newline at end of file
diff --git a/Front/src/components/NavBar/styles.css b/Front/src/components/NavBar/styles.css
new file mode 100644
index 00000000..bf93ef1d
--- /dev/null
+++ b/Front/src/components/NavBar/styles.css
@@ -0,0 +1,56 @@
+#navbar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ padding: 1rem 2rem; /* (cima/abaixo) - (direita/esquerda) */
+ background: #121212;
+}
+
+#navbar h2 a {
+ display: flex; /* alinhando perfeitamente o icone e o link */
+ align-items: center;
+ gap: 0.5rem; /* essa propriedade serve para setar tipo uma margem de dentro de um bloco com vários blocos dentro, pense em uma div cheia de divs, ele seta a margem ou 'gap' de todos eles */
+}
+
+#navbar form {
+ display: flex;
+ gap: .5rem;
+}
+
+#navbar input {
+ padding: .2rem .8rem;
+ border-radius: 4px;
+ border: none;
+}
+
+#navbar button {
+ background: #c19d1a;
+ color: #000;
+
+ border: 2px solid #f7d354;
+ border-radius: 4px;
+
+ padding: .3rem;
+ font-size: 1.3rem;
+
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ transition: .4s;
+}
+
+#navbar button:hover {
+ filter: brightness(.5);
+}
+
+#navbar ul {
+ display: flex;
+ list-style: none;
+ padding: .5em;
+}
+
+#navbar li {
+ margin-right: 1em;
+}
\ No newline at end of file
diff --git a/Front/src/main.jsx b/Front/src/main.jsx
new file mode 100644
index 00000000..1d846e6a
--- /dev/null
+++ b/Front/src/main.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+
+import { App } from './App'
+import { Home } from './pages/Home'
+import { Search } from './pages/Search'
+import { Anunciar } from './pages/Anunciar'
+import { Registros } from './pages/Registros'
+import { DonoRegistro } from './pages/DonoRegistro'
+import { Anuncio } from './pages/Anuncio'
+
+import './styles/global.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+
+
+