From 112377932f21f8bceecc07a506b2d9b190fe5ab3 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 17 Apr 2026 21:18:37 +0000
Subject: [PATCH] Switch to version 2: added
 registry/components/InlineImageSplitTextAbout.json

---
 .../components/InlineImageSplitTextAbout.json | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 registry/components/InlineImageSplitTextAbout.json

diff --git a/registry/components/InlineImageSplitTextAbout.json b/registry/components/InlineImageSplitTextAbout.json
new file mode 100644
index 0000000..d8b6ab0
--- /dev/null
+++ b/registry/components/InlineImageSplitTextAbout.json
@@ -0,0 +1,70 @@
+{
+  "name": "InlineImageSplitTextAbout",
+  "description": "About section with dynamic heading composed of alternating text and inline image segments.",
+  "details": "Use for impactful about statements with visual branding elements. Heading is composed of an array of segments that can be text or images in any order. Images are styled with primary-button styling and alternate rotation (-rotate-12, rotate-12) for dynamic visual effect. Images are square (1.1em height) with aspect-square ratio, aligned middle with horizontal margins. Up to 2 optional CTA buttons with primary/secondary styling. Button variant controlled by ThemeProvider.",
+  "constraints": {
+    "textRules": {
+      "heading[].content": {
+        "required": "text segments require content",
+        "example": "Building the future with",
+        "minChars": 1,
+        "maxChars": 100,
+        "note": "Each text segment in the heading array"
+      }
+    },
+    "imageRules": {
+      "heading[].src": {
+        "required": "image segments require src",
+        "example": "/brand/logo.png or https://example.com/image.png",
+        "note": "Supports local paths and external URLs. External URLs are rendered with unoptimized flag."
+      },
+      "heading[].alt": {
+        "required": false,
+        "example": "Company logo",
+        "note": "Optional alt text for images. Omit or use empty string for decorative images (aria-hidden=true when empty)."
+      }
+    },
+    "headingRules": {
+      "minSegments": 1,
+      "note": "heading array can contain any number of text and image segments in any order. Images automatically alternate rotation direction (1st: -rotate-12, 2nd: rotate-12, etc.)."
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "structure": {
+        "text": "string - Button label (required)",
+        "href": "string - Link destination (optional)",
+        "onClick": "() => void - Click handler (optional)",
+        "props": "Partial<ButtonPropsForVariant> - Additional button props (optional)"
+      },
+      "note": "Button variant controlled by ThemeProvider's defaultButtonVariant. Border radius controlled by ThemeProvider's borderRadius."
+    }
+  },
+  "propsSchema": {
+    "heading": "Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>",
+    "buttons?": "Array<{ text: string, onClick?: () => void, href?: string, props?: Partial<ButtonPropsForVariant<CTAButtonVariant>> }>",
+    "buttonAnimation?": "'none' | 'opacity' | 'slide-up' | 'blur-reveal'",
+    "useInvertedBackground": "boolean",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string",
+    "containerClassName?": "string",
+    "headingClassName?": "string",
+    "imageWrapperClassName?": "string",
+    "imageClassName?": "string",
+    "buttonContainerClassName?": "string",
+    "buttonClassName?": "string",
+    "buttonTextClassName?": "string"
+  },
+  "usageExample": "// Wrap in ThemeProvider\n<ThemeProvider defaultButtonVariant=\"text-stagger\" defaultTextAnimation=\"entrance-slide\" borderRadius=\"rounded\" background=\"aurora\" cardStyle=\"glass-elevated\" primaryButtonStyle=\"gradient\" secondaryButtonStyle=\"glass\">\n  <InlineImageSplitTextAbout heading={[{ type: 'text', content: 'Building the future with' }, { type: 'image', src: '/brand/logo.png', alt: 'Company logo' }, { type: 'text', content: 'innovative solutions' }]} useInvertedBackground={false} buttons={[{ text: 'Get Started', href: '/signup' }, { text: 'Learn More', href: '/about' }]} />\n</ThemeProvider>",
+  "do": [
+    "Use for about pages",
+    "Use for company information",
+    "Requires heading[]",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}