Merge version_2 into main

Merge version_2 into main

src/app/admin/page.tsx

@@ -1,48 +1,108 @@
 "use client";
 
+import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import { useState } from "react";
+import FooterBase from "@/components/sections/footer/FooterBase";
-import { BarChart3, Users, Briefcase, FileText, TrendingUp, LogOut } from "lucide-react";
+import { Users, Briefcase, BarChart3, ChevronDown, Plus, Trash2, Edit2 } from "lucide-react";
 
 const navItems = [
-  { name: "Search Jobs", id: "" },
+  { name: "Dashboard", id: "/admin" },
-  { name: "Post a Job", id: "" },
+  { name: "Jobs", id: "/admin" },
-  { name: "Admin", id: "/admin" },
+  { name: "Users", id: "/admin" },
-  { name: "Browse", id: "" },
+  { name: "Analytics", id: "/admin" },
-  { name: "Contact", id: "" },
+  { name: "Home", id: "/" },
 ];
 
-type TabType = "jobs" | "applications" | "users" | "analytics";
+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: "#" },
+    ],
+  },
+];
+
+interface Job {
+  id: string;
+  title: string;
+  company: string;
+  location: string;
+  status: "active" | "closed";
+  applications: number;
+  postedDate: string;
+}
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: "job_seeker" | "employer";
+  joinDate: string;
+  status: "active" | "inactive";
+}
+
+interface AnalyticsData {
+  totalJobs: number;
+  totalUsers: number;
+  activeApplications: number;
+  successfulPlacements: number;
+}
 
 export default function AdminDashboard() {
-  const [activeTab, setActiveTab] = useState<TabType>("jobs");
+  const [activeTab, setActiveTab] = useState<"dashboard" | "jobs" | "users">("dashboard");
-  const [jobs] = useState([
+  const [jobs, setJobs] = useState<Job[]>([
-    { id: 1, title: "Senior Developer", company: "Tech Corp", status: "Active", applications: 12, posted: "2 days ago" },
+    {
-    { id: 2, title: "Product Manager", company: "Startup Inc", status: "Active", applications: 8, posted: "5 days ago" },
+      id: "1",      title: "Senior React Developer",      company: "TechCorp",      location: "Amsterdam",      status: "active",      applications: 24,
-    { id: 3, title: "Designer", company: "Creative Agency", status: "Inactive", applications: 5, posted: "10 days ago" },
+      postedDate: "2025-01-10"},
+    {
+      id: "2",      title: "UX Designer",      company: "DesignStudio",      location: "Rotterdam",      status: "active",      applications: 18,
+      postedDate: "2025-01-08"},
+    {
+      id: "3",      title: "Backend Engineer",      company: "DataSystems",      location: "Utrecht",      status: "closed",      applications: 42,
+      postedDate: "2024-12-20"},
   ]);
 
-  const [applications] = useState([
+  const [users, setUsers] = useState<User[]>([
-    { id: 1, candidate: "John Smith", position: "Senior Developer", status: "Under Review", appliedDate: "2025-01-20" },
+    {
-    { id: 2, candidate: "Sarah Johnson", position: "Product Manager", status: "Interview", appliedDate: "2025-01-19" },
+      id: "1",      name: "Alice Johnson",      email: "alice@example.com",      role: "job_seeker",      joinDate: "2024-11-15",      status: "active"},
-    { id: 3, candidate: "Mike Davis", position: "Senior Developer", status: "Rejected", appliedDate: "2025-01-18" },
+    {
+      id: "2",      name: "Bob Smith",      email: "bob@example.com",      role: "employer",      joinDate: "2024-10-20",      status: "active"},
+    {
+      id: "3",      name: "Carol White",      email: "carol@example.com",      role: "job_seeker",      joinDate: "2024-09-05",      status: "inactive"},
   ]);
 
-  const [users] = useState([
+  const [analytics] = useState<AnalyticsData>({
-    { id: 1, name: "Alice Chen", email: "alice@example.com", role: "Job Seeker", joined: "2025-01-10", status: "Active" },
+    totalJobs: 156,
-    { id: 2, name: "Bob Wilson", email: "bob@example.com", role: "Employer", joined: "2025-01-05", status: "Active" },
+    totalUsers: 3245,
-    { id: 3, name: "Carol White", email: "carol@example.com", role: "Job Seeker", joined: "2024-12-20", status: "Inactive" },
+    activeApplications: 892,
-  ]);
+    successfulPlacements: 142,
+  });
 
-  const [analytics] = useState({
+  const handleDeleteJob = (id: string) => {
-    totalJobs: 284,
+    setJobs(jobs.filter((job) => job.id !== id));
-    activeApplications: 156,
+  };
-    totalUsers: 2341,
-    avgTimeToHire: "18 days",    monthlyGrowth: "+12.5%",    conversionRate: "8.3%"});
 
-  const handleLogout = () => {
+  const handleDeleteUser = (id: string) => {
-    window.location.href = "/";
+    setUsers(users.filter((user) => user.id !== id));
   };
 
   return (
@@ -50,12 +110,12 @@ export default function AdminDashboard() {
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="medium"
+      contentWidth="smallMedium"
       sizing="mediumLargeSizeLargeTitles"
-      background="none"
+      background="circleGradient"
-      cardStyle="solid"
+      cardStyle="gradient-radial"
-      primaryButtonStyle="gradient"
+      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="solid"
+      secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
@@ -63,214 +123,60 @@ export default function AdminDashboard() {
           brandName="Jobee Admin"
           navItems={navItems}
           button={{
-            text: "Logout",            onClick: handleLogout,
+            text: "Logout",            onClick: () => console.log("Logout"),
           }}
         />
       </div>
 
-      <div className="min-h-screen bg-slate-50 pt-24 pb-12">
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 py-16 px-4">
-        <div className="mx-auto max-w-7xl px-4">
+        <div className="max-w-7xl mx-auto">
-          <h1 className="text-4xl font-bold text-slate-900 mb-8">Admin Dashboard</h1>
+          {/* Header */}
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold text-slate-900 mb-2">Admin Dashboard</h1>
+            <p className="text-slate-600">Manage jobs, users, and view analytics</p>
+          </div>
 
           {/* Tab Navigation */}
-          <div className="flex gap-4 mb-8 border-b border-slate-200">
+          <div className="flex gap-4 mb-8">
             <button
-              onClick={() => setActiveTab("jobs")}
+              onClick={() => setActiveTab("dashboard")}
-              className={`pb-4 px-4 font-semibold transition-colors ${
+              className={`px-6 py-3 rounded-lg font-semibold transition-all ${
-                activeTab === "jobs"
+                activeTab === "dashboard"
-                  ? "text-blue-600 border-b-2 border-blue-600"
+                  ? "bg-blue-600 text-white shadow-lg"
-                  : "text-slate-600 hover:text-slate-900"
+                  : "bg-white text-slate-700 hover:bg-slate-100"
               }`}
             >
-              <div className="flex items-center gap-2">
+              <BarChart3 className="inline mr-2" size={20} />
-                <Briefcase size={20} />
+              Dashboard
-                Job Management
-              </div>
             </button>
             <button
-              onClick={() => setActiveTab("applications")}
+              onClick={() => setActiveTab("jobs")}
-              className={`pb-4 px-4 font-semibold transition-colors ${
+              className={`px-6 py-3 rounded-lg font-semibold transition-all ${
-                activeTab === "applications"
+                activeTab === "jobs"
-                  ? "text-blue-600 border-b-2 border-blue-600"
+                  ? "bg-blue-600 text-white shadow-lg"
-                  : "text-slate-600 hover:text-slate-900"
+                  : "bg-white text-slate-700 hover:bg-slate-100"
               }`}
             >
-              <div className="flex items-center gap-2">
+              <Briefcase className="inline mr-2" size={20} />
-                <FileText size={20} />
+              Jobs ({jobs.length})
-                Applications
-              </div>
             </button>
             <button
               onClick={() => setActiveTab("users")}
-              className={`pb-4 px-4 font-semibold transition-colors ${
+              className={`px-6 py-3 rounded-lg font-semibold transition-all ${
                 activeTab === "users"
-                  ? "text-blue-600 border-b-2 border-blue-600"
+                  ? "bg-blue-600 text-white shadow-lg"
-                  : "text-slate-600 hover:text-slate-900"
+                  : "bg-white text-slate-700 hover:bg-slate-100"
               }`}
             >
-              <div className="flex items-center gap-2">
+              <Users className="inline mr-2" size={20} />
-                <Users size={20} />
+              Users ({users.length})
-                User Management
-              </div>
-            </button>
-            <button
-              onClick={() => setActiveTab("analytics")}
-              className={`pb-4 px-4 font-semibold transition-colors ${
-                activeTab === "analytics"
-                  ? "text-blue-600 border-b-2 border-blue-600"
-                  : "text-slate-600 hover:text-slate-900"
-              }`}
-            >
-              <div className="flex items-center gap-2">
-                <BarChart3 size={20} />
-                Analytics
-              </div>
             </button>
           </div>
 
-          {/* Job Management Tab */}
+          {/* Dashboard Tab */}
-          {activeTab === "jobs" && (
+          {activeTab === "dashboard" && (
-            <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-              <div className="flex justify-between items-center mb-6">
+              <div className="bg-white rounded-lg p-6 shadow-md">
-                <h2 className="text-2xl font-bold text-slate-900">Job Listings</h2>
-                <button className="px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
-                  + New Job
-                </button>
-              </div>
-              <div className="bg-white rounded-lg shadow overflow-hidden">
-                <table className="w-full">
-                  <thead className="bg-slate-100 border-b border-slate-200">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Job Title</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Company</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applications</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Posted</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {jobs.map((job) => (
-                      <tr key={job.id} className="border-b border-slate-200 hover:bg-slate-50">
-                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{job.title}</td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{job.company}</td>
-                        <td className="px-6 py-4 text-sm">
-                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
-                            job.status === "Active"
-                              ? "bg-green-100 text-green-700"
-                              : "bg-gray-100 text-gray-700"
-                          }`}>
-                            {job.status}
-                          </span>
-                        </td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{job.applications}</td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{job.posted}</td>
-                        <td className="px-6 py-4 text-sm space-x-2">
-                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
-                          <button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Delete</button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-
-          {/* Applications Management Tab */}
-          {activeTab === "applications" && (
-            <div className="space-y-4">
-              <h2 className="text-2xl font-bold text-slate-900 mb-6">Application Management</h2>
-              <div className="bg-white rounded-lg shadow overflow-hidden">
-                <table className="w-full">
-                  <thead className="bg-slate-100 border-b border-slate-200">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Candidate</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Position</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applied Date</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {applications.map((app) => (
-                      <tr key={app.id} className="border-b border-slate-200 hover:bg-slate-50">
-                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{app.candidate}</td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{app.position}</td>
-                        <td className="px-6 py-4 text-sm">
-                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
-                            app.status === "Interview"
-                              ? "bg-blue-100 text-blue-700"
-                              : app.status === "Under Review"
-                              ? "bg-yellow-100 text-yellow-700"
-                              : "bg-red-100 text-red-700"
-                          }`}>
-                            {app.status}
-                          </span>
-                        </td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{app.appliedDate}</td>
-                        <td className="px-6 py-4 text-sm space-x-2">
-                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">View</button>
-                          <button className="px-3 py-1 text-green-600 hover:bg-green-50 rounded transition">Approve</button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-
-          {/* User Management Tab */}
-          {activeTab === "users" && (
-            <div className="space-y-4">
-              <h2 className="text-2xl font-bold text-slate-900 mb-6">User Management</h2>
-              <div className="bg-white rounded-lg shadow overflow-hidden">
-                <table className="w-full">
-                  <thead className="bg-slate-100 border-b border-slate-200">
-                    <tr>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Name</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Email</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Role</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Joined</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
-                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {users.map((user) => (
-                      <tr key={user.id} className="border-b border-slate-200 hover:bg-slate-50">
-                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{user.name}</td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{user.email}</td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{user.role}</td>
-                        <td className="px-6 py-4 text-sm text-slate-600">{user.joined}</td>
-                        <td className="px-6 py-4 text-sm">
-                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
-                            user.status === "Active"
-                              ? "bg-green-100 text-green-700"
-                              : "bg-gray-100 text-gray-700"
-                          }`}>
-                            {user.status}
-                          </span>
-                        </td>
-                        <td className="px-6 py-4 text-sm space-x-2">
-                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
-                          <button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Disable</button>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
-
-          {/* Analytics Tab */}
-          {activeTab === "analytics" && (
-            <div className="space-y-6">
-              <h2 className="text-2xl font-bold text-slate-900 mb-6">Analytics Overview</h2>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-600">
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-slate-600 text-sm font-medium">Total Jobs</p>
@@ -279,56 +185,165 @@ export default function AdminDashboard() {
                   <Briefcase className="text-blue-600" size={40} />
                 </div>
               </div>
-                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-600">
+              <div className="bg-white rounded-lg p-6 shadow-md">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="text-slate-600 text-sm font-medium">Active Applications</p>
-                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.activeApplications}</p>
-                    </div>
-                    <FileText className="text-green-600" size={40} />
-                  </div>
-                </div>
-                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-purple-600">
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-slate-600 text-sm font-medium">Total Users</p>
                     <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalUsers}</p>
                   </div>
-                    <Users className="text-purple-600" size={40} />
+                  <Users className="text-green-600" size={40} />
                 </div>
               </div>
-                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-600">
+              <div className="bg-white rounded-lg p-6 shadow-md">
                 <div className="flex items-center justify-between">
                   <div>
-                      <p className="text-slate-600 text-sm font-medium">Avg Time to Hire</p>
+                    <p className="text-slate-600 text-sm font-medium">Active Applications</p>
-                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.avgTimeToHire}</p>
+                    <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.activeApplications}</p>
                   </div>
-                    <TrendingUp className="text-yellow-600" size={40} />
+                  <ChevronDown className="text-purple-600" size={40} />
                 </div>
               </div>
-                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-600">
+              <div className="bg-white rounded-lg p-6 shadow-md">
                 <div className="flex items-center justify-between">
                   <div>
-                      <p className="text-slate-600 text-sm font-medium">Monthly Growth</p>
+                    <p className="text-slate-600 text-sm font-medium">Successful Placements</p>
-                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.monthlyGrowth}</p>
+                    <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.successfulPlacements}</p>
                   </div>
-                    <BarChart3 className="text-red-600" size={40} />
+                  <BarChart3 className="text-orange-600" size={40} />
                 </div>
               </div>
-                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-600">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="text-slate-600 text-sm font-medium">Conversion Rate</p>
-                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.conversionRate}</p>
             </div>
-                    <BarChart3 className="text-indigo-600" size={40} />
+          )}
+
+          {/* Jobs Tab */}
+          {activeTab === "jobs" && (
+            <div className="bg-white rounded-lg shadow-md overflow-hidden">
+              <div className="p-6 border-b border-slate-200 flex justify-between items-center">
+                <h2 className="text-2xl font-bold text-slate-900">Job Management</h2>
+                <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all">
+                  <Plus size={20} />
+                  Add Job
+                </button>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-50 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Title</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Company</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Location</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applications</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {jobs.map((job) => (
+                      <tr key={job.id} className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
+                        <td className="px-6 py-4 text-slate-900 font-medium">{job.title}</td>
+                        <td className="px-6 py-4 text-slate-600">{job.company}</td>
+                        <td className="px-6 py-4 text-slate-600">{job.location}</td>
+                        <td className="px-6 py-4">
+                          <span
+                            className={`px-3 py-1 rounded-full text-sm font-medium ${
+                              job.status === "active"
+                                ? "bg-green-100 text-green-800"
+                                : "bg-red-100 text-red-800"
+                            }`}
+                          >
+                            {job.status.charAt(0).toUpperCase() + job.status.slice(1)}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-slate-600">{job.applications}</td>
+                        <td className="px-6 py-4 flex gap-2">
+                          <button className="p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors">
+                            <Edit2 size={18} />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteJob(job.id)}
+                            className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors"
+                          >
+                            <Trash2 size={18} />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               </div>
             </div>
+          )}
+
+          {/* Users Tab */}
+          {activeTab === "users" && (
+            <div className="bg-white rounded-lg shadow-md overflow-hidden">
+              <div className="p-6 border-b border-slate-200 flex justify-between items-center">
+                <h2 className="text-2xl font-bold text-slate-900">User Management</h2>
+                <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all">
+                  <Plus size={20} />
+                  Add User
+                </button>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-slate-50 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Name</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Email</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Role</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Join Date</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id} className="border-b border-slate-200 hover:bg-slate-50 transition-colors">
+                        <td className="px-6 py-4 text-slate-900 font-medium">{user.name}</td>
+                        <td className="px-6 py-4 text-slate-600">{user.email}</td>
+                        <td className="px-6 py-4 text-slate-600">
+                          <span className="capitalize">{user.role.replace("_", " ")}</span>
+                        </td>
+                        <td className="px-6 py-4 text-slate-600">{user.joinDate}</td>
+                        <td className="px-6 py-4">
+                          <span
+                            className={`px-3 py-1 rounded-full text-sm font-medium ${
+                              user.status === "active"
+                                ? "bg-green-100 text-green-800"
+                                : "bg-gray-100 text-gray-800"
+                            }`}
+                          >
+                            {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 flex gap-2">
+                          <button className="p-2 text-blue-600 hover:bg-blue-50 rounded transition-colors">
+                            <Edit2 size={18} />
+                          </button>
+                          <button
+                            onClick={() => handleDeleteUser(user.id)}
+                            className="p-2 text-red-600 hover:bg-red-50 rounded transition-colors"
+                          >
+                            <Trash2 size={18} />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               </div>
             </div>
           )}
         </div>
       </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Jobee"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
+          columns={footerColumns}
+        />
+      </div>
     </ThemeProvider>
   );
 }

src/app/applications/page.tsx

@@ -3,16 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import FooterBase from "@/components/sections/footer/FooterBase";
+import { FileText, Clock, CheckCircle, XCircle, Mail } from "lucide-react";
 import { useState } from "react";
-import { Briefcase, Clock, CheckCircle, AlertCircle, MapPin, DollarSign, Building2, Calendar, ArrowRight } from "lucide-react";
 
 const navItems = [
   { name: "Search Jobs", id: "search" },
-  { name: "Post a Job", id: "post-job" },
+  { name: "Post a Job", id: "/post-job" },
-  { name: "Admin", id: "admin-login" },
+  { name: "Applications", id: "/applications" },
   { name: "Browse", id: "browse" },
   { name: "Contact", id: "contact" },
-  { name: "Applications", id: "/applications" },
 ];
 
 const footerColumns = [
@@ -20,7 +19,7 @@ const footerColumns = [
     title: "Product",    items: [
       { label: "Search Jobs", href: "/search" },
       { label: "Post a Job", href: "/post-job" },
-      { label: "Browse by Province", href: "#provinces" },
+      { label: "My Applications", href: "/applications" },
       { label: "For Employers", href: "#" },
     ],
   },
@@ -46,81 +45,71 @@ interface Application {
   id: string;
   jobTitle: string;
   company: string;
-  location: string;
+  status: "pending" | "reviewing" | "accepted" | "rejected";
-  salary: string;
   appliedDate: string;
-  status: "pending" | "reviewed" | "accepted" | "rejected";
+  lastUpdate: string;
-  logoSrc?: string;
+  applicantName: string;
+  email: string;
+  appliedPosition?: string;
 }
 
 const mockApplications: Application[] = [
   {
-    id: "1",    jobTitle: "Senior React Developer",    company: "TechFlow Solutions",    location: "Amsterdam, Netherlands",    salary: "€65,000 - €80,000",    appliedDate: "2025-01-15",    status: "reviewed",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=TF"},
+    id: "1",    jobTitle: "Senior Frontend Developer",    company: "Tech Innovations BV",    status: "reviewing",    appliedDate: "2025-01-15",    lastUpdate: "2025-01-18",    applicantName: "John Doe",    email: "john.doe@example.com"},
   {
-    id: "2",    jobTitle: "UX/UI Designer",    company: "Creative Studios Amsterdam",    location: "Amsterdam, Netherlands",    salary: "€50,000 - €65,000",    appliedDate: "2025-01-10",    status: "accepted",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=CSA"},
+    id: "2",    jobTitle: "Product Manager",    company: "Digital Solutions Inc",    status: "pending",    appliedDate: "2025-01-20",    lastUpdate: "2025-01-20",    applicantName: "Jane Smith",    email: "jane.smith@example.com"},
   {
-    id: "3",    jobTitle: "Full Stack Developer",    company: "Innovate Inc",    location: "Rotterdam, Netherlands",    salary: "€55,000 - €70,000",    appliedDate: "2025-01-12",    status: "pending",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=II"},
+    id: "3",    jobTitle: "UX/UI Designer",    company: "Creative Studio Amsterdam",    status: "accepted",    appliedDate: "2025-01-10",    lastUpdate: "2025-01-17",    applicantName: "Alice Johnson",    email: "alice.johnson@example.com"},
   {
-    id: "4",    jobTitle: "Marketing Manager",    company: "Digital Growth Partners",    location: "Utrecht, Netherlands",    salary: "€48,000 - €60,000",    appliedDate: "2025-01-08",    status: "rejected",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=DGP"},
+    id: "4",    jobTitle: "Data Scientist",    company: "AI Labs Netherlands",    status: "rejected",    appliedDate: "2025-01-05",    lastUpdate: "2025-01-16",    applicantName: "Bob Wilson",    email: "bob.wilson@example.com"},
   {
-    id: "5",    jobTitle: "Data Scientist",    company: "Analytics Pro",    location: "The Hague, Netherlands",    salary: "€60,000 - €75,000",    appliedDate: "2025-01-05",    status: "reviewed",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=AP"},
+    id: "5",    jobTitle: "Backend Developer",    company: "Cloud Systems Ltd",    status: "reviewing",    appliedDate: "2025-01-12",    lastUpdate: "2025-01-19",    applicantName: "Charlie Brown",    email: "charlie.brown@example.com"},
-  {
-    id: "6",    jobTitle: "Product Manager",    company: "Tech Ventures",    location: "Eindhoven, Netherlands",    salary: "€65,000 - €85,000",    appliedDate: "2025-01-02",    status: "pending",    logoSrc: "https://api.dicebear.com/7.x/initials/svg?seed=TV"},
 ];
 
-const getStatusColor = (status: string) => {
+export default function ApplicationsPage() {
+  const [applications, setApplications] = useState<Application[]>(mockApplications);
+  const [filterStatus, setFilterStatus] = useState<string>("all");
+  const [selectedApp, setSelectedApp] = useState<Application | null>(null);
+
+  const filteredApplications =
+    filterStatus === "all"
+      ? applications
+      : applications.filter((app) => app.status === filterStatus);
+
+  const getStatusIcon = (status: string) => {
     switch (status) {
+      case "pending":
+        return <Clock className="w-5 h-5 text-yellow-600" />;
+      case "reviewing":
+        return <FileText className="w-5 h-5 text-blue-600" />;
+      case "accepted":
+        return <CheckCircle className="w-5 h-5 text-green-600" />;
+      case "rejected":
+        return <XCircle className="w-5 h-5 text-red-600" />;
+      default:
+        return null;
+    }
+  };
+
+  const getStatusBadgeColor = (status: string) => {
+    switch (status) {
+      case "pending":
+        return "bg-yellow-100 text-yellow-800";
+      case "reviewing":
+        return "bg-blue-100 text-blue-800";
       case "accepted":
         return "bg-green-100 text-green-800";
       case "rejected":
         return "bg-red-100 text-red-800";
-    case "reviewed":
-      return "bg-blue-100 text-blue-800";
-    case "pending":
-      return "bg-yellow-100 text-yellow-800";
       default:
-      return "bg-gray-100 text-gray-800";
+        return "bg-slate-100 text-slate-800";
-  }
-};
-
-const getStatusIcon = (status: string) => {
-  switch (status) {
-    case "accepted":
-      return <CheckCircle className="w-4 h-4" />;
-    case "rejected":
-      return <AlertCircle className="w-4 h-4" />;
-    case "reviewed":
-      return <Clock className="w-4 h-4" />;
-    case "pending":
-      return <Clock className="w-4 h-4" />;
-    default:
-      return <Clock className="w-4 h-4" />;
     }
   };
 
   const getStatusLabel = (status: string) => {
-  switch (status) {
+    return status.charAt(0).toUpperCase() + status.slice(1);
-    case "accepted":
-      return "Accepted";
-    case "rejected":
-      return "Rejected";
-    case "reviewed":
-      return "Under Review";
-    case "pending":
-      return "Pending";
-    default:
-      return status;
-  }
   };
 
-export default function ApplicationsPage() {
-  const [selectedApplication, setSelectedApplication] = useState<Application | null>(null);
-  const [statusFilter, setStatusFilter] = useState<string>("all");
-
-  const filteredApplications = statusFilter === "all"
-    ? mockApplications
-    : mockApplications.filter(app => app.status === statusFilter);
-
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -143,136 +132,86 @@ export default function ApplicationsPage() {
         />
       </div>
 
-      <main className="min-h-screen bg-gradient-to-br from-background via-card to-background">
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 pt-32 pb-20">
-        <div className="container mx-auto px-4 py-16">
+        <div className="max-w-6xl mx-auto px-4">
-          {/* Header Section */}
+          <div className="mb-8">
-          <div className="mb-12">
             <div className="flex items-center gap-3 mb-4">
-              <Briefcase className="w-8 h-8 text-primary-cta" />
+              <Mail className="w-6 h-6 text-blue-600" />
-              <h1 className="text-4xl md:text-5xl font-bold text-foreground">My Applications</h1>
+              <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">
+                My Applications
+              </span>
             </div>
-            <p className="text-lg text-foreground/70 mb-8">
+            <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-3">
-              Track and manage all your job applications in one place. Monitor your application status and stay updated on opportunities.
+              Track Your Applications
+            </h1>
+            <p className="text-lg text-slate-600">
+              Monitor the status of all your job applications and stay updated on each
+              opportunity.
             </p>
-
-            {/* Status Filter */}
-            <div className="flex flex-wrap gap-2">
-              <button
-                onClick={() => setStatusFilter("all")}
-                className={`px-6 py-2 rounded-full font-medium transition-all ${
-                  statusFilter === "all"
-                    ? "bg-primary-cta text-white"
-                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
-                }`}
-              >
-                All Applications ({mockApplications.length})
-              </button>
-              <button
-                onClick={() => setStatusFilter("pending")}
-                className={`px-6 py-2 rounded-full font-medium transition-all ${
-                  statusFilter === "pending"
-                    ? "bg-yellow-500 text-white"
-                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
-                }`}
-              >
-                Pending
-              </button>
-              <button
-                onClick={() => setStatusFilter("reviewed")}
-                className={`px-6 py-2 rounded-full font-medium transition-all ${
-                  statusFilter === "reviewed"
-                    ? "bg-blue-500 text-white"
-                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
-                }`}
-              >
-                Under Review
-              </button>
-              <button
-                onClick={() => setStatusFilter("accepted")}
-                className={`px-6 py-2 rounded-full font-medium transition-all ${
-                  statusFilter === "accepted"
-                    ? "bg-green-500 text-white"
-                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
-                }`}
-              >
-                Accepted
-              </button>
-              <button
-                onClick={() => setStatusFilter("rejected")}
-                className={`px-6 py-2 rounded-full font-medium transition-all ${
-                  statusFilter === "rejected"
-                    ? "bg-red-500 text-white"
-                    : "bg-card border border-accent/30 text-foreground hover:border-accent"
-                }`}
-              >
-                Rejected
-              </button>
-            </div>
           </div>
 
-          {/* Applications Grid */}
+          {/* Filter Tabs */}
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="mb-8 flex flex-wrap gap-3">
-            {/* Application List */}
+            {[
-            <div className="lg:col-span-2">
+              { label: "All", value: "all", count: applications.length },
+              {
+                label: "Pending",                value: "pending",                count: applications.filter((a) => a.status === "pending").length,
+              },
+              {
+                label: "Reviewing",                value: "reviewing",                count: applications.filter((a) => a.status === "reviewing").length,
+              },
+              {
+                label: "Accepted",                value: "accepted",                count: applications.filter((a) => a.status === "accepted").length,
+              },
+              {
+                label: "Rejected",                value: "rejected",                count: applications.filter((a) => a.status === "rejected").length,
+              },
+            ].map((filter) => (
+              <button
+                key={filter.value}
+                onClick={() => setFilterStatus(filter.value)}
+                className={`px-4 py-2 rounded-lg font-semibold transition ${
+                  filterStatus === filter.value
+                    ? "bg-blue-600 text-white"
+                    : "bg-white text-slate-700 hover:bg-slate-100"
+                }`}
+              >
+                {filter.label} ({filter.count})
+              </button>
+            ))}
+          </div>
+
+          {/* Applications List */}
           <div className="space-y-4">
             {filteredApplications.length === 0 ? (
-                  <div className="bg-card border border-accent/20 rounded-2xl p-8 text-center">
+              <div className="text-center py-12 bg-white rounded-lg">
-                    <Briefcase className="w-12 h-12 text-foreground/30 mx-auto mb-4" />
+                <p className="text-slate-600 text-lg">No applications found</p>
-                    <p className="text-foreground/60">No applications found with this status.</p>
               </div>
             ) : (
               filteredApplications.map((app) => (
                 <div
                   key={app.id}
-                      onClick={() => setSelectedApplication(app)}
+                  className="bg-white rounded-lg shadow hover:shadow-md transition p-6 cursor-pointer"
-                      className={`bg-card border border-accent/20 rounded-2xl p-6 cursor-pointer transition-all hover:border-accent/50 hover:shadow-lg ${
+                  onClick={() => setSelectedApp(app)}
-                        selectedApplication?.id === app.id ? "border-primary-cta" : ""
-                      }`}
                 >
-                      <div className="flex gap-4">
+                  <div className="flex items-start justify-between">
-                        {/* Company Logo */}
+                    <div className="flex-1">
-                        <div className="flex-shrink-0">
+                      <div className="flex items-center gap-3 mb-2">
-                          <div className="w-16 h-16 bg-gradient-to-br from-primary-cta/20 to-accent/20 rounded-xl flex items-center justify-center">
+                        <h3 className="text-xl font-bold text-slate-900">{app.jobTitle}</h3>
-                            <Building2 className="w-8 h-8 text-primary-cta" />
+                        <div
-                          </div>
+                          className={`flex items-center gap-1 px-3 py-1 rounded-full text-sm font-semibold ${
-                        </div>
+                            getStatusBadgeColor(app.status)
-
-                        {/* Application Info */}
-                        <div className="flex-grow">
-                          <div className="flex items-start justify-between mb-2">
-                            <div>
-                              <h3 className="text-lg font-bold text-foreground">{app.jobTitle}</h3>
-                              <p className="text-sm text-foreground/60">{app.company}</p>
-                            </div>
-                            <span
-                              className={`px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1 ${
-                                getStatusColor(app.status)
                           }`}
                         >
                           {getStatusIcon(app.status)}
                           {getStatusLabel(app.status)}
-                            </span>
-                          </div>
-
-                          <div className="flex flex-wrap gap-4 text-sm text-foreground/60 mt-3">
-                            <div className="flex items-center gap-1">
-                              <MapPin className="w-4 h-4" />
-                              {app.location}
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <DollarSign className="w-4 h-4" />
-                              {app.salary}
-                            </div>
-                            <div className="flex items-center gap-1">
-                              <Calendar className="w-4 h-4" />
-                              {new Date(app.appliedDate).toLocaleDateString()}
                         </div>
                       </div>
+                      <p className="text-slate-600 mb-2">{app.company}</p>
+                      <div className="text-sm text-slate-500 space-y-1">
+                        <p>Applied: {new Date(app.appliedDate).toLocaleDateString()}</p>
+                        <p>Last Update: {new Date(app.lastUpdate).toLocaleDateString()}</p>
                       </div>
-
-                        {/* Arrow Icon */}
-                        <div className="flex-shrink-0 flex items-center">
-                          <ArrowRight className="w-5 h-5 text-foreground/30" />
                     </div>
                   </div>
                 </div>
@@ -281,68 +220,71 @@ export default function ApplicationsPage() {
           </div>
         </div>
 
-            {/* Application Details Panel */}
+        {/* Detail Modal */}
-            <div className="lg:col-span-1">
+        {selectedApp && (
-              {selectedApplication ? (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-                <div className="bg-card border border-accent/20 rounded-2xl p-6 sticky top-24">
+            <div className="bg-white rounded-lg max-w-2xl w-full max-h-96 overflow-y-auto">
-                  <div className="mb-6">
+              <div className="p-8">
-                    <h2 className="text-2xl font-bold text-foreground mb-2">{selectedApplication.jobTitle}</h2>
+                <div className="flex items-start justify-between mb-6">
-                    <p className="text-foreground/60 mb-4">{selectedApplication.company}</p>
+                  <div>
-                    <span
+                    <h2 className="text-2xl font-bold text-slate-900 mb-2">
-                      className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium ${
+                      {selectedApp.jobTitle}
-                        getStatusColor(selectedApplication.status)
+                    </h2>
+                    <p className="text-slate-600 text-lg">{selectedApp.company}</p>
+                  </div>
+                  <div
+                    className={`flex items-center gap-2 px-4 py-2 rounded-full font-semibold ${
+                      getStatusBadgeColor(selectedApp.status)
                     }`}
                   >
-                      {getStatusIcon(selectedApplication.status)}
+                    {getStatusIcon(selectedApp.status)}
-                      {getStatusLabel(selectedApplication.status)}
+                    {getStatusLabel(selectedApp.status)}
-                    </span>
+                  </div>
                 </div>
 
-                  <div className="space-y-4 border-t border-accent/10 pt-6">
+                <div className="border-t pt-6 space-y-4">
                   <div>
-                      <p className="text-xs font-semibold text-foreground/50 uppercase tracking-wide mb-2">Location</p>
+                    <p className="text-sm text-slate-600">Applicant Name</p>
-                      <div className="flex items-center gap-2">
+                    <p className="text-lg font-semibold text-slate-900">{selectedApp.applicantName}</p>
-                        <MapPin className="w-4 h-4 text-primary-cta" />
-                        <p className="text-foreground">{selectedApplication.location}</p>
                   </div>
-                    </div>
-
                   <div>
-                      <p className="text-xs font-semibold text-foreground/50 uppercase tracking-wide mb-2">Salary Range</p>
+                    <p className="text-sm text-slate-600">Email Address</p>
-                      <div className="flex items-center gap-2">
+                    <p className="text-lg font-semibold text-slate-900">{selectedApp.email}</p>
-                        <DollarSign className="w-4 h-4 text-primary-cta" />
-                        <p className="text-foreground">{selectedApplication.salary}</p>
                   </div>
-                    </div>
+                  <div className="grid grid-cols-2 gap-4">
-
                     <div>
-                      <p className="text-xs font-semibold text-foreground/50 uppercase tracking-wide mb-2">Applied Date</p>
+                      <p className="text-sm text-slate-600">Applied Date</p>
-                      <div className="flex items-center gap-2">
+                      <p className="text-lg font-semibold text-slate-900">
-                        <Calendar className="w-4 h-4 text-primary-cta" />
+                        {new Date(selectedApp.appliedDate).toLocaleDateString()}
-                        <p className="text-foreground">{new Date(selectedApplication.appliedDate).toLocaleDateString()}</p>
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-slate-600">Last Update</p>
+                      <p className="text-lg font-semibold text-slate-900">
+                        {new Date(selectedApp.lastUpdate).toLocaleDateString()}
+                      </p>
                     </div>
                   </div>
                 </div>
 
-                  <div className="mt-6 space-y-2">
+                <div className="border-t mt-6 pt-6">
-                    <button className="w-full bg-primary-cta text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity">
+                  <div className="flex gap-3">
-                      View Application
+                    <button
+                      onClick={() => setSelectedApp(null)}
+                      className="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-900 font-semibold py-2 rounded-lg transition"
+                    >
+                      Close
                     </button>
-                    <button className="w-full bg-card border border-accent/30 text-foreground py-3 rounded-lg font-medium hover:border-accent transition-colors">
+                    <button className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition">
-                      Contact Company
+                      View Full Details
                     </button>
                   </div>
                 </div>
-              ) : (
+              </div>
-                <div className="bg-card border border-accent/20 rounded-2xl p-6 text-center">
+            </div>
-                  <Briefcase className="w-12 h-12 text-foreground/30 mx-auto mb-4" />
-                  <p className="text-foreground/60">Select an application to view details</p>
           </div>
         )}
       </div>
-          </div>
-        </div>
-      </main>
 
       <div id="footer" data-section="footer">
         <FooterBase

src/app/apply/page.tsx

@@ -5,7 +5,7 @@ import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarS
 import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles } from "lucide-react";
+import { Briefcase, Sparkles } from "lucide-react";
 
 export default function ApplyPage() {
   const navItems = [

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 (
+    <div
+      onClick={onClick}
+      className="p-6 rounded-xl bg-card border border-accent/20 hover:border-accent/50 transition-all duration-300 hover:shadow-lg cursor-pointer group"
+    >
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-start gap-4 flex-1">
+          <div className="w-16 h-16 rounded-lg bg-gradient-to-br from-primary-cta to-secondary-cta flex items-center justify-center text-white font-bold text-xl flex-shrink-0 group-hover:shadow-lg transition-shadow">
+            {job.company.charAt(0)}
+          </div>
+          <div className="flex-1">
+            <h3 className="text-xl font-bold text-foreground mb-1 group-hover:text-primary-cta transition-colors">
+              {job.title}
+            </h3>
+            <p className="text-sm text-foreground/70 mb-2">{job.company}</p>
+            <div className="flex items-center gap-4 text-sm text-foreground/60">
+              <div className="flex items-center gap-1">
+                <MapPin size={16} />
+                {job.location}
+              </div>
+              <div className="flex items-center gap-1">
+                <Briefcase size={16} />
+                {job.jobType}
+              </div>
+            </div>
+          </div>
+        </div>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onFavorite(job.id);
+          }}
+          className="p-2 rounded-full hover:bg-accent/10 transition-colors flex-shrink-0"
+        >
+          <Heart
+            size={20}
+            className={isFavorited ? "fill-primary-cta text-primary-cta" : "text-foreground/50"}
+          />
+        </button>
+      </div>
+
+      <p className="text-sm text-foreground/70 mb-4 line-clamp-2">
+        {job.description}
+      </p>
+
+      <div className="flex items-center justify-between">
+        <div className="flex gap-2 items-center">
+          <span className="inline-block px-3 py-1 rounded-lg text-xs bg-background text-foreground/70">
+            {job.category}
+          </span>
+          <span className="text-sm font-semibold text-primary-cta flex items-center gap-1">
+            <DollarSign size={14} />
+            {job.salary}
+          </span>
+        </div>
+        <button className="px-4 py-2 rounded-full bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity text-sm">
+          Apply Now
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function JobListingPage() {
+  const [selectedJob, setSelectedJob] = useState<(typeof mockJobs)[0] | null>(null);
+  const [favorites, setFavorites] = useState<Set<string>>(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 (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Jobee"
+          navItems={navItems}
+          button={{
+            text: "Post a Job",            href: "/post-job"}}
+        />
+      </div>
+
+      <div className="min-h-screen bg-gradient-to-b from-background to-background-accent pt-20 pb-20">
+        <div className="max-w-7xl mx-auto px-4">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Job Listings Column */}
+            <div className="lg:col-span-2">
+              <div className="mb-8">
+                <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-2">
+                  Latest Job Listings
+                </h1>
+                <p className="text-lg text-foreground/70">
+                  {mockJobs.length} positions available
+                </p>
+              </div>
+
+              <div className="space-y-4">
+                {mockJobs.map((job) => (
+                  <JobCard
+                    key={job.id}
+                    job={job}
+                    isFavorited={favorites.has(job.id)}
+                    onFavorite={handleFavorite}
+                    onClick={() => setSelectedJob(job)}
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Job Details Column */}
+            <div className="lg:col-span-1">
+              {selectedJob ? (
+                <div className="sticky top-28 p-6 rounded-xl bg-card border border-accent/20">
+                  <div className="mb-6">
+                    <div className="w-20 h-20 rounded-lg bg-gradient-to-br from-primary-cta to-secondary-cta flex items-center justify-center text-white font-bold text-2xl mb-4">
+                      {selectedJob.company.charAt(0)}
+                    </div>
+                    <h2 className="text-2xl font-bold text-foreground mb-2">
+                      {selectedJob.title}
+                    </h2>
+                    <p className="text-foreground/70 mb-4">{selectedJob.company}</p>
+                    <p className="text-2xl font-bold text-primary-cta mb-4">
+                      {selectedJob.salary}
+                    </p>
+
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleFavorite(selectedJob.id);
+                      }}
+                      className="w-full py-3 rounded-full bg-primary-cta/10 text-primary-cta font-semibold hover:bg-primary-cta/20 transition-colors flex items-center justify-center gap-2 mb-3"
+                    >
+                      <Heart
+                        size={18}
+                        className={favorites.has(selectedJob.id) ? "fill-primary-cta" : ""}
+                      />
+                      {favorites.has(selectedJob.id) ? "Saved" : "Save Job"}
+                    </button>
+                    <button className="w-full py-3 rounded-full bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity">
+                      Apply Now
+                    </button>
+                  </div>
+
+                  <div className="border-t border-accent/20 pt-6">
+                    <h3 className="text-lg font-bold text-foreground mb-4">
+                      Job Details
+                    </h3>
+                    <div className="space-y-3 text-sm">
+                      <div>
+                        <p className="text-foreground/60 mb-1">Posted</p>
+                        <p className="text-foreground font-semibold">
+                          {selectedJob.postedDate}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-foreground/60 mb-1">Location</p>
+                        <p className="text-foreground font-semibold">
+                          {selectedJob.location}, {selectedJob.province}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-foreground/60 mb-1">Job Type</p>
+                        <p className="text-foreground font-semibold">
+                          {selectedJob.jobType}
+                        </p>
+                      </div>
+                      <div>
+                        <p className="text-foreground/60 mb-1">Category</p>
+                        <p className="text-foreground font-semibold">
+                          {selectedJob.category}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="border-t border-accent/20 pt-6 mt-6">
+                    <h3 className="text-lg font-bold text-foreground mb-4">
+                      Requirements
+                    </h3>
+                    <ul className="space-y-2 text-sm">
+                      {selectedJob.requirements.map((req, idx) => (
+                        <li key={idx} className="flex gap-3 text-foreground/70">
+                          <span className="text-primary-cta font-bold flex-shrink-0">
+                            ✓
+                          </span>
+                          <span>{req}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  <div className="border-t border-accent/20 pt-6 mt-6">
+                    <h3 className="text-lg font-bold text-foreground mb-4">
+                      Benefits
+                    </h3>
+                    <ul className="space-y-2 text-sm">
+                      {selectedJob.benefits.map((benefit, idx) => (
+                        <li key={idx} className="flex gap-3 text-foreground/70">
+                          <span className="text-primary-cta font-bold flex-shrink-0">
+                            ★
+                          </span>
+                          <span>{benefit}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              ) : (
+                <div className="sticky top-28 p-6 rounded-xl bg-card border border-accent/20 border-dashed text-center">
+                  <p className="text-foreground/60">
+                    Select a job to view full details
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Jobee"
+          copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,16 +1,11 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./styles/variables.css";
-import "./styles/base.css";
 import "./globals.css";
 
-const inter = Inter({
+const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
-  variable: "--font-inter",  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Jobee - Find Your Dream Job in the Netherlands",  description:
+  title: "Jobee - Dutch Job Listing Platform",  description: "Find your dream job in the Netherlands across all 12 provinces. Connect with top employers and build your career."};
-    "Discover thousands of job opportunities across all 12 Dutch provinces. Connect with top employers and build your career with Jobee."};
 
 export default function RootLayout({
   children,
@@ -22,18 +17,31 @@ export default function RootLayout({
       <body className={`${inter.variable}`}>
         {children}
         <script
+          id="lenis-setup"
           dangerouslySetInnerHTML={{
             __html: `
-              (function() {
+            window.lenis = null;
-                try {
+            if (typeof window !== 'undefined' && window.requestAnimationFrame) {
-                  const theme = localStorage.getItem('theme') || 'light';
+              import('https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1').then(({ default: Lenis }) => {
-                  if (theme === 'dark') {
+                if (window.lenis) return;
-                    document.documentElement.classList.add('dark');
+                window.lenis = new Lenis({
-                  } else {
+                  duration: 1.2,
-                    document.documentElement.classList.remove('dark');
+                  easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+                  direction: 'vertical',
+                  gestureDirection: 'vertical',
+                  smooth: true,
+                  mouseMultiplier: 1,
+                  smoothTouch: false,
+                  touchInertiaMultiplier: 2,
+                  infinite: false,
+                });
+                function raf(time) {
+                  if (window.lenis) window.lenis.raf(time);
+                  requestAnimationFrame(raf);
+                }
+                requestAnimationFrame(raf);
+              }).catch(err => console.log('Lenis load error', err));
             }
-                } catch (e) {}
-              })()
             `,
           }}
         />

src/app/page.tsx

@@ -12,7 +12,7 @@ import { Briefcase, Sparkles, Mail, Quote } from "lucide-react";
 const navItems = [
   { name: "Search Jobs", id: "search" },
   { name: "Post a Job", id: "post-job" },
-  { name: "Admin", id: "admin-login" },
+  { name: "Admin", id: "/admin" },
   { name: "Browse", id: "browse" },
   { name: "Contact", id: "contact" },
 ];
@@ -63,7 +63,8 @@ export default function HomePage() {
           brandName="Jobee"
           navItems={navItems}
           button={{
-            text: "Post a Job",            href: "/post-job"}}
+            text: "Post a Job",            href: "/post-job"
+          }}
         />
       </div>
 
@@ -75,40 +76,43 @@ export default function HomePage() {
           tagIcon={Briefcase}
           tagAnimation="slide-up"
           background={{
-            variant: "animated-grid"}}
+            variant: "animated-grid"
+          }}
           leftCarouselItems={[
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-vector/professional-bookkeeping-postcard-template_23-2149341358.jpg?_wi=1",              imageAlt: "Job Listing Card Design"
-                "http://img.b2bpic.net/free-vector/professional-bookkeeping-postcard-template_23-2149341358.jpg?_wi=1",              imageAlt: "Job Listing Card Design"},
+            },
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1",              imageAlt: "Advanced Search Filter Interface"
-                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=1",              imageAlt: "Advanced Search Filter Interface"},
+            },
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1",              imageAlt: "Admin Dashboard Management"
-                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=1",              imageAlt: "Admin Dashboard Management"},
+            },
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1",              imageAlt: "Application Process Flow"
-                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=1",              imageAlt: "Application Process Flow"},
+            },
           ]}
           rightCarouselItems={[
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1",              imageAlt: "Professional Job Search Workspace"
-                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=1",              imageAlt: "Professional Job Search Workspace"},
+            },
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=2",              imageAlt: "Recruitment Application Steps"
-                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=2",              imageAlt: "Recruitment Application Steps"},
+            },
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=2",              imageAlt: "Recruitment Analytics Dashboard"
-                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=2",              imageAlt: "Recruitment Analytics Dashboard"},
+            },
             {
-              imageSrc:
+              imageSrc: "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=2",              imageAlt: "Job Search Filter Options"
-                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=2",              imageAlt: "Job Search Filter Options"},
+            },
           ]}
           buttons={[
             {
-              text: "Start Searching",              href: "/search"},
+              text: "Start Searching",              href: "/search"
+            },
             {
-              text: "Post a Job",              href: "/post-job"},
+              text: "Post a Job",              href: "/post-job"
+            },
           ]}
           buttonAnimation="slide-up"
           carouselPosition="right"
@@ -127,28 +131,25 @@ export default function HomePage() {
           features={[
             {
               id: 1,
-              title: "Search & Filter",              description:
+              title: "Search & Filter",              description: "Browse thousands of jobs across all Dutch provinces with advanced filtering by location, salary, job type, and category.",              imageSrc: "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=3",              imageAlt: "Advanced search interface"
-                "Browse thousands of jobs across all Dutch provinces with advanced filtering by location, salary, job type, and category.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=3",              imageAlt: "Advanced search interface"},
             {
               id: 2,
-              title: "Apply Easily",              description:
+              title: "Apply Easily",              description: "Submit your application with your resume, cover letter, and personal information in just minutes.",              imageSrc: "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=3",              imageAlt: "Application form process"
-                "Submit your application with your resume, cover letter, and personal information in just minutes.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=3",              imageAlt: "Application form process"},
             {
               id: 3,
-              title: "Connect with Employers",              description:
+              title: "Connect with Employers",              description: "Get matched with top Dutch companies actively hiring and receive direct opportunities from recruiters.",              imageSrc: "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=2",              imageAlt: "Professional networking"
-                "Get matched with top Dutch companies actively hiring and receive direct opportunities from recruiters.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=2",              imageAlt: "Professional networking"},
             {
               id: 4,
-              title: "Land Your Dream Job",              description:
+              title: "Land Your Dream Job",              description: "Track your applications, receive updates, and secure your next career opportunity with confidence.",              imageSrc: "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=3",              imageAlt: "Dashboard tracking"
-                "Track your applications, receive updates, and secure your next career opportunity with confidence.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=3",              imageAlt: "Dashboard tracking"},
           ]}
           buttons={[
             {
-              text: "Browse Jobs",              href: "/search"},
+              text: "Browse Jobs",              href: "/search"
+            },
           ]}
           buttonAnimation="slide-up"
         />
@@ -166,21 +167,17 @@ export default function HomePage() {
           animationType="slide-up"
           testimonials={[
             {
-              id: "1",              name: "Sarah van der Berg",              role: "Software Developer",              testimonial:
+              id: "1",              name: "Sarah van der Berg",              role: "Software Developer",              testimonial: "I found my perfect job within 2 weeks using Jobee. The search filters made it easy to find remote opportunities in Amsterdam that matched my skill set.",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg?_wi=1",              imageAlt: "Sarah van der Berg"
-                "I found my perfect job within 2 weeks using Jobee. The search filters made it easy to find remote opportunities in Amsterdam that matched my skill set.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg?_wi=1",              imageAlt: "Sarah van der Berg"},
             {
-              id: "2",              name: "Jan Pieterzoon",              role: "HR Manager",              testimonial:
+              id: "2",              name: "Jan Pieterzoon",              role: "HR Manager",              testimonial: "As a recruiter, Jobee has revolutionized how we post jobs and connect with talented candidates across the Netherlands. The platform is intuitive and effective.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=1",              imageAlt: "Jan Pieterzoon"
-                "As a recruiter, Jobee has revolutionized how we post jobs and connect with talented candidates across the Netherlands. The platform is intuitive and effective.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=1",              imageAlt: "Jan Pieterzoon"},
             {
-              id: "3",              name: "Emma Dijkstra",              role: "Marketing Specialist",              testimonial:
+              id: "3",              name: "Emma Dijkstra",              role: "Marketing Specialist",              testimonial: "The application process on Jobee is so smooth. I applied for 5 positions and received 3 interview invitations within a week. Highly recommended!",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg?_wi=1",              imageAlt: "Emma Dijkstra"
-                "The application process on Jobee is so smooth. I applied for 5 positions and received 3 interview invitations within a week. Highly recommended!",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg?_wi=1",              imageAlt: "Emma Dijkstra"},
             {
-              id: "4",              name: "Michael Houtstra",              role: "Finance Director",              testimonial:
+              id: "4",              name: "Michael Houtstra",              role: "Finance Director",              testimonial: "We've hired 12 excellent team members through Jobee in the past year. The quality of candidates is outstanding and the platform is incredibly easy to use.",              imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-9543.jpg?_wi=1",              imageAlt: "Michael Houtstra"
-                "We've hired 12 excellent team members through Jobee in the past year. The quality of candidates is outstanding and the platform is incredibly easy to use.",              imageSrc:
+            },
-                "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-9543.jpg?_wi=1",              imageAlt: "Michael Houtstra"},
           ]}
           buttonAnimation="slide-up"
         />
@@ -194,7 +191,8 @@ export default function HomePage() {
           tagIcon={Mail}
           tagAnimation="slide-up"
           background={{
-            variant: "animated-grid"}}
+            variant: "animated-grid"
+          }}
           useInvertedBackground={false}
           inputPlaceholder="Enter your email address"
           buttonText="Subscribe"

src/app/post-job/page.tsx

@@ -2,16 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Mail } from "lucide-react";
+import { Briefcase, Mail } from "lucide-react";
+import { useState } from "react";
 
-export default function PostJobPage() {
 const navItems = [
   { name: "Search Jobs", id: "search" },
-    { name: "Post a Job", id: "post-job" },
+  { name: "Post a Job", id: "/post-job" },
-    { name: "Admin", id: "admin-login" },
+  { name: "Applications", id: "/applications" },
   { name: "Browse", id: "browse" },
   { name: "Contact", id: "contact" },
 ];
@@ -21,7 +19,7 @@ export default function PostJobPage() {
     title: "Product",    items: [
       { label: "Search Jobs", href: "/search" },
       { label: "Post a Job", href: "/post-job" },
-        { label: "Browse by Province", href: "#provinces" },
+      { label: "My Applications", href: "/applications" },
       { label: "For Employers", href: "#" },
     ],
   },
@@ -43,6 +41,32 @@ export default function PostJobPage() {
   },
 ];
 
+export default function PostJobPage() {
+  const [formData, setFormData] = useState({
+    jobTitle: "",    company: "",    location: "",    province: "",    jobType: "Full-Time",    salaryRange: "",    description: "",    requirements: "",    contactEmail: "",    benefits: ""});
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+    >
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Job Posted:", formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({
+        jobTitle: "",        company: "",        location: "",        province: "",        jobType: "Full-Time",        salaryRange: "",        description: "",        requirements: "",        contactEmail: "",        benefits: ""});
+      setSubmitted(false);
+    }, 2000);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -58,63 +82,263 @@ export default function PostJobPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          navItems={navItems}
-          button={{ text: "Post a Job", href: "/post-job" }}
           brandName="Jobee"
+          navItems={navItems}
+          button={{
+            text: "Post a Job",            href: "/post-job"}}
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 pt-32 pb-20">
-        <FeatureCardEight
+        <div className="max-w-2xl mx-auto px-4">
-          features={[
+          <div className="mb-8">
-            {
+            <div className="flex items-center gap-3 mb-4">
-              id: 1,
+              <Briefcase className="w-6 h-6 text-blue-600" />
-              title: "Create a Job Posting",              description:
+              <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">
-                "Fill in job details, requirements, and salary information. Our intuitive form guides you through every step to create a compelling job listing.",              imageSrc:
+                Post Your Job
-                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=4",              imageAlt: "Job posting creation interface"},
+              </span>
-            {
+            </div>
-              id: 2,
+            <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-3">
-              title: "Reach Qualified Candidates",              description:
+              Create Your Job Listing
-                "Your job posting is automatically distributed across our network of active job seekers across all 12 Dutch provinces.",              imageSrc:
+            </h1>
-                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=5",              imageAlt: "Candidate reach visualization"},
+            <p className="text-lg text-slate-600">
-            {
+              Fill in the details below to post your job opening and reach qualified candidates
-              id: 3,
+              across the Netherlands.
-              title: "Review Applications",              description:
+            </p>
-                "Manage all incoming applications in one centralized dashboard. Review resumes, cover letters, and candidate profiles easily.",              imageSrc:
+          </div>
-                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=4",              imageAlt: "Application review dashboard"},
+
-          ]}
+          {submitted && (
-          title="Post a Job in Three Easy Steps"
+            <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
-          description="Reach thousands of qualified job seekers across the Netherlands and build your dream team."
+              <p className="text-green-800 font-semibold">✓ Job posted successfully!</p>
-          tag="Simple Process"
+            </div>
-          tagIcon={Sparkles}
+          )}
-          tagAnimation="slide-up"
+
-          textboxLayout="default"
+          <form
-          useInvertedBackground={false}
+            onSubmit={handleSubmit}
-          buttons={[{ text: "Start Posting", href: "/post-job" }]}
+            className="bg-white rounded-lg shadow-lg p-8 space-y-6"
-          buttonAnimation="slide-up"
+          >
+            {/* Job Title */}
+            <div>
+              <label htmlFor="jobTitle" className="block text-sm font-semibold text-slate-900 mb-2">
+                Job Title *
+              </label>
+              <input
+                type="text"
+                id="jobTitle"
+                name="jobTitle"
+                value={formData.jobTitle}
+                onChange={handleChange}
+                required
+                placeholder="e.g., Senior Software Developer"
+                className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               />
             </div>
 
-      <div id="contact" data-section="contact">
+            {/* Company */}
-        <ContactCenter
+            <div>
-          tag="Newsletter"
+              <label htmlFor="company" className="block text-sm font-semibold text-slate-900 mb-2">
-          title="Get Notified About Top Talent"
+                Company Name *
-          description="Subscribe to receive alerts when qualified candidates match your job requirements. Stay ahead of the competition and hire the best talent."
+              </label>
-          tagIcon={Mail}
+              <input
-          tagAnimation="slide-up"
+                type="text"
-          background={{ variant: "animated-grid" }}
+                id="company"
-          useInvertedBackground={false}
+                name="company"
-          inputPlaceholder="Enter your company email"
+                value={formData.company}
-          buttonText="Subscribe"
+                onChange={handleChange}
-          termsText="We respect your privacy. Unsubscribe anytime from our notifications."
+                required
+                placeholder="Your company name"
+                className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               />
             </div>
 
+            {/* Location */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="location" className="block text-sm font-semibold text-slate-900 mb-2">
+                  City *
+                </label>
+                <input
+                  type="text"
+                  id="location"
+                  name="location"
+                  value={formData.location}
+                  onChange={handleChange}
+                  required
+                  placeholder="e.g., Amsterdam"
+                  className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+              <div>
+                <label htmlFor="province" className="block text-sm font-semibold text-slate-900 mb-2">
+                  Province *
+                </label>
+                <select
+                  id="province"
+                  name="province"
+                  value={formData.province}
+                  onChange={handleChange}
+                  required
+                  className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="">Select Province</option>
+                  <option value="North Holland">North Holland</option>
+                  <option value="South Holland">South Holland</option>
+                  <option value="Utrecht">Utrecht</option>
+                  <option value="Gelderland">Gelderland</option>
+                  <option value="North Brabant">North Brabant</option>
+                  <option value="Overijssel">Overijssel</option>
+                  <option value="Flevoland">Flevoland</option>
+                  <option value="Friesland">Friesland</option>
+                  <option value="Groningen">Groningen</option>
+                  <option value="Drenthe">Drenthe</option>
+                  <option value="Limburg">Limburg</option>
+                  <option value="Zeeland">Zeeland</option>
+                </select>
+              </div>
+            </div>
+
+            {/* Job Type */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label htmlFor="jobType" className="block text-sm font-semibold text-slate-900 mb-2">
+                  Job Type *
+                </label>
+                <select
+                  id="jobType"
+                  name="jobType"
+                  value={formData.jobType}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  <option value="Full-Time">Full-Time</option>
+                  <option value="Part-Time">Part-Time</option>
+                  <option value="Contract">Contract</option>
+                  <option value="Temporary">Temporary</option>
+                  <option value="Internship">Internship</option>
+                </select>
+              </div>
+              <div>
+                <label htmlFor="salaryRange" className="block text-sm font-semibold text-slate-900 mb-2">
+                  Salary Range
+                </label>
+                <input
+                  type="text"
+                  id="salaryRange"
+                  name="salaryRange"
+                  value={formData.salaryRange}
+                  onChange={handleChange}
+                  placeholder="e.g., €2,000 - €3,500"
+                  className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+            </div>
+
+            {/* Description */}
+            <div>
+              <label htmlFor="description" className="block text-sm font-semibold text-slate-900 mb-2">
+                Job Description *
+              </label>
+              <textarea
+                id="description"
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                required
+                rows={4}
+                placeholder="Describe the role, responsibilities, and key tasks..."
+                className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            {/* Requirements */}
+            <div>
+              <label htmlFor="requirements" className="block text-sm font-semibold text-slate-900 mb-2">
+                Requirements *
+              </label>
+              <textarea
+                id="requirements"
+                name="requirements"
+                value={formData.requirements}
+                onChange={handleChange}
+                required
+                rows={4}
+                placeholder="List the required skills, experience, education, and qualifications..."
+                className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            {/* Benefits */}
+            <div>
+              <label htmlFor="benefits" className="block text-sm font-semibold text-slate-900 mb-2">
+                Benefits & Perks
+              </label>
+              <textarea
+                id="benefits"
+                name="benefits"
+                value={formData.benefits}
+                onChange={handleChange}
+                rows={3}
+                placeholder="List benefits such as health insurance, remote work, stock options, etc..."
+                className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            {/* Contact Email */}
+            <div>
+              <label htmlFor="contactEmail" className="block text-sm font-semibold text-slate-900 mb-2">
+                Contact Email *
+              </label>
+              <input
+                type="email"
+                id="contactEmail"
+                name="contactEmail"
+                value={formData.contactEmail}
+                onChange={handleChange}
+                required
+                placeholder="recruiter@company.com"
+                className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            {/* Submit Button */}
+            <div className="flex gap-4 pt-6">
+              <button
+                type="submit"
+                className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg transition duration-200"
+              >
+                Post Job
+              </button>
+              <button
+                type="button"
+                onClick={() =>
+                  setFormData({
+                    jobTitle: "",                    company: "",                    location: "",                    province: "",                    jobType: "Full-Time",                    salaryRange: "",                    description: "",                    requirements: "",                    contactEmail: "",                    benefits: ""})
+                }
+                className="flex-1 bg-slate-200 hover:bg-slate-300 text-slate-900 font-semibold py-3 rounded-lg transition duration-200"
+              >
+                Clear Form
+              </button>
+            </div>
+          </form>
+
+          <div className="mt-8 p-6 bg-blue-50 border border-blue-200 rounded-lg">
+            <h3 className="text-lg font-semibold text-slate-900 mb-2">✓ Tips for a Great Job Listing</h3>
+            <ul className="text-slate-700 space-y-1">
+              <li>• Use clear, descriptive job titles</li>
+              <li>• Include specific requirements and qualifications</li>
+              <li>• Highlight company culture and benefits</li>
+              <li>• Provide accurate salary ranges</li>
+              <li>• Ensure contact information is correct</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
-          columns={footerColumns}
           logoText="Jobee"
           copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
+          columns={footerColumns}
         />
       </div>
     </ThemeProvider>

src/app/search/page.tsx

@@ -1,16 +1,15 @@
 "use client";
 
+import { useState, useMemo } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles, Mail } from "lucide-react";
+import { Search, ChevronDown, MapPin, DollarSign, Briefcase } from "lucide-react";
 
 const navItems = [
-  { name: "Search Jobs", id: "search" },
+  { name: "Search Jobs", id: "/search" },
-  { name: "Post a Job", id: "post-job" },
+  { name: "Post a Job", id: "/post-job" },
-  { name: "Admin", id: "admin-login" },
+  { name: "Admin", id: "/admin-login" },
   { name: "Browse", id: "browse" },
   { name: "Contact", id: "contact" },
 ];
@@ -42,7 +41,115 @@ const footerColumns = [
   },
 ];
 
+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.",    logo: "http://img.b2bpic.net/free-vector/tech-company-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/marketing-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/analytics-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/design-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/sales-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/hr-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/devops-logo_23-2148947635.jpg"},
+  {
+    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.",    logo: "http://img.b2bpic.net/free-vector/product-logo_23-2148947635.jpg"},
+];
+
+const provinces = [
+  "All Provinces",  "North Holland",  "South Holland",  "Utrecht",  "Groningen",  "North Brabant",  "Limburg",  "Friesland",  "Drenthe",  "Flevoland",  "Overijssel",  "Gelderland"];
+
+const categories = [
+  "All Categories",  "Technology",  "Marketing",  "Sales",  "Design",  "Data Science",  "Human Resources",  "Product"];
+
+const jobTypes = ["All Types", "Full-time", "Part-time", "Contract", "Freelance"];
+
 export default function SearchPage() {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedProvince, setSelectedProvince] = useState("All Provinces");
+  const [selectedCategory, setSelectedCategory] = useState("All Categories");
+  const [selectedJobType, setSelectedJobType] = useState("All Types");
+  const [sortBy, setSortBy] = useState("relevant");
+  const [minSalary, setMinSalary] = useState(0);
+  const [maxSalary, setMaxSalary] = useState(150000);
+
+  const filteredJobs = useMemo(() => {
+    let filtered = mockJobs.filter((job) => {
+      const matchesSearch =
+        job.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        job.company.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        job.description.toLowerCase().includes(searchQuery.toLowerCase());
+
+      const matchesProvince =
+        selectedProvince === "All Provinces" ||
+        job.province === selectedProvince;
+
+      const matchesCategory =
+        selectedCategory === "All Categories" ||
+        job.category === selectedCategory;
+
+      const matchesJobType =
+        selectedJobType === "All Types" || job.jobType === selectedJobType;
+
+      const matchesSalary =
+        job.salaryMin >= minSalary && job.salaryMax <= maxSalary;
+
+      return (
+        matchesSearch &&
+        matchesProvince &&
+        matchesCategory &&
+        matchesJobType &&
+        matchesSalary
+      );
+    });
+
+    if (sortBy === "salary-high") {
+      filtered.sort((a, b) => b.salaryMax - a.salaryMax);
+    } else if (sortBy === "salary-low") {
+      filtered.sort((a, b) => a.salaryMin - b.salaryMin);
+    } else if (sortBy === "recent") {
+      filtered.reverse();
+    }
+
+    return filtered;
+  }, [
+    searchQuery,
+    selectedProvince,
+    selectedCategory,
+    selectedJobType,
+    minSalary,
+    maxSalary,
+    sortBy,
+  ]);
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
@@ -65,56 +172,190 @@ export default function SearchPage() {
         />
       </div>
 
-      <div id="features" data-section="features">
+      <div className="min-h-screen bg-gradient-to-b from-background to-background-accent pt-20 pb-20">
-        <FeatureCardEight
+        <div className="max-w-7xl mx-auto px-4">
-          title="Search & Browse Jobs Across the Netherlands"
+          {/* Search Header */}
-          description="Explore our comprehensive job search experience with advanced filters, diverse listings, and tailored opportunities for every career stage."
+          <div className="mb-12">
-          tag="Advanced Search"
+            <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
-          tagIcon={Sparkles}
+              Find Your Dream Job
-          tagAnimation="slide-up"
+            </h1>
-          textboxLayout="default"
+            <p className="text-lg text-foreground/70 mb-8">
-          useInvertedBackground={false}
+              Discover thousands of opportunities across the Netherlands
-          features={[
+            </p>
-            {
+
-              id: 1,
+            {/* Main Search Bar */}
-              title: "Filter by Province",              description:
+            <div className="relative mb-8">
-                "Search jobs from all 12 Dutch provinces including Amsterdam, Rotterdam, Utrecht, and beyond. Find opportunities near you or explore remote positions nationwide.",              imageSrc:
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-foreground/50" />
-                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=4",              imageAlt: "Province filter interface"},
+              <input
-            {
+                type="text"
-              id: 2,
+                placeholder="Search by job title, company, or keywords..."
-              title: "Refine by Category",              description:
+                value={searchQuery}
-                "Browse across multiple industries: Technology, Healthcare, Finance, Engineering, Marketing, Sales, and more. Find roles that match your expertise and interests.",              imageSrc:
+                onChange={(e) => setSearchQuery(e.target.value)}
-                "http://img.b2bpic.net/free-vector/professional-bookkeeping-postcard-template_23-2149341358.jpg?_wi=2",              imageAlt: "Job category options"},
+                className="w-full pl-12 pr-4 py-4 rounded-full bg-card border border-accent/20 text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary-cta"
-            {
-              id: 3,
-              title: "Salary & Experience Level",              description:
-                "Filter by salary range, job type (full-time, part-time, contract), and experience level (entry-level, mid-career, senior) to find the perfect match for your career goals.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/corporate-workers-brainstorming-together_23-2148804568.jpg?_wi=3",              imageAlt: "Salary and level filters"},
-          ]}
-          buttons={[
-            {
-              text: "Start Your Search",              href: "/search"},
-          ]}
-          buttonAnimation="slide-up"
               />
             </div>
 
-      <div id="contact" data-section="contact">
+            {/* Filter Bar */}
-        <ContactCenter
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
-          tag="Save Your Search"
+              {/* Province Filter */}
-          title="Get Personalized Job Recommendations"
+              <div className="relative">
-          description="Create an account and set up job alerts. We'll notify you about new positions matching your criteria so you never miss an opportunity."
+                <select
-          tagIcon={Mail}
+                  value={selectedProvince}
-          tagAnimation="slide-up"
+                  onChange={(e) => setSelectedProvince(e.target.value)}
-          background={{
+                  className="w-full px-4 py-3 rounded-lg bg-card border border-accent/20 text-foreground cursor-pointer appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-primary-cta"
-            variant: "animated-grid"}}
+                >
-          useInvertedBackground={false}
+                  {provinces.map((province) => (
-          inputPlaceholder="Enter your email to get started"
+                    <option key={province} value={province}>
-          buttonText="Create Alert"
+                      {province}
-          termsText="Your preferences are private and secure. Manage your alerts anytime."
+                    </option>
+                  ))}
+                </select>
+                <MapPin className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/50 pointer-events-none" />
+              </div>
+
+              {/* Category Filter */}
+              <div className="relative">
+                <select
+                  value={selectedCategory}
+                  onChange={(e) => setSelectedCategory(e.target.value)}
+                  className="w-full px-4 py-3 rounded-lg bg-card border border-accent/20 text-foreground cursor-pointer appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                >
+                  {categories.map((category) => (
+                    <option key={category} value={category}>
+                      {category}
+                    </option>
+                  ))}
+                </select>
+                <Briefcase className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/50 pointer-events-none" />
+              </div>
+
+              {/* Job Type Filter */}
+              <div className="relative">
+                <select
+                  value={selectedJobType}
+                  onChange={(e) => setSelectedJobType(e.target.value)}
+                  className="w-full px-4 py-3 rounded-lg bg-card border border-accent/20 text-foreground cursor-pointer appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                >
+                  {jobTypes.map((type) => (
+                    <option key={type} value={type}>
+                      {type}
+                    </option>
+                  ))}
+                </select>
+                <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/50 pointer-events-none" />
+              </div>
+
+              {/* Salary Range */}
+              <div className="flex items-center gap-2">
+                <DollarSign className="text-foreground/50" />
+                <input
+                  type="range"
+                  min="0"
+                  max="150000"
+                  step="10000"
+                  value={maxSalary}
+                  onChange={(e) => setMaxSalary(parseInt(e.target.value))}
+                  className="w-full"
                 />
               </div>
 
+              {/* Sort By */}
+              <div className="relative">
+                <select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value)}
+                  className="w-full px-4 py-3 rounded-lg bg-card border border-accent/20 text-foreground cursor-pointer appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                >
+                  <option value="relevant">Most Relevant</option>
+                  <option value="recent">Most Recent</option>
+                  <option value="salary-high">Highest Salary</option>
+                  <option value="salary-low">Lowest Salary</option>
+                </select>
+                <ChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/50 pointer-events-none" />
+              </div>
+            </div>
+
+            {/* Results Count */}
+            <p className="text-sm text-foreground/60">
+              Showing {filteredJobs.length} of {mockJobs.length} jobs
+            </p>
+          </div>
+
+          {/* Job Listings */}
+          <div className="grid grid-cols-1 gap-4">
+            {filteredJobs.length > 0 ? (
+              filteredJobs.map((job) => (
+                <div
+                  key={job.id}
+                  className="p-6 rounded-xl bg-card border border-accent/20 hover:border-accent/50 transition-all duration-300 hover:shadow-lg cursor-pointer"
+                >
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="flex items-start gap-4 flex-1">
+                      <div className="w-16 h-16 rounded-lg bg-gradient-to-br from-primary-cta to-secondary-cta flex items-center justify-center text-white font-bold text-xl flex-shrink-0">
+                        {job.company.charAt(0)}
+                      </div>
+                      <div className="flex-1">
+                        <h3 className="text-xl font-bold text-foreground mb-1">
+                          {job.title}
+                        </h3>
+                        <p className="text-sm text-foreground/70 mb-2">
+                          {job.company}
+                        </p>
+                        <p className="text-sm text-foreground/60">
+                          {job.location}, {job.province}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <p className="text-lg font-bold text-primary-cta mb-2">
+                        {job.salary}
+                      </p>
+                      <span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary-cta/10 text-primary-cta">
+                        {job.jobType}
+                      </span>
+                    </div>
+                  </div>
+
+                  <p className="text-sm text-foreground/70 mb-4 line-clamp-2">
+                    {job.description}
+                  </p>
+
+                  <div className="flex items-center justify-between">
+                    <div className="flex gap-2">
+                      <span className="inline-block px-3 py-1 rounded-lg text-xs bg-background text-foreground/70">
+                        {job.category}
+                      </span>
+                    </div>
+                    <button className="px-4 py-2 rounded-full bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity">
+                      View Details
+                    </button>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="text-center py-12">
+                <p className="text-lg text-foreground/60 mb-4">
+                  No jobs found matching your criteria.
+                </p>
+                <button
+                  onClick={() => {
+                    setSearchQuery("");
+                    setSelectedProvince("All Provinces");
+                    setSelectedCategory("All Categories");
+                    setSelectedJobType("All Types");
+                    setMinSalary(0);
+                    setMaxSalary(150000);
+                  }}
+                  className="px-6 py-2 rounded-full bg-primary-cta text-white font-semibold hover:opacity-90 transition-opacity"
+                >
+                  Clear Filters
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Jobee"

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f9f9f9;
-  --foreground: #1c1c1c;
+  --foreground: #000612e6;
-  --primary-cta: #1c1c1c;
+  --primary-cta: #15479c;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #1c1c1c;
-  --accent: #15479c;
+  --accent: #e2e2e2;
-  --background-accent: #a8cce8;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);