router updated to v@6 and signup form added

package.json

@@ -8,8 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "^3.4.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -34,11 +34,71 @@
   font-size: 100px;
 }
 
-.sign-up {
+.sign-up-card {
   background-image: url('/images/img-8.jpg');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   color: #fff;
+  height: 90vh;
+padding: 2rem;
   font-size: 100px;
 }
+
+.sign-up-form {
+  border-radius: 7px;
+  border: 1px solid grey;
+  max-width: 600px;
+  width: 30%;
+  margin: 0 auto;
+  background-color: white;
+  padding: 20px;
+  box-shadow: 0 2px 4px 4px rgba(0,0,0,0.09);
+  /* margin-top: 2rem; */
+}
+
+.sign-up-form h2 {
+  font-size: 30px;
+  color:black;
+  font-weight: 500;
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.each-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+  font-weight: 100;
+}
+
+.each-input label {
+  font-size: 18px;
+  color: black;
+}
+
+.each-input input {
+  font-size: 20px;
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid grey;
+
+}
+
+.submit-button button{
+  background-color:black;
+  color: white;
+  border-radius: 40rem;
+  width: 60%;
+  margin: 0 auto;
+  font-size: 25px;
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.submit-button {
+  text-align: center;
+  margin: 0 auto;
+}

src/App.js

@@ -1,24 +1,23 @@
-import React from 'react';
-import Navbar from './components/Navbar';
-import './App.css';
-import Home from './components/pages/Home';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import Services from './components/pages/Services';
-import Products from './components/pages/Products';
-import SignUp from './components/pages/SignUp';
+import React from "react";
+import Navbar from "./components/Navbar";
+import "./App.css";
+import Services from "./components/pages/Services";
+import Products from "./components/pages/Products";
+import SignUp from "./components/pages/SignUp";
+import { Routes, Route } from "react-router-dom";
+import Home from "./components/pages/Home";
 
 function App() {
   return (
     <>
-      <Router>
-        <Navbar />
-        <Switch>
-          <Route path='/' exact component={Home} />
-          <Route path='/services' component={Services} />
-          <Route path='/products' component={Products} />
-          <Route path='/sign-up' component={SignUp} />
-        </Switch>
-      </Router>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/services" element={<Services />} />
+        <Route path="/products" element={<Products />} />
+        <Route path="/sign-up" element={<SignUp />} />
+        <Route path='*' element={<h1>Not Found</h1>} />
+      </Routes>
     </>
   );
 }

src/components/Navbar.js

@@ -30,7 +30,7 @@ function Navbar() {
         <div className='navbar-container'>
           <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
             TRVL
-            <i class='fab fa-typo3' />
+            <i className='fab fa-typo3' />
           </Link>
           <div className='menu-icon' onClick={handleClick}>
             <i className={click ? 'fas fa-times' : 'fas fa-bars'} />

src/components/pages/SignUp.js

@@ -1,6 +1,68 @@
-import React from 'react';
-import '../../App.css';
+import React, { useState } from "react";
+import "../../App.css";
+import { Button } from "../Button";
 
 export default function SignUp() {
-  return <h1 className='sign-up'>LIKE & SUBSCRIBE</h1>;
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const [details, setDetails] = useState(true);
+
+  const submitHandler = (e) => {
+    e.preventDefault();
+    if (name && email && password) {
+      setDetails(true);
+      const details = {
+        name,
+        email,
+        password,
+      };
+
+      console.log(details);
+    } else {
+      setDetails(false);
+    }
+  };
+
+  return (
+    <div className="sign-up-card">
+      <form className="sign-up-form" onSubmit={submitHandler}>
+        <h2>Sign Up form</h2>
+        <div className="each-input">
+          <label>Name</label>
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            type="text"
+          />
+        </div>
+        <div className="each-input">
+          <label>Email</label>
+          <input
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            type="text"
+          />
+        </div>
+        <div className="each-input">
+          <label>Password</label>
+          <input
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            type="text"
+          />
+        </div>
+        {!details && (
+          <h3 style={{ color: "red", fontSize: "12px" }}>
+            fill proper details
+          </h3>
+        )}
+
+        <div className="submit-button">
+          <button>Sign Up</button>
+        </div>
+      </form>
+    </div>
+  );
 }

src/index.js

@@ -1,5 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+
+  document.getElementById("root")
+);