Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added and done changes #54

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added and done changes #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5cd3b1c
Done some changes
papali1305 Oct 23, 2024
fc996ff
ADDED
papali1305 Oct 23, 2024
e37103a
added and i will rectify if any error occured
papali1305 Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions components/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,15 @@ export default function NavBar() {
Organizations
</Link>
</div>
<Link
href={"/about"}
className={`px-3 mx-4 text-base font-medium transition-all duration-700 hover:translate-y-2 uppercase ${
router.pathname === "/about" ? "text-sky-200 font-bold" : ""
}`}
>
About
</Link>

<div className="px-2 h-full items-center justify-center flex">
{user !== null ? (
<>
Expand Down
64 changes: 64 additions & 0 deletions components/about.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React, { useEffect, useState } from "react";
import NavBar from "@/components/NavBar"; // Import the NavBar
import { motion } from "framer-motion"; // Import framer-motion for animation effects

export default function About() {
const [showContent, setShowContent] = useState(false);

// A simple animation effect when the page loads
useEffect(() => {
setTimeout(() => {
setShowContent(true);
}, 200);
}, []);

return (
<>
<NavBar />
<section className="flex flex-col items-center justify-center h-screen bg-gray-50 text-gray-700">
<motion.div
className="bg-white p-10 rounded-lg shadow-lg max-w-4xl text-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: showContent ? 1 : 0, y: showContent ? 0 : 20 }}
transition={{ duration: 0.5 }}
>
<h1 className="text-4xl font-bold mb-4 text-indigo-600">
About JobSewa
</h1>
<p className="text-lg leading-relaxed mb-6">
JobSewa is a platform dedicated to bridging the gap between job
seekers and employers. Whether you're looking to post jobs, find
opportunities, or stay up-to-date with the latest industry trends,
we've got you covered. Our mission is to empower both employers and
job seekers by providing a seamless experience and fostering a
supportive community.
</p>
<motion.div
className="text-left"
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: showContent ? 1 : 0, x: showContent ? 0 : -20 }}
transition={{ duration: 0.7, delay: 0.3 }}
>
<h2 className="text-2xl font-semibold text-gray-900 mb-3">
Our Vision
</h2>
<p className="text-base leading-relaxed mb-4">
To build a future where job searching is effortless, effective,
and efficient for all. Our aim is to make meaningful connections
between talents and opportunities that help people achieve their
career goals.
</p>
<h2 className="text-2xl font-semibold text-gray-900 mb-3">
Our Mission
</h2>
<p className="text-base leading-relaxed">
We strive to create a job platform that prioritizes user
experience, provides transparency, and connects the right people
to the right jobs in a timely manner.
</p>
</motion.div>
</motion.div>
</section>
</>
);
}
2 changes: 2 additions & 0 deletions pages/_app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { useEffect } from "react";
import { useRouter } from "next/router";
import Cookies from 'js-cookie';
import 'react-toastify/dist/ReactToastify.css';
import '../styles/globals.css'; // Ensure this is imported to use globally




Expand Down
177 changes: 90 additions & 87 deletions pages/auth/forget-password.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function ForgetPassword() {
}

if (formData.password !== formData.confirmPassword) {
toast.error("Password and Confirm Password does not match");
toast.error("Password and Confirm Password do not match");
}

const res = await forget_password(formData);
Expand All @@ -55,94 +55,97 @@ export default function ForgetPassword() {
return (
<>
<NavBar />
<section className="bg-indigo-600 text-center">
<section className="bg-gradient-to-r from-indigo-900 via-purple-900 to-black text-center">
<div className="flex flex-col items-center justify-center px-6 py-8 mx-auto h-screen lg:py-0">
<div className="w-full p-6 bg-white rounded-lg shadow md:mt-0 sm:max-w-md sm:p-8">
<h2 className="mb-1 text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl ">
Change Password
</h2>
<form
onSubmit={handleSubmit}
className="mt-4 space-y-4 lg:mt-5 md:space-y-5"
>
<div className="text-left">
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900 "
>
Your email
</label>
<input
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
type="email"
name="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
placeholder="[email protected]"
required=""
/>
{error.email && (
<p className="text-sm text-red-500">{error.email}</p>
)}
</div>
<div className="text-left">
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900 "
>
New Password
</label>
<input
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })
}
type="password"
name="password"
id="password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
required=""
/>
{error.password && (
<p className="text-sm text-red-500">{error.password}</p>
)}
</div>
<div className="text-left">
<label
htmlFor="confirm-password"
className="block mb-2 text-sm font-medium text-gray-900 "
>
Confirm password
</label>
<input
onChange={(e) =>
setFormData({
...formData,
confirmPassword: e.target.value,
})
}
type="password"
name="confirm-password"
id="confirm-password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-indigo-600 focus:border-sky-700 block w-full p-2.5 "
required=""
/>
{error.confirmPassword && (
<p className="text-sm text-red-500">
{error.confirmPassword}
</p>
)}
</div>
<button
type="submit"
className="w-full text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center "
<div className="relative w-full p-6 bg-white rounded-lg shadow-lg md:mt-0 sm:max-w-md sm:p-8 transform hover:scale-105 transition-transform duration-500 ease-in-out">
<div className="absolute inset-0 bg-gradient-to-r from-transparent to-indigo-600 opacity-75 blur-md rounded-lg"></div>
<div className="relative z-10">
<h2 className="mb-1 text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl">
Change Password
</h2>
<form
onSubmit={handleSubmit}
className="mt-4 space-y-6 lg:mt-5"
>
Reset passwod
</button>
</form>
<div className="text-left">
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your email
</label>
<input
onChange={(e) =>
setFormData({ ...formData, email: e.target.value })
}
type="email"
name="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-purple-500 focus:border-purple-700 block w-full p-2.5 transition-all duration-300 ease-in-out hover:shadow-glow hover:shadow-purple-500/50"
placeholder="[email protected]"
required
/>
{error.email && (
<p className="text-sm text-red-500">{error.email}</p>
)}
</div>
<div className="text-left">
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900"
>
New Password
</label>
<input
onChange={(e) =>
setFormData({ ...formData, password: e.target.value })
}
type="password"
name="password"
id="password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-purple-500 focus:border-purple-700 block w-full p-2.5 transition-all duration-300 ease-in-out hover:shadow-glow hover:shadow-purple-500/50"
required
/>
{error.password && (
<p className="text-sm text-red-500">{error.password}</p>
)}
</div>
<div className="text-left">
<label
htmlFor="confirm-password"
className="block mb-2 text-sm font-medium text-gray-900"
>
Confirm password
</label>
<input
onChange={(e) =>
setFormData({
...formData,
confirmPassword: e.target.value,
})
}
type="password"
name="confirm-password"
id="confirm-password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-purple-500 focus:border-purple-700 block w-full p-2.5 transition-all duration-300 ease-in-out hover:shadow-glow hover:shadow-purple-500/50"
required
/>
{error.confirmPassword && (
<p className="text-sm text-red-500">
{error.confirmPassword}
</p>
)}
</div>
<button
type="submit"
className="relative w-full text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center transition-all duration-300 ease-in-out hover:shadow-purple-500/50 transform hover:scale-110 hover:shadow-glow"
>
Reset Password
</button>
</form>
</div>
</div>
</div>
<ToastContainer />
Expand Down
21 changes: 21 additions & 0 deletions pages/auth/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/* styles/globals.css */

@keyframes futuristicGlow {
0% {
box-shadow: 0 0 5px #0fa, 0 0 10px #0fa, 0 0 20px #0fa;
transform: scale(1);
}
50% {
box-shadow: 0 0 20px #0fa, 0 0 40px #0fa, 0 0 60px #0fa;
transform: scale(1.1);
}
100% {
box-shadow: 0 0 5px #0fa, 0 0 10px #0fa, 0 0 20px #0fa;
transform: scale(1);
}
}

.animate-glow {
animation: futuristicGlow 0.6s ease-in-out;
}

Loading