@barkajs/barka 0.1.0

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

@@ -0,0 +1,235 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const contactChannels = [
+  {
+    label: 'General Inquiries',
+    email: 'hello@barka.dev',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>',
+  },
+  {
+    label: 'Sales & Partnerships',
+    email: 'sales@barka.dev',
+    phone: '+48 22 123 4567',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>',
+  },
+  {
+    label: 'Careers',
+    email: 'careers@barka.dev',
+    icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
+  },
+];
+
+const offices = [
+  { city: 'Warsaw', flag: '🇵🇱', label: 'Headquarters', address: 'ul. Marszałkowska 100, 00-026 Warsaw, Poland' },
+  { city: 'Kraków', flag: '🇵🇱', label: 'Engineering Hub', address: 'ul. Pawia 5, 31-154 Kraków, Poland' },
+  { city: 'Wrocław', flag: '🇵🇱', label: 'Development Center', address: 'ul. Świdnicka 40, 50-024 Wrocław, Poland' },
+  { city: 'Berlin', flag: '🇩🇪', label: 'DACH Office', address: 'Friedrichstraße 123, 10117 Berlin, Germany' },
+  { city: 'London', flag: '🇬🇧', label: 'UK Office', address: '1 Canada Square, Canary Wharf, London E14 5AB' },
+];
+
+const PageContact: 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-20 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 60% 50%, ${primaryColor}12 0%, transparent 50%)` }} />
+        <div class="relative mx-auto max-w-7xl px-6 text-center">
+          <h1 class="text-4xl font-extrabold tracking-[-0.03em] sm:text-5xl">
+            {content.title ?? 'Get in Touch'}
+          </h1>
+          <p class="mx-auto mt-4 max-w-xl text-lg text-gray-300/90">
+            {content.fields?.subtitle ?? "Let's discuss how we can accelerate your digital transformation"}
+          </p>
+        </div>
+      </section>
+
+      {/* Contact form + info — two-column layout */}
+      <section class="py-20">
+        <div class="mx-auto grid max-w-7xl gap-16 px-6 lg:grid-cols-5">
+
+          {/* Left — Contact form */}
+          <div class="lg:col-span-3">
+            <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">Send us a message</h2>
+            <p class="mt-2 text-sm text-slate-500">Fill out the form and our team will get back to you within 24 hours.</p>
+
+            <form class="mt-8 space-y-6" action="#" method="post">
+              <div class="grid gap-6 sm:grid-cols-2">
+                <div>
+                  <label class="mb-1.5 block text-sm font-medium text-slate-700" for="first_name">First name</label>
+                  <input
+                    type="text" id="first_name" name="first_name" autocomplete="given-name"
+                    class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
+                    placeholder="Jane"
+                  />
+                </div>
+                <div>
+                  <label class="mb-1.5 block text-sm font-medium text-slate-700" for="last_name">Last name</label>
+                  <input
+                    type="text" id="last_name" name="last_name" autocomplete="family-name"
+                    class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
+                    placeholder="Smith"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-slate-700" for="email">Work email</label>
+                <input
+                  type="email" id="email" name="email" autocomplete="email"
+                  class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
+                  placeholder="jane@company.com"
+                />
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-slate-700" for="company">Company</label>
+                <input
+                  type="text" id="company" name="company" autocomplete="organization"
+                  class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
+                  placeholder="Company Ltd."
+                />
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-slate-700" for="interest">I'm interested in</label>
+                <select
+                  id="interest" name="interest"
+                  class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 transition-all duration-200 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20"
+                >
+                  <option value="">Select a topic</option>
+                  <option value="custom-software">Custom Software Development</option>
+                  <option value="cloud">Cloud & Infrastructure</option>
+                  <option value="data-ai">Data & AI</option>
+                  <option value="cybersecurity">Cybersecurity</option>
+                  <option value="devops">DevOps & SRE</option>
+                  <option value="staff">IT Outsourcing & Staff Augmentation</option>
+                  <option value="consulting">Digital Transformation Consulting</option>
+                  <option value="other">Other</option>
+                </select>
+              </div>
+
+              <div>
+                <label class="mb-1.5 block text-sm font-medium text-slate-700" for="message">Message</label>
+                <textarea
+                  id="message" name="message" rows={5}
+                  class="block w-full rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder-slate-400 transition-all duration-200 focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 resize-none"
+                  placeholder="Tell us about your project, timeline, and goals..."
+                />
+              </div>
+
+              <button
+                type="submit"
+                class="w-full rounded-lg px-8 py-3.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-lg sm:w-auto"
+                style={{ backgroundColor: primaryColor }}
+              >
+                Send Message
+              </button>
+            </form>
+          </div>
+
+          {/* Right — Contact channels */}
+          <div class="lg:col-span-2">
+            <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">Contact directly</h2>
+            <p class="mt-2 text-sm text-slate-500">Prefer email or phone? Reach out to the right team.</p>
+
+            <div class="mt-8 space-y-4">
+              {contactChannels.map((ch) => (
+                <div class="rounded-2xl border border-gray-100 bg-white p-5 transition-all duration-300 hover:shadow-lg hover:shadow-slate-200/50">
+                  <div class="flex items-start gap-4">
+                    <div
+                      class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white"
+                      style={{ backgroundColor: primaryColor }}
+                      dangerouslySetInnerHTML={{ __html: ch.icon }}
+                    />
+                    <div>
+                      <div class="text-sm font-semibold text-slate-900">{ch.label}</div>
+                      <a href={`mailto:${ch.email}`} class="mt-1 block text-sm hover:no-underline" style={{ color: primaryColor }}>
+                        {ch.email}
+                      </a>
+                      {ch.phone && (
+                        <a href={`tel:${ch.phone.replace(/\s/g, '')}`} class="mt-0.5 block text-sm text-slate-500 hover:text-slate-900 hover:no-underline">
+                          {ch.phone}
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Business hours */}
+            <div class="mt-8 rounded-2xl border border-gray-100 bg-slate-50 p-6">
+              <h3 class="text-sm font-semibold text-slate-900">Business Hours</h3>
+              <div class="mt-3 space-y-2 text-sm text-slate-500">
+                <div class="flex justify-between">
+                  <span>Monday – Friday</span>
+                  <span class="font-medium text-slate-700">9:00 – 18:00 CET</span>
+                </div>
+                <div class="flex justify-between">
+                  <span>Saturday – Sunday</span>
+                  <span class="font-medium text-slate-400">Closed</span>
+                </div>
+              </div>
+              <div class="mt-4 border-t border-gray-200 pt-4 text-xs text-slate-400">
+                24/7 operations support: <a href="mailto:ops@barka.dev" class="hover:no-underline" style={{ color: primaryColor }}>ops@barka.dev</a>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </section>
+
+      {/* Offices */}
+      <section class="border-t border-gray-100 bg-slate-50 py-20">
+        <div class="mx-auto max-w-7xl px-6">
+          <h2 class="mb-4 text-center text-3xl font-bold tracking-[-0.02em] text-slate-900">Our Offices</h2>
+          <p class="mx-auto mb-16 max-w-xl text-center text-slate-500">
+            5 offices across Europe, 800+ engineers ready to work with you.
+          </p>
+
+          <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
+            {offices.map((office) => (
+              <div class="group rounded-2xl border border-gray-100 bg-white p-6 transition-all duration-300 hover:shadow-lg hover:shadow-slate-200/50">
+                <div class="mb-3 text-2xl">{office.flag}</div>
+                <h3 class="text-base font-semibold text-slate-900">{office.city}</h3>
+                <div class="mt-0.5 text-xs font-medium uppercase tracking-widest" style={{ color: primaryColor }}>{office.label}</div>
+                <p class="mt-3 text-sm leading-relaxed text-slate-400">
+                  {office.address}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* 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}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">
+            Prefer a scheduled call?
+          </h2>
+          <p class="mt-4 text-lg text-gray-300/90">
+            Book a 30-minute discovery call with one of our solution architects.
+          </p>
+          <a
+            href="#"
+            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 }}
+          >
+            Book a Discovery Call
+          </a>
+        </div>
+      </section>
+    </Base>
+  );
+};
+
+export default PageContact;

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

@@ -0,0 +1,45 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const Page: 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-20 text-white" style={{ backgroundColor: navColor }}>
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 50% 50%, ${primaryColor}08 0%, transparent 50%)` }} />
+        <div class="relative mx-auto max-w-4xl px-6 text-center">
+          <h1 class="text-4xl font-extrabold tracking-[-0.03em] leading-[1.1] sm:text-5xl">
+            {content.title}
+          </h1>
+          {content.fields?.subtitle && (
+            <p class="mx-auto mt-6 max-w-xl text-lg text-gray-300/90">
+              {content.fields.subtitle}
+            </p>
+          )}
+        </div>
+      </section>
+
+      {/* Body */}
+      {content.bodyHtml && (
+        <section class="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>
+      )}
+
+      {props.children}
+    </Base>
+  );
+};
+
+export default Page;

