@barkajs/barka 0.1.0

package/starters/kadoservices/content/team/maria-wisniewska.md

@@ -0,0 +1,28 @@
+---
+uuid: "ks-029"
+title: "Maria Wisniewska"
+type: person
+status: published
+langcode: en
+slug: maria-wisniewska
+date: 2026-03-15
+fields:
+  role: "VP Recruitment"
+  department: "Recruitment"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "https://placehold.co/400x400/14101E/F59E0B?text=Maria+Wisniewska"
+  quote: "Great recruitment is not about filling positions — it's about understanding what makes someone thrive in a specific role, team, and culture, and then finding that match."
+seo:
+  title: "Maria Wisniewska — VP Recruitment, KadoServices"
+  description: "Maria Wisniewska, VP Recruitment at KadoServices. Leads 200+ recruiters across all industry practices. Expert in executive search and RPO."
+---
+
+Maria Wisniewska leads KadoServices' recruitment operations, managing a team of 200+ recruiters across all industry verticals — manufacturing, logistics, IT, finance, retail, and healthcare. She is responsible for recruitment methodology, quality standards, recruiter training, and the development of new service lines.
+
+Maria joined KadoServices in 2013 as a Senior Recruiter specializing in finance and shared services. Her ability to build deep candidate relationships and consistently deliver high-quality placements earned her rapid promotions — from Team Leader (2015) to Recruitment Director (2018) to VP Recruitment (2021).
+
+Before KadoServices, Maria spent six years at Hays Poland, where she built the company's finance and SSC recruitment desk in Kraków from scratch, growing it to a team of 12 consultants. Her early career in recruitment gave her first-hand experience of every aspect of the hiring process — from cold-calling passive candidates to negotiating complex offer packages.
+
+Maria holds a Master's degree in Psychology from Jagiellonian University, which gives her a distinctive edge in candidate assessment. She is a certified assessor for several psychometric tools (SHL, Hogan, MBTI) and has designed the competency-based interview frameworks used across KadoServices. She is also a frequent contributor to industry publications, writing about talent acquisition trends, candidate experience, and recruitment technology.
+
+Under Maria's leadership, KadoServices has achieved a 94% retention rate for permanent placements and has grown the RPO practice from zero to 35+ active programs.

package/starters/kadoservices/content/team/tomasz-nowak.md

@@ -0,0 +1,26 @@
+---
+uuid: "ks-028"
+title: "Tomasz Nowak"
+type: person
+status: published
+langcode: en
+slug: tomasz-nowak
+date: 2026-03-15
+fields:
+  role: "Chief Operating Officer"
+  department: "Management"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "https://placehold.co/400x400/14101E/F59E0B?text=Tomasz+Nowak"
+  quote: "Operational excellence in staffing means one thing: the right person, in the right place, on time, every time. Everything else is a means to that end."
+seo:
+  title: "Tomasz Nowak — COO, KadoServices"
+  description: "Tomasz Nowak, COO of KadoServices. 18 years in staffing operations, responsible for service delivery across 12 offices and 15,000+ annual placements."
+---
+
+Tomasz Nowak joined KadoServices in 2011 as Operations Manager and was appointed Chief Operating Officer in 2017. He oversees all service delivery operations — temporary staffing, permanent recruitment, payroll, and on-site management — across the company's 12 offices in Poland.
+
+Before KadoServices, Tomasz spent eight years at ManpowerGroup, where he managed operations for industrial staffing in the Silesia region. He built his career on the front lines of workforce management — coordinating hundreds of temporary workers across manufacturing plants, solving staffing emergencies at 3 AM, and developing the operational processes that enable consistent service delivery at scale.
+
+At KadoServices, Tomasz has been instrumental in building the operational infrastructure that supports 15,000+ placements per year. He designed the company's quality management system, implemented the ATS (Applicant Tracking System) and workforce management platforms, and established the on-site coordination model that now operates at over 30 client locations.
+
+Tomasz holds a degree in Industrial Engineering from the Silesian University of Technology and an MBA from Kozminski University. He is a certified Lean Six Sigma Black Belt and has applied process improvement methodologies to reduce time-to-fill by 40% and improve candidate quality scores by 25% since taking the COO role. He is passionate about using technology and data to improve staffing operations while never losing sight of the human element at the center of the business.

package/starters/kadoservices/starter.yaml

