Develop

package.json

@@ -11,10 +11,12 @@
     "json-server": "^0.17.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-elastic-carousel": "^0.11.5",
     "react-icons": "^4.3.1",
     "react-modal": "^3.15.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
+    "styled-components": "^5.3.5",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },

src/componentes/components/produto/avaliacao/Avaliacao.css

@@ -1,41 +1,51 @@
-.review .box-container{
+.review .box-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-    gap:1.5rem;
+    gap: 1.5rem;
     margin-bottom: 5%;
 }
 
-.review .box-container .box{
-    border:var(--border);
+.review .box-container .box {
+    border: var(--border);
     text-align: center;
-    padding:3rem 2rem;
+    padding: 3rem 2rem;
 }
 
-.review .box-container .box p{
+.review .box-container .box p i{
     font-size: 1.5rem;
+    text-transform: none; 
     line-height: 1.8;
-    color:#ccc;
-    padding:2rem 0;
+    color: #ccc;
+    padding: 2rem 0;
 }
 
-.review .box-container .box .user{
+.review .box-container .box .user {
     height: 7rem;
     width: 7rem;
     border-radius: 50%;
     object-fit: cover;
 }
 
-.review .box-container .box h3{
-    padding:1rem 0;
+.review .box-container .box h3 {
+    padding: 1rem 0;
     font-size: 2rem;
-    color:#fff;
+    color: #fff;
 }
 
-.review .box-container .box .stars i{
+.review .box-container .box .stars i {
     font-size: 1.5rem;
-    color:var(--main-color);
+    color: var(--main-color);
 }
 
 .review .box img {
     width: 15%;
+}
+
+.review {
+    display: flex;
+    gap: 2%;
+}
+.ft img{
+    object-fit: cover;
+    border-radius: 180px;
 }

src/componentes/components/produto/avaliacao/Avaliacao.js

@@ -1,34 +1,105 @@
 import "./Avaliacao.css";
-import Bee from "../../../../assets/images/bee_redondo_pequeno.png";
 import Aspas from "../../../../assets/images/aspas_pequena.png";
-
+import foto1 from "../../../../assets/images/foto1.jpg";
+import foto2 from "../../../../assets/images/foto2.png";
+import foto3 from "../../../../assets/images/foto3.jpg";
 function Avaliacao() {
-    return(
+  return (
+    <div className="container">
+      <section className="review-avaliacao">
         <div className="review" id="review">
-            <div className="box-container">
-                <div className="box">
-                    <div className="aspas">
-                        <img src={Aspas} />
-                    </div>
-                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi quas eaque laudantium consequuntur iste ex aliquam minus vel? Nemo.</p>
-
-                    <div className="bee">
-                        <img src={Bee} />
-                    </div>
-
-                    <h3>Pessoa 1</h3>
-
-                    <div className="stars">
-                        <i className="fas fa-star"></i>
-                        <i className="fas fa-star"></i>
-                        <i className="fas fa-star"></i>
-                        <i className="fas fa-star"></i>
-                        <i className="fas fa-star-half-alt"></i>
-                    </div>
-                </div>
+
+          <div className="box-container">
+            <div className="box">
+              <div className="aspas">
+                <img src={Aspas} />
+              </div>
+              <p>
+                <i>
+                  Depois que começei a anunciar no UTFOME minhas vendas cresceram bastante,
+                  consegui expandir meus negócios e aumentar minha renda! O UTFOME é um ótimo
+                  aplicativo para conseguir visibilidade comercial no ramo alimentício.
+                </i>
+              </p>
+
+              <div className="ft">
+                <img src={foto1} />
+              </div>
+
+              <h3>Thomas Shelby</h3>
+
+              <div className="stars">
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star-half-alt"></i>
+              </div>
             </div>
-        </div>
+          </div>
+
+          <div className="box-container">
+            <div className="box">
+              <div className="aspas">
+                <img src={Aspas} />
+              </div>
+              <p>
+                <i>
+                  Muito bom o aplicativo, me ajudou a encontrar diversas comidas que eu
+                  não conseguiria achar em outro lugar. Além de fomentar o nicho dos comerciantes
+                  do ambiente acadêmico. Parabéns aos idealizadores! Amei! 
+                </i>
+              </p>
+
+              <div className="ft">
+                <img src={foto2} />
+              </div>
+
+              <h3>Letícia Espíndola</h3>
 
-    );
+              <div className="stars">
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star-half-alt"></i>
+              </div>
+            </div>
+          </div>
+
+          <div className="box-container">
+            <div className="box">
+              <div className="aspas">
+                <img src={Aspas} />
+              </div>
+              <p>
+                <i>
+                  Aplicativo muito bom, com bastante variedades de anúncios além de 
+                  ser fácil de usar, conta uma ótima equipe de divulgação.
+                  Graças ao UTFOME consegui me manter estudando com o dinheiro das vendas
+                  que anunciei aqui. 
+                </i>
+              </p>
+
+              <div className="ft">
+                <img src={foto3} />
+              </div>
+
+              <h3>Márcia Cristina</h3>
+
+              <div className="stars">
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star"></i>
+                <i className="fas fa-star-half-alt"></i>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+    </div>
+  );
 }
-export default Avaliacao;
+export default Avaliacao;

src/componentes/components/produto/item/Item.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export default styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90vh;
+    width: 100%;
+    background-color: #683bb7;
+    color: #fff;
+    margin: 15px;
+    font-size: 4em;
+`;

src/componentes/layout/footer/Footer.js

@@ -25,7 +25,6 @@ function Footer() {
             <a href="/anunciar">Anunciar</a>
             <a href="/sobre">Sobre</a>
             <a href="/contato">Contato</a>
-            <a href="/review">Avaliações</a>
             <a href="/perfil">Perfil</a>
           </div>        
         </div>

src/componentes/layout/header/Header.css

@@ -13,6 +13,10 @@
 .header .logo img{
     height: 6rem;
 }
+.logout-botao{
+    background-color: #000;
+    color: #fff;
+}
 
 .header .navbar a{
     margin:0 1rem;

src/componentes/layout/header/Header.js

@@ -8,7 +8,11 @@ import { Link } from 'react-router-dom';
 
 function Header(){
 
-    const { authenticated } = useContext(AuthContext);
+  const handleLogout = () => {
+    logout();
+  };
+
+    const { authenticated, logout } = useContext(AuthContext);
 
     function openMenu(){
         let navbar = document.querySelector('.navbar');
@@ -33,7 +37,6 @@ function Header(){
                     <Link to="/anunciar">ANUNCIAR</Link>
                     <Link to="/sobre">SOBRE</Link>
                     <Link to="/contato">CONTATO</Link>
-                    <Link to="/review">AVALIAÇÕES</Link>
                     <Link to="/perfil">PERFIL</Link>
                 </nav>
 
@@ -42,6 +45,12 @@ function Header(){
                         <FaBars />
                     </div>
                 </div>
+               {/*  <button className="logout-botao" onClick={handleLogout}>
+                     LOGOUT
+                </button> */}
+                <Link to="/login" className="login-botao"  >
+                     ENTRE
+                </Link>
 
             </header>
     );

src/componentes/pages/about/About.js

@@ -14,7 +14,7 @@ function About(){
         <>  
             <Header />
             <section className="about" id="about">
-                <h1 className="heading"> <span>about</span> us </h1>
+                <h1 className="heading"> <span>sobre</span> nós </h1>
 
                 <div className="row">
 

src/componentes/pages/contact/Contact.css

@@ -1,5 +1,6 @@
 .contact{
-    margin-top: 10rem;
+    margin-top: 2rem;
+    margin-bottom: 3rem;
 }
 
 .contact .row{
@@ -13,6 +14,7 @@
     flex:1 1 45rem;
     width: 100%;
     object-fit: cover;
+    height: 45rem;
 }
 
 .contact .row form{
@@ -59,4 +61,8 @@
     color:#fff;
     text-transform: none;
     background:none;
-}
+}
+
+.contact .row form .input .descricao{
+    height: 20rem;
+}

src/componentes/pages/contact/Contact.js

@@ -1,34 +1,41 @@
-import Footer from '../../layout/footer/Footer';
-import Header from '../../layout/header/Header';
-import './Contact.css';
-
-function Contact(){
-    return (
-        <>
-            <Header />
-            <section className="contact" id="contact">
-
-                <h1 className="heading"> <span>contate</span> nos </h1>
-
-                <div className="row">
-
-                    <iframe title="map" className="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3643.1649489867455!2d-52.38915795000186!3d-24.060495186021026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ed756613064859%3A0xc12ba615c30491ed!2sUTFPR%20Universidade%20Tecnol%C3%B3gica%20Federal%20Do%20Paran%C3%A1!5e0!3m2!1spt-BR!2sbr!4v1649035605632!5m2!1spt-BR!2sbr" allowfullscreen="" loading="lazy"></iframe>
-
-
-                    <form action="">
-                        <h3>Email para contato</h3>
-                        <div className="inputBox">
-                            <span className="fas fa-envelope"></span>
-                            <input type="email" placeholder="utfome@gmail.com.br"/>
-                        </div>
-                    </form>
-
-                </div>
-
-            </section>
-            <Footer />
-        </>
-    );
+import Footer from "../../layout/footer/Footer";
+import Header from "../../layout/header/Header";
+import "./Contact.css";
+
+function Contact() {
+  return (
+    <>
+      <Header />
+      <section className="contact" id="contact">
+        <h1 className="heading">
+          {" "}
+          <span>contate</span>-nos{" "}
+        </h1>
+
+        <div className="row">
+          <iframe
+            title="map"
+            className="map"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3643.1649489867455!2d-52.38915795000186!3d-24.060495186021026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ed756613064859%3A0xc12ba615c30491ed!2sUTFPR%20Universidade%20Tecnol%C3%B3gica%20Federal%20Do%20Paran%C3%A1!5e0!3m2!1spt-BR!2sbr!4v1649035605632!5m2!1spt-BR!2sbr"
+            allowfullscreen=""
+            loading="lazy"
+          ></iframe>
+
+          <form action="">
+            <h3>Email para contato</h3>
+              <div className="inputBox">
+                <span className="fas fa-envelope"></span>
+                <input type="email" placeholder="utfome@gmail.com.br" />
+              </div>
+              <div className="inputBox descricao">
+                <input type="text" placeholder="Descrição" />
+              </div>
+          </form>
+        </div>
+      </section>
+      <Footer />
+    </>
+  );
 }
 
-export default Contact;
+export default Contact;