@barkajs/barka 0.1.0

package/starters/kadoservices/themes/kadoservices/layouts/case-study.tsx

@@ -0,0 +1,240 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const CaseStudy: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const url = (p: string) => themeSettings._url?.(p) ?? p;
+  const fields = content.fields;
+  const tags: string[] = fields.tags ?? [];
+  const gallery: { image: string; caption?: string }[] = fields.gallery ?? [];
+
+  const metrics = fields.metrics && Array.isArray(fields.metrics) ? fields.metrics : [];
+
+  return (
+    <Base {...props}>
+      {/* Hero — LIGHT warm background, not dark */}
+      <section class="py-20" style={{ background: 'linear-gradient(180deg, #FFFBEB 0%, #FAFAF9 100%)' }}>
+        <div class="mx-auto max-w-5xl px-6">
+          {/* Breadcrumb */}
+          <nav class="mb-8 flex items-center gap-2 text-sm text-slate-400">
+            <a href={url('/')} class="hover:text-slate-600 hover:no-underline">Home</a>
+            <span>›</span>
+            <a href={url('/case-studies')} class="hover:text-slate-600 hover:no-underline">Success Stories</a>
+            <span>›</span>
+            <span class="text-slate-600">{content.title}</span>
+          </nav>
+
+          {/* Tags as pills */}
+          <div class="mb-4 flex flex-wrap gap-2">
+            {fields.industry && (
+              <span class="rounded-full px-3 py-1 text-xs font-semibold text-white" style={{ backgroundColor: primaryColor }}>
+                {String(fields.industry).replace(/-/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase())}
+              </span>
+            )}
+            {fields.service && (
+              <span class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-slate-600">
+                {String(fields.service).replace(/-/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase())}
+              </span>
+            )}
+          </div>
+
+          <h1 class="text-4xl font-extrabold tracking-[-0.03em] leading-[1.1] text-slate-900 sm:text-5xl">
+            {content.title}
+          </h1>
+
+          {fields.client_name && (
+            <p class="mt-4 text-lg text-slate-500">Client: <span class="font-semibold text-slate-700">{fields.client_name}</span></p>
+          )}
+        </div>
+      </section>
+
+      {/* Metrics — card row (NOT a dark bar like lokatech) */}
+      {metrics.length > 0 && (
+        <section class="border-y border-gray-100 bg-white py-0">
+          <div class="mx-auto max-w-5xl px-6">
+            <div class="grid grid-cols-2 lg:grid-cols-4">
+              {metrics.map((metric: { value: string; label: string }, idx: number) => (
+                <div class={`py-8 text-center ${idx > 0 ? 'border-l border-gray-100' : ''}`}>
+                  <div class="text-3xl font-extrabold tracking-tight" style={{ color: primaryColor }}>{metric.value}</div>
+                  <div class="mt-1 text-xs font-medium uppercase tracking-wider text-slate-400">{metric.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Featured image — full width, rounded, NOT inside dark hero */}
+      {fields.featured_image && (
+        <section class="bg-white py-10">
+          <div class="mx-auto max-w-5xl px-6">
+            <img
+              src={fields.featured_image}
+              alt={content.title}
+              class="w-full rounded-2xl object-cover shadow-lg"
+              style="aspect-ratio: 21/9;"
+              loading="eager"
+            />
+          </div>
+        </section>
+      )}
+
+      {/* Content — full width, NO sidebar */}
+      <section class="bg-white py-16">
+        <div class="mx-auto max-w-3xl px-6">
+
+          {/* Challenge */}
+          {fields.challenge && (
+            <div class="mb-14">
+              <div class="mb-4 flex items-center gap-3">
+                <span class="flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white" style={{ backgroundColor: primaryColor }}>1</span>
+                <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">The Challenge</h2>
+              </div>
+              <div class="ml-11 text-base leading-relaxed text-slate-600" dangerouslySetInnerHTML={{ __html: typeof fields.challenge === 'string' ? fields.challenge : '' }} />
+            </div>
+          )}
+
+          {/* Solution */}
+          {fields.solution && (
+            <div class="mb-14">
+              <div class="mb-4 flex items-center gap-3">
+                <span class="flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white" style={{ backgroundColor: primaryColor }}>2</span>
+                <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">Our Approach</h2>
+              </div>
+              <div class="ml-11 text-base leading-relaxed text-slate-600" dangerouslySetInnerHTML={{ __html: typeof fields.solution === 'string' ? fields.solution : '' }} />
+            </div>
+          )}
+
+          {/* Results */}
+          {fields.results && (
+            <div class="mb-14">
+              <div class="mb-4 flex items-center gap-3">
+                <span class="flex h-8 w-8 items-center justify-center rounded-lg text-sm font-bold text-white" style={{ backgroundColor: primaryColor }}>3</span>
+                <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">The Results</h2>
+              </div>
+              <div class="ml-11 text-base leading-relaxed text-slate-600" dangerouslySetInnerHTML={{ __html: typeof fields.results === 'string' ? fields.results : '' }} />
+            </div>
+          )}
+
+          {/* Body content */}
+          {content.bodyHtml && (
+            <div class="prose prose-lg prose-slate max-w-none" dangerouslySetInnerHTML={{ __html: content.bodyHtml }} />
+          )}
+        </div>
+      </section>
+
+      {/* Gallery */}
+      {gallery.length > 0 && (
+        <section class="bg-slate-50 py-16">
+          <div class="mx-auto max-w-5xl px-6">
+            <div class={`grid gap-4 ${gallery.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`}>
+              {gallery.map((item, idx) => (
+                <figure class="group overflow-hidden rounded-xl border border-gray-100 bg-white">
+                  <div class="overflow-hidden">
+                    <img src={item.image} alt={item.caption ?? `Photo ${idx + 1}`} class="w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]" style="aspect-ratio: 16/9;" loading="lazy" />
+                  </div>
+                  {item.caption && <figcaption class="px-4 py-3 text-xs font-medium text-slate-400">{item.caption}</figcaption>}
+                </figure>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Client quote — full-width band, NOT in sidebar */}
+      {(fields.client_quote || fields.quote) && (
+        <section class="border-y border-gray-100" style={{ backgroundColor: '#FFFBEB' }}>
+          <div class="mx-auto max-w-4xl px-6 py-16">
+            <div class="flex flex-col items-center text-center">
+              <div class="mb-6 text-5xl font-serif" style={{ color: `${primaryColor}40` }}>"</div>
+              <p class="max-w-2xl text-xl italic leading-relaxed text-slate-700">
+                {fields.client_quote ?? fields.quote}
+              </p>
+              {(fields.client_quote_author || fields.quote_author) && (
+                <div class="mt-8 flex items-center gap-3">
+                  <div class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-bold text-white" style={{ backgroundColor: primaryColor }}>
+                    {(fields.client_quote_author ?? fields.quote_author ?? '').charAt(0).toUpperCase()}
+                  </div>
+                  <div class="text-left">
+                    <div class="text-sm font-semibold text-slate-900">{fields.client_quote_author ?? fields.quote_author}</div>
+                    {(fields.client_quote_role || fields.quote_role) && (
+                      <div class="text-xs text-slate-400">{fields.client_quote_role ?? fields.quote_role}</div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* Engagement details — horizontal card at bottom, NOT a sidebar */}
+      <section class="bg-white py-16">
+        <div class="mx-auto max-w-5xl px-6">
+          <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            {fields.industry && (
+              <div class="rounded-xl border border-gray-100 p-5">
+                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Industry</div>
+                <div class="mt-1 text-sm font-semibold text-slate-900 capitalize">{String(fields.industry).replace(/-/g, ' ')}</div>
+              </div>
+            )}
+            {fields.service && (
+              <div class="rounded-xl border border-gray-100 p-5">
+                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Service</div>
+                <div class="mt-1 text-sm font-semibold text-slate-900">{String(fields.service).replace(/-/g, ' ').replace(/\b\w/g, (c: string) => c.toUpperCase())}</div>
+              </div>
+            )}
+            {fields.hires_delivered && (
+              <div class="rounded-xl border border-gray-100 p-5">
+                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Hires Delivered</div>
+                <div class="mt-1 text-sm font-semibold text-slate-900">{fields.hires_delivered}</div>
+              </div>
+            )}
+            {fields.time_to_fill && (
+              <div class="rounded-xl border border-gray-100 p-5">
+                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Time to Fill</div>
+                <div class="mt-1 text-sm font-semibold text-slate-900">{fields.time_to_fill}</div>
+              </div>
+            )}
+            {fields.retention_rate && (
+              <div class="rounded-xl border border-gray-100 p-5">
+                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Retention Rate</div>
+                <div class="mt-1 text-sm font-semibold text-slate-900">{fields.retention_rate}</div>
+              </div>
+            )}
+            {fields.duration && (
+              <div class="rounded-xl border border-gray-100 p-5">
+                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">Duration</div>
+                <div class="mt-1 text-sm font-semibold text-slate-900">{fields.duration}</div>
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section class="py-20" style={{ backgroundColor: '#FFFBEB' }}>
+        <div class="mx-auto max-w-3xl px-6 text-center">
+          <h2 class="text-3xl font-bold tracking-[-0.02em] text-slate-900">Ready to achieve similar results?</h2>
+          <p class="mt-4 text-lg text-slate-500">Our staffing consultants are ready to help you build your team.</p>
+          <div class="mt-8 flex flex-wrap justify-center gap-4">
+            <a href={url('/contact')} class="inline-block rounded-lg px-8 py-3.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-lg hover:no-underline" style={{ backgroundColor: primaryColor }}>
+              Start a Conversation
+            </a>
+            <a href={url('/case-studies')} class="inline-block rounded-lg border-2 px-8 py-3.5 text-sm font-semibold transition-all duration-200 hover:no-underline" style={{ borderColor: primaryColor, color: primaryColor }}>
+              More Success Stories
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {props.children}
+    </Base>
+  );
+};
+
+export default CaseStudy;

package/starters/kadoservices/themes/kadoservices/layouts/index--articles.tsx

@@ -0,0 +1,250 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps, Content } from '../_types.js';
+import Base from './base.js';
+
+const categories = [
+  'All',
+  'Hiring Trends',
+  'HR Strategy',
+  'Labor Law',
+  'Employer Branding',
+  'Workforce Planning',
+];
+
+const Insights: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const allItems: Content[] = content.fields.items ?? [];
+
+  const sorted = [...allItems].sort((a, b) => {
+    const da = a.publishedAt ?? a.createdAt;
+    const db = b.publishedAt ?? b.createdAt;
+    return (db?.getTime?.() ?? 0) - (da?.getTime?.() ?? 0);
+  });
+
+  const featured = sorted.find((a) => a.fields.featured === true || a.fields.featured === 'true') ?? sorted[0];
+  const rest = sorted.filter((a) => a !== featured);
+
+  return (
+    <Base {...props}>
+      {/* Hero — light warm background, left-aligned */}
+      <section class="py-16" style={{ backgroundColor: '#FFFBEB' }}>
+        <div class="mx-auto max-w-6xl px-6">
+          <p class="mb-2 text-xs font-semibold uppercase tracking-[0.2em]" style={{ color: primaryColor }}>
+            Insights & Articles
+          </p>
+          <h1 class="text-3xl font-extrabold tracking-[-0.03em] leading-[1.1] text-slate-900 sm:text-4xl lg:text-5xl">
+            Staffing insights,<br />shared openly
+          </h1>
+          <p class="mt-4 max-w-xl text-base text-slate-500">
+            Hiring trends, workforce strategies, and lessons learned from 15,000+ placements per year.
+          </p>
+        </div>
+      </section>
+
+      {/* Featured article — full width horizontal layout */}
+      {featured && (
+        <section class="py-12 border-b border-gray-100">
+          <div class="mx-auto max-w-6xl px-6">
+            <div class="mb-6 flex items-center gap-3">
+              <div class="h-1 w-6 rounded" style={{ backgroundColor: primaryColor }} />
+              <span class="text-xs font-semibold uppercase tracking-[0.15em] text-slate-400">Featured</span>
+            </div>
+            <a href={(featured as any).url ?? `/articles/${featured.slug}`} class="group block hover:no-underline">
+              <div class="grid gap-8 lg:grid-cols-5">
+                {/* Image — 40% */}
+                {featured.fields.featured_image && (
+                  <div class="lg:col-span-2 overflow-hidden rounded-2xl">
+                    <img
+                      src={featured.fields.featured_image}
+                      alt={featured.title}
+                      class="aspect-[4/3] w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                      loading="lazy"
+                    />
+                  </div>
+                )}
+                {/* Content — 60% */}
+                <div class="lg:col-span-3 flex flex-col justify-center">
+                  {featured.fields.category && (
+                    <span class="mb-3 inline-block w-fit rounded-full px-3 py-1 text-xs font-semibold text-white" style={{ backgroundColor: primaryColor }}>
+                      {featured.fields.category}
+                    </span>
+                  )}
+                  <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900 sm:text-3xl lg:text-4xl">
+                    {featured.title}
+                  </h2>
+                  {featured.fields.excerpt && (
+                    <p class="mt-4 text-base leading-relaxed text-slate-500 lg:text-lg">
+                      {featured.fields.excerpt}
+                    </p>
+                  )}
+                  <div class="mt-5 flex items-center gap-3">
+                    {featured.fields.author_image && (
+                      <img src={featured.fields.author_image} alt={featured.fields.author} class="h-10 w-10 rounded-full object-cover ring-2 ring-gray-100" loading="lazy" />
+                    )}
+                    <div>
+                      <span class="text-sm font-medium text-slate-700">{featured.fields.author}</span>
+                      {featured.publishedAt && (
+                        <span class="ml-2 text-sm text-slate-400">
+                          · {featured.publishedAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  <div class="mt-5">
+                    <span class="inline-flex items-center gap-1 text-sm font-semibold transition-colors duration-200" style={{ color: primaryColor }}>
+                      Read article
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 group-hover:translate-x-1"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </div>
+        </section>
+      )}
+
+      {/* Sidebar categories + Article grid */}
+      <section class="py-16">
+        <div class="mx-auto max-w-6xl px-6">
+          <div class="flex flex-col lg:flex-row gap-10">
+
+            {/* Category sidebar — desktop: vertical list, mobile: horizontal scroll */}
+            <aside class="lg:w-[250px] shrink-0">
+              {/* Mobile: horizontal scroll */}
+              <div class="flex gap-2 overflow-x-auto pb-4 lg:hidden" style={{ scrollbarWidth: 'none' }}>
+                {categories.map((cat) => (
+                  <button
+                    class="shrink-0 rounded-full border px-4 py-2 text-sm font-medium transition-all duration-200 hover:shadow-sm"
+                    style={cat === 'All'
+                      ? { backgroundColor: primaryColor, color: '#fff', borderColor: primaryColor }
+                      : { borderColor: '#e5e7eb', color: '#64748b', backgroundColor: '#fff' }}
+                  >
+                    {cat}
+                  </button>
+                ))}
+              </div>
+              {/* Desktop: vertical sidebar */}
+              <div class="hidden lg:block sticky top-24">
+                <h3 class="mb-4 text-xs font-semibold uppercase tracking-[0.15em] text-slate-400">Categories</h3>
+                <nav class="space-y-1">
+                  {categories.map((cat) => (
+                    <button
+                      class="block w-full text-left rounded-lg px-4 py-2.5 text-sm font-medium transition-all duration-200"
+                      style={cat === 'All'
+                        ? { backgroundColor: `${primaryColor}15`, color: primaryColor, borderLeft: `3px solid ${primaryColor}` }
+                        : { color: '#64748b', borderLeft: '3px solid transparent' }}
+                    >
+                      {cat}
+                    </button>
+                  ))}
+                </nav>
+                {/* Sidebar promo card */}
+                <div class="mt-8 rounded-xl p-5 border" style={{ backgroundColor: '#FFFBEB', borderColor: `${primaryColor}30` }}>
+                  <p class="text-sm font-semibold text-slate-700">Got hiring insights?</p>
+                  <p class="mt-1 text-xs text-slate-500">We welcome guest contributions from HR professionals.</p>
+                  <a href="/contact" class="mt-3 inline-block text-xs font-semibold hover:no-underline" style={{ color: primaryColor }}>
+                    Submit an article →
+                  </a>
+                </div>
+              </div>
+            </aside>
+
+            {/* Article grid — 2 columns */}
+            <div class="flex-1 min-w-0">
+              <div class="grid gap-8 sm:grid-cols-2">
+                {rest.map((item) => (
+                  <a href={(item as any).url ?? `/articles/${item.slug}`} class="group block hover:no-underline">
+                    {item.fields.featured_image && (
+                      <div class="overflow-hidden rounded-2xl">
+                        <img
+                          src={item.fields.featured_image}
+                          alt={item.title}
+                          class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                          loading="lazy"
+                        />
+                      </div>
+                    )}
+                    <div class="mt-4">
+                      <div class="flex items-center gap-2">
+                        {item.fields.category && (
+                          <span class="text-xs font-semibold" style={{ color: primaryColor }}>
+                            {item.fields.category}
+                          </span>
+                        )}
+                        {item.publishedAt && (
+                          <span class="text-xs text-slate-300">·</span>
+                        )}
+                        {item.publishedAt && (
+                          <time class="text-xs text-slate-400">
+                            {item.publishedAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+                          </time>
+                        )}
+                      </div>
+                      <h3 class="mt-2 text-base font-semibold leading-snug tracking-[-0.01em] text-slate-900">
+                        {item.title}
+                      </h3>
+                      {item.fields.excerpt && (
+                        <p class="mt-2 text-sm leading-relaxed text-slate-500 line-clamp-3">
+                          {item.fields.excerpt}
+                        </p>
+                      )}
+                      <div class="mt-3 flex items-center gap-2">
+                        {item.fields.author_image && (
+                          <img src={item.fields.author_image} alt={item.fields.author} class="h-6 w-6 rounded-full object-cover" loading="lazy" />
+                        )}
+                        <span class="text-xs font-medium text-slate-500">{item.fields.author}</span>
+                      </div>
+                    </div>
+                  </a>
+                ))}
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </section>
+
+      {/* Newsletter CTA — amber card instead of dark section */}
+      <section class="py-16">
+        <div class="mx-auto max-w-2xl px-6">
+          <div class="rounded-2xl border p-10 text-center" style={{ backgroundColor: '#FFFBEB', borderColor: `${primaryColor}30` }}>
+            <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">Subscribe to our newsletter</h2>
+            <p class="mt-3 text-slate-500">Hiring insights, workforce trends, and HR best practices — delivered biweekly.</p>
+            <form class="mt-8 flex gap-3 sm:mx-auto sm:max-w-md" action="#" method="post">
+              <input
+                type="email"
+                placeholder="your@email.com"
+                class="flex-1 rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 outline-none transition-all focus:border-amber-400 focus:ring-2 focus:ring-amber-100"
+              />
+              <button
+                type="submit"
+                class="shrink-0 rounded-lg px-6 py-3 text-sm font-semibold text-white transition-all duration-200 hover:shadow-lg"
+                style={{ backgroundColor: primaryColor }}
+              >
+                Subscribe
+              </button>
+            </form>
+            <p class="mt-3 text-xs text-slate-400">No spam. Unsubscribe anytime.</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Bottom CTA */}
+      <section class="relative overflow-hidden py-20 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 50% 50%, ${primaryColor}10 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">Have a hiring need?</h2>
+          <p class="mt-4 text-lg text-gray-300/90">Let's discuss how our 200+ recruiters can help you find the right talent.</p>
+          <a href="/contact" class="mt-8 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 }}>
+            Start a Conversation
+          </a>
+        </div>
+      </section>
+    </Base>
+  );
+};
+
+export default Insights;