rosuqt · MingoHaha · Mar 18, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
     "lucide-react": "^0.479.0",
     "next": "15.2.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

diff --git a/src/app/landing/MainLanding.tsx b/src/app/landing/MainLanding.tsx
@@ -4,6 +4,7 @@ import UploadIcon from "./components/icons/UploadIcon";
 import JobMatcher from "./components/icons/JobMatcher";
 import Skills from "./components/icons/Skills";
 
+
 export default function MainLanding() {
   return (
     <div className="relative min-h-screen bg-[#5d4ab1] text-white">

diff --git a/src/app/landing/components/LandingNav.tsx b/src/app/landing/components/LandingNav.tsx
@@ -1,10 +1,14 @@
+import Link from 'next/link';
 export default function LandingNav() {
+
   return (
     <nav className="flex justify-between items-center px-10 py-5">
       <h1 className="text-xl font-bold">InternConnect</h1>
       <div className="space-x-10">
         <a href="#" className="text-white">People</a>
-        <a href="#" className="text-white">Jobs</a>
+        <Link href="/landing/jobs">
+            <button>Jobs</button>
+        </Link>
         <a href="#" className="text-white">Companies</a>
         <a href="#" className="text-white">STI Hiring</a>
         <a href="#" className="font-bold">Employer’s Sign-up</a>

diff --git a/src/app/landing/jobs/JobDetails.tsx b/src/app/landing/jobs/JobDetails.tsx
@@ -0,0 +1,56 @@
+// This is only a placeholder. Replace this with the actual job list database.
+
+import React from "react";
+
+interface Job {
+  title: string;
+  company: string;
+  location: string;
+  description: string;
+  detail: string;
+  jobtype: string;
+  salaryrange: string;
+}
+
+export default function JobDetails({ job }: { job: Job | null }) {
+    if (!job) {
+      return <p className="text-gray-500">Select a job to see details</p>;
+    }
+
+    return (
+      <div className="w-2/3 p-6 bg-white shadow-md rounded-lg">
+        <h3 className="font-bold text-lg">{job.title}</h3>
+        <p className="text-gray-600">{job.company} • {job.location}</p>
+        <p className="mt-4">{job.description}</p>
+
+        {/* Job Details Section */}
+        <div className="mt-4">
+          <h4 className="font-semibold">Job details</h4>
+          <p className="text-sm text-gray-600">Work Type</p>
+          <span className="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded-md">
+            {job.jobtype} {/* Display job type */}
+          </span>
+        </div>
+
+        {/* Salary Range */}
+        <div className="mt-4">
+          <h4 className="font-semibold">Salary Range</h4>
+          <p className="text-sm text-gray-600">{job.salaryrange}</p>
+        </div>
+
+        {/* Location */}
+        <div className="mt-4">
+          <h4 className="font-semibold">Location</h4>
+          <p className="text-sm text-gray-600">{job.location}</p>
+        </div>
+
+        {/* Apply Button */}
+        <div className="mt-4">
+          <button className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
+            Apply Now
+          </button>
+        </div>
+      </div>
+    );
+  }
+
diff --git a/src/app/landing/jobs/JobList.tsx b/src/app/landing/jobs/JobList.tsx
@@ -0,0 +1,80 @@
+//this is only a placeholder. Replace this with the actual job list database
+
+interface Job {
+    title: string;
+    company: string;
+    location: string;
+    description: string;
+    detail: string;
+    jobtype: string;
+    salaryrange: string;
+  }
+
+  interface JobList {
+    onSelectJob: (job: Job) => void;
+  }
+  export default function JobList({ onSelectJob }: JobList) { 
+        const jobs = [
+          {
+            title: "Web Development Intern",
+            company: "CloudConsole",
+            location: "Makati",
+            description: "Assist with optimizing website performance, including improving loading times and responsiveness.",
+            detail: "You will work closely with our development team to enhance website functionality, ensuring smooth user experience across all devices.",
+            jobtype: "Internship",
+            salaryrange: "PHP 10,000 - PHP 15,000",
+          },
+          {
+            title: "Software Engineer Intern",
+            company: "TechCorp",
+            location: "Quezon City",
+            description: "Develop and test software solutions to improve system performance.",
+            detail: "Interns will gain hands-on experience in software development, debugging, and collaborating with senior engineers on live projects.",
+            jobtype: "Internship",
+            salaryrange: "PHP 12,000 - PHP 18,000",
+          },
+          {
+            title: "Marketing Assistant Intern",
+            company: "Marketify",
+            location: "Makati",
+            description: "Assist in marketing campaigns and social media management.",
+            detail: "You will be involved in content creation, digital marketing strategies, and analyzing campaign performance.",
+            jobtype: "OJT",
+            salaryrange: "PHP 8,000 - PHP 12,000",
+          },
+          {
+            title: "Electrical Engineering Intern",
+            company: "PowerGrid Inc.",
+            location: "Pasig",
+            description: "Work on electrical projects and assist in maintenance tasks.",
+            detail: "You will assist in designing, testing, and maintaining electrical systems while ensuring compliance with safety standards.",
+            jobtype: "OJT",
+            salaryrange: "PHP 10,000 - PHP 15,000",
+          },
+          {
+            title: "HR Assistant Intern",
+            company: "PeopleFirst",
+            location: "Taguig",
+            description: "Support HR operations and manage employee records.",
+            detail: "You will assist in recruitment, onboarding, and employee engagement activities, gaining exposure to HR best practices.",
+            jobtype: "Internship",
+            salaryrange: "PHP 8,000 - PHP 12,000",
+          },
+        ];
+
+        return (
+          <div>
+            {jobs.map((job, index) => (
+              <div
+                key={index}
+                className="mb-4 p-4 bg-white shadow-md rounded-lg cursor-pointer"
+                onClick={() => onSelectJob(job)}
+              >
+                <h3 className="font-bold">{job.title}</h3>
+                <p className="text-gray-600">{job.company} • {job.location}</p>
+              </div>
+            ))}
+          </div>
+        );
+      }
+
diff --git a/src/app/landing/jobs/page.tsx b/src/app/landing/jobs/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import JobList from "./JobList";
+import JobDetails from "./JobDetails";
+import Link from "next/link";
+import { FaSearch } from "react-icons/fa";
+
+interface Job {
+  title: string;
+  company: string;
+  location: string;
+  description: string;
+  detail: string;
+  jobtype: string;
+  salaryrange: string;
+}
+
+interface JobListProps {
+  onSelectJob: (job: Job) => void;
+}
+
+export default function Page() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filters, setFilters] = useState({
+    program: "",
+    course: "",
+    remote: "",
+    workType: "",
+  });
+  const [selectedJob, setSelectedJob] = useState<Job | null>(null);
+
+  return (
+    <>
+      {/* Navbar */}
+      <nav className="bg-white shadow-md py-3 px-6 flex justify-between items-center">
+        <div className="flex items-center gap-6">
+          <span className="text-blue-600 font-bold text-lg">InternConnect</span>
+          <div className="hidden md:flex gap-6 text-gray-700 text-sm">
+            <Link href="#" className="hover:text-blue-600">People</Link>
+            <Link href="#" className="hover:text-blue-600">Jobs</Link>
+            <Link href="#" className="hover:text-blue-600">Companies</Link>
+            <Link href="#" className="hover:text-blue-600">STI Hiring</Link>
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <button className="text-blue-600 hover:underline text-sm">Sign in</button>
+          <button className="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700">
+            Employers/Post job
+          </button>
+        </div>
+      </nav>
+
+      {/* Search Bar & Filters */}
+      <div className="flex flex-col items-center mt-4">
+        <div className="flex border rounded-lg overflow-hidden max-w-4xl w-full shadow-lg">
+          <div className="flex items-center px-3 bg-gray-100">
+            <FaSearch className="text-gray-500" />
+          </div>
+          <input
+            type="text"
+            placeholder="Job title, keywords, or company"
+            className="w-full px-3 py-3 outline-none text-lg"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+
+        {/* Dropdown Filters */}
+        <div className="flex gap-4 mt-4">
+          {["Program", "Course", "Remote options", "Work Type"].map((label, index) => (
+            <select
+              key={index}
+              className="border rounded-lg px-4 py-2 shadow-md text-black font-semibold"
+              value={filters[label.toLowerCase() as keyof typeof filters]}
+              onChange={(e) => setFilters({ ...filters, [label.toLowerCase()]: e.target.value })}
+            >
+              <option value="">{label}</option>
+            </select>
+          ))}
+        </div>
+      </div>
+
+      {/* Section Title */}
+      <div className="text-center font-bold text-xl mt-6">
+        Jobs for you
+        <hr className="mt-2 border-t-2 border-gray-300 w-full max-w-6xl mx-auto" />
+      </div>
+
+      {/* Jobs Layout */}
+      <div className="flex mt-6 gap-6 w-full max-w-6xl mx-auto">
+        {/* Left - Job List (Scrollable) */}
+        <div className="w-1/3 h-[500px] overflow-y-auto border-r pr-4">
+          <JobList onSelectJob={setSelectedJob} />
+        </div>
+
+        {/* Right - Job Details */}
+        <div className="w-2/3 p-6 bg-white shadow-md rounded-lg">
+          <JobDetails job={selectedJob} />
+        </div>
+      </div>
+    </>
+  );
+}