Add job board with example data.

src/components/CompanyCard.astro

@@ -0,0 +1,64 @@
+---
+import { type CollectionEntry, getEntry } from "astro:content";
+import { marked } from 'marked';
+
+
+const { company } = Astro.props;
+const { title, logo, website, location, industry, description, socials } = company.data;
+
+const jobFiles = import.meta.glob('../content/companies/*/!(index).md');
+const companiesJobsMap = {};
+
+for (const path in jobFiles) {
+  const match = path.match(/\.\.\/content\/companies\/([^/]+)\/([^/]+)\.md$/);
+  if (match) {
+    const companyId = match[1];
+    if (!companiesJobsMap[companyId]) companiesJobsMap[companyId] = [];
+    companiesJobsMap[companyId].push(await getEntry('jobs', `${companyId}/${match[2]}`));
+  }
+  }
+
+  const jobs = companiesJobsMap[company.id];
+
+  const isCompanyPage = Astro.url.pathname == `/company/${company.id}`;
+
+const html = marked.parse(company.body);
+
+---
+
+<div class="lg:max-w-[400px] flex flex-col gap-6 p-6 rounded-lg shadow-md bg-white text-black">
+  <div class="w-full flex justify-center items-center md:items-center ">
+    <img src={logo} alt={title + " Logo"} class="max-h-[200px] object-contain" />
+  </div>
+  <div class="flex-1">
+    <h2 class="text-2xl font-bold mb-2">
+      { isCompanyPage ?
+          <>{title}</> :
+          <a href={`/company/${company.id}`}>{title}</a>
+      }
+    </h2>
+    <p class="text-gray-600 mb-2">{industry} — {location}</p>
+    <p class="mb-4">{description}</p>
+
+    <div class="flex space-x-4 mb-4">
+      {socials?.linkedin && <a href={socials.linkedin} target="_blank">LinkedIn</a>}
+      {socials?.twitter && <a href={socials.twitter} target="_blank">Twitter</a>}
+    </div>
+
+    <a href={website} target="_blank" class="text-blue-600 underline">Visit Website</a>
+
+    { jobs && (
+      <div class="mt-4">
+        <h3 class="font-semibold">Open Positions:</h3>
+        <ul class="list-disc list-inside">
+          {Object.values(jobs).map(job => (
+            <li><a href={`/company/${job.id}`}>{job.data.title}</a></li>
+          ))}
+        </ul>
+      </div>
+    )}
+
+    { !isCompanyPage && <a class="btn btn-primary mt-6 inline-block" href={`/company/${company.id}`}>Who We Are</a>}
+  </div>
+
+</div>

src/components/CompanyCardBody.astro

@@ -0,0 +1,29 @@
+---
+import { type CollectionEntry, getEntry } from "astro:content";
+import { marked } from 'marked';
+
+
+const { company, full=false, openings=false } = Astro.props;
+const { title, logo, website, location, industry, description, socials } = company.data;
+
+const jobFiles = import.meta.glob('../content/companies/*/!(index).md');
+const jobs: CollectionEntry<'jobs'>[] = [];
+
+for (const path in jobFiles) {
+  const match = path.match(/\.\.\/content\/companies\/([^/]+)\/([^/]+)\.md$/);
+  if (match) {
+    const companyId = company.id;
+    const entry = await getEntry('jobs', `${companyId}/${match[2]}`);
+    if (entry) {
+      jobs.push(entry);
+    }
+  }
+}
+
+const html = marked.parse(company.body);
+
+---
+
+  <div class="mb-4 prose prose-xl prose-li:m-0 prose-ul:m-0 prose-ul:mb-4 prose-a:underline prose-h1:text-text prose-headings:font-title prose-headings:text-text prose-a:text-text hover:prose-a:text-primary-hover prose-strong:text-text prose-strong:font-bold prose-li:marker:text-text mx-auto pb-12 px-6">
+    <article set:html={html} />
+  </div>

src/components/JobCard.astro