package/starters/lokatech/themes/lokatech/layouts/service.tsx

@@ -0,0 +1,235 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const Service: 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 — with grid, blobs, stats bar ═══ */}
+      <section class="relative overflow-hidden py-28 text-white" style={{ backgroundColor: navColor }}>
+        <div class="grid-pattern pointer-events-none absolute inset-0" />
+        <div class="blob blob-lg" style={{ top: '-15%', right: '-10%', background: `${primaryColor}12` }} />
+        <div class="blob blob-sm" style={{ bottom: '10%', left: '5%', background: `#3b82f608`, animationDelay: '-4s' }} />
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 70% 30%, ${primaryColor}12 0%, transparent 50%)` }} />
+
+        <div class="relative mx-auto max-w-7xl px-6">
+          <div class="max-w-3xl">
+            <p class="reveal-sub mb-4 text-xs font-semibold uppercase tracking-[0.25em] text-gray-400">Our Services</p>
+            <h1 class="reveal-heading text-4xl font-extrabold tracking-[-0.04em] leading-[1.05] sm:text-5xl lg:text-6xl">
+              {content.title}
+            </h1>
+            {fields.short_description && (
+              <p class="reveal-sub mt-8 max-w-2xl text-lg leading-relaxed text-gray-300/80" style={{ animationDelay: '0.25s' }}>
+                {fields.short_description}
+              </p>
+            )}
+            <div class="reveal-sub mt-10 flex flex-wrap gap-4" style={{ animationDelay: '0.4s' }}>
+              <a href="/contact" class="inline-block rounded-lg px-8 py-4 text-sm font-semibold text-white shadow-lg transition-all duration-300 hover:shadow-xl hover:brightness-110 hover:no-underline" style={{ backgroundColor: primaryColor }}>
+                Get a Free Assessment
+              </a>
+              <a href="/case-studies" class="inline-block rounded-lg border border-white/20 px-8 py-4 text-sm font-semibold text-white/90 transition-all duration-300 hover:border-white/40 hover:text-white hover:no-underline">
+                View Case Studies
+              </a>
+            </div>
+          </div>
+
+          {/* Stats bar */}
+          {fields.hero_stats && Array.isArray(fields.hero_stats) && (
+            <div class="reveal-sub mt-16 flex flex-wrap gap-12 border-t border-white/10 pt-10" style={{ animationDelay: '0.5s' }}>
+              {fields.hero_stats.map((stat: { value: string; label: string }) => (
+                <div class="counter-item">
+                  <div class="text-3xl font-extrabold tracking-[-0.03em] lg:text-4xl">{stat.value}</div>
+                  <div class="mt-1 text-xs font-medium uppercase tracking-[0.12em] text-gray-400">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        <div class="glow-line absolute bottom-0 left-0 right-0" />
+      </section>
+
+      {/* ═══ Challenges — left heading + staggered grid ═══ */}
+      {fields.challenges && Array.isArray(fields.challenges) && fields.challenges.length > 0 && (
+        <section class="relative overflow-hidden py-24">
+          <div class="blob blob-sm" style={{ top: '20%', right: '-3%', background: `${primaryColor}06` }} />
+          <div class="mx-auto max-w-7xl px-6">
+            <div class="mb-16 max-w-2xl">
+              <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl lg:text-5xl">
+                The challenges <em class="not-italic" style={{ background: `linear-gradient(135deg,${primaryColor},${primaryColor}99,#60a5fa)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>we solve</em>
+              </h2>
+              <p class="reveal-sub mt-4 text-lg text-slate-500">Problems enterprises face every day — and the reason they call us.</p>
+            </div>
+            <div class="stagger-grid grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
+              {fields.challenges.map((challenge: string, idx: number) => (
+                <div class={`group flex items-start gap-4 rounded-2xl border border-gray-100 bg-white p-6 transition-all duration-400 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-500/5 ${idx % 3 === 1 ? 'lg:translate-y-3' : ''}`}>
+                  <div class="mt-1 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg transition-all duration-300 group-hover:scale-110" style={{ backgroundColor: `${primaryColor}15` }}>
+                    <div class="h-2 w-2 rounded-full" style={{ backgroundColor: primaryColor }} />
+                  </div>
+                  <p class="text-sm leading-relaxed text-slate-600">{challenge}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ═══ Process — asymmetric timeline ═══ */}
+      {fields.process && Array.isArray(fields.process) && fields.process.length > 0 && (
+        <section class="relative overflow-hidden border-t border-gray-100 bg-slate-50 py-24">
+          <div class="mx-auto max-w-7xl px-6">
+            <div class="grid gap-16 lg:grid-cols-5">
+              {/* Left heading — sticky */}
+              <div class="lg:col-span-2">
+                <div class="lg:sticky lg:top-32">
+                  <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl">Our proven <em class="not-italic" style={{ background: `linear-gradient(135deg,${primaryColor},${primaryColor}99,#60a5fa)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>approach</em></h2>
+                  <p class="reveal-sub mt-4 text-base text-slate-500">A methodology refined across hundreds of enterprise projects, from Fortune 500 to high-growth scaleups.</p>
+                  <div class="reveal-sub mt-8 hidden h-1 w-16 rounded lg:block" style={{ backgroundColor: primaryColor, animationDelay: '0.35s' }} />
+                </div>
+              </div>
+
+              {/* Right steps — staggered */}
+              <div class="stagger-grid space-y-8 lg:col-span-3">
+                {fields.process.map((step: { title: string; description: string }, i: number) => (
+                  <div class="group flex gap-6 rounded-2xl border border-gray-100 bg-white p-7 transition-all duration-400 hover:shadow-lg hover:shadow-slate-200/50">
+                    <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-base font-bold text-white transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3" style={{ backgroundColor: primaryColor }}>
+                      {String(i + 1).padStart(2, '0')}
+                    </div>
+                    <div>
+                      <h3 class="text-lg font-semibold tracking-[-0.01em] text-slate-900">{step.title}</h3>
+                      <p class="mt-2 text-sm leading-relaxed text-slate-500">{step.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ═══ Capabilities — staggered bento ═══ */}
+      {fields.capabilities && Array.isArray(fields.capabilities) && fields.capabilities.length > 0 && (
+        <section class="relative overflow-hidden py-24">
+          <div class="mx-auto max-w-7xl px-6">
+            <div class="mb-16 max-w-2xl">
+              <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl">What we <em class="not-italic" style={{ background: `linear-gradient(135deg,${primaryColor},${primaryColor}99,#60a5fa)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>deliver</em></h2>
+            </div>
+            <div class="stagger-grid grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {fields.capabilities.map((cap: string, idx: number) => {
+                const [title, ...rest] = cap.split(' — ');
+                const desc = rest.join(' — ');
+                return (
+                  <div class={`group rounded-2xl border border-gray-100 bg-white p-7 transition-all duration-400 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-500/5 ${idx === 0 || idx === 6 ? 'sm:col-span-2 lg:col-span-1' : ''}`}>
+                    <div class="mb-4 h-1 w-8 rounded transition-all duration-400 group-hover:w-16" style={{ backgroundColor: primaryColor }} />
+                    <h3 class="text-base font-semibold text-slate-900">{title}</h3>
+                    {desc && <p class="mt-2 text-sm leading-relaxed text-slate-500">{desc}</p>}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ═══ Technologies — pills with hover ═══ */}
+      {fields.technologies && Array.isArray(fields.technologies) && fields.technologies.length > 0 && (
+        <section class="relative overflow-hidden border-t border-gray-100 bg-slate-50 py-24">
+          <div class="mx-auto max-w-7xl px-6">
+            <div class="grid items-start gap-12 lg:grid-cols-5">
+              <div class="lg:col-span-2">
+                <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl">Technology <em class="not-italic" style={{ background: `linear-gradient(135deg,${primaryColor},${primaryColor}99,#60a5fa)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>stack</em></h2>
+                <p class="reveal-sub mt-4 text-base text-slate-500">Battle-tested tools and platforms our engineers use daily.</p>
+              </div>
+              <div class="flex flex-wrap gap-3 lg:col-span-3">
+                {fields.technologies.map((tech: { name: string; logo?: string }, idx: number) => (
+                  <div
+                    class="stagger-grid flex items-center gap-2.5 rounded-xl border border-gray-100 bg-white px-5 py-3.5 transition-all duration-300 hover:border-emerald-200 hover:shadow-lg hover:shadow-emerald-500/5"
+                    style={{ animationDelay: `${0.05 * idx}s` }}
+                  >
+                    {tech.logo && (
+                      <img src={tech.logo} alt={tech.name} class="h-6 w-6 object-contain" loading="lazy" />
+                    )}
+                    <span class="text-sm font-semibold text-slate-700">{tech.name}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ═══ Related Case Studies ═══ */}
+      {fields.case_studies && Array.isArray(fields.case_studies) && fields.case_studies.length > 0 && (
+        <section class="py-24">
+          <div class="mx-auto max-w-7xl px-6">
+            <div class="mb-16 flex items-end justify-between">
+              <div class="max-w-2xl">
+                <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl">Proven <em class="not-italic" style={{ background: `linear-gradient(135deg,${primaryColor},${primaryColor}99,#60a5fa)`, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>results</em></h2>
+                <p class="reveal-sub mt-4 text-base text-slate-500">See how our expertise translates to measurable business outcomes.</p>
+              </div>
+              <a href="/case-studies" class="reveal-sub hidden items-center gap-1 text-sm font-semibold transition-colors duration-200 hover:no-underline sm:flex" style={{ color: primaryColor }}>
+                All case studies <span>&rarr;</span>
+              </a>
+            </div>
+            <div class="stagger-grid grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {fields.case_studies.map((cs: { title: string; result: string; url: string }) => (
+                <a href={cs.url} class="group rounded-2xl border border-gray-100 bg-white p-8 transition-all duration-400 hover:shadow-xl hover:shadow-slate-200/50 hover:no-underline">
+                  <div class="mb-4 text-xs font-semibold uppercase tracking-widest text-slate-400">Case Study</div>
+                  <h3 class="text-lg font-bold text-slate-900">{cs.title}</h3>
+                  <div class="mt-3 text-2xl font-extrabold" style={{ color: primaryColor }}>{cs.result}</div>
+                  <div class="mt-5 flex items-center gap-1 text-xs font-semibold opacity-0 transition-all duration-300 group-hover:opacity-100" style={{ color: primaryColor }}>
+                    Read case study <span class="transition-transform duration-200 group-hover:translate-x-1">&rarr;</span>
+                  </div>
+                </a>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      {/* ═══ Body (markdown) ═══ */}
+      {content.bodyHtml && (
+        <section class="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 — asymmetric ═══ */}
+      <section class="relative overflow-hidden py-24 text-white" style={{ backgroundColor: navColor }}>
+        <div class="grid-pattern pointer-events-none absolute inset-0" />
+        <div class="blob blob-sm" style={{ bottom: '-10%', right: '10%', background: `${primaryColor}10`, animationDelay: '-5s' }} />
+        <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-7xl px-6">
+          <div class="grid items-center gap-10 lg:grid-cols-5">
+            <div class="lg:col-span-3">
+              <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl">Ready to start your project?</h2>
+              <p class="reveal-sub mt-4 max-w-lg text-lg text-gray-300/90" style={{ animationDelay: '0.2s' }}>
+                Get a free consultation. Our architects and domain experts will map the optimal strategy for your challenge in a 60-minute workshop.
+              </p>
+            </div>
+            <div class="reveal-sub flex flex-col gap-4 lg:col-span-2" style={{ animationDelay: '0.35s' }}>
+              <a href="/contact" class="inline-block rounded-lg px-8 py-4 text-center text-sm font-semibold text-white shadow-lg transition-all duration-300 hover:shadow-xl hover:brightness-110 hover:no-underline" style={{ backgroundColor: primaryColor }}>
+                Schedule a Free Assessment
+              </a>
+              <a href="/case-studies" class="inline-block rounded-lg border border-white/20 px-8 py-4 text-center text-sm font-semibold text-white/90 transition-all duration-300 hover:border-white/40 hover:text-white hover:no-underline">
+                View Case Studies
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="glow-line absolute top-0 left-0 right-0" />
+      </section>
+
+      {props.children}
+    </Base>
+  );
+};
+
+export default Service;

package/starters/lokatech/themes/lokatech/partials/footer.tsx

@@ -0,0 +1,109 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SiteConfig, ThemeConfig } from '../_types.js';
+
+interface FooterProps {
+  site: SiteConfig;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+}
+
+const footerServices = [
+  { label: 'Cloud Infrastructure', href: '/services/cloud-infrastructure' },
+  { label: 'Data Engineering', href: '/services/data-engineering' },
+  { label: 'Custom Software', href: '/services/custom-software' },
+  { label: 'DevOps & SRE', href: '/services/devops-sre' },
+  { label: 'AI & Machine Learning', href: '/services/ai-ml' },
+];
+
+const footerCompany = [
+  { label: 'About Us', href: '/about' },
+  { label: 'Leadership', href: '/about/leadership' },
+  { label: 'Careers', href: '/careers' },
+  { label: 'Partners', href: '/partners' },
+  { label: 'Contact', href: '/contact' },
+];
+
+const footerResources = [
+  { label: 'Blog', href: '/articles' },
+  { label: 'Case Studies', href: '/case-studies' },
+  { label: 'Whitepapers', href: '/resources/whitepapers' },
+  { label: 'Documentation', href: '/docs' },
+  { label: 'Status Page', href: '/status' },
+];
+
+const Footer: FC<FooterProps> = ({ site, themeSettings }) => {
+  const primaryColor = themeSettings.primary_color ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+
+  return (
+    <footer style={{ backgroundColor: navColor }}>
+      <div class="h-1" style={{ backgroundColor: primaryColor }} />
+      <div class="mx-auto max-w-7xl px-6 py-16">
+        <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
+          {/* Company info */}
+          <div>
+            <div class="mb-4 text-lg font-bold text-white">{site.site_name}</div>
+            <p class="mb-6 text-sm leading-relaxed text-gray-400">
+              {themeSettings.footer_text ?? 'Engineering technology that moves enterprises forward.'}
+            </p>
+            <div class="flex gap-4 text-sm text-gray-400">
+              <a href="#" class="transition-colors hover:text-white hover:no-underline">LinkedIn</a>
+              <a href="#" class="transition-colors hover:text-white hover:no-underline">X</a>
+              <a href="#" class="transition-colors hover:text-white hover:no-underline">GitHub</a>
+            </div>
+          </div>
+
+          {/* Services */}
+          <div>
+            <h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Services</h4>
+            <ul class="space-y-3">
+              {footerServices.map((link) => (
+                <li>
+                  <a href={link.href} class="text-sm text-gray-400 transition-colors hover:text-white hover:no-underline">
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Company */}
+          <div>
+            <h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Company</h4>
+            <ul class="space-y-3">
+              {footerCompany.map((link) => (
+                <li>
+                  <a href={link.href} class="text-sm text-gray-400 transition-colors hover:text-white hover:no-underline">
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Resources */}
+          <div>
+            <h4 class="mb-4 text-sm font-semibold uppercase tracking-wider text-white">Resources</h4>
+            <ul class="space-y-3">
+              {footerResources.map((link) => (
+                <li>
+                  <a href={link.href} class="text-sm text-gray-400 transition-colors hover:text-white hover:no-underline">
+                    {link.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom bar */}
+        <div class="mt-12 border-t border-gray-800 pt-8 text-center text-xs text-gray-500">
+          <p>&copy; {new Date().getFullYear()} {site.site_name}. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;