Update :- signUp and Login Form

src/pages/LandingPage.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import Footer from '../components/Footer';
-import BasicNavbar from '../components/BasicNavbar';
+import { Link } from 'react-router-dom';
+
 
 const LandingPage = () => {
   const stats = [
@@ -61,15 +62,13 @@ const LandingPage = () => {
           <p className="text-lg text-slate-500 dark:text-slate-400 mb-8">
             Socialplus helps you build an audience organically. We’re a values-driven company that provides affordable, intuitive marketing tools for ambitious people and teams.
           </p>
-          <div className="flex gap-3  items-center mb-4">
-            <input
-              type="email"
-              placeholder="Enter your email..."
-              className="p-4 border border-gray-300 text-sm text-slate-500 rounded-full w-2/3 md:w-1/2 focus:outline-none"
-            />
-            <button className="p-4 bg-blue-600 text-white rounded-full w-2/3 sm:w-1/2 md:w-1/3 lg:w-1/4">
-              Get started now
-            </button>
+          <div className="mb-4">
+
+            <Link to="/signup">
+        <button className="bg-blue-600 text-white px-4 py-2 rounded-full">
+        Do you want to Start
+        </button>
+      </Link>
 
           </div>
           <div className="flex items-center text-sm text-slate-500 dark:text-slate-400">

src/pages/SignUp.jsx

@@ -1,48 +1,42 @@
-// export default Signup;
 import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import axios from "axios"; // For API calls
-import "./signup.css";
-import BasicNavbar from "../components/BasicNavbar";
 
 const Signup = () => {
+  const [account, setAccount] = useState("signup"); // Toggle between signup and login
   const navigate = useNavigate();
   const [formData, setFormData] = useState({
+    name: "",
     username: "",
     email: "",
     password: "",
     confirmPassword: "",
   });
   const [error, setError] = useState("");
 
-  // Handle form data changes
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
 
-  // Validate form and handle signup submission
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const { username, email, password, confirmPassword } = formData;
+    const { name, username, email, password, confirmPassword } = formData;
 
-    // Password confirmation check
     if (password !== confirmPassword) {
       setError("Passwords do not match.");
       return;
     }
 
     try {
       const response = await axios.post(
-        "http://localhost:5000/api/users/signup",
-        {
-          username,
-          email,
-          password,
-        }
+
+        { name, username, email, password }
       );
 
       if (response.data.success) {
-        navigate("/login"); // Redirect to login page after successful signup
+        setError("");
+        // Navigate to the login page after a successful signup
+        navigate("/login");
       } else {
         setError(response.data.message);
       }
@@ -51,67 +45,110 @@ const Signup = () => {
     }
   };
 
-  return (
-    <div className="signup-container">
-      {/* <nav className="navbar">
-        <div className="logo">
-          <img src="/is14Logo.png" alt="Logo" />
-        </div>
-        <div className="nav-links">
-          <div>
-            {" "}
-            <Link to="/login">
-              <button className="btn-login">Login</button>
-            </Link>
-          </div>
-          <div>
-            <Link to="/signup">
-              <button className="btn-signup">Sign Up</button>
-            </Link>
-          </div>
-        </div>
-      </nav> */}
+  const toggleAccount = () => {
+    setAccount((prevAccount) => (prevAccount === "signup" ? "login" : "signup"));
+  };
 
-      <div className="signup-form-container">
-        <h2>Create Your Account</h2>
-        {error && <p className="error-message">{error}</p>}
-        <form onSubmit={handleSubmit} className="signup-form">
-          <input
-            type="text"
-            name="username"
-            placeholder="Username"
-            value={formData.username}
-            onChange={handleChange}
-            required
-          />
-          <input
-            type="email"
-            name="email"
-            placeholder="Email"
-            value={formData.email}
-            onChange={handleChange}
-            required
-          />
-          <input
-            type="password"
-            name="password"
-            placeholder="Password"
-            value={formData.password}
-            onChange={handleChange}
-            required
-          />
-          <input
-            type="password"
-            name="confirmPassword"
-            placeholder="Confirm Password"
-            value={formData.confirmPassword}
-            onChange={handleChange}
-            required
-          />
-          <button type="submit" className="btn-signup-submit">
-            Sign Up
-          </button>
-        </form>
+  return (
+    <div className=" flex justify-center items-center mt-24 bg-gray/20">
+      <div className="bg-white/20 p-6 rounded-lg shadow-custom w-96">
+        <img
+          src="https://cdn-icons-gif.flaticon.com/7211/7211809.gif"
+          alt="logo"
+          className="w-24 mx-auto mb-4 rounded-full "
+        />
+        {account === "signup" ? (
+          <>
+            <h2 className="text-2xl font-bold text-center mb-4">Create Your Account</h2>
+            {error && <p className="text-red-500 text-center">{error}</p>}
+            <form onSubmit={handleSubmit} className="flex flex-col">
+              <input
+                type="text"
+                name="name"
+                placeholder="Name"
+                value={formData.name}
+                onChange={handleChange}
+                className="p-2 mb-3 border text-gray-500 outline-none bg-gray-200  rounded-full"
+                required
+              />
+              <input
+                type="text"
+                name="username"
+                placeholder="Username"
+                value={formData.username}
+                onChange={handleChange}
+                className="p-2 mb-3 border bg-gray-200  rounded-full text-gray-500 outline-none"
+                required
+              />
+              <input
+                type="email"
+                name="email"
+                placeholder="Email"
+                value={formData.email}
+                onChange={handleChange}
+                className="p-2 mb-3 border bg-gray-200  rounded-full text-gray-500 outline-none"
+                required
+              />
+              <input
+                type="password"
+                name="password"
+                placeholder="Password"
+                value={formData.password}
+                onChange={handleChange}
+                className="p-2 mb-3 border bg-gray-200  rounded-full text-gray-500 outline-none"
+                required
+              />
+              <input
+                type="password"
+                name="confirmPassword"
+                placeholder="Confirm Password"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+                className="p-2 mb-4 border bg-gray-200  rounded-full text-gray-500 outline-none"
+                required
+              />
+              <button type="submit" className="bg-orange-500 text-white py-2 rounded">
+                Sign Up
+              </button>
+            </form>
+            <p className="text-center mt-4 text-green-500">
+              Already have an account?{" "}
+              <span className="text-blue-500 cursor-pointer" onClick={toggleAccount}>
+                Login
+              </span>
+            </p>
+          </>
+        ) : (
+          <>
+            <h2 className="text-gray/20 text-2xl font-bold text-center mb-4">Login to Your Account</h2>
+            {error && <p className="text-red-500 text-center">{error}</p>}
+            <form className="flex flex-col">
+              <input
+                type="text"
+                name="username"
+                placeholder="Username"
+                className="p-2 mb-3 border bg-gray-200  rounded-full text-gray-500 outline-none"
+                required
+              />
+              <input
+                type="password"
+                name="password"
+                placeholder="Password"
+                className="p-2 mb-4 border bg-gray-200 rounded-full text-gray-500 outline-none"
+                required
+              />
+              <button type="submit" className="bg-orange-500 text-white py-2 rounded">
+                Login
+              </button>
+            </form>
+            <p className="text-center mt-4 text-green-500">
+              Don’t have an account?{" "}
+              <span className="text-blue-500 cursor-pointer" onClick={toggleAccount}>
+                Sign Up
+              </span>
+            </p>
+          </>
+        )}
       </div>
     </div>
   );

tailwind.config.js

@@ -16,6 +16,9 @@ export default {
       animation: {
         scroll: 'scroll 30s linear infinite',
       },
+      boxShadow: {
+        custom: '5px 2px 5px 2px rgba(0, 0, 0, 0.6)', // Add your custom box shadow here
+      },
     },
   },
   plugins: [],