Api integration on Homepage

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.0",
+    "rawger": "^1.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",

src/App.js

@@ -1,9 +1,14 @@
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import './Normilaze.css'
-import Homepage from './Pages/homepage';
-import capa from './Assets/Capa the witcher 3.png';
-import ProfilePage from './Pages/Profile';
+import { ProtectedRoute } from './Routes/protected.route';
+//import './Normilaze.css';
+import './Fonts.css';
 import './Components/scrollbar/style.css';
+import Homepage from './Pages/Homepage';
+import ProfilePage from './Pages/Profile'
+import Login from './Pages/Login/index';
+import Register from './Pages/Register';
+import ChangePassword from './Pages/Change Password';
+import { Error } from './Pages/Error';
 
 
 function App() {
@@ -13,10 +18,17 @@ function App() {
 
     <div className='main'>
       <Router>
-
         <Routes>
-          <Route  path='/' element={<Homepage banner={capa} />} />
-          <Route  path='/Profile' element={<ProfilePage />} />
+          <Route  path='/' element={<Homepage />} />
+          <Route path='/profile' element={<ProtectedRoute />} >
+            {/* Profile page is only accessible if user is logged in */}
+            <Route path='/profile' element={<ProfilePage />} />
+            {/* Profile page is only accessible if user is logged in */}
+          </Route>
+          <Route  path='/login' element={<Login />} />
+          <Route path='/register' element={<Register/>} />
+          <Route path='/changepassword' element={<ChangePassword/>} />
+          <Route  path='*' element={<Error />} />
         </Routes>
       </Router>
     </div>

src/Components/NavBar/index.js

@@ -0,0 +1,47 @@
+import { useNavigate } from 'react-router-dom'
+import brasao from './../../Images/brasaoleao.png';
+import menu from './../../Images/Sanduiche.svg';
+import perfil from './../../Images/Perfil.svg';
+import './style.css';
+
+function Navbar(){
+
+    const redirect = useNavigate()
+
+    return(
+        <>
+            <div className="tudaokrl">
+                <div className="conteudo">
+                    <div className="left-box">
+                        <button type="menu"> <img src={menu} />Menu</button>
+                    </div>
+
+                    <div className="brasao">
+                        <a href="" onClick={() => {redirect('/')}}>
+                            <img src={brasao} alt="logofeudo"/>
+                        </a>
+                    </div>
+
+                    <div className="right-box">
+                        <div className="rb-input">
+                            <input type="text"  placeholder="Pesquisar.."  />
+                        </div>
+
+                        <div className="rb-perfil">
+                            <a href="">
+                                <img src={perfil} alt="logoperfil"/>
+                            </a>
+                        </div>
+
+                        <div className="rb-button">
+                            <button type="button" onClick={() => {redirect('/login')}} >Login</button>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Navbar;

src/Components/NavBar/style.css

@@ -0,0 +1,116 @@
+.tudaokrl{
+    position: relative;
+    background: #1B1B1B;
+    height: 65px;
+}
+
+.conteudo{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    padding-left: 58px;
+    padding-right: 58px;
+}
+
+.brasao{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+.brasao img{
+    width: 70px;
+}
+
+.left-box button{
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 23px;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    cursor: pointer;
+
+    color: #FFFFFF;
+    padding: 0;
+    background: none;
+    border: none;
+}
+
+.left-box img{
+    width: 20px;
+    margin-right: 10px;
+}
+
+.right-box{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.rb-button{
+    padding-left: 24px;
+}
+
+.rb-perfil{
+    padding-left: 24px;
+}
+
+.rb-perfil img{
+    width: 20px;
+}
+
+.right-box input{
+    background-image: url(../../Images/Lupinha.svg);
+    background-position: 0px 0px;
+    background-repeat: no-repeat;
+    background-color: #1B1B1B;
+    color: #1B1B1B;
+
+    width: 0px;
+    transition: all 0.4s ease-in-out;
+    height: 0px;
+
+    font-size: 16px;
+    padding: 15px 15px;
+    border: none;
+}
+
+.right-box input:focus{
+    width: 200px;
+    color: #FFFFFF;
+    background-image: none;
+    transition: all 0.4s ease-in-out;
+}
+
+.right-box button{
+    width: 90px;
+    height: 34.53px;
+    left: 1282px;
+    top: 12px;
+
+    cursor: pointer;
+
+    background: #410088;
+    border-radius: 29px;
+    border: none;
+
+    font-family: Montserrat;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 20px;
+    color: #FFFFFF;
+}
+
+.right-box button:hover{
+    background: #2B0D5F;
+}
+
+.right-box button:active{
+    background: #410088;
+}

src/Components/basic input/style.css

@@ -3,6 +3,7 @@
     padding: 0;
     margin: 0;
     box-sizing: border-box;
+    font-family: 'Montserrat';
 }
 
 .inputin{