From fbcc591b0e2a04684af095c0f6953d2f77ca7380 Mon Sep 17 00:00:00 2001 From: bender Date: Sun, 8 Mar 2026 22:37:13 +0000 Subject: [PATCH] Add src/app/jobs/page.tsx --- src/app/jobs/page.tsx | 380 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 380 insertions(+) create mode 100644 src/app/jobs/page.tsx diff --git a/src/app/jobs/page.tsx b/src/app/jobs/page.tsx new file mode 100644 index 0000000..bc79a9e --- /dev/null +++ b/src/app/jobs/page.tsx @@ -0,0 +1,380 @@ +"use client"; + +import { useState } from "react"; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered"; +import FooterBase from "@/components/sections/footer/FooterBase"; +import { MapPin, DollarSign, Briefcase, Heart } from "lucide-react"; + +const navItems = [ + { name: "Search Jobs", id: "/search" }, + { name: "Post a Job", id: "/post-job" }, + { name: "Admin", id: "/admin-login" }, + { name: "Browse", id: "browse" }, + { name: "Contact", id: "contact" }, +]; + +const footerColumns = [ + { + title: "Product", items: [ + { label: "Search Jobs", href: "/search" }, + { label: "Post a Job", href: "/post-job" }, + { label: "Browse by Province", href: "#provinces" }, + { label: "For Employers", href: "#" }, + ], + }, + { + title: "Company", items: [ + { label: "About Jobee", href: "#about" }, + { label: "Careers", href: "#" }, + { label: "Contact Us", href: "#contact" }, + { label: "Blog", href: "#" }, + ], + }, + { + title: "Resources", items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms of Service", href: "#" }, + { label: "FAQ", href: "#" }, + { label: "Support", href: "#" }, + ], + }, +]; + +const mockJobs = [ + { + id: "1", title: "Senior Software Engineer", company: "TechCorp Amsterdam", location: "Amsterdam", province: "North Holland", salary: "€80,000 - €120,000", salaryMin: 80000, + salaryMax: 120000, + jobType: "Full-time", category: "Technology", description: + "Join our innovative team as a Senior Software Engineer. We\'re looking for experienced developers with expertise in React, Node.js, and cloud technologies.", fullDescription: + "Join our innovative team as a Senior Software Engineer. We\'re looking for experienced developers with expertise in React, Node.js, and cloud technologies. This role offers the opportunity to work on cutting-edge projects, mentor junior developers, and contribute to architectural decisions.", requirements: [ + "5+ years of software development experience", "Proficiency in React, Node.js, and TypeScript", "Experience with cloud platforms (AWS, GCP, Azure)", "Strong understanding of software design patterns", "Excellent communication skills"], + benefits: [ + "Competitive salary and bonus structure", "Health insurance and wellness programs", "Flexible working hours and remote work options", "Professional development opportunities", "Modern office in Amsterdam city center"], + logo: "http://img.b2bpic.net/free-vector/tech-company-logo_23-2148947635.jpg", postedDate: "2 days ago"}, + { + id: "2", title: "Marketing Manager", company: "Creative Solutions Rotterdam", location: "Rotterdam", province: "South Holland", salary: "€60,000 - €85,000", salaryMin: 60000, + salaryMax: 85000, + jobType: "Full-time", category: "Marketing", description: + "Lead our marketing initiatives and drive brand growth. We seek a strategic marketer with experience in digital marketing and campaign management.", fullDescription: + "Lead our marketing initiatives and drive brand growth. We seek a strategic marketer with experience in digital marketing and campaign management. You\'ll oversee a team of marketing professionals and develop comprehensive marketing strategies to achieve business objectives.", requirements: [ + "7+ years of marketing management experience", "Proven track record in digital marketing campaigns", "Strong analytical and data-driven decision making", "Leadership and team management experience", "Proficiency in marketing automation tools"], + benefits: [ + "Competitive salary package", "Team leadership opportunities", "Conference and training budget", "Flexible working arrangement", "Performance-based bonuses"], + logo: "http://img.b2bpic.net/free-vector/marketing-logo_23-2148947635.jpg", postedDate: "5 days ago"}, + { + id: "3", title: "Data Scientist", company: "Analytics Pro Utrecht", location: "Utrecht", province: "Utrecht", salary: "€70,000 - €110,000", salaryMin: 70000, + salaryMax: 110000, + jobType: "Full-time", category: "Data Science", description: + "Develop advanced analytics solutions for our global clients. Expertise in Python, machine learning, and big data technologies required.", fullDescription: + "Develop advanced analytics solutions for our global clients. Expertise in Python, machine learning, and big data technologies required. Work on complex data challenges, build predictive models, and transform raw data into actionable insights.", requirements: [ + "Advanced degree in Computer Science, Mathematics, or related field", "Proficiency in Python and machine learning libraries", "Experience with big data technologies (Spark, Hadoop)", "Strong SQL and database knowledge", "Experience with data visualization tools"], + benefits: [ + "Excellent salary and benefits", "State-of-the-art computing resources", "Continuous learning opportunities", "Collaborative research environment", "Publication opportunities"], + logo: "http://img.b2bpic.net/free-vector/analytics-logo_23-2148947635.jpg", postedDate: "1 week ago"}, + { + id: "4", title: "UX/UI Designer", company: "Design Studios The Hague", location: "The Hague", province: "South Holland", salary: "€55,000 - €75,000", salaryMin: 55000, + salaryMax: 75000, + jobType: "Full-time", category: "Design", description: + "Create beautiful and intuitive user experiences for our web and mobile applications. Portfolio required.", fullDescription: + "Create beautiful and intuitive user experiences for our web and mobile applications. Portfolio required. Collaborate with product teams, conduct user research, and iterate on designs based on user feedback and analytics.", requirements: [ + "4+ years of UX/UI design experience", "Proficiency in design tools (Figma, Adobe XD)", "Strong portfolio showcasing design work", "Understanding of user research and testing methodologies", "Knowledge of responsive design principles"], + benefits: [ + "Creative and collaborative work environment", "Access to latest design tools and technologies", "Design conference attendance budget", "Flexible work schedule", "Health and wellness benefits"], + logo: "http://img.b2bpic.net/free-vector/design-logo_23-2148947635.jpg", postedDate: "3 days ago"}, + { + id: "5", title: "Sales Executive", company: "Enterprise Solutions Groningen", location: "Groningen", province: "Groningen", salary: "€45,000 - €70,000", salaryMin: 45000, + salaryMax: 70000, + jobType: "Full-time", category: "Sales", description: + "Grow our sales pipeline and build strong client relationships. Commission and bonus structure available.", fullDescription: + "Grow our sales pipeline and build strong client relationships. Commission and bonus structure available. Manage a portfolio of accounts, identify new business opportunities, and achieve sales targets.", requirements: [ + "3+ years of B2B sales experience", "Strong negotiation and closing skills", "CRM software proficiency", "Excellent communication abilities", "Self-motivated and target-driven"], + benefits: [ + "Competitive base salary plus commission", "Performance bonuses", "Sales training and development", "Company car or allowance", "International travel opportunities"], + logo: "http://img.b2bpic.net/free-vector/sales-logo_23-2148947635.jpg", postedDate: "4 days ago"}, + { + id: "6", title: "HR Specialist", company: "People First Leiden", location: "Leiden", province: "South Holland", salary: "€50,000 - €65,000", salaryMin: 50000, + salaryMax: 65000, + jobType: "Part-time", category: "Human Resources", description: + "Support our HR team in recruitment, onboarding, and employee development initiatives.", fullDescription: + "Support our HR team in recruitment, onboarding, and employee development initiatives. Handle administrative HR tasks, coordinate interviews, and support employee relations.", requirements: [ + "3+ years of HR experience", "Knowledge of Dutch employment law", "Proficiency in HR management systems", "Strong organizational skills", "Excellent interpersonal abilities"], + benefits: [ + "Competitive part-time salary", "Flexible working hours", "Professional HR certifications support", "Health insurance", "Staff development programs"], + logo: "http://img.b2bpic.net/free-vector/hr-logo_23-2148947635.jpg", postedDate: "1 week ago"}, + { + id: "7", title: "DevOps Engineer", company: "Cloud Innovations Eindhoven", location: "Eindhoven", province: "North Brabant", salary: "€75,000 - €105,000", salaryMin: 75000, + salaryMax: 105000, + jobType: "Full-time", category: "Technology", description: + "Manage and optimize our cloud infrastructure. Experience with Docker, Kubernetes, and CI/CD pipelines required.", fullDescription: + "Manage and optimize our cloud infrastructure. Experience with Docker, Kubernetes, and CI/CD pipelines required. Build and maintain deployment pipelines, monitor system performance, and implement security best practices.", requirements: [ + "5+ years of DevOps experience", "Expert knowledge of Docker and Kubernetes", "CI/CD pipeline implementation experience", "Strong Linux administration skills", "Cloud platform experience (AWS/GCP/Azure)"], + benefits: [ + "High competitive salary", "Remote work options", "Technical certification support", "Modern tech stack", "Collaborative engineering team"], + logo: "http://img.b2bpic.net/free-vector/devops-logo_23-2148947635.jpg", postedDate: "6 days ago"}, + { + id: "8", title: "Product Manager", company: "Innovation Lab Delft", location: "Delft", province: "South Holland", salary: "€70,000 - €95,000", salaryMin: 70000, + salaryMax: 95000, + jobType: "Full-time", category: "Product", description: + "Lead product strategy and roadmap development for our SaaS platform. Experience with agile methodologies required.", fullDescription: + "Lead product strategy and roadmap development for our SaaS platform. Experience with agile methodologies required. Work cross-functionally with engineering, design, and marketing teams to deliver customer-centric solutions.", requirements: [ + "5+ years of product management experience", "Expertise in SaaS business models", "Proficiency in product management tools", "Strong analytical skills", "Experience with agile and Scrum methodologies"], + benefits: [ + "Attractive salary and equity", "Leadership development programs", "Industry conference attendance", "Flexible work arrangement", "Collaborative innovation environment"], + logo: "http://img.b2bpic.net/free-vector/product-logo_23-2148947635.jpg", postedDate: "2 days ago"}, +]; + +interface JobCardProps { + job: (typeof mockJobs)[0]; + isFavorited: boolean; + onFavorite: (id: string) => void; + onClick: () => void; +} + +function JobCard({ job, isFavorited, onFavorite, onClick }: JobCardProps) { + return ( +
+
+
+
+ {job.company.charAt(0)} +
+
+

