@barkajs/barka 0.1.0

package/starters/lokatech/themes/lokatech/components/video/video.tsx

@@ -0,0 +1,103 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-4xl mx-auto px-6',
+  wide: 'max-w-6xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-slate-900',
+  dark: 'text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+function toEmbedUrl(url: string): string | null {
+  if (!url) return null;
+
+  const ytMatch = url.match(
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
+
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+
+  if (url.includes('/embed/') || url.includes('player.vimeo.com')) return url;
+
+  return null;
+}
+
+const Video: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'dark') {
+    bgStyle.backgroundColor = navColor;
+  } else if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  const isDark = settings.background === 'dark' || settings.background === 'primary';
+  const embedUrl = toEmbedUrl(data.video_url ?? '');
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-10 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        {embedUrl ? (
+          <div class="relative overflow-hidden rounded-xl shadow-lg" style={{ paddingBottom: '56.25%' }}>
+            <iframe
+              src={embedUrl}
+              title={data.heading ?? 'Video'}
+              class="absolute inset-0 h-full w-full"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            />
+          </div>
+        ) : (
+          <p class={`text-center text-sm ${isDark ? 'text-gray-400' : 'text-slate-400'}`}>
+            No video URL provided.
+          </p>
+        )}
+
+        {data.caption && (
+          <p class={`mt-4 text-center text-sm ${isDark ? 'text-gray-400' : 'text-slate-500'}`}>
+            {data.caption}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Video;

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

@@ -0,0 +1,96 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const NotFound: FC<LayoutProps> = (props) => {
+  const { themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+
+  return (
+    <Base {...props}>
+      <section class="relative flex min-h-[75vh] items-center justify-center overflow-hidden" style={{ backgroundColor: navColor }}>
+        {/* Ambient glow */}
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 50% 30%, ${primaryColor}12 0%, transparent 50%)` }} />
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 20% 70%, ${primaryColor}06 0%, transparent 40%)` }} />
+        <div class="pointer-events-none absolute inset-0" style={{ background: `radial-gradient(ellipse at 80% 80%, ${primaryColor}06 0%, transparent 40%)` }} />
+
+        {/* Grid pattern overlay */}
+        <div class="pointer-events-none absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)', backgroundSize: '60px 60px' }} />
+
+        <div class="relative z-10 px-6 text-center">
+          {/* Giant 404 — faded background element */}
+          <div
+            class="select-none text-[12rem] font-extrabold leading-none tracking-[-0.06em] sm:text-[16rem] lg:text-[20rem]"
+            style={{ color: `${primaryColor}08` }}
+          >
+            404
+          </div>
+
+          {/* Content overlay */}
+          <div class="-mt-20 sm:-mt-28 lg:-mt-36">
+            <div class="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl" style={{ backgroundColor: `${primaryColor}15` }}>
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={primaryColor} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="11" cy="11" r="8" />
+                <line x1="21" y1="21" x2="16.65" y2="16.65" />
+                <line x1="8" y1="11" x2="14" y2="11" />
+              </svg>
+            </div>
+
+            <h1 class="text-3xl font-bold tracking-[-0.02em] text-white sm:text-4xl lg:text-5xl">
+              Page not found
+            </h1>
+            <p class="mx-auto mt-4 max-w-lg text-base leading-relaxed text-gray-400 sm:text-lg">
+              The page you're looking for doesn't exist, has been moved, or is temporarily unavailable.
+            </p>
+
+            <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
+              <a
+                href="/"
+                class="group inline-flex items-center gap-2 rounded-lg px-7 py-3 text-sm font-semibold text-white transition-all duration-200 hover:shadow-xl hover:no-underline"
+                style={{ backgroundColor: primaryColor }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-200 group-hover:-translate-x-0.5">
+                  <line x1="19" y1="12" x2="5" y2="12" />
+                  <polyline points="12 19 5 12 12 5" />
+                </svg>
+                Back to Home
+              </a>
+              <a href="/contact" class="inline-flex items-center gap-2 rounded-lg border border-white/20 px-7 py-3 text-sm font-semibold text-white/80 transition-all duration-200 hover:border-white/40 hover:text-white hover:no-underline">
+                Contact Us
+              </a>
+            </div>
+
+            {/* Helpful links */}
+            <div class="mx-auto mt-16 max-w-xl">
+              <p class="mb-5 text-xs font-semibold uppercase tracking-[0.15em] text-gray-500">
+                Popular pages
+              </p>
+              <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+                {[
+                  { label: 'Services', href: '/services', icon: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
+                  { label: 'Case Studies', href: '/case-studies', icon: 'M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11' },
+                  { label: 'About', href: '/about', icon: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75' },
+                  { label: 'Contact', href: '/contact', icon: 'M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z' },
+                ].map((link) => (
+                  <a
+                    href={link.href}
+                    class="group flex flex-col items-center gap-2 rounded-xl border border-white/10 bg-white/[0.03] px-4 py-4 text-sm font-medium text-gray-400 transition-all duration-200 hover:border-white/20 hover:bg-white/[0.06] hover:text-white hover:no-underline"
+                  >
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="opacity-60 transition-opacity group-hover:opacity-100">
+                      <path d={link.icon} />
+                    </svg>
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Base>
+  );
+};
+
+export default NotFound;

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

@@ -0,0 +1,140 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+function estimateReadingTime(html: string): number {
+  const text = html.replace(/<[^>]*>/g, '');
+  const words = text.split(/\s+/).filter(Boolean).length;
+  return Math.max(1, Math.ceil(words / 200));
+}
+
+const Article: FC<LayoutProps> = (props) => {
+  const { content, themeSettings } = props;
+  const primaryColor = themeSettings.primary_color ?? '#10B981';
+  const navColor = themeSettings.nav_color ?? '#0B1222';
+  const publishedDate = content.publishedAt ?? content.createdAt;
+  const readTime = estimateReadingTime(content.bodyHtml ?? '');
+  const category = content.fields.category ?? content.fields.tags?.[0];
+  const featuredImage = content.fields.featured_image ?? content.fields.image;
+
+  return (
+    <Base {...props}>
+      {/* Hero with background image */}
+      <section class="relative overflow-hidden" style={{ minHeight: '520px' }}>
+        {featuredImage ? (
+          <>
+            <img
+              src={featuredImage}
+              alt=""
+              class="absolute inset-0 h-full w-full object-cover"
+              loading="eager"
+            />
+            <div class="absolute inset-0" style={{
+              background: `linear-gradient(to bottom, ${navColor}cc 0%, ${navColor}e6 50%, ${navColor}f2 100%)`,
+            }} />
+          </>
+        ) : (
+          <div class="absolute inset-0" style={{ backgroundColor: navColor }} />
+        )}
+
+        <div class="relative z-10 flex min-h-[520px] items-end pb-16 pt-24">
+          <div class="mx-auto w-full max-w-4xl px-6">
+            <div class="mb-5 flex items-center gap-3">
+              {category && (
+                <span class="rounded-full px-3 py-1 text-xs font-semibold text-white" style={{
+                  backgroundColor: `${primaryColor}cc`,
+                  backdropFilter: 'blur(4px)',
+                }}>
+                  {category}
+                </span>
+              )}
+              <span class="text-sm text-gray-300">{readTime} min read</span>
+            </div>
+
+            <h1 class="max-w-3xl text-3xl font-extrabold leading-[1.12] tracking-[-0.03em] text-white sm:text-4xl lg:text-5xl" style={{
+              textShadow: '0 2px 20px rgba(0,0,0,0.3)',
+            }}>
+              {content.title}
+            </h1>
+
+            <div class="mt-6 flex items-center gap-4">
+              {content.fields.author && (
+                <div class="flex items-center gap-3 rounded-full py-1.5 pl-1.5 pr-4" style={{
+                  backgroundColor: 'rgba(255,255,255,0.1)',
+                  backdropFilter: 'blur(8px)',
+                }}>
+                  {content.fields.author_image ? (
+                    <img src={content.fields.author_image} alt={content.fields.author} class="h-9 w-9 rounded-full object-cover ring-2 ring-white/20" loading="lazy" />
+                  ) : (
+                    <div class="flex h-9 w-9 items-center justify-center rounded-full text-xs font-bold text-white" style={{ backgroundColor: primaryColor }}>
+                      {content.fields.author.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                  <div>
+                    <span class="text-sm font-medium text-white">{content.fields.author}</span>
+                    {content.fields.author_role && (
+                      <span class="ml-2 text-xs text-gray-300">{content.fields.author_role}</span>
+                    )}
+                  </div>
+                </div>
+              )}
+              {publishedDate && (
+                <time datetime={publishedDate.toISOString()} class="rounded-full px-3 py-1.5 text-sm text-gray-200" style={{
+                  backgroundColor: 'rgba(255,255,255,0.08)',
+                  backdropFilter: 'blur(8px)',
+                }}>
+                  {publishedDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
+                </time>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Article body */}
+      <article class="py-16">
+        <div class="mx-auto max-w-3xl px-6">
+          {content.bodyHtml && (
+            <div class="prose prose-lg prose-slate max-w-none" dangerouslySetInnerHTML={{ __html: content.bodyHtml }} />
+          )}
+
+          {content.fields.author && (
+            <div class="mt-16 border-t border-gray-100 pt-8">
+              <div class="flex items-center gap-4">
+                {content.fields.author_image ? (
+                  <img src={content.fields.author_image} alt={content.fields.author} class="h-14 w-14 rounded-full object-cover ring-2 ring-gray-100" />
+                ) : (
+                  <div class="flex h-14 w-14 items-center justify-center rounded-full text-lg font-bold text-white" style={{ backgroundColor: primaryColor }}>
+                    {content.fields.author.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div>
+                  <div class="font-semibold text-slate-900">{content.fields.author}</div>
+                  {content.fields.author_role && (
+                    <div class="text-sm text-slate-400">{content.fields.author_role}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </article>
+
+      {/* CTA */}
+      <section class="border-t border-gray-100 bg-slate-50 py-16">
+        <div class="mx-auto max-w-3xl px-6 text-center">
+          <h2 class="text-2xl font-bold tracking-[-0.02em] text-slate-900">Want to discuss this topic?</h2>
+          <p class="mt-3 text-slate-500">Our experts are ready to help with your specific challenges.</p>
+          <a href="/contact" class="mt-6 inline-block rounded-lg px-6 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:shadow-lg hover:no-underline" style={{ backgroundColor: primaryColor }}>
+            Get in Touch
+          </a>
+        </div>
+      </section>
+
+      {props.children}
+    </Base>
+  );
+};
+
+export default Article;