Signup page routing from button

Workly/src/components/Navbar.tsx

@@ -6,9 +6,9 @@ const Navbar = () => {
     <nav className="navbar">
       <a href="/" className='Title'>WORKLY.</a>
       <ul>
-        <li><a href="/">Home</a></li>
-        <li><a href="/">About</a></li>
-        <li><a href="/">Contact</a></li>
+        <li><Link to="/">Home</Link></li>
+        <li><Link to="/about">About</Link></li>
+        <li><Link to="/contact">Contact</Link></li>
       </ul>
     </nav>
   );

Workly/src/pages/Home/Home.Modules.css

@@ -53,6 +53,7 @@
 {
   margin-top: 1rem;
   background-color: black;
+  color: white;
   border: none;
   height: 2rem;
   width: 8rem;

Workly/src/pages/Home/Home.tsx

 import "./home.modules.css";
+import { useNavigate } from 'react-router-dom';
 
 const Home = () => {
+    const navigate = useNavigate();
+
     return (
         <>
             <div className="Introduction">
@@ -15,7 +18,9 @@ const Home = () => {
                     <div className="Description">
                         <p><span className="bold-text">WORKLY.</span> streamlines the job application process by bringing everything into one central system, making it easier for both applicants and employers.</p>
                     </div>
-                    <button class="Start">START NOW<span class="ion--paper-plane"></span></button>
+                    <button className="Start" onClick={() => navigate('/signup')}>
+                        START NOW<span className="ion--paper-plane"></span>
+                    </button>
                 </div>
                 <div className="Con3"></div>
             </div>

Workly/src/pages/Signup/Signup.tsx

+import "./Signup.modules.tsx"
+
+const Signup = () => {
+    return <h1>Signup</h1>;
+  };
+  
+  export default Signup;
\ No newline at end of file

Workly/src/routes/AppRoutes.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import Home from '../pages/Home/Home';
 import About from '../pages/About/About';
 import NotFound from '../pages/NotFound/NotFound';
+import Signup from '../pages/Signup/Signup';
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
       <Route path="/" element={<Home />} />
       <Route path="/about" element={<About />} />
       <Route path="*" element={<NotFound />} />
+      <Route path="/signup" element={<Signup />} />
     </Routes>
   );
 }