Bob AI: Add job-search page

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import JobSearchPage from "@/pages/JobSearchPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/job-search" element={<JobSearchPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Testimonials",
     "href": "#testimonials"
-  }
+  },
+  { name: "Job Search", href: "/job-search" },
+
 ];
 
   return (

src/pages/JobSearchPage.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { routes } from "@/routes";
+import NavbarCentered from "@/components/ui/NavbarCentered";
+import Input from "@/components/ui/Input";
+import DropdownMenu from "@/components/ui/DropdownMenu";
+import Button from "@/components/ui/Button";
+import Card from "@/components/ui/Card";
+import Tag from "@/components/ui/Tag";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+
+export default function JobSearchPage() {
+  const [keyword, setKeyword] = useState('');
+  const [city, setCity] = useState('');
+  const [category, setCategory] = useState('');
+  const [type, setType] = useState('');
+
+  const cities = [
+    { label: 'Tirana', value: 'tirana' },
+    { label: 'Durrës', value: 'durres' },
+    { label: 'Vlorë', value: 'vlore' },
+    { label: 'Shkodër', value: 'shkoder' }
+  ];
+
+  const categories = [
+    { label: 'IT & Software', value: 'it' },
+    { label: 'Marketing', value: 'marketing' },
+    { label: 'Shitje', value: 'sales' },
+    { label: 'Financë', value: 'finance' }
+  ];
+
+  const types = [
+    { label: 'Full-time', value: 'full-time' },
+    { label: 'Part-time', value: 'part-time' },
+    { label: 'Remote', value: 'remote' }
+  ];
+
+  const jobs = [
+    {
+      id: 1,
+      title: 'Senior React Developer',
+      company: 'TechTirana',
+      location: 'Tirana',
+      type: 'Full-time',
+      salary: '€1,500 - €2,500',
+      description: 'Kërkojmë një zhvillues me përvojë në React për të ndërtuar aplikacione web moderne për klientët tanë ndërkombëtarë.'
+    },
+    {
+      id: 2,
+      title: 'Specialist Marketingu',
+      company: 'Kreativ Agency',
+      location: 'Remote',
+      type: 'Part-time',
+      salary: '€600 - €800',
+      description: 'Menaxhim i rrjeteve sociale, krijim përmbajtjeje dhe optimizim i fushatave reklamuese.'
+    },
+    {
+      id: 3,
+      title: 'Menaxher Shitjesh',
+      company: 'AlbRetail',
+      location: 'Durrës',
+      type: 'Full-time',
+      salary: '€800 + Bonuse',
+      description: 'Drejtimi i ekipit të shitjeve dhe zgjerimi i rrjetit të klientëve në rajonin e bregdetit.'
+    }
+  ];
+
+  return (
+    <div className="min-h-screen bg-background text-foreground flex flex-col">
+      <NavbarCentered
+        logo="PunaIme"
+        navItems={routes.map(r => ({ name: r.label, href: r.path }))}
+        ctaButton={{ text: "Posto Punë", href: "/post-job" }}
+      />
+
+      <main className="flex-grow pt-32 pb-16 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">Gjej Punën Tënde të Ëndrrave</h1>
+          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">Eksploro mundësi punësimi në Shqipëri dhe apliko me një klikim.</p>
+        </div>
+
+        <div className="bg-card border border-border rounded-xl p-4 mb-12 shadow-sm flex flex-col md:flex-row gap-4 items-end">
+          <div className="flex-1 w-full">
+            <label className="block text-sm font-medium mb-1 text-muted-foreground">Fjalë kyçe</label>
+            <Input placeholder="Titulli, kompania..." value={keyword} onChange={(e) => setKeyword(e.target.value)} className="w-full" />
+          </div>
+          <div className="w-full md:w-48">
+            <label className="block text-sm font-medium mb-1 text-muted-foreground">Qyteti</label>
+            <DropdownMenu options={cities} value={city} onChange={setCity} placeholder="Të gjitha" className="w-full" />
+          </div>
+          <div className="w-full md:w-48">
+            <label className="block text-sm font-medium mb-1 text-muted-foreground">Kategoria</label>
+            <DropdownMenu options={categories} value={category} onChange={setCategory} placeholder="Të gjitha" className="w-full" />
+          </div>
+          <div className="w-full md:w-48">
+            <label className="block text-sm font-medium mb-1 text-muted-foreground">Tipi</label>
+            <DropdownMenu options={types} value={type} onChange={setType} placeholder="Të gjitha" className="w-full" />
+          </div>
+          <Button text="Kërko" variant="primary" className="w-full md:w-auto" />
+        </div>
+
+        <div className="space-y-4">
+          {jobs.map(job => (
+            <Card key={job.id} className="p-6 hover:border-primary-cta transition-colors">
+              <div className="flex flex-col md:flex-row justify-between gap-6">
+                <div className="flex-1">
+                  <h2 className="text-xl font-semibold mb-1">{job.title}</h2>
+                  <div className="text-muted-foreground text-sm mb-4">{job.company} • {job.location}</div>
+                  <div className="flex flex-wrap gap-2 mb-4">
+                    <Tag text={job.type} className="bg-background border-border text-muted-foreground" />
+                    <Tag text={job.salary} className="bg-background border-border text-muted-foreground" />
+                  </div>
+                  <p className="text-muted-foreground text-sm line-clamp-2">{job.description}</p>
+                </div>
+                <div className="flex items-center md:items-start justify-end md:justify-start shrink-0">
+                  <Button text="Apliko Tani" variant="primary" />
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </main>
+
+      <FooterSimple
+        brand="PunaIme"
+        copyright="© 2024 PunaIme. Të gjitha të drejtat e rezervuara."
+        columns={[{ title: "Platforma", items: [{ label: "Rreth Nesh", href: "/about" }, { label: "Kontakt", href: "/contact" }] }]}
+        links={[{ label: "Kushtet e Përdorimit", href: "/terms" }]}
+      />
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/job-search', label: 'Job Search', pageFile: 'JobSearchPage' },
 ];