@barkajs/barka 0.1.0

package/starters/kadoservices/themes/kadoservices/layouts/industry.tsx

@@ -0,0 +1,121 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const Industry: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const fields = content.fields;
+
+  return (
+    <Base {...props}>
+      {/* Hero */}
+      <section class="relative overflow-hidden py-28 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 30% 70%, ${primaryColor}10 0%, transparent 50%)` }} />
+        <div class="relative mx-auto max-w-4xl px-6">
+          <p class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">Industries We Staff</p>
+          <h1 class="text-4xl font-extrabold tracking-[-0.03em] leading-[1.1] sm:text-5xl lg:text-6xl">
+            {content.title}
+          </h1>
+          {fields.short_description && (
+            <p class="mt-8 max-w-2xl text-lg leading-relaxed text-gray-300/90">
+              {fields.short_description}
+            </p>
+          )}
+        </div>
+      </section>
+
+      {/* Challenges */}
+      {fields.challenges && Array.isArray(fields.challenges) && fields.challenges.length > 0 && (
+        <section class="py-24">
+          <div class="mx-auto max-w-5xl px-6">
+            <h2 class="mb-4 text-3xl font-bold tracking-[-0.02em] text-slate-900">Workforce Challenges</h2>
+            <p class="mb-12 text-lg text-slate-500">The hiring problems keeping leaders in this space up at night</p>
+            <div class="grid gap-6 sm:grid-cols-2">
+              {fields.challenges.map((challenge: string) => (
+                <div class="group rounded-2xl border border-gray-100 bg-white p-8 transition-all duration-300 hover:shadow-lg hover:shadow-slate-200/50">
+                  <div class="mb-4 h-1 w-8 rounded transition-all duration-300 group-hover:w-12" style={{ backgroundColor: primaryColor }} />
+                  <p class="leading-relaxed text-slate-600">{challenge}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Solutions */}
+      {fields.solutions && Array.isArray(fields.solutions) && fields.solutions.length > 0 && (
+        <section class="border-t border-gray-100 bg-slate-50 py-24">
+          <div class="mx-auto max-w-5xl px-6">
+            <h2 class="mb-4 text-3xl font-bold tracking-[-0.02em] text-slate-900">Our Staffing Solutions</h2>
+            <p class="mb-16 text-lg text-slate-500">Proven hiring approaches tailored to your sector</p>
+            <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {fields.solutions.map((solution: { title: string; description?: string; url?: string }) => (
+                <div class="group rounded-2xl border border-gray-100 bg-white p-8 transition-all duration-300 hover:border-amber-200 hover:shadow-lg hover:shadow-slate-200/50">
+                  <h3 class="mb-3 text-lg font-semibold tracking-[-0.01em] text-slate-900">{solution.title}</h3>
+                  {solution.description && (
+                    <p class="text-sm leading-relaxed text-slate-500">{solution.description}</p>
+                  )}
+                  {solution.url && (
+                    <a href={solution.url} class="mt-4 inline-flex items-center gap-1 text-sm font-medium transition-colors hover:no-underline" style={{ color: primaryColor }}>
+                      Learn more
+                      <span class="transition-transform duration-200 group-hover:translate-x-1">&rarr;</span>
+                    </a>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Compliance */}
+      {fields.compliance && Array.isArray(fields.compliance) && fields.compliance.length > 0 && (
+        <section class="py-24">
+          <div class="mx-auto max-w-5xl px-6">
+            <h2 class="mb-12 text-3xl font-bold tracking-[-0.02em] text-slate-900">Compliance & Accreditations</h2>
+            <div class="flex flex-wrap gap-4">
+              {fields.compliance.map((badge: string) => (
+                <span class="rounded-xl border-2 px-6 py-3 text-sm font-semibold transition-all duration-200 hover:shadow-md" style={{ borderColor: primaryColor, color: primaryColor }}>
+                  {badge}
+                </span>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Body */}
+      {content.bodyHtml && (
+        <section class="border-t border-gray-100 py-20">
+          <div class="mx-auto max-w-3xl px-6">
+            <div class="prose prose-lg prose-slate max-w-none" dangerouslySetInnerHTML={{ __html: content.bodyHtml }} />
+          </div>
+        </section>
+      )}
+
+      {/* CTA */}
+      <section class="relative overflow-hidden py-24 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 50% 50%, ${primaryColor}12 0%, transparent 60%)` }} />
+        <div class="relative mx-auto max-w-3xl px-6 text-center">
+          <h2 class="text-3xl font-bold tracking-[-0.02em] sm:text-4xl">Partner with staffing experts</h2>
+          <p class="mt-6 text-lg text-gray-300/90">We understand the unique workforce challenges of your sector. Let's solve them together.</p>
+          <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
+            <a href="/contact" class="inline-block rounded-lg px-8 py-3.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-xl hover:no-underline" style={{ backgroundColor: primaryColor }}>
+              Discuss Your Workforce Needs
+            </a>
+            <a href="/case-studies" class="inline-block rounded-lg border border-white/20 px-8 py-3.5 text-sm font-semibold text-white/90 transition-all duration-200 hover:border-white/50 hover:text-white hover:no-underline">
+              See Success Stories
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {props.children}
+    </Base>
+  );
+};
+
+export default Industry;

package/starters/kadoservices/themes/kadoservices/layouts/landing-page.tsx

@@ -0,0 +1,14 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const LandingPage: FC<LayoutProps> = (props) => {
+  return (
+    <Base {...props}>
+      {props.children}
+    </Base>
+  );
+};
+
+export default LandingPage;

package/starters/kadoservices/themes/kadoservices/layouts/page--about.tsx

@@ -0,0 +1,158 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const values = [
+  { title: 'Trust', icon: '◆', desc: 'We build lasting relationships through transparency, honest communication, and always putting people first.' },
+  { title: 'Speed', icon: '◈', desc: 'Time-to-fill matters. Our streamlined processes deliver qualified candidates faster than the competition.' },
+  { title: 'People-First', icon: '◇', desc: 'Every placement is a person. We invest in understanding candidates and clients to create perfect matches.' },
+  { title: 'Local Expertise', icon: '○', desc: 'Deep knowledge of regional labor markets, salary benchmarks, and workforce regulations across Poland.' },
+];
+
+const milestones = [
+  { year: '2009', text: 'Founded in Warsaw with a team of five recruiters' },
+  { year: '2012', text: 'Opened Kraków office — first 1,000 placements' },
+  { year: '2014', text: 'Expanded to Wrocław and Gdańsk offices' },
+  { year: '2016', text: 'Łódź office. 5,000 cumulative placements' },
+  { year: '2018', text: 'Launched executive search division' },
+  { year: '2020', text: 'Remote hiring solutions during pandemic — record year' },
+  { year: '2022', text: '10 offices across Poland. 10,000+ placements' },
+  { year: '2024', text: '200+ recruiters. 15,000+ placements per year. 12 offices' },
+];
+
+const PageAbout: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+
+  return (
+    <Base {...props}>
+      {/* Hero with team photo */}
+      <section class="relative overflow-hidden text-white" style={{ minHeight: '520px' }}>
+        <img
+          src="/static/images/article-platform-engineering.jpg"
+          alt="KadoServices team collaborating"
+          class="absolute inset-0 h-full w-full object-cover"
+          loading="eager"
+        />
+        <div class="absolute inset-0" style={{
+          background: `linear-gradient(to bottom, ${navColor}c0 0%, ${navColor}dd 50%, ${navColor}f0 100%)`,
+        }} />
+        <div class="relative z-10 flex min-h-[520px] items-center py-28">
+          <div class="mx-auto max-w-4xl px-6 text-center">
+            <p class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-gray-300">About Us</p>
+            <h1 class="text-4xl font-extrabold tracking-[-0.03em] leading-[1.1] sm:text-5xl lg:text-6xl" style={{ textShadow: '0 2px 20px rgba(0,0,0,0.3)' }}>
+              We connect great people with great companies
+            </h1>
+            <p class="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-gray-200/90">
+              Founded in 2009. 200+ recruiters across 12 offices in Poland. Staffing, recruitment, and workforce solutions for companies of all sizes.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Story — clean prose, lots of white space */}
+      <section class="py-24">
+        <div class="mx-auto max-w-3xl px-6">
+          <h2 class="mb-8 text-3xl font-bold tracking-[-0.02em] text-slate-900">Our Story</h2>
+          <div class="space-y-6 text-lg leading-relaxed text-slate-600">
+            <p>
+              KadoServices was founded in 2009 in Warsaw by a team of five recruiters who believed that staffing could be done differently — with genuine care for candidates, transparent partnerships with employers, and a relentless focus on long-term placements over quick fills.
+            </p>
+            <p>
+              What started as a small recruitment agency has grown into one of Poland's leading staffing and workforce solutions companies. Our growth has been organic and deliberate — every new office, service line, and hire was driven by client demand and a commitment to maintaining the people-first culture that defines us.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Values — 4-column cards */}
+      <section class="border-t border-gray-100 bg-slate-50 py-24">
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="mx-auto mb-16 max-w-2xl text-center">
+            <h2 class="text-3xl font-bold tracking-[-0.02em] text-slate-900">Our Values</h2>
+            <p class="mt-4 text-lg text-slate-500">The principles behind every decision we make</p>
+          </div>
+          <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+            {values.map((v) => (
+              <div class="group rounded-2xl border border-gray-100 bg-white p-8 transition-all duration-300 hover:shadow-xl hover:shadow-slate-200/50">
+                <div class="mb-5 text-2xl" style={{ color: primaryColor }}>{v.icon}</div>
+                <h3 class="mb-3 text-lg font-semibold text-slate-900">{v.title}</h3>
+                <p class="text-sm leading-relaxed text-slate-500">{v.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Mission statement — big centered text */}
+      <section class="py-24">
+        <div class="mx-auto max-w-4xl px-6 text-center">
+          <blockquote class="text-3xl font-bold leading-snug tracking-[-0.02em] text-slate-900 sm:text-4xl">
+            "We <span style={{ color: primaryColor }}>connect</span> because every hire starts with a relationship.
+            <span style={{ color: primaryColor }}> People</span> because they are at the heart of every business.
+            <span style={{ color: primaryColor }}> Great companies</span> because our work has no value unless it creates lasting impact."
+          </blockquote>
+        </div>
+      </section>
+
+      {/* Milestones — clean timeline */}
+      <section class="border-t border-gray-100 bg-slate-50 py-24">
+        <div class="mx-auto max-w-4xl px-6">
+          <h2 class="mb-16 text-center text-3xl font-bold tracking-[-0.02em] text-slate-900">Key Milestones</h2>
+          <div class="space-y-0">
+            {milestones.map((m, i) => (
+              <div class="group flex items-start gap-8 py-6" style={{ borderBottom: i < milestones.length - 1 ? '1px solid #f1f5f9' : 'none' }}>
+                <div class="w-20 shrink-0 text-right text-2xl font-extrabold tracking-[-0.02em]" style={{ color: primaryColor }}>
+                  {m.year}
+                </div>
+                <div class="pt-1 text-base text-slate-600">
+                  {m.text}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Numbers */}
+      <section class="py-24">
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="grid gap-12 text-center sm:grid-cols-2 lg:grid-cols-4">
+            {[
+              { value: '15+', label: 'Years in Staffing' },
+              { value: '15,000+', label: 'Placements Per Year' },
+              { value: '12', label: 'Offices in Poland' },
+              { value: '94%', label: 'Client Retention' },
+            ].map((stat) => (
+              <div>
+                <div class="text-5xl font-extrabold tracking-[-0.03em]" style={{ color: primaryColor }}>{stat.value}</div>
+                <div class="mt-2 text-sm font-medium uppercase tracking-[0.1em] text-slate-400">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section class="relative overflow-hidden py-24 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 50% 50%, ${primaryColor}12 0%, transparent 60%)` }} />
+        <div class="relative mx-auto max-w-3xl px-6 text-center">
+          <h2 class="text-3xl font-bold tracking-[-0.02em] sm:text-4xl">Let's build your team together</h2>
+          <p class="mt-6 text-lg text-gray-300/90">Whether you need one key hire or an entire workforce — we're ready.</p>
+          <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
+            <a href="/contact" class="inline-block rounded-lg px-8 py-3.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-xl hover:no-underline" style={{ backgroundColor: primaryColor }}>
+              Get in Touch
+            </a>
+            <a href="/case-studies" class="inline-block rounded-lg border border-white/20 px-8 py-3.5 text-sm font-semibold text-white/90 transition-all duration-200 hover:border-white/50 hover:text-white hover:no-underline">
+              See Success Stories
+            </a>
+          </div>
+        </div>
+      </section>
+    </Base>
+  );
+};
+
+export default PageAbout;

package/starters/kadoservices/themes/kadoservices/layouts/page--careers.tsx

@@ -0,0 +1,214 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const perks = [
+  { icon: '💰', title: 'Uncapped Commission', desc: 'No ceiling on your earnings. Transparent, competitive commission tiers.' },
+  { icon: '📚', title: 'Recruitment Training', desc: 'Structured onboarding, sourcing workshops, certifications.' },
+  { icon: '🏥', title: 'Health & Wellness', desc: 'Private healthcare, mental health support, gym memberships.' },
+  { icon: '🏖️', title: '26 Days PTO', desc: 'Plus national holidays. Rested recruiters build stronger relationships.' },
+  { icon: '🌍', title: 'Hybrid & Remote', desc: 'Work from 12 offices or from home. Flexibility that fits your lifestyle.' },
+  { icon: '📈', title: 'Career Growth', desc: 'Clear paths from recruiter to team lead to branch manager.' },
+];
+
+const openings = [
+  { title: 'Senior Recruiter — IT', team: 'Tech Staffing', location: 'Warsaw', remote: 'Remote OK', type: 'Full-time', seniority: 'Senior', department: 'Recruitment' },
+  { title: 'Recruitment Consultant — Finance', team: 'Banking & Finance', location: 'Kraków', remote: 'Remote OK', type: 'Full-time', seniority: 'Mid', department: 'Recruitment' },
+  { title: 'Sourcing Specialist', team: 'Talent Acquisition', location: 'Wrocław', remote: 'Remote OK', type: 'Full-time', seniority: 'Junior', department: 'Recruitment' },
+  { title: 'Account Manager — Manufacturing', team: 'Client Relations', location: 'Gdańsk', remote: 'Hybrid', type: 'Full-time', seniority: 'Senior', department: 'Sales' },
+  { title: 'Branch Manager', team: 'Operations', location: 'Łódź', remote: 'On-site', type: 'Full-time', seniority: 'Lead', department: 'Operations' },
+  { title: 'HR Business Partner', team: 'Internal HR', location: 'Warsaw', remote: 'Remote OK', type: 'Full-time', seniority: 'Mid', department: 'HR' },
+  { title: 'Recruiter — Logistics', team: 'Logistics Staffing', location: 'Katowice', remote: 'Hybrid', type: 'Full-time', seniority: 'Junior', department: 'Recruitment' },
+  { title: 'Team Lead — Temporary Staffing', team: 'Temp Division', location: 'Warsaw', remote: 'Hybrid', type: 'Full-time', seniority: 'Lead', department: 'Recruitment' },
+  { title: 'Marketing Specialist', team: 'Marketing', location: 'Warsaw', remote: 'Remote OK', type: 'Full-time', seniority: 'Mid', department: 'Marketing' },
+  { title: 'Payroll Administrator', team: 'Payroll & Admin', location: 'Kraków', remote: 'On-site', type: 'Full-time', seniority: 'Junior', department: 'Operations' },
+];
+
+const locations = ['All Locations', 'Warsaw', 'Kraków', 'Wrocław', 'Gdańsk', 'Łódź', 'Katowice'];
+const departments = ['All Departments', 'Recruitment', 'Sales', 'Operations', 'HR', 'Marketing'];
+const seniorities = ['All Levels', 'Junior', 'Mid', 'Senior', 'Lead'];
+
+const stats = [
+  { number: '200+', label: 'Team members' },
+  { number: '12', label: 'Offices in Poland' },
+  { number: '94%', label: 'Employee satisfaction' },
+  { number: '3.2', label: 'Avg. years tenure' },
+];
+
+const PageCareers: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const t = (k: string) => themeSettings._t?.(k) ?? k;
+  const url = (p: string) => themeSettings._url?.(p) ?? p;
+
+  return (
+    <Base {...props}>
+      {/* Hero — warm amber tint, not dark */}
+      <section class="py-24" style={{ background: 'linear-gradient(180deg, #FFFBEB 0%, #FAFAF9 100%)' }}>
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="grid items-center gap-12 lg:grid-cols-2">
+            <div>
+              <p class="mb-4 text-xs font-semibold uppercase tracking-[0.2em]" style={{ color: primaryColor }}>Careers at KadoServices</p>
+              <h1 class="text-4xl font-extrabold tracking-[-0.03em] leading-[1.1] text-slate-900 sm:text-5xl">
+                Build careers that matter
+              </h1>
+              <p class="mt-6 max-w-lg text-lg leading-relaxed text-slate-600">
+                Join 200+ recruiters connecting top talent with Poland's most ambitious companies. No cold-call quotas — just meaningful work and uncapped earning potential.
+              </p>
+              <div class="mt-8 flex flex-wrap gap-4">
+                <a href="#openings" class="inline-block rounded-lg px-7 py-3.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-lg hover:no-underline" style={{ backgroundColor: primaryColor }}>
+                  View {openings.length} Open Positions
+                </a>
+                <a href="mailto:careers@kadoservices.com" class="inline-block rounded-lg border-2 px-7 py-3.5 text-sm font-semibold transition-all duration-200 hover:no-underline" style={{ borderColor: primaryColor, color: primaryColor }}>
+                  Send Your CV
+                </a>
+              </div>
+            </div>
+            <div class="hidden lg:block">
+              <img src="/static/images/team-meeting.jpg" alt="KadoServices team" class="rounded-2xl shadow-xl" loading="lazy" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Stats strip */}
+      <section class="border-y border-gray-100 bg-white py-10">
+        <div class="mx-auto flex max-w-5xl flex-wrap items-center justify-around gap-8 px-6">
+          {stats.map((s) => (
+            <div class="text-center">
+              <div class="text-3xl font-extrabold" style={{ color: primaryColor }}>{s.number}</div>
+              <div class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-400">{s.label}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Open positions — table with filter tags */}
+      <section class="py-20" id="openings">
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h2 class="text-3xl font-bold tracking-[-0.02em] text-slate-900">Open Positions</h2>
+              <p class="mt-2 text-slate-500">{openings.length} open roles across Poland</p>
+            </div>
+          </div>
+
+          {/* Filter bar */}
+          <div class="mb-8 flex flex-wrap gap-3 rounded-xl border border-gray-100 bg-slate-50 p-4">
+            <div>
+              <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-400">Location</label>
+              <div class="flex flex-wrap gap-1.5">
+                {locations.map((loc, i) => (
+                  <span class={`cursor-default rounded-full px-3 py-1 text-xs font-medium transition-colors ${i === 0 ? 'text-white' : 'bg-white text-slate-600 border border-gray-200'}`} style={i === 0 ? { backgroundColor: primaryColor } : {}}>
+                    {loc}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div class="border-l border-gray-200 pl-3">
+              <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-400">Department</label>
+              <div class="flex flex-wrap gap-1.5">
+                {departments.map((dep, i) => (
+                  <span class={`cursor-default rounded-full px-3 py-1 text-xs font-medium transition-colors ${i === 0 ? 'text-white' : 'bg-white text-slate-600 border border-gray-200'}`} style={i === 0 ? { backgroundColor: primaryColor } : {}}>
+                    {dep}
+                  </span>
+                ))}
+              </div>
+            </div>
+            <div class="border-l border-gray-200 pl-3">
+              <label class="mb-1 block text-[10px] font-semibold uppercase tracking-wider text-slate-400">Level</label>
+              <div class="flex flex-wrap gap-1.5">
+                {seniorities.map((s, i) => (
+                  <span class={`cursor-default rounded-full px-3 py-1 text-xs font-medium transition-colors ${i === 0 ? 'text-white' : 'bg-white text-slate-600 border border-gray-200'}`} style={i === 0 ? { backgroundColor: primaryColor } : {}}>
+                    {s}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Job listings table */}
+          <div class="overflow-hidden rounded-xl border border-gray-100">
+            {/* Table header */}
+            <div class="hidden border-b border-gray-100 bg-slate-50 px-6 py-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400 sm:grid sm:grid-cols-12 sm:gap-4">
+              <div class="col-span-4">Position</div>
+              <div class="col-span-2">Department</div>
+              <div class="col-span-2">Location</div>
+              <div class="col-span-2">Remote</div>
+              <div class="col-span-1">Level</div>
+              <div class="col-span-1"></div>
+            </div>
+            {/* Rows */}
+            {openings.map((job, idx) => (
+              <a
+                href={url('/contact')}
+                class={`group block border-b border-gray-50 px-6 py-5 transition-colors duration-150 hover:bg-amber-50/40 hover:no-underline sm:grid sm:grid-cols-12 sm:items-center sm:gap-4 ${idx % 2 === 0 ? 'bg-white' : 'bg-slate-50/30'}`}
+              >
+                <div class="col-span-4">
+                  <h3 class="text-sm font-semibold text-slate-900 group-hover:text-amber-700">{job.title}</h3>
+                  <p class="mt-0.5 text-xs text-slate-400 sm:hidden">{job.team} · {job.location} · {job.remote}</p>
+                </div>
+                <div class="col-span-2 hidden text-sm text-slate-600 sm:block">{job.team}</div>
+                <div class="col-span-2 hidden text-sm text-slate-600 sm:block">{job.location}</div>
+                <div class="col-span-2 hidden sm:block">
+                  <span class={`rounded-full px-2.5 py-0.5 text-xs font-medium ${job.remote === 'Remote OK' ? 'bg-green-50 text-green-700' : job.remote === 'Hybrid' ? 'bg-blue-50 text-blue-700' : 'bg-gray-100 text-gray-600'}`}>
+                    {job.remote}
+                  </span>
+                </div>
+                <div class="col-span-1 hidden text-xs text-slate-400 sm:block">{job.seniority}</div>
+                <div class="col-span-1 hidden text-right sm:block">
+                  <span class="text-xs font-semibold opacity-0 transition-all duration-200 group-hover:opacity-100" style={{ color: primaryColor }}>Apply &rarr;</span>
+                </div>
+              </a>
+            ))}
+          </div>
+
+          <p class="mt-6 text-sm text-slate-400">
+            Can't find a perfect fit? Send your CV to <a href="mailto:careers@kadoservices.com" class="font-medium hover:no-underline" style={{ color: primaryColor }}>careers@kadoservices.com</a>
+          </p>
+        </div>
+      </section>
+
+      {/* Why join us + Perks */}
+      <section class="border-t border-gray-100 bg-slate-50 py-24">
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="grid gap-16 lg:grid-cols-2">
+            <div>
+              <h2 class="mb-6 text-3xl font-bold tracking-[-0.02em] text-slate-900">Why KadoServices?</h2>
+              <div class="space-y-5 text-base leading-relaxed text-slate-600">
+                <p>We're not a resume factory. Every recruiter here builds real relationships — from placing warehouse operators to sourcing C-level executives.</p>
+                <p>Our culture is built on people-first values. No impossible KPIs, no cold-call quotas. Just meaningful work, uncapped commission, and genuine commitment to your growth.</p>
+                <p>You'll work alongside some of the best recruiters in Poland, with the autonomy to manage your own desk and the support to build your career.</p>
+              </div>
+            </div>
+            <div class="grid gap-4 sm:grid-cols-2">
+              {perks.map((p) => (
+                <div class="rounded-xl border border-gray-100 bg-white p-6 transition-all duration-300 hover:shadow-md">
+                  <div class="mb-3 text-2xl">{p.icon}</div>
+                  <h3 class="mb-1 text-sm font-semibold text-slate-900">{p.title}</h3>
+                  <p class="text-xs leading-relaxed text-slate-500">{p.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Bottom CTA */}
+      <section class="relative overflow-hidden py-24 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 50% 50%, ${primaryColor}12 0%, transparent 60%)` }} />
+        <div class="relative mx-auto max-w-3xl px-6 text-center">
+          <h2 class="text-3xl font-bold tracking-[-0.02em] sm:text-4xl">Don't see your role?</h2>
+          <p class="mt-6 text-lg text-gray-300/90">We're always looking for exceptional recruiters and HR professionals. Send us your CV and we'll reach out when a position opens.</p>
+          <a href="mailto:careers@kadoservices.com" class="mt-10 inline-block rounded-lg px-8 py-3.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-xl hover:no-underline" style={{ backgroundColor: primaryColor }}>
+            Send Your CV
+          </a>
+        </div>
+      </section>
+    </Base>
+  );
+};
+
+export default PageCareers;