@electroplix/components 0.4.1 → 0.5.0-alpha.11

package/metadata/content.json

@@ -0,0 +1,1152 @@
+{
+  "$schema": "electroplix-component-metadata-v1",
+  "category": "content",
+  "label": "Content",
+  "description": "Text content components for rich text, headings, quotes, callouts, and markdown rendering",
+  "themeKey": "content",
+  "icon": "type",
+  "sortOrder": 5,
+  "components": [
+    {
+      "id": "content.BlockquoteTestimonial",
+      "name": "BlockquoteTestimonial",
+      "description": "Styled testimonial/quote block with author attribution, role, and optional avatar. Perfect for social proof sections.",
+      "whenToUse": "Use to highlight customer testimonials, expert quotes, or endorsements. Ideal for landing pages, marketing sections, and ecommerce product pages.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType",
+          "required": false,
+          "default": "\"blockquote\"",
+          "description": "HTML element or component to render as"
+        },
+        {
+          "name": "quote",
+          "type": "string",
+          "required": false,
+          "default": "\"This product changed everything for our team.\"",
+          "description": "The testimonial or quote text"
+        },
+        {
+          "name": "author",
+          "type": "string",
+          "required": false,
+          "default": "\"Jane Cooper\"",
+          "description": "Name of the person being quoted"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "required": false,
+          "default": "\"CEO at Acme Corp\"",
+          "description": "Role or title of the quoted person"
+        },
+        {
+          "name": "avatarUrl",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "URL to the author's avatar image"
+        },
+        {
+          "name": "quoteSize",
+          "type": "number",
+          "required": false,
+          "default": "18",
+          "description": "Font size for the quote text in pixels"
+        },
+        {
+          "name": "authorSize",
+          "type": "number",
+          "required": false,
+          "default": "14",
+          "description": "Font size for the author name in pixels"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the component"
+        },
+        {
+          "name": "px",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Horizontal padding"
+        },
+        {
+          "name": "py",
+          "type": "number",
+          "required": false,
+          "default": "32",
+          "description": "Vertical padding"
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Border radius"
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Gap between quote and attribution"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override for decorative elements"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "default": null,
+          "description": "Custom inline styles"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Custom CSS class"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder",
+        "maxW",
+        "px",
+        "py",
+        "gap"
+      ],
+      "aiHints": {
+        "pageTypes": ["landing", "marketing", "ecommerce"],
+        "placement": "body",
+        "priority": 7,
+        "sequenceOrder": 6,
+        "pairsWellWith": ["marketing.TestimonialsCarousel"],
+        "maxPerPage": 3,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "content.CalloutBox",
+      "name": "CalloutBox",
+      "description": "Alert/callout box with semantic variants for info, success, warning, and danger messages. Supports dismissible behavior.",
+      "whenToUse": "Use to draw attention to important information, tips, warnings, or errors. Ideal for documentation, blog posts, and any page needing contextual alerts.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType",
+          "required": false,
+          "default": "\"div\"",
+          "description": "HTML element or component to render as"
+        },
+        {
+          "name": "variant",
+          "type": "\"info\" | \"success\" | \"warning\" | \"danger\"",
+          "required": false,
+          "default": "\"info\"",
+          "description": "Semantic variant controlling color scheme"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": "\"Note\"",
+          "description": "Title text displayed at the top of the callout"
+        },
+        {
+          "name": "message",
+          "type": "string",
+          "required": false,
+          "default": "\"This is an important message.\"",
+          "description": "Body message of the callout"
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "default": null,
+          "description": "Custom icon element to display"
+        },
+        {
+          "name": "titleSize",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Font size for the title in pixels"
+        },
+        {
+          "name": "messageSize",
+          "type": "number",
+          "required": false,
+          "default": "14",
+          "description": "Font size for the message in pixels"
+        },
+        {
+          "name": "border",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to show a border"
+        },
+        {
+          "name": "dismissible",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the callout can be dismissed"
+        },
+        {
+          "name": "onDismiss",
+          "type": "() => void",
+          "required": false,
+          "default": null,
+          "description": "Callback when the callout is dismissed"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the component"
+        },
+        {
+          "name": "px",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": "Horizontal padding"
+        },
+        {
+          "name": "py",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": "Vertical padding"
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": "Border radius"
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Gap between icon, title, and message"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "default": null,
+          "description": "Custom inline styles"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Custom CSS class"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder",
+        "maxW",
+        "px",
+        "py",
+        "gap"
+      ],
+      "aiHints": {
+        "pageTypes": ["documentation", "blog", "any"],
+        "placement": "body",
+        "priority": 6,
+        "sequenceOrder": 5,
+        "pairsWellWith": [
+          "content.ParagraphBlock",
+          "content.RichMarkdown",
+          "content.HeadingSection"
+        ],
+        "maxPerPage": 5,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "content.HeadingSection",
+      "name": "HeadingSection",
+      "description": "Section heading with optional eyebrow text, title, subtitle, and decorative underline accent. Versatile section introducer.",
+      "whenToUse": "Use to introduce any content section on a page. Works on all page types as a universal section header with eyebrow, title, and subtitle.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType",
+          "required": false,
+          "default": "\"header\"",
+          "description": "HTML element or component to render as"
+        },
+        {
+          "name": "eyebrow",
+          "type": "string",
+          "required": false,
+          "default": "\"Featured\"",
+          "description": "Small text displayed above the title"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": "\"Section Title\"",
+          "description": "Main heading text"
+        },
+        {
+          "name": "subtitle",
+          "type": "string",
+          "required": false,
+          "default": "\"A brief description of this section.\"",
+          "description": "Supporting text below the title"
+        },
+        {
+          "name": "align",
+          "type": "\"left\" | \"center\" | \"right\"",
+          "required": false,
+          "default": "\"left\"",
+          "description": "Text alignment"
+        },
+        {
+          "name": "eyebrowSize",
+          "type": "number",
+          "required": false,
+          "default": "13",
+          "description": "Font size for the eyebrow text in pixels"
+        },
+        {
+          "name": "titleSize",
+          "type": "number",
+          "required": false,
+          "default": "36",
+          "description": "Font size for the title in pixels"
+        },
+        {
+          "name": "subtitleSize",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Font size for the subtitle in pixels"
+        },
+        {
+          "name": "spacing",
+          "type": "number",
+          "required": false,
+          "default": "12",
+          "description": "Spacing between eyebrow, title, and subtitle in pixels"
+        },
+        {
+          "name": "showDecoration",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether to show the decorative underline accent"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color for the decorative underline"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the component"
+        },
+        {
+          "name": "px",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Horizontal padding"
+        },
+        {
+          "name": "py",
+          "type": "number",
+          "required": false,
+          "default": "32",
+          "description": "Vertical padding"
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Border radius"
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Gap between elements"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "default": null,
+          "description": "Custom inline styles"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Custom CSS class"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder",
+        "maxW",
+        "px",
+        "py",
+        "gap"
+      ],
+      "aiHints": {
+        "pageTypes": [
+          "landing",
+          "marketing",
+          "dashboard",
+          "blog",
+          "ecommerce",
+          "portfolio",
+          "saas",
+          "documentation",
+          "any"
+        ],
+        "placement": "body",
+        "priority": 8,
+        "sequenceOrder": 3,
+        "pairsWellWith": [
+          "content.ParagraphBlock",
+          "content.RichMarkdown",
+          "content.BlockquoteTestimonial",
+          "content.CalloutBox",
+          "content.InlineCodeText",
+          "hero.StaticHero",
+          "marketing.TestimonialsCarousel",
+          "navigation.PrimaryNav"
+        ],
+        "maxPerPage": 10,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "content.InlineCodeText",
+      "name": "InlineCodeText",
+      "description": "Text block with inline code highlighting and optional copy-to-clipboard functionality. Renders code spans with distinct styling.",
+      "whenToUse": "Use when displaying text that contains inline code references, technical terms, or CLI commands. Ideal for documentation and technical blog posts.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType",
+          "required": false,
+          "default": "\"div\"",
+          "description": "HTML element or component to render as"
+        },
+        {
+          "name": "text",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "Text content with inline code marked by backticks"
+        },
+        {
+          "name": "codeBg",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Background color for inline code spans"
+        },
+        {
+          "name": "codeColor",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Text color for inline code spans"
+        },
+        {
+          "name": "codePx",
+          "type": "string",
+          "required": false,
+          "default": "\"4px 8px\"",
+          "description": "Padding for inline code spans"
+        },
+        {
+          "name": "codeRadius",
+          "type": "number",
+          "required": false,
+          "default": "6",
+          "description": "Border radius for inline code spans"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Base font size in pixels"
+        },
+        {
+          "name": "copyable",
+          "type": "boolean",
+          "required": false,
+          "default": "true",
+          "description": "Whether code spans are copyable on click"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the component"
+        },
+        {
+          "name": "px",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Horizontal padding"
+        },
+        {
+          "name": "py",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Vertical padding"
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Border radius"
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Gap between elements"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "default": null,
+          "description": "Custom inline styles"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Custom CSS class"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder",
+        "maxW",
+        "px",
+        "py",
+        "gap"
+      ],
+      "aiHints": {
+        "pageTypes": ["documentation", "blog"],
+        "placement": "body",
+        "priority": 4,
+        "sequenceOrder": 5,
+        "pairsWellWith": [
+          "content.ParagraphBlock",
+          "content.RichMarkdown",
+          "content.HeadingSection"
+        ],
+        "maxPerPage": 10,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "content.ParagraphBlock",
+      "name": "ParagraphBlock",
+      "description": "Multi-paragraph text block with configurable typography, optional drop cap, title, and alignment controls.",
+      "whenToUse": "Use for body text sections on blog posts, landing pages, about pages, or any page requiring multi-paragraph content. Supports drop cap for editorial flair.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType",
+          "required": false,
+          "default": "\"div\"",
+          "description": "HTML element or component to render as"
+        },
+        {
+          "name": "paragraphs",
+          "type": "string[]",
+          "required": true,
+          "default": null,
+          "description": "Array of paragraph strings to render"
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Base font size in pixels"
+        },
+        {
+          "name": "leading",
+          "type": "number",
+          "required": false,
+          "default": "1.75",
+          "description": "Line height multiplier"
+        },
+        {
+          "name": "align",
+          "type": "\"left\" | \"center\" | \"right\"",
+          "required": false,
+          "default": "\"left\"",
+          "description": "Text alignment for all paragraphs"
+        },
+        {
+          "name": "showDropCap",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Show a decorative drop cap on the first paragraph"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Optional title displayed above the paragraphs"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color for drop cap and title"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the component"
+        },
+        {
+          "name": "px",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Horizontal padding"
+        },
+        {
+          "name": "py",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Vertical padding"
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Border radius"
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Gap between paragraphs"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "default": null,
+          "description": "Custom inline styles"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Custom CSS class"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder",
+        "maxW",
+        "px",
+        "py",
+        "gap"
+      ],
+      "aiHints": {
+        "pageTypes": [
+          "blog",
+          "landing",
+          "marketing",
+          "education",
+          "nonprofit",
+          "agency",
+          "restaurant",
+          "fitness",
+          "health"
+        ],
+        "placement": "body",
+        "priority": 7,
+        "sequenceOrder": 5,
+        "pairsWellWith": [
+          "content.HeadingSection",
+          "content.BlockquoteTestimonial",
+          "content.CalloutBox",
+          "content.InlineCodeText"
+        ],
+        "maxPerPage": 10,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "content.RichMarkdown",
+      "name": "RichMarkdown",
+      "description": "Render markdown content as styled HTML with full typography support. Handles headings, lists, code blocks, links, and more.",
+      "whenToUse": "Use when content is authored in markdown format. Ideal for blog posts, documentation pages, README displays, and any CMS-driven content.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "as",
+          "type": "ElementType",
+          "required": false,
+          "default": "\"article\"",
+          "description": "HTML element or component to render as"
+        },
+        {
+          "name": "markdown",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "Raw markdown string to render as styled HTML"
+        },
+        {
+          "name": "baseSize",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Base font size in pixels for body text"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Optional title displayed above the rendered markdown"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color for links and highlights"
+        },
+        {
+          "name": "maxW",
+          "type": "number",
+          "required": false,
+          "default": "900",
+          "description": "Maximum width of the component"
+        },
+        {
+          "name": "px",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Horizontal padding"
+        },
+        {
+          "name": "py",
+          "type": "number",
+          "required": false,
+          "default": "24",
+          "description": "Vertical padding"
+        },
+        {
+          "name": "radius",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Border radius"
+        },
+        {
+          "name": "gap",
+          "type": "number",
+          "required": false,
+          "default": "16",
+          "description": "Gap between elements"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "default": null,
+          "description": "Custom inline styles"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Custom CSS class"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder",
+        "maxW",
+        "px",
+        "py",
+        "gap"
+      ],
+      "aiHints": {
+        "pageTypes": ["blog", "documentation"],
+        "placement": "body",
+        "priority": 7,
+        "sequenceOrder": 5,
+        "pairsWellWith": [
+          "content.HeadingSection",
+          "content.CalloutBox",
+          "content.InlineCodeText",
+          "content.ParagraphBlock"
+        ],
+        "maxPerPage": 5,
+        "isContainer": false
+      }
+    },
+    {
+      "id": "content.TeamGrid",
+      "name": "TeamGrid",
+      "description": "Responsive grid of team member cards displaying avatar, name, role, bio, and social links. Supports configurable columns.",
+      "whenToUse": "Use to showcase team members, staff profiles, instructor bios, speaker lineups, therapist profiles, partner headshots, or any people-focused section.",
+      "isShell": false,
+      "props": [
+        {
+          "name": "members",
+          "type": "TeamMember[]",
+          "required": true,
+          "default": null,
+          "description": "Array of team members: {id, name, role?, image?, bio?, socials?: {icon, href}[]}"
+        },
+        {
+          "name": "columns",
+          "type": "number",
+          "required": false,
+          "default": "3",
+          "description": "Number of grid columns"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Section heading above the grid"
+        },
+        {
+          "name": "subtitle",
+          "type": "string",
+          "required": false,
+          "default": null,
+          "description": "Section subheading"
+        },
+        {
+          "name": "bgColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Background color override"
+        },
+        {
+          "name": "textColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Text color override"
+        },
+        {
+          "name": "accentColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Accent color override"
+        },
+        {
+          "name": "borderColor",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Border color override"
+        },
+        {
+          "name": "fontFamily",
+          "type": "string",
+          "required": false,
+          "default": "theme",
+          "description": "Font family override"
+        }
+      ],
+      "themeTokens": [
+        "bgColor",
+        "textColor",
+        "accentColor",
+        "borderColor",
+        "fontFamily",
+        "radius",
+        "spacing",
+        "cardBg",
+        "cardRadius",
+        "cardBorder"
+      ],
+      "aiHints": {
+        "pageTypes": [
+          "landing",
+          "marketing",
+          "agency",
+          "education",
+          "fitness",
+          "restaurant",
+          "health",
+          "event",
+          "community",
+          "nonprofit",
+          "realestate",
+          "about"
+        ],
+        "placement": "body",
+        "priority": 7,
+        "sequenceOrder": 6,
+        "pairsWellWith": ["content.HeadingSection", "media.AvatarProfile", "social.SocialShareBar"],
+        "maxPerPage": 1,
+        "isContainer": false
+      }
+    }
+  ]
+}