chore: setup project for production

app/accounts/login/page.jsx

@@ -0,0 +1,155 @@
+"use client";
+
+import MainContext from "@/app/contexts/mainContext";
+import Image from "next/image";
+import React, { useContext, useState } from "react";
+
+const LoginSignup = () => {
+  const [isLogin, setIsLogin] = useState(true);
+  const { loginUser, registerUser } = useContext(MainContext);
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (isLogin) {
+      loginUser(formData);
+    } else {
+      registerUser(formData);
+    }
+  };
+
+  const toggleMode = () => {
+    setIsLogin(!isLogin);
+    setFormData({ email: "", password: "", confirmPassword: "" });
+  };
+
+  return (
+    <div className="flex h-screen bg-gray-100">
+      {/* Left section with video */}
+      <div className="hidden lg:flex lg:w-[60%] bg-cover bg-center">
+        <video
+          src="/loginvideo.mp4"
+          className="object-cover w-full h-full"
+          autoPlay
+          loop
+          muted
+          playsInline
+        >
+          <source src="/loginvideo.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </div>
+
+      {/* Right section with login/signup form */}
+      <div className="w-full lg:w-1/2 flex items-center justify-center p-8 ">
+        <div className="max-w-md w-full space-y-8 bg-white p-7">
+          <div className="flex gap-4 items-center justify-center">
+            <Image
+              src={"/logo1.jpg"}
+              height={200}
+              width={200}
+              alt="logo"
+              className="h-16 w-16 text-center "
+            />
+            <h1 className="text-[#AC8C6B] text-3xl">{`${
+              isLogin ? "Login" : "Sign up"
+            }`}</h1>
+          </div>
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+            <div className="rounded-md shadow-sm -space-y-px flex flex-col gap-5">
+              <div>
+                <label htmlFor="email-address" className="sr-only">
+                  Email address
+                </label>
+                <input
+                  id="email-address"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
+                  placeholder="Email address"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                />
+              </div>
+              <div>
+                <label htmlFor="password" className="sr-only">
+                  Password
+                </label>
+                <input
+                  id="password"
+                  name="password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
+                  placeholder="Password"
+                  value={formData.password}
+                  onChange={handleInputChange}
+                />
+              </div>
+              {!isLogin && (
+                <div>
+                  <label htmlFor="confirm-password" className="sr-only">
+                    Confirm Password
+                  </label>
+                  <input
+                    id="confirm-password"
+                    name="confirmPassword"
+                    type="password"
+                    autoComplete="new-password"
+                    required
+                    className="appearance-none rounded-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-[#C19A5B] focus:border-[#C19A5B] focus:z-10 sm:text-sm"
+                    placeholder="Confirm Password"
+                    value={formData.confirmPassword}
+                    onChange={handleInputChange}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                className="group relative w-full flex justify-center py-2 px-7 border border-transparent text-xl text-[300] font-medium  text-white bg-[#C19A5B] hover:bg-[#c49d60] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+              >
+                {isLogin ? "Login" : "Sign up"}
+              </button>
+            </div>
+          </form>
+          <div className="text-center">
+            <h2 className="text-[#AC8C6B] font-semibold">
+              Manage subscriptions
+            </h2>
+            <h2 className="text-xl my-3">or</h2>
+            <h2 className="capitalize border-2 px-5 py-3">
+              Continue with google
+            </h2>
+            <button
+              onClick={toggleMode}
+              className="font-medium text-[#C19A5B] mt-10"
+            >
+              {isLogin
+                ? "Don't have an account? Sign up"
+                : "Already have an account? Sign in"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LoginSignup;