├── components
│   ├── SignupForm.js
│   ├── LoginForm.js
│   └── PrivateRoute.js
├── pages
│   ├── _app.js
│   ├── index.js
│   ├── signup.js
│   ├── login.js
│   └── dashboard.js
└── styles
    └── globals.css

SignupForm.js

import { useState } from "react";
import { useRouter } from "next/router";
import * as yup from "yup";
import { useFormik } from "formik";
const SignupForm = () => {
  const [step, setStep] = useState(1);
  const router = useRouter();
  const validationSchema = [
    yup.object({
      fullName: yup.string().required("Full Name is required"),
      email: yup.string().email("Invalid email").required("Email is required"),
      primaryPhone: yup.string().required("Primary Phone is required"),
      secondaryPhone: yup.string(),
      country: yup.string().required("Country is required"),
      state: yup.string().required("State is required"),
      city: yup.string().required("City is required"),
      zipcode: yup.string().required("Zipcode is required"),
      dob: yup.date().required("Date of Birth is required"),
      gender: yup.string().required("Gender is required"),
    }),
    yup.object({
      languagePreference: yup
        .string()
        .required("Language Preference is required"),
      educationLevel: yup.string().required("Education Level is required"),
      hobbies: yup.string().required("Hobbies are required"),
    }),
    yup.object({
      membership: yup.string().required("Membership selection is required"),
    }),
  ];
  const formik = useFormik({
    initialValues: {
      fullName: "",
      email: "",
      primaryPhone: "",
      secondaryPhone: "",
      country: "",
      state: "",
      city: "",
      zipcode: "",
      dob: "",
      gender: "",
      languagePreference: "",
      educationLevel: "",
      hobbies: "",
      membership: "",
    },
    validationSchema: validationSchema[step - 1],
    onSubmit: (values) => {
      if (step === 3) {
        localStorage.setItem("user", JSON.stringify(values));
        router.push("/dashboard");
      } else {
        setStep(step + 1);
      }
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      {" "}
      {step === 1 && (
        <div>
          {" "}
          <input
            type="text"
            name="fullName"
            onChange={formik.handleChange}
            value={formik.values.fullName}
            placeholder="Full Name"
          />{" "}
          <input
            type="email"
            name="email"
            onChange={formik.handleChange}
            value={formik.values.email}
            placeholder="Email"
          />{" "}
          <input
            type="text"
            name="primaryPhone"
            onChange={formik.handleChange}
            value={formik.values.primaryPhone}
            placeholder="Primary Phone"
          />{" "}
          <input
            type="text"
            name="secondaryPhone"
            onChange={formik.handleChange}
            value={formik.values.secondaryPhone}
            placeholder="Secondary Phone"
          />{" "}
          <input
            type="text"
            name="country"
            onChange={formik.handleChange}
            value={formik.values.country}
            placeholder="Country"
          />{" "}
          <input
            type="text"
            name="state"
            onChange={formik.handleChange}
            value={formik.values.state}
            placeholder="State"
          />{" "}
          <input
            type="text"
            name="city"
            onChange={formik.handleChange}
            value={formik.values.city}
            placeholder="City"
          />{" "}
          <input
            type="text"
            name="zipcode"
            onChange={formik.handleChange}
            value={formik.values.zipcode}
            placeholder="Zipcode"
          />{" "}
          <input
            type="date"
            name="dob"
            onChange={formik.handleChange}
            value={formik.values.dob}
            placeholder="Date of Birth"
          />{" "}
          <select
            name="gender"
            onChange={formik.handleChange}
            value={formik.values.gender}
          >
            {" "}
            <option value="">Select Gender</option>{" "}
            <option value="male">Male</option>{" "}
            <option value="female">Female</option>{" "}
          </select>{" "}
        </div>
      )}{" "}
      {step === 2 && (
        <div>
          {" "}
          <input
            type="text"
            name="languagePreference"
            onChange={formik.handleChange}
            value={formik.values.languagePreference}
            placeholder="Language Preference"
          />{" "}
          <input
            type="text"
            name="educationLevel"
            onChange={formik.handleChange}
            value={formik.values.educationLevel}
            placeholder="Education Level"
          />{" "}
          <input
            type="text"
            name="hobbies"
            onChange={formik.handleChange}
            value={formik.values.hobbies}
            placeholder="Hobbies"
          />{" "}
        </div>
      )}{" "}
      {step === 3 && (
        <div>
          {" "}
          <select
            name="membership"
            onChange={formik.handleChange}
            value={formik.values.membership}
          >
            {" "}
            <option value="">Select Membership</option>{" "}
            <option value="free">Free Plan</option>{" "}
            <option value="paid">Paid Plan</option>{" "}
          </select>{" "}
        </div>
      )}{" "}
      <button
        type="button"
        onClick={() => setStep(step - 1)}
        disabled={step === 1}
      >
        Back
      </button>{" "}
      <button type="submit">{step === 3 ? "Submit" : "Next"}</button>{" "}
    </form>
  );
};
export default SignupForm;

LoginForm.js

import { useRouter } from "next/router";
import { useFormik } from "formik";
import * as yup from "yup";
const LoginForm = () => {
  const router = useRouter();
  const formik = useFormik({
    initialValues: { email: "", password: "" },
    validationSchema: yup.object({
      email: yup.string().email("Invalid email").required("Email is required"),
      password: yup.string().required("Password is required"),
    }),
    onSubmit: (values) => {
      const user = JSON.parse(localStorage.getItem("user"));
      if (user && user.email === values.email) {
        router.push("/dashboard");
      } else {
        alert("Invalid credentials");
      }
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      {" "}
      <input
        type="email"
        name="email"
        onChange={formik.handleChange}
        value={formik.values.email}
        placeholder="Email"
      />{" "}
      <input
        type="password"
        name="password"
        onChange={formik.handleChange}
        value={formik.values.password}
        placeholder="Password"
      />{" "}
      <button type="submit">Login</button>{" "}
    </form>
  );
};
export default LoginForm;

Landing page

import Link from "next/link";
const HomePage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      {" "}
      <h1 className="text-4xl font-bold">Welcome to Education Site</h1>{" "}
      <div className="mt-8">
        {" "}
        <Link href="/signup">
          {" "}
          <a className="px-4 py-2 bg-blue-500 text-white rounded">
            Sign Up
          </a>{" "}
        </Link>{" "}
        <Link href="/login">
          {" "}
          <a className="px-4 py-2 bg-green-500 text-white rounded ml-4">
            Login
          </a>{" "}
        </Link>{" "}
      </div>{" "}
    </div>
  );
};
export default HomePage;

Landing Page (pages/index.js)

import SignupForm from "../components/SignupForm";
const SignupPage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      {" "}
      <h1 className="text-2xl font-bold">Sign Up</h1> <SignupForm />{" "}
    </div>
  );
};
export default SignupPage;

Signup Page (pages/signup.js)

import SignupForm from "../components/SignupForm";
const SignupPage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      {" "}
      <h1 className="text-2xl font-bold">Sign Up</h1> <SignupForm />{" "}
    </div>
  );
};
export default SignupPage;

Login Page (pages/login.js)

import LoginForm from "../components/LoginForm";
const LoginPage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      {" "}
      <h1 className="text-2xl font-bold">Login</h1> <LoginForm />{" "}
    </div>
  );
};
export default LoginPage;