255 lines
8.5 KiB
JavaScript
255 lines
8.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { motion, useReducedMotion } from 'framer-motion';
|
|
import { Search, Globe, MapPin, Clock } 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 [emailSubscription, setEmailSubscription] = useState('');
|
|
|
|
const jobs = [
|
|
{
|
|
id: 1,
|
|
title: 'Senior Product Engineer',
|
|
company: 'Pandektes',
|
|
location: 'Remote',
|
|
country: '🇩🇰 Denmark',
|
|
salary: '$120k - $150k',
|
|
timeAgo: '2 hours ago',
|
|
logo: "/images/65dc7731-a4bb-4bbe-bc20-7401691a9ec5-1768471895970.png",
|
|
featured: false
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Senior Software Engineer',
|
|
company: 'Trilon',
|
|
location: 'Remote',
|
|
country: '🌏 Worldwide',
|
|
timeAgo: '25 days ago',
|
|
logo: "/images/612b8b42-9610-43b1-92bd-15373110159f-1768471895436.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: "/images/c54da9a9-c7aa-4d9a-838d-1021b684d957-1768471895594.jpeg"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: 'Full Stack Typescript Developer (NextJs, NestJs)',
|
|
company: 'ClickTech',
|
|
location: 'Remote',
|
|
country: '🌏 Worldwide',
|
|
salary: '$40k - $50k',
|
|
timeAgo: '2 months ago',
|
|
logo: "/images/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab-1768471895612.jpeg"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: 'NestJS Testing Specialist (Freelancer/Consultant)',
|
|
company: 'Kapital',
|
|
location: '🌏 Worldwide',
|
|
timeAgo: '2 months ago',
|
|
logo: "/images/6e1385c3-7fd6-4444-8fc4-908d4aef24be-1768471895728.png"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: 'Full-Stack Engineer (Mid-Senior) [NestJS, NextJS]',
|
|
company: 'OASYS NOW',
|
|
location: '🇳🇱 Netherlands, Delft',
|
|
salary: '$60k - $80k',
|
|
timeAgo: '2 months ago',
|
|
logo: "/images/696a0fcf-7bdb-44e2-bb03-dbdb0fb2e18b-1768471895569.jpeg"
|
|
},
|
|
{
|
|
id: 7,
|
|
title: 'Senior Backend Engineer',
|
|
company: 'Pandektes',
|
|
location: 'Remote',
|
|
country: '🇩🇰 Denmark, Copenhagen',
|
|
salary: '$110k - $140k',
|
|
timeAgo: '2 months ago',
|
|
logo: "/images/65dc7731-a4bb-4bbe-bc20-7401691a9ec5-1768471895970.png"
|
|
},
|
|
{
|
|
id: 8,
|
|
title: 'Backend NestJS Developer',
|
|
company: 'ClickTech',
|
|
location: 'Remote',
|
|
country: '🌏 Worldwide',
|
|
salary: '$40k - $60k',
|
|
timeAgo: '6 months ago',
|
|
logo: "/images/3e62a3bc-0bae-4f8b-8e5a-4b14db5ef4ab-1768471895612.jpeg"
|
|
},
|
|
{
|
|
id: 9,
|
|
title: 'Senior Software Engineer',
|
|
company: 'Pippen AI',
|
|
location: 'Remote',
|
|
country: '🇨🇦 Canada, Toronto',
|
|
salary: '$70k - $100k',
|
|
timeAgo: '6 months ago',
|
|
logo: "/images/69388f1e-2dff-444b-9fc4-9f035bbf654f-1768471895570.jpeg"
|
|
}
|
|
];
|
|
|
|
const JobCard = ({ job, index }) => {
|
|
const cardContent = (
|
|
<div className={`job-card ${job.featured ? 'featured-job' : ''}`}>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="flex items-center space-x-4">
|
|
<img
|
|
src={job.logo}
|
|
alt={job.company}
|
|
className="company-logo"
|
|
/>
|
|
<div>
|
|
<h3 className="font-semibold text-lg text-gray-900">{job.title}</h3>
|
|
<p className="text-gray-600">at {job.company}</p>
|
|
{job.featured && (
|
|
<span className="inline-block bg-nest-pink text-white text-xs px-2 py-1 rounded-full mt-1">
|
|
✨ FEATURED
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<span className="text-sm text-gray-500">{job.timeAgo}</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-4 text-sm text-gray-600">
|
|
<div className="flex items-center space-x-1">
|
|
<MapPin className="w-4 h-4" />
|
|
<span>{job.location}</span>
|
|
</div>
|
|
{job.country && (
|
|
<div className="flex items-center space-x-1">
|
|
<Globe className="w-4 h-4" />
|
|
<span>{job.country}</span>
|
|
</div>
|
|
)}
|
|
{job.salary && (
|
|
<div className="flex items-center space-x-1">
|
|
<span className="text-green-600 font-medium">💰 {job.salary}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
if (shouldReduceMotion) {
|
|
return cardContent;
|
|
}
|
|
|
|
return (
|
|
<motion.div {...fadeUpPreset(index * 0.1, 0.8)}>
|
|
{cardContent}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
const sectionContent = (
|
|
<section className="py-16 bg-nest-gray">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Find your next opportunity
|
|
</h2>
|
|
<p className="text-xl text-gray-600 mb-8">
|
|
Browse through our list of NestJS jobs, find your perfect match and apply. Use filters for more accurate results!
|
|
</p>
|
|
|
|
<div className="bg-nest-pink text-white p-6 rounded-lg mb-8">
|
|
<h3 className="text-lg font-semibold mb-4">Get NestJS jobs right to your inbox</h3>
|
|
<p className="mb-4">Subscribe to our newsletter to get notified.</p>
|
|
<div className="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
|
|
<input
|
|
type="email"
|
|
placeholder="Enter your email"
|
|
value={emailSubscription}
|
|
onChange={(e) => setEmailSubscription(e.target.value)}
|
|
className="flex-1 px-4 py-2 rounded-lg text-black"
|
|
/>
|
|
<button className="bg-white text-nest-pink px-6 py-2 rounded-lg font-medium hover:bg-gray-100 transition-colors">
|
|
Subscribe
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<div className="bg-white rounded-lg shadow-sm p-6 mb-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-3 w-5 h-5 text-gray-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<select className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent">
|
|
<option>Location</option>
|
|
<option>Remote</option>
|
|
<option>On-site</option>
|
|
</select>
|
|
<select className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent">
|
|
<option>Seniority</option>
|
|
<option>Junior</option>
|
|
<option>Mid</option>
|
|
<option>Senior</option>
|
|
</select>
|
|
<select className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-nest-pink focus:border-transparent">
|
|
<option>Job type</option>
|
|
<option>Full-time</option>
|
|
<option>Part-time</option>
|
|
<option>Contract</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Jobs */}
|
|
<div className="space-y-4 mb-12">
|
|
{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-6">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.1, 1.0)}>
|
|
{sectionContent}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default JobsSection; |