{"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 { 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={\n                \"https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19\"\n              }\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={\n                \"https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu\"\n              }\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={\n                \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\"\n              }\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,"minItems":2,"maxItems":6},"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}},"exampleProps":{"items":[{"content":"<div><h3>Feature One</h3><p>Description of the feature.</p></div>","mediaComponent":"<img src=\"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp\" alt=\"Feature One\" className=\"w-full h-full object-cover rounded-md\" />"},{"content":"<div><h3>Feature Two</h3><p>Another great capability.</p></div>","mediaComponent":"<img src=\"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp\" alt=\"Feature Two\" className=\"w-full h-full object-cover rounded-md\" />"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","carousel","showcase","slider","highlights","product-features","capabilities","interactive","media-gallery"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each item has a 'content' ReactNode (headings, text) and a 'mediaComponent' ReactNode (images, videos). The carousel handles navigation automatically; provide at least 2 items for pagination to appear. Pass section header content as 'children' above the carousel.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":2,"maxItems":6}}}},{"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,"minItems":3,"maxItems":9},"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}},"exampleProps":{"eyebrow":"Platform Capabilities","heading":"Everything You Need to Scale","items":[{"iconName":"lucide/brain","title":"AI-Powered Insights","description":"Harness machine learning to surface actionable insights automatically."},{"iconName":"lucide/zap","title":"Lightning Performance","description":"Sub-100ms response times powered by our global edge network."},{"iconName":"lucide/shield","title":"Enterprise Security","description":"SOC 2 compliant with end-to-end encryption and audit logging."}],"background":"dark","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","capabilities","grid","cards","icons","dark","hover","ai","platform"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/brain') — no image needed for icons. Supports optional 'href' on each item for linking.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"items":{"minItems":3,"maxItems":9}}}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\"}\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,"minItems":1,"maxItems":2},"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}},"exampleProps":{"title":"Build Faster with Our Components","description":"Hundreds of finely crafted components built with React and Tailwind CSS, ready to drop into your project.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Team working together in a modern office","actions":[{"label":"Get Started","href":"/signup","variant":"default"},{"label":"Learn More","href":"/docs","variant":"outline"}],"background":"default","spacing":"py-6 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","split-layout","two-column","image","product","capabilities","benefits","cta"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Use 'imageSrc' for a simple image URL; use 'imageSlot' to pass a custom ReactNode. Supports up to 2 CTA buttons via the 'actions' array.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"actions":{"minItems":1,"maxItems":2}}}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/8qkikcd43paeqgvw9gc1032j3yup\"}\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,"minItems":1,"maxItems":2},"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}},"exampleProps":{"title":"Designed for Developers","description":"Copy and paste components directly into your project. No configuration required.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Developer workspace","actions":[{"label":"Get Started","href":"/signup","variant":"default"},{"label":"View Docs","href":"/docs","variant":"outline"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","split-layout","two-column","image","reverse","product","capabilities","benefits"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Mirror of 'feature-split-image' — image column is placed first (left) on desktop. Use 'imageSrc' for a simple URL; use 'imageSlot' for a custom ReactNode.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"actions":{"minItems":1,"maxItems":2}}}},{"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,"minItems":4,"maxItems":8},"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}},"exampleProps":{"label":"Why Choose Us?","title":"A Better Way to Build","features":[{"iconName":"lucide/timer","title":"Performance","description":"Optimized for speed with sub-100ms load times."},{"iconName":"lucide/zap","title":"Innovation","description":"Cutting-edge technology for modern applications."},{"iconName":"lucide/shield","title":"Security","description":"Enterprise-grade security built in from day one."},{"iconName":"lucide/users","title":"Collaboration","description":"Real-time collaboration tools for your entire team."}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","grid","icons","bordered","four-column","capabilities","benefits"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/timer'). No images — icons only. Supports optional 'href' on each feature item.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"features":{"minItems":4,"maxItems":8}}}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/0kx9umbfmv881wt9dfqnohv8efgi\"}\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,"minItems":0,"maxItems":2},"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,"minItems":3,"maxItems":8},"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}},"exampleProps":{"title":"Built with the Latest Technology Stack","description":"Modern tools and frameworks chosen for optimal performance, reliability, and developer experience.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Modern technology stack","checklistItems":["Production-ready quality","Multi-purpose and extensible","Easy to use and customize","Blazing fast performance"],"actions":[{"label":"Learn More","href":"/features","variant":"outline"}],"background":"default","spacing":"py-6 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","checklist","image","benefits","split-layout","two-column","product"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. description Use 'checklistItems' or the alias 'benefits' — both work. Supports CTA buttons via the 'actions' array.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"checklistItems":{"minItems":3,"maxItems":8},"actions":{"minItems":0,"maxItems":2}}}},{"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,"minItems":3,"maxItems":8},"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}},"exampleProps":{"badge":"Features","title":"Everything You Need","description":"A complete platform with all the tools you need to build, launch, and grow.","carouselLabel":"Explore features","slides":[{"iconName":"lucide/code","title":"Modern Codebase","description":"Clean, well-documented code following best practices."},{"iconName":"lucide/layout","title":"Responsive Design","description":"Looks great on every device and screen size."},{"iconName":"lucide/rocket","title":"Fast Deployment","description":"Ship to production in minutes, not days."}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","carousel","slider","progress","interactive","showcase","product"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' on slides (e.g., 'lucide/code'). No images on slides. The progress bar tracks carousel position automatically. title","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"slides":{"minItems":3,"maxItems":8}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/ihhq8unynafk4aikmys3rhbfibaz\",\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: \"https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo\",\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: \"https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx\",\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: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\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,"minItems":2,"maxItems":8},"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}},"exampleProps":{"title":"Explore Our Features","description":"Discover everything the platform has to offer.","features":[{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics dashboard","label":"Analytics","heading":"Real-Time Insights","description":"Monitor your metrics as they happen with live dashboards.","url":"/features/analytics"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Automation interface","label":"Automation","heading":"Workflow Automation","description":"Automate repetitive tasks and focus on what matters.","url":"/features/automation"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Collaboration tools","label":"Collaboration","heading":"Team Collaboration","description":"Work together seamlessly with real-time collaboration.","url":"/features/collaboration"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security features","label":"Security","heading":"Enterprise Security","description":"Keep your data safe with enterprise-grade security.","url":"/features/security"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","grid","cards","linked","two-column","images","resources"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. label heading description","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"features":{"minItems":2,"maxItems":8}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\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: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\",\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: \"https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu\",\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,"minItems":2,"maxItems":5},"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}},"exampleProps":{"title":"How It Works","description":"Three simple steps to get started with our platform.","features":[{"title":"Create Your Account","description":"Sign up in minutes with just your email address.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Account creation screen","checklistItems":["No credit card required","Free tier available"],"actions":[{"label":"Sign Up Free","href":"/signup","variant":"default"}]},{"title":"Connect Your Tools","description":"Integrate with the services you already use.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Integration dashboard","checklistItems":["100+ integrations","One-click setup"]},{"title":"Start Building","description":"Launch your first project in minutes.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Project builder","checklistItems":["Visual editor","Live preview"]}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","numbered","cards","steps","process","images","ranked"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description Number badges are auto-generated based on array index.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"features":{"minItems":2,"maxItems":5}}}},{"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,"minItems":3,"maxItems":9},"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}},"exampleProps":{"label":"Core Features","title":"Built for Scale","description":"Everything you need to run a high-performance platform.","features":[{"iconName":"lucide/zoom-in","title":"Deep Analytics","description":"Drill into every metric with our powerful analytics engine."},{"iconName":"lucide/cpu","title":"Edge Computing","description":"Process data closer to your users for ultra-low latency."},{"iconName":"lucide/lock","title":"Zero-Trust Security","description":"Every request verified, every connection encrypted."}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","grid","icons","accent","two-column","colorful","capabilities"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/zoom-in'). No images. Accent color for icon backgrounds comes from the site's theme.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"features":{"minItems":3,"maxItems":9}}}},{"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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"label":"Our Values","title":"What We Stand For","values":[{"iconName":"lucide/heart","title":"Customer First","description":"Every decision starts and ends with what's best for our customers."},{"iconName":"lucide/lightbulb","title":"Innovation","description":"We push the boundaries of what's possible every single day."},{"iconName":"lucide/users","title":"Community","description":"Building together is better than building alone."}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","values","three-column","grid","icons","principles","benefits"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/timer'). No images. Supports optional 'href' on each value item.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"values":{"minItems":3,"maxItems":6}}}},{"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,"minItems":3,"maxItems":9},"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}},"exampleProps":{"label":"Features","title":"Everything You Need","features":[{"iconName":"lucide/git-pull-request","heading":"Version Control","description":"Full Git integration with branch management."},{"iconName":"lucide/layers","heading":"Component Library","description":"200+ pre-built components ready to use."},{"iconName":"lucide/cloud","heading":"Cloud Storage","description":"Unlimited storage with automatic backups."},{"iconName":"lucide/bar-chart","heading":"Analytics","description":"Real-time insights into your application."},{"iconName":"lucide/bell","heading":"Notifications","description":"Smart alerts that keep your team informed."},{"iconName":"lucide/plug","heading":"Integrations","description":"Connect with 100+ third-party services."}],"action":{"label":"View All Features","href":"/features","variant":"outline"},"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","grid","six-column","badge","icons","cta","capabilities"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/git-pull-request'). No images. Grid is designed for 6 items (2×3 or 3×2) but accepts 3–9. Provide a 'label' for the badge and a 'title' for the main heading. The 'action' prop controls the single optional CTA button.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"features":{"minItems":3,"maxItems":9}}}},{"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,"minItems":3,"maxItems":9},"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}},"exampleProps":{"title":"Explore Our Platform","description":"Deep dive into the tools that power your success.","features":[{"iconName":"lucide/zoom-in","title":"Advanced Search","description":"Full-text search across all your content.","link":"/docs/search","linkLabel":"Learn more"},{"iconName":"lucide/database","title":"Data Management","description":"Flexible schemas that adapt to your needs.","link":"/docs/data","linkLabel":"Learn more"},{"iconName":"lucide/code-2","title":"Developer API","description":"Comprehensive REST and GraphQL APIs.","link":"/docs/api","linkLabel":"View docs"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","grid","pattern","links","six-column","icons","learn-more"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/zoom-in'). No images. Each item supports a 'link' URL and 'linkLabel' text for an inline CTA.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"features":{"minItems":3,"maxItems":9}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\",\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: \"https://toastability-production.s3.amazonaws.com/u3p1hlbm2c1vvkwlm8h668pe132z\",\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: \"https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv\",\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,"minItems":2,"maxItems":5},"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}},"exampleProps":{"title":"Complete Development Platform","description":"From development to deployment and monitoring, everything you need.","background":"dark","pattern":"dashedGridFadeTop","patternOpacity":0.2,"slides":[{"id":"development","tabName":"Development","title":"Build Faster with Modern Tools","description":"Comprehensive development environment with everything you need.","features":["Hot module replacement for instant feedback","Built-in TypeScript support and type checking","Integrated testing framework with coverage reports"],"actions":[{"label":"Start Building","href":"#","variant":"default"}],"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Development environment"},{"id":"deployment","tabName":"Deployment","title":"Deploy to Production in Seconds","description":"Push your code and let our platform handle the rest.","features":["Zero-downtime deployments with instant rollbacks","Automatic SSL certificates and custom domains","Global CDN with 200+ edge locations"],"actions":[{"label":"View Deployment Guide","href":"#","variant":"default"}],"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Deployment pipeline"}],"defaultTab":"development"},"dependencies":["@opensite/ui"],"tags":["features","tabs","tabbed","interactive","images","checklist","cta"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Set 'defaultTab' to the 'id' of the initially active tab.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"slides":{"minItems":2,"maxItems":5}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/5jsc0b4e3gxnjs81iotw2c3e6da3\",\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: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\",\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: \"https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k\",\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},"items":{"type":"object","description":"","minItems":2,"maxItems":6}},"exampleProps":{"label":"Utilities","labelIconName":"lucide/wrench","title":"Tools Built for Your Workflow","description":"Powerful utilities that integrate seamlessly into your stack.","items":[{"title":"Image Optimizer","description":"Automatically compress and convert images for the web.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Image optimization tool","href":"/tools/images"},{"title":"Performance Monitor","description":"Track Core Web Vitals and performance metrics in real time.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Performance monitoring dashboard","href":"/tools/performance"},{"title":"Security Scanner","description":"Continuous vulnerability scanning for your applications.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security scanner interface","href":"/tools/security"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","utilities","grid","cards","images","three-column","tools"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description A label with optional icon can be placed above the grid heading.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":2,"maxItems":6}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo\",\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: \"https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75\",\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},"cards":{"type":"object","description":"","minItems":3,"maxItems":8}},"exampleProps":{"label":"Platform","title":"One Platform, Infinite Possibilities","cards":[{"title":"AI Content Generation","description":"Generate high-quality content with a single prompt.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI content generation interface","showSparkle":true},{"title":"Visual Page Builder","description":"Drag-and-drop your way to beautiful pages.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Page builder interface"},{"title":"Analytics Dashboard","description":"Real-time insights into every aspect of your site.","badge":"Coming soon","isDashed":true}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","bento","grid","utilities","mixed-sizes","images","modern"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Cards can have 'imageSrc' (URL) for visual cards or just 'title'/'description' for text-only cards. Use 'isDashed: true' for coming-soon placeholder cards. Use 'showSparkle: true' to display a sparkle icon next to the title. Use 'badge' for status labels like 'Coming soon'.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"cards":{"minItems":3,"maxItems":8}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\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: \"https://toastability-production.s3.amazonaws.com/0g6t701zqr2r7najmdgftpeqnxmz\",\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: \"https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls\",\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,"minItems":3,"maxItems":3},"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}},"exampleProps":{"cards":[{"title":"Starter","description":"Everything you need to get started.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Starter plan","badge":"Free","checklistItems":["5 projects","Basic analytics","Community support"],"link":"/pricing","linkLabel":"Get started"},{"title":"Professional","description":"For growing teams that need more power.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Professional plan","badge":"Popular","checklistItems":["Unlimited projects","Advanced analytics","Priority support"],"link":"/pricing","linkLabel":"Start free trial"},{"title":"Enterprise","description":"Custom solutions for large organizations.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Enterprise plan","checklistItems":["Custom limits","Dedicated support","SLA guarantee"],"link":"/contact","linkLabel":"Contact sales"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","checklist","three-column","cards","images","badges","benefits"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description badge link Grid is fixed at 3 columns on lg.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"cards":{"minItems":3,"maxItems":3}}}},{"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,"minItems":3,"maxItems":8},"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}},"exampleProps":{"title":"Powerful Integrations","description":"Connect seamlessly with the tools your team already uses. One-click setup gets you started in minutes.","integrations":[{"icon":"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png","iconAlt":"Slack logo","title":"Slack","description":"Get real-time notifications directly in your Slack channels.","link":"#","linkLabel":"Connect Slack"},{"icon":"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png","iconAlt":"GitHub logo","title":"GitHub","description":"Sync repositories and automate workflows with GitHub Actions.","link":"#","linkLabel":"Connect GitHub"},{"icon":"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png","iconAlt":"Google Workspace logo","title":"Google Workspace","description":"Integrate with Gmail, Calendar, and Drive.","link":"#","linkLabel":"Connect Google"},{"icon":"https://cdn.ing/assets/i/r/288970/op9ys0gsyi7len3w742n0os7ebu6/ui-placeholder-logo-black-4.png","iconAlt":"Salesforce logo","title":"Salesforce","description":"Sync customer data and automate your sales workflow.","link":"#","linkLabel":"Connect Salesforce"}],"background":"dark","pattern":"diagonalCrossBasic","patternOpacity":0.1},"dependencies":["@opensite/ui"],"tags":["features","integrations","cards","grid","icons","external-links","partners"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Use 'iconAlt' for accessibility text on the logo image. Supports 'link' and 'linkLabel' on each card for a 'Connect' CTA.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"integrations":{"minItems":3,"maxItems":8}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\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: \"https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh\",\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: \"https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606\",\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,"minItems":2,"maxItems":5},"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}},"exampleProps":{"title":"One Platform, Many Solutions","description":"Discover how our platform adapts to your unique needs.","tabs":[{"value":"marketing","iconName":"lucide/zap","label":"Marketing","content":{"badge":"Marketing","title":"Grow Your Audience Faster","description":"Powerful marketing tools to attract, engage, and convert visitors.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Marketing dashboard","actions":[{"label":"Explore Marketing","href":"#","variant":"default"}]}},{"value":"analytics","iconName":"lucide/bar-chart","label":"Analytics","content":{"badge":"Analytics","title":"Data-Driven Decisions","description":"Real-time analytics and insights to guide your strategy.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics dashboard","actions":[{"label":"Explore Analytics","href":"#","variant":"default"}]}},{"value":"automation","iconName":"lucide/settings","label":"Automation","content":{"badge":"Automation","title":"Work Smarter, Not Harder","description":"Automate repetitive tasks and free your team for what matters.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Automation workflow","actions":[{"label":"Explore Automation","href":"#","variant":"default"}]}}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","tabs","icons","interactive","images","cta","showcase"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description badge","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"tabs":{"minItems":2,"maxItems":5}}}},{"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 { 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={\"https://toastability-production.s3.amazonaws.com/9z0sbfnskx70vse99e3dfhper7i1\"}\n      imageAlt=\"Customer success story\"\n      avatarSrc={\"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\"}\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,"minItems":0,"maxItems":2},"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}},"exampleProps":{"badge":"Case Study","title":"How Acme Corp 10x'd Their Revenue","description":"Learn how Acme Corp used our platform to transform their customer acquisition and grow from startup to enterprise.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Acme Corp team working in their office","avatarSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","avatarBadgeText":"CEO","overlayTitle":"Acme Corp","overlayLinkText":"Read the full story","overlayLinkUrl":"/case-studies/acme","actions":[{"label":"Read Case Study","href":"/case-studies/acme","variant":"default"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","image","overlay","badge","avatar","gradient","cta","two-column"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Use 'imageSrc' for the main background/hero image and 'avatarSrc' for the overlay badge avatar. The overlay card is positioned on top of the image — ensure image has enough visual space.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"actions":{"minItems":0,"maxItems":2}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo\",\n          imageAlt: \"Authentication features\",\n        },\n        {\n          title: \"Data Analytics\",\n          category: \"Insights & Reporting\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/9ujya2tfhxja7y5s9wb7d2u8crhd\",\n          imageAlt: \"Analytics dashboard\",\n        },\n        {\n          title: \"API Management\",\n          category: \"Developer Tools\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm\",\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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"badge":"Services","title":"What We Offer","description":"Explore our full range of solutions designed to help your business grow.","features":[{"title":"Web Development","category":"Development","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Web development services","href":"/services/web"},{"title":"Mobile Apps","category":"Development","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Mobile app development","href":"/services/mobile"},{"title":"Cloud Infrastructure","category":"DevOps","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud infrastructure services","href":"/services/cloud"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","categories","cards","images","grid","three-column","showcase"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"features":{"minItems":3,"maxItems":6}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y\",\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: \"https://toastability-production.s3.amazonaws.com/w41h7890eivogu3sr78vlwkpzz8g\",\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: \"https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr\",\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: \"https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb\",\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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"title":"A Platform Built for Growth","description":"Explore the features that make us the best choice for your team.","items":[{"iconName":"lucide/atom","iconBadge":"New","title":"AI Assistance","linkText":"Learn more","link":"/features/ai","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI assistance feature","size":"large"},{"iconName":"lucide/database","title":"Data Sync","linkText":"Learn more","link":"/features/sync","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Data synchronization","size":"small"},{"iconName":"lucide/globe","title":"Global CDN","linkText":"Learn more","link":"/features/cdn","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Global CDN network","size":"small"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","bento","grid","images","gradient","overlay","asymmetric","modern"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Use 'iconName' in format 'prefix/name' for the icon badge on each card. Cards with 'size: 'large'' span more columns than 'size: 'small''. link","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":6}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\",\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: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\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: \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\",\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},"items":{"type":"object","description":"","minItems":3,"maxItems":3}},"exampleProps":{"title":"Feature Highlights","description":"Three powerful capabilities that set us apart.","items":[{"iconName":"lucide/zap","badgeText":"Performance","title":"Lightning Fast","subtitle":"Sub-100ms response times globally.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Performance metrics","linkText":"Learn more","link":"/features/performance"},{"iconName":"lucide/shield","badgeText":"Security","title":"Zero-Trust Security","subtitle":"Every request authenticated and encrypted.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Security architecture","linkText":"Learn more","link":"/features/security"},{"iconName":"lucide/bar-chart","badgeText":"Analytics","title":"Real-Time Insights","subtitle":"Live data dashboards for your entire stack.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics dashboard","linkText":"Learn more","link":"/features/analytics"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","cards","images","three-column","gradient","overlay","cta"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each card can use either 'iconName' (format 'prefix/name') or 'avatarSrc' (URL) for the card icon. badgeText title subtitle linkText","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":3}}}},{"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,"minItems":3,"maxItems":9},"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}},"exampleProps":{"title":"Built-In Capabilities","description":"A full suite of tools included out of the box.","features":[{"iconName":"lucide/check-circle-2","title":"Auto-Scaling","description":"Automatically scales to handle any traffic spike."},{"iconName":"lucide/check-circle-2","title":"99.99% Uptime SLA","description":"Enterprise-grade reliability you can count on."},{"iconName":"lucide/check-circle-2","title":"24/7 Support","description":"Round-the-clock support from our expert team."},{"iconName":"lucide/check-circle-2","title":"Automated Backups","description":"Daily backups with one-click restore."},{"iconName":"lucide/check-circle-2","title":"Custom Domains","description":"Bring your own domain with free SSL."},{"iconName":"lucide/check-circle-2","title":"Team Management","description":"Role-based access control for your entire organization."}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","grid","icons","muted","five-column","capabilities","benefits"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' (e.g., 'lucide/check-circle-2'). No images. Supports optional 'href' on each item.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"features":{"minItems":3,"maxItems":9}}}},{"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,"minItems":0,"maxItems":2},"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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"badge":"By the Numbers","title":"Trusted by Thousands of Teams","description":"Our platform is used by teams of all sizes, from startups to Fortune 500 companies.","stats":[{"value":"99.99%","label":"Uptime SLA"},{"value":"10M+","label":"API requests per day"},{"value":"<50ms","label":"Average response time"},{"value":"150+","label":"Countries served"}],"actions":[{"label":"Start Free Trial","href":"/signup","variant":"default"},{"label":"Contact Sales","href":"/contact","variant":"outline"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","stats","metrics","achievements","cta","two-column","trust"],"performance":{},"importantUsageNotes":"Use 'stats' array with 'value' (e.g., '99%', '24/7') and 'label' text. No images required — stats cards are text-only. Requires 'stats_or_metrics' site capability for accurate stat data. title description","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"],"propConstraints":{"stats":{"minItems":3,"maxItems":6},"actions":{"minItems":0,"maxItems":2}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7\",\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: \"https://toastability-production.s3.amazonaws.com/vrezhtksoqbw1nyo4hwnoqizrus5\",\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: \"https://toastability-production.s3.amazonaws.com/ytbyjrcvrghc7wl6w1g7g8fwka22\",\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: \"https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy\",\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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"title":"Frequently Asked Questions","description":"Everything you need to know about our platform.","defaultValue":"What makes your platform unique?","items":[{"title":"What makes your platform unique?","content":"Our platform combines AI-powered automation with an intuitive visual editor, giving you the power to build enterprise-grade applications without writing a single line of code.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Platform unique features"},{"title":"How does pricing work?","content":"We offer flexible plans starting with a generous free tier. Upgrade as you grow with transparent, usage-based pricing and no hidden fees.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Pricing plans"},{"title":"Is enterprise support available?","content":"Yes, our enterprise plan includes dedicated support, SLA guarantees, custom integrations, and a dedicated success manager.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Enterprise support"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","accordion","interactive","images","dynamic","two-column","faq"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Set 'defaultValue' to the title of the initially open item.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":6}}}},{"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 { 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: \"https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip\",\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: \"https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u\",\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: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\",\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: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\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,"minItems":3,"maxItems":6},"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}},"exampleProps":{"title":"A Complete Platform for Modern Teams","description":"Explore the features that make building and shipping faster than ever before.","features":[{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Visual page builder","title":"Visual Page Builder","description":"Build pages visually with drag-and-drop simplicity.","href":"/features/builder"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI content generation","title":"AI Content Generation","description":"Generate compelling copy in seconds with AI assistance.","href":"/features/ai"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Analytics and reporting","title":"Analytics & Reporting","description":"Track every metric that matters to your business.","href":"/features/analytics"},{"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Global deployment","title":"Global Deployment","description":"Ship to 200+ edge locations in one click.","href":"/features/deploy"}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","carousel","animated","interactive","cards","showcase","framer-motion","responsive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. title description The active item is highlighted in the nav; clicking switches the displayed image with animation.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"features":{"minItems":3,"maxItems":6}}}}]},"timestamp":"2026-06-27T18:47:37.781Z"}