+ {job.title} +

+

{job.company}

+
+
+ + {job.location} +
+
+ + {job.jobType} +
+
+
+
+ +
+ +

+ {job.description} +

+ +
+
+ + {job.category} + + + + {job.salary} + +
+ +
+
+ ); +} + +export default function JobListingPage() { + const [selectedJob, setSelectedJob] = useState<(typeof mockJobs)[0] | null>(null); + const [favorites, setFavorites] = useState>(new Set()); + + const handleFavorite = (jobId: string) => { + const newFavorites = new Set(favorites); + if (newFavorites.has(jobId)) { + newFavorites.delete(jobId); + } else { + newFavorites.add(jobId); + } + setFavorites(newFavorites); + }; + + return ( + + + +
+
+
+ {/* Job Listings Column */} +
+
+

+ Latest Job Listings +

+

+ {mockJobs.length} positions available +

+
+ +
+ {mockJobs.map((job) => ( + setSelectedJob(job)} + /> + ))} +
+
+ + {/* Job Details Column */} +
+ {selectedJob ? ( +
+
+
+ {selectedJob.company.charAt(0)} +
+

+ {selectedJob.title} +

+

{selectedJob.company}

+

+ {selectedJob.salary} +

+ + + +
+ +
+

+ Job Details +

+
+
+

Posted

+

+ {selectedJob.postedDate} +

+
+
+

Location

+

+ {selectedJob.location}, {selectedJob.province} +

+
+
+

Job Type

+

+ {selectedJob.jobType} +

+
+
+

Category

+

+ {selectedJob.category} +

+
+
+
+ +
+

+ Requirements +

+
    + {selectedJob.requirements.map((req, idx) => ( +
  • + + ✓ + + {req} +
    • + ))} +
+
+ +
+

+ Benefits +

+
    + {selectedJob.benefits.map((benefit, idx) => ( +
  • + + ★ + + {benefit} +
    • + ))} +
+
+
+ ) : ( +
+

+ Select a job to view full details +

+
+ )} +
+
+
+
+ + + + ); +}