@@ -0,0 +1,15 @@
+name: kadoservices
+label: "KadoServices — Staffing & HR Demo"
+description: >
+  Full demo site for a fictional staffing and HR services company.
+  Includes 6 services, 6 industries, 3 case studies, articles, team pages,
+  office locations, and a landing page with 10 sections.
+  Ships with the premium KadoServices theme (warm amber + deep plum).
+theme: kadoservices
+copies:
+  - from: content/
+    to: content/
+  - from: config/
+    to: config/
+  - from: themes/
+    to: themes/

package/starters/kadoservices/themes/kadoservices/_types.ts

@@ -0,0 +1,93 @@
+export interface ThemeConfig {
+  name: string;
+  label: string;
+  description?: string;
+  version?: string;
+  author?: string;
+  base?: string;
+  settings?: Record<string, ThemeSettingDefinition>;
+}
+
+export interface ThemeSettingDefinition {
+  type: string;
+  label: string;
+  default?: any;
+  options?: string[];
+}
+
+export interface Content {
+  id: string;
+  type: string;
+  title: string;
+  slug: string;
+  status: 'draft' | 'published' | 'archived';
+  langcode: string;
+  body: string;
+  bodyHtml: string;
+  fields: Record<string, any>;
+  sections?: Section[];
+  seo?: SeoData;
+  siteId?: string;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt?: Date;
+  filePath?: string;
+}
+
+export interface Section {
+  type: string;
+  weight: number;
+  data: Record<string, any>;
+  settings: SectionSettings;
+  children?: Section[];
+}
+
+export interface SectionSettings {
+  background: 'light' | 'dark' | 'primary' | 'custom';
+  background_color?: string;
+  background_image?: string;
+  spacing: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+  width: 'contained' | 'wide' | 'full';
+  css_class?: string;
+  anchor_id?: string;
+  hidden?: boolean;
+}
+
+export interface SeoData {
+  title?: string;
+  description?: string;
+  image?: string;
+  noindex?: boolean;
+  canonical?: string;
+}
+
+export interface SiteConfig {
+  site_name: string;
+  base_url: string;
+  theme: string;
+  theme_settings?: Record<string, any>;
+  seo?: {
+    title_separator?: string;
+    default_description?: string;
+    default_image?: string;
+    google_site_verification?: string;
+    json_ld?: {
+      organization?: { name: string; logo: string; url: string };
+    };
+  };
+}
+
+export interface LayoutProps {
+  content: Content;
+  site: SiteConfig;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+  children?: any;
+}
+
+export interface SectionProps {
+  data: Record<string, any>;
+  settings: SectionSettings;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+}

package/starters/kadoservices/themes/kadoservices/components/blog-listing/blog-listing.tsx

