Initial commit

registry/components/MediaAbout.json

@@ -0,0 +1,84 @@
+{
+  "name": "MediaAbout",
+  "description": "Full-width media about section with centered TextBox content overlaid on image or video.",
+  "constraints": {
+    "textRules": {
+      "title": {
+        "required": true,
+        "example": "Elevate Your Experience",
+        "minChars": 2,
+        "maxChars": 100
+      },
+      "description": {
+        "required": true,
+        "example": "Discover a new way to connect, create, and inspire with our innovative solutions.",
+        "minChars": 10,
+        "maxChars": 300
+      },
+      "tag": {
+        "required": false,
+        "example": "About Us",
+        "minChars": 2,
+        "maxChars": 30
+      }
+    },
+    "mediaRules": {
+      "imageSrc": {
+        "required": false,
+        "example": "/about-hero.jpg",
+        "note": "Either imageSrc or videoSrc should be provided. Image is recommended for static visuals."
+      },
+      "videoSrc": {
+        "required": false,
+        "example": "/about-video.mp4",
+        "note": "Either imageSrc or videoSrc should be provided. Video is recommended for motion content."
+      },
+      "imageAlt": {
+        "required": false,
+        "example": "Our team in action",
+        "note": "Alt text for image. Defaults to empty string (decorative)."
+      },
+      "videoAriaLabel": {
+        "required": false,
+        "example": "About us video",
+        "note": "ARIA label for video accessibility."
+      }
+    },
+    "buttonRules": {
+      "maxButtons": 2,
+      "minButtons": 0,
+      "note": "Buttons are part of TextBox, centered and overlaid on media. First button is primary, second is secondary. Button variant controlled by ThemeProvider's defaultButtonVariant."
+    }
+  },
+  "propsSchema": {
+    "title": "string",
+    "description": "string",
+    "tag?": "string",
+    "tagIcon?": "LucideIcon",
+    "buttons?": "Array<{text: string, onClick?: () => void, href?: string}>",
+    "imageSrc?": "string",
+    "videoSrc?": "string",
+    "imageAlt?": "string",
+    "videoAriaLabel?": "string",
+    "useInvertedBackground": "'noInvert' | 'invertDefault'",
+    "ariaLabel?": "string (default: 'About section')",
+    "className?": "string"
+  },
+  "usageExample": "<MediaAbout title=\"Elevate Your Experience\" description=\"Discover a new way to connect, create, and inspire.\" tag=\"About Us\" imageSrc=\"/about-hero.jpg\" imageAlt=\"Our team\" buttons={[{ text: 'Shop Now', href: '/shop' }]} useInvertedBackground={\"noInvert\"} />",
+  "do": [
+    "Use for landing pages",
+    "Use for feature showcases",
+    "Use for capability displays",
+    "Use for about pages",
+    "Use for company information",
+    "Use for product catalogs",
+    "Use for e-commerce",
+    "Requires buttons?[]"
+  ],
+  "dont": [],
+  "editRules": {
+    "textOnly": true,
+    "layoutLocked": true,
+    "styleLocked": true
+  }
+}