fav icon added

Abubokkor98 · Jan 22, 2025 · 4c3f76a · 4c3f76a
1 parent 583e16d
commit 4c3f76a
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 65 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/work.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WorkForce Pro</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "date-fns": "^4.1.0",
     "firebase": "^11.1.0",
     "framer-motion": "^11.18.1",
+    "lottie-react": "^2.4.1",
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-awesome-reveal": "^4.3.1",

diff --git a/public/vite.svg b/public/vite.svg
diff --git a/public/work.svg b/public/work.svg
diff --git a/src/assets/login-page.json b/src/assets/login-page.json
diff --git a/src/components/auth/GoogleLogin.jsx b/src/components/auth/GoogleLogin.jsx
@@ -26,7 +26,7 @@ export default function GoogleLogin() {
     <div className="w-full">
       <button
         onClick={handleGoogle}
-        className="w-full py-3 flex items-center justify-center bg-white border border-gray-300 rounded-lg shadow hover:shadow-lg hover:border-gray-400 transition duration-200 text-gray-800 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500"
+        className="w-full md:w-8/12 lg:w-full mx-auto py-3 flex items-center justify-center bg-white border border-gray-300 rounded-lg shadow hover:shadow-lg hover:border-gray-400 transition duration-200 text-gray-800 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700 dark:hover:border-gray-500"
       >
         <FcGoogle className="w-6 h-6 mr-2" />
         <span className="text-sm font-medium">Sign in with Google</span>

diff --git a/src/pages/auth/Login.jsx b/src/pages/auth/Login.jsx
@@ -3,6 +3,8 @@ import { FaEye, FaEyeSlash } from "react-icons/fa";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import toast from "react-hot-toast";
+import Lottie from "lottie-react";
+import loginAnimation from "../../assets/login.json";
 import GoogleLogin from "../../components/auth/GoogleLogin";
 import useAuth from "../../customHooks/useAuth";
 
@@ -13,7 +15,6 @@ export default function Login() {
   const location = useLocation();
   const from = location.state?.from?.pathname || "/";
 
-
   const handleLogin = (e) => {
     e.preventDefault();
     const form = new FormData(e.target);
@@ -33,71 +34,71 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background">
+    <div className="flex items-center justify-center bg-gray-100 min-h-screen p-4">
       <Helmet>
         <title>Login | WorkForce Pro</title>
       </Helmet>
-      <div className="bg-white p-10 rounded-3xl shadow-lg w-full max-w-lg">
-        <h2 className="text-3xl font-bold text-center text-primary mb-6 tracking-wide">
-          Welcome Back!
-        </h2>
-        <form onSubmit={handleLogin} className="space-y-6">
-          {/* Email */}
-          <div>
-            <label className="block text-sm font-medium text-text mb-2">
-              Email Address
-            </label>
-            <input
-              type="email"
-              name="email"
-              placeholder="Enter your email"
-              className="w-full px-5 py-3 border border-primary rounded-xl focus:outline-none focus:ring-2 focus:ring-primary bg-background text-text placeholder-gray-400"
-              required
-            />
-          </div>
-
-          {/* Password */}
-          <div className="relative">
-            <label className="block text-sm font-medium text-text mb-2">
-              Password
-            </label>
-            <input
-              type={showPassword ? "text" : "password"}
-              name="password"
-              placeholder="Enter your password"
-              className="w-full px-5 py-3 border border-primary rounded-xl focus:outline-none focus:ring-2 focus:ring-primary bg-background text-text placeholder-gray-400"
-              required
-            />
+      <div className="flex flex-col lg:flex-row shadow-lg rounded-lg bg-white max-w-4xl w-full">
+        {/* Left Section */}
+        <div className="p-8 lg:w-1/2 flex flex-col justify-center items-center">
+          <h2 className="text-3xl font-bold mb-4 text-primary">
+            Welcome Back!
+          </h2>
+          <form onSubmit={handleLogin} className="w-full space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-600 mb-2">
+                Email Address
+              </label>
+              <input
+                type="email"
+                name="email"
+                placeholder="Enter your email"
+                className="block w-full  px-4 py-2 bg-gray-50 text-gray-800 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:outline-none"
+                required
+              />
+            </div>
+            <div className="relative">
+              <label className="block text-sm font-medium text-gray-600 mb-2">
+                Password
+              </label>
+              <input
+                type={showPassword ? "text" : "password"}
+                name="password"
+                placeholder="Enter your password"
+                className="block w-full px-4 py-2 bg-gray-50 text-gray-800 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:outline-none"
+                required
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute inset-y-0 top-7 right-4 flex items-center text-gray-600"
+              >
+                {showPassword ? <FaEyeSlash /> : <FaEye />}
+              </button>
+            </div>
             <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-4 top-3 text-primary hover:text-accent transition"
+              type="submit"
+              className="w-full py-2 bg-secondary text-white rounded-lg hover:bg-accent focus:ring-2 focus:ring-blue-400"
             >
-              {showPassword ? <FaEyeSlash /> : <FaEye />}
+              Login
             </button>
-          </div>
-
-          {/* Login Button */}
-          <button
-            type="submit"
-            className="w-full py-3 bg-gradient-to-r from-primary to-accent text-white font-medium rounded-xl hover:bg-gradient-to-l hover:from-accent hover:to-primary transition duration-200 ease-in-out"
-          >
-            Login
-          </button>
-        </form>
+          </form>
+        </div>
 
-        <p className="mt-6 text-center text-gray-600">
-          Don't have an account?{" "}
-          <Link
-            to={"/auth/register"}
-            className="text-primary font-medium hover:underline"
-          >
-            Register here
-          </Link>
-        </p>
-        {/* Google Login */}
-        <div className="mt-8 flex justify-center">
+        {/* Right Section */}
+        <div className="bg-secondary text-white p-8 lg:w-1/2 flex flex-col justify-center items-center rounded-lg h-80 lg:h-96">
+          <Lottie animationData={loginAnimation} className="w-3/4 h-48 mb-6" />
           <GoogleLogin />
+
+          <p className="my-4 text-center text-sm">
+            Don't have an account?{" "}
+            <Link
+              to="/auth/register"
+              className="text-gray-700 font-medium hover:underline"
+            >
+              Register here
+            </Link>
+          </p>
         </div>
       </div>
     </div>

diff --git a/src/pages/auth/Register.jsx b/src/pages/auth/Register.jsx
@@ -48,7 +48,7 @@ export default function Register() {
         isVerified: false,
         isFired: false,
       };
-      console.log(user);
+      // console.log(user);
       const userRes = await axiosPublic.post("/users", user);
       // console.log(userRes.data);
       if (userRes.data.insertedId) {
@@ -78,7 +78,7 @@ export default function Register() {
   };
 
   return (
-    <div className=" bg-background flex items-center justify-center">
+    <div className=" bg-background flex items-center justify-center py-2">
       <Helmet>
         <title>Register | WorkForce Pro</title>
       </Helmet>
@@ -268,7 +268,7 @@ export default function Register() {
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-4 top-3 text-secondary"
+              className="absolute right-4 top-10 text-secondary"
             >
               {showPassword ? <FaEyeSlash /> : <FaEye />}
             </button>