added login page template

package.json

@@ -8,7 +8,12 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "react-responsive-carousel": "^3.2.23",
+    "react-router-dom": "^6.22.1",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "sass": "^1.71.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,49 @@
-import logo from './logo.svg';
-import './App.css';
+ import React from "react";
+ import Header from "./components/Header";
+ import Home from "./components/Home"; 
+ import Footer from "./components/Footer";
+ import {BrowserRouter as Router ,Routes, Route} from "react-router-dom";
+ import QuestionForm from "./components2/QuestionForm";
+ import Memory from "./components2/Memory";
+ import Sleep from "./components2/Sleep";
+ import YourBody from "./components2/YourBody";
+ import Digestion from "./components2/Digestion";
+ import Pain from "./components2/Pain";
+ import Relationship from "./components2/Relationship";
+ import Skin from "./components2/Skin";
+ import ResultPage from "./components2/ResultPage";
+ import Login from "./components/Login";
+ import Register from "./components/Register";
+ import "./styles/App.scss"; 
+ import "./styles/header.scss";
+ import "./styles/login.scss";
+ import "./styles/register.scss";
+ import "./styles/header.scss";
+ import "./styles/home.scss";
+ import "./styles/Footer.scss";
+ import "./styles2/questionform.css";
+ import "./styles/mediaquries.scss";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Router>
+      <Header/>
+      <Routes>
+        <Route path="/" element = {<Home/>}/>  
+        <Route path="/login" element = {<Login/>}/>  
+        <Route path="/register" element = {<Register/>}/>  
+        <Route path="/question" element = {<QuestionForm/>}/> 
+        <Route path="/memory" element = {<Memory/>}/> 
+        <Route path="/sleep" element = {<Sleep/>}/> 
+        <Route path="/yourbody" element = {<YourBody/>}/> 
+        <Route path="/digestion" element = {<Digestion/>}/> 
+        <Route path="/pain" element = {<Pain/>}/> 
+        <Route path="/relationship" element = {<Relationship/>}/> 
+        <Route path="/skin" element = {<Skin/>}/> 
+        <Route path="/result" element = {<ResultPage/>}/> 
+      </Routes>
+      <Footer/>
+    </Router>
   );
 }
 

src/components/Footer.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { AiOutlineGithub, AiOutlineInstagram, AiOutlineLinkedin, AiOutlineMail, AiOutlineTwitter, AiOutlineWhatsApp } from "react-icons/ai";
+const Footer = () => {
+  return (
+    <footer>
+      <div className="lefty">
+        <h2>MentalHealth</h2>
+        <p>@all rights reserved</p>
+        <h3>Follow us on </h3>
+        <p>[email protected]</p>
+      </div>
+      <div className="righty">
+        <AiOutlineMail />
+        <AiOutlineWhatsApp />
+        <AiOutlineTwitter/>
+        <AiOutlineGithub/>
+        <AiOutlineInstagram/>
+        <AiOutlineLinkedin/>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Header.jsx

@@ -0,0 +1,22 @@
+import React from 'react'; 
+// import {Link} from "react-router-dom";
+import {HashLink} from "react-router-hash-link";
+
+const Header = () => {
+  return (
+    <nav>
+        <h1>MentalHealth</h1>
+        <main>
+            <HashLink to = {"/#home"}>Home</HashLink>
+            <HashLink to = {"/#blogs"}>Blogs</HashLink>
+            <HashLink to = {"/question"}>Your Score</HashLink>
+            <HashLink to = {"/#about"}>About</HashLink>
+            <HashLink to = {"/#contact"}>Contact</HashLink>
+            <HashLink id='register' to = {"/register"}>Register</HashLink>
+            <HashLink id='login' to = {"/login"}>Login</HashLink>
+        </main>
+    </nav>
+  )
+}
+
+export default Header;