@@ -0,0 +1,38 @@
+---
+const { job } = Astro.props;
+const { title, company, location, type, level, salary, tags, description, responsibilities, requirements, benefits, apply_link } = job.data;
+---
+
+<div class="mb-6 last:mb-0">
+  <div class="flex-1 p-6 rounded-lg shadow-md bg-white">
+    <a href={`/company/${job.id}`}>
+      <h2 class="text-3xl font-bold mb-2">{title}</h2>
+    </a>
+    <p class="text-gray-600 mb-2">{level} • {type} • {location}</p>
+    <p class="text-gray-700 mb-4">{salary}</p>
+    <p class="mb-6">{description}</p>
+
+    <h3 class="text-xl font-semibold mb-2">Responsibilities</h3>
+    <ul class="list-disc list-inside mb-4">
+      {responsibilities && responsibilities.map(item => <li>{item}</li>)}
+    </ul>
+
+    <h3 class="text-xl font-semibold mb-2">Requirements</h3>
+    <ul class="list-disc list-inside mb-4">
+      {requirements && requirements.map(item => <li>{item}</li>)}
+    </ul>
+
+    <h3 class="text-xl font-semibold mb-2">Benefits</h3>
+    <ul class="list-disc list-inside mb-6">
+      {benefits && benefits.map(item => <li>{item}</li>)}
+    </ul>
+
+      <a
+        href={apply_link}
+        target="_blank"
+        class="inline-block bg-button hover:bg-button-hover text-text-inverted font-semibold py-2 px-4 rounded-lg shadow transition-colors duration-200"
+>
+        Apply Now
+      </a>
+  </div>
+</div>

src/components/TwoCols.astro

@@ -0,0 +1,13 @@
+---
+const {content, sidebar } = Astro.props;
+---
+  <section class="space-y-12 pb-6 md:p-6">
+    <div class="flex flex-col lg:flex-row-reverse gap-6">
+      <div class="w-full lg:max-w-[400px]  lg:sticky lg:top-6 self-start">
+        <slot name="content"/>
+      </div>
+      <div class="flex-1">
+        <slot name="sidebar" />
+      </div>
+    </div>
+  </section>

src/content/companies/acme-corp/index.md