@@ -0,0 +1,197 @@
+/** @jsxImportSource hono/jsx */
+import { raw } from 'hono/html';
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+function renderGradient(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 BlogListing: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const urlFn = (p: string) => themeSettings._url?.(p) ?? p;
+  const t = (key: string) => themeSettings._t?.(key) ?? key;
+  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 items: Array<{
+    title: string;
+    url?: string;
+    excerpt?: string;
+    image?: string;
+    date?: string;
+  }> = data.items ?? [];
+
+  const featured = items[0];
+  const rest = items.slice(1);
+
+  return (
+    <section
+      class={`${spacing} ${bg} relative overflow-hidden ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {/* Left-aligned heading + "View all" link */}
+        <div class="mb-16 flex items-end justify-between gap-4">
+          <div class="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('*') ? renderGradient(data.heading, primaryColor) : data.heading}
+              </h2>
+            )}
+          </div>
+          <a
+            href={urlFn('/articles')}
+            class="reveal-sub hidden shrink-0 items-center gap-1 text-sm font-semibold transition-colors duration-200 hover:no-underline sm:flex"
+            style={{ color: primaryColor }}
+          >
+            {t('blog.view_all')}
+            <span class="transition-transform duration-200 hover:translate-x-1">&rarr;</span>
+          </a>
+        </div>
+
+        {items.length > 0 ? (
+          <div class="grid gap-6 lg:grid-cols-5">
+            {/* Featured article — large, left */}
+            {featured && (
+              <article class="testimonial-featured lg:col-span-3">
+                <a
+                  href={featured.url ?? '#'}
+                  class={`group block overflow-hidden rounded-2xl border transition-all duration-400 hover:no-underline ${
+                    isDark
+                      ? 'border-gray-700/50 bg-white/[0.03] hover:border-gray-600'
+                      : 'border-gray-100 bg-white hover:shadow-xl hover:shadow-slate-200/50'
+                  }`}
+                >
+                  {featured.image && (
+                    <div class="overflow-hidden">
+                      <img
+                        src={featured.image}
+                        alt={featured.title}
+                        class="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
+                        loading="lazy"
+                      />
+                    </div>
+                  )}
+                  <div class="p-8">
+                    {featured.date && (
+                      <time class={`text-xs font-medium ${isDark ? 'text-gray-500' : 'text-slate-400'}`}>{featured.date}</time>
+                    )}
+                    <h3 class={`mt-3 text-xl font-bold tracking-[-0.02em] leading-tight ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                      {featured.title}
+                    </h3>
+                    {featured.excerpt && (
+                      <p class={`mt-3 line-clamp-3 text-sm leading-relaxed ${isDark ? 'text-gray-400' : 'text-slate-500'}`}>
+                        {featured.excerpt}
+                      </p>
+                    )}
+                    <div class="mt-5 flex items-center gap-1 text-sm font-semibold" style={{ color: primaryColor }}>
+                      Read more
+                      <span class="transition-transform duration-200 group-hover:translate-x-1">&rarr;</span>
+                    </div>
+                  </div>
+                </a>
+              </article>
+            )}
+
+            {/* Side articles — stacked, offset */}
+            <div class="testimonial-side flex flex-col gap-6 lg:col-span-2 lg:mt-6">
+              {rest.map((item) => (
+                <article>
+                  <a
+                    href={item.url ?? '#'}
+                    class={`group flex gap-5 rounded-2xl border p-5 transition-all duration-400 hover:no-underline ${
+                      isDark
+                        ? 'border-gray-700/50 bg-white/[0.03] hover:border-gray-600'
+                        : 'border-gray-100 bg-white hover:shadow-lg hover:shadow-slate-200/50'
+                    }`}
+                  >
+                    {item.image && (
+                      <div class="hidden shrink-0 overflow-hidden rounded-xl sm:block" style={{ width: '100px', height: '100px' }}>
+                        <img
+                          src={item.image}
+                          alt={item.title}
+                          class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+                          loading="lazy"
+                        />
+                      </div>
+                    )}
+                    <div class="flex-1">
+                      {item.date && (
+                        <time class={`text-xs font-medium ${isDark ? 'text-gray-500' : 'text-slate-400'}`}>{item.date}</time>
+                      )}
+                      <h3 class={`mt-1 text-sm font-semibold leading-snug ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                        {item.title}
+                      </h3>
+                      <div class="mt-2 flex items-center gap-1 text-xs font-semibold opacity-0 transition-all duration-200 group-hover:opacity-100" style={{ color: primaryColor }}>
+                        Read <span class="transition-transform duration-200 group-hover:translate-x-1">&rarr;</span>
+                      </div>
+                    </div>
+                  </a>
+                </article>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <p class={`text-center text-sm ${isDark ? 'text-gray-500' : 'text-slate-400'}`}>
+            Blog listing renders dynamically — content will appear here at runtime.
+          </p>
+        )}
+
+        {/* Mobile "View all" */}
+        <div class="mt-10 text-center sm:hidden">
+          <a href={urlFn('/articles')} class="text-sm font-semibold hover:no-underline" style={{ color: primaryColor }}>
+            {t('blog.view_all')} &rarr;
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BlogListing;

package/starters/kadoservices/themes/kadoservices/components/blog-listing/schema.yaml

@@ -0,0 +1,21 @@
+label: Blog Listing
+icon: list
+description: "Featured blog post with side listing of recent articles."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  content_type:
+    type: text
+    label: Content Type
+    default: article
+  limit:
+    type: number
+    label: Max Items
+    default: 6
+  columns:
+    type: select
+    label: Columns
+    options: ["2", "3", "4"]
+    default: "3"

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

@@ -0,0 +1,104 @@
+/** @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-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 layoutMap: Record<string, string> = {
+  '2': 'grid-cols-1 md:grid-cols-2',
+  '3': 'grid-cols-1 md:grid-cols-3',
+  '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  '1-2': 'grid-cols-1 md:grid-cols-3',
+  '2-1': 'grid-cols-1 md:grid-cols-3',
+};
+
+function colSpan(layout: string, index: number): string {
+  if (layout === '1-2') return index === 0 ? 'md:col-span-1' : 'md:col-span-2';
+  if (layout === '2-1') return index === 0 ? 'md:col-span-2' : 'md:col-span-1';
+  return '';
+}
+
+const Columns: 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 layout = data.layout ?? '2';
+  const columns: Array<{ heading?: string; body?: string; image?: string; image_alt?: string }> =
+    data.columns ?? [];
+
+  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={`grid gap-10 ${layoutMap[layout] ?? layoutMap['2']}`}>
+          {columns.map((col, i) => (
+            <div class={colSpan(layout, i)}>
+              {col.image && (
+                <img
+                  src={col.image}
+                  alt={col.image_alt ?? ''}
+                  class="mb-6 rounded-2xl"
+                  loading="lazy"
+                />
+              )}
+              {col.heading && (
+                <h3 class="mb-4 text-xl font-semibold tracking-[-0.01em]">{col.heading}</h3>
+              )}
+              {col.body && (
+                <div
+                  class={`prose max-w-none ${isDark ? 'prose-invert' : 'prose-slate'}`}
+                  dangerouslySetInnerHTML={{ __html: col.body }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Columns;

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

@@ -0,0 +1,23 @@
+label: Columns
+icon: columns
+description: "Multi-column layout with configurable column ratios."
+status: stable
+fields:
+  layout:
+    type: select
+    label: Layout
+    options: ["2", "3", "4", "1-2", "2-1"]
+    default: "2"
+  items:
+    type: repeater
+    label: Column Content
+    fields:
+      heading:
+        type: text
+        label: Heading
+      body:
+        type: textarea
+        label: "Body (Markdown)"
+      image:
+        type: media
+        label: Image

package/starters/kadoservices/themes/kadoservices/components/counters/counters.css

@@ -0,0 +1,13 @@
+@keyframes countFade {
+  from { opacity: 0; transform: scale(0.7) translateY(20px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.counter-item {
+  opacity: 0;
+  animation: countFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.counter-item:nth-child(1) { animation-delay: 0.15s; }
+.counter-item:nth-child(2) { animation-delay: 0.35s; }
+.counter-item:nth-child(3) { animation-delay: 0.55s; }
+.counter-item:nth-child(4) { animation-delay: 0.75s; }

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

@@ -0,0 +1,103 @@
+/** @jsxImportSource hono/jsx */
+import { raw } from 'hono/html';
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+function renderGradient(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 Counters: 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 primaryColor = themeSettings.primary_color ?? '#F59E0B';
+  const navColor = themeSettings.nav_color ?? '#14101E';
+  const rawItems: Array<Record<string, any>> = data.items ?? [];
+  const items = rawItems.map((item) => ({
+    value: item.number ?? item.value ?? '',
+    suffix: item.suffix ?? '',
+    label: item.label ?? '',
+  }));
+
+  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} ${isDark ? 'text-white' : 'bg-white text-slate-900'} relative overflow-hidden ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      {/* Grid pattern for dark bg */}
+      {isDark && <div class="grid-pattern pointer-events-none absolute inset-0" />}
+
+      {/* Floating blob */}
+      <div class="blob blob-sm" style={{ bottom: '10%', right: '5%', background: `${primaryColor}10`, animationDelay: '-4s' }} />
+
+      <div class={width}>
+        {data.heading && (
+          <h2 class="reveal-heading mb-16 text-3xl font-bold tracking-[-0.03em] sm:text-4xl lg:text-5xl">
+            {data.heading.includes('*') ? renderGradient(data.heading, primaryColor) : data.heading}
+          </h2>
+        )}
+
+        {/* Counter items with dividers, staggered */}
+        <div class="flex flex-wrap items-start justify-between gap-y-12">
+          {items.map((item, idx) => (
+            <div class="counter-item flex items-start gap-8" style={{ animationDelay: `${0.15 + idx * 0.2}s` }}>
+              {idx > 0 && (
+                <div class={`hidden h-20 w-px lg:block ${isDark ? 'bg-white/10' : 'bg-gray-200'}`} />
+              )}
+              <div class="min-w-[140px]">
+                <div
+                  class="text-5xl font-extrabold tracking-[-0.04em] sm:text-6xl lg:text-7xl"
+                  style={{ color: isDark ? '#fff' : primaryColor }}
+                >
+                  {item.value}
+                  {item.suffix && <span class="text-3xl sm:text-4xl lg:text-5xl">{item.suffix}</span>}
+                </div>
+                <div class={`mt-3 text-sm font-medium uppercase tracking-[0.12em] ${isDark ? 'text-gray-400' : 'text-slate-400'}`}>
+                  {item.label}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Counters;

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

@@ -0,0 +1,23 @@
+label: Counters
+icon: hash
+description: "Animated counter stats with numbers, labels, and optional suffixes."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Counter Items
+    fields:
+      number:
+        type: text
+        label: Number
+        required: true
+      label:
+        type: text
+        label: Label
+        required: true
+      suffix:
+        type: text
+        label: Suffix