{"success":true,"data":{"category":{"slug":"features","name":"Features","description":"Collection of features components"},"blocks":[{"id":"feature-showcase","name":"Feature Showcase Carousel","title":"Feature Showcase","category":"Features","categorySlug":"features","description":"Display feature content with media in an interactive carousel format. Each slide shows feature content alongside images or videos with smooth navigation. Features mobile height equalization for consistent appearance.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306333/yxl1qem73uiamm0uj4e21zeqmihh/feature-showcase-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306334/4oh39vt4jc3u0u1oame8o3pbwkny/feature-showcase-mobile.jpg"},"componentPath":"blocks/features/feature-showcase.tsx","code":"import { imagePlaceholders, optixFlowApiKey } from \"@/lib/media\";\nimport { Pressable } from \"@opensite/ui\";\nimport { FeatureShowcase } from \"@opensite/ui/blocks/features/feature-showcase\";\nimport { Img } from \"@page-speed/img\";\n\nexport default function Demo() {\n  return (\n    <FeatureShowcase\n      items={[\n        {\n          content: (\n            <div className=\"flex flex-col gap-4 md:gap-8\">\n              <h3 className=\"text-3xl font-bold\">\n                Deploy to the Edge in Seconds\n              </h3>\n              <p className=\"text-sm\">\n                Real-time insights into performance, errors, and user behavior.\n                Custom dashboards and alerts help you stay on top of what\n                matters most.\n              </p>\n              <p className=\"text-lg\">\n                Push your code and watch it deploy to 200+ edge locations\n                worldwide. Automatic builds, tests, and zero-downtime\n                deployments make shipping to production effortless.\n              </p>\n              <div className=\"flex items-center gap-2\">\n                <Pressable asButton href=\"#\">\n                  Get Started\n                </Pressable>\n              </div>\n            </div>\n          ),\n          mediaComponent: (\n            <Img\n              src={imagePlaceholders[62]}\n              alt=\"Edge deployment\"\n              className=\"w-full rounded-lg object-cover\"\n              optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n            />\n          ),\n        },\n        {\n          content: (\n            <div className=\"flex flex-col gap-4 md:gap-8\">\n              <h3 className=\"mb-4 text-3xl font-bold\">\n                Built-in Analytics & Monitoring\n              </h3>\n              <p className=\"text-lg\">\n                Real-time insights into performance, errors, and user behavior.\n                Custom dashboards and alerts help you stay on top of what\n                matters most.\n              </p>\n            </div>\n          ),\n          mediaComponent: (\n            <Img\n              src={imagePlaceholders[84]}\n              alt=\"Analytics dashboard\"\n              className=\"w-full rounded-lg object-cover\"\n              optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n            />\n          ),\n        },\n        {\n          content: (\n            <div className=\"flex flex-col gap-4 md:gap-8\">\n              <h3 className=\"mb-4 text-3xl font-bold\">\n                Collaborate with Your Team\n              </h3>\n              <p className=\"text-lg\">\n                Preview environments for every pull request, integrated code\n                review, and team-wide visibility. Ship faster together.\n              </p>\n            </div>\n          ),\n          mediaComponent: (\n            <Img\n              src={imagePlaceholders[107]}\n              alt=\"Team collaboration\"\n              className=\"w-full rounded-lg object-cover\"\n              optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n            />\n          ),\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"items":{"type":"array","description":"Array of feature items to display in carousel","items":{"type":"object","description":"","fields":{"content":{"type":"object","description":"Content node to display (text, headings, etc.)","typeLabel":"ReactNode","required":true},"mediaComponent":{"type":"object","description":"Media node to display (image, video, etc.)","typeLabel":"ReactNode","required":true}},"typeLabel":"FeatureShowcaseItem"},"typeLabel":"FeatureShowcaseItem[]","required":true},"children":{"type":"object","description":"Optional children to render above the carousel (e.g., section title)","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the outer container","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"slideClassName":{"type":"string","description":"Additional CSS classes for each slide container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"mediaClassName":{"type":"string","description":"Additional CSS classes for the media area","required":false},"arrowClassName":{"type":"string","description":"Additional CSS classes for navigation arrows","required":false},"equalizeOnMobile":{"type":"boolean","description":"Whether to equalize slide heights on mobile","required":false},"stretchMediaOnMobile":{"type":"boolean","description":"Whether to stretch media to fill available height on mobile","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","carousel","showcase","slider","highlights","product-features","capabilities","interactive","media-gallery"],"performance":{},"importantUsageNotes":"Ensure to supply 3–5 items in the 'items' array for the showcase carousel. Each item uses a 'content' slot (React content for the text side) and a 'mediaComponent' slot (image or media element) — only use real images in 'mediaComponent'. Do not use this block if you don't have valid real images for every slide. Follow the example props closely for this block."},{"id":"feature-capabilities-grid","name":"Capabilities Feature Grid","title":"Feature Capabilities Grid","category":"Features","categorySlug":"features","description":"A dark, three-column capability grid with animated hover accents, icon badges, and optional labels. Perfect for highlighting platform capabilities, AI features, or service pillars.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290531/x5v2abpq9j7aybg3zgxylcn4zdti/feature-capabilities-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290530/ix6vpdd7n99qiorwkr3fj3i4h8jm/feature-capabilities-grid-mobile.png"},"componentPath":"blocks/features/feature-capabilities-grid.tsx","code":"import { FeatureCapabilitiesGrid } from \"@opensite/ui/blocks/features/feature-capabilities-grid\";\n\nexport default function Demo() {\n  return (\n    <FeatureCapabilitiesGrid\n      eyebrow=\"PLATFORM CAPABILITIES\"\n      heading=\"Everything You Need to Build Modern Applications\"\n      items={[\n        {\n          iconName: \"lucide/brain\",\n          title: \"AI-Powered Insights\",\n          description:\n            \"Machine learning algorithms that analyze patterns and provide actionable recommendations in real-time.\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/database\",\n          title: \"Intelligent Data Layer\",\n          description:\n            \"Distributed database architecture with automatic sharding, replication, and sub-millisecond query times.\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/lock\",\n          title: \"Zero-Trust Security\",\n          description:\n            \"End-to-end encryption with hardware security modules and SOC 2 Type II compliance.\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/activity\",\n          title: \"Real-Time Monitoring\",\n          description:\n            \"Comprehensive observability with distributed tracing, custom metrics, and intelligent alerting.\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/workflow\",\n          title: \"Automated Workflows\",\n          description:\n            \"Visual workflow builder with conditional logic, parallel processing, and custom integrations.\",\n          href: \"#\",\n        },\n        {\n          iconName: \"lucide/globe\",\n          title: \"Global Edge Network\",\n          description:\n            \"Deploy to 200+ edge locations worldwide with automatic failover and intelligent routing.\",\n          href: \"#\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridBasic\"\n      patternOpacity={0.2}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label content","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Section heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Feature items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/brain\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureCapabilitiesGridItem"},"typeLabel":"FeatureCapabilitiesGridItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","capabilities","grid","cards","icons","dark","hover","ai","platform"],"performance":{},"importantUsageNotes":"Ensure to generate 'items' in multiples of 3 (3, 6, or 9) since the layout is a 3-column grid. Follow the example props closely for this block."},{"id":"feature-split-image","name":"Feature Split Image","title":"Feature Split Image","category":"Features","categorySlug":"features","description":"Two-column feature section with text content on the left and a large image on the right. Includes badge, heading, description, feature list with icons, and CTA button. Perfect for product features, service highlights, or capability showcases.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290529/kzqhexjlkx4ejefwtg49jf2gztxs/feature-split-image-desktop.png","mobile":"https://cdn.ing/assets/i/r/290528/gu2dpxkou1fubxs32s268zcl7kwv/feature-split-image-mobile.png"},"componentPath":"blocks/features/feature-split-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureSplitImage } from \"@opensite/ui/blocks/features/feature-split-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureSplitImage\n      title=\"Build Faster, Ship Smarter\"\n      description=\"Accelerate your development workflow with our comprehensive component library. Hundreds of production-ready components built with React, TypeScript, and Tailwind CSS help you launch in days, not months.\"\n      imageSrc={imagePlaceholders[45]}\n      imageAlt=\"Development workflow visualization\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Components\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      background=\"white\"\n      spacing=\"xl\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.6}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text for accessibility","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","split-layout","two-column","image","product","capabilities","benefits","cta"],"performance":{},"importantUsageNotes":"This block requires a valid real image for 'imageSrc' — do not use this block if you don't have a real image. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"feature-split-image-reverse","name":"Feature Split Image Reverse","title":"Feature Split Image Reverse","category":"Features","categorySlug":"features","description":"Two-column feature section with a large image on the left and text content on the right. Mirror layout of Feature Split Image. Includes badge, heading, description, feature list with icons, and CTA button.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290527/c3gsff6s7qnl0tybm4zj15pzz09t/feature-split-image-reverse-desktop.png","mobile":"https://cdn.ing/assets/i/r/290526/6ux51igm2bn4svwxfl2rukjlxgke/feature-split-image-reverse-mobile.png"},"componentPath":"blocks/features/feature-split-image-reverse.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureSplitImageReverse } from \"@opensite/ui/blocks/features/feature-split-image-reverse\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureSplitImageReverse\n      title=\"Scale Without Limits\"\n      description=\"Our infrastructure grows with your business. From startups to enterprises, our platform handles millions of requests with sub-100ms response times and 99.99% uptime guaranteed.\"\n      imageSrc={imagePlaceholders[67]}\n      imageAlt=\"Scalable infrastructure visualization\"\n      actions={[\n        {\n          label: \"See Performance\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Pricing\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      background=\"gray\"\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text for accessibility","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","split-layout","two-column","image","reverse","product","capabilities","benefits"],"performance":{},"importantUsageNotes":"This block requires a valid real image for 'imageSrc' — do not use this block if you don't have a real image. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"feature-icon-grid-bordered","name":"Feature Icon Grid Bordered","title":"Feature Icon Grid Bordered","category":"Features","categorySlug":"features","description":"Four-column grid of features with icons and dashed left borders. Each feature has an icon badge, title, and description. Clean, organized layout for showcasing multiple capabilities.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290525/s5hya5bxhet1spotivn3l5hz1wec/feature-icon-grid-bordered-desktop.png","mobile":"https://cdn.ing/assets/i/r/290524/gjlymuslr8r1tw9a8jasi3hpfb1w/feature-icon-grid-bordered-mobile.png"},"componentPath":"blocks/features/feature-icon-grid-bordered.tsx","code":"import { FeatureIconGridBordered } from \"@opensite/ui/blocks/features/feature-icon-grid-bordered\";\n\nexport default function Demo() {\n  return (\n    <FeatureIconGridBordered\n      label=\"WHY CHOOSE US?\"\n      title=\"A Better Way to Build Modern Websites\"\n      features={[\n        {\n          iconName: \"lucide/timer\",\n          title: \"Lightning Performance\",\n          href: \"#\",\n          description:\n            \"Optimized for speed with sub-second page loads and instant interactions.\",\n        },\n        {\n          iconName: \"lucide/shield\",\n          title: \"Enterprise Security\",\n          href: \"#\",\n          description:\n            \"Bank-level encryption with compliance certifications and regular audits.\",\n        },\n        {\n          iconName: \"lucide/zap\",\n          title: \"Innovative Technology\",\n          href: \"#\",\n          description:\n            \"Built on cutting-edge frameworks with future-proof architecture.\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Expert Support\",\n          href: \"#\",\n          description:\n            \"24/7 assistance from experienced developers who know your codebase.\",\n        },\n      ]}\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.15}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Section label content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of items to display","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/timer\")","required":false},"title":{"type":"object","description":"Item title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Item description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureIconGridBorderedItem"},"typeLabel":"FeatureIconGridBorderedItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering items (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","grid","icons","bordered","four-column","capabilities","benefits"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 2 or 4 (2, 4, 6, or 8) since the grid is 2-column on tablet and 4-column on desktop. Each item supports an optional 'href' for linking. Follow the example props closely for this block."},{"id":"feature-checklist-image","name":"Feature Checklist Image","title":"Feature Checklist Image","category":"Features","categorySlug":"features","description":"Split layout with a large image on the left and a checklist of benefits on the right. Each benefit has a check icon, title, and description. Great for product benefits or service features.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306289/z0k0ibuf18x7jd874ak1s7fndwhu/feature-checklist-image-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306290/njvf3794uuf4neunjz4uj6tfciuf/feature-checklist-image-mobile.jpg"},"componentPath":"blocks/features/feature-checklist-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureChecklistImage } from \"@opensite/ui/blocks/features/feature-checklist-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureChecklistImage\n      title=\"Everything You Need to Succeed\"\n      description=\"Our platform provides all the tools, integrations, and support you need to build and scale your applications with confidence.\"\n      imageSrc={imagePlaceholders[58]}\n      imageAlt=\"Platform features overview\"\n      actions={[\n        {\n          label: \"Get Started\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Schedule Demo\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      checklistItems={[\n        \"Zero-config deployment to global edge network\",\n        \"Automatic SSL certificates and custom domains\",\n        \"Built-in CI/CD with GitHub, GitLab, and Bitbucket\",\n      ]}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text for accessibility","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"checklistItems":{"type":"array","description":"Array of checklist items (can be strings or FeatureChecklistItem objects)","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistItem"},"typeLabel":"string | FeatureChecklistItem[]","required":false},"benefits":{"type":"array","description":"Alias for checklistItems used by registry examples and builder payloads","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistItem"},"typeLabel":"string | FeatureChecklistItem[]","required":false},"checklistSlot":{"type":"object","description":"Custom slot for rendering checklist (overrides checklistItems array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"checklistClassName":{"type":"string","description":"Additional CSS classes for the checklist","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","checklist","image","benefits","split-layout","two-column","product"],"performance":{},"importantUsageNotes":"This block requires a valid real image for 'imageSrc' — do not use this block if you don't have a real image. Supply 3–6 succinct strings in 'checklistItems' to avoid layout overflow. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"feature-carousel-progress","name":"Feature Carousel Progress","title":"Feature Carousel Progress","category":"Features","categorySlug":"features","description":"Carousel-based feature display with progress indicator. Each slide shows a feature with image, title, and description. Includes navigation arrows and progress bar for visual feedback.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290521/x31bb9r4ufra33peu6ujjz8dhwsu/feature-carousel-progress-desktop.png","mobile":"https://cdn.ing/assets/i/r/290520/8f856nuofnq4z17qtinacz1qcrq9/feature-carousel-progress-mobile.png"},"componentPath":"blocks/features/feature-carousel-progress.tsx","code":"import { FeatureCarouselProgress } from \"@opensite/ui/blocks/features/feature-carousel-progress\";\n\nexport default function Demo() {\n  return (\n    <FeatureCarouselProgress\n      badge=\"Platform Features\"\n      title=\"Everything You Need in One Place\"\n      description=\"Our platform offers a comprehensive suite of features designed to help you build, deploy, and scale modern applications with ease and confidence.\"\n      carouselLabel=\"Explore Our Features\"\n      slides={[\n        {\n          iconName: \"lucide/code\",\n          title: \"Modern Development\",\n          description:\n            \"Built with the latest frameworks and tools, updated regularly for features and security. TypeScript, React, and Tailwind CSS come preconfigured for optimal developer experience.\",\n        },\n        {\n          iconName: \"lucide/rocket\",\n          title: \"Instant Deployment\",\n          description:\n            \"Push to production in seconds with automatic builds, tests, and deployments. No configuration needed - it just works.\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          title: \"Enterprise Security\",\n          description:\n            \"SOC 2 Type II certified with automatic SSL, DDoS protection, and regular security audits. Your data is always protected.\",\n        },\n        {\n          iconName: \"lucide/bar-chart-3\",\n          title: \"Advanced Analytics\",\n          description:\n            \"Real-time insights into performance, user behavior, and business metrics. Make data-driven decisions with confidence.\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Team Collaboration\",\n          description:\n            \"Built-in tools for code review, project management, and team communication. Keep everyone aligned and productive.\",\n        },\n      ]}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content displayed above the heading","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"carouselLabel":{"type":"object","description":"Label for the carousel section","typeLabel":"React.ReactNode","required":false},"slides":{"type":"array","description":"Array of feature slides","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/code\")","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureCarouselProgressItem"},"typeLabel":"FeatureCarouselProgressItem[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the carousel controls","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each slide card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","carousel","slider","progress","interactive","showcase","product"],"performance":{},"importantUsageNotes":"Ensure to supply 4–8 items in the 'slides' array for a well-paced carousel experience. Each slide needs an 'iconName', 'title', and 'description'. Follow the example props closely for this block."},{"id":"feature-card-grid-linked","name":"Feature Card Grid Linked","title":"Feature Card Grid Linked","category":"Features","categorySlug":"features","description":"Two-column grid of feature cards with images and clickable headings. Each card has an image, title link, and description. Perfect for blog posts, resources, or feature highlights.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306331/nxthqotoy5de3fqlh435lxk6qdjr/feature-card-grid-linked-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306332/679psayi0ekqenurfqxfp4kjojrc/feature-card-grid-linked-mobile.jpg"},"componentPath":"blocks/features/feature-card-grid-linked.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureCardGridLinked } from \"@opensite/ui/blocks/features/feature-card-grid-linked\";\n\nexport default function Demo() {\n  return (\n    <FeatureCardGridLinked\n      title=\"Explore Our Solutions\"\n      description=\"Discover tailored solutions designed to meet the unique needs of different industries and user groups. Whether you're an enterprise, developer, startup, or looking to optimize your content with AEO, we have the right tools and services for you.\"\n      pattern=\"circles\"\n      patternOpacity={0.42}\n      background=\"muted\"\n      features={[\n        {\n          id: \"enterprise\",\n          label: \"For Enterprise\",\n          heading: \"Scale with Confidence\",\n          description:\n            \"Enterprise-grade infrastructure with dedicated support, SLA guarantees, and custom integrations.\",\n          image: imagePlaceholders[68],\n          imageAlt: \"Enterprise solutions\",\n          url: \"#\",\n        },\n        {\n          id: \"developers\",\n          label: \"For Developers\",\n          heading: \"Build Faster\",\n          description:\n            \"Complete SDK, CLI tools, and comprehensive documentation to accelerate your development workflow.\",\n          image: imagePlaceholders[82],\n          imageAlt: \"Developer tools\",\n          url: \"#\",\n        },\n        {\n          id: \"startups\",\n          label: \"For Startups\",\n          heading: \"Launch Quickly\",\n          description:\n            \"Everything you need to go from idea to production in days, not months.\",\n          image: imagePlaceholders[101],\n          imageAlt: \"Startup solutions\",\n          url: \"#\",\n        },\n        {\n          id: \"marketing\",\n          label: \"AEO\",\n          heading: \"Optimize Your Content\",\n          description:\n            \"Leverage AI-driven tools to enhance your content strategy and boost engagement.\",\n          image: imagePlaceholders[33],\n          imageAlt: \"Startup solutions\",\n          url: \"#\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Section title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature cards","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier","required":false},"heading":{"type":"object","description":"Card heading content","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"Label content displayed above heading","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description content","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides image)","typeLabel":"React.ReactNode","required":false},"url":{"type":"string","description":"Link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false}},"typeLabel":"FeatureCardGridLinkedItem"},"typeLabel":"FeatureCardGridLinkedItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"titleWrapperClassName":{"type":"string","description":"Additional CSS classes for the title wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","grid","cards","linked","two-column","images","resources"],"performance":{},"importantUsageNotes":"Ensure to only generate multiples of 2 for the 'features' prop (2, 4, 6, 8, etc), since the features element is a 2 column layout. Follow the example props closely for this block."},{"id":"feature-numbered-cards","name":"Feature Numbered Cards","title":"Feature Numbered Cards","category":"Features","categorySlug":"features","description":"Stacked feature cards with numbered badges and images. Each card has a number badge in the top-left corner, image, title, and description. Great for step-by-step processes or ranked features.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290517/if8po7o9o0xgneulb0w6hjyyyqq0/feature-numbered-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290516/mebx1ikw5rb0caj637wu057x83fz/feature-numbered-cards-mobile.png"},"componentPath":"blocks/features/feature-numbered-cards.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureNumberedCards } from \"@opensite/ui/blocks/features/feature-numbered-cards\";\n\nexport default function Demo() {\n  return (\n    <FeatureNumberedCards\n      features={[\n        {\n          title: \"Secure Payment Processing\",\n          description:\n            \"Accept payments globally with enterprise-grade security and compliance built in from day one.\",\n          image: imagePlaceholders[28],\n          imageAlt: \"Secure payment processing interface\",\n          checklistItems: [\n            \"PCI DSS Level 1 certified infrastructure\",\n            \"End-to-end encryption for all transactions\",\n            \"Real-time fraud detection and prevention\",\n            \"Support for 135+ currencies worldwide\",\n          ],\n        },\n        {\n          title: \"Instant Notifications\",\n          description:\n            \"Keep your team and customers informed with intelligent notification systems across all channels.\",\n          image: imagePlaceholders[52],\n          imageAlt: \"Notification dashboard\",\n          checklistItems: [\n            \"Multi-channel delivery (email, SMS, push)\",\n            \"Customizable templates and branding\",\n            \"Delivery tracking and analytics\",\n            \"Smart throttling and user preferences\",\n          ],\n        },\n        {\n          title: \"Advanced Reporting\",\n          description:\n            \"Transform raw data into actionable insights with powerful analytics and customizable reports.\",\n          image: imagePlaceholders[89],\n          imageAlt: \"Analytics dashboard\",\n          checklistItems: [\n            \"Real-time data visualization\",\n            \"Custom report builder with drag-and-drop\",\n            \"Scheduled report delivery\",\n            \"Export to CSV, PDF, or Excel\",\n          ],\n        },\n      ]}\n      pattern=\"grid1\"\n      patternOpacity={0.08}\n      background=\"secondary\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of numbered feature cards","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides image)","typeLabel":"React.ReactNode","required":false},"checklistItems":{"type":"array","description":"Checklist items (can be strings or FeatureNumberedCardsChecklistItem objects)","items":{"type":"object","description":"","typeLabel":"string | FeatureNumberedCardsChecklistItem"},"typeLabel":"string | FeatureNumberedCardsChecklistItem[]","required":false},"checklistSlot":{"type":"object","description":"Custom slot for checklist (overrides checklistItems)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for the image wrapper","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false}},"typeLabel":"FeatureNumberedCardsItem"},"typeLabel":"FeatureNumberedCardsItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"cardsWrapperClassName":{"type":"string","description":"Additional CSS classes for the cards wrapper","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"checklistClassName":{"type":"string","description":"Additional CSS classes for the checklist","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the number badge","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","numbered","cards","steps","process","images","ranked"],"performance":{},"importantUsageNotes":"Ensure to generate 2–4 items in the 'features' array; each card renders as a full-width two-column row (text + image), so keep the list short. Each item should include a 'title', 'description', a valid real 'image', and 4–6 succinct 'checklistItems' strings to avoid overflow. Only use this block if you have valid real images for every item — do not use placeholder/stock images. Follow the example props closely for this block."},{"id":"feature-icon-grid-accent","name":"Feature Icon Grid Accent","title":"Feature Icon Grid Accent","category":"Features","categorySlug":"features","description":"Two-column grid of features with accent background cards. Each feature has an icon in an accent-colored circle, title, and description. Modern, colorful design for capability showcases.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290515/i24mui4n5h2b3yq7bvh799tesiyq/feature-icon-grid-accent-desktop.png","mobile":"https://cdn.ing/assets/i/r/290514/9nb4cwluni8zfhkctk8fxj4iiuwq/feature-icon-grid-accent-mobile.png"},"componentPath":"blocks/features/feature-icon-grid-accent.tsx","code":"import { DynamicIcon, Pressable } from \"@opensite/ui\";\nimport { FeatureIconGridAccent } from \"@opensite/ui/blocks/features/feature-icon-grid-accent\";\n\nexport default function Demo() {\n  return (\n    <FeatureIconGridAccent\n      label=\"WHAT SETS US APART\"\n      title=\"Designed for Modern Teams\"\n      description=\"Built with the tools and workflows that matter most to high-performing organizations.\"\n      cardClassName=\"bg-white shadow-lg rounded-2xl border border-gray-200\"\n      features={[\n        {\n          iconName: \"lucide/zap\",\n          title: \"Lightning Fast\",\n          iconClassName:\n            \"bg-black/80 border-gray border-4 text-white w-16 h-16 rounded-2xl\",\n          description: (\n            <div>\n              <div>\n                Optimized performance ensures your applications load instantly\n                and respond smoothly.\n              </div>\n\n              <div className=\"mt-4\">\n                <Pressable asButton size=\"sm\">\n                  Get Started\n                </Pressable>\n              </div>\n            </div>\n          ),\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          title: \"Enterprise Security\",\n          iconClassName:\n            \"bg-black/80 border-gray border-4 text-white w-16 h-16 rounded-2xl\",\n          description: (\n            <div>\n              <div>\n                Bank-level encryption and compliance standards protect your data\n                at every layer.\n              </div>\n\n              <div className=\"mt-4\">\n                <Pressable variant=\"outline\" asButton size=\"sm\">\n                  Learn More\n                </Pressable>\n              </div>\n            </div>\n          ),\n        },\n        {\n          iconName: \"lucide/layers\",\n          title: \"Seamless Integration\",\n          iconClassName:\n            \"bg-black/80 border-gray border-4 text-white w-16 h-16 rounded-2xl\",\n          description: (\n            <div>\n              <div>\n                Connect with your existing tools through our comprehensive API\n                and plugin ecosystem.\n              </div>\n\n              <div className=\"mt-4\">\n                <Pressable variant=\"outline\" asButton size=\"sm\">\n                  Schedule a Demo\n                </Pressable>\n              </div>\n            </div>\n          ),\n        },\n        {\n          iconName: \"lucide/bar-chart-3\",\n          title: \"Advanced Analytics\",\n          iconClassName:\n            \"bg-black/80 border-gray border-4 text-white w-16 h-16 rounded-2xl\",\n          description: (\n            <div>\n              <div>\n                Real-time insights and customizable dashboards help you make\n                data-driven decisions.\n              </div>\n\n              <div className=\"mt-4\">\n                <Pressable variant=\"outline\" asButton size=\"sm\">\n                  View Reports\n                  <DynamicIcon name=\"lucide/arrow-up-right\" />\n                </Pressable>\n              </div>\n            </div>\n          ),\n        },\n      ]}\n      spacing=\"xl\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Section label/eyebrow text","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element or ReactNode","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/zoom-in\") - used if icon prop not provided","required":false},"title":{"type":"object","description":"Feature title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the feature card","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon wrapper","required":false}},"typeLabel":"FeatureIconGridAccentItem"},"typeLabel":"FeatureIconGridAccentItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the features grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each feature card","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","grid","icons","accent","two-column","colorful","capabilities"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 2 (2, 4, 6, or 8) since the layout is a 2-column grid. Each item supports an 'iconName', 'title', and 'description'. Follow the example props closely for this block."},{"id":"feature-three-column-values","name":"Feature Three Column Values","title":"Feature Three Column Values","category":"Features","categorySlug":"features","description":"Three-column grid of value cards with icons. Each card has an icon, title, and description. Clean, balanced layout for company values, core principles, or key benefits.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290513/lsp5zcx7879o3uoage9ms585cw48/feature-three-column-values-desktop.png","mobile":"https://cdn.ing/assets/i/r/290512/ebkamg1ns2m338ttrt6ek0yefjnk/feature-three-column-values-mobile.png"},"componentPath":"blocks/features/feature-three-column-values.tsx","code":"import { FeatureThreeColumnValues } from \"@opensite/ui/blocks/features/feature-three-column-values\";\n\nexport default function Demo() {\n  return (\n    <FeatureThreeColumnValues\n      label=\"OUR CORE VALUES\"\n      title=\"What Drives Us Forward\"\n      values={[\n        {\n          iconName: \"lucide/heart\",\n          title: \"Customer First\",\n          description:\n            \"Every decision we make starts with understanding our customers' needs and exceeding their expectations.\",\n        },\n        {\n          iconName: \"lucide/lightbulb\",\n          title: \"Innovation\",\n          description:\n            \"We constantly push boundaries and embrace new technologies to deliver cutting-edge solutions.\",\n        },\n        {\n          iconName: \"lucide/target\",\n          title: \"Excellence\",\n          description:\n            \"We hold ourselves to the highest standards and never settle for good enough.\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Section label content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"values":{"type":"array","description":"Array of value items","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/timer\")","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureThreeColumnValuesItem"},"typeLabel":"FeatureThreeColumnValuesItem[]","required":false},"valuesSlot":{"type":"object","description":"Custom slot for rendering values (overrides values array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each value card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","values","three-column","grid","icons","principles","benefits"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 items in the 'values' array since the layout is a fixed 3-column grid. Follow the example props closely for this block."},{"id":"feature-badge-grid-six","name":"Feature Badge Grid Six","title":"Feature Badge Grid Six","category":"Features","categorySlug":"features","description":"Six-feature grid with badge header and centered CTA button. Each feature has an icon in an accent circle, title, and description. Includes badge label and large heading.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293069/72mds3dykymcyvw54kpaira4u80w/cleanshot-2026-03-03-at-10-34-44.png","mobile":"https://cdn.ing/assets/i/r/293068/r0x2x9kztwhu16w0uq6rkykn9qjs/cleanshot-2026-03-03-at-10-35-03.png"},"componentPath":"blocks/features/feature-badge-grid-six.tsx","code":"import { FeatureBadgeGridSix } from \"@opensite/ui/blocks/features/feature-badge-grid-six\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureBadgeGridSix\n      label=\"DEVELOPER TOOLS\"\n      title=\"Built for Teams That Ship Fast\"\n      features={[\n        {\n          iconName: \"lucide/git-pull-request\",\n          heading: \"Version Control\",\n          description:\n            \"Integrated Git workflows with automated merges and conflict resolution.\",\n        },\n        {\n          iconName: \"lucide/code\",\n          heading: \"Code Review\",\n          description:\n            \"Inline comments, suggestions, and automated testing for every PR.\",\n        },\n        {\n          iconName: \"lucide/rocket\",\n          heading: \"CI/CD Pipeline\",\n          description:\n            \"Deploy to production with confidence using automated testing and rollbacks.\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          heading: \"Security Scanning\",\n          description:\n            \"Catch vulnerabilities early with integrated security analysis.\",\n        },\n        {\n          iconName: \"lucide/activity\",\n          heading: \"Performance Monitoring\",\n          description:\n            \"Real-time metrics and alerts for your entire application stack.\",\n        },\n        {\n          iconName: \"lucide/layout-dashboard\",\n          heading: \"Team Dashboard\",\n          description:\n            \"Unified view of projects, tasks, and team velocity metrics.\",\n        },\n      ]}\n      action={{\n        label: \"Explore All Features\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n      }}\n      background=\"secondary\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Badge label content","typeLabel":"React.ReactNode","required":false},"badgeSlot":{"type":"object","description":"Custom badge slot (overrides label)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/git-pull-request\")","required":false},"heading":{"type":"object","description":"Feature heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false}},"typeLabel":"FeatureBadgeGridSixItem"},"typeLabel":"FeatureBadgeGridSixItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"action":{"type":"object","description":"Button action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"actionSlot":{"type":"object","description":"Custom slot for action button (overrides action)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"actionContainerClassName":{"type":"string","description":"Additional CSS classes for the action container","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","grid","six-column","badge","icons","cta","capabilities"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 items in the 'features' array since the name and layout indicate a fixed 6-item grid. The block has a single 'action' prop (not an array) — supply one action with a 'default' variant. Follow the example props closely for this block."},{"id":"feature-pattern-grid-links","name":"Feature Pattern Grid Links","title":"Feature Pattern Grid Links","category":"Features","categorySlug":"features","description":"Six-feature grid with pattern background and 'Learn more' links on each card. Each card has an icon, title, description, and arrow link. Pattern background adds visual interest.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290509/40d1g111cunmu14zbh6v5zrtue4o/feature-pattern-grid-links-desktop.png","mobile":"https://cdn.ing/assets/i/r/290508/deb0tzptizqki891fobp9ysj8iul/feature-pattern-grid-links-mobile.png"},"componentPath":"blocks/features/feature-pattern-grid-links.tsx","code":"import { FeaturePatternGridLinks } from \"@opensite/ui/blocks/features/feature-pattern-grid-links\";\n\nexport default function Demo() {\n  return (\n    <FeaturePatternGridLinks\n      title=\"Client Resources\"\n      description=\"Explore our comprehensive resources designed to help you make the most of our platform and accelerate your development process.\"\n      features={[\n        {\n          iconName: \"lucide/code-2\",\n          title: \"Component Library\",\n          description:\n            \"200+ production-ready components with full TypeScript support and documentation.\",\n          link: \"#\",\n          linkLabel: \"Browse Components\",\n        },\n        {\n          iconName: \"lucide/palette\",\n          title: \"Design System\",\n          description:\n            \"Comprehensive design tokens, patterns, and guidelines for consistent UX.\",\n          link: \"#\",\n          linkLabel: \"View Design System\",\n        },\n        {\n          iconName: \"lucide/book-open\",\n          title: \"Documentation\",\n          description:\n            \"In-depth guides, tutorials, and API references to help you get started.\",\n          link: \"#\",\n          linkLabel: \"Read the Docs\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Community\",\n          description:\n            \"Join thousands of developers building amazing products with our platform.\",\n          link: \"#\",\n          linkLabel: \"Join Community\",\n        },\n        {\n          iconName: \"lucide/layout-template\",\n          title: \"Templates\",\n          description:\n            \"Launch faster with pre-built templates for dashboards, marketing sites, and apps.\",\n          link: \"#\",\n          linkLabel: \"Browse Templates\",\n        },\n        {\n          iconName: \"lucide/plug\",\n          title: \"Integrations\",\n          description:\n            \"Connect your stack with first-class integrations for analytics, auth, and payments.\",\n          link: \"#\",\n          linkLabel: \"See Integrations\",\n        },\n        {\n          iconName: \"lucide/activity\",\n          title: \"Analytics\",\n          description:\n            \"Track adoption, performance, and engagement with real-time dashboards.\",\n          link: \"#\",\n          linkLabel: \"View Analytics\",\n        },\n        {\n          iconName: \"lucide/accessibility\",\n          title: \"Accessibility\",\n          description:\n            \"WCAG-aligned components with keyboard support, ARIA labels, and focus states.\",\n          link: \"#\",\n          linkLabel: \"Accessibility Guide\",\n        },\n        {\n          iconName: \"lucide/headset\",\n          title: \"Support\",\n          description:\n            \"Priority support, migration help, and best-practice reviews from our team.\",\n          link: \"#\",\n          linkLabel: \"Contact Support\",\n        },\n      ]}\n      background=\"white\"\n      spacing=\"xl\"\n      pattern=\"dots\"\n      patternOpacity={0.7}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/zoom-in\")","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"link":{"type":"string","description":"Link URL","required":false},"linkLabel":{"type":"object","description":"Link label content","typeLabel":"React.ReactNode","required":false},"linkSlot":{"type":"object","description":"Custom link slot (overrides link and linkLabel)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for the link","required":false}},"typeLabel":"FeaturePatternGridLinksItem"},"typeLabel":"FeaturePatternGridLinksItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","grid","pattern","links","six-column","icons","learn-more"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 3 (3, 6, or 9) since the layout is a 3-column grid. The demo uses 9 items. Each item requires a 'link' and 'linkLabel' for the CTA. Follow the example props closely for this block."},{"id":"feature-tabbed-content-image","name":"Feature Tabbed Content Image","title":"Feature Tabbed Content Image","category":"Features","categorySlug":"features","description":"Tabbed interface with content and images that change based on selected tab. Each tab shows heading, description, checklist features, CTA button, and responsive image.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290507/zil95zfneqdgkhlcnfgxhhcdeff2/feature-tabbed-content-image-desktop.png","mobile":"https://cdn.ing/assets/i/r/290506/cqj6k1n736w6uib90dgr7yrbx0vr/feature-tabbed-content-image-mobile.png"},"componentPath":"blocks/features/feature-tabbed-content-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureTabbedContentImage } from \"@opensite/ui/blocks/features/feature-tabbed-content-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureTabbedContentImage\n      title=\"Complete Development Platform\"\n      description=\"From development to deployment and monitoring, everything you need to build and ship modern applications.\"\n      background=\"dark\"\n      pattern=\"dashedGridFadeTop\"\n      patternOpacity={0.2}\n      slides={[\n        {\n          id: \"development\",\n          tabName: \"Development\",\n          title: \"Build Faster with Modern Tools\",\n          description:\n            \"Comprehensive development environment with everything you need to ship quality code quickly.\",\n          features: [\n            \"Hot module replacement for instant feedback and everything you need to ship quality code quickly.\",\n            \"Built-in TypeScript support and type checking\",\n            \"Integrated testing framework with coverage reports\",\n            \"Component library with 200+ pre-built blocks\",\n          ],\n          actions: [\n            {\n              label: \"Start Building\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          image: imagePlaceholders[53],\n          imageAlt: \"Development environment\",\n        },\n        {\n          id: \"deployment\",\n          tabName: \"Deployment\",\n          title: \"Deploy to Production in Seconds\",\n          description:\n            \"Push your code and let our platform handle the rest. Automatic builds, tests, and global deployment.\",\n          features: [\n            \"Zero-downtime deployments with instant rollbacks\",\n            \"Automatic SSL certificates and custom domains\",\n            \"Global CDN with 200+ edge locations\",\n            \"Preview environments for every pull request\",\n          ],\n          actions: [\n            {\n              label: \"View Deployment Guide\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          image: imagePlaceholders[79],\n          imageAlt: \"Deployment pipeline\",\n        },\n        {\n          id: \"monitoring\",\n          tabName: \"Monitoring\",\n          title: \"Real-Time Insights & Analytics\",\n          description:\n            \"Comprehensive observability with metrics, logs, and traces all in one place.\",\n          features: [\n            \"Real-time performance monitoring and alerts\",\n            \"Distributed tracing across your entire stack\",\n            \"Custom dashboards with advanced analytics\",\n            \"Integration with Datadog, New Relic, and more\",\n          ],\n          actions: [\n            {\n              label: \"Explore Monitoring\",\n              href: \"#\",\n              variant: \"default\",\n              iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n            },\n          ],\n          image: imagePlaceholders[103],\n          imageAlt: \"Monitoring dashboard\",\n        },\n      ]}\n      defaultTab=\"development\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"slides":{"type":"array","description":"Array of tab slides","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier","typeLabel":"number | string","required":true},"tabName":{"type":"object","description":"Tab name content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Slide title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature bullet points (can be strings or FeatureTabbedContentImageFeatureItem objects)","items":{"type":"object","description":"","typeLabel":"string | FeatureTabbedContentImageFeatureItem"},"typeLabel":"string | FeatureTabbedContentImageFeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for features (overrides features array)","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide content","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features list","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureTabbedContentImageSlide"},"typeLabel":"FeatureTabbedContentImageSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"defaultTab":{"type":"string","description":"Default active tab value","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"tabsWrapperClassName":{"type":"string","description":"Additional CSS classes for the tabs wrapper","required":false},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs component","required":false},"tabsListClassName":{"type":"string","description":"Additional CSS classes for the tabs list","required":false},"tabTriggerClassName":{"type":"string","description":"Additional CSS classes for each tab trigger","required":false},"tabContentClassName":{"type":"string","description":"Additional CSS classes for each tab content","required":false},"contentGridClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","tabs","tabbed","interactive","images","checklist","cta"],"performance":{},"importantUsageNotes":"Ensure to supply 3–5 items in the 'slides' array. Each slide requires a valid real 'image' — do not use this block if you don't have real images for every slide. Each slide's 'features' array should contain 3–5 succinct strings or items to avoid overflow. Each slide's 'actions' array should follow the variant pattern: use 'default' for the first action and 'outline' for the second. Follow the example props closely for this block."},{"id":"feature-utility-cards-grid","name":"Feature Utility Cards Grid","title":"Feature Utility Cards Grid","category":"Features","categorySlug":"features","description":"Six-card grid showcasing utilities with images and descriptions. Header with separator line, two-column intro, and three-column card grid. Each card has image, title, and description.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290505/ru6fpqhuhdgi2wgkad8kic209zt3/feature-utility-cards-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290504/buh6j1gr0yqn5i62gohmr66tn7x8/feature-utility-cards-grid-mobile.png"},"componentPath":"blocks/features/feature-utility-cards-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { DynamicIcon } from \"@opensite/ui\";\nimport { FeatureUtilityCardsGrid } from \"@opensite/ui/blocks/features/feature-utility-cards-grid\";\n\nexport default function Demo() {\n  return (\n    <FeatureUtilityCardsGrid\n      label=\"Industry Specific Tools\"\n      labelIconName=\"lucide/sparkles\"\n      title=\"Everything You Need in One Place\"\n      description=\"A comprehensive suite of tools designed to simplify your workflow and accelerate development.\"\n      learnMoreAction={{\n        label: \"All Tools\",\n        href: \"#\",\n        variant: \"link\",\n        asButton: true,\n        iconAfter: <DynamicIcon name=\"lucide/arrow-up-right\" size={20} />,\n        className: \"flex items-center gap-2 font-bold  uppercase\",\n      }}\n      utilities={[\n        {\n          title: \"API Explorer\",\n          description:\n            \"Interactive API documentation with live testing and code examples in multiple languages.\",\n          image: imagePlaceholders[77],\n          imageAlt: \"API explorer interface\",\n          href: \"#\",\n        },\n        {\n          title: \"Database Designer\",\n          description:\n            \"Visual schema builder with relationship mapping and automatic migration generation.\",\n          image: imagePlaceholders[93],\n          imageAlt: \"Database designer interface\",\n          href: \"#\",\n        },\n        {\n          title: \"Asset Optimizer\",\n          description:\n            \"Compress and optimize images, fonts, and assets automatically during build.\",\n          image: imagePlaceholders[44],\n          imageAlt: \"Asset optimizer interface\",\n          href: \"#\",\n        },\n      ]}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Section label content","typeLabel":"React.ReactNode","required":false},"labelIcon":{"type":"object","description":"Icon element for label (overrides iconName)","typeLabel":"React.ReactNode","required":false},"labelIconName":{"type":"string","description":"Icon name for label in format: prefix/name","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"learnMoreAction":{"type":"object","description":"Learn more action configuration","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig","required":false},"learnMoreSlot":{"type":"object","description":"Custom slot for learn more link (overrides learnMoreAction)","typeLabel":"React.ReactNode","required":false},"utilities":{"type":"array","description":"Array of utility items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Utility title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Utility description content","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"href":{"type":"string","description":"Optional Link","required":false}},"typeLabel":"FeatureUtilityCardsGridItem"},"typeLabel":"FeatureUtilityCardsGridItem[]","required":false},"utilitiesSlot":{"type":"object","description":"Custom slot for rendering utilities (overrides utilities array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","utilities","grid","cards","images","three-column","tools"],"performance":{},"importantUsageNotes":"Ensure to generate 'utilities' in multiples of 3 (3 or 6) since the layout is a 3-column grid. Each item supports an optional 'image' — only use real images; if you don't have real images for every item, omit 'image' from all items. The 'learnMoreAction' prop is a single link action, not an array. Follow the example props closely for this block."},{"id":"feature-bento-utilities","name":"Feature Bento Utilities","title":"Feature Bento Utilities","category":"Features","categorySlug":"features","description":"Bento-style grid layout with mixed card sizes showcasing various utilities. Two-column bento grid with varying card heights and image cards. Includes sparkle icons and coming soon badges.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293067/ld6eadb8c2umb8boqezxlykhmec8/cleanshot-2026-03-03-at-10-22-56.png","mobile":"https://cdn.ing/assets/i/r/293066/1mzf0bjbdg5vjkcy3phv0cf0l166/cleanshot-2026-03-03-at-10-23-14.png"},"componentPath":"blocks/features/feature-bento-utilities.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureBentoUtilities } from \"@opensite/ui/blocks/features/feature-bento-utilities\";\n\nexport default function Demo() {\n  return (\n    <FeatureBentoUtilities\n      label=\"DEVELOPMENT UTILITIES\"\n      labelIconName=\"lucide/sparkles\"\n      title=\"Tools That Power Your Workflow\"\n      description=\"Comprehensive utilities designed to streamline every aspect of your development process.\"\n      leftColumnCards={[\n        {\n          title: \"Code Generator\",\n          description:\n            \"Generate components, routes, and API endpoints from templates with smart variable replacement.\",\n          imageSrc: imagePlaceholders[46],\n          imageAlt: \"Code generator\",\n          showSparkle: true,\n          href: \"#\",\n        },\n        {\n          title: \"Schema Builder\",\n          description:\n            \"Visual database designer with automatic migration generation.\",\n          badge: \"Beta\",\n          isDashed: false,\n          href: \"#\",\n        },\n      ]}\n      rightColumnCards={[\n        {\n          title: \"Asset Optimizer\",\n          description:\n            \"Automatically compress and optimize images, fonts, and other assets during build.\",\n          showSparkle: false,\n          href: \"#\",\n        },\n        {\n          title: \"API Testing\",\n          description:\n            \"Interactive API explorer with live testing and code generation in multiple languages.\",\n          imageSrc: imagePlaceholders[70],\n          imageAlt: \"API testing\",\n          showSparkle: true,\n          href: \"#\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Section label content","typeLabel":"React.ReactNode","required":false},"labelIconName":{"type":"string","description":"Icon name for the label","required":false},"labelIcon":{"type":"object","description":"Icon element for the label (overrides labelIconName)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"leftColumnCards":{"type":"array","description":"Array of cards for the left column","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Card title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL (for image cards)","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"showSparkle":{"type":"boolean","description":"Whether to show sparkle icon next to title","required":false},"badge":{"type":"object","description":"Badge text (e.g., \"Coming soon\")","typeLabel":"React.ReactNode","required":false},"isDashed":{"type":"boolean","description":"Whether this is a dashed/coming soon style card","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"href":{"type":"string","description":"Optional Link","required":false}},"typeLabel":"FeatureBentoUtilitiesCardItem"},"typeLabel":"FeatureBentoUtilitiesCardItem[]","required":false},"leftColumnSlot":{"type":"object","description":"Custom slot for left column (overrides leftColumnCards)","typeLabel":"React.ReactNode","required":false},"rightColumnCards":{"type":"array","description":"Array of cards for the right column","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Card title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL (for image cards)","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"showSparkle":{"type":"boolean","description":"Whether to show sparkle icon next to title","required":false},"badge":{"type":"object","description":"Badge text (e.g., \"Coming soon\")","typeLabel":"React.ReactNode","required":false},"isDashed":{"type":"boolean","description":"Whether this is a dashed/coming soon style card","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"href":{"type":"string","description":"Optional Link","required":false}},"typeLabel":"FeatureBentoUtilitiesCardItem"},"typeLabel":"FeatureBentoUtilitiesCardItem[]","required":false},"rightColumnSlot":{"type":"object","description":"Custom slot for right column (overrides rightColumnCards)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid wrapper","required":false},"columnClassName":{"type":"string","description":"Additional CSS classes for each column","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","bento","grid","utilities","mixed-sizes","images","modern"],"performance":{},"importantUsageNotes":"This is a bento layout — supply exactly 2 items in 'leftColumnCards' and exactly 2 items in 'rightColumnCards' to match the canonical 2×2 two-column bento grid. Only use real images for items that have an 'imageSrc'; if you don't have real images, omit 'imageSrc' from those items. Follow the example props closely for this block."},{"id":"feature-checklist-three-column","name":"Feature Checklist Three Column","title":"Feature Checklist Three Column","category":"Features","categorySlug":"features","description":"Three-column layout with heading, dual checklists, and feature cards with images. First column has heading and description, middle columns have checklists, and feature cards below with badges and read more links.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290501/4oly16xatjgt9dws04g2wkxmu16u/feature-checklist-three-column-desktop.png","mobile":"https://cdn.ing/assets/i/r/290500/qzk0v3r7qir09zhfrpzji49fmvdn/feature-checklist-three-column-mobile.png"},"componentPath":"blocks/features/feature-checklist-three-column.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureChecklistThreeColumn } from \"@opensite/ui/blocks/features/feature-checklist-three-column\";\n\nexport default function Demo() {\n  return (\n    <FeatureChecklistThreeColumn\n      title=\"Build Any Kind of Website\"\n      checklistColumn1={[\n        \"Fully Responsive Design\",\n        \"Clean & Modern Interface\",\n        \"Lightning Fast Performance\",\n        \"SEO Optimized Structure\",\n      ]}\n      checklistColumn2={[\n        \"Accessible Components\",\n        \"Dark Mode Support\",\n        \"Cross-Browser Compatible\",\n        \"Mobile-First Approach\",\n      ]}\n      cards={[\n        {\n          title: \"Responsive Components\",\n          description:\n            \"Every component is built mobile-first and scales beautifully across all device sizes.\",\n          image: imagePlaceholders[34],\n          imageAlt: \"Responsive design showcase\",\n          badge: \"Featured\",\n          checklistItems: [\n            \"Adapts to any screen size automatically\",\n            \"Touch-optimized for mobile devices\",\n            \"Consistent experience across platforms\",\n          ],\n          link: \"#\",\n          linkLabel: \"Learn more\",\n        },\n        {\n          title: \"Performance Focused\",\n          description:\n            \"Optimized for speed with lazy loading, code splitting, and minimal bundle sizes.\",\n          image: imagePlaceholders[78],\n          imageAlt: \"Performance metrics\",\n          badge: \"Popular\",\n          checklistItems: [\n            \"Sub-second page load times\",\n            \"Lighthouse score of 95+\",\n            \"Optimized assets and images\",\n          ],\n          link: \"#\",\n          linkLabel: \"See benchmarks\",\n        },\n        {\n          title: \"Developer Experience\",\n          description:\n            \"Built with TypeScript, comprehensive docs, and examples that get you started fast.\",\n          image: imagePlaceholders[91],\n          imageAlt: \"Developer tools\",\n          badge: \"New\",\n          checklistItems: [\n            \"Full TypeScript support\",\n            \"Storybook documentation\",\n            \"Copy-paste code examples\",\n          ],\n          link: \"#\",\n          linkLabel: \"Explore docs\",\n        },\n      ]}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"checklistColumn1":{"type":"array","description":"First column checklist items","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistThreeColumnCheckItem"},"typeLabel":"string | FeatureChecklistThreeColumnCheckItem[]","required":false},"checklistColumn1Slot":{"type":"object","description":"Custom slot for first checklist column (overrides checklistColumn1)","typeLabel":"React.ReactNode","required":false},"checklistColumn2":{"type":"array","description":"Second column checklist items","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistThreeColumnCheckItem"},"typeLabel":"string | FeatureChecklistThreeColumnCheckItem[]","required":false},"checklistColumn2Slot":{"type":"object","description":"Custom slot for second checklist column (overrides checklistColumn2)","typeLabel":"React.ReactNode","required":false},"cards":{"type":"array","description":"Array of feature cards","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Card title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description content","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom image slot (overrides image)","typeLabel":"React.ReactNode","required":false},"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"checklistItems":{"type":"array","description":"Array of checklist items","items":{"type":"object","description":"","typeLabel":"string | FeatureChecklistThreeColumnCheckItem"},"typeLabel":"string | FeatureChecklistThreeColumnCheckItem[]","required":false},"link":{"type":"string","description":"Link URL","required":false},"linkLabel":{"type":"object","description":"Link label content","typeLabel":"React.ReactNode","required":false},"linkSlot":{"type":"object","description":"Custom link slot (overrides link and linkLabel)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureChecklistThreeColumnCard"},"typeLabel":"FeatureChecklistThreeColumnCard[]","required":false},"cardsSlot":{"type":"object","description":"Custom slot for rendering cards (overrides cards array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerGridClassName":{"type":"string","description":"Additional CSS classes for the header grid","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"checklistClassName":{"type":"string","description":"Additional CSS classes for the checklist columns","required":false},"cardsGridClassName":{"type":"string","description":"Additional CSS classes for the cards grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","checklist","three-column","cards","images","badges","benefits"],"performance":{},"importantUsageNotes":"Supply exactly 3 items in the 'cards' array since the cards section is a 3-column grid. Each card requires a valid real 'image' — do not use this block if you don't have real images for all cards. Keep 'checklistItems' strings within each card to 3–5 succinct items to avoid overflow. Each checklist column ('checklistColumn1', 'checklistColumn2') should contain 4–8 short, succinct strings. Follow the example props closely for this block."},{"id":"feature-integration-cards","name":"Feature Integration Cards","title":"Feature Integration Cards","category":"Features","categorySlug":"features","description":"Grid of integration cards with icons, descriptions, and visit website links. Centered header with four-column grid of bordered cards. Each card has icon badge, title, description, and external link button.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290499/w2avlqv85t2wr1qb4f12koj6fv7w/feature-integration-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290498/zheeyynltal4uogf7om2874n81dp/feature-integration-cards-mobile.png"},"componentPath":"blocks/features/feature-integration-cards.tsx","code":"import { brandLogoPlaceholders } from \"@/lib/media\";\nimport { FeatureIntegrationCards } from \"@opensite/ui/blocks/features/feature-integration-cards\";\n\nexport default function Demo() {\n  return (\n    <FeatureIntegrationCards\n      title=\"Powerful Integrations\"\n      description=\"Connect seamlessly with the tools your team already uses. One-click setup gets you started in minutes.\"\n      integrations={[\n        {\n          icon: brandLogoPlaceholders.black[0],\n          iconAlt: \"Integration logo\",\n          title: \"Slack\",\n          description:\n            \"Get real-time notifications and updates directly in your Slack channels.\",\n          link: \"#\",\n          linkLabel: \"Connect Slack\",\n        },\n        {\n          icon: brandLogoPlaceholders.black[1],\n          iconAlt: \"Integration logo\",\n          title: \"GitHub\",\n          description:\n            \"Sync your repositories and automate workflows with GitHub Actions.\",\n          link: \"#\",\n          linkLabel: \"Connect GitHub\",\n        },\n        {\n          icon: brandLogoPlaceholders.black[2],\n          iconAlt: \"Integration logo\",\n          title: \"Google Workspace\",\n          description:\n            \"Integrate with Gmail, Calendar, and Drive for seamless productivity.\",\n          link: \"#\",\n          linkLabel: \"Connect Google\",\n        },\n        {\n          icon: brandLogoPlaceholders.black[3],\n          iconAlt: \"Integration logo\",\n          title: \"Salesforce\",\n          description:\n            \"Sync customer data and automate your sales workflow end-to-end.\",\n          link: \"#\",\n          linkLabel: \"Connect Salesforce\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"integrations":{"type":"array","description":"Array of integration items","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Integration icon/logo URL","required":false},"iconAlt":{"type":"string","description":"Icon alt text","required":false},"iconSlot":{"type":"object","description":"Custom icon slot (overrides icon)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Integration title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Integration description content","typeLabel":"React.ReactNode","required":false},"link":{"type":"string","description":"Link URL","required":false},"linkLabel":{"type":"object","description":"Link label content","typeLabel":"React.ReactNode","required":false},"linkLabelSlot":{"type":"object","description":"Custom link label slot (overrides linkLabel)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"linkLabelClassName":{"type":"string","description":"Additional CSS classes for the link label","required":false}},"typeLabel":"FeatureIntegrationCardsItem"},"typeLabel":"FeatureIntegrationCardsItem[]","required":false},"integrationsSlot":{"type":"object","description":"Custom slot for rendering integrations (overrides integrations array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","integrations","cards","grid","icons","external-links","partners"],"performance":{},"importantUsageNotes":"Only use when block images will be logos or compact integration marks. The image slots are intentionally sized down for logos, so photos, screenshots, people, product imagery, and large illustrations will look poor."},{"id":"feature-icon-tabs-content","name":"Feature Icon Tabs Content","title":"Feature Icon Tabs Content","category":"Features","categorySlug":"features","description":"Tabbed interface with icon triggers and content panels featuring images and CTAs. Centered header with icon tabs, muted background content area. Each tab has badge label, heading, description, CTA button, and image.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290497/v7fv84ieer1tavou9o6lb91pwfnn/feature-icon-tabs-content-desktop.png","mobile":"https://cdn.ing/assets/i/r/290496/0iaugarhjpyj5o0rv6mv95rmrh6j/feature-icon-tabs-content-mobile.png"},"componentPath":"blocks/features/feature-icon-tabs-content.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureIconTabsContent } from \"@opensite/ui/blocks/features/feature-icon-tabs-content\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureIconTabsContent\n      heading=\"Key Features\"\n      description=\"Discover the standout features that set our platform apart. From blazing-fast performance to enterprise-grade security, see how we deliver exceptional value to our users.\"\n      tabs={[\n        {\n          value: \"performance\",\n          iconName: \"lucide/zap\",\n          label: \"Performance\",\n          content: {\n            badge: \"Lightning Fast\",\n            title: \"Built for Speed\",\n            description:\n              \"Our infrastructure is optimized for sub-100ms response times globally. Automatic caching, edge computing, and intelligent routing ensure your users get the fastest experience possible.\",\n            imageSrc: imagePlaceholders[50],\n            imageAlt: \"Performance metrics\",\n            actions: [\n              {\n                label: \"View Benchmarks\",\n                href: \"#\",\n                variant: \"default\",\n                iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n              },\n            ],\n          },\n        },\n        {\n          value: \"security\",\n          iconName: \"lucide/shield-check\",\n          label: \"Security\",\n          content: {\n            badge: \"Enterprise Ready\",\n            title: \"Security First Architecture\",\n            description:\n              \"Bank-level encryption, SOC 2 Type II compliance, automated security scanning, and regular penetration testing. Your data is protected by industry-leading security practices.\",\n            imageSrc: imagePlaceholders[74],\n            imageAlt: \"Security features\",\n            actions: [\n              {\n                label: \"Security Docs\",\n                href: \"#\",\n                variant: \"default\",\n                iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n              },\n            ],\n          },\n        },\n        {\n          value: \"scalability\",\n          iconName: \"lucide/trending-up\",\n          label: \"Scalability\",\n          content: {\n            badge: \"Auto-Scaling\",\n            title: \"Grows With Your Business\",\n            description:\n              \"From zero to millions of users, our platform automatically scales to meet demand. No configuration needed - we handle the complexity so you can focus on building.\",\n            imageSrc: imagePlaceholders[97],\n            imageAlt: \"Scalability diagram\",\n            actions: [\n              {\n                label: \"Learn More\",\n                href: \"#\",\n                variant: \"default\",\n                iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n              },\n            ],\n          },\n        },\n      ]}\n      defaultTab=\"performance\"\n      background=\"white\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.75}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"tabs":{"type":"array","description":"Array of tab configurations","items":{"type":"object","description":"","fields":{"value":{"type":"string","description":"Tab value identifier","required":true},"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/zap\")","required":false},"label":{"type":"object","description":"Tab label content","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Tab content configuration","fields":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description content","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the content","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureIconTabsContentTabContent","required":false},"contentSlot":{"type":"object","description":"Custom slot for tab content (overrides content)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the tab trigger","required":false}},"typeLabel":"FeatureIconTabsContentTab"},"typeLabel":"FeatureIconTabsContentTab[]","required":false},"tabsSlot":{"type":"object","description":"Custom slot for rendering tabs (overrides tabs array)","typeLabel":"React.ReactNode","required":false},"defaultTab":{"type":"string","description":"Default active tab value","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"tabsListClassName":{"type":"string","description":"Additional CSS classes for the tabs list","required":false},"tabTriggerClassName":{"type":"string","description":"Additional CSS classes for each tab trigger","required":false},"contentWrapperClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"tabContentClassName":{"type":"string","description":"Additional CSS classes for each tab content","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","tabs","icons","interactive","images","cta","showcase"],"performance":{},"importantUsageNotes":"Ensure to supply 3–5 items in the 'tabs' array. Each tab's 'content' object requires a valid real 'imageSrc' — do not use this block if you don't have real images for every tab panel. Each tab's 'content.actions' array should follow the variant pattern: use 'default' for the first action and 'outline' for the second. Follow the example props closely for this block."},{"id":"feature-image-overlay-badge","name":"Feature Image Overlay Badge","title":"Feature Image Overlay Badge","category":"Features","categorySlug":"features","description":"Two-column layout with content and an image featuring gradient overlay with avatar badge and CTA. Left side has heading, description, and feature list. Right side has image with gradient overlay, avatar badge, and floating CTA.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290495/v25jehl6gpwq8req8y7bceuwagcl/feature-image-overlay-badge-desktop.png","mobile":"https://cdn.ing/assets/i/r/290494/tm7vyl9rm7u1rq2lmpvis7szcxyd/feature-image-overlay-badge-mobile.png"},"componentPath":"blocks/features/feature-image-overlay-badge.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureImageOverlayBadge } from \"@opensite/ui/blocks/features/feature-image-overlay-badge\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureImageOverlayBadge\n      badge=\"Customer Success Story\"\n      title=\"See How Teams Are Building Faster\"\n      description=\"Join thousands of developers who have accelerated their workflow and shipped products faster with our platform.\"\n      actions={[\n        {\n          label: \"Read Full Story\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View All Stories\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      imageSrc={imagePlaceholders[59]}\n      imageAlt=\"Customer success story\"\n      avatarSrc={imagePlaceholders[13]}\n      avatarBadgeText=\"Featured\"\n      overlayTitle=\"TechCorp reduces deployment time by 90%\"\n      overlayLinkText=\"Read their journey\"\n      overlayLinkUrl=\"#\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"avatarSrc":{"type":"string","description":"Avatar image URL","required":false},"avatarBadgeText":{"type":"object","description":"Avatar badge text content","typeLabel":"React.ReactNode","required":false},"overlayTitle":{"type":"object","description":"Overlay title content","typeLabel":"React.ReactNode","required":false},"overlayLinkText":{"type":"object","description":"Overlay link text content","typeLabel":"React.ReactNode","required":false},"overlayLinkUrl":{"type":"string","description":"Overlay link URL","required":false},"overlayLinkOnClick":{"type":"object","description":"onClick handler for overlay link","typeLabel":"() => void","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for the image wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"overlayClassName":{"type":"string","description":"Additional CSS classes for the overlay","required":false},"avatarBadgeClassName":{"type":"string","description":"Additional CSS classes for the avatar badge","required":false},"overlayTitleClassName":{"type":"string","description":"Additional CSS classes for the overlay title","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","image","overlay","badge","avatar","gradient","cta","two-column"],"performance":{},"importantUsageNotes":"Only use this block if you have a valid real image for 'imageSrc' and an optional real avatar image for 'avatarSrc' — do not use placeholder/stock images. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"feature-category-image-cards","name":"Feature Category Image Cards","title":"Feature Category Image Cards","category":"Features","categorySlug":"features","description":"Six-card grid with category badges and large images showcasing key features. Centered header with three-column grid of muted background cards. Each card has category label, large image, title, and description.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290493/u12pq7n66abhn5uxkyemtzytv3v3/feature-category-image-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290492/zqe0yym602qdjxc76p3k2bdhuftd/feature-category-image-cards-mobile.png"},"componentPath":"blocks/features/feature-category-image-cards.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureCategoryImageCards } from \"@opensite/ui/blocks/features/feature-category-image-cards\";\n\nexport default function Demo() {\n  return (\n    <FeatureCategoryImageCards\n      badge=\"Product Categories\"\n      title=\"Explore Our Platform\"\n      description=\"Discover the tools and features designed to help you build, ship, and scale your applications.\"\n      features={[\n        {\n          title: \"Authentication & Security\",\n          category: \"Core Infrastructure\",\n          imageSrc: imagePlaceholders[48],\n          imageAlt: \"Authentication features\",\n        },\n        {\n          title: \"Data Analytics\",\n          category: \"Insights & Reporting\",\n          imageSrc: imagePlaceholders[85],\n          imageAlt: \"Analytics dashboard\",\n        },\n        {\n          title: \"API Management\",\n          category: \"Developer Tools\",\n          imageSrc: imagePlaceholders[104],\n          imageAlt: \"API management\",\n        },\n      ]}\n      background=\"dark\"\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"category":{"type":"object","description":"Feature category content","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"categoryClassName":{"type":"string","description":"Additional CSS classes for the category","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"href":{"type":"string","description":"Optional Link","required":false}},"typeLabel":"FeatureCategoryImageCardsItem"},"typeLabel":"FeatureCategoryImageCardsItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","categories","cards","images","grid","three-column","showcase"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 3 (3 or 6) since the layout is a 3-column grid. Only use this block if you have valid real images for every item — do not use placeholder/stock images. Follow the example props closely for this block."},{"id":"feature-bento-image-grid","name":"Feature Bento Image Grid","title":"Feature Bento Image Grid","category":"Features","categorySlug":"features","description":"Asymmetric bento-style grid with large and small image cards featuring gradient overlays and CTAs. One large card and two smaller cards with gradient overlays, icon badges, hover animations, and responsive layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293070/fjantr8kpa2nj6ygpiqb8l46jgws/cleanshot-2026-03-03-at-11-04-05.png","mobile":"https://cdn.ing/assets/i/r/293071/rfqkkwlaawkdubnhysqic8wrp56r/cleanshot-2026-03-03-at-11-04-22.png"},"componentPath":"blocks/features/feature-bento-image-grid.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureBentoImageGrid } from \"@opensite/ui/blocks/features/feature-bento-image-grid\";\n\nexport default function Demo() {\n  return (\n    <FeatureBentoImageGrid\n      title=\"Platform Features\"\n      description=\"Discover the powerful capabilities that make our platform the choice of leading teams worldwide.\"\n      background=\"gray\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.4}\n      items={[\n        {\n          iconName: \"lucide/atom\",\n          iconBadge: \"AI\",\n          title: \"AI-Powered Development\",\n          linkText: \"Explore AI Features\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[42],\n          imageAlt: \"AI development tools\",\n          size: \"large\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          iconBadge: \"Security\",\n          title: \"Enterprise Security\",\n          linkText: \"View Security\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[65],\n          imageAlt: \"Security features\",\n          size: \"small\",\n        },\n        {\n          iconName: \"lucide/bar-chart-3\",\n          iconBadge: \"Analytics\",\n          title: \"Real-Time Analytics\",\n          linkText: \"See Analytics\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[88],\n          imageAlt: \"Analytics dashboard\",\n          size: \"small\",\n        },\n        {\n          iconName: \"lucide/zap\",\n          iconBadge: \"Performance\",\n          title: \"Lightning Fast\",\n          linkText: \"Check Performance\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[106],\n          imageAlt: \"Performance metrics\",\n          size: \"large\",\n        },\n      ]}\n      spacing=\"xl\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of grid items","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/atom\")","required":false},"iconBadge":{"type":"object","description":"Icon badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Card title content","typeLabel":"React.ReactNode","required":false},"linkText":{"type":"object","description":"Link text content","typeLabel":"React.ReactNode","required":false},"link":{"type":"string","description":"Link URL","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom image slot (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"size":{"type":"string","description":"Card size variant","typeLabel":"\"large\" | \"small\"","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconBadgeClassName":{"type":"string","description":"Additional CSS classes for the icon badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"linkTextClassName":{"type":"string","description":"Additional CSS classes for the link text","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"FeatureBentoImageGridItem"},"typeLabel":"FeatureBentoImageGridItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"largeCardClassName":{"type":"string","description":"Additional CSS classes for the large card","required":false},"smallCardClassName":{"type":"string","description":"Additional CSS classes for small cards","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","bento","grid","images","gradient","overlay","asymmetric","modern"],"performance":{},"importantUsageNotes":"This is a bento layout — use exactly 4 items: 1 item with 'size: \"large\"' (renders as the dominant card) and 3 items with 'size: \"small\"'. Only use this block if you have valid real images for every item — do not use placeholder/stock images. Follow the example props closely for this block."},{"id":"feature-image-cards-three-column","name":"Feature Image Cards Three Column","title":"Feature Image Cards Three Column","category":"Features","categorySlug":"features","description":"Three-column grid of image cards with gradient overlays, badges, and CTAs. Three equal-width cards with full-height images, gradient overlays, icon/avatar badges, hover animations, and call-to-action buttons.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290489/ve5mni4o86q5pyue90c2p7drstua/feature-image-cards-three-column-desktop.png","mobile":"https://cdn.ing/assets/i/r/290488/qm5z8jjoto3m4x4r44u8ga2vkkch/feature-image-cards-three-column-mobile.png"},"componentPath":"blocks/features/feature-image-cards-three-column.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureImageCardsThreeColumn } from \"@opensite/ui/blocks/features/feature-image-cards-three-column\";\n\nexport default function Demo() {\n  return (\n    <FeatureImageCardsThreeColumn\n      title=\"Featured Solutions\"\n      description=\"Tailored solutions designed to accelerate your development workflow and drive business growth.\"\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n      cards={[\n        {\n          iconName: \"lucide/zap\",\n          badgeText: \"Most Popular\",\n          title: \"Rapid Development\",\n          linkText: \"Learn More\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[39],\n          imageAlt: \"Rapid development workflow\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          badgeText: \"Enterprise\",\n          title: \"Security First\",\n          linkText: \"Explore Features\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[72],\n          imageAlt: \"Security features\",\n        },\n        {\n          iconName: \"lucide/trending-up\",\n          badgeText: \"Growth\",\n          title: \"Scale Seamlessly\",\n          linkText: \"See How\",\n          link: \"#\",\n          imageSrc: imagePlaceholders[95],\n          imageAlt: \"Scalability features\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"cards":{"type":"array","description":"Array of card items","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/zap\")","required":false},"avatarSrc":{"type":"string","description":"Avatar image URL (alternative to icon)","required":false},"badgeText":{"type":"object","description":"Badge text content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Card title content","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Card subtitle content","typeLabel":"React.ReactNode","required":false},"linkText":{"type":"object","description":"Link text content","typeLabel":"React.ReactNode","required":false},"link":{"type":"string","description":"Link URL","required":false},"onClick":{"type":"object","description":"onClick handler for the card","typeLabel":"() => void","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"linkClassName":{"type":"string","description":"Additional CSS classes for the link text","required":false}},"typeLabel":"FeatureImageCardsThreeColumnItem"},"typeLabel":"FeatureImageCardsThreeColumnItem[]","required":false},"cardsSlot":{"type":"object","description":"Custom slot for rendering cards (overrides cards array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"cardAspectRatios":{"type":"object","description":"Media card aspect ratios","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"square\" | \"horizontal\" | \"vertical\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"square\" | \"horizontal\" | \"vertical\"","required":true}},"typeLabel":"{ desktop: \"square\" | \"horizontal\" | \"vertical\"; mobile: \"square\" | \"horizontal\" | \"vertical\"; }","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","cards","images","three-column","gradient","overlay","cta"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 items in the 'cards' array since the layout is a fixed 3-column grid. Only use this block if you have valid real images for every card — do not use placeholder/stock images. Follow the example props closely for this block."},{"id":"feature-icon-grid-muted","name":"Feature Icon Grid Muted","title":"Feature Icon Grid Muted","category":"Features","categorySlug":"features","description":"Five-feature grid with muted background and icon badges showcasing key capabilities. Muted background section with centered header and five-column grid of bordered cards with icons.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290487/nxbwvthsc5scybc93omyxysclpwb/feature-icon-grid-muted-desktop.png","mobile":"https://cdn.ing/assets/i/r/290486/2cf0e4wadrm4et4i982eh381ph6u/feature-icon-grid-muted-mobile.png"},"componentPath":"blocks/features/feature-icon-grid-muted.tsx","code":"import { FeatureIconGridMuted } from \"@opensite/ui/blocks/features/feature-icon-grid-muted\";\n\nexport default function Demo() {\n  return (\n    <FeatureIconGridMuted\n      title=\"Key Features That Save You Time\"\n      description=\"Explore tools specifically built to enhance your workflow and boost productivity across your entire team.\"\n      features={[\n        {\n          iconName: \"lucide/check-circle-2\",\n          title: \"Instant Approvals\",\n          description:\n            \"Streamlined approval workflows with one-click confirmations and automated routing.\",\n        },\n        {\n          iconName: \"lucide/clock\",\n          title: \"Time Tracking\",\n          description:\n            \"Built-in time tracking that integrates seamlessly with your existing tools and workflows.\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Team Collaboration\",\n          description:\n            \"Real-time collaboration features that keep everyone on the same page, always.\",\n        },\n        {\n          iconName: \"lucide/file-text\",\n          title: \"Smart Documents\",\n          description:\n            \"Document management with version control, templates, and intelligent search.\",\n        },\n        {\n          iconName: \"lucide/bell\",\n          title: \"Highlight a Feature\",\n          description:\n            \"Intelligent alerts that surface what matters most and reduce notification fatigue.\",\n          className: \"col-span-1 md:col-span-2 bg-black text-white\",\n          titleClassName: \"text-white\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"muted\"\n      pattern=\"grid1\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of items to display","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/check-circle-2\")","required":false},"title":{"type":"object","description":"Item title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Item description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureIconGridMutedItem"},"typeLabel":"FeatureIconGridMutedItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering items (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","grid","icons","muted","five-column","capabilities","benefits"],"performance":{},"importantUsageNotes":"Ensure to generate 'features' in multiples of 3 (3, 6, or 9) for clean 3-column grid alignment at large breakpoints. Individual items can use 'className' to span multiple columns (e.g., 'col-span-1 md:col-span-2') for visual accent, but only if intentional. Keep 'title' and 'description' for each item succinct to avoid card overflow. Follow the example props closely for this block."},{"id":"feature-stats-highlight","name":"Feature Stats Highlight","title":"Feature Stats Highlight","category":"Features","categorySlug":"features","description":"Feature section with stats grid and CTA button showcasing key metrics and achievements. Two-column layout with content/CTA on left and stats grid on right. Includes badge header, stats grid, and CTA button.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290485/4p3lx85pqh3ahgebkufc9bcub116/feature-stats-highlight-desktop.png","mobile":"https://cdn.ing/assets/i/r/290484/s5bwyqiukz1v0wktyfvclnuw2lhd/feature-stats-highlight-mobile.png"},"componentPath":"blocks/features/feature-stats-highlight.tsx","code":"import { FeatureStatsHighlight } from \"@opensite/ui/blocks/features/feature-stats-highlight\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <FeatureStatsHighlight\n      badge=\"Trusted by Thousands\"\n      badgeClassName=\"border-1 border-white font-bold uppercase text-xs px-3 py-1.5\"\n      title=\"Built for Scale, Optimized for Performance\"\n      description=\"Join thousands of teams who trust our platform to deliver exceptional experiences. Our infrastructure handles billions of requests with sub-100ms latency.\"\n      actions={[\n        {\n          label: \"Start Free Trial\",\n          href: \"#\",\n          variant: \"outline\",\n          asButton: true,\n          iconAfter: <DynamicIcon name=\"lucide/arrow-up-right\" size={16} />,\n        },\n      ]}\n      stats={[\n        {\n          value: \"99.99%\",\n          label: \"Uptime SLA\",\n        },\n        {\n          value: \"< 100ms\",\n          label: \"Response Time\",\n        },\n        {\n          value: \"24/7\",\n          label: \"Expert Support\",\n        },\n        {\n          value: \"50K+\",\n          label: \"Active Users\",\n        },\n      ]}\n      background=\"primary\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"stats":{"type":"array","description":"Array of stat items","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value content (e.g., \"99%\", \"24/7\")","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"Stat label content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the stat card","required":false},"valueClassName":{"type":"string","description":"Additional CSS classes for the value","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","required":false}},"typeLabel":"FeatureStatsHighlightStat"},"typeLabel":"FeatureStatsHighlightStat[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"statsGridClassName":{"type":"string","description":"Additional CSS classes for the stats grid","required":false},"statCardClassName":{"type":"string","description":"Additional CSS classes for each stat card","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","stats","metrics","achievements","cta","two-column","trust"],"performance":{},"importantUsageNotes":"Only use short, numerical style strings for each of the `value` elements in the `stats` props array, e.g. '99.99%', '< 100ms', '24/7' - character counts larger than those examples will distort the layout and using words for those slots are a poor UI choice since they're very clearly made for numerical/stat data (in string form)."},{"id":"feature-accordion-image","name":"Feature Accordion Image","title":"Feature Accordion Image","category":"Features","categorySlug":"features","description":"Accordion-based feature display with images that change based on the selected accordion item. Two-column layout with accordion on left and dynamic image on right. Smooth transitions between items.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291542/9nm6nxcar91jud4acpc3itkbfjlf/cleanshot-2026-02-25-at-23-15-22-2x.png","mobile":"https://cdn.ing/assets/i/r/291541/mrtxshc4fkmvktct9vbouhk1wncg/cleanshot-2026-02-25-at-23-19-30-2x.png"},"componentPath":"blocks/features/feature-accordion-image.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureAccordionImage } from \"@opensite/ui/blocks/features/feature-accordion-image\";\n\nexport default function Demo() {\n  return (\n    <FeatureAccordionImage\n      title=\"Frequently Asked Questions\"\n      description=\"Learn more about our platform's features and capabilities. Find answers to the most common questions about implementation, security, and pricing.\"\n      items={[\n        {\n          title: \"How does the deployment process work?\",\n          content:\n            \"Our platform uses a simple git-based workflow. Push your code to your repository, and we automatically build, test, and deploy to our global edge network. You'll have a production URL in seconds, complete with SSL certificates and custom domain support.\",\n          imageSrc: imagePlaceholders[41],\n          imageAlt: \"Deployment workflow\",\n        },\n        {\n          title: \"What security features are included?\",\n          content:\n            \"We provide enterprise-grade security out of the box: automatic SSL/TLS encryption, DDoS protection, WAF (Web Application Firewall), SOC 2 Type II compliance, and regular penetration testing. All data is encrypted at rest and in transit.\",\n          imageSrc: imagePlaceholders[66],\n          imageAlt: \"Security features\",\n        },\n        {\n          title: \"Can I integrate with my existing tools?\",\n          content:\n            \"Yes! We offer native integrations with 50+ popular tools including Slack, GitHub, Jira, Datadog, and more. Our comprehensive API and webhooks let you build custom integrations for any workflow.\",\n          imageSrc: imagePlaceholders[87],\n          imageAlt: \"Integration options\",\n        },\n        {\n          title: \"What kind of support do you offer?\",\n          content:\n            \"All plans include 24/7 email support with < 24 hour response times. Pro and Enterprise plans get priority support with < 1 hour response times, dedicated Slack channels, and quarterly business reviews with our success team.\",\n          imageSrc: imagePlaceholders[109],\n          imageAlt: \"Support options\",\n        },\n      ]}\n      defaultValue=\"item-0\"\n      background=\"white\"\n      pattern=\"gridFadeBottomLeft\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of accordion items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Accordion item title","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Accordion item content","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL for this item","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the accordion item","required":false},"triggerClassName":{"type":"string","description":"Additional CSS classes for the trigger","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content","required":false}},"typeLabel":"FeatureAccordionImageItem"},"typeLabel":"FeatureAccordionImageItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"defaultValue":{"type":"string","description":"Default open item value","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid wrapper","required":false},"accordionClassName":{"type":"string","description":"Additional CSS classes for the accordion","required":false},"imageWrapperClassName":{"type":"string","description":"Additional CSS classes for the image wrapper","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","accordion","interactive","images","dynamic","two-column","faq"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3, 6, 9, or 12 `benefits` since the block uses a 3 column layout. Follow the example props closely for this block."},{"id":"feature-animated-carousel","name":"Feature Animated Carousel","title":"Feature Animated Carousel","category":"Features","categorySlug":"features","description":"An interactive feature carousel with animated transitions between feature cards and images. Features a vertical card list with up/down navigation controls on desktop and horizontal swipe on mobile. Uses Framer Motion for smooth animations. Best for product feature showcases, service highlights, and interactive landing pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290481/l85gtlbsqgy15m6bu94jlubzviki/feature-animated-carousel-desktop.png","mobile":"https://cdn.ing/assets/i/r/290480/5y4onxoydckfy5ag12zentfm70vh/feature-animated-carousel-mobile.png"},"componentPath":"blocks/features/feature-animated-carousel.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { FeatureAnimatedCarousel } from \"@opensite/ui/blocks/features/feature-animated-carousel\";\n\nexport default function Demo() {\n  return (\n    <FeatureAnimatedCarousel\n      title=\"Elevate Your Projects\"\n      description=\"Discover the powerful features that set our platform apart. From lightning-fast performance to seamless scalability, explore how we can help you build, deploy, and manage your applications with ease.\"\n      features={[\n        {\n          title: \"Lightning Fast Performance\",\n          description:\n            \"Optimized for speed with sub-100ms response times globally. Edge computing and intelligent caching ensure your users get the best experience.\",\n          image: imagePlaceholders[51],\n          imageAlt: \"Performance dashboard\",\n          href: \"#\",\n        },\n        {\n          title: \"Enterprise Security\",\n          description:\n            \"Bank-level encryption with SOC 2 Type II compliance. Automated security scanning and regular penetration testing keep your data safe.\",\n          image: imagePlaceholders[75],\n          imageAlt: \"Security features\",\n          href: \"#\",\n        },\n        {\n          title: \"Seamless Scalability\",\n          description:\n            \"From zero to millions of users without configuration. Auto-scaling infrastructure handles demand spikes automatically.\",\n          image: imagePlaceholders[99],\n          imageAlt: \"Scalability metrics\",\n          href: \"#\",\n        },\n        {\n          title: \"Real-Time Collaboration\",\n          description:\n            \"Built-in tools for team communication, code review, and project management. Keep everyone aligned and productive.\",\n          image: imagePlaceholders[36],\n          imageAlt: \"Collaboration tools\",\n          href: \"#\",\n        },\n      ]}\n      background=\"gray\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"features":{"type":"array","description":"Array of feature items to display","items":{"type":"object","description":"","fields":{"image":{"type":"string","description":"Image source URL for this feature","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false},"href":{"type":"string","description":"Optional href for item","required":false}},"typeLabel":"FeatureAnimatedCarouselItem"},"typeLabel":"FeatureAnimatedCarouselItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"blockCardClassName":{"type":"string","description":"CSS classes for the block's card container","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","carousel","animated","interactive","cards","showcase","framer-motion","responsive"],"performance":{},"importantUsageNotes":"Ensure to supply 4–8 items in the 'features' array for a well-paced animated carousel. Only use this block if you have valid real images for every item — do not use placeholder/stock images. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:11:37.179Z"}