Server connected with frontend!

components/common/Header/Header.js

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import Navbar from '../Navbar';
 import { IconContainer, IconsDiv, StyledHeader } from './HeaderStyles';
 import { getRandomBackground, icons } from './config';
-
+ 
 const Header = (props) => {
   const { image, text } = props;
   return (

components/common/Navbar.js

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import styles from '@styles/Navbar.module.css';
 import { useState, useEffect, useRef } from 'react';
 import Image from 'node_modules/next/image';
+import { FaKey } from 'react-icons/fa';
 
 const Navbar = () => {
   const checkboxRef = useRef();
@@ -368,6 +369,14 @@ const Navbar = () => {
               Contact Us
             </a>
           </li>
+          <li>
+          <a
+              onClick={() => router.push('/Login')}
+              className="flex py-2 px-2 text-white hover:bg-sky-400 hover:text-black rounded-lg transition duration-500"
+            >
+              <FaKey />
+            </a>
+          </li>
         </ul>
       </nav>
     </>

package.json

@@ -20,7 +20,7 @@
     "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
     "mongoose": "^7.2.1",
-    "next": "^12.3.3",
+    "next": "^12.3.4",
     "next-connect": "^1.0.0",
     "next-images": "^1.8.5",
     "prettier": "^2.8.1",

components/Login.js → pages/Login.js

@@ -10,6 +10,7 @@ import {
 } from "node_modules/@fortawesome/free-solid-svg-icons/index";
 import { useContext, useState } from "react";
 import { Store } from "utils/Store/Store";
+import Link from 'next/link'
 
 const Login = () => {
   const { state, dispatch } = useContext(Store);
@@ -95,6 +96,10 @@ const Login = () => {
               <span>Forgot Password ?</span>
             </label>
             <button>Sign In</button>
+            <h1 className="font-bold text-lg p-4">Or</h1>
+           <Link href='/Signup'>
+              <a className="font-sans text-sm  font-bold text-white hover:italic bg-gradient-to-r from-indigo-800 to-purple-600 rounded-md px-24 py-1">Signup</a>
+            </Link>
           </form>
         </div>
       </main>

pages/Signup.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Signup = () => {
+  return (
+    <div>Signup</div>
+  )
+}
+
+export default Signup