@barkajs/barka 0.1.0

package/starters/lokatech/content/services/digital-transformation.md

@@ -0,0 +1,70 @@
+---
+title: "Digital Transformation Consulting"
+type: service
+status: published
+langcode: en
+slug: digital-transformation
+date: 2026-03-21
+fields:
+  short_description: "Strategic advisory to modernize legacy systems, automate processes, and accelerate your digital roadmap. From assessment to execution with measurable outcomes."
+  icon: rocket
+  hero_stats:
+    - value: "150+"
+      label: "Transformations delivered"
+    - value: "40%"
+      label: "Avg. process efficiency gain"
+    - value: "18"
+      label: "Months avg. payback period"
+  challenges:
+    - "Legacy systems built 15-20 years ago are the backbone of operations — but they can't support modern digital experiences"
+    - "Siloed departments run independent tech stacks that don't communicate, creating data gaps and duplicate work"
+    - "Previous transformation attempts failed because they focused on technology without addressing process and culture"
+    - "Resistance to change from leadership and teams blocks adoption of new tools and ways of working"
+    - "No clear metrics to prove ROI — leadership sees transformation as a cost center, not a value driver"
+    - "Vendor-driven roadmaps prioritize product sales over your actual business outcomes"
+  process:
+    - title: "Digital Maturity Assessment"
+      description: "Evaluate your current technology landscape, processes, organizational readiness, and competitive position. Benchmark against industry peers using our proprietary maturity model across 8 dimensions."
+    - title: "Strategy & Roadmap"
+      description: "Define a phased transformation plan aligned with business objectives. Each initiative has clear ROI projections, resource requirements, and dependencies. Quick wins in Q1, strategic moves in Q2-Q4."
+    - title: "Architecture & Technology Selection"
+      description: "Design target-state architecture: integration strategy, platform selection, build-vs-buy decisions. TOGAF-aligned with clear migration paths from current state."
+    - title: "Implementation & Change Management"
+      description: "Execute the roadmap with dedicated cross-functional teams. Parallel workstreams for technology delivery, process redesign, and organizational change management."
+    - title: "Measurement & Continuous Optimization"
+      description: "Track KPIs against targets, measure adoption rates, and iterate on the strategy quarterly. Transformation is a journey, not a project — we stay until outcomes are achieved."
+  capabilities:
+    - "Legacy Modernization — assessment, strangler fig migration, database re-platforming"
+    - "Process Automation — RPA, workflow automation, intelligent document processing"
+    - "Enterprise Architecture — TOGAF frameworks, governance, architecture reviews"
+    - "Change Management — stakeholder engagement, training, adoption measurement"
+    - "Innovation Labs — rapid prototyping, POC development, technology evaluation"
+    - "Digital Strategy — market analysis, competitive benchmarking, capability mapping"
+    - "Platform Selection — vendor evaluation, RFP management, contract negotiation"
+    - "Integration Strategy — API-first, event-driven, middleware modernization"
+    - "Data Migration — legacy database extraction, cleansing, and migration"
+  technologies:
+    - name: "TOGAF"
+    - name: "Mulesoft"
+    - name: "ServiceNow"
+    - name: "UiPath"
+    - name: "Power Platform"
+    - name: "Jira"
+    - name: "Confluence"
+    - name: "Azure DevOps"
+    - name: "Salesforce"
+    - name: "SAP"
+  case_studies:
+    - title: "Banking Platform Modernization"
+      result: "60% faster transactions"
+      url: "/case-studies/banking-platform-modernization"
+    - title: "Telecom 5G Platform"
+      result: "5M+ subscribers migrated"
+      url: "/case-studies/telecom-5g-platform"
+    - title: "GovTech Citizen Portal"
+      result: "80% digital adoption"
+      url: "/case-studies/govtech-citizen-portal"
+seo:
+  title: "Digital Transformation Consulting — LokaTech Solutions"
+  description: "Strategic digital transformation consulting. Legacy modernization, process automation, and technology roadmaps for enterprise."
+---

package/starters/lokatech/content/services/it-outsourcing.md

