add homepage

package.json

@@ -39,6 +39,7 @@
     ]
   },
   "devDependencies": {
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "tailwindcss": "^3.3.5"
   }
 }

src/App.js

@@ -1,5 +1,6 @@
 import Login from "./Components/login"
 import Signup from "./Components/SignUp"
+import Navbar from "./Components/Navbar"
 import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
 
 import './App.css';
@@ -9,11 +10,13 @@ function App() {
 
    <Router>
     <Routes>
+    <Route path="/" element={<Navbar/>}></Route>
       <Route exact path="/" element={<Login/>} ></Route>
       <Route exact path="/SignUp" element={<Signup/>}></Route>
 
     </Routes>
    </Router>
+
 
   );
 }

src/Components/Navbar.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import  capLogo  from './Images/logo.svg'
+import rightimg from './Images/Right-img.svg'
+const menuLinks = [
+  { name: "How it works", link: "#works" },
+  { name: "Features", link: "#features" },
+  { name: "About Us", link: "#about" },
+  { name: "Login", link: "#loginpage" },
+];
+const Navbar = () => {
+  return (
+    <>
+      <nav>
+      <div className="flex items-center justify-between">
+        <div className="mx-7">
+        <img src={capLogo} ></img>
+
+        </div>
+        <div>
+          <ul className="flex items-center gap-1 py-2 text-lg">
+            {menuLinks?.map((menu, i) => (
+              <li key={i} className="px-6 hover:text-[#FCC822]">
+                <a href={menu?.link}>{menu?.name}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div
+
+        >
+
+        </div>
+        <div>
+
+        </div>
+      </div>
+    </nav>
+    <div className='main'>
+    <div className='container'>
+
+      <h4 className="text-4xl font-bold">
+           Learn <span className="text-cyan-600">
+           <br/></span>
+            <span>New concepts
+           </span><br/>
+           for each question
+          </h4>
+          <p>We help you prepare for exams and quizes</p>
+          <div className='Btn-container'>
+         <button className='mt-8 w-28 h-12 bg-[#FCC822]'>Start Solving</button>
+          <img src={rightimg}></img>
+
+
+          </div>
+    </div>
+
+    </div>
+  </>
+  );
+}
+
+export default Navbar;

src/index.css

@@ -11,3 +11,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+