@jsonpages/cli 3.0.8 → 3.0.11

package/assets/src_tenant_alpha.sh

@@ -111,665 +111,665 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/arch-layers"
 echo "Creating src/components/arch-layers/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { ArchLayersData, ArchLayersSettings, ArchLayerLevel, SyntaxTokenType } from './types';
-
-const layerBgStyles: Record<ArchLayerLevel, string> = {
-  l0: 'bg-[#3b82f6]',
-  l1: 'bg-[rgba(59,130,246,0.6)]',
-  l2: 'bg-[rgba(59,130,246,0.35)]',
-};
-
-const tokenStyles: Record<SyntaxTokenType, string> = {
-  plain: 'text-[#cbd5e1]',
-  keyword: 'text-[#60a5fa]',
-  type: 'text-[#22d3ee]',
-  string: 'text-[#4ade80]',
-  comment: 'text-[#64748b] italic',
-  operator: 'text-[#f472b6]',
-};
-
-export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--card)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'var(--border)',
-        '--local-deep': 'var(--background)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="text-center">
-          {data.label && (
-            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-              <span className="w-5 h-px bg-[var(--local-primary)]" />
-              {data.label}
-            </div>
-          )}
-          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-            {data.title}
-          </h2>
-          {data.description && (
-            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-        </div>
-        <div className="mt-14 max-w-[740px] mx-auto">
-          {data.layers.map((layer, idx) => (
-            <div
-              key={layer.id ?? idx}
-              className="group border border-[rgba(255,255,255,0.06)] rounded-[7px] p-8 mb-4 bg-[rgba(255,255,255,0.015)] flex items-start gap-6 transition-all duration-300 hover:border-[rgba(59,130,246,0.2)] hover:translate-x-1.5"
-              data-jp-item-id={layer.id ?? `legacy-${idx}`}
-              data-jp-item-field="layers"
-            >
-              <div className={cn(
-                'shrink-0 w-9 h-9 rounded-lg flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
-                layerBgStyles[layer.layerLevel]
-              )}>
-                {layer.number}
-              </div>
-              <div>
-                <h4 className="text-[1.05rem] font-bold text-[var(--local-text)] mb-1.5">
-                  {layer.title}
-                </h4>
-                <p className="text-[0.92rem] text-[var(--local-text-muted)] leading-relaxed">
-                  {layer.description}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-        {data.codeLines && data.codeLines.length > 0 && (
-          <div className="mt-12 max-w-[740px] mx-auto">
-            <div className="border border-[rgba(255,255,255,0.08)] rounded-[7px] overflow-hidden bg-[var(--local-deep)]">
-              <div className="flex items-center gap-2 px-5 py-3 bg-[rgba(255,255,255,0.03)] border-b border-[rgba(255,255,255,0.06)]">
-                <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
-                <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
-                <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
-                {data.codeFilename && (
-                  <span className="ml-3 font-mono text-[0.75rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="codeFilename">
-                    {data.codeFilename}
-                  </span>
-                )}
-              </div>
-              <div className="p-6 font-mono text-[0.82rem] leading-[1.7] overflow-x-auto">
-                {data.codeLines.map((line, idx) => (
-                  <div key={idx} data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="codeLines">
-                    <span className={tokenStyles[line.tokenType]}>
-                      {line.content}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ArchLayersData, ArchLayersSettings, ArchLayerLevel, SyntaxTokenType } from './types';
+
+const layerBgStyles: Record<ArchLayerLevel, string> = {
+  l0: 'bg-[#3b82f6]',
+  l1: 'bg-[rgba(59,130,246,0.6)]',
+  l2: 'bg-[rgba(59,130,246,0.35)]',
+};
+
+const tokenStyles: Record<SyntaxTokenType, string> = {
+  plain: 'text-[#cbd5e1]',
+  keyword: 'text-[#60a5fa]',
+  type: 'text-[#22d3ee]',
+  string: 'text-[#4ade80]',
+  comment: 'text-[#64748b] italic',
+  operator: 'text-[#f472b6]',
+};
+
+export const ArchLayers: React.FC<{ data: ArchLayersData; settings?: ArchLayersSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--card)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'var(--border)',
+        '--local-deep': 'var(--background)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="text-center">
+          {data.label && (
+            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+              <span className="w-5 h-px bg-[var(--local-primary)]" />
+              {data.label}
+            </div>
+          )}
+          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+            {data.title}
+          </h2>
+          {data.description && (
+            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+        </div>
+        <div className="mt-14 max-w-[740px] mx-auto">
+          {data.layers.map((layer, idx) => (
+            <div
+              key={layer.id ?? idx}
+              className="group border border-[rgba(255,255,255,0.06)] rounded-[7px] p-8 mb-4 bg-[rgba(255,255,255,0.015)] flex items-start gap-6 transition-all duration-300 hover:border-[rgba(59,130,246,0.2)] hover:translate-x-1.5"
+              data-jp-item-id={layer.id ?? `legacy-${idx}`}
+              data-jp-item-field="layers"
+            >
+              <div className={cn(
+                'shrink-0 w-9 h-9 rounded-lg flex items-center justify-center font-mono text-[0.85rem] font-bold text-white',
+                layerBgStyles[layer.layerLevel]
+              )}>
+                {layer.number}
+              </div>
+              <div>
+                <h4 className="text-[1.05rem] font-bold text-[var(--local-text)] mb-1.5">
+                  {layer.title}
+                </h4>
+                <p className="text-[0.92rem] text-[var(--local-text-muted)] leading-relaxed">
+                  {layer.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+        {data.codeLines && data.codeLines.length > 0 && (
+          <div className="mt-12 max-w-[740px] mx-auto">
+            <div className="border border-[rgba(255,255,255,0.08)] rounded-[7px] overflow-hidden bg-[var(--local-deep)]">
+              <div className="flex items-center gap-2 px-5 py-3 bg-[rgba(255,255,255,0.03)] border-b border-[rgba(255,255,255,0.06)]">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#ef4444]" />
+                <span className="w-2.5 h-2.5 rounded-full bg-[#f59e0b]" />
+                <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e]" />
+                {data.codeFilename && (
+                  <span className="ml-3 font-mono text-[0.75rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="codeFilename">
+                    {data.codeFilename}
+                  </span>
+                )}
+              </div>
+              <div className="p-6 font-mono text-[0.82rem] leading-[1.7] overflow-x-auto">
+                {data.codeLines.map((line, idx) => (
+                  <div key={idx} data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="codeLines">
+                    <span className={tokenStyles[line.tokenType]}>
+                      {line.content}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/arch-layers/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/arch-layers/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const ArchLayerLevelSchema = z.enum(['l0', 'l1', 'l2']);
-export const SyntaxTokenTypeSchema = z.enum(['plain', 'keyword', 'type', 'string', 'comment', 'operator']);
-
-const ArchLayerItemSchema = BaseArrayItem.extend({
-  number: z.string().describe('ui:text'),
-  layerLevel: ArchLayerLevelSchema.describe('ui:select'),
-  title: z.string().describe('ui:text'),
-  description: z.string().describe('ui:textarea'),
-});
-
-const SyntaxLineSchema = z.object({
-  content: z.string().describe('ui:text'),
-  tokenType: SyntaxTokenTypeSchema.default('plain').describe('ui:select'),
-});
-
-export const ArchLayersSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  layers: z.array(ArchLayerItemSchema).describe('ui:list'),
-  codeFilename: z.string().optional().describe('ui:text'),
-  codeLines: z.array(SyntaxLineSchema).optional().describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const ArchLayerLevelSchema = z.enum(['l0', 'l1', 'l2']);
+export const SyntaxTokenTypeSchema = z.enum(['plain', 'keyword', 'type', 'string', 'comment', 'operator']);
+
+const ArchLayerItemSchema = BaseArrayItem.extend({
+  number: z.string().describe('ui:text'),
+  layerLevel: ArchLayerLevelSchema.describe('ui:select'),
+  title: z.string().describe('ui:text'),
+  description: z.string().describe('ui:textarea'),
+});
+
+const SyntaxLineSchema = z.object({
+  content: z.string().describe('ui:text'),
+  tokenType: SyntaxTokenTypeSchema.default('plain').describe('ui:select'),
+});
+
+export const ArchLayersSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  layers: z.array(ArchLayerItemSchema).describe('ui:list'),
+  codeFilename: z.string().optional().describe('ui:text'),
+  codeLines: z.array(SyntaxLineSchema).optional().describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/arch-layers/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/arch-layers/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { ArchLayersSchema, ArchLayerLevelSchema, SyntaxTokenTypeSchema } from './schema';
-
-export type ArchLayersData = z.infer<typeof ArchLayersSchema>;
-export type ArchLayersSettings = z.infer<typeof BaseSectionSettingsSchema>;
-export type ArchLayerLevel = z.infer<typeof ArchLayerLevelSchema>;
-export type SyntaxTokenType = z.infer<typeof SyntaxTokenTypeSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { ArchLayersSchema, ArchLayerLevelSchema, SyntaxTokenTypeSchema } from './schema';
+
+export type ArchLayersData = z.infer<typeof ArchLayersSchema>;
+export type ArchLayersSettings = z.infer<typeof BaseSectionSettingsSchema>;
+export type ArchLayerLevel = z.infer<typeof ArchLayerLevelSchema>;
+export type SyntaxTokenType = z.infer<typeof SyntaxTokenTypeSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/code-block"
 echo "Creating src/components/code-block/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { Icon } from '@/lib/IconResolver';
-import type { CodeBlockData, CodeBlockSettings } from './types';
-
-export const CodeBlock: React.FC<{ data: CodeBlockData; settings?: CodeBlockSettings }> = ({ data, settings }) => {
-  const showLineNumbers = settings?.showLineNumbers ?? true;
-
-  return (
-    <section
-      style={{
-        '--local-surface': 'var(--card)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-bg': 'var(--background)',
-        '--local-border': 'var(--border)',
-        '--local-text': 'var(--foreground)',
-        '--local-accent': 'var(--primary)',
-        '--local-radius-lg': 'var(--radius)',
-      } as React.CSSProperties}
-      className="py-16 bg-[var(--local-surface)]"
-    >
-      <div className="container mx-auto px-6 max-w-4xl">
-        {data.label && (
-          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--local-text-muted)] mb-4" data-jp-field="label">
-            <Icon name="terminal" size={14} />
-            <span>{data.label}</span>
-          </div>
-        )}
-        <div className="rounded-[var(--local-radius-lg)] bg-[var(--local-bg)] border border-[var(--local-border)] overflow-hidden">
-          <div className="p-6 font-mono text-sm overflow-x-auto">
-            {data.lines.map((line, idx) => (
-              <div key={idx} className="flex items-start gap-4 py-1" data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="lines">
-                {showLineNumbers && (
-                  <span className="select-none w-6 text-right text-[var(--local-text-muted)]/50">
-                    {idx + 1}
-                  </span>
-                )}
-                <span
-                  className={cn(
-                    line.isComment
-                      ? 'text-[var(--local-text-muted)]/60'
-                      : 'text-[var(--local-text)]'
-                  )}
-                >
-                  {!line.isComment && (
-                    <span className="text-[var(--local-accent)] mr-2">$</span>
-                  )}
-                  {line.content}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/lib/IconResolver';
+import type { CodeBlockData, CodeBlockSettings } from './types';
+
+export const CodeBlock: React.FC<{ data: CodeBlockData; settings?: CodeBlockSettings }> = ({ data, settings }) => {
+  const showLineNumbers = settings?.showLineNumbers ?? true;
+
+  return (
+    <section
+      style={{
+        '--local-surface': 'var(--card)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-bg': 'var(--background)',
+        '--local-border': 'var(--border)',
+        '--local-text': 'var(--foreground)',
+        '--local-accent': 'var(--primary)',
+        '--local-radius-lg': 'var(--radius)',
+      } as React.CSSProperties}
+      className="py-16 bg-[var(--local-surface)]"
+    >
+      <div className="container mx-auto px-6 max-w-4xl">
+        {data.label && (
+          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[var(--local-text-muted)] mb-4" data-jp-field="label">
+            <Icon name="terminal" size={14} />
+            <span>{data.label}</span>
+          </div>
+        )}
+        <div className="rounded-[var(--local-radius-lg)] bg-[var(--local-bg)] border border-[var(--local-border)] overflow-hidden">
+          <div className="p-6 font-mono text-sm overflow-x-auto">
+            {data.lines.map((line, idx) => (
+              <div key={idx} className="flex items-start gap-4 py-1" data-jp-item-id={(line as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="lines">
+                {showLineNumbers && (
+                  <span className="select-none w-6 text-right text-[var(--local-text-muted)]/50">
+                    {idx + 1}
+                  </span>
+                )}
+                <span
+                  className={cn(
+                    line.isComment
+                      ? 'text-[var(--local-text-muted)]/60'
+                      : 'text-[var(--local-text)]'
+                  )}
+                >
+                  {!line.isComment && (
+                    <span className="text-[var(--local-accent)] mr-2">$</span>
+                  )}
+                  {line.content}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/code-block/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/code-block/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
-
-export const LegacyCodeLineSchema = z.object({
-  content: z.string().describe('ui:text'),
-  isComment: z.boolean().default(false).describe('ui:checkbox'),
-});
-
-export const CodeBlockSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  lines: z.array(LegacyCodeLineSchema).describe('ui:list'),
-});
-
-export const CodeBlockSettingsSchema = z.object({
-  showLineNumbers: z.boolean().optional().describe('ui:checkbox'),
-});
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
+
+export const LegacyCodeLineSchema = z.object({
+  content: z.string().describe('ui:text'),
+  isComment: z.boolean().default(false).describe('ui:checkbox'),
+});
+
+export const CodeBlockSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  lines: z.array(LegacyCodeLineSchema).describe('ui:list'),
+});
+
+export const CodeBlockSettingsSchema = z.object({
+  showLineNumbers: z.boolean().optional().describe('ui:checkbox'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/code-block/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/code-block/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { CodeBlockSchema, CodeBlockSettingsSchema } from './schema';
-
-export type CodeBlockData = z.infer<typeof CodeBlockSchema>;
-export type CodeBlockSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof CodeBlockSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { CodeBlockSchema, CodeBlockSettingsSchema } from './schema';
+
+export type CodeBlockData = z.infer<typeof CodeBlockSchema>;
+export type CodeBlockSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof CodeBlockSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/cta-banner"
 echo "Creating src/components/cta-banner/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/cta-banner/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { CtaBannerData, CtaBannerSettings } from './types';
-
-export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-      } as React.CSSProperties}
-      className="relative py-28 bg-[var(--local-bg)] overflow-hidden text-center"
-    >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] bg-[radial-gradient(circle,rgba(59,130,246,0.08)_0%,transparent_60%)] pointer-events-none" />
-      <div className="relative max-w-[1200px] mx-auto px-8">
-        {data.label && (
-          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-            <span className="w-5 h-px bg-[var(--local-primary)]" />
-            {data.label}
-          </div>
-        )}
-        <h2
-          className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-6"
-          data-jp-field="title"
-        >
-          {data.title}
-        </h2>
-        {data.description && (
-          <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed mb-10" data-jp-field="description">
-            {data.description}
-          </p>
-        )}
-        {data.ctas && data.ctas.length > 0 && (
-          <div className="flex gap-4 justify-center flex-wrap">
-            {data.ctas.map((cta, idx) => (
-              <a
-                key={cta.id ?? idx}
-                href={cta.href}
-                data-jp-item-id={cta.id ?? `legacy-${idx}`}
-                data-jp-item-field="ctas"
-                className={cn(
-                  'inline-flex items-center gap-2 px-8 py-3.5 rounded-[5px] font-semibold text-base transition-all duration-200 no-underline',
-                  cta.variant === 'primary'
-                    ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(59,130,246,0.3)]'
-                    : 'bg-transparent text-[var(--local-text)] border border-[rgba(255,255,255,0.12)] hover:border-[rgba(255,255,255,0.3)] hover:bg-[rgba(255,255,255,0.04)]'
-                )}
-              >
-                {cta.label}
-              </a>
-            ))}
-          </div>
-        )}
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { CtaBannerData, CtaBannerSettings } from './types';
+
+export const CtaBanner: React.FC<{ data: CtaBannerData; settings?: CtaBannerSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+      } as React.CSSProperties}
+      className="relative py-28 bg-[var(--local-bg)] overflow-hidden text-center"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vw] bg-[radial-gradient(circle,rgba(59,130,246,0.08)_0%,transparent_60%)] pointer-events-none" />
+      <div className="relative max-w-[1200px] mx-auto px-8">
+        {data.label && (
+          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+            <span className="w-5 h-px bg-[var(--local-primary)]" />
+            {data.label}
+          </div>
+        )}
+        <h2
+          className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-6"
+          data-jp-field="title"
+        >
+          {data.title}
+        </h2>
+        {data.description && (
+          <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed mb-10" data-jp-field="description">
+            {data.description}
+          </p>
+        )}
+        {data.ctas && data.ctas.length > 0 && (
+          <div className="flex gap-4 justify-center flex-wrap">
+            {data.ctas.map((cta, idx) => (
+              <a
+                key={cta.id ?? idx}
+                href={cta.href}
+                data-jp-item-id={cta.id ?? `legacy-${idx}`}
+                data-jp-item-field="ctas"
+                className={cn(
+                  'inline-flex items-center gap-2 px-8 py-3.5 rounded-[5px] font-semibold text-base transition-all duration-200 no-underline',
+                  cta.variant === 'primary'
+                    ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(59,130,246,0.3)]'
+                    : 'bg-transparent text-[var(--local-text)] border border-[rgba(255,255,255,0.12)] hover:border-[rgba(255,255,255,0.3)] hover:bg-[rgba(255,255,255,0.04)]'
+                )}
+              >
+                {cta.label}
+              </a>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/cta-banner/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/cta-banner/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/cta-banner/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/cta-banner/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, CtaSchema } from '@/lib/base-schemas';
-
-export const CtaBannerSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  ctas: z.array(CtaSchema).optional().describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, CtaSchema } from '@/lib/base-schemas';
+
+export const CtaBannerSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  ctas: z.array(CtaSchema).optional().describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/cta-banner/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/cta-banner/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { CtaBannerSchema } from './schema';
-
-export type CtaBannerData = z.infer<typeof CtaBannerSchema>;
-export type CtaBannerSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { CtaBannerSchema } from './schema';
+
+export type CtaBannerData = z.infer<typeof CtaBannerSchema>;
+export type CtaBannerSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/feature-grid"
 echo "Creating src/components/feature-grid/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { Icon } from '@/lib/IconResolver';
-import type { FeatureGridData, FeatureGridSettings } from './types';
-
-const columnsMap: Record<2 | 3 | 4, string> = {
-  2: 'md:grid-cols-2',
-  3: 'md:grid-cols-3',
-  4: 'md:grid-cols-4',
-};
-
-export const FeatureGrid: React.FC<{ data: FeatureGridData; settings?: FeatureGridSettings }> = ({ data, settings }) => {
-  const colKey = settings?.columns ?? 3;
-  const cols = (colKey === 2 || colKey === 3 || colKey === 4) ? columnsMap[colKey] : columnsMap[3];
-  const isBordered = settings?.cardStyle === 'bordered';
-
-  const localStyles = {
-    '--local-bg': 'var(--background)',
-    '--local-text': 'var(--foreground)',
-    '--local-text-muted': 'var(--muted-foreground)',
-    '--local-surface': 'var(--card)',
-    '--local-surface-alt': 'var(--muted)',
-    '--local-border': 'var(--border)',
-    '--local-radius-lg': 'var(--radius)',
-    '--local-radius-md': 'calc(var(--radius) - 2px)',
-  } as React.CSSProperties;
-
-  return (
-    <section style={localStyles} className="py-20 bg-[var(--local-bg)] relative z-0">
-      <div className="container mx-auto px-6">
-        <h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--local-text)] mb-16" data-jp-field="sectionTitle">
-          {data.sectionTitle}
-        </h2>
-        <div className={cn('grid grid-cols-1 gap-6', cols)}>
-          {data.cards.map((card, idx) => (
-            <div
-              key={card.id ?? idx}
-              className={cn(
-                'p-6 rounded-[var(--local-radius-lg)] bg-[var(--local-surface)]',
-                isBordered && 'border border-[var(--local-border)]'
-              )}
-              data-jp-item-id={card.id ?? `legacy-${idx}`}
-              data-jp-item-field="cards"
-            >
-              {card.icon && (
-                <div className="w-10 h-10 rounded-[var(--local-radius-md)] bg-[var(--local-surface-alt)] flex items-center justify-center mb-4">
-                  <Icon name={card.icon} size={20} className="text-[var(--local-text-muted)]" />
-                </div>
-              )}
-              <h3 className="text-lg font-semibold text-[var(--local-text)] mb-2">
-                {card.emoji && <span className="mr-2">{card.emoji}</span>}
-                {card.title}
-              </h3>
-              <p className="text-sm text-[var(--local-text-muted)] leading-relaxed">
-                {card.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon } from '@/lib/IconResolver';
+import type { FeatureGridData, FeatureGridSettings } from './types';
+
+const columnsMap: Record<2 | 3 | 4, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+};
+
+export const FeatureGrid: React.FC<{ data: FeatureGridData; settings?: FeatureGridSettings }> = ({ data, settings }) => {
+  const colKey = settings?.columns ?? 3;
+  const cols = (colKey === 2 || colKey === 3 || colKey === 4) ? columnsMap[colKey] : columnsMap[3];
+  const isBordered = settings?.cardStyle === 'bordered';
+
+  const localStyles = {
+    '--local-bg': 'var(--background)',
+    '--local-text': 'var(--foreground)',
+    '--local-text-muted': 'var(--muted-foreground)',
+    '--local-surface': 'var(--card)',
+    '--local-surface-alt': 'var(--muted)',
+    '--local-border': 'var(--border)',
+    '--local-radius-lg': 'var(--radius)',
+    '--local-radius-md': 'calc(var(--radius) - 2px)',
+  } as React.CSSProperties;
+
+  return (
+    <section style={localStyles} className="py-20 bg-[var(--local-bg)] relative z-0">
+      <div className="container mx-auto px-6">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-[var(--local-text)] mb-16" data-jp-field="sectionTitle">
+          {data.sectionTitle}
+        </h2>
+        <div className={cn('grid grid-cols-1 gap-6', cols)}>
+          {data.cards.map((card, idx) => (
+            <div
+              key={card.id ?? idx}
+              className={cn(
+                'p-6 rounded-[var(--local-radius-lg)] bg-[var(--local-surface)]',
+                isBordered && 'border border-[var(--local-border)]'
+              )}
+              data-jp-item-id={card.id ?? `legacy-${idx}`}
+              data-jp-item-field="cards"
+            >
+              {card.icon && (
+                <div className="w-10 h-10 rounded-[var(--local-radius-md)] bg-[var(--local-surface-alt)] flex items-center justify-center mb-4">
+                  <Icon name={card.icon} size={20} className="text-[var(--local-text-muted)]" />
+                </div>
+              )}
+              <h3 className="text-lg font-semibold text-[var(--local-text)] mb-2">
+                {card.emoji && <span className="mr-2">{card.emoji}</span>}
+                {card.title}
+              </h3>
+              <p className="text-sm text-[var(--local-text-muted)] leading-relaxed">
+                {card.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/feature-grid/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/feature-grid/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const FeatureCardSchema = BaseArrayItem.extend({
-  icon: z.string().optional().describe('ui:icon-picker'),
-  emoji: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().describe('ui:textarea'),
-});
-
-export const FeatureGridSchema = BaseSectionData.extend({
-  sectionTitle: z.string().describe('ui:text'),
-  cards: z.array(FeatureCardSchema).describe('ui:list'),
-});
-
-export const FeatureGridSettingsSchema = z.object({
-  columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).optional().describe('ui:number'),
-  cardStyle: z.enum(['plain', 'bordered']).optional().describe('ui:select'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const FeatureCardSchema = BaseArrayItem.extend({
+  icon: z.string().optional().describe('ui:icon-picker'),
+  emoji: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().describe('ui:textarea'),
+});
+
+export const FeatureGridSchema = BaseSectionData.extend({
+  sectionTitle: z.string().describe('ui:text'),
+  cards: z.array(FeatureCardSchema).describe('ui:list'),
+});
+
+export const FeatureGridSettingsSchema = z.object({
+  columns: z.union([z.literal(2), z.literal(3), z.literal(4)]).optional().describe('ui:number'),
+  cardStyle: z.enum(['plain', 'bordered']).optional().describe('ui:select'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/feature-grid/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/feature-grid/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { FeatureGridSchema, FeatureGridSettingsSchema } from './schema';
-
-export type FeatureGridData = z.infer<typeof FeatureGridSchema>;
-export type FeatureGridSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof FeatureGridSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { FeatureGridSchema, FeatureGridSettingsSchema } from './schema';
+
+export type FeatureGridData = z.infer<typeof FeatureGridSchema>;
+export type FeatureGridSettings = z.infer<typeof BaseSectionSettingsSchema> & z.infer<typeof FeatureGridSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/footer"
 echo "Creating src/components/footer/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/View.tsx"
-import React from 'react';
-import type { FooterData, FooterSettings } from './types';
-
-export const Footer: React.FC<{ data: FooterData; settings?: FooterSettings }> = ({ data }) => {
-  return (
-    <footer
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'rgba(255,255,255,0.05)',
-      } as React.CSSProperties}
-      className="py-12 border-t border-[var(--local-border)] bg-[var(--local-bg)] relative z-0"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
-          <div className="flex items-center gap-2 font-bold text-[0.9rem] text-[var(--local-text-muted)]" data-jp-field="brandText">
-            {data.brandText}
-            {data.brandHighlight && (
-              <span className="text-[var(--local-accent)]" data-jp-field="brandHighlight">{data.brandHighlight}</span>
-            )}
-          </div>
-          {data.links && data.links.length > 0 && (
-            <nav className="flex gap-6">
-              {data.links.map((link, idx) => (
-                <a
-                  key={idx}
-                  href={link.href}
-                  className="text-[0.82rem] text-[var(--local-text-muted)] hover:text-[var(--local-accent)] transition-colors no-underline"
-                  data-jp-item-id={(link as { id?: string }).id ?? `legacy-${idx}`}
-                  data-jp-item-field="links"
-                >
-                  {link.label}
-                </a>
-              ))}
-            </nav>
-          )}
-          <div className="text-[0.8rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="copyright">
-            {data.copyright}
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
+import React from 'react';
+import type { FooterData, FooterSettings } from './types';
+
+export const Footer: React.FC<{ data: FooterData; settings?: FooterSettings }> = ({ data }) => {
+  return (
+    <footer
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'rgba(255,255,255,0.05)',
+      } as React.CSSProperties}
+      className="py-12 border-t border-[var(--local-border)] bg-[var(--local-bg)] relative z-0"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+          <div className="flex items-center gap-2 font-bold text-[0.9rem] text-[var(--local-text-muted)]" data-jp-field="brandText">
+            {data.brandText}
+            {data.brandHighlight && (
+              <span className="text-[var(--local-accent)]" data-jp-field="brandHighlight">{data.brandHighlight}</span>
+            )}
+          </div>
+          {data.links && data.links.length > 0 && (
+            <nav className="flex gap-6">
+              {data.links.map((link, idx) => (
+                <a
+                  key={idx}
+                  href={link.href}
+                  className="text-[0.82rem] text-[var(--local-text-muted)] hover:text-[var(--local-accent)] transition-colors no-underline"
+                  data-jp-item-id={(link as { id?: string }).id ?? `legacy-${idx}`}
+                  data-jp-item-field="links"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          )}
+          <div className="text-[0.8rem] text-[var(--local-text-muted)] opacity-60" data-jp-field="copyright">
+            {data.copyright}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/footer/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/footer/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/schema.ts"
-import { z } from 'zod';
-
-export const FooterSchema = z.object({
-  brandText: z.string().describe('ui:text'),
-  brandHighlight: z.string().optional().describe('ui:text'),
-  copyright: z.string().describe('ui:text'),
-  links: z.array(z.object({
-    label: z.string().describe('ui:text'),
-    href: z.string().describe('ui:text'),
-  })).optional().describe('ui:list'),
-});
-
-export const FooterSettingsSchema = z.object({
-  showLogo: z.boolean().optional().describe('ui:checkbox'),
-});
+import { z } from 'zod';
+
+export const FooterSchema = z.object({
+  brandText: z.string().describe('ui:text'),
+  brandHighlight: z.string().optional().describe('ui:text'),
+  copyright: z.string().describe('ui:text'),
+  links: z.array(z.object({
+    label: z.string().describe('ui:text'),
+    href: z.string().describe('ui:text'),
+  })).optional().describe('ui:list'),
+});
+
+export const FooterSettingsSchema = z.object({
+  showLogo: z.boolean().optional().describe('ui:checkbox'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/footer/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/footer/types.ts"
-import { z } from 'zod';
-import { FooterSchema, FooterSettingsSchema } from './schema';
-
-export type FooterData = z.infer<typeof FooterSchema>;
-export type FooterSettings = z.infer<typeof FooterSettingsSchema>;
+import { z } from 'zod';
+import { FooterSchema, FooterSettingsSchema } from './schema';
+
+export type FooterData = z.infer<typeof FooterSchema>;
+export type FooterSettings = z.infer<typeof FooterSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/header"
 echo "Creating src/components/header/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/header/View.tsx"
-import React, { useState, useEffect } from 'react';
-import { cn } from '@/lib/utils';
-import type { MenuItem } from '@jsonpages/core';
-import type { HeaderData, HeaderSettings } from './types';
-
-export const Header: React.FC<{
-  data: HeaderData;
-  settings?: HeaderSettings;
-  menu: MenuItem[];
-}> = ({ data, menu }) => {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const [scrolled, setScrolled] = useState(false);
-
-  useEffect(() => {
-    const handleScroll = () => setScrolled(window.scrollY > 40);
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <header
-      style={{
-        '--local-bg': 'rgba(6,13,27,0.92)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'rgba(59,130,246,0.08)',
-      } as React.CSSProperties}
-      className={cn(
-        'w-full py-4 transition-all duration-300 z-0',
-        scrolled
-          ? 'bg-[var(--local-bg)] backdrop-blur-[20px] border-b border-[var(--local-border)]'
-          : 'bg-transparent border-b border-transparent'
-      )}
-    >
-      <div className="max-w-[1200px] mx-auto px-8 flex justify-between items-center">
-        <a
-          href="/"
-          className="flex items-center gap-2.5 no-underline font-bold text-xl tracking-tight text-[var(--local-text)]"
-        >
-          {data.logoIconText && (
-            <div className="w-8 h-8 rounded-md bg-gradient-to-br from-[var(--local-primary)] to-[var(--local-accent)] flex items-center justify-center font-mono text-[0.8rem] font-bold text-[var(--background)]" data-jp-field="logoIconText">
-              {data.logoIconText}
-            </div>
-          )}
-          <span data-jp-field="logoText">
-            {data.logoText}
-            {data.logoHighlight && (
-              <span className="text-[var(--local-accent)]" data-jp-field="logoHighlight">{data.logoHighlight}</span>
-            )}
-          </span>
-        </a>
-
-        <nav className="hidden md:flex items-center gap-10">
-          {menu.map((item, idx) => (
-            <a
-              key={(item as { id?: string }).id ?? idx}
-              href={item.href}
-              data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
-              data-jp-item-field="links"
-              target={item.external ? '_blank' : undefined}
-              rel={item.external ? 'noopener noreferrer' : undefined}
-              className={cn(
-                'no-underline text-sm font-medium transition-colors',
-                item.isCta
-                  ? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-lg font-semibold hover:brightness-110 hover:-translate-y-px'
-                  : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)]'
-              )}
-            >
-              {item.label}
-            </a>
-          ))}
-        </nav>
-
-        <button
-          type="button"
-          className="md:hidden p-2 text-[var(--local-text-muted)] hover:text-[var(--local-text)]"
-          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-          aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            {mobileMenuOpen ? (
-              <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>
-            ) : (
-              <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>
-            )}
-          </svg>
-        </button>
-      </div>
-
-      {mobileMenuOpen && (
-        <nav className="md:hidden border-t border-[var(--local-border)] bg-[var(--local-bg)] backdrop-blur-[20px]">
-          <div className="max-w-[1200px] mx-auto px-8 py-4 flex flex-col gap-4">
-            {menu.map((item, idx) => (
-              <a
-                key={(item as { id?: string }).id ?? idx}
-                href={item.href}
-                className="text-base font-medium text-[var(--local-text-muted)] hover:text-[var(--local-text)] transition-colors py-2 no-underline"
-                onClick={() => setMobileMenuOpen(false)}
-                data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
-                data-jp-item-field="links"
-              >
-                {item.label}
-              </a>
-            ))}
-          </div>
-        </nav>
-      )}
-    </header>
-  );
-};
+import React, { useState, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import type { MenuItem } from '@jsonpages/core';
+import type { HeaderData, HeaderSettings } from './types';
+
+export const Header: React.FC<{
+  data: HeaderData;
+  settings?: HeaderSettings;
+  menu: MenuItem[];
+}> = ({ data, menu }) => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 40);
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <header
+      style={{
+        '--local-bg': 'rgba(6,13,27,0.92)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'rgba(59,130,246,0.08)',
+      } as React.CSSProperties}
+      className={cn(
+        'w-full py-4 transition-all duration-300 z-0',
+        scrolled
+          ? 'bg-[var(--local-bg)] backdrop-blur-[20px] border-b border-[var(--local-border)]'
+          : 'bg-transparent border-b border-transparent'
+      )}
+    >
+      <div className="max-w-[1200px] mx-auto px-8 flex justify-between items-center">
+        <a
+          href="/"
+          className="flex items-center gap-2.5 no-underline font-bold text-xl tracking-tight text-[var(--local-text)]"
+        >
+          {data.logoIconText && (
+            <div className="w-8 h-8 rounded-md bg-gradient-to-br from-[var(--local-primary)] to-[var(--local-accent)] flex items-center justify-center font-mono text-[0.8rem] font-bold text-[var(--background)]" data-jp-field="logoIconText">
+              {data.logoIconText}
+            </div>
+          )}
+          <span data-jp-field="logoText">
+            {data.logoText}
+            {data.logoHighlight && (
+              <span className="text-[var(--local-accent)]" data-jp-field="logoHighlight">{data.logoHighlight}</span>
+            )}
+          </span>
+        </a>
+
+        <nav className="hidden md:flex items-center gap-10">
+          {menu.map((item, idx) => (
+            <a
+              key={(item as { id?: string }).id ?? idx}
+              href={item.href}
+              data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
+              data-jp-item-field="links"
+              target={item.external ? '_blank' : undefined}
+              rel={item.external ? 'noopener noreferrer' : undefined}
+              className={cn(
+                'no-underline text-sm font-medium transition-colors',
+                item.isCta
+                  ? 'bg-[var(--local-primary)] text-white px-5 py-2 rounded-lg font-semibold hover:brightness-110 hover:-translate-y-px'
+                  : 'text-[var(--local-text-muted)] hover:text-[var(--local-text)]'
+              )}
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+
+        <button
+          type="button"
+          className="md:hidden p-2 text-[var(--local-text-muted)] hover:text-[var(--local-text)]"
+          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            {mobileMenuOpen ? (
+              <><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></>
+            ) : (
+              <><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></>
+            )}
+          </svg>
+        </button>
+      </div>
+
+      {mobileMenuOpen && (
+        <nav className="md:hidden border-t border-[var(--local-border)] bg-[var(--local-bg)] backdrop-blur-[20px]">
+          <div className="max-w-[1200px] mx-auto px-8 py-4 flex flex-col gap-4">
+            {menu.map((item, idx) => (
+              <a
+                key={(item as { id?: string }).id ?? idx}
+                href={item.href}
+                className="text-base font-medium text-[var(--local-text-muted)] hover:text-[var(--local-text)] transition-colors py-2 no-underline"
+                onClick={() => setMobileMenuOpen(false)}
+                data-jp-item-id={(item as { id?: string }).id ?? `legacy-${idx}`}
+                data-jp-item-field="links"
+              >
+                {item.label}
+              </a>
+            ))}
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/header/index.ts..."
@@ -827,780 +827,780 @@ END_OF_FILE_CONTENT
 mkdir -p "src/components/hero"
 echo "Creating src/components/hero/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { HeroData, HeroSettings } from './types';
-
-export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-cyan': 'var(--color-secondary, #22d3ee)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="jp-hero relative min-h-screen flex items-center overflow-hidden pt-24 bg-[var(--local-bg)]"
-    >
-      <div className="absolute -top-[40%] -right-[20%] w-[70vw] h-[70vw] rounded-full bg-[radial-gradient(circle,rgba(59,130,246,0.06)_0%,transparent_70%)] pointer-events-none" />
-      <div className="absolute -bottom-[10%] -left-[10%] w-[50vw] h-[50vw] rounded-full bg-[radial-gradient(circle,rgba(34,211,238,0.03)_0%,transparent_60%)] pointer-events-none" />
-
-      <div className="relative max-w-[1200px] mx-auto px-8 w-full">
-        <div className="max-w-[820px]">
-          {data.badge && (
-            <div className="inline-flex items-center gap-2 bg-[rgba(59,130,246,0.08)] border border-[rgba(59,130,246,0.2)] px-4 py-1.5 rounded-full text-[0.78rem] font-semibold text-[var(--local-accent)] mb-8 tracking-wide jp-animate-in" data-jp-field="badge">
-              <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-accent)] jp-pulse-dot" />
-              {data.badge}
-            </div>
-          )}
-          <h1
-            className="font-display text-[clamp(2.8rem,6vw,4.8rem)] font-black text-[var(--local-text)] leading-[1.08] tracking-tight mb-6 jp-animate-in jp-d1"
-            data-jp-field="title"
-          >
-            {data.title}
-            {data.titleHighlight && (
-              <>
-                <br />
-                <em className="not-italic bg-gradient-to-br from-[var(--local-accent)] to-[var(--local-cyan)] bg-clip-text text-transparent" data-jp-field="titleHighlight">
-                  {data.titleHighlight}
-                </em>
-              </>
-            )}
-          </h1>
-          {data.description && (
-            <p className="text-xl text-[var(--local-text-muted)] max-w-[600px] leading-relaxed mb-10 jp-animate-in jp-d2" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-          {data.ctas && data.ctas.length > 0 && (
-            <div className="flex gap-4 flex-wrap jp-animate-in jp-d3">
-              {data.ctas.map((cta, idx) => (
-                <a
-                  key={cta.id ?? idx}
-                  href={cta.href}
-                  data-jp-item-id={cta.id ?? `legacy-${idx}`}
-                  data-jp-item-field="ctas"
-                  className={cn(
-                    'inline-flex items-center gap-2 px-8 py-3.5 rounded-[5px] font-semibold text-base transition-all duration-200 no-underline',
-                    cta.variant === 'primary'
-                      ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(59,130,246,0.3)]'
-                      : 'bg-transparent text-[var(--local-text)] border border-[rgba(255,255,255,0.12)] hover:border-[rgba(255,255,255,0.3)] hover:bg-[rgba(255,255,255,0.04)]'
-                  )}
-                >
-                  {cta.label}
-                </a>
-              ))}
-            </div>
-          )}
-          {data.metrics && data.metrics.length > 0 && (
-            <div className="flex gap-12 mt-16 pt-12 border-t border-[rgba(255,255,255,0.06)] flex-wrap jp-animate-in jp-d4">
-              {data.metrics.map((metric, idx) => (
-                <div
-                  key={(metric as { id?: string }).id ?? idx}
-                  data-jp-item-id={(metric as { id?: string }).id ?? `legacy-${idx}`}
-                  data-jp-item-field="metrics"
-                >
-                  <div className="text-[2rem] font-bold text-[var(--local-text)] font-display">
-                    {metric.val}
-                  </div>
-                  <div className="text-[0.82rem] text-[var(--muted-foreground)] mt-0.5 opacity-70">
-                    {metric.label}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { HeroData, HeroSettings } from './types';
+
+export const Hero: React.FC<{ data: HeroData; settings?: HeroSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-cyan': 'var(--color-secondary, #22d3ee)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="jp-hero relative min-h-screen flex items-center overflow-hidden pt-24 bg-[var(--local-bg)]"
+    >
+      <div className="absolute -top-[40%] -right-[20%] w-[70vw] h-[70vw] rounded-full bg-[radial-gradient(circle,rgba(59,130,246,0.06)_0%,transparent_70%)] pointer-events-none" />
+      <div className="absolute -bottom-[10%] -left-[10%] w-[50vw] h-[50vw] rounded-full bg-[radial-gradient(circle,rgba(34,211,238,0.03)_0%,transparent_60%)] pointer-events-none" />
+
+      <div className="relative max-w-[1200px] mx-auto px-8 w-full">
+        <div className="max-w-[820px]">
+          {data.badge && (
+            <div className="inline-flex items-center gap-2 bg-[rgba(59,130,246,0.08)] border border-[rgba(59,130,246,0.2)] px-4 py-1.5 rounded-full text-[0.78rem] font-semibold text-[var(--local-accent)] mb-8 tracking-wide jp-animate-in" data-jp-field="badge">
+              <span className="w-1.5 h-1.5 rounded-full bg-[var(--local-accent)] jp-pulse-dot" />
+              {data.badge}
+            </div>
+          )}
+          <h1
+            className="font-display text-[clamp(2.8rem,6vw,4.8rem)] font-black text-[var(--local-text)] leading-[1.08] tracking-tight mb-6 jp-animate-in jp-d1"
+            data-jp-field="title"
+          >
+            {data.title}
+            {data.titleHighlight && (
+              <>
+                <br />
+                <em className="not-italic bg-gradient-to-br from-[var(--local-accent)] to-[var(--local-cyan)] bg-clip-text text-transparent" data-jp-field="titleHighlight">
+                  {data.titleHighlight}
+                </em>
+              </>
+            )}
+          </h1>
+          {data.description && (
+            <p className="text-xl text-[var(--local-text-muted)] max-w-[600px] leading-relaxed mb-10 jp-animate-in jp-d2" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+          {data.ctas && data.ctas.length > 0 && (
+            <div className="flex gap-4 flex-wrap jp-animate-in jp-d3">
+              {data.ctas.map((cta, idx) => (
+                <a
+                  key={cta.id ?? idx}
+                  href={cta.href}
+                  data-jp-item-id={cta.id ?? `legacy-${idx}`}
+                  data-jp-item-field="ctas"
+                  className={cn(
+                    'inline-flex items-center gap-2 px-8 py-3.5 rounded-[5px] font-semibold text-base transition-all duration-200 no-underline',
+                    cta.variant === 'primary'
+                      ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-0.5 hover:shadow-[0_8px_30px_rgba(59,130,246,0.3)]'
+                      : 'bg-transparent text-[var(--local-text)] border border-[rgba(255,255,255,0.12)] hover:border-[rgba(255,255,255,0.3)] hover:bg-[rgba(255,255,255,0.04)]'
+                  )}
+                >
+                  {cta.label}
+                </a>
+              ))}
+            </div>
+          )}
+          {data.metrics && data.metrics.length > 0 && (
+            <div className="flex gap-12 mt-16 pt-12 border-t border-[rgba(255,255,255,0.06)] flex-wrap jp-animate-in jp-d4">
+              {data.metrics.map((metric, idx) => (
+                <div
+                  key={(metric as { id?: string }).id ?? idx}
+                  data-jp-item-id={(metric as { id?: string }).id ?? `legacy-${idx}`}
+                  data-jp-item-field="metrics"
+                >
+                  <div className="text-[2rem] font-bold text-[var(--local-text)] font-display">
+                    {metric.val}
+                  </div>
+                  <div className="text-[0.82rem] text-[var(--muted-foreground)] mt-0.5 opacity-70">
+                    {metric.label}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/hero/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/hero/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, CtaSchema } from '@/lib/base-schemas';
-
-const HeroMetricSchema = z.object({
-  val: z.string().describe('ui:text'),
-  label: z.string().describe('ui:text'),
-});
-
-export const HeroSchema = BaseSectionData.extend({
-  badge: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  titleHighlight: z.string().optional().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  ctas: z.array(CtaSchema).optional().describe('ui:list'),
-  metrics: z.array(HeroMetricSchema).optional().describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, CtaSchema } from '@/lib/base-schemas';
+
+const HeroMetricSchema = z.object({
+  val: z.string().describe('ui:text'),
+  label: z.string().describe('ui:text'),
+});
+
+export const HeroSchema = BaseSectionData.extend({
+  badge: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  titleHighlight: z.string().optional().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  ctas: z.array(CtaSchema).optional().describe('ui:list'),
+  metrics: z.array(HeroMetricSchema).optional().describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/hero/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/hero/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { HeroSchema } from './schema';
-
-export type HeroData = z.infer<typeof HeroSchema>;
-export type HeroSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { HeroSchema } from './schema';
+
+export type HeroData = z.infer<typeof HeroSchema>;
+export type HeroSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/image-test"
 mkdir -p "src/components/pa-section"
 echo "Creating src/components/pa-section/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/View.tsx"
-import React from 'react';
-import type { PaSectionData, PaSectionSettings } from './types';
-
-export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--card)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-deep': 'var(--background)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
-      <div className="max-w-[1200px] mx-auto px-8">
-        {data.label && (
-          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-            <span className="w-5 h-px bg-[var(--local-primary)]" />
-            {data.label}
-          </div>
-        )}
-        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-          {data.title}
-        </h2>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
-          <div>
-            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="subtitle">
-              {data.subtitle}
-            </h3>
-            {data.paragraphs.map((p, idx) => (
-              <p key={idx} className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed" data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="paragraphs">
-                {p.text}
-              </p>
-            ))}
-            {data.badges && data.badges.length > 0 && (
-              <div className="flex gap-2.5 flex-wrap mt-4">
-                {data.badges.map((badge, idx) => (
-                  <span
-                    key={idx}
-                    className="inline-flex items-center gap-1.5 bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)] text-[#4ade80] px-3 py-1.5 rounded-md text-[0.78rem] font-semibold"
-                    data-jp-item-id={(badge as { id?: string }).id ?? `legacy-${idx}`}
-                    data-jp-item-field="badges"
-                  >
-                    {badge.label}
-                  </span>
-                ))}
-              </div>
-            )}
-          </div>
-          <div className="border border-[rgba(255,255,255,0.06)] rounded-lg p-12 bg-[rgba(255,255,255,0.02)] text-center">
-            {data.engines && data.engines.length >= 2 && (
-              <div className="flex items-center justify-center gap-6 mb-8">
-                {data.engines.map((engine, idx) => (
-                  <React.Fragment key={idx}>
-                    {idx > 0 && (
-                      <span className="text-[var(--local-text-muted)] text-2xl opacity-50">⇄</span>
-                    )}
-                    <div
-                      className={
-                        engine.variant === 'tailwind'
-                          ? 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.2)] text-[#60a5fa]'
-                          : 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.2)] text-[#4ade80]'
-                      }
-                      data-jp-item-id={(engine as { id?: string }).id ?? `legacy-${idx}`}
-                      data-jp-item-field="engines"
-                    >
-                      {engine.label}
-                    </div>
-                  </React.Fragment>
-                ))}
-              </div>
-            )}
-            {data.codeSnippet && (
-              <div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-lg text-left border border-[rgba(255,255,255,0.04)]" data-jp-field="codeSnippet">
-                <pre className="whitespace-pre-wrap m-0">{data.codeSnippet}</pre>
-                <div className="mt-4 text-[0.75rem] text-center opacity-50">
-                  Same JSON. Different Render Engine.
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import type { PaSectionData, PaSectionSettings } from './types';
+
+export const PaSection: React.FC<{ data: PaSectionData; settings?: PaSectionSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--card)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-deep': 'var(--background)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.1)] to-transparent" />
+      <div className="max-w-[1200px] mx-auto px-8">
+        {data.label && (
+          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+            <span className="w-5 h-px bg-[var(--local-primary)]" />
+            {data.label}
+          </div>
+        )}
+        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+          {data.title}
+        </h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mt-12">
+          <div>
+            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="subtitle">
+              {data.subtitle}
+            </h3>
+            {data.paragraphs.map((p, idx) => (
+              <p key={idx} className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed" data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`} data-jp-item-field="paragraphs">
+                {p.text}
+              </p>
+            ))}
+            {data.badges && data.badges.length > 0 && (
+              <div className="flex gap-2.5 flex-wrap mt-4">
+                {data.badges.map((badge, idx) => (
+                  <span
+                    key={idx}
+                    className="inline-flex items-center gap-1.5 bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)] text-[#4ade80] px-3 py-1.5 rounded-md text-[0.78rem] font-semibold"
+                    data-jp-item-id={(badge as { id?: string }).id ?? `legacy-${idx}`}
+                    data-jp-item-field="badges"
+                  >
+                    {badge.label}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="border border-[rgba(255,255,255,0.06)] rounded-lg p-12 bg-[rgba(255,255,255,0.02)] text-center">
+            {data.engines && data.engines.length >= 2 && (
+              <div className="flex items-center justify-center gap-6 mb-8">
+                {data.engines.map((engine, idx) => (
+                  <React.Fragment key={idx}>
+                    {idx > 0 && (
+                      <span className="text-[var(--local-text-muted)] text-2xl opacity-50">⇄</span>
+                    )}
+                    <div
+                      className={
+                        engine.variant === 'tailwind'
+                          ? 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.2)] text-[#60a5fa]'
+                          : 'px-6 py-4 rounded-xl font-bold text-[0.95rem] border bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.2)] text-[#4ade80]'
+                      }
+                      data-jp-item-id={(engine as { id?: string }).id ?? `legacy-${idx}`}
+                      data-jp-item-field="engines"
+                    >
+                      {engine.label}
+                    </div>
+                  </React.Fragment>
+                ))}
+              </div>
+            )}
+            {data.codeSnippet && (
+              <div className="font-mono text-[0.85rem] text-[var(--local-text-muted)] bg-[var(--local-deep)] p-4 rounded-lg text-left border border-[rgba(255,255,255,0.04)]" data-jp-field="codeSnippet">
+                <pre className="whitespace-pre-wrap m-0">{data.codeSnippet}</pre>
+                <div className="mt-4 text-[0.75rem] text-center opacity-50">
+                  Same JSON. Different Render Engine.
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pa-section/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pa-section/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
-
-const PaBadgeSchema = z.object({
-  label: z.string().describe('ui:text'),
-});
-
-const PaEngineSchema = z.object({
-  label: z.string().describe('ui:text'),
-  variant: z.enum(['tailwind', 'bootstrap']).describe('ui:select'),
-});
-
-export const PaSectionSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  subtitle: z.string().describe('ui:text'),
-  paragraphs: z.array(z.object({ text: z.string().describe('ui:textarea') })).describe('ui:list'),
-  badges: z.array(PaBadgeSchema).optional().describe('ui:list'),
-  engines: z.array(PaEngineSchema).optional().describe('ui:list'),
-  codeSnippet: z.string().optional().describe('ui:textarea'),
-});
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
+
+const PaBadgeSchema = z.object({
+  label: z.string().describe('ui:text'),
+});
+
+const PaEngineSchema = z.object({
+  label: z.string().describe('ui:text'),
+  variant: z.enum(['tailwind', 'bootstrap']).describe('ui:select'),
+});
+
+export const PaSectionSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  subtitle: z.string().describe('ui:text'),
+  paragraphs: z.array(z.object({ text: z.string().describe('ui:textarea') })).describe('ui:list'),
+  badges: z.array(PaBadgeSchema).optional().describe('ui:list'),
+  engines: z.array(PaEngineSchema).optional().describe('ui:list'),
+  codeSnippet: z.string().optional().describe('ui:textarea'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pa-section/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pa-section/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { PaSectionSchema } from './schema';
-
-export type PaSectionData = z.infer<typeof PaSectionSchema>;
-export type PaSectionSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { PaSectionSchema } from './schema';
+
+export type PaSectionData = z.infer<typeof PaSectionSchema>;
+export type PaSectionSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/philosophy"
 echo "Creating src/components/philosophy/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/View.tsx"
-import React from 'react';
-import type { PhilosophyData, PhilosophySettings } from './types';
-
-export const Philosophy: React.FC<{ data: PhilosophyData; settings?: PhilosophySettings }> = ({ data }) => {
-  const renderQuote = () => {
-    if (!data.quoteHighlightWord) {
-      return <>{data.quote}</>;
-    }
-    const parts = data.quote.split(data.quoteHighlightWord);
-    return (
-      <>
-        {parts.map((part, idx) => (
-          <React.Fragment key={idx}>
-            {part}
-            {idx < parts.length - 1 && (
-              <em className="not-italic text-[var(--local-accent)]">
-                {data.quoteHighlightWord}
-              </em>
-            )}
-          </React.Fragment>
-        ))}
-      </>
-    );
-  };
-
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-primary': 'var(--primary)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="max-w-[760px] mx-auto text-center">
-          {data.label && (
-            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-              <span className="w-5 h-px bg-[var(--local-primary)]" />
-              {data.label}
-            </div>
-          )}
-          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-            {data.title}
-          </h2>
-          <blockquote className="font-display text-[clamp(1.6rem,3vw,2.4rem)] text-[var(--local-text)] font-bold leading-[1.35] my-8" data-jp-field="quote">
-            &ldquo;{renderQuote()}&rdquo;
-          </blockquote>
-          {data.description && (
-            <p className="text-[1.05rem] text-[var(--local-text-muted)] max-w-[560px] mx-auto leading-relaxed" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import type { PhilosophyData, PhilosophySettings } from './types';
+
+export const Philosophy: React.FC<{ data: PhilosophyData; settings?: PhilosophySettings }> = ({ data }) => {
+  const renderQuote = () => {
+    if (!data.quoteHighlightWord) {
+      return <>{data.quote}</>;
+    }
+    const parts = data.quote.split(data.quoteHighlightWord);
+    return (
+      <>
+        {parts.map((part, idx) => (
+          <React.Fragment key={idx}>
+            {part}
+            {idx < parts.length - 1 && (
+              <em className="not-italic text-[var(--local-accent)]">
+                {data.quoteHighlightWord}
+              </em>
+            )}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-primary': 'var(--primary)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="max-w-[760px] mx-auto text-center">
+          {data.label && (
+            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+              <span className="w-5 h-px bg-[var(--local-primary)]" />
+              {data.label}
+            </div>
+          )}
+          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+            {data.title}
+          </h2>
+          <blockquote className="font-display text-[clamp(1.6rem,3vw,2.4rem)] text-[var(--local-text)] font-bold leading-[1.35] my-8" data-jp-field="quote">
+            &ldquo;{renderQuote()}&rdquo;
+          </blockquote>
+          {data.description && (
+            <p className="text-[1.05rem] text-[var(--local-text-muted)] max-w-[560px] mx-auto leading-relaxed" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/philosophy/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/philosophy/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData } from '@/lib/base-schemas';
-
-export const PhilosophySchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  quote: z.string().describe('ui:textarea'),
-  quoteHighlightWord: z.string().optional().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-});
+import { z } from 'zod';
+import { BaseSectionData } from '@/lib/base-schemas';
+
+export const PhilosophySchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  quote: z.string().describe('ui:textarea'),
+  quoteHighlightWord: z.string().optional().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/philosophy/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/philosophy/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { PhilosophySchema } from './schema';
-
-export type PhilosophyData = z.infer<typeof PhilosophySchema>;
-export type PhilosophySettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { PhilosophySchema } from './schema';
+
+export type PhilosophyData = z.infer<typeof PhilosophySchema>;
+export type PhilosophySettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/pillars-grid"
 echo "Creating src/components/pillars-grid/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import { Icon, isIconName } from '@/lib/IconResolver';
-import type { PillarsGridData, PillarsGridSettings, PillarIconVariant, PillarTagVariant } from './types';
-
-const iconVariantStyles: Record<PillarIconVariant, string> = {
-  split: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
-  registry: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
-  federation: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
-};
-
-const tagVariantStyles: Record<PillarTagVariant, string> = {
-  core: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
-  pattern: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
-  enterprise: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
-};
-
-export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGridSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.15)] to-transparent" />
-      <div className="max-w-[1200px] mx-auto px-8">
-        {data.label && (
-          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-            <span className="w-5 h-px bg-[var(--local-primary)]" />
-            {data.label}
-          </div>
-        )}
-        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-          {data.title}
-        </h2>
-        {data.description && (
-          <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] leading-relaxed" data-jp-field="description">
-            {data.description}
-          </p>
-        )}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
-          {data.pillars.map((pillar, idx) => (
-            <div
-              key={pillar.id ?? idx}
-              className="jp-pillar-card group relative border border-[rgba(255,255,255,0.06)] rounded-lg p-10 bg-[rgba(255,255,255,0.015)] transition-all duration-300 overflow-hidden hover:border-[rgba(59,130,246,0.2)] hover:-translate-y-1 hover:bg-[rgba(59,130,246,0.03)]"
-              data-jp-item-id={pillar.id ?? `legacy-${idx}`}
-              data-jp-item-field="pillars"
-            >
-              <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[#22d3ee] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-              <div className={cn(
-                'w-12 h-12 rounded-xl flex items-center justify-center mb-6 text-xl font-bold',
-                iconVariantStyles[pillar.iconVariant]
-              )}>
-                {pillar.icon && isIconName(pillar.icon) ? (
-                  <Icon name={pillar.icon} size={24} className="shrink-0" />
-                ) : pillar.icon ? (
-                  <span>{pillar.icon}</span>
-                ) : null}
-              </div>
-              <h3 className="text-xl font-bold text-[var(--local-text)] mb-3">
-                {pillar.title}
-              </h3>
-              <p className="text-[0.95rem] text-[var(--local-text-muted)] leading-relaxed">
-                {pillar.description}
-              </p>
-              <span className={cn(
-                'inline-block text-[0.7rem] font-semibold uppercase tracking-wide px-3 py-1 rounded mt-4',
-                tagVariantStyles[pillar.tagVariant]
-              )}>
-                {pillar.tag}
-              </span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon, isIconName } from '@/lib/IconResolver';
+import type { PillarsGridData, PillarsGridSettings, PillarIconVariant, PillarTagVariant } from './types';
+
+const iconVariantStyles: Record<PillarIconVariant, string> = {
+  split: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
+  registry: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
+  federation: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
+};
+
+const tagVariantStyles: Record<PillarTagVariant, string> = {
+  core: 'bg-[rgba(59,130,246,0.1)] text-[#60a5fa]',
+  pattern: 'bg-[rgba(34,211,238,0.1)] text-[#22d3ee]',
+  enterprise: 'bg-[rgba(168,85,247,0.1)] text-[#c084fc]',
+};
+
+export const PillarsGrid: React.FC<{ data: PillarsGridData; settings?: PillarsGridSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[80%] h-px bg-gradient-to-r from-transparent via-[rgba(59,130,246,0.15)] to-transparent" />
+      <div className="max-w-[1200px] mx-auto px-8">
+        {data.label && (
+          <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+            <span className="w-5 h-px bg-[var(--local-primary)]" />
+            {data.label}
+          </div>
+        )}
+        <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+          {data.title}
+        </h2>
+        {data.description && (
+          <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] leading-relaxed" data-jp-field="description">
+            {data.description}
+          </p>
+        )}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
+          {data.pillars.map((pillar, idx) => (
+            <div
+              key={pillar.id ?? idx}
+              className="jp-pillar-card group relative border border-[rgba(255,255,255,0.06)] rounded-lg p-10 bg-[rgba(255,255,255,0.015)] transition-all duration-300 overflow-hidden hover:border-[rgba(59,130,246,0.2)] hover:-translate-y-1 hover:bg-[rgba(59,130,246,0.03)]"
+              data-jp-item-id={pillar.id ?? `legacy-${idx}`}
+              data-jp-item-field="pillars"
+            >
+              <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-[var(--local-primary)] to-[#22d3ee] opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <div className={cn(
+                'w-12 h-12 rounded-xl flex items-center justify-center mb-6 text-xl font-bold',
+                iconVariantStyles[pillar.iconVariant]
+              )}>
+                {pillar.icon && isIconName(pillar.icon) ? (
+                  <Icon name={pillar.icon} size={24} className="shrink-0" />
+                ) : pillar.icon ? (
+                  <span>{pillar.icon}</span>
+                ) : null}
+              </div>
+              <h3 className="text-xl font-bold text-[var(--local-text)] mb-3">
+                {pillar.title}
+              </h3>
+              <p className="text-[0.95rem] text-[var(--local-text-muted)] leading-relaxed">
+                {pillar.description}
+              </p>
+              <span className={cn(
+                'inline-block text-[0.7rem] font-semibold uppercase tracking-wide px-3 py-1 rounded mt-4',
+                tagVariantStyles[pillar.tagVariant]
+              )}>
+                {pillar.tag}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pillars-grid/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pillars-grid/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const PillarIconVariantSchema = z.enum(['split', 'registry', 'federation']);
-export const PillarTagVariantSchema = z.enum(['core', 'pattern', 'enterprise']);
-
-const PillarCardSchema = BaseArrayItem.extend({
-  icon: z.string().describe('ui:icon-picker'),
-  iconVariant: PillarIconVariantSchema.describe('ui:select'),
-  title: z.string().describe('ui:text'),
-  description: z.string().describe('ui:textarea'),
-  tag: z.string().describe('ui:text'),
-  tagVariant: PillarTagVariantSchema.describe('ui:select'),
-});
-
-export const PillarsGridSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  pillars: z.array(PillarCardSchema).describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const PillarIconVariantSchema = z.enum(['split', 'registry', 'federation']);
+export const PillarTagVariantSchema = z.enum(['core', 'pattern', 'enterprise']);
+
+const PillarCardSchema = BaseArrayItem.extend({
+  icon: z.string().describe('ui:icon-picker'),
+  iconVariant: PillarIconVariantSchema.describe('ui:select'),
+  title: z.string().describe('ui:text'),
+  description: z.string().describe('ui:textarea'),
+  tag: z.string().describe('ui:text'),
+  tagVariant: PillarTagVariantSchema.describe('ui:select'),
+});
+
+export const PillarsGridSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  pillars: z.array(PillarCardSchema).describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/pillars-grid/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/pillars-grid/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { PillarsGridSchema, PillarIconVariantSchema, PillarTagVariantSchema } from './schema';
-
-export type PillarsGridData = z.infer<typeof PillarsGridSchema>;
-export type PillarsGridSettings = z.infer<typeof BaseSectionSettingsSchema>;
-export type PillarIconVariant = z.infer<typeof PillarIconVariantSchema>;
-export type PillarTagVariant = z.infer<typeof PillarTagVariantSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { PillarsGridSchema, PillarIconVariantSchema, PillarTagVariantSchema } from './schema';
+
+export type PillarsGridData = z.infer<typeof PillarsGridSchema>;
+export type PillarsGridSettings = z.infer<typeof BaseSectionSettingsSchema>;
+export type PillarIconVariant = z.infer<typeof PillarIconVariantSchema>;
+export type PillarTagVariant = z.infer<typeof PillarTagVariantSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/problem-statement"
 echo "Creating src/components/problem-statement/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { ProblemStatementData, ProblemStatementSettings, SiloBlockVariant } from './types';
-
-const variantStyles: Record<SiloBlockVariant, string> = {
-  red: 'bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-[#f87171]',
-  amber: 'bg-[rgba(245,158,11,0.08)] border-[rgba(245,158,11,0.3)] text-[#fbbf24]',
-  green: 'bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.3)] text-[#4ade80]',
-  blue: 'bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.3)] text-[#60a5fa]',
-};
-
-export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?: ProblemStatementSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-surface': 'var(--card)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="jp-problem relative z-0 py-28 bg-gradient-to-b from-[var(--local-bg)] to-[var(--local-surface)]"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
-          <div className="relative h-[360px] border border-[rgba(255,255,255,0.06)] rounded-lg bg-[rgba(255,255,255,0.02)] overflow-hidden flex items-center justify-center">
-            <div className="text-center p-8">
-              {data.siloGroups.map((group, gIdx) => (
-                <div
-                  key={gIdx}
-                  className="mb-4"
-                  data-jp-item-id={(group as { id?: string }).id ?? `legacy-${gIdx}`}
-                  data-jp-item-field="siloGroups"
-                >
-                  <div className="flex flex-wrap justify-center gap-1.5">
-                    {group.blocks.map((block, bIdx) => (
-                      <span
-                        key={(block as { id?: string }).id ?? bIdx}
-                        className={cn(
-                          'inline-block px-4 py-2 rounded-lg text-[0.8rem] font-semibold border',
-                          variantStyles[block.variant]
-                        )}
-                        data-jp-item-id={(block as { id?: string }).id ?? `legacy-${bIdx}`}
-                        data-jp-item-field="blocks"
-                      >
-                        {block.label}
-                      </span>
-                    ))}
-                  </div>
-                  <span className="text-[0.7rem] text-[var(--local-text-muted)] uppercase tracking-widest mt-2 block opacity-60">
-                    {group.label}
-                  </span>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div>
-            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="title">
-              {data.title}
-            </h3>
-            {data.paragraphs.map((p, idx) => (
-              <p
-                key={idx}
-                className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed"
-                data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`}
-                data-jp-item-field="paragraphs"
-              >
-                {p.isBold ? <strong className="text-[var(--local-text)]">{p.text}</strong> : p.text}
-              </p>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ProblemStatementData, ProblemStatementSettings, SiloBlockVariant } from './types';
+
+const variantStyles: Record<SiloBlockVariant, string> = {
+  red: 'bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-[#f87171]',
+  amber: 'bg-[rgba(245,158,11,0.08)] border-[rgba(245,158,11,0.3)] text-[#fbbf24]',
+  green: 'bg-[rgba(34,197,94,0.08)] border-[rgba(34,197,94,0.3)] text-[#4ade80]',
+  blue: 'bg-[rgba(59,130,246,0.08)] border-[rgba(59,130,246,0.3)] text-[#60a5fa]',
+};
+
+export const ProblemStatement: React.FC<{ data: ProblemStatementData; settings?: ProblemStatementSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-surface': 'var(--card)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="jp-problem relative z-0 py-28 bg-gradient-to-b from-[var(--local-bg)] to-[var(--local-surface)]"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+          <div className="relative h-[360px] border border-[rgba(255,255,255,0.06)] rounded-lg bg-[rgba(255,255,255,0.02)] overflow-hidden flex items-center justify-center">
+            <div className="text-center p-8">
+              {data.siloGroups.map((group, gIdx) => (
+                <div
+                  key={gIdx}
+                  className="mb-4"
+                  data-jp-item-id={(group as { id?: string }).id ?? `legacy-${gIdx}`}
+                  data-jp-item-field="siloGroups"
+                >
+                  <div className="flex flex-wrap justify-center gap-1.5">
+                    {group.blocks.map((block, bIdx) => (
+                      <span
+                        key={(block as { id?: string }).id ?? bIdx}
+                        className={cn(
+                          'inline-block px-4 py-2 rounded-lg text-[0.8rem] font-semibold border',
+                          variantStyles[block.variant]
+                        )}
+                        data-jp-item-id={(block as { id?: string }).id ?? `legacy-${bIdx}`}
+                        data-jp-item-field="blocks"
+                      >
+                        {block.label}
+                      </span>
+                    ))}
+                  </div>
+                  <span className="text-[0.7rem] text-[var(--local-text-muted)] uppercase tracking-widest mt-2 block opacity-60">
+                    {group.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div>
+            <h3 className="text-2xl font-bold text-[var(--local-text)] mb-4" data-jp-field="title">
+              {data.title}
+            </h3>
+            {data.paragraphs.map((p, idx) => (
+              <p
+                key={idx}
+                className="text-[var(--local-text-muted)] mb-5 text-[1.05rem] leading-relaxed"
+                data-jp-item-id={(p as { id?: string }).id ?? `legacy-${idx}`}
+                data-jp-item-field="paragraphs"
+              >
+                {p.isBold ? <strong className="text-[var(--local-text)]">{p.text}</strong> : p.text}
+              </p>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/problem-statement/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/problem-statement/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-export const SiloBlockVariantSchema = z.enum(['red', 'amber', 'green', 'blue']);
-const SiloBlockSchema = BaseArrayItem.extend({
-  label: z.string().describe('ui:text'),
-  variant: SiloBlockVariantSchema.describe('ui:select'),
-});
-
-const SiloGroupSchema = BaseArrayItem.extend({
-  blocks: z.array(SiloBlockSchema).describe('ui:list'),
-  label: z.string().describe('ui:text'),
-});
-
-const ProblemParagraphSchema = BaseArrayItem.extend({
-  text: z.string().describe('ui:textarea'),
-  isBold: z.boolean().default(false).describe('ui:checkbox'),
-});
-
-export const ProblemStatementSchema = BaseSectionData.extend({
-  siloGroups: z.array(SiloGroupSchema).describe('ui:list'),
-  title: z.string().describe('ui:text'),
-  paragraphs: z.array(ProblemParagraphSchema).describe('ui:list'),
-  highlight: z.string().optional().describe('ui:text'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+export const SiloBlockVariantSchema = z.enum(['red', 'amber', 'green', 'blue']);
+const SiloBlockSchema = BaseArrayItem.extend({
+  label: z.string().describe('ui:text'),
+  variant: SiloBlockVariantSchema.describe('ui:select'),
+});
+
+const SiloGroupSchema = BaseArrayItem.extend({
+  blocks: z.array(SiloBlockSchema).describe('ui:list'),
+  label: z.string().describe('ui:text'),
+});
+
+const ProblemParagraphSchema = BaseArrayItem.extend({
+  text: z.string().describe('ui:textarea'),
+  isBold: z.boolean().default(false).describe('ui:checkbox'),
+});
+
+export const ProblemStatementSchema = BaseSectionData.extend({
+  siloGroups: z.array(SiloGroupSchema).describe('ui:list'),
+  title: z.string().describe('ui:text'),
+  paragraphs: z.array(ProblemParagraphSchema).describe('ui:list'),
+  highlight: z.string().optional().describe('ui:text'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/problem-statement/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/problem-statement/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { ProblemStatementSchema, SiloBlockVariantSchema } from './schema';
-
-export type ProblemStatementData = z.infer<typeof ProblemStatementSchema>;
-export type ProblemStatementSettings = z.infer<typeof BaseSectionSettingsSchema>;
-export type SiloBlockVariant = z.infer<typeof SiloBlockVariantSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { ProblemStatementSchema, SiloBlockVariantSchema } from './schema';
+
+export type ProblemStatementData = z.infer<typeof ProblemStatementSchema>;
+export type ProblemStatementSettings = z.infer<typeof BaseSectionSettingsSchema>;
+export type SiloBlockVariant = z.infer<typeof SiloBlockVariantSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/product-triad"
 echo "Creating src/components/product-triad/View.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/View.tsx"
-import React from 'react';
-import { cn } from '@/lib/utils';
-import type { ProductTriadData, ProductTriadSettings } from './types';
-
-export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: ProductTriadSettings }> = ({ data }) => {
-  return (
-    <section
-      style={{
-        '--local-bg': 'var(--background)',
-        '--local-text': 'var(--foreground)',
-        '--local-text-muted': 'var(--muted-foreground)',
-        '--local-primary': 'var(--primary)',
-        '--local-accent': 'var(--color-accent, #60a5fa)',
-        '--local-border': 'var(--border)',
-      } as React.CSSProperties}
-      className="relative z-0 py-28 bg-[var(--local-bg)]"
-    >
-      <div className="max-w-[1200px] mx-auto px-8">
-        <div className="text-center">
-          {data.label && (
-            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
-              <span className="w-5 h-px bg-[var(--local-primary)]" />
-              {data.label}
-            </div>
-          )}
-          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
-            {data.title}
-          </h2>
-          {data.description && (
-            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
-              {data.description}
-            </p>
-          )}
-        </div>
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
-          {data.products.map((product, idx) => (
-            <div
-              key={product.id ?? idx}
-              className={cn(
-                'relative border rounded-lg p-10 transition-all duration-300 hover:-translate-y-1',
-                product.featured
-                  ? 'border-[rgba(59,130,246,0.3)] bg-gradient-to-b from-[rgba(59,130,246,0.06)] to-[rgba(59,130,246,0.01)] hover:border-[rgba(59,130,246,0.4)]'
-                  : 'border-[rgba(255,255,255,0.06)] bg-[rgba(255,255,255,0.015)] hover:border-[rgba(59,130,246,0.2)]'
-              )}
-              data-jp-item-id={product.id ?? `legacy-${idx}`}
-              data-jp-item-field="products"
-            >
-              {product.featured && (
-                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--local-primary)] text-white text-[0.7rem] font-bold px-4 py-1 rounded-full uppercase tracking-wide">
-                  Most Popular
-                </div>
-              )}
-              <div className="text-[0.75rem] font-bold uppercase tracking-[0.1em] text-[var(--local-accent)] mb-2">
-                {product.tier}
-              </div>
-              <div className="text-2xl font-extrabold text-[var(--local-text)] mb-2">
-                {product.name}
-              </div>
-              <div className="font-display text-[2.2rem] font-extrabold text-[var(--local-text)] mb-1">
-                {product.price}
-                {product.priceSuffix && (
-                  <span className="text-[0.9rem] font-normal text-[var(--local-text-muted)]">
-                    {product.priceSuffix}
-                  </span>
-                )}
-              </div>
-              <div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[rgba(255,255,255,0.06)]">
-                {product.delivery}
-              </div>
-              <ul className="mb-8 space-y-0">
-                {product.features.map((feature, fIdx) => (
-                  <li
-                    key={fIdx}
-                    className="text-[0.9rem] text-[#cbd5e1] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
-                  >
-                    {feature.text}
-                  </li>
-                ))}
-              </ul>
-              {product.ctaLabel && product.ctaHref && (
-                <a
-                  href={product.ctaHref}
-                  className={cn(
-                    'block text-center py-3 rounded-[5px] no-underline font-semibold text-[0.95rem] transition-all duration-200',
-                    product.ctaVariant === 'primary'
-                      ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-px'
-                      : 'bg-[rgba(255,255,255,0.05)] text-[#e2e8f0] border border-[rgba(255,255,255,0.1)] hover:bg-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.2)]'
-                  )}
-                >
-                  {product.ctaLabel}
-                </a>
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
+import React from 'react';
+import { cn } from '@/lib/utils';
+import type { ProductTriadData, ProductTriadSettings } from './types';
+
+export const ProductTriad: React.FC<{ data: ProductTriadData; settings?: ProductTriadSettings }> = ({ data }) => {
+  return (
+    <section
+      style={{
+        '--local-bg': 'var(--background)',
+        '--local-text': 'var(--foreground)',
+        '--local-text-muted': 'var(--muted-foreground)',
+        '--local-primary': 'var(--primary)',
+        '--local-accent': 'var(--color-accent, #60a5fa)',
+        '--local-border': 'var(--border)',
+      } as React.CSSProperties}
+      className="relative z-0 py-28 bg-[var(--local-bg)]"
+    >
+      <div className="max-w-[1200px] mx-auto px-8">
+        <div className="text-center">
+          {data.label && (
+            <div className="jp-section-label inline-flex items-center gap-2 text-[0.72rem] font-bold uppercase tracking-[0.12em] text-[var(--local-accent)] mb-4" data-jp-field="label">
+              <span className="w-5 h-px bg-[var(--local-primary)]" />
+              {data.label}
+            </div>
+          )}
+          <h2 className="font-display text-[clamp(2rem,4vw,3.2rem)] font-extrabold text-[var(--local-text)] leading-[1.15] tracking-tight mb-4" data-jp-field="title">
+            {data.title}
+          </h2>
+          {data.description && (
+            <p className="text-lg text-[var(--local-text-muted)] max-w-[600px] mx-auto leading-relaxed" data-jp-field="description">
+              {data.description}
+            </p>
+          )}
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-14">
+          {data.products.map((product, idx) => (
+            <div
+              key={product.id ?? idx}
+              className={cn(
+                'relative border rounded-lg p-10 transition-all duration-300 hover:-translate-y-1',
+                product.featured
+                  ? 'border-[rgba(59,130,246,0.3)] bg-gradient-to-b from-[rgba(59,130,246,0.06)] to-[rgba(59,130,246,0.01)] hover:border-[rgba(59,130,246,0.4)]'
+                  : 'border-[rgba(255,255,255,0.06)] bg-[rgba(255,255,255,0.015)] hover:border-[rgba(59,130,246,0.2)]'
+              )}
+              data-jp-item-id={product.id ?? `legacy-${idx}`}
+              data-jp-item-field="products"
+            >
+              {product.featured && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[var(--local-primary)] text-white text-[0.7rem] font-bold px-4 py-1 rounded-full uppercase tracking-wide">
+                  Most Popular
+                </div>
+              )}
+              <div className="text-[0.75rem] font-bold uppercase tracking-[0.1em] text-[var(--local-accent)] mb-2">
+                {product.tier}
+              </div>
+              <div className="text-2xl font-extrabold text-[var(--local-text)] mb-2">
+                {product.name}
+              </div>
+              <div className="font-display text-[2.2rem] font-extrabold text-[var(--local-text)] mb-1">
+                {product.price}
+                {product.priceSuffix && (
+                  <span className="text-[0.9rem] font-normal text-[var(--local-text-muted)]">
+                    {product.priceSuffix}
+                  </span>
+                )}
+              </div>
+              <div className="text-[0.85rem] text-[var(--local-text-muted)] mb-6 pb-6 border-b border-[rgba(255,255,255,0.06)]">
+                {product.delivery}
+              </div>
+              <ul className="mb-8 space-y-0">
+                {product.features.map((feature, fIdx) => (
+                  <li
+                    key={fIdx}
+                    className="text-[0.9rem] text-[#cbd5e1] py-1.5 pl-6 relative before:content-['✓'] before:absolute before:left-0 before:text-[var(--local-accent)] before:font-bold before:text-[0.8rem]"
+                  >
+                    {feature.text}
+                  </li>
+                ))}
+              </ul>
+              {product.ctaLabel && product.ctaHref && (
+                <a
+                  href={product.ctaHref}
+                  className={cn(
+                    'block text-center py-3 rounded-[5px] no-underline font-semibold text-[0.95rem] transition-all duration-200',
+                    product.ctaVariant === 'primary'
+                      ? 'bg-[var(--local-primary)] text-white hover:brightness-110 hover:-translate-y-px'
+                      : 'bg-[rgba(255,255,255,0.05)] text-[#e2e8f0] border border-[rgba(255,255,255,0.1)] hover:bg-[rgba(255,255,255,0.08)] hover:border-[rgba(255,255,255,0.2)]'
+                  )}
+                >
+                  {product.ctaLabel}
+                </a>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/product-triad/index.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/index.ts"
-export * from './View';
-export * from './schema';
-export * from './types';
+export * from './View';
+export * from './schema';
+export * from './types';
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/product-triad/schema.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/schema.ts"
-import { z } from 'zod';
-import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
-
-const ProductFeatureSchema = z.object({
-  text: z.string().describe('ui:text'),
-});
-
-const ProductCardSchema = BaseArrayItem.extend({
-  tier: z.string().describe('ui:text'),
-  name: z.string().describe('ui:text'),
-  price: z.string().describe('ui:text'),
-  priceSuffix: z.string().optional().describe('ui:text'),
-  delivery: z.string().describe('ui:text'),
-  features: z.array(ProductFeatureSchema).describe('ui:list'),
-  featured: z.boolean().default(false).describe('ui:checkbox'),
-  ctaLabel: z.string().optional().describe('ui:text'),
-  ctaHref: z.string().optional().describe('ui:text'),
-  ctaVariant: z.enum(['primary', 'secondary']).default('secondary').describe('ui:select'),
-});
-
-export const ProductTriadSchema = BaseSectionData.extend({
-  label: z.string().optional().describe('ui:text'),
-  title: z.string().describe('ui:text'),
-  description: z.string().optional().describe('ui:textarea'),
-  products: z.array(ProductCardSchema).describe('ui:list'),
-});
+import { z } from 'zod';
+import { BaseSectionData, BaseArrayItem } from '@/lib/base-schemas';
+
+const ProductFeatureSchema = z.object({
+  text: z.string().describe('ui:text'),
+});
+
+const ProductCardSchema = BaseArrayItem.extend({
+  tier: z.string().describe('ui:text'),
+  name: z.string().describe('ui:text'),
+  price: z.string().describe('ui:text'),
+  priceSuffix: z.string().optional().describe('ui:text'),
+  delivery: z.string().describe('ui:text'),
+  features: z.array(ProductFeatureSchema).describe('ui:list'),
+  featured: z.boolean().default(false).describe('ui:checkbox'),
+  ctaLabel: z.string().optional().describe('ui:text'),
+  ctaHref: z.string().optional().describe('ui:text'),
+  ctaVariant: z.enum(['primary', 'secondary']).default('secondary').describe('ui:select'),
+});
+
+export const ProductTriadSchema = BaseSectionData.extend({
+  label: z.string().optional().describe('ui:text'),
+  title: z.string().describe('ui:text'),
+  description: z.string().optional().describe('ui:textarea'),
+  products: z.array(ProductCardSchema).describe('ui:list'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/components/product-triad/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/components/product-triad/types.ts"
-import { z } from 'zod';
-import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
-import { ProductTriadSchema } from './schema';
-
-export type ProductTriadData = z.infer<typeof ProductTriadSchema>;
-export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
+import { z } from 'zod';
+import { BaseSectionSettingsSchema } from '@/lib/base-schemas';
+import { ProductTriadSchema } from './schema';
+
+export type ProductTriadData = z.infer<typeof ProductTriadSchema>;
+export type ProductTriadSettings = z.infer<typeof BaseSectionSettingsSchema>;
 
 END_OF_FILE_CONTENT
 mkdir -p "src/components/ui"
@@ -2178,85 +2178,85 @@ END_OF_FILE_CONTENT
 # SKIP: src/data/config/menu.json:Zone.Identifier è un file binario e non può essere convertito in testo.
 echo "Creating src/data/config/site.json..."
 cat << 'END_OF_FILE_CONTENT' > "src/data/config/site.json"
-{
-  "identity": {
-    "title": "JsonPages",
-    "logoUrl": "/logo.svg"
-  },
-  "pages": [
-    {
-      "slug": "home",
-      "label": "Home"
-    },
-    {
-      "slug": "architecture",
-      "label": "Architecture"
-    },
-    {
-      "slug": "usage",
-      "label": "Usage"
-    }
-  ],
-  "header": {
-    "id": "global-header",
-    "type": "header",
-    "data": {
-      "logoText": "Json",
-      "logoHighlight": "Pages",
-      "logoIconText": "{ }",
-      "links": [
-        {
-          "label": "Architecture",
-          "href": "#architecture"
-        },
-        {
-          "label": "Products",
-          "href": "#products"
-        },
-        {
-          "label": "PA Ready",
-          "href": "#pa-ready"
-        },
-        {
-          "label": "Philosophy",
-          "href": "#philosophy"
-        }
-      ]
-    },
-    "settings": {
-      "sticky": true
-    }
-  },
-  "footer": {
-    "id": "global-footer",
-    "type": "footer",
-    "data": {
-      "brandText": "Json",
-      "brandHighlight": "Pages",
-      "copyright": "© 2026 JsonPages Ecosystem. Architected by Guido Filippo Serio.",
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#"
-        },
-        {
-          "label": "API Reference",
-          "href": "#"
-        },
-        {
-          "label": "Changelog",
-          "href": "#"
-        },
-        {
-          "label": "Privacy",
-          "href": "#"
-        }
-      ]
-    },
-    "settings": {
-      "showLogo": true
-    }
-  }
+{
+  "identity": {
+    "title": "JsonPages",
+    "logoUrl": "/logo.svg"
+  },
+  "pages": [
+    {
+      "slug": "home",
+      "label": "Home"
+    },
+    {
+      "slug": "architecture",
+      "label": "Architecture"
+    },
+    {
+      "slug": "usage",
+      "label": "Usage"
+    }
+  ],
+  "header": {
+    "id": "global-header",
+    "type": "header",
+    "data": {
+      "logoText": "Json",
+      "logoHighlight": "Pages",
+      "logoIconText": "{ }",
+      "links": [
+        {
+          "label": "Architecture",
+          "href": "#architecture"
+        },
+        {
+          "label": "Products",
+          "href": "#products"
+        },
+        {
+          "label": "PA Ready",
+          "href": "#pa-ready"
+        },
+        {
+          "label": "Philosophy",
+          "href": "#philosophy"
+        }
+      ]
+    },
+    "settings": {
+      "sticky": true
+    }
+  },
+  "footer": {
+    "id": "global-footer",
+    "type": "footer",
+    "data": {
+      "brandText": "Json",
+      "brandHighlight": "Pages",
+      "copyright": "© 2026 JsonPages Ecosystem. Architected by Guido Filippo Serio.",
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#"
+        },
+        {
+          "label": "API Reference",
+          "href": "#"
+        },
+        {
+          "label": "Changelog",
+          "href": "#"
+        },
+        {
+          "label": "Privacy",
+          "href": "#"
+        }
+      ]
+    },
+    "settings": {
+      "showLogo": true
+    }
+  }
 }
 END_OF_FILE_CONTENT
 # SKIP: src/data/config/site.json:Zone.Identifier è un file binario e non può essere convertito in testo.
@@ -2921,39 +2921,39 @@ END_OF_FILE_CONTENT
 mkdir -p "src/lib"
 echo "Creating src/lib/ComponentRegistry.tsx..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/ComponentRegistry.tsx"
-import React from 'react';
-import { Header } from '@/components/header';
-import { Footer } from '@/components/footer';
-import { Hero } from '@/components/hero';
-import { FeatureGrid } from '@/components/feature-grid';
-import { CodeBlock } from '@/components/code-block';
-import { ProblemStatement } from '@/components/problem-statement';
-import { PillarsGrid } from '@/components/pillars-grid';
-import { ArchLayers } from '@/components/arch-layers';
-import { ProductTriad } from '@/components/product-triad';
-import { PaSection } from '@/components/pa-section';
-import { Philosophy } from '@/components/philosophy';
-import { CtaBanner } from '@/components/cta-banner';
-
-import type { SectionType } from '@jsonpages/core';
-import type { SectionComponentPropsMap } from '@/types';
-
-export const ComponentRegistry: {
-  [K in SectionType]: React.FC<SectionComponentPropsMap[K]>;
-} = {
-  'header': Header,
-  'footer': Footer,
-  'hero': Hero,
-  'feature-grid': FeatureGrid,
-  'code-block': CodeBlock,
-  'problem-statement': ProblemStatement,
-  'pillars-grid': PillarsGrid,
-  'arch-layers': ArchLayers,
-  'product-triad': ProductTriad,
-  'pa-section': PaSection,
-  'philosophy': Philosophy,
-  'cta-banner': CtaBanner,
-};
+import React from 'react';
+import { Header } from '@/components/header';
+import { Footer } from '@/components/footer';
+import { Hero } from '@/components/hero';
+import { FeatureGrid } from '@/components/feature-grid';
+import { CodeBlock } from '@/components/code-block';
+import { ProblemStatement } from '@/components/problem-statement';
+import { PillarsGrid } from '@/components/pillars-grid';
+import { ArchLayers } from '@/components/arch-layers';
+import { ProductTriad } from '@/components/product-triad';
+import { PaSection } from '@/components/pa-section';
+import { Philosophy } from '@/components/philosophy';
+import { CtaBanner } from '@/components/cta-banner';
+
+import type { SectionType } from '@jsonpages/core';
+import type { SectionComponentPropsMap } from '@/types';
+
+export const ComponentRegistry: {
+  [K in SectionType]: React.FC<SectionComponentPropsMap[K]>;
+} = {
+  'header': Header,
+  'footer': Footer,
+  'hero': Hero,
+  'feature-grid': FeatureGrid,
+  'code-block': CodeBlock,
+  'problem-statement': ProblemStatement,
+  'pillars-grid': PillarsGrid,
+  'arch-layers': ArchLayers,
+  'product-triad': ProductTriad,
+  'pa-section': PaSection,
+  'philosophy': Philosophy,
+  'cta-banner': CtaBanner,
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/lib/IconResolver.tsx..."
@@ -3016,146 +3016,146 @@ export const Icon: React.FC<IconProps> = ({ name, size = 20, className }) => {
 END_OF_FILE_CONTENT
 echo "Creating src/lib/addSectionConfig.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/addSectionConfig.ts"
-/**
- * Add-section config for the ICE admin (tenant-alpha).
- * Provides default data and labels for each addable section type.
- * Core remains agnostic; this file is tenant-specific.
- */
-import type { AddSectionConfig } from '@jsonpages/core';
-
-const addableSectionTypes = [
-  'hero',
-  'feature-grid',
-  'code-block',
-  'problem-statement',
-  'pillars-grid',
-  'arch-layers',
-  'product-triad',
-  'pa-section',
-  'philosophy',
-  'cta-banner',
-] as const;
-
-const sectionTypeLabels: Record<string, string> = {
-  'hero': 'Hero',
-  'feature-grid': 'Feature Grid',
-  'code-block': 'Code Block',
-  'problem-statement': 'Problem Statement',
-  'pillars-grid': 'Pillars Grid',
-  'arch-layers': 'Architecture Layers',
-  'product-triad': 'Product Triad',
-  'pa-section': 'PA Section',
-  'philosophy': 'Philosophy',
-  'cta-banner': 'CTA Banner',
-};
-
-function getDefaultSectionData(sectionType: string): Record<string, unknown> {
-  switch (sectionType) {
-    case 'hero':
-      return { title: 'New Hero', description: '' };
-    case 'feature-grid':
-      return { sectionTitle: 'Features', cards: [] };
-    case 'code-block':
-      return { lines: [] };
-    case 'problem-statement':
-      return { title: 'Problem Statement', siloGroups: [], paragraphs: [] };
-    case 'pillars-grid':
-      return { title: 'Pillars', pillars: [] };
-    case 'arch-layers':
-      return { title: 'Architecture', layers: [] };
-    case 'product-triad':
-      return { title: 'Products', products: [] };
-    case 'pa-section':
-      return { title: 'Section', subtitle: 'Subtitle', paragraphs: [{ text: '' }] };
-    case 'philosophy':
-      return { title: 'Philosophy', quote: 'Your quote here.' };
-    case 'cta-banner':
-      return { title: 'Call to Action', description: '' };
-    default:
-      return {};
-  }
-}
-
-export const addSectionConfig: AddSectionConfig = {
-  addableSectionTypes: [...addableSectionTypes],
-  sectionTypeLabels,
-  getDefaultSectionData,
-};
+/**
+ * Add-section config for the ICE admin (tenant-alpha).
+ * Provides default data and labels for each addable section type.
+ * Core remains agnostic; this file is tenant-specific.
+ */
+import type { AddSectionConfig } from '@jsonpages/core';
+
+const addableSectionTypes = [
+  'hero',
+  'feature-grid',
+  'code-block',
+  'problem-statement',
+  'pillars-grid',
+  'arch-layers',
+  'product-triad',
+  'pa-section',
+  'philosophy',
+  'cta-banner',
+] as const;
+
+const sectionTypeLabels: Record<string, string> = {
+  'hero': 'Hero',
+  'feature-grid': 'Feature Grid',
+  'code-block': 'Code Block',
+  'problem-statement': 'Problem Statement',
+  'pillars-grid': 'Pillars Grid',
+  'arch-layers': 'Architecture Layers',
+  'product-triad': 'Product Triad',
+  'pa-section': 'PA Section',
+  'philosophy': 'Philosophy',
+  'cta-banner': 'CTA Banner',
+};
+
+function getDefaultSectionData(sectionType: string): Record<string, unknown> {
+  switch (sectionType) {
+    case 'hero':
+      return { title: 'New Hero', description: '' };
+    case 'feature-grid':
+      return { sectionTitle: 'Features', cards: [] };
+    case 'code-block':
+      return { lines: [] };
+    case 'problem-statement':
+      return { title: 'Problem Statement', siloGroups: [], paragraphs: [] };
+    case 'pillars-grid':
+      return { title: 'Pillars', pillars: [] };
+    case 'arch-layers':
+      return { title: 'Architecture', layers: [] };
+    case 'product-triad':
+      return { title: 'Products', products: [] };
+    case 'pa-section':
+      return { title: 'Section', subtitle: 'Subtitle', paragraphs: [{ text: '' }] };
+    case 'philosophy':
+      return { title: 'Philosophy', quote: 'Your quote here.' };
+    case 'cta-banner':
+      return { title: 'Call to Action', description: '' };
+    default:
+      return {};
+  }
+}
+
+export const addSectionConfig: AddSectionConfig = {
+  addableSectionTypes: [...addableSectionTypes],
+  sectionTypeLabels,
+  getDefaultSectionData,
+};
 
 END_OF_FILE_CONTENT
 echo "Creating src/lib/base-schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/base-schemas.ts"
-import { z } from 'zod';
-
-/**
- * Base schemas shared by section capsules (CIP governance).
- * Capsules extend these for consistent anchorId, array items, and settings.
- */
-export const BaseSectionData = z.object({
-  anchorId: z.string().optional().describe('ui:text'),
-});
-
-export const BaseArrayItem = z.object({
-  id: z.string().optional(),
-});
-
-export const BaseSectionSettingsSchema = z.object({
-  paddingTop: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
-  paddingBottom: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
-  theme: z.enum(['dark', 'light', 'accent']).default('dark').describe('ui:select'),
-  container: z.enum(['boxed', 'fluid']).default('boxed').describe('ui:select'),
-});
-
-export const CtaSchema = z.object({
-  id: z.string().optional(),
-  label: z.string().describe('ui:text'),
-  href: z.string().describe('ui:text'),
-  variant: z.enum(['primary', 'secondary']).default('primary').describe('ui:select'),
-});
+import { z } from 'zod';
+
+/**
+ * Base schemas shared by section capsules (CIP governance).
+ * Capsules extend these for consistent anchorId, array items, and settings.
+ */
+export const BaseSectionData = z.object({
+  anchorId: z.string().optional().describe('ui:text'),
+});
+
+export const BaseArrayItem = z.object({
+  id: z.string().optional(),
+});
+
+export const BaseSectionSettingsSchema = z.object({
+  paddingTop: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
+  paddingBottom: z.enum(['none', 'sm', 'md', 'lg', 'xl', '2xl']).default('md').describe('ui:select'),
+  theme: z.enum(['dark', 'light', 'accent']).default('dark').describe('ui:select'),
+  container: z.enum(['boxed', 'fluid']).default('boxed').describe('ui:select'),
+});
+
+export const CtaSchema = z.object({
+  id: z.string().optional(),
+  label: z.string().describe('ui:text'),
+  href: z.string().describe('ui:text'),
+  variant: z.enum(['primary', 'secondary']).default('primary').describe('ui:select'),
+});
 
 END_OF_FILE_CONTENT
 echo "Creating src/lib/schemas.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/lib/schemas.ts"
-/**
- * SECTION_SCHEMAS registry — SSOT for FormFactory.
- * Re-exports base schemas and aggregates all section schemas from TBP capsules.
- */
-export {
-  BaseSectionData,
-  BaseArrayItem,
-  BaseSectionSettingsSchema,
-  CtaSchema,
-} from './base-schemas';
-
-import { HeaderSchema } from '@/components/header';
-import { FooterSchema } from '@/components/footer';
-import { HeroSchema } from '@/components/hero';
-import { FeatureGridSchema } from '@/components/feature-grid';
-import { CodeBlockSchema } from '@/components/code-block';
-import { ProblemStatementSchema } from '@/components/problem-statement';
-import { PillarsGridSchema } from '@/components/pillars-grid';
-import { ArchLayersSchema } from '@/components/arch-layers';
-import { ProductTriadSchema } from '@/components/product-triad';
-import { PaSectionSchema } from '@/components/pa-section';
-import { PhilosophySchema } from '@/components/philosophy';
-import { CtaBannerSchema } from '@/components/cta-banner';
-
-export const SECTION_SCHEMAS = {
-  'header': HeaderSchema,
-  'footer': FooterSchema,
-  'hero': HeroSchema,
-  'feature-grid': FeatureGridSchema,
-  'code-block': CodeBlockSchema,
-  'problem-statement': ProblemStatementSchema,
-  'pillars-grid': PillarsGridSchema,
-  'arch-layers': ArchLayersSchema,
-  'product-triad': ProductTriadSchema,
-  'pa-section': PaSectionSchema,
-  'philosophy': PhilosophySchema,
-  'cta-banner': CtaBannerSchema,
-} as const;
-
-export type SectionType = keyof typeof SECTION_SCHEMAS;
+/**
+ * SECTION_SCHEMAS registry — SSOT for FormFactory.
+ * Re-exports base schemas and aggregates all section schemas from TBP capsules.
+ */
+export {
+  BaseSectionData,
+  BaseArrayItem,
+  BaseSectionSettingsSchema,
+  CtaSchema,
+} from './base-schemas';
+
+import { HeaderSchema } from '@/components/header';
+import { FooterSchema } from '@/components/footer';
+import { HeroSchema } from '@/components/hero';
+import { FeatureGridSchema } from '@/components/feature-grid';
+import { CodeBlockSchema } from '@/components/code-block';
+import { ProblemStatementSchema } from '@/components/problem-statement';
+import { PillarsGridSchema } from '@/components/pillars-grid';
+import { ArchLayersSchema } from '@/components/arch-layers';
+import { ProductTriadSchema } from '@/components/product-triad';
+import { PaSectionSchema } from '@/components/pa-section';
+import { PhilosophySchema } from '@/components/philosophy';
+import { CtaBannerSchema } from '@/components/cta-banner';
+
+export const SECTION_SCHEMAS = {
+  'header': HeaderSchema,
+  'footer': FooterSchema,
+  'hero': HeroSchema,
+  'feature-grid': FeatureGridSchema,
+  'code-block': CodeBlockSchema,
+  'problem-statement': ProblemStatementSchema,
+  'pillars-grid': PillarsGridSchema,
+  'arch-layers': ArchLayersSchema,
+  'product-triad': ProductTriadSchema,
+  'pa-section': PaSectionSchema,
+  'philosophy': PhilosophySchema,
+  'cta-banner': CtaBannerSchema,
+} as const;
+
+export type SectionType = keyof typeof SECTION_SCHEMAS;
 
 END_OF_FILE_CONTENT
 echo "Creating src/lib/utils.ts..."
@@ -3189,68 +3189,68 @@ END_OF_FILE_CONTENT
 # SKIP: src/registry-types.ts è un file binario e non può essere convertito in testo.
 echo "Creating src/types.ts..."
 cat << 'END_OF_FILE_CONTENT' > "src/types.ts"
-import type { MenuItem } from '@jsonpages/core';
-import type { HeaderData, HeaderSettings } from '@/components/header';
-import type { FooterData, FooterSettings } from '@/components/footer';
-import type { HeroData, HeroSettings } from '@/components/hero';
-import type { FeatureGridData, FeatureGridSettings } from '@/components/feature-grid';
-import type { CodeBlockData, CodeBlockSettings } from '@/components/code-block';
-import type { ProblemStatementData, ProblemStatementSettings } from '@/components/problem-statement';
-import type { PillarsGridData, PillarsGridSettings } from '@/components/pillars-grid';
-import type { ArchLayersData, ArchLayersSettings } from '@/components/arch-layers';
-import type { ProductTriadData, ProductTriadSettings } from '@/components/product-triad';
-import type { PaSectionData, PaSectionSettings } from '@/components/pa-section';
-import type { PhilosophyData, PhilosophySettings } from '@/components/philosophy';
-import type { CtaBannerData, CtaBannerSettings } from '@/components/cta-banner';
-
-export type SectionComponentPropsMap = {
-  'header': { data: HeaderData; settings?: HeaderSettings; menu: MenuItem[] };
-  'footer': { data: FooterData; settings?: FooterSettings };
-  'hero': { data: HeroData; settings?: HeroSettings };
-  'feature-grid': { data: FeatureGridData; settings?: FeatureGridSettings };
-  'code-block': { data: CodeBlockData; settings?: CodeBlockSettings };
-  'problem-statement': { data: ProblemStatementData; settings?: ProblemStatementSettings };
-  'pillars-grid': { data: PillarsGridData; settings?: PillarsGridSettings };
-  'arch-layers': { data: ArchLayersData; settings?: ArchLayersSettings };
-  'product-triad': { data: ProductTriadData; settings?: ProductTriadSettings };
-  'pa-section': { data: PaSectionData; settings?: PaSectionSettings };
-  'philosophy': { data: PhilosophyData; settings?: PhilosophySettings };
-  'cta-banner': { data: CtaBannerData; settings?: CtaBannerSettings };
-};
-
-declare module '@jsonpages/core' {
-  export interface SectionDataRegistry {
-    'header': HeaderData;
-    'footer': FooterData;
-    'hero': HeroData;
-    'feature-grid': FeatureGridData;
-    'code-block': CodeBlockData;
-    'problem-statement': ProblemStatementData;
-    'pillars-grid': PillarsGridData;
-    'arch-layers': ArchLayersData;
-    'product-triad': ProductTriadData;
-    'pa-section': PaSectionData;
-    'philosophy': PhilosophyData;
-    'cta-banner': CtaBannerData;
-  }
-
-  export interface SectionSettingsRegistry {
-    'header': HeaderSettings;
-    'footer': FooterSettings;
-    'hero': HeroSettings;
-    'feature-grid': FeatureGridSettings;
-    'code-block': CodeBlockSettings;
-    'problem-statement': ProblemStatementSettings;
-    'pillars-grid': PillarsGridSettings;
-    'arch-layers': ArchLayersSettings;
-    'product-triad': ProductTriadSettings;
-    'pa-section': PaSectionSettings;
-    'philosophy': PhilosophySettings;
-    'cta-banner': CtaBannerSettings;
-  }
-}
-
-export * from '@jsonpages/core';
+import type { MenuItem } from '@jsonpages/core';
+import type { HeaderData, HeaderSettings } from '@/components/header';
+import type { FooterData, FooterSettings } from '@/components/footer';
+import type { HeroData, HeroSettings } from '@/components/hero';
+import type { FeatureGridData, FeatureGridSettings } from '@/components/feature-grid';
+import type { CodeBlockData, CodeBlockSettings } from '@/components/code-block';
+import type { ProblemStatementData, ProblemStatementSettings } from '@/components/problem-statement';
+import type { PillarsGridData, PillarsGridSettings } from '@/components/pillars-grid';
+import type { ArchLayersData, ArchLayersSettings } from '@/components/arch-layers';
+import type { ProductTriadData, ProductTriadSettings } from '@/components/product-triad';
+import type { PaSectionData, PaSectionSettings } from '@/components/pa-section';
+import type { PhilosophyData, PhilosophySettings } from '@/components/philosophy';
+import type { CtaBannerData, CtaBannerSettings } from '@/components/cta-banner';
+
+export type SectionComponentPropsMap = {
+  'header': { data: HeaderData; settings?: HeaderSettings; menu: MenuItem[] };
+  'footer': { data: FooterData; settings?: FooterSettings };
+  'hero': { data: HeroData; settings?: HeroSettings };
+  'feature-grid': { data: FeatureGridData; settings?: FeatureGridSettings };
+  'code-block': { data: CodeBlockData; settings?: CodeBlockSettings };
+  'problem-statement': { data: ProblemStatementData; settings?: ProblemStatementSettings };
+  'pillars-grid': { data: PillarsGridData; settings?: PillarsGridSettings };
+  'arch-layers': { data: ArchLayersData; settings?: ArchLayersSettings };
+  'product-triad': { data: ProductTriadData; settings?: ProductTriadSettings };
+  'pa-section': { data: PaSectionData; settings?: PaSectionSettings };
+  'philosophy': { data: PhilosophyData; settings?: PhilosophySettings };
+  'cta-banner': { data: CtaBannerData; settings?: CtaBannerSettings };
+};
+
+declare module '@jsonpages/core' {
+  export interface SectionDataRegistry {
+    'header': HeaderData;
+    'footer': FooterData;
+    'hero': HeroData;
+    'feature-grid': FeatureGridData;
+    'code-block': CodeBlockData;
+    'problem-statement': ProblemStatementData;
+    'pillars-grid': PillarsGridData;
+    'arch-layers': ArchLayersData;
+    'product-triad': ProductTriadData;
+    'pa-section': PaSectionData;
+    'philosophy': PhilosophyData;
+    'cta-banner': CtaBannerData;
+  }
+
+  export interface SectionSettingsRegistry {
+    'header': HeaderSettings;
+    'footer': FooterSettings;
+    'hero': HeroSettings;
+    'feature-grid': FeatureGridSettings;
+    'code-block': CodeBlockSettings;
+    'problem-statement': ProblemStatementSettings;
+    'pillars-grid': PillarsGridSettings;
+    'arch-layers': ArchLayersSettings;
+    'product-triad': ProductTriadSettings;
+    'pa-section': PaSectionSettings;
+    'philosophy': PhilosophySettings;
+    'cta-banner': CtaBannerSettings;
+  }
+}
+
+export * from '@jsonpages/core';
 
 END_OF_FILE_CONTENT
 echo "Creating src/vite-env.d.ts..."