@barkajs/barka 0.1.0

package/starters/lokatech/themes/lokatech/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 ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+  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</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">Industry Challenges</h2>
+            <p class="mb-12 text-lg text-slate-500">The 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 Solutions</h2>
+            <p class="mb-16 text-lg text-slate-500">Proven 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-emerald-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 & Certifications</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 industry experts</h2>
+          <p class="mt-6 text-lg text-gray-300/90">We understand the unique 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 }}>
+              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">
+              View Case Studies
+            </a>
+          </div>
+        </div>
+      </section>
+
+      {props.children}
+    </Base>
+  );
+};
+
+export default Industry;

package/starters/lokatech/themes/lokatech/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/lokatech/themes/lokatech/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: 'Excellence', icon: '◆', desc: 'We hire the top 5% of engineers and give them the tools, training, and autonomy to do their best work.' },
+  { title: 'Partnership', icon: '◈', desc: 'Our teams embed with clients, understand context, and take ownership of outcomes — not just deliverables.' },
+  { title: 'Innovation', icon: '◇', desc: '15% of revenue invested in R&D. Quarterly innovation sprints. Active open source contributors.' },
+  { title: 'Integrity', icon: '○', desc: 'We tell clients what they need to hear. Trust is built in uncomfortable conversations, not polished decks.' },
+];
+
+const milestones = [
+  { year: '2008', text: 'Founded in Warsaw by five engineers' },
+  { year: '2011', text: 'Opened Kraków office — 50 engineers' },
+  { year: '2014', text: '200 engineers. Launched cloud practice' },
+  { year: '2016', text: 'Wrocław office. ISO 27001 certified' },
+  { year: '2018', text: 'Berlin office. First Fortune 500 client' },
+  { year: '2020', text: 'Launched Data & AI practice' },
+  { year: '2022', text: 'London office. 600 engineers' },
+  { year: '2024', text: '800+ engineers. Clutch Top 100 globally' },
+];
+
+const PageAbout: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+
+  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="LokaTech 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 engineer technology that moves enterprises forward
+            </h1>
+            <p class="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-gray-200/90">
+              Founded in 2008. 800+ engineers across 6 European offices. Custom software, cloud, AI, and cybersecurity for enterprise clients.
+            </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>
+              LokaTech Solutions was founded in 2008 in Warsaw by a team of five engineers who believed that enterprise IT services could be delivered differently — with genuine technical excellence, transparent partnerships, and a relentless focus on outcomes over output.
+            </p>
+            <p>
+              What started as a small custom software shop has grown into one of Central Europe's leading technology services 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 engineering 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 }}>engineer</span> because we build with rigor.
+            <span style={{ color: primaryColor }}> Technology</span> because it's what we know deeply.
+            <span style={{ color: primaryColor }}> Moves enterprises forward</span> because our work has no value unless it creates measurable outcomes."
+          </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: '800+', label: 'Engineers' },
+              { value: '18', label: 'Years of Excellence' },
+              { value: '200+', label: 'Projects Delivered' },
+              { value: '6', label: 'European Offices' },
+            ].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 something great together</h2>
+          <p class="mt-6 text-lg text-gray-300/90">Whether you need a dedicated team or a strategic partner — 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">
+              View Case Studies
+            </a>
+          </div>
+        </div>
+      </section>
+    </Base>
+  );
+};
+
+export default PageAbout;

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

