@barkajs/barka 0.1.0

package/starters/kadoservices/themes/kadoservices/components/cta/cta.tsx

@@ -0,0 +1,100 @@
+/** @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-10',
+  medium: 'py-20',
+  large: 'py-28',
+  xlarge: 'py-36',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-5xl mx-auto px-6',
+  wide: 'max-w-6xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const Cta: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const urlFn = (p: string) => themeSettings._url?.(p) ?? p;
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+
+  const bgColor = settings.background === 'primary' ? primaryColor : navColor;
+  const isDarkBg = settings.background !== 'primary';
+
+  return (
+    <section
+      class={`${spacing} text-white relative overflow-hidden ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={{ backgroundColor: bgColor }}
+    >
+      {/* Grid pattern */}
+      <div class="grid-pattern pointer-events-none absolute inset-0" />
+
+      {/* Floating blobs */}
+      <div class="blob" style={{ top: '-20%', left: '-10%', width: '400px', height: '400px', background: `${primaryColor}12` }} />
+      <div class="blob blob-sm" style={{ bottom: '-10%', right: '5%', background: `#F9731608`, animationDelay: '-6s' }} />
+
+      {/* Glow effect */}
+      <div
+        class="pointer-events-none absolute inset-0"
+        style={{
+          background: `radial-gradient(ellipse at 50% 50%, ${primaryColor}12 0%, transparent 60%)`,
+        }}
+      />
+
+      <div class={`${width} relative`}>
+        {/* Asymmetric: text left-aligned on larger screens */}
+        <div class="grid items-center gap-12 lg:grid-cols-5">
+          <div class="lg:col-span-3">
+            {data.eyebrow && (
+              <p class="reveal-sub mb-4 text-xs font-semibold uppercase tracking-[0.25em] text-gray-400">{data.eyebrow}</p>
+            )}
+            {data.heading && (
+              <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl lg:text-5xl">
+                {data.heading}
+              </h2>
+            )}
+            {(data.description || data.body) && (
+              <p class="reveal-sub mt-6 max-w-xl text-lg leading-relaxed text-gray-300/90" style={{ animationDelay: '0.25s' }}>
+                {data.description ?? data.body}
+              </p>
+            )}
+          </div>
+
+          {/* Buttons on the right, vertically stacked */}
+          <div class="reveal-sub flex flex-col gap-4 lg:col-span-2" style={{ animationDelay: '0.35s' }}>
+            {data.button_text && (
+              <a
+                href={urlFn(data.button_url ?? '#')}
+                class={`inline-block rounded-lg px-8 py-4 text-center text-sm font-semibold shadow-lg transition-all duration-300 hover:shadow-xl hover:brightness-110 hover:no-underline ${
+                  isDarkBg ? 'text-white' : 'text-slate-900'
+                }`}
+                style={{ backgroundColor: isDarkBg ? primaryColor : '#fff' }}
+              >
+                {data.button_text}
+              </a>
+            )}
+            {data.secondary_text && (
+              <a
+                href={urlFn(data.secondary_url ?? '#')}
+                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"
+              >
+                {data.secondary_text}
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Glow line top */}
+      <div class="glow-line absolute top-0 left-0 right-0" />
+    </section>
+  );
+};
+
+export default Cta;

package/starters/kadoservices/themes/kadoservices/components/cta/schema.yaml

@@ -0,0 +1,30 @@
+label: Call to Action
+icon: megaphone
+description: "Prominent call-to-action with optional eyebrow, primary and secondary buttons."
+status: stable
+fields:
+  eyebrow:
+    type: text
+    label: Eyebrow
+  heading:
+    type: text
+    label: Heading
+    required: true
+  body:
+    type: textarea
+    label: Body Text
+  description:
+    type: textarea
+    label: Description
+  button_text:
+    type: text
+    label: Button Text
+  button_url:
+    type: text
+    label: Button URL
+  secondary_text:
+    type: text
+    label: Secondary Button Text
+  secondary_url:
+    type: text
+    label: Secondary Button URL

package/starters/kadoservices/themes/kadoservices/components/faq/faq.tsx