@@ -0,0 +1,72 @@
+---
+title: "IT Outsourcing & Staff Augmentation"
+type: service
+status: published
+langcode: en
+slug: it-outsourcing
+date: 2026-03-21
+fields:
+  short_description: "Scalable engineering teams that integrate seamlessly with your organization. From individual specialists to fully managed 50-person delivery units."
+  icon: users
+  hero_stats:
+    - value: "800+"
+      label: "Engineers available"
+    - value: "2 weeks"
+      label: "Avg. team ramp-up"
+    - value: "95%"
+      label: "Contract renewal rate"
+  challenges:
+    - "Local talent markets are depleted — senior engineers receive 5+ offers and your positions stay open for months"
+    - "Onboarding new hires takes 3-6 months before they're productive, but your project deadline is next quarter"
+    - "Freelancers and agencies deliver inconsistent quality and disappear after the contract ends"
+    - "Time zone differences and cultural gaps make offshore outsourcing a communication nightmare"
+    - "Knowledge transfer risk — if key engineers leave, critical institutional knowledge walks out the door"
+    - "Scaling down is as hard as scaling up — permanent hires create fixed costs that budgets can't absorb during downturns"
+  process:
+    - title: "Needs Analysis & Team Design"
+      description: "Deep dive into your technology stack, team culture, project requirements, and working style. We design the optimal team composition — roles, seniority mix, and engagement model."
+    - title: "Talent Selection & Matching"
+      description: "Hand-pick engineers from our 800+ bench, matching technical skills, domain experience, seniority, and personality fit. Candidates go through your interview process, not just ours."
+    - title: "Structured Onboarding"
+      description: "First week: tools, access, codebase orientation. Second week: paired programming with your team. Our onboarding playbook ensures engineers contribute from sprint one."
+    - title: "Delivery & Account Management"
+      description: "Dedicated account managers monitor quality, communication, and team health. Bi-weekly satisfaction check-ins with your leadership. Transparent performance dashboards."
+    - title: "Continuous Optimization"
+      description: "Quarterly performance reviews, skill gap analysis, and team composition adjustments. Knowledge management ensures continuity even when individual engineers rotate."
+  capabilities:
+    - "Staff Augmentation — individual specialists embedded in your team and processes"
+    - "Dedicated Teams — full cross-functional squads managed by LokaTech engineering leads"
+    - "Managed Delivery — end-to-end project ownership with fixed scope and deliverables"
+    - "Build-Operate-Transfer — we build and run the team, then transfer to your organization"
+    - "Nearshore Delivery — Central European timezone (CET/CEST) for real-time collaboration"
+    - "Specialized Squads — DevOps, QA, security, data engineering, frontend, backend"
+    - "Team Scaling — ramp up or down within 2 weeks without contractual penalties"
+    - "Knowledge Management — documentation, knowledge bases, and handoff playbooks"
+    - "Engineering Culture — code reviews, tech talks, and internal upskilling for your team"
+  technologies:
+    - name: "Java"
+    - name: ".NET"
+    - name: "Python"
+    - name: "React"
+    - name: "Angular"
+    - name: "Node.js"
+    - name: "AWS"
+    - name: "Azure"
+    - name: "Kubernetes"
+    - name: "Terraform"
+    - name: "Go"
+    - name: "Rust"
+  case_studies:
+    - title: "E-commerce Platform Rewrite"
+      result: "40-person team in 3 weeks"
+      url: "/case-studies/ecommerce-platform-rewrite"
+    - title: "Telecom 5G Platform"
+      result: "12 squads across 3 time zones"
+      url: "/case-studies/telecom-5g-platform"
+    - title: "Manufacturing IoT Digital Twin"
+      result: "8 specialists, 6-month engagement"
+      url: "/case-studies/manufacturing-iot-digital-twin"
+seo:
+  title: "IT Outsourcing & Staff Augmentation — LokaTech Solutions"
+  description: "Scalable engineering teams for enterprise projects. Dedicated teams, staff augmentation, nearshore delivery from Central Europe."
+---

package/starters/lokatech/content/team/anna-kowalska.md

