266 lines
9.3 KiB
JavaScript
266 lines
9.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { Search, MapPin, Globe, Star } from 'lucide-react';
|
|
|
|
const fadeUpPreset = (delay = 0, duration = 1.2) => ({
|
|
initial: { opacity: 0, y: 20 },
|
|
whileInView: { opacity: 1, y: 0 },
|
|
viewport: { once: true, amount: 0.2 },
|
|
transition: { delay, duration, ease: "easeOut" }
|
|
});
|
|
|
|
const JobsSection = () => {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const jobs = [
|
|
{
|
|
id: 1,
|
|
title: 'Senior Product Engineer',
|
|
company: 'Pandektes',
|
|
location: 'Remote',
|
|
country: '🇩🇰 Denmark',
|
|
salary: '$120k - $150k',
|
|
timeAgo: '4 hours ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/65dc7731-a4bb-4bbe-bc20-7401691a9ec5.png',
|
|
featured: false
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Senior Software Engineer',
|
|
company: 'Trilon',
|
|
location: 'Remote',
|
|
country: '🌏 Worldwide',
|
|
salary: null,
|
|
timeAgo: '25 days ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/612b8b42-9610-43b1-92bd-15373110159f.png',
|
|
featured: true
|
|
}
|
|
];
|
|
|
|
const expiredJobs = [
|
|
{
|
|
id: 3,
|
|
title: 'Full-Stack Developer Angular/NestJS/PHP/MySQL',
|
|
company: 'Nylon Technology',
|
|
location: 'Remote',
|
|
country: '🇺🇸 United States, Continental...',
|
|
salary: '$100k - $130k',
|
|
timeAgo: 'a month ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/c54da9a9-c7aa-4d9a-838d-1021b684d957.jpeg'
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Full Stack Typescript Developer (NextJs, NestJs)',
|
|
company: 'ClickTech',
|
|
location: 'Remote',
|
|
country: '🌏 Worldwide',
|
|
salary: '$40k - $50k',
|
|
timeAgo: '2 months ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab.jpeg'
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'NestJS Testing Specialist (Freelancer/Consultant)',
|
|
company: 'Kapital',
|
|
location: '🌏 Worldwide',
|
|
country: '',
|
|
salary: null,
|
|
timeAgo: '2 months ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/6e1385c3-7fd6-4444-8fc4-908d4aef24be.png'
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'Full-Stack Engineer (Mid-Senior) [NestJS, NextJS]',
|
|
company: 'OASYS NOW',
|
|
location: '🇳🇱 Netherlands, Delft',
|
|
country: '',
|
|
salary: '$60k - $80k',
|
|
timeAgo: '2 months ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/696a0fcf-7bdb-44e2-bb03-dbdb0fb2e18b.jpeg'
|
|
},
|
|
{
|
|
id: 7,
|
|
title: 'Senior Backend Engineer',
|
|
company: 'Pandektes',
|
|
location: 'Remote',
|
|
country: '🇩🇰 Denmark, Copenhagen',
|
|
salary: '$110k - $140k',
|
|
timeAgo: '2 months ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/65dc7731-a4bb-4bbe-bc20-7401691a9ec5.png'
|
|
},
|
|
{
|
|
id: 8,
|
|
title: 'Backend NestJS Developer',
|
|
company: 'ClickTech',
|
|
location: 'Remote',
|
|
country: '🌏 Worldwide',
|
|
salary: '$40k - $60k',
|
|
timeAgo: '6 months ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab.jpeg'
|
|
},
|
|
{
|
|
id: 9,
|
|
title: 'Senior Software Engineer',
|
|
company: 'Pippen AI',
|
|
location: 'Remote',
|
|
country: '🇨🇦 Canada, Toronto',
|
|
salary: '$70k - $100k',
|
|
timeAgo: '6 months ago',
|
|
logo: 'https://nestjs-jobs-bucket-localhost.s3.amazonaws.com/69388f1e-2dff-444b-9fc4-9f035bbf654f.jpeg'
|
|
}
|
|
];
|
|
|
|
const JobCard = ({ job, index }) => {
|
|
const cardContent = (
|
|
<div className={`job-card ${job.featured ? 'job-card-featured' : ''} relative`}>
|
|
{job.featured && (
|
|
<div className="absolute top-4 right-4">
|
|
<span className="bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full flex items-center">
|
|
<Star className="w-3 h-3 mr-1" />
|
|
FEATURED
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-start space-x-4">
|
|
<div className="flex-shrink-0">
|
|
<img
|
|
src={job.logo}
|
|
alt={`${job.company} logo`}
|
|
className="w-12 h-12 rounded-lg object-cover"
|
|
/>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-1">{job.title}</h3>
|
|
<p className="text-gray-600 mb-2">at {job.company}</p>
|
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-500">
|
|
<div className="flex items-center">
|
|
<MapPin className="w-4 h-4 mr-1" />
|
|
{job.location}
|
|
</div>
|
|
{job.country && (
|
|
<div className="flex items-center">
|
|
<Globe className="w-4 h-4 mr-1" />
|
|
{job.country}
|
|
</div>
|
|
)}
|
|
{job.salary && (
|
|
<div className="font-medium text-green-600">
|
|
💰 {job.salary}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-3 text-sm text-gray-400">
|
|
{job.timeAgo}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
if (shouldReduceMotion) {
|
|
return cardContent;
|
|
}
|
|
|
|
return (
|
|
<motion.div {...fadeUpPreset(index * 0.1, 0.6)}>
|
|
{cardContent}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const sectionContent = (
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
Find your next opportunity
|
|
</h2>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
|
Browse through our list of NestJS jobs, find your perfect match and apply. Use filters for more accurate results!
|
|
</p>
|
|
|
|
{/* Newsletter Signup */}
|
|
<div className="bg-brand-pink rounded-lg p-6 max-w-2xl mx-auto mb-12">
|
|
<h3 className="text-white font-semibold mb-4">
|
|
Get NestJS jobs right to your inbox
|
|
</h3>
|
|
<p className="text-pink-100 mb-4">Subscribe to our newsletter to get notified.</p>
|
|
<div className="flex flex-col sm:flex-row gap-3">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
className="flex-1 px-4 py-3 rounded-lg border-0 focus:ring-2 focus:ring-white focus:outline-none"
|
|
/>
|
|
<button className="bg-white text-brand-pink font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors">
|
|
Subscribe
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="flex flex-col md:flex-row gap-4 items-center justify-center mb-8">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search jobs..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none w-80"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<select className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none">
|
|
<option>🌎 Location</option>
|
|
<option>Remote</option>
|
|
<option>On-site</option>
|
|
</select>
|
|
<select className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none">
|
|
<option>🥁 Seniority</option>
|
|
<option>Junior</option>
|
|
<option>Mid</option>
|
|
<option>Senior</option>
|
|
</select>
|
|
<select className="px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-pink focus:border-transparent outline-none">
|
|
<option>📈 Salary</option>
|
|
<option>$0 - $50k</option>
|
|
<option>$50k - $100k</option>
|
|
<option>$100k+</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Jobs */}
|
|
<div className="space-y-6 mb-16">
|
|
{jobs.map((job, index) => (
|
|
<JobCard key={job.id} job={job} index={index} />
|
|
))}
|
|
</div>
|
|
|
|
{/* Expired Jobs */}
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-gray-900 mb-8">Expired listings</h3>
|
|
<div className="space-y-4">
|
|
{expiredJobs.map((job, index) => (
|
|
<JobCard key={job.id} job={job} index={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
if (shouldReduceMotion) {
|
|
return sectionContent;
|
|
}
|
|
|
|
return (
|
|
<motion.div {...fadeUpPreset(0.2, 1.0)}>
|
|
{sectionContent}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default JobsSection; |