@@ -0,0 +1,62 @@
+---
+title: "Acme Corp"
+logo: "/logos/eplogo.png"
+website: "https://www.acmecorp.com"
+location: "New York, USA"
+industry: "Technology & Innovation"
+description:
+  "Acme Corp is a leading innovator in tech gadgets and solutions for a smarter
+  world."
+socials:
+  linkedin: "https://linkedin.com/company/acmecorp"
+  twitter: "https://twitter.com/acmecorp"
+---
+
+## About Acme Corp
+
+Acme Corp is at the forefront of technological advancement, pioneering
+cutting-edge solutions in smart devices, automation, and AI-driven platforms.
+Headquartered in New York, USA, Acme has a global presence and a reputation for
+building products that shape the future.
+
+## Our Mission
+
+To make everyday life simpler, more efficient, and connected through intelligent
+technology that enhances how people live, work, and interact.
+
+## What We Do
+
+We specialize in:
+
+- Smart home devices and IoT systems
+- AI-powered personal assistants
+- Innovative consumer electronics
+- Custom enterprise automation solutions
+
+Our products are designed with a user-first mindset, combining seamless
+functionality with elegant design.
+
+## Our Culture
+
+At Acme Corp, innovation is in our DNA. We value:
+
+- **Collaboration** – We work as one team, across all departments and regions.
+- **Creativity** – We foster a culture that encourages bold ideas and
+  experimentation.
+- **Sustainability** – We are committed to responsible tech and minimizing our
+  environmental impact.
+
+## Careers
+
+We're always on the lookout for passionate innovators to join our mission.
+Whether you're a developer, designer, or data scientist, there's a place for you
+at Acme Corp.
+
+👉 [View open roles](https://www.acmecorp.com/careers)
+
+## Connect With Us
+
+- 🌐 Website: [acmecorp.com](https://www.acmecorp.com)
+- 💼 LinkedIn:
+  [linkedin.com/company/acmecorp](https://linkedin.com/company/acmecorp)
+- 🐦 Twitter: [@acmecorp](https://twitter.com/acmecorp)

src/content/companies/acme-corp/product-manager.md

@@ -0,0 +1,27 @@
+---
+title: "Product Manager"
+location: "Remote / New York, USA"
+type: "Full-Time"
+level: "Senior"
+salary: "$90,000 - $120,000 USD"
+tags:
+  - "React"
+  - "TypeScript"
+  - "TailwindCSS"
+description: |
+  Acme Corp is looking for a Senior Frontend Developer to help build cutting-edge web applications. Join our dynamic team and work on exciting projects that impact millions.
+responsibilities:
+  - "Develop and maintain web applications using React and TypeScript."
+  - "Collaborate with cross-functional teams including designers and backend
+    engineers."
+  - "Optimize applications for maximum speed and scalability."
+requirements:
+  - "5+ years experience with modern frontend technologies."
+  - "Strong proficiency in React and TypeScript."
+  - "Experience with TailwindCSS and responsive design."
+benefits:
+  - "Remote-friendly environment."
+  - "Health, dental, and vision insurance."
+  - "Learning and development budget."
+apply_link: "https://careers.acmecorp.com/frontend-developer"
+---

src/content/companies/acme-corp/senior-frontend-developer.md

@@ -0,0 +1,27 @@
+---
+title: "Senior Frontend Developer"
+location: "Remote / New York, USA"
+type: "Full-Time"
+level: "Senior"
+salary: "$90,000 - $120,000 USD"
+tags:
+  - "React"
+  - "TypeScript"
+  - "TailwindCSS"
+description: |
+  Acme Corp is looking for a Senior Frontend Developer to help build cutting-edge web applications. Join our dynamic team and work on exciting projects that impact millions.
+responsibilities:
+  - "Develop and maintain web applications using React and TypeScript."
+  - "Collaborate with cross-functional teams including designers and backend
+    engineers."
+  - "Optimize applications for maximum speed and scalability."
+requirements:
+  - "5+ years experience with modern frontend technologies."
+  - "Strong proficiency in React and TypeScript."
+  - "Experience with TailwindCSS and responsive design."
+benefits:
+  - "Remote-friendly environment."
+  - "Health, dental, and vision insurance."
+  - "Learning and development budget."
+apply_link: "https://careers.acmecorp.com/frontend-developer"
+---

src/content/companies/acme-corp2/index.md

@@ -0,0 +1,62 @@
+---
+title: "Acme Corp 2"
+logo: "/logos/eps.svg"
+website: "https://www.acmecorp.com"
+location: "New York, USA"
+industry: "Technology & Innovation"
+description:
+  "Acme Corp is a leading innovator in tech gadgets and solutions for a smarter
+  world."
+socials:
+  linkedin: "https://linkedin.com/company/acmecorp"
+  twitter: "https://twitter.com/acmecorp"
+---
+
+## About Acme Corp
+
+Acme Corp is at the forefront of technological advancement, pioneering
+cutting-edge solutions in smart devices, automation, and AI-driven platforms.
+Headquartered in New York, USA, Acme has a global presence and a reputation for
+building products that shape the future.
+
+## Our Mission
+
+To make everyday life simpler, more efficient, and connected through intelligent
+technology that enhances how people live, work, and interact.
+
+## What We Do
+
+We specialize in:
+
+- Smart home devices and IoT systems
+- AI-powered personal assistants
+- Innovative consumer electronics
+- Custom enterprise automation solutions
+
+Our products are designed with a user-first mindset, combining seamless
+functionality with elegant design.
+
+## Our Culture
+
+At Acme Corp, innovation is in our DNA. We value:
+
+- **Collaboration** – We work as one team, across all departments and regions.
+- **Creativity** – We foster a culture that encourages bold ideas and
+  experimentation.
+- **Sustainability** – We are committed to responsible tech and minimizing our
+  environmental impact.
+
+## Careers
+
+We're always on the lookout for passionate innovators to join our mission.
+Whether you're a developer, designer, or data scientist, there's a place for you
+at Acme Corp.
+
+👉 [View open roles](https://www.acmecorp.com/careers)
+
+## Connect With Us
+
+- 🌐 Website: [acmecorp.com](https://www.acmecorp.com)
+- 💼 LinkedIn:
+  [linkedin.com/company/acmecorp](https://linkedin.com/company/acmecorp)
+- 🐦 Twitter: [@acmecorp](https://twitter.com/acmecorp)

src/content/companies/acme-corp2/product-manager.md

@@ -0,0 +1,27 @@
+---
+title: "Product Manager"
+location: "Remote / New York, USA"
+type: "Full-Time"
+level: "Senior"
+salary: "$90,000 - $120,000 USD"
+tags:
+  - "React"
+  - "TypeScript"
+  - "TailwindCSS"
+description: |
+  Acme Corp is looking for a Senior Frontend Developer to help build cutting-edge web applications. Join our dynamic team and work on exciting projects that impact millions.
+responsibilities:
+  - "Develop and maintain web applications using React and TypeScript."
+  - "Collaborate with cross-functional teams including designers and backend
+    engineers."
+  - "Optimize applications for maximum speed and scalability."
+requirements:
+  - "5+ years experience with modern frontend technologies."
+  - "Strong proficiency in React and TypeScript."
+  - "Experience with TailwindCSS and responsive design."
+benefits:
+  - "Remote-friendly environment."
+  - "Health, dental, and vision insurance."
+  - "Learning and development budget."
+apply_link: "https://careers.acmecorp.com/frontend-developer"
+---