najibullahjafari
diff --git a/‎package-lock.json
+68 b/‎package-lock.json
+68
diff --git a/‎package.json
+2 b/‎package.json
+2
diff --git a/‎public/index.html
+8-3 b/‎public/index.html
+8-3
diff --git a/‎src/App.css
-3 b/‎src/App.css
-3
diff --git a/‎src/App.js
+2-4 b/‎src/App.js
+2-4
diff --git a/‎src/AppRouter.js
+33 b/‎src/AppRouter.js
+33
diff --git a/‎src/componenet/calculator.js
-90 b/‎src/componenet/calculator.js
-90
diff --git a/‎src/component/Home.js
+25 b/‎src/component/Home.js
+25
@@ -7,9 +7,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "big.js": "^6.2.1",
+    "bootstrap": "^5.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4"
 
@@ -3,21 +3,26 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- Bootstrap CSS CDN -->
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    
+
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-   
   </body>
 </html>
@@ -1,11 +1,9 @@
-import MyComponent from './componenet/calculator';
-import Quote from './componenet/fetchquotes';
+import AppRouter from './AppRouter';
 
 function App() {
   return (
     <div className="page-con">
-      <MyComponent />
-      <Quote />
+      <AppRouter />
     </div>
   );
 }
 
@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  BrowserRouter as Router, Route, Link, Routes,
+} from 'react-router-dom';
+import Home from './component/Home';
+import Calculator from './component/calculator';
+import QuoteComponent from './component/fetchquotes';
+
+const AppRouter = () => (
+  <Router>
+    <nav className="navbar">
+      <h1>Math Magicicians</h1>
+      <ul className="list-con ">
+        <li className="">
+          <Link to="/">Home</Link>
+        </li>
+        <li className="">
+          <Link to="/calculator">Calculator</Link>
+        </li>
+        <li className="">
+          <Link to="/quote">Quote</Link>
+        </li>
+      </ul>
+    </nav>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/calculator" element={<Calculator />} />
+      <Route path="/quote" element={<QuoteComponent />} />
+    </Routes>
+  </Router>
+);
+
+export default AppRouter;
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const Home = () => (
+  <>
+    <div className="home-con">
+      <h2>Welcome to the Home page!</h2>
+      <p>
+        In other words, the message is to prioritize meaningful relationships
+        and fully invest in being an essential part of someone else life.
+        Emphasizing the brevity of life, the phrase urges people to cherish and
+        value deep connections with others, making a positive impact on their
+        lives and being fully present in their journey.
+      </p>
+      <p>
+        In other words, the message is to prioritize meaningful relationships
+        and fully invest in being an essential part of someone elses life.
+        Emphasizing the brevity of life, the phrase urges people to cherish and
+        value deep connections with others, making a positive impact on their
+        lives and being fully present in their journey.
+      </p>
+    </div>
+  </>
+);
+
+export default Home;