finalizado2

src/App.js

@@ -22,7 +22,7 @@ function App() {
       <Route path="filme/:id" element={<Filme />} />
       <Route path='/pesquisa' element={<Pesquisa/>}/>
       <Route path='/populares' element={<Populares/>}/>
-
+      <Route path='/*' element={<Login />}/>
     </Routes>
 
 )};

src/Login/login.css

@@ -1,5 +1,5 @@
 .back{
-    background-image: url(../imagens/background.png);
+    background-image: url(../imagens/background.jpg);
     min-height: 100vh;
     display: flex;
     position: absolute;
@@ -9,14 +9,7 @@
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     overflow: hidden;
 }
-.logo{
-    max-width: 30%;
-    max-height: 20%;
-    position: absolute;
-    top: 12%;
-    left: 12%;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-}
+
 
 .texto{
     text-shadow: 0px 4px 4px rgba(1, 1, 1, 1.50);
@@ -26,7 +19,6 @@
     left: 12.7%;
     word-break: break-all;
     white-space: nowrap;
-    font-size: 1.1vw;
 }
 
 .login{
@@ -100,5 +92,10 @@ input::placeholder {
 #p2{
     color: rgb(211, 207, 207);
     font-size: 15px;
-    text-decoration: none;
+}
+
+#link{
+    color: rgb(30, 36, 127);
+    font-size: 15px;
+
 }

src/Login/login.js

@@ -22,12 +22,12 @@ export default function Login() {
             <h2 id='texto'>Fazer login</h2>
             <p id='p'>Olá, bem-vindo ao ReelsReview!</p>
             <div className='emailesenha'>
-                <input id="email" type="email" placeholder="E-mail" value={user} onChange={(e) => setUser(e.target.value)}/>
+                <input id="email" type="email" placeholder="Digite seu e-mail" value={user} onChange={(e) => setUser(e.target.value)}/>
                 <input id="senha" type="password" placeholder="Digite sua senha" value={password} onChange={(e) => setPassword(e.target.value)}/>
             </div>
             <button  id='botao' onClick={handleLogin}>Entrar</button><br/>
 
-            <p id='p2'>Não tem conta? {<Link to='/cadastro'>Criar conta.</Link>}</p>
+            <p id='p2'>Não tem conta? {<Link to='/cadastro' id='link'>Criar conta.</Link>}</p>
 
         </div>
     </div>

src/cadastro/cadastro.css

@@ -95,5 +95,9 @@
 #pc2{
     font-size: 15px;
     color: rgb(255, 255, 255);
-    text-decoration: none;
+}
+
+#link{
+    font-size: 15px;
+    color: rgb(30, 36, 127);
 }

src/cadastro/cadastro.js

@@ -27,7 +27,6 @@ export default function Cadastro(){
             <div className="cadastro">
                 <h2 id="tituloc">Criar conta</h2>
                 <h4 id="pc">Preencha os campos com seus dados:</h4>
-
                 <div className="nomesobrenome">
                     <input id="nome" type='text' placeholder='Nome' value={user} onChange={(e) => setUser(e.target.value)}/>
                     <input id="sobrenome" type='text' placeholder='Sobrenome' value={sobreNome} onChange={(e) => setSobreNome(e.target.value)}/>
@@ -37,9 +36,8 @@ export default function Cadastro(){
                 <input id="senhac" type='password' placeholder='Senha' value={password} onChange={(e) => setPassword(e.target.value)}/>
                 <br/>
                 <button id='cadastrar' onClick={handleCadastro}>Cadastrar</button><br/>
-                <p id='pc2'>Já tem conta? <Link to={"/"}>Fazer login.</Link></p>
+                <p id='pc2'>Já tem conta? <Link to={"/"} id="link">Fazer login.</Link></p>
             </div>
-
         </div>
 
     );

src/components/NavBar/NavBar.css

@@ -1,9 +1,9 @@
 .NavBar{
     display: flex;
-    background-color: rgb(255, 0, 0);
+    background-color: rgb(112, 20, 20);
     justify-content: space-between;
     align-items: center;
-    padding: .1rem 1rem;
+    padding: .01rem 1rem;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.10);
 }
@@ -52,7 +52,7 @@
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 #populares{
-    background-color: rgb(255, 0, 0);
+
     border: 2px solid rgb(0, 0, 0);
     border-radius: 5px;
     color: rgb(255, 255, 255);
@@ -77,9 +77,10 @@
 }
 
 #sair{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     text-decoration: none;
     color: rgb(255, 255, 255);
-    font-size: 25px;
+    font-size: 20px;
     transition: 0.4s;
 }
 #sair:hover{

src/filme/filme.css

@@ -6,10 +6,10 @@ body{
 }
 
 .filme-page{
-    background-color: rgb(39, 2, 2);
+    background-color: rgb(16, 13, 13);
     display: flex;
     flex-direction: column;
-    padding: 0;
+    padding: 20px;
     color: white;
     margin: 0 auto;
     text-align: center;
@@ -20,16 +20,16 @@ body{
 }
 .info{
     position: relative;
-    text-align: left;
+    text-align: center;
 }
 #descricao{
     position: relative;
-    text-align: left;
+    text-align: center;
 
 }
 
 .infodescricao{
-    text-align: center;
+    text-align: left;
     max-width: 600px;
     position: relative;
     line-height: 1.4rem;

src/filme/filme.js

@@ -45,20 +45,20 @@ function Filme() {
         <FilmesCard filme={filme} showLink={false}/>
         <p className="tagline">{filme.tagline}</p>
         <div className="info">
-        <h3>Orçamento: </h3>
-        <p>{formatCurrency(filme.budget)}</p>
+          <h3>Orçament:</h3>
+          <p>{formatCurrency(filme.budget)}</p>
         </div>
         <div className="info">
-        <h3>Receita: </h3>
-        <p>{formatCurrency(filme.revenue)}</p>
+          <h3>Revenue: </h3>
+          <p>{formatCurrency(filme.revenue)}</p>
         </div>
         <div className="info">
-        <h3>Duração: </h3>
-        <p>{filme.runtime} minutos</p>
+          <h3>Duration: </h3>
+          <p>{filme.runtime} minutos</p>
         </div>
         <div className="infodescricao">
-        <h3 id="descricao">Descrição: </h3>
-        <p>{filme.overview}</p>
+          <h3 id="descricao">Description: </h3>
+          <p>{filme.overview}</p>
         </div>
         </>
         )}