@@ -0,0 +1,77 @@
+/** @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-10',
+  medium: 'py-20',
+  large: 'py-28',
+  xlarge: 'py-36',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-3xl mx-auto px-6',
+  wide: 'max-w-5xl 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: '',
+};
+
+const Faq: 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 ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const items: Array<{ question: string; answer: string }> = data.items ?? [];
+
+  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';
+
+  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-16 text-center text-3xl font-bold tracking-[-0.02em] sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class={`divide-y ${isDark ? 'divide-gray-700/50' : 'divide-gray-100'}`}>
+          {items.map((item) => (
+            <div class="py-8">
+              <h3 class={`text-lg font-semibold tracking-[-0.01em] ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                {item.question}
+              </h3>
+              <p class={`mt-4 leading-relaxed ${isDark ? 'text-gray-400' : 'text-slate-500'}`}>
+                {item.answer}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Faq;

package/starters/kadoservices/themes/kadoservices/components/faq/schema.yaml

@@ -0,0 +1,20 @@
+label: FAQ
+icon: help-circle
+description: "Question and answer list."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Questions
+    fields:
+      question:
+        type: text
+        label: Question
+        required: true
+      answer:
+        type: textarea
+        label: Answer
+        required: true

package/starters/kadoservices/themes/kadoservices/components/features/features.tsx

@@ -0,0 +1,151 @@
+/** @jsxImportSource hono/jsx */
+import { raw } from 'hono/html';
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+function renderGradientHeading(text: string, color: string): any {
+  const parts = text.split(/(\*[^*]+\*)/g);
+  const html = parts
+    .map((p) =>
+      p.startsWith('*') && p.endsWith('*')
+        ? `<em class="not-italic" style="background:linear-gradient(135deg,${color},${color}99,#EF4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">${p.slice(1, -1)}</em>`
+        : p,
+    )
+    .join('');
+  return raw(html);
+}
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-10',
+  medium: 'py-20',
+  large: 'py-28',
+  xlarge: 'py-36',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-6xl mx-auto px-6',
+  wide: 'max-w-7xl 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: '',
+};
+
+const colsMap: Record<string, string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+const iconSvgs: Record<string, string> = {
+  clock: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
+  briefcase: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>',
+  star: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
+  'file-text': '<svg xmlns="http://www.w3.org/2000/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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
+  truck: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>',
+  code: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+  cloud: '<svg xmlns="http://www.w3.org/2000/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="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg>',
+  brain: '<svg xmlns="http://www.w3.org/2000/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="M12 2a4 4 0 0 1 4 4c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2a4 4 0 0 1 4-4z"/><path d="M8 8v2c0 2.2 1.8 4 4 4s4-1.8 4-4V8"/><path d="M6 14c-1.7 1-3 3-3 5v1h18v-1c0-2-1.3-4-3-5"/><circle cx="9" cy="6" r="0.5"/><circle cx="15" cy="6" r="0.5"/></svg>',
+  shield: '<svg xmlns="http://www.w3.org/2000/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="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>',
+  users: '<svg xmlns="http://www.w3.org/2000/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>',
+  rocket: '<svg xmlns="http://www.w3.org/2000/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.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>',
+  building: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01"/><path d="M16 6h.01"/><path d="M12 6h.01"/><path d="M12 10h.01"/><path d="M12 14h.01"/><path d="M16 10h.01"/><path d="M16 14h.01"/><path d="M8 10h.01"/><path d="M8 14h.01"/></svg>',
+  heart: '<svg xmlns="http://www.w3.org/2000/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="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
+  'shopping-cart': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>',
+  landmark: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="22" x2="21" y2="22"/><line x1="6" y1="18" x2="6" y2="11"/><line x1="10" y1="18" x2="10" y2="11"/><line x1="14" y1="18" x2="14" y2="11"/><line x1="18" y1="18" x2="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>',
+  stethoscope: '<svg xmlns="http://www.w3.org/2000/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.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3"/><path d="M8 15v1a6 6 0 0 0 6 6h.87a2 2 0 0 0 1.42-.59L18 19.86"/><circle cx="20" cy="16" r="2"/></svg>',
+  factory: '<svg xmlns="http://www.w3.org/2000/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="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M17 18h1"/><path d="M12 18h1"/><path d="M7 18h1"/></svg>',
+  store: '<svg xmlns="http://www.w3.org/2000/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="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/></svg>',
+  signal: '<svg xmlns="http://www.w3.org/2000/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="M2 20h.01"/><path d="M7 20v-4"/><path d="M12 20v-8"/><path d="M17 20V8"/><path d="M22 4v16"/></svg>',
+  zap: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
+};
+
+const Features: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const urlFn = (p: string) => themeSettings._url?.(p) ?? p;
+  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 ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const items: Array<{ icon?: string; title: string; description?: string }> =
+    data.items ?? [];
+  const columns = String(data.columns ?? '3');
+
+  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';
+
+  return (
+    <section
+      class={`${spacing} ${bg} relative overflow-hidden ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      {/* Decorative blob */}
+      {!isDark && (
+        <div class="blob blob-sm" style={{ top: '10%', right: '-5%', background: `${primaryColor}08` }} />
+      )}
+
+      <div class={width}>
+        {/* Left-aligned heading for asymmetry */}
+        <div class="mb-16 max-w-2xl">
+          {data.heading && (
+            <h2 class="reveal-heading text-3xl font-bold tracking-[-0.03em] sm:text-4xl lg:text-5xl">
+              {data.heading.includes('*') ? renderGradientHeading(data.heading, primaryColor) : data.heading}
+            </h2>
+          )}
+          {data.subheading && (
+            <p class={`reveal-sub mt-5 text-lg leading-relaxed ${isDark ? 'text-gray-300' : 'text-slate-500'}`}>
+              {data.subheading}
+            </p>
+          )}
+        </div>
+
+        {/* Numbered list layout */}
+        <div class="stagger-grid space-y-0 divide-y divide-gray-100">
+          {items.map((item, idx) => {
+            const num = String(idx + 1).padStart(2, '0');
+            const inner = (
+              <div class={`group flex items-center gap-6 py-6 transition-all duration-300 hover:pl-2 ${isDark ? '' : ''}`}>
+                <span class="shrink-0 text-3xl font-extrabold tracking-tight opacity-20" style={{ color: primaryColor }}>{num}</span>
+                {item.icon && (
+                  <div
+                    class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-white"
+                    style={{ backgroundColor: primaryColor }}
+                    dangerouslySetInnerHTML={{ __html: iconSvgs[item.icon] ?? `<span class="text-lg font-bold">${(item.icon as string).charAt(0).toUpperCase()}</span>` }}
+                  />
+                )}
+                <div class="flex-1">
+                  <h3 class={`text-lg font-semibold tracking-[-0.01em] ${isDark ? 'text-white' : 'text-slate-900'}`}>{item.title}</h3>
+                  {item.description && (
+                    <p class={`mt-1 text-sm leading-relaxed ${isDark ? 'text-gray-400' : 'text-slate-500'}`}>{item.description}</p>
+                  )}
+                </div>
+                <span class="shrink-0 text-sm font-semibold opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:translate-x-1" style={{ color: primaryColor }}>&rarr;</span>
+              </div>
+            );
+            return (item as any).url
+              ? <a href={urlFn((item as any).url)} class="block hover:no-underline">{inner}</a>
+              : <div>{inner}</div>;
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;

package/starters/kadoservices/themes/kadoservices/components/features/schema.yaml

@@ -0,0 +1,19 @@
+label: Features
+icon: grid
+description: "Grid of feature cards with icons, titles, and descriptions."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  subheading:
+    type: textarea
+    label: Subheading
+  columns:
+    type: select
+    label: Columns
+    options: ["2", "3", "4"]
+    default: "3"
+  items:
+    type: textarea
+    label: Feature Items (YAML)

package/starters/kadoservices/themes/kadoservices/components/form/form.tsx

@@ -0,0 +1,135 @@
+/** @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-2xl mx-auto px-6',
+  wide: 'max-w-4xl 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: '',
+};
+
+const Form: 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 ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+
+  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 inputClasses = isDark
+    ? 'w-full rounded-lg border border-gray-600 bg-white/10 px-4 py-3 text-white placeholder-gray-400 focus:border-emerald-400 focus:outline-none focus:ring-1 focus:ring-emerald-400'
+    : 'w-full rounded-lg border border-gray-300 bg-white px-4 py-3 text-slate-900 placeholder-gray-400 focus:border-amber-500 focus:outline-none focus:ring-1 focus:ring-amber-500';
+
+  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-4 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+        {data.description && (
+          <p class={`mb-10 text-center text-lg ${isDark ? 'text-gray-300' : 'text-slate-500'}`}>
+            {data.description}
+          </p>
+        )}
+
+        <form
+          action={data.action_url ?? '#'}
+          method="post"
+          class="space-y-6"
+        >
+          <div class="grid gap-6 sm:grid-cols-2">
+            <div>
+              <label for="form-name" class="mb-1 block text-sm font-medium">Name</label>
+              <input
+                id="form-name"
+                name="name"
+                type="text"
+                required
+                placeholder="Your name"
+                class={inputClasses}
+              />
+            </div>
+            <div>
+              <label for="form-email" class="mb-1 block text-sm font-medium">Email</label>
+              <input
+                id="form-email"
+                name="email"
+                type="email"
+                required
+                placeholder="you@company.com"
+                class={inputClasses}
+              />
+            </div>
+          </div>
+
+          <div>
+            <label for="form-company" class="mb-1 block text-sm font-medium">Company</label>
+            <input
+              id="form-company"
+              name="company"
+              type="text"
+              placeholder="Your company"
+              class={inputClasses}
+            />
+          </div>
+
+          <div>
+            <label for="form-message" class="mb-1 block text-sm font-medium">Message</label>
+            <textarea
+              id="form-message"
+              name="message"
+              rows={5}
+              required
+              placeholder="How can we help?"
+              class={inputClasses}
+            />
+          </div>
+
+          <div class="text-center">
+            <button
+              type="submit"
+              class="inline-block rounded-lg px-8 py-3 text-sm font-semibold text-white shadow-lg transition-all hover:brightness-110"
+              style={{ backgroundColor: primaryColor }}
+            >
+              {data.button_text ?? 'Send Message'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default Form;

package/starters/kadoservices/themes/kadoservices/components/form/schema.yaml

@@ -0,0 +1,18 @@
+label: Contact Form
+icon: mail
+description: "Contact form with name, email, company, and message fields."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  description:
+    type: textarea
+    label: Description
+  action_url:
+    type: text
+    label: Form Action URL
+  success_message:
+    type: text
+    label: Success Message
+    default: "Thank you! We'll be in touch."

package/starters/kadoservices/themes/kadoservices/components/gallery/gallery.tsx

@@ -0,0 +1,90 @@
+/** @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-6xl mx-auto px-6',
+  wide: 'max-w-7xl 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: '',
+};
+
+const colsMap: Record<string, string> = {
+  '2': 'sm:grid-cols-2',
+  '3': 'sm:grid-cols-2 lg:grid-cols-3',
+  '4': 'sm:grid-cols-2 lg:grid-cols-4',
+};
+
+const Gallery: 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 ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const items: Array<{ src: string; alt?: string; caption?: string }> =
+    data.items ?? [];
+  const columns = String(data.columns ?? '3');
+
+  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';
+
+  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-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class={`grid gap-4 ${colsMap[columns] ?? colsMap['3']}`}>
+          {items.map((item) => (
+            <figure class="group overflow-hidden rounded-xl">
+              <img
+                src={item.src}
+                alt={item.alt ?? ''}
+                class="aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                loading="lazy"
+              />
+              {item.caption && (
+                <figcaption class={`mt-2 text-center text-sm ${isDark ? 'text-gray-400' : 'text-slate-500'}`}>
+                  {item.caption}
+                </figcaption>
+              )}
+            </figure>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Gallery;