{
-
-
+ {!isAuthenticated && (
+ <>
+
+
+
+
+
+
+
+ )}
+ {isAuthenticated && (
+
+ )}
diff --git a/src/components/PricingPage.jsx b/src/components/PricingPage.jsx
index eaaeb46..17f853d 100644
--- a/src/components/PricingPage.jsx
+++ b/src/components/PricingPage.jsx
@@ -1,6 +1,7 @@
import React from 'react'
import Navbar from './Navbar/Navbar'
import Pricing from './Pricing/Pricing'
+import Footer from './Footer/Footer'
const PricingPage = () => {
return (
diff --git a/src/components/Signup/Login.jsx b/src/components/Signup/Login.jsx
new file mode 100644
index 0000000..5985aee
--- /dev/null
+++ b/src/components/Signup/Login.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import axios from "axios";
+import "./Signup.css";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../AuthContext"; // Import your Auth context
+
+const Login = () => {
+ const [formData, setFormData] = useState({ email: "", password: "" });
+ const { login } = useAuth();
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ try {
+ const res = await axios.post(
+ "http://localhost:5000/api/auth/login",
+ formData
+ );
+ localStorage.setItem("token", res.data.token);
+ alert("Login successful");
+ login();
+ navigate("/");
+ } catch (error) {
+ alert(error.response.data.message);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default Login;
diff --git a/src/components/Signup/Signup.css b/src/components/Signup/Signup.css
new file mode 100644
index 0000000..0b36b98
--- /dev/null
+++ b/src/components/Signup/Signup.css
@@ -0,0 +1,71 @@
+
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f0f2f5;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ background-color: #f9f9f9;
+}
+
+form {
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+ padding: 2rem;
+ width: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items:center ;
+}
+
+h2 {
+ margin-bottom: 1rem;
+ text-align: center;
+ color: #333;
+}
+
+input {
+ margin-bottom: 1rem;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 1rem;
+}
+
+input:focus {
+ border-color: #6a11cb;
+ outline: none;
+}
+
+button {
+ background-color: #6a11cb;
+ color: white;
+ padding: 10px;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 1rem;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background-color: #2575fc;
+}
+
+.navigate-link{
+
+ justify-content: center;
+
+}
\ No newline at end of file
diff --git a/src/components/Signup/Signup.jsx b/src/components/Signup/Signup.jsx
new file mode 100644
index 0000000..143af96
--- /dev/null
+++ b/src/components/Signup/Signup.jsx
@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import axios from "axios";
+import "./Signup.css";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../AuthContext";
+
+const Signup = () => {
+ const [formData, setFormData] = useState({
+ username: "",
+ email: "",
+ password: "",
+ });
+ const { login } = useAuth();
+ const navigate = useNavigate();
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ try {
+ const res = await axios.post(
+ "http://localhost:5000/api/auth/signup",
+ formData
+ );
+ alert(res.data.message);
+ login();
+ navigate("/login");
+ } catch (error) {
+ alert(error.response.data.message);
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default Signup;
diff --git a/src/main.jsx b/src/main.jsx
index 184b27f..50f3750 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,10 +2,13 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter } from "react-router-dom"
+import { AuthProvider } from './components/AuthContext.jsx'
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
+
-)
+
+);