Implemented sign up form

frontend/src/Components/App.js

@@ -8,6 +8,7 @@ import NavBar from './NavBar';
 import NotFound from '../Pages/NotFound'
 import { BrowserRouter, Switch, Routes , Route} from 'react-router-dom'
 import SignUp from '../Pages/SignUp';
+import ForgotPassword from '../Pages/ForgotPassword';
 
 function App() {
   return (
@@ -33,6 +34,9 @@ function App() {
         <Route exact path='/SignUp'>
           <SignUp />  
         </Route>
+        <Route exact path='/ForgotPassword'>
+          <ForgotPassword />  
+        </Route>
         <Route>
           <NotFound />  
         </Route>

frontend/src/Components/SignUpForm.js

+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const SignUpForm = () => {
+    const[formData, setFormData] = useState({
+        firstName: '',
+        lastName: '', 
+        email: '', 
+        password: '',
+        successMsg: false,
+        errorMsg: false
+    })
+
+    const handleChange = (evt) => {
+        setFormData({
+            ...formData,
+            [evt.target.name]: evt.target.value,
+        })
+
+    }
+
+    const handleSubmit = (evt) => {
+        evt.preventDefault()
+    }
+
+    return (
+        <div className='flex mt-20 items-center justify-center'>
+            <div className='bg-white p-12 rounded-md w-1/3 shadow-lg'>
+                <h1 className='text-black font-montserrat font-extrabold text-3xl mb-12 ml-3'>Tickcrypt</h1>
+                <form className='signup-form space-y-5 px-100' onSubmit={handleSubmit}>
+                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='firstName' value={formData.firstName} type='text' placeholder='First Name' onChange={handleChange}></input>
+                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='lastName' value={formData.lastName} type='text' placeholder='Last Name' onChange={handleChange}></input>
+                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='email' value={formData.email} type='email' placeholder='Email Address' onChange={handleChange}></input>
+                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='password' value={formData.password} type='password' placeholder='Password' onChange={handleChange}></input>
+                    <button className='py-4 px-14 text-white bg-purple-500 hover:bg-purple-400 font-montserrat font-medium rounded-full' type='submit'>Sign Up</button>
+                    <div className='mt-6 '>
+                        <p className='forgot-password'>
+                            <Link to='/ForgotPassword' className='text-gray-400'>Forgot Password?</Link>
+                        </p>
+                        <div className='mt-4'>
+                            <p className='text-gray-400 inline'>
+                                Already have a Tickcrypt account?
+                            </p>
+                            <Link to='/Login' className=' pl-2 text-purple-500'>Sign In</Link>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}
+
+export default SignUpForm;
\ No newline at end of file

frontend/src/Pages/ForgotPassword.js

+import React from 'react';
+
+const ForgotPassword = () => {
+    return (
+        <div>
+            forgot password page
+        </div>
+    );
+};
+
+export default ForgotPassword;
\ No newline at end of file

frontend/src/Pages/SignUp.js

 import React from 'react';
+import SignUpForm from '../Components/SignUpForm';
 
 const SignUp = () => {
     return (
-        <div>
-            sign up on this page
-        </div>
+        <>
+            <SignUpForm />
+        </>
     );
 };