add careers

app/api/interests/utils.ts

@@ -0,0 +1,13 @@
+import { promises as fs } from "fs";
+import path from "path";
+import type { Interest } from "./../../../components/types/interests";
+
+export async function getInterestBySlug(
+  slug: string
+): Promise<Interest | undefined> {
+  const filePath = path.join(process.cwd(), "public", "interests.json");
+  const file = await fs.readFile(filePath, "utf-8");
+  const interests: Interest[] = JSON.parse(file);
+
+  return interests.find((interest) => interest.slug === slug);
+}

app/careers/[slug]/page.tsx

@@ -0,0 +1,54 @@
+import { notFound } from "next/navigation";
+import LinkButton from "@/components/linkButton";
+
+const jobOpenings = [
+  {
+    title: "Frontend-utvikler",
+    slug: "frontend-developer",
+    location: "Hjemmekontor",
+    type: "Fulltid",
+    description:
+      "Vi ser etter en frontend-utvikler med erfaring i React og Tailwind CSS.",
+  },
+  {
+    title: "Backend-utvikler",
+    slug: "backend-developer",
+    location: "Oslo, Norge",
+    type: "Deltid",
+    description:
+      "Bli med i backend-teamet vårt og bygg skalerbare API-er med Node.js og PostgreSQL.",
+  },
+];
+
+interface PageProps {
+  params: Promise<{
+    slug: string;
+  }>;
+}
+
+export default async function JobPage({ params }: PageProps) {
+  const { slug } = await params;
+  const job = jobOpenings.find((job) => job.slug === slug);
+
+  if (!job) {
+    notFound();
+  }
+
+  return (
+    <div className="min-h-screen bg-background text-gray-800">
+      <main className="max-w-3xl mx-auto px-6 py-12">
+        <h1 className="text-4xl font-bold mb-4">{job.title}</h1>
+        <p className="text-gray-600 mb-2">
+          {job.location} · {job.type}
+        </p>
+        <p className="my-8 text-lg">{job.description}</p>
+
+        <LinkButton
+          text="Søk nå"
+          url="mailto:jobs@yourcompany.com"
+          className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
+        />
+      </main>
+    </div>
+  );
+}

app/careers/page.tsx

@@ -0,0 +1,67 @@
+import LinkButton from "@/components/linkButton";
+import React from "react";
+
+const jobOpenings = [
+  {
+    title: "Frontend-kompis",
+    location: "Hjemmekontor",
+    type: "Fulltid",
+    description:
+      "Vi ser etter en frontend-utvikler med erfaring i React og Tailwind CSS.",
+    link: "/careers/frontend-developer",
+  },
+  {
+    title: "Backend-kompis",
+    location: "Oslo, Norge",
+    type: "Deltid",
+    description:
+      "Bli med i backend-teamet vårt og bygg skalerbare API-er med Node.js og PostgreSQL.",
+    link: "/careers/backend-developer",
+  },
+];
+
+export default function CareersPage() {
+  return (
+    <div className="min-h-screen bg-background text-background">
+      <main className="max-w-4xl mx-auto px-6 py-12">
+        <section>
+          <h2 className="text-2xl font-semibold mb-6">Ledige stillinger</h2>
+          {jobOpenings.map((job, index) => (
+            <div
+              key={index}
+              className="bg-foreground rounded-xl shadow-md p-6 mb-6 hover:shadow-lg transition-shadow"
+            >
+              <h3 className="text-xl font-bold">{job.title}</h3>
+              <p className="text-sm text-gray-500">
+                {job.location} · {job.type}
+              </p>
+              <p className="mt-2">{job.description}</p>
+              <LinkButton
+                text="Se stilling"
+                url={job.link}
+                className="mt-4 inline-block px-4 py-2 border border-white rounded-md text-white hover:bg-white hover:text-black transition w-fit"
+              />
+            </div>
+          ))}
+        </section>
+
+        <section className="mt-16 text-foreground">
+          <h2 className="text-2xl font-semibold mb-4">
+            Fant du ikke noe som passer?
+          </h2>
+          <p>
+            Vi er alltid på utkikk etter engasjerte mennesker. Send gjerne en
+            åpen søknad til{" "}
+            <a
+              href="mailto:jobs@kompis.com"
+              className="text-foregournd underline"
+            >
+              jobs@kompis.com
+            </a>
+            .
+          </p>
+        </section>
+      </main>
+    </div>
+  );
+}

components/footer.tsx

@@ -8,15 +8,23 @@ export function Footer() {
       <footer className="flex flex-col bottom-0 w-full bg-foreground text-background p-12 border-t">
         <div className="flex flex-row items-center justify-center w-full">
           <p className="uppercase text-lg font-bold">...KOMPIS</p>
-          <Link href="/aboutUs" className="ml-auto flex justify-center">
-            Om oss
-          </Link>
+          <div className="ml-auto flex justify-center gap-4">
+            <Link href="/aboutUs" className="ml-auto flex justify-center">
+              Om oss
+            </Link>
+            <Link href="/careers" className="ml-auto flex justify-center">
+              Jobb
+            </Link>
+          </div>
         </div>
-        <div className="flex flex-row items-center justify-center w-full mt-10 gap-2">
-          <Link href="https://github.com/KaroGil/webathon" target="_blank">
-            <DiGithubBadge size={24} />
-          </Link>
-          <p>Laget av Ninja Turtles 🐢 Mille, Karolina, Johanne og Henrik</p>
+        <div className="flex flex-col items-center justify-center w-full">
+          <div className="flex flex-row items-center justify-center w-full mt-10 gap-2">
+            <Link href="https://github.com/KaroGil/webathon" target="_blank">
+              <DiGithubBadge size={24} />
+            </Link>
+            <p>Laget av Ninja Turtles 🐢 Mille, Karolina, Johanne og Henrik</p>
+          </div>
+          © {new Date().getFullYear()} Your Company. All rights reserved.
         </div>
       </footer>
     </AnimatedIcons>

components/header.tsx

@@ -39,6 +39,9 @@ export function Header() {
       const event = getEventById(parseInt(id));
       setTitle(`${event?.hobby.infinitiv}${ending}`);
       setBade(false);
+    } else if (pathname.startsWith("/careers")) {
+      setTitle(`BLI JOBB${ending}`);
+      setBade(false);
     } else {
       setTitle(`...${ending.toUpperCase()}`);
       setBade(false);