Job Board Page

[ArJSarmiento]

The DurianPy website requires a Job Board page to help users discover and apply for relevant job opportunities. This page should be visually appealing, interactive, and responsive, allowing users to search for jobs, filter job listings, and view job details in an intuitive way.

The Job Board will feature a search bar, job cards with filtering tags, a details modal, and a "See More" button for pagination. The design should maintain consistency with DurianPy’s branding, ensuring an engaging and user-friendly experience.

---

Requirements

1. Layout & Design

✅ Hero Section (Job Board Introduction)

• Heading: "Welcome to JOB BOARD" (Mix of bold white and gold text)
• Subtext: "Search and find your dream job now easier than ever. Simply browse and find a job if you need it."
• Search Bar:
  • Input for job title/keyword
  • Dropdown for location filtering
  • Search button (Dark green with white text)

✅ Job Listings Grid

• Display job postings in a structured grid format (3 columns on desktop, 2 on tablets, 1 on mobile).
• Each job card should contain:
  • Company logo
  • Job title & employer name
  • Employment type tags (e.g., Part-Time, Full-Time, Remote)
  • Hourly rate or salary
  • Location
  • Details button

✅ Job Details Modal

• When clicking on "Details", display a modal with:
  • Job description
  • Company details
  • Required skills
  • "Apply Now" button

✅ Pagination / Load More

• A "See More" button at the bottom dynamically loads more job listings.

✅ Mobile Layout Adjustments

• The search bar, job cards, and filters should be stacked for mobile users.
• Job descriptions should open as a full-page modal on mobile.

---

2. Functionality & Technical Details

✅ Search & Filtering

• Implement a search function that filters job listings based on title and keywords.
• Filter options should update job cards dynamically.

✅ Job Details Modal

• Clicking "Details" should open a modal with full job information.
• Ensure the modal closes when clicking outside or pressing Escape.

✅ Pagination / Load More

• The "See More" button should fetch additional job listings dynamically.
• Ensure smooth animations when new jobs appear.

✅ Performance Optimization

• Lazy-load images for company logos to improve page speed.
• Optimize search queries and filters for fast user interactions.

---

3. Implementation Notes

✅ Framework: Next.js
✅ Styling: Tailwind CSS
✅ Data Handling:

• Consider fetching job listings from an API or using a static JSON file for now.
• Ensure job details update dynamically when filtering.

---

Acceptance Criteria

• Search bar filters job listings dynamically.
• Job cards display employer, salary, and employment type correctly.
• Clicking "Details" opens a job details modal with full information.
• Filters update job listings without page reload.
• "See More" button dynamically loads additional jobs.
• Mobile layout is fully responsive, ensuring usability on all devices.

---

References & Design Mockups

📌 Figma Design:
https://www.figma.com/design/dYORpXyS7n3Cf0rHsqT0iz/Final-design-Website?node-id=2582-1501&p=f&t=8tddJ2CtXGXYOoJx-0