Update src/app/post-job/page.tsx

src/app/post-job/page.tsx

@@ -2,47 +2,70 @@
 
 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 Link from "next/link";
-import { Briefcase, Mail, MapPin, Sparkles } from "lucide-react";
+import { Briefcase, Mail } from "lucide-react";
+import { useState } from "react";
+
+const navItems = [
+  { name: "Search Jobs", id: "search" },
+  { name: "Post a Job", id: "/post-job" },
+  { name: "Applications", id: "/applications" },
+  { 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: "My Applications", href: "/applications" },
+      { 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: "#" },
+    ],
+  },
+];
 
 export default function PostJobPage() {
-  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 [formData, setFormData] = useState({
+    jobTitle: "",    company: "",    location: "",    province: "",    jobType: "Full-Time",    salaryRange: "",    description: "",    requirements: "",    contactEmail: "",    benefits: ""});
 
-  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 [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
@@ -59,65 +82,265 @@ 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">
-        <FeatureCardEight
-          features={[
-            {
-              id: 1,
-              title: "Create a Job Posting",              description:
-                "Fill in job details, requirements, and salary information. Our intuitive form guides you through every step to create a compelling job listing.",              imageSrc:
-                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=4",              imageAlt: "Job posting creation interface"},
-            {
-              id: 2,
-              title: "Reach Qualified Candidates",              description:
-                "Your job posting is automatically distributed across our network of active job seekers across all 12 Dutch provinces.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=5",              imageAlt: "Candidate reach visualization"},
-            {
-              id: 3,
-              title: "Review Applications",              description:
-                "Manage all incoming applications in one centralized dashboard. Review resumes, cover letters, and candidate profiles easily.",              imageSrc:
-                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=4",              imageAlt: "Application review dashboard"},
-          ]}
-          title="Post a Job in Three Easy Steps"
-          description="Reach thousands of qualified job seekers across the Netherlands and build your dream team."
-          tag="Simple Process"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[{ text: "Start Posting", href: "/post-job" }]}
-          buttonAnimation="slide-up"
-        />
-      </div>
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 pt-32 pb-20">
+        <div className="max-w-2xl mx-auto px-4">
+          <div className="mb-8">
+            <div className="flex items-center gap-3 mb-4">
+              <Briefcase className="w-6 h-6 text-blue-600" />
+              <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">
+                Post Your Job
+              </span>
+            </div>
+            <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-3">
+              Create Your Job Listing
+            </h1>
+            <p className="text-lg text-slate-600">
+              Fill in the details below to post your job opening and reach qualified candidates
+              across the Netherlands.
+            </p>
+          </div>
 
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Newsletter"
-          title="Get Notified About Top Talent"
-          description="Subscribe to receive alerts when qualified candidates match your job requirements. Stay ahead of the competition and hire the best talent."
-          tagIcon={Mail}
-          tagAnimation="slide-up"
-          background={{ variant: "animated-grid" }}
-          useInvertedBackground={false}
-          inputPlaceholder="Enter your company email"
-          buttonText="Subscribe"
-          termsText="We respect your privacy. Unsubscribe anytime from our notifications."
-        />
+          {submitted && (
+            <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+              <p className="text-green-800 font-semibold">✓ Job posted successfully!</p>
+            </div>
+          )}
+
+          <form
+            onSubmit={handleSubmit}
+            className="bg-white rounded-lg shadow-lg p-8 space-y-6"
+          >
+            {/* 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>
+
+            {/* Company */}
+            <div>
+              <label htmlFor="company" className="block text-sm font-semibold text-slate-900 mb-2">
+                Company Name *
+              </label>
+              <input
+                type="text"
+                id="company"
+                name="company"
+                value={formData.company}
+                onChange={handleChange}
+                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>
   );
-}
+}