Implemented Routes and Pages

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "19.0.0-rc-8b08e99e-20240713",
-    "react-dom": "19.0.0-rc-8b08e99e-20240713"
+    "react-dom": "19.0.0-rc-8b08e99e-20240713",
+    "react-router-dom": "^6.26.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

src/index.css

@@ -0,0 +1,16 @@
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;  
+}
+
+body {
+    background-color: #0e0c16;
+    color: #ececec;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+a{
+  text-decoration: none;
+  color: inherit;
+}

src/layouts/dashboardLayout/DashBoardLayout.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import './dashboardLayout.css';
+
+const DashBoardLayout = () => {
+  return (
+    <div className="dashboard-layout">
+      <div className="menu">MENU</div>
+      <div className="content">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default DashBoardLayout;

src/layouts/rootLayout/RootLayOut.jsx

@@ -0,0 +1,21 @@
+import { Link, Outlet } from "react-router-dom";
+import "./rootLayout.css";
+
+
+const RootLayOut = () => {
+    return (
+        <div className="rootLayout">
+            <header>
+               <Link>
+                 <img src="/logo.png" alt="logo"/>
+                 <span>IntellectBot</span>
+               </Link>
+            </header>
+            <main>
+                <Outlet />
+            </main>
+        </div>
+    );
+};
+
+export default RootLayOut;

src/main.jsx

@@ -1,10 +1,40 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import HomePage from './routes/homePage/HomePage.jsx';
+import DashBoard from './routes/dashboardPage/DashboardPage.jsx';
+import ChatPage from './routes/chatPage/ChatPage.jsx';
+import RootLayOut from './layouts/rootLayout/RootLayOut.jsx';
+import DashBoardLayout from './layouts/dashboardLayout/DashBoardLayout.jsx';
+
+const router = createBrowserRouter([
+  {
+   element: <RootLayOut />,
+    children: [
+      {
+        path: '/',
+        element: <HomePage />,
+      },
+      {
+        element: <DashBoardLayout />,
+        children: [
+          {
+            path: '/dashboard',
+            element: <DashBoard />,
+          },
+          {
+            path: '/dashboard/chats/:id',
+            element: <ChatPage />,
+          }
+        ]
+      },
+    ] 
+  },
+]);
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);

src/routes/chatPage/ChatPage.jsx

@@ -0,0 +1,11 @@
+import './chatPage.css';
+
+const ChatPage = () => {
+  return (
+    <div className="chat-page">
+      <h1>Chat Page</h1>
+    </div>
+  );
+};
+
+export default ChatPage;

src/routes/dashboardPage/DashboardPage.jsx

@@ -0,0 +1,11 @@
+import "./dashboardPage.css";
+
+const DashboardPage = () => {
+    return (
+        <div className="dashboard-page">
+            <h1>Dashboard Page</h1>
+        </div>
+    );
+};
+
+export default DashboardPage;

src/routes/homePage/HomePage.jsx

@@ -0,0 +1,10 @@
+import './homePage.css';
+
+const HomePage = () => {
+  return (
+    <div className="homepage">
+      <h1>Homepage</h1>
+    </div>
+  );
+};
+export default HomePage;

src/routes/signInPage/SignInPage.jsx

@@ -0,0 +1,11 @@
+import './signInPage.css';
+
+const SignInPage = () => {
+  return (
+    <div className="sign-in">
+      <h1>Sign In Page</h1>
+    </div>
+  );
+};
+
+export default SignInPage;

src/routes/signUpPage/SignUpPage.jsx

@@ -0,0 +1,11 @@
+import './signUpPage.css';
+
+const SignUpPage = () => {
+  return (
+    <div className="sign-up-page">
+      <h1>Sign Up Page</h1>
+    </div>
+  );
+};
+
+export default SignUpPage;