Skip to content

Commit

Permalink
Merge pull request #75 from Sushil010/feat/improved-main-page
Browse files Browse the repository at this point in the history 
Enhancement: added UI changes on main page
  • Loading branch information
@Devmangrani
Devmangrani authored Oct 26, 2024
2 parents a3d393a + 1575b4d commit c6a0f42
Show file tree
Hide file tree
Showing 5 changed files with 346 additions and 574 deletions.
252 changes: 135 additions & 117 deletions components/Intro.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,131 +55,149 @@ export default function Intro() {

return (
<>
<div className="w-full h-full flex items-center lg:justify-start pt-24 justify-center flex-wrap">
<div className="lg:w-3/6 w-full sm:p-2 h-full my-2 flex items-center justify-center px-4 md:items-start md:justify-start md:p-20 flex-col">
<motion.h1
initial={{ opacity: 0, x: -100 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 0,
}}
className="md:text-6xl text-3xl sm:text-2xl font-extrabold mb-4 text-black"
>
To Choose Right Jobs.{" "}
<span className="block text-transparent bg-clip-text bg-gradient-to-r from-sky-700 via-indigo-400 to-indigo-400 "> JobSewa is for You</span>{" "}
</motion.h1>

<motion.p
initial={{ opacity: 0, x: -100 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 0,
}}
className="md:text-lg sm:text-sm text-xs font-medium mb-8 text-gray-500"


<div className="w-full min-h-screen flex flex-col justify-between bg-gradient-to-br from-sky-100 to-indigo-200">
<div className="flex-grow flex flex-col items-center justify-center">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="w-full max-w-4xl px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
Thousands of people search for jobs daily on job portals on average.
</motion.p>
<div className="bg-white mb-6 w-full md:px-4 py-2 md:py-4 pl-4 flex sm:flex-row items-center justify-center">
<div className="flex xs:w-full w-3/4 md:h-full p-2 md:px-2 md:py-3 bg-gray-200 rounded">
<BiSearchAlt className="text-2xl text-sky-700 mx-2 hidden sm:flex" />
<input
onChange={(e) => setSearch(e.target.value)}
onKeyPress={handleKeyPress}
value={search}
type="text"
placeholder="Search Jobs with Job Categories like electrician ..."
className="flex-1 bg-transparent text-base outline-none"
/>
{search && (
<RxCross2
onClick={clearSearch}
className="text-2xl text-sky-700 cursor-pointer"
/>
)}
</div>
<button
onClick={handleSearch}
className="px-3 py-2 my-2 sm:my-0 border border-sky-700 rounded uppercase tracking-widest mx-4 text-white bg-sky-700 transition-all duration-700 hover:bg-transparent font-semibold text-base hover:text-sky-700"
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-center mb-8"
>
Search
</button>
</div>
<div className="w-full px-2 py-2 flex items-center justify-start flex-wrap gap-2">
<div className="flex items-center justify-center mb-2">
<BsFillBookmarkFill className="text-sky-700 text-xl mx-2" />
<h1 className="font-semibold text-lg">Suggest Tag:</h1>
</div>
{/* Tags */}
{["Electrician", "Labourer", "Driver", "Plumber"].map((tag) => (
<span
key={tag}
className="bg-blue-100 text-blue-800 py-1 px-3 font-medium text-sm rounded-full cursor-pointer hover:bg-blue-200"
onClick={() => onTagClick(tag)}
>
{tag}
Find Your Perfect Job with{" "}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-700 via-indigo-600 to-indigo-800">
JobSewa
</span>
))}
</div>
</div>
<motion.div
initial={{ opacity: 0, x: -100 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{
duration: 0.8,
type: "spring",
stiffness: 100,
delay: 0,
}}
className="md:w-3/6 md:my-2 h-full items-center justify-center flex-col md:p-20 lg:flex"
>
<Image
width={1000}
height={1000}
src="/intro.png"
alt="no-image-found"
/>
</motion.div>
</div>
{doneSearch && (
<div className="w-full flex flex-wrap items-center justify-center py-2 px-2">
{Array.isArray(filterJobs) && filterJobs.length > 0 ? (
filterJobs.map((job) => <JobsCard job={job} key={job?._id} />)
) : (
<p className="text-sm text-center font-semibold text-red-500">
Sorry, no such category job available right now.
</p>
)}
</motion.h1>

<motion.p
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="text-lg sm:text-xl text-gray-700 text-center mb-12"
>
Connecting thousands of job seekers with their dream careers daily.
</motion.p>

<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: 0.6 }}
className="bg-white rounded-lg shadow-xl p-6 mb-12 w-full max-w-2xl"
>
<div className="flex flex-col sm:flex-row items-center">
<div className="flex-grow mb-4 sm:mb-0 sm:mr-4 relative w-full">
<BiSearchAlt className="absolute left-3 top-1/2 transform -translate-y-1/2 text-2xl text-sky-700" />
<input
onChange={(e) => setSearch(e.target.value)}
onKeyPress={handleKeyPress}
value={search}
type="text"
placeholder="Search job categories (e.g., electrician)"
className="w-full pl-12 pr-4 py-3 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-sky-600 transition duration-300"
/>
{search && (
<RxCross2
onClick={clearSearch}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-2xl text-sky-700 cursor-pointer hover:text-sky-900 transition duration-300"
/>
)}
</div>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={handleSearch}
className="w-full sm:w-auto px-6 py-3 bg-sky-700 text-white rounded-lg uppercase tracking-wider font-semibold hover:bg-sky-800 transition duration-300"
>
Search
</motion.button>
</div>
</motion.div>

<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="flex flex-wrap justify-center items-center gap-4 mb-8"
>
<span className="font-semibold text-lg text-gray-700 mr-2">Popular Tags:</span>
{["Electrician", "Labourer", "Driver", "Plumber"].map((tag) => (
<motion.span
key={tag}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="bg-blue-100 text-blue-800 py-2 px-4 rounded-full cursor-pointer hover:bg-blue-200 transition duration-300"
onClick={() => onTagClick(tag)}
>
{tag}
</motion.span>
))}
</motion.div>
</motion.div>
</div>
)}
{/* Footer Component */}

{doneSearch && (
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="w-full bg-gray-100 py-12 px-4 sm:px-6 lg:px-8"
>
<div className="max-w-7xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
Search Results
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
{Array.isArray(filterJobs) && filterJobs.length > 0 ? (
filterJobs.map((job) => (
<motion.div
key={job?._id}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5 }}
>
<JobsCard job={job} />
</motion.div>
))
) : (
<p className="text-xl text-center font-semibold text-red-500 col-span-full">
Sorry, no jobs found in this category at the moment.
</p>
)}
</div>
</div>
</motion.div>
)}

{/* Footer Component */}
<footer className="w-full h-20 px-6 flex justify-between text-lg items-center bg-[#1B263B] text-[#D3D3D3]">
<div className="left gap-6">
&copy; {new Date().getFullYear()} JobSewa. All rights reserved.
</div>
<div className="left gap-6">
&copy; {new Date().getFullYear()} JobSewa. All rights reserved.
</div>

<div className="right flex gap-11">
<a href="https://twitter.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
<FiTwitter size={22} />
</a>
<div className="right flex gap-11">
<a href="https://twitter.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
<FiTwitter size={22} />
</a>

<a href="https://linkedin.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
<GrLinkedin size={22} />
</a>
<a href="https://linkedin.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
<GrLinkedin size={22} />
</a>

<a href="https://facebook.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
<BsFacebook size={22} />
</a>
</div>
</footer>
<a href="https://facebook.com" target="_blank" className="hover:text-[#3A7CA5] transform hover:translate-y-[-5px] transition-transform duration-300 ease-in-out">
<BsFacebook size={22} />
</a>
</div>
</footer>
</div>

</>
);
}
Loading

0 comments on commit c6a0f42

Please sign in to comment.