@@ -0,0 +1,125 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const perks = [
+  { icon: '🌍', title: 'Remote-First', desc: 'Work from anywhere in Europe. Our 6 offices are optional, not mandatory.' },
+  { icon: '📚', title: 'Learning Budget', desc: '€2,000/year for courses, conferences, and certifications of your choice.' },
+  { icon: '🏥', title: 'Health & Wellness', desc: 'Private healthcare, mental health support, gym memberships, and ergonomic home office setup.' },
+  { icon: '🏖️', title: '26 Days PTO', desc: 'Plus national holidays. We believe rested engineers write better code.' },
+  { icon: '💻', title: 'Top Hardware', desc: 'MacBook Pro M4, 4K monitor, standing desk — everything you need to do your best work.' },
+  { icon: '📈', title: 'Growth Path', desc: 'Clear career tracks for IC and management. Quarterly feedback and annual reviews.' },
+];
+
+const openings = [
+  { title: 'Senior Backend Engineer', team: 'Cloud Platform', location: 'Warsaw / Remote', type: 'Full-time' },
+  { title: 'Staff Frontend Engineer', team: 'Admin UI', location: 'Kraków / Remote', type: 'Full-time' },
+  { title: 'ML Engineer', team: 'Data & AI', location: 'Berlin / Remote', type: 'Full-time' },
+  { title: 'DevOps Engineer', team: 'Infrastructure', location: 'Wrocław / Remote', type: 'Full-time' },
+  { title: 'Product Designer', team: 'Design', location: 'London / Remote', type: 'Full-time' },
+  { title: 'Engineering Manager', team: 'Custom Software', location: 'Warsaw / Remote', type: 'Full-time' },
+];
+
+const PageCareers: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+
+  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 text-center">
+          <p class="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">Careers</p>
+          <h1 class="text-4xl font-extrabold tracking-[-0.03em] leading-[1.1] sm:text-5xl lg:text-6xl">
+            Build technology that matters
+          </h1>
+          <p class="mx-auto mt-8 max-w-2xl text-lg leading-relaxed text-gray-300/90">
+            Join 800+ engineers solving complex problems for the world's most ambitious enterprises.
+          </p>
+          <a href="#openings" 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 }}>
+            View Open Positions
+          </a>
+        </div>
+      </section>
+
+      {/* Why join us */}
+      <section class="py-24">
+        <div class="mx-auto max-w-4xl px-6">
+          <h2 class="mb-6 text-3xl font-bold tracking-[-0.02em] text-slate-900">Why LokaTech?</h2>
+          <div class="space-y-6 text-lg leading-relaxed text-slate-600">
+            <p>
+              We're not a body shop. Every engineer here works on meaningful projects with direct business impact — from modernizing core banking systems to building real-time healthcare data pipelines. You'll work alongside some of the best engineers in Europe, with the autonomy to make technical decisions and the support to grow your career.
+            </p>
+            <p>
+              Our culture is built on engineering excellence, not corporate theatre. No mandatory fun, no ping-pong tables as compensation for long hours. Just great work, fair pay, and a genuine commitment to your professional development.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Perks */}
+      <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">Benefits & Perks</h2>
+            <p class="mt-4 text-lg text-slate-500">Everything you need to do your best work</p>
+          </div>
+          <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {perks.map((p) => (
+              <div class="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 text-3xl">{p.icon}</div>
+                <h3 class="mb-2 text-base font-semibold text-slate-900">{p.title}</h3>
+                <p class="text-sm leading-relaxed text-slate-500">{p.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Open positions */}
+      <section class="py-24" id="openings">
+        <div class="mx-auto max-w-4xl px-6">
+          <h2 class="mb-4 text-3xl font-bold tracking-[-0.02em] text-slate-900">Open Positions</h2>
+          <p class="mb-12 text-lg text-slate-500">Can't find a perfect fit? Send your CV to <a href="mailto:careers@barka.dev" class="hover:no-underline" style={{ color: primaryColor }}>careers@barka.dev</a></p>
+
+          <div class="divide-y divide-gray-100">
+            {openings.map((job) => (
+              <a href="/contact" class="group flex items-center justify-between py-6 hover:no-underline">
+                <div>
+                  <h3 class="text-base font-semibold text-slate-900 group-hover:text-emerald-600">{job.title}</h3>
+                  <div class="mt-1 flex flex-wrap items-center gap-3 text-sm text-slate-400">
+                    <span>{job.team}</span>
+                    <span class="text-slate-200">·</span>
+                    <span>{job.location}</span>
+                    <span class="text-slate-200">·</span>
+                    <span>{job.type}</span>
+                  </div>
+                </div>
+                <span class="hidden text-sm font-medium transition-transform duration-200 group-hover:translate-x-1 sm:block" style={{ color: primaryColor }}>
+                  Apply &rarr;
+                </span>
+              </a>
+            ))}
+          </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">Don't see your role?</h2>
+          <p class="mt-6 text-lg text-gray-300/90">We're always looking for exceptional engineers. Send us your CV and we'll reach out when a position opens.</p>
+          <a href="mailto:careers@barka.dev" 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;