@@ -0,0 +1,21 @@
+---
+title: "Anna Kowalska"
+type: person
+status: published
+langcode: en
+slug: anna-kowalska
+date: 2026-03-21
+fields:
+  role: "Chief Executive Officer"
+  department: "Executive"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "/static/images/team-anna-kowalska.png"
+  quote: "Technology should serve the business, not the other way around. At LokaTech, we build partnerships that last because we deliver results that matter."
+seo:
+  title: "Anna Kowalska — CEO, LokaTech Solutions"
+  description: "Anna Kowalska, CEO and co-founder of LokaTech Solutions. 20+ years in enterprise IT, MBA from INSEAD."
+---
+
+Anna Kowalska co-founded LokaTech Solutions in 2008 and has led the company from a five-person startup to an 800+ engineer enterprise IT services firm. With over 20 years of experience in the technology industry, Anna brings a rare combination of deep technical understanding and strategic business acumen. Before founding LokaTech, she served as Vice President of Technology Services at Accenture's Central European division, where she managed a portfolio of 40+ enterprise clients across banking, manufacturing, and telecommunications.
+
+Anna holds an MBA from INSEAD and a Master's degree in Computer Science from the Warsaw University of Technology. She is a frequent speaker at technology leadership conferences across Europe and serves on the advisory board of the Polish Technology Industry Association. Under her leadership, LokaTech has been recognized as a Clutch Top 100 IT Services Company, a Great Place to Work, and one of the fastest-growing technology firms in Central Europe. Anna's vision for LokaTech is simple: build a company where exceptional engineers want to work and where clients see a genuine partner, not just a vendor.

package/starters/lokatech/content/team/jan-nowak.md

@@ -0,0 +1,21 @@
+---
+title: "Jan Nowak"
+type: person
+status: published
+langcode: en
+slug: jan-nowak
+date: 2026-03-21
+fields:
+  role: "Chief Technology Officer"
+  department: "Engineering"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "/static/images/team-jan-nowak.png"
+  quote: "Great technology comes from great engineers. Our job is to create an environment where brilliant people can do their best work."
+seo:
+  title: "Jan Nowak — CTO, LokaTech Solutions"
+  description: "Jan Nowak, CTO of LokaTech Solutions. 15+ years in software architecture, PhD in distributed systems, formerly at Google."
+---
+
+Jan Nowak joined LokaTech as Chief Technology Officer in 2014, bringing 15+ years of experience in software architecture and distributed systems. Before LokaTech, Jan served as a Principal Software Architect at Google's Zurich office, where he worked on large-scale distributed data processing systems serving billions of requests daily. His research background in consensus algorithms and fault-tolerant systems directly informs LokaTech's approach to building mission-critical enterprise platforms.
+
+Jan holds a PhD in Distributed Systems from AGH University of Krakow and has published over 20 papers in peer-reviewed journals and conferences. At LokaTech, he leads the technical vision across all practice areas, oversees the architecture review board, and drives the company's technology radar — a quarterly assessment of emerging technologies and their readiness for enterprise adoption. He is passionate about mentoring the next generation of software architects and runs LokaTech's internal Architecture Guild, a community of practice where senior engineers share knowledge and debate design decisions.

package/starters/lokatech/content/team/katarzyna-kaminska.md

@@ -0,0 +1,20 @@
+---
+title: "Katarzyna Kamińska"
+type: person
+status: published
+langcode: en
+slug: katarzyna-kaminska
+date: 2026-03-21
+fields:
+  role: "VP of Product & Innovation"
+  department: "Product"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "/static/images/team-katarzyna-kaminska.png"
+seo:
+  title: "Katarzyna Kamińska — VP of Product & Innovation, LokaTech Solutions"
+  description: "Katarzyna Kamińska, VP of Product & Innovation at LokaTech. 10+ years in product management, formerly at Allegro."
+---
+
+Katarzyna Kamińska leads LokaTech's product strategy and innovation initiatives, driving the company's investment in emerging technologies and new service offerings. With over 10 years of experience in product management and technology strategy, she brings a product-thinking mindset to LokaTech's services business — ensuring that every client engagement starts with a clear understanding of user needs and business outcomes before jumping to technical solutions.
+
+Before LokaTech, Katarzyna served as Senior Product Lead at Allegro, Poland's largest e-commerce platform, where she managed the search and recommendation product line serving 20 million monthly active users. She holds a Master's degree in Human-Computer Interaction from the University of Warsaw and is a certified Product Manager (CPM). At LokaTech, she oversees the Innovation Labs program — a quarterly initiative where cross-functional teams prototype solutions to emerging client challenges using technologies like generative AI, digital twins, and edge computing. Several Innovation Labs projects have evolved into production client engagements, generating over €5M in new revenue since the program's inception.

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

@@ -0,0 +1,20 @@
+---
+title: "Maria Wiśniewska"
+type: person
+status: published
+langcode: en
+slug: maria-wisniewska
+date: 2026-03-21
+fields:
+  role: "VP of Engineering"
+  department: "Engineering"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "/static/images/team-maria-wisniewska.png"
+seo:
+  title: "Maria Wiśniewska — VP of Engineering, LokaTech Solutions"
+  description: "Maria Wiśniewska, VP of Engineering at LokaTech Solutions. 12+ years in engineering leadership, formerly at Spotify."
+---
+
+Maria Wiśniewska leads LokaTech's engineering organization of 600+ developers, architects, and QA engineers across five development centers. With over 12 years of experience in engineering leadership, Maria specializes in scaling engineering organizations while maintaining the quality standards and engineering culture that attract top talent. Before LokaTech, she served as Engineering Director at Spotify's Platform division in Stockholm, where she managed 15 engineering squads building the internal developer platform used by 1,500+ engineers.
+
+Maria's approach to engineering leadership centers on platform engineering and developer experience. At LokaTech, she has championed the adoption of Internal Developer Platforms, standardized CI/CD pipelines, and engineering metrics that measure team health alongside delivery velocity. She holds a Master's degree in Software Engineering from Wrocław University of Technology and is an active contributor to the platform engineering community, speaking regularly at conferences including PlatformCon, QCon, and DevOpsDays. Her team has reduced onboarding time for new engineers from four weeks to five days through investments in documentation, automation, and structured mentoring.

package/starters/lokatech/content/team/tomasz-lewandowski.md

@@ -0,0 +1,20 @@
+---
+title: "Tomasz Lewandowski"
+type: person
+status: published
+langcode: en
+slug: tomasz-lewandowski
+date: 2026-03-21
+fields:
+  role: "VP of Sales & Partnerships"
+  department: "Sales"
+  linkedin: "https://linkedin.com/in/example"
+  photo: "/static/images/team-tomasz-lewandowski.png"
+seo:
+  title: "Tomasz Lewandowski — VP of Sales & Partnerships, LokaTech Solutions"
+  description: "Tomasz Lewandowski, VP of Sales & Partnerships at LokaTech. 18+ years in enterprise sales, formerly at Microsoft."
+---
+
+Tomasz Lewandowski oversees LokaTech's commercial operations across all European markets, managing relationships with Fortune 500 clients and strategic technology partnerships. With 18+ years of experience in enterprise technology sales, Tomasz has a proven track record of building long-term client partnerships that grow from initial engagements into multi-year strategic relationships. Before joining LokaTech in 2017, he spent eight years at Microsoft's Enterprise Services division, where he managed a portfolio exceeding €50M in annual revenue across the DACH and Central European regions.
+
+Tomasz's philosophy is that the best sales in professional services come from delivering exceptional results, not from pitch decks. Under his leadership, LokaTech's client retention rate exceeds 92%, and the average client relationship spans 4.5 years. He holds an MBA from Warsaw School of Economics (SGH) and speaks fluent Polish, German, and English — a combination that has been instrumental in LokaTech's expansion into the DACH market. Tomasz is also responsible for LokaTech's technology partnerships with AWS, Microsoft, and Google Cloud, ensuring the company maintains advanced partner status across all major cloud providers.

package/starters/lokatech/starter.yaml

@@ -0,0 +1,15 @@
+name: lokatech
+label: "LokaTech — Enterprise IT Demo"
+description: >
+  Full demo site for a fictional enterprise IT services company.
+  Includes 6 services, 6 industries, 8 case studies, articles, team pages,
+  office locations, and a landing page with 10 sections.
+  Ships with the premium LokaTech theme.
+theme: lokatech
+copies:
+  - from: content/
+    to: content/
+  - from: config/
+    to: config/
+  - from: themes/
+    to: themes/

package/starters/lokatech/themes/lokatech/_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/lokatech/themes/lokatech/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,#60a5fa);-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 ?? '#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 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/lokatech/themes/lokatech/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"