Created LoginPage layout and HomePage file

package.json

@@ -6,10 +6,12 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "primeflex": "^3.3.0",
     "primeicons": "^6.0.1",
     "primereact": "^9.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,6 +1,6 @@
-import logo from './logo.svg';
 import './App.css';
 import { Button } from 'primereact/button';
+import "primeflex/primeflex.css";
 
 function App() {
   return (

src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
 import reportWebVitals from './reportWebVitals';
 //theme
 import "primereact/resources/themes/lara-light-indigo/theme.css";
@@ -11,11 +10,25 @@ import "primereact/resources/primereact.min.css";
 
 //icons
 import "primeicons/primeicons.css";
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import HomePage from "./pages/HomePage";
+
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <BrowserRouter>
+            <Routes>
+                <Route path="/" element={<LoginPage />} />
+                <Route path="/home" element={<HomePage />} />
+                    {/*<Route path="blogs" element={<Blogs />} />*/}
+                    {/*<Route path="contact" element={<Contact />} />*/}
+                    {/*<Route path="*" element={<NoPage />} />*/}
+
+            </Routes>
+        </BrowserRouter>
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/HomePage.js

@@ -0,0 +1,7 @@
+export default function () {
+    return (
+        <>
+            dadad
+        </>
+    )
+}

src/pages/LoginPage.js

@@ -0,0 +1,35 @@
+import {Button} from "primereact/button";
+import {InputText} from "primereact/inputtext";
+import {useNavigate} from "react-router-dom";
+
+export default function () {
+    const navigate = useNavigate();
+
+    function onLoginClick() {
+
+        return navigate("/home")
+    }
+
+    return (
+        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh'}}
+             className="bg-orange-500">
+            <div className="surface-card p-4 shadow-2 border-round flex flex-column w-3 ">
+                <div className="text-3xl font-medium text-900 mb-2">Login Panel</div>
+                <div className="font-medium text-500 mb-3">Login using your credentials</div>
+
+                <span className="p-input-icon-left py-1 ">
+                        <i className="pi pi-user"/>
+                        <InputText placeholder="Username" className="min-w-full max-w-full"/>
+                </span>
+                <span className="p-input-icon-left py-1" >
+                        <i className="pi pi-key"/>
+                        <InputText type="password" placeholder="Password" className="min-w-full max-w-full"/>
+                </span>
+                <div className="flex justify-content-end pt-2">
+                    <Button onClick={onLoginClick}>Login</Button>
+                </div>
+
+            </div>
+        </div>
+    )
+}