{"success":true,"data":{"category":{"slug":"process","name":"Process","description":"Collection of process components"},"blocks":[{"id":"process-sticky-steps","name":"Process Sticky Steps","title":"Process Sticky Steps","category":"Process","categorySlug":"process","description":"A process section with a sticky left sidebar containing title, description, and CTA, paired with a scrollable right column of numbered step cards. Each step features a decorative corner illustration and displays step number, title, and description. Ideal for showcasing methodologies, workflows, or multi-step processes.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290534/chi37fdy54oymoo1w9sc7e49mt4a/process-sticky-steps-desktop.png","mobile":"https://cdn.ing/assets/i/r/290535/4fnc9khpwby3po22n4lt9fpjdqdt/process-sticky-steps-mobile.png"},"componentPath":"blocks/process/process-sticky-steps.tsx","code":"import { ProcessStickySteps } from \"@opensite/ui/blocks/process/process-sticky-steps\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <ProcessStickySteps\n      heading=\"Delivery Process\"\n      description=\"A transparent, collaborative approach that keeps you informed and engaged throughout the project lifecycle.\"\n      actions={[\n        {\n          label: \"Schedule a Call\",\n          href: \"/contact\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/phone\" size={16} />,\n        },\n        {\n          label: \"View Pricing\",\n          href: \"/pricing\",\n          variant: \"outline\",\n        },\n      ]}\n      steps={[\n        {\n          step: \"01\",\n          title: \"Project Kickoff\",\n          description: \"Align on goals, timeline, and success criteria. Meet the team, review the project plan, and establish communication protocols for seamless collaboration.\",\n        },\n        {\n          step: \"02\",\n          title: \"Sprint Planning\",\n          description: \"Break down deliverables into manageable sprints. Prioritize features based on value and complexity, ensuring we tackle the most critical items first.\",\n        },\n        {\n          step: \"03\",\n          title: \"Design Review\",\n          description: \"Present wireframes and mockups for feedback. Iterate based on stakeholder input to ensure the design meets both user needs and business objectives.\",\n        },\n        {\n          step: \"04\",\n          title: \"Development Cycles\",\n          description: \"Build features incrementally with regular check-ins. Demo working software at the end of each sprint to gather feedback and adjust priorities.\",\n        },\n        {\n          step: \"05\",\n          title: \"Quality Assurance\",\n          description: \"Conduct thorough testing across all scenarios. Identify and resolve issues before they reach production, ensuring a smooth user experience.\",\n        },\n        {\n          step: \"06\",\n          title: \"Deployment & Support\",\n          description: \"Launch to production with monitoring and support. Provide training, documentation, and ongoing assistance to ensure successful adoption.\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"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},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"step":{"type":"object","description":"Step number or label (e.g., \"01\", \"Step 1\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false},"href":{"type":"string","description":"Optional URL","required":false}},"typeLabel":"ProcessStickyStepItem"},"typeLabel":"ProcessStickyStepItem[]","required":true,"minItems":4,"maxItems":8},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"stepsClassName":{"type":"string","description":"Additional CSS classes for the steps list","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].step":{"type":"object","description":""},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":220}},"exampleProps":{"heading":"Delivery Process","description":"A transparent, collaborative approach that keeps you informed throughout the project lifecycle.","actions":[{"label":"Schedule a Call","href":"/contact","variant":"default"},{"label":"View Pricing","href":"/pricing","variant":"outline"}],"steps":[{"step":"01","title":"Project Kickoff","description":"Align on goals, timeline, and success criteria."},{"step":"02","title":"Sprint Planning","description":"Break deliverables into focused sprints prioritised by value."},{"step":"03","title":"Design Review","description":"Present wireframes for feedback and iterate quickly."},{"step":"04","title":"Development Cycles","description":"Build features incrementally with end-of-sprint demos."},{"step":"05","title":"Quality Assurance","description":"Thorough testing across all scenarios before release."},{"step":"06","title":"Deployment & Support","description":"Launch with monitoring, training, and ongoing assistance."}],"spacing":"xl","background":"dark"},"dependencies":["@opensite/ui"],"tags":["process","steps","methodology","workflow","sticky","sidebar","numbered","how-it-works","timeline"],"performance":{},"importantUsageNotes":"Use for a 4-to-8 step linear process where the left column (heading} ${CTA) should stay visible while the user scrolls through steps. No image props exist — this is a text/number-only layout. Keep each step description under 2 sentences. step values are display labels (e.g. '01'); omit to auto-number.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":60},"description":{"maxLength":200},"steps":{"required":true,"minItems":4,"maxItems":8},"steps[].step":{"note":"Short step label like '01'. Auto-generated if omitted."},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":220}},"mediaSlots":{}}},{"id":"process-scroll-image","name":"Process Scroll Image","title":"Process Scroll Image","category":"Process","categorySlug":"process","description":"A scroll-triggered process section with a sticky left panel containing title, description, animated image carousel, and CTA. As users scroll through the numbered steps on the right, the corresponding image animates into view with a clip-path reveal effect. Perfect for visual storytelling and step-by-step guides.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290536/680qw4gmev6cjmc12vu3p9d82fcl/process-scroll-image-desktop.png","mobile":"https://cdn.ing/assets/i/r/290537/vwhw8lhv8s60ppxohpyqe3r9zajy/process-scroll-image-mobile.png"},"componentPath":"blocks/process/process-scroll-image.tsx","code":"import { ProcessScrollImage } from \"@opensite/ui/blocks/process/process-scroll-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <ProcessScrollImage\n      heading=\"Build. Test. Launch.\"\n      description=\"Our agile methodology ensures rapid delivery without compromising quality.\"\n      actions={[\n        {\n          label: \"Start Your Project\",\n          href: \"/get-started\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Case Studies\",\n          href: \"/case-studies\",\n          variant: \"outline\",\n        },\n      ]}\n      steps={[\n        {\n          step: \"01\",\n          title: \"Requirements Gathering\",\n          description: \"Comprehensive analysis of business needs, technical requirements, and user expectations. We create detailed specifications that serve as the blueprint for success.\",\n          image: \"https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc\",\n        },\n        {\n          step: \"02\",\n          title: \"Architecture Planning\",\n          description: \"Design scalable system architecture that supports growth. We select the right technologies, define data structures, and plan integration points.\",\n          image: \"https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e\",\n        },\n        {\n          step: \"03\",\n          title: \"Iterative Development\",\n          description: \"Build features in focused sprints with continuous feedback loops. Regular demos and stakeholder reviews ensure alignment throughout the process.\",\n          image: \"https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw\",\n        },\n        {\n          step: \"04\",\n          title: \"Automated Testing\",\n          description: \"Comprehensive test coverage including unit tests, integration tests, and end-to-end scenarios. Catch bugs early and maintain code quality.\",\n          image: \"https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx\",\n        },\n        {\n          step: \"05\",\n          title: \"Staged Rollout\",\n          description: \"Gradual deployment strategy with feature flags, monitoring, and rollback capabilities. Minimize risk while maximizing user satisfaction.\",\n          image: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":60},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"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},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"step":{"type":"object","description":"Step number or label (e.g., \"01\", \"Step 1\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image URL for the step","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessScrollImageItem"},"typeLabel":"ProcessScrollImageItem[]","required":true,"minItems":3,"maxItems":6,"mediaHints":{"path":"steps[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"preferredAspect":"4/3","note":"Per-step visual revealed as the user scrolls past each step. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"stepsClassName":{"type":"string","description":"Additional CSS classes for the steps list","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":220},"steps[].image":{"type":"object","description":"","required":true}},"exampleProps":{"heading":"Build. Test. Launch.","description":"Our agile methodology ensures rapid delivery without compromising quality.","actions":[{"label":"Start Your Project","href":"/get-started","variant":"default"},{"label":"View Case Studies","href":"/case-studies","variant":"outline"}],"steps":[{"step":"01","title":"Requirements Gathering","description":"Comprehensive analysis of business needs.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"02","title":"Architecture Planning","description":"Design scalable system architecture.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"03","title":"Iterative Development","description":"Build features in focused sprints.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"04","title":"Staged Rollout","description":"Gradual deployment with rollback capabilities.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}],"spacing":"xl","background":"white"},"dependencies":["@opensite/ui"],"tags":["process","scroll","animation","image","carousel","interactive","visual","storytelling","steps"],"performance":{},"importantUsageNotes":"Each step's image transitions with a spring animation as the user scrolls past it. Provide a real absolute image URL for every step — steps without images will show a blank panel. Keep 3–6 steps for best scroll pacing. image must be a direct absolute URL string, not a ReactNode.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":60},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":6},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":220},"steps[].image":{"required":true,"note":"Absolute URL to a real image. Required for the scroll-triggered image reveal to work."}},"mediaSlots":{"steps[].image":{"path":"steps[].image","roles":["feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"preferredAspect":"4/3","note":"Per-step visual revealed as the user scrolls past each step. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"id":"process-hover-cards","name":"Process Hover Cards","title":"Process Hover Cards","category":"Process","categorySlug":"process","description":"A process section with hover-activated cards that reveal floating images on desktop. Each step displays a mono-font number, title, and description with smooth hover transitions. The floating image appears with a fade-in animation when hovering. Ideal for interactive process showcases and service overviews.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290538/roag3w8ld9hxnei8f3rbzdjjhtbo/process-hover-cards-desktop.png","mobile":"https://cdn.ing/assets/i/r/290539/u9toe2q9b5q3a5rjekbrs8cvxe68/process-hover-cards-mobile.png"},"componentPath":"blocks/process/process-hover-cards.tsx","code":"import { ProcessHoverCards } from \"@opensite/ui/blocks/process/process-hover-cards\";\n\nexport default function Demo() {\n  return (\n    <ProcessHoverCards\n      heading=\"How We Work\"\n      description=\"A streamlined approach to delivering exceptional digital experiences\"\n      steps={[\n        {\n          step: \"01\",\n          title: \"Ideate & Define\",\n          description:\n            \"Transform your vision into a clear project scope with detailed requirements, user personas, and success metrics.\",\n          image: \"https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y\",\n        },\n        {\n          step: \"02\",\n          title: \"Design & Prototype\",\n          description:\n            \"Create stunning interfaces that balance aesthetics with usability, validated through user testing and stakeholder feedback.\",\n          image: \"https://toastability-production.s3.amazonaws.com/ihhq8unynafk4aikmys3rhbfibaz\",\n        },\n        {\n          step: \"03\",\n          title: \"Build & Integrate\",\n          description:\n            \"Develop robust solutions using cutting-edge technologies, with seamless integration of APIs, databases, and third-party services.\",\n          image: \"https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb\",\n        },\n        {\n          step: \"04\",\n          title: \"Test & Refine\",\n          description:\n            \"Ensure quality through comprehensive testing, performance optimization, and iterative improvements based on real-world usage.\",\n          image: \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\n        },\n        {\n          step: \"05\",\n          title: \"Deploy & Scale\",\n          description:\n            \"Launch your product with confidence and scale it efficiently as your user base grows, with ongoing monitoring and support.\",\n          image: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n        },\n      ]}\n      background=\"secondary\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"step":{"type":"object","description":"Step number or label (e.g., \"01\", \"Step 1\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image URL for hover reveal","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessHoverCardItem"},"typeLabel":"ProcessHoverCardItem[]","required":true,"minItems":3,"maxItems":7,"mediaHints":{"path":"steps[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Hover-reveal image for each step row. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"stepsClassName":{"type":"string","description":"Additional CSS classes for the steps list","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","required":false},"hoverImageClassName":{"type":"string","description":"Additional CSS classes for the hover image 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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":200},"steps[].image":{"type":"object","description":"","required":false}},"exampleProps":{"heading":"How We Work","description":"A streamlined approach to delivering exceptional digital experiences.","steps":[{"step":"01","title":"Ideate & Define","description":"Transform your vision into a clear project scope.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"02","title":"Design & Prototype","description":"Create stunning interfaces validated through testing.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"03","title":"Build & Integrate","description":"Develop robust solutions with seamless integration.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"step":"04","title":"Deploy & Scale","description":"Launch confidently and scale as your user base grows.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}],"background":"secondary"},"dependencies":["@opensite/ui"],"tags":["process","hover","interactive","cards","image","animation","services","steps"],"performance":{},"importantUsageNotes":"On desktop, hovering a row reveals the step image in a floating card on the right. On mobile the image is shown inline above the text. image is optional per step — omit to show the step as text-only. Provide absolute URLs; do not use placeholder variables.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":7},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":200},"steps[].image":{"required":false,"note":"Absolute URL. If provided, shown on hover (desktop) or inline (mobile)."}},"mediaSlots":{"steps[].image":{"path":"steps[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"preferredAspect":"4/3","note":"Hover-reveal image for each step row. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"id":"process-icon-timeline","name":"Process Icon Timeline","title":"Process Icon Timeline","category":"Process","categorySlug":"process","description":"A vertical timeline with colored icon badges and alternating left/right card layout. Each step features a customizable colored badge with icon, title, description, and optional highlight tags. The timeline line connects all steps visually. Perfect for detailed process flows, project phases, or methodology explanations.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/309637/i3m7gqqz9lso2emvz1bzx86ude5x/process-icon-timeline-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/309638/n4h67uxyy5rm17ojy6otedpt3piv/process-icon-timeline-mobile.jpg"},"componentPath":"blocks/process/process-icon-timeline.tsx","code":"import { ProcessIconTimeline } from \"@opensite/ui/blocks/process/process-icon-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessIconTimeline\n      heading=\"Product Development Timeline\"\n      description=\"From concept to launch, our proven process ensures success at every milestone.\"\n      background=\"dark\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.1}\n      steps={[\n        {\n          icon: \"lucide/lightbulb\",\n          title: \"Concept & Validation\",\n          description:\n            \"Validate your idea through market research, competitive analysis, and user interviews. Define the value proposition and identify target markets.\",\n          highlights: [\n            \"Market Research\",\n            \"User Surveys\",\n            \"Competitive Analysis\",\n          ],\n        },\n        {\n          icon: \"lucide/layout\",\n          title: \"Design & Wireframing\",\n          description:\n            \"Create detailed wireframes and user flows. Develop a cohesive design system that scales across your product.\",\n          highlights: [\"Wireframes\", \"Design System\", \"User Flows\"],\n        },\n        {\n          icon: \"lucide/code\",\n          title: \"Development Sprint\",\n          description:\n            \"Build the MVP with agile methodology. Implement core features with clean, maintainable code and automated testing.\",\n          highlights: [\"Agile Sprints\", \"Code Reviews\", \"Automated Tests\"],\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Beta Testing\",\n          description:\n            \"Launch beta program with early adopters. Gather feedback, fix bugs, and refine features based on real user behavior.\",\n          highlights: [\"User Feedback\", \"Bug Fixes\", \"Feature Refinement\"],\n        },\n        {\n          icon: \"lucide/rocket\",\n          title: \"Production Launch\",\n          description:\n            \"Deploy to production with comprehensive monitoring. Execute go-to-market strategy and provide ongoing customer support.\",\n          highlights: [\n            \"Production Deploy\",\n            \"Marketing Launch\",\n            \"Customer Support\",\n          ],\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the step (e.g., \"lucide/lightbulb\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"highlights":{"type":"array","description":"List of highlight tags","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessIconTimelineItem"},"typeLabel":"ProcessIconTimelineItem[]","required":true,"minItems":3,"maxItems":8},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"timelineClassName":{"type":"string","description":"Additional CSS classes for the timeline container","required":false},"timelineLineClassName":{"type":"string","description":"Additional CSS classes for the timeline line","required":false},"stepCardClassName":{"type":"string","description":"Additional CSS classes for each step card","required":false},"stepBadgeClassName":{"type":"string","description":"Additional CSS classes for the step icon badge","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].icon":{"type":"object","description":"","required":true},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":220},"steps[].highlights":{"type":"object","description":"","maxItems":5}},"exampleProps":{"heading":"Product Development Timeline","description":"From concept to launch, our proven process ensures success at every milestone.","steps":[{"icon":"lucide/lightbulb","title":"Concept & Validation","description":"Validate your idea through research and user interviews.","highlights":["Market Research","User Surveys","Competitive Analysis"]},{"icon":"lucide/layout","title":"Design & Wireframing","description":"Create wireframes and a cohesive design system.","highlights":["Wireframes","Design System","User Flows"]},{"icon":"lucide/code","title":"Development Sprint","description":"Build the MVP with agile methodology.","highlights":["Agile Sprints","Code Reviews","Automated Tests"]},{"icon":"lucide/rocket","title":"Production Launch","description":"Deploy to production and execute go-to-market.","highlights":["Production Deploy","Marketing Launch","Customer Support"]}],"spacing":"xl","background":"gray"},"dependencies":["@opensite/ui"],"tags":["process","timeline","icons","badges","vertical","alternating","phases","methodology","highlights"],"performance":{},"importantUsageNotes":"Renders a zigzag icon-badge timeline. icon must be a Lucide icon identifier string (e.g. 'lucide/rocket'). Icon badges use bg-primary/text-primary-foreground automatically. highlights are small pill badges shown under the description. No image props — this block is icon/text only.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":8},"steps[].icon":{"required":true,"note":"Lucide icon string, e.g. 'lucide/rocket'."},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":220},"steps[].highlights":{"maxItems":5,"note":"Short tag strings shown as pills."}},"mediaSlots":{}}},{"id":"process-expandable-timeline","name":"Process Expandable Timeline","title":"Process Expandable Timeline","category":"Process","categorySlug":"process","description":"A clickable timeline with expandable content sections. Each step shows a numbered badge, title, and brief description that expands to reveal detailed content when clicked. Features smooth height animations and decorative corner connectors. Ideal for FAQ-style process explanations or detailed methodology breakdowns.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290542/797jqaeds60apxki8ozj7yk83aco/process-expandable-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/290543/m68kn9r1g7odgfc5hjcfri4y1hyr/process-expandable-timeline-mobile.png"},"componentPath":"blocks/process/process-expandable-timeline.tsx","code":"import { ProcessExpandableTimeline } from \"@opensite/ui/blocks/process/process-expandable-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessExpandableTimeline\n      heading=\"Our Development Process\"\n      description=\"A comprehensive workflow designed to deliver exceptional results through proven methodologies and continuous collaboration.\"\n      steps={[\n        {\n          title: \"Discovery & Research\",\n          description:\n            \"Deep dive into your business goals, target audience, and competitive landscape.\",\n          expandedContent:\n            \"We conduct stakeholder interviews, user research sessions, and competitive analysis to establish a solid foundation. Our team analyzes market trends, user behavior patterns, and technical requirements to create a comprehensive project roadmap that aligns with your business objectives.\",\n        },\n        {\n          title: \"Strategy & Planning\",\n          description:\n            \"Create a detailed roadmap with milestones, deliverables, and success metrics.\",\n          expandedContent:\n            \"Based on our research findings, we develop a strategic plan that includes information architecture, user flows, technical specifications, and a phased implementation timeline. We establish KPIs and define success criteria to ensure measurable outcomes throughout the project lifecycle.\",\n        },\n        {\n          title: \"Design & Prototyping\",\n          description:\n            \"Craft intuitive interfaces with user-centered design principles.\",\n          expandedContent:\n            \"Our design team creates wireframes, high-fidelity mockups, and interactive prototypes. We conduct usability testing and iterate based on feedback to ensure the design meets user needs and business requirements. Every design decision is validated through data and user testing.\",\n        },\n        {\n          title: \"Development & Implementation\",\n          description:\n            \"Build robust, scalable solutions using modern technologies.\",\n          expandedContent:\n            \"Our engineering team follows agile development practices with regular sprints, code reviews, and automated testing. We implement best practices for security, performance, and scalability while maintaining clean, maintainable code. Continuous integration ensures rapid deployment and quality assurance.\",\n        },\n        {\n          title: \"Testing & Quality Assurance\",\n          description:\n            \"Rigorous testing across devices, browsers, and scenarios.\",\n          expandedContent:\n            \"Comprehensive QA process includes functional testing, performance optimization, security audits, and accessibility compliance checks. We conduct cross-browser testing, mobile responsiveness validation, and load testing to ensure a flawless user experience across all platforms.\",\n        },\n        {\n          title: \"Launch & Optimization\",\n          description:\n            \"Deploy with confidence and continuously improve based on real-world data.\",\n          expandedContent:\n            \"We execute a carefully planned deployment strategy with monitoring and rollback capabilities. Post-launch, we track analytics, gather user feedback, and make data-driven optimizations. Our team provides ongoing support and iterative improvements to maximize performance and user satisfaction.\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description (shown in collapsed state)","typeLabel":"React.ReactNode","required":false},"expandedContent":{"type":"object","description":"Expanded content (shown when step is expanded)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessExpandableTimelineItem"},"typeLabel":"ProcessExpandableTimelineItem[]","required":true,"minItems":3,"maxItems":8},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"timelineClassName":{"type":"string","description":"Additional CSS classes for the timeline container","required":false},"timelineLineClassName":{"type":"string","description":"Additional CSS classes for the timeline line","required":false},"stepItemClassName":{"type":"string","description":"Additional CSS classes for each step item","required":false},"stepBadgeClassName":{"type":"string","description":"Additional CSS classes for the step number badge","required":false},"expandedContentClassName":{"type":"string","description":"Additional CSS classes for the expanded content","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].title":{"type":"object","description":"","required":true,"maxLength":70},"steps[].description":{"type":"object","description":"","maxLength":160},"steps[].expandedContent":{"type":"object","description":"","maxLength":500}},"exampleProps":{"heading":"Our Development Process","description":"A comprehensive workflow designed to deliver exceptional results.","steps":[{"title":"Discovery & Research","description":"Deep dive into business goals and competitive landscape.","expandedContent":"We conduct stakeholder interviews and competitive analysis to build a comprehensive project roadmap."},{"title":"Strategy & Planning","description":"Create a detailed roadmap with milestones and success metrics.","expandedContent":"We develop a strategic plan covering architecture, user flows, and a phased timeline with measurable KPIs."},{"title":"Design & Prototyping","description":"Craft intuitive interfaces with user-centered design.","expandedContent":"Our team creates wireframes, mockups, and interactive prototypes validated through usability testing."},{"title":"Development & Implementation","description":"Build robust, scalable solutions using modern technologies.","expandedContent":"Engineering follows agile sprints with code reviews, automated testing, and CI/CD deployment."}],"background":"dark"},"dependencies":["@opensite/ui"],"tags":["process","timeline","expandable","accordion","interactive","clickable","detailed","faq-style"],"performance":{},"importantUsageNotes":"Each step is a clickable accordion row. description is always visible; expandedContent is revealed on click. No image props — purely text-driven. Keep description under 1 sentence; expandedContent can be a paragraph. At least 3 steps recommended for the accordion pattern to make sense.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":8},"steps[].title":{"required":true,"maxLength":70},"steps[].description":{"maxLength":160,"note":"Collapsed preview text — keep concise."},"steps[].expandedContent":{"maxLength":500,"note":"Revealed on click. Can be a full paragraph."}},"mediaSlots":{}}},{"id":"process-roadmap-timeline","name":"Process Roadmap Timeline","title":"Process Roadmap Timeline","category":"Process","categorySlug":"process","description":"A product roadmap timeline with status badges (completed, in-progress, upcoming) and milestone cards. Features alternating left/right layout, date labels, feature tags, and visual status indicators. The timeline line connects milestones with numbered or checkmark badges. Perfect for product roadmaps and project timelines.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290544/flo2gdvcyfdhr20mebtwx53pil5x/process-roadmap-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/290545/66ssd8yvzr1ld9orejmytwbyev9s/process-roadmap-timeline-mobile.png"},"componentPath":"blocks/process/process-roadmap-timeline.tsx","code":"import { ProcessRoadmapTimeline } from \"@opensite/ui/blocks/process/process-roadmap-timeline\";\n\nexport default function Demo() {\n  return (\n    <ProcessRoadmapTimeline\n      heading=\"Product Roadmap 2026\"\n      description=\"Our strategic vision for delivering powerful new features and improvements throughout the year.\"\n      milestones={[\n        {\n          title: \"Platform Foundation\",\n          description:\n            \"Core infrastructure upgrades, performance optimizations, and enhanced security protocols to support future growth.\",\n          date: \"Q1 2026\",\n          status: \"completed\",\n          features: [\n            \"API v3\",\n            \"Database Migration\",\n            \"SSO Integration\",\n            \"Enhanced Security\",\n          ],\n        },\n        {\n          title: \"AI-Powered Features\",\n          description:\n            \"Intelligent automation tools powered by machine learning to streamline workflows and boost productivity.\",\n          date: \"Q2 2026\",\n          status: \"in-progress\",\n          features: [\n            \"Smart Recommendations\",\n            \"Auto-categorization\",\n            \"Predictive Analytics\",\n            \"NLP Search\",\n          ],\n        },\n        {\n          title: \"Mobile Experience\",\n          description:\n            \"Native mobile applications for iOS and Android with offline capabilities and push notifications.\",\n          date: \"Q3 2026\",\n          status: \"upcoming\",\n          features: [\n            \"iOS App\",\n            \"Android App\",\n            \"Offline Mode\",\n            \"Push Notifications\",\n          ],\n        },\n        {\n          title: \"Enterprise Suite\",\n          description:\n            \"Advanced enterprise features including custom workflows, white-labeling, and dedicated support options.\",\n          date: \"Q4 2026\",\n          status: \"upcoming\",\n          features: [\n            \"Custom Workflows\",\n            \"White-label\",\n            \"Advanced Permissions\",\n            \"Priority Support\",\n          ],\n        },\n        {\n          title: \"Global Expansion\",\n          description:\n            \"Multi-language support, regional data centers, and localized payment options to serve international markets.\",\n          date: \"Q1 2027\",\n          status: \"upcoming\",\n          features: [\n            \"Multi-language\",\n            \"Regional Servers\",\n            \"Local Payments\",\n            \"Compliance Tools\",\n          ],\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.1}\n      background=\"gradient\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"milestones":{"type":"array","description":"Array of milestone configurations","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Milestone title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Milestone description","typeLabel":"React.ReactNode","required":false},"date":{"type":"object","description":"Date or time period (e.g., \"Q1 2024\")","typeLabel":"React.ReactNode","required":false},"status":{"type":"string","description":"Milestone status","typeLabel":"MilestoneStatus","required":true},"features":{"type":"array","description":"List of features or deliverables","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"className":{"type":"string","description":"Additional CSS classes for the milestone item","required":false}},"typeLabel":"ProcessRoadmapMilestoneItem"},"typeLabel":"ProcessRoadmapMilestoneItem[]","required":true,"minItems":2,"maxItems":8},"milestonesSlot":{"type":"object","description":"Custom slot for rendering milestones (overrides milestones array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"timelineClassName":{"type":"string","description":"Additional CSS classes for the timeline container","required":false},"timelineLineClassName":{"type":"string","description":"Additional CSS classes for the timeline line","required":false},"milestoneCardClassName":{"type":"string","description":"Additional CSS classes for each milestone card","required":false},"milestoneNodeClassName":{"type":"string","description":"Additional CSS classes for the milestone node","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"milestones[].title":{"type":"object","description":"","required":true,"maxLength":60},"milestones[].status":{"type":"object","description":"","required":true},"milestones[].date":{"type":"object","description":"","maxLength":20},"milestones[].description":{"type":"object","description":"","maxLength":200},"milestones[].features":{"type":"object","description":"","maxItems":6}},"exampleProps":{"heading":"Product Roadmap 2026","description":"Our strategic vision for delivering powerful new features throughout the year.","milestones":[{"title":"Platform Foundation","description":"Core infrastructure upgrades and security.","date":"Q1 2026","status":"completed","features":["API v3","Database Migration","SSO Integration"]},{"title":"AI-Powered Features","description":"Intelligent automation to streamline workflows.","date":"Q2 2026","status":"in-progress","features":["Smart Recommendations","Predictive Analytics"]},{"title":"Mobile Experience","description":"Native iOS and Android apps with offline support.","date":"Q3 2026","status":"upcoming","features":["iOS App","Android App","Offline Mode"]},{"title":"Enterprise Suite","description":"Custom workflows, white-labeling, and advanced permissions.","date":"Q4 2026","status":"upcoming","features":["Custom Workflows","White-label"]}],"background":"gradient"},"dependencies":["@opensite/ui"],"tags":["process","roadmap","timeline","milestones","status","product","project","planning","phases"],"performance":{},"importantUsageNotes":"Use for product or project roadmaps with dated milestones. Each milestone requires a status: 'completed' | 'in-progress' | 'upcoming'. features are small chip badges shown in the card. date is a display string (e.g. 'Q1 2026') — not parsed. No image props.","usageRequirements":{"requiredProps":["milestones"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"milestones":{"required":true,"minItems":2,"maxItems":8},"milestones[].title":{"required":true,"maxLength":60},"milestones[].status":{"required":true,"note":"status must be one of: completed, in-progress, upcoming. Must be one of: completed, in-progress, upcoming."},"milestones[].date":{"maxLength":20,"note":"Display string, e.g. 'Q1 2026'."},"milestones[].description":{"maxLength":200},"milestones[].features":{"maxItems":6,"note":"Short feature tag strings."}},"mediaSlots":{}}},{"id":"process-mission-principles","name":"Process Mission Principles","title":"Process Mission Principles","category":"Process","categorySlug":"process","description":"A mission statement section with a grid of numbered principle cards. Features a prominent mission title and description followed by a responsive grid of principles, each with a floating number badge, title, and description. Ideal for company values, guiding principles, or core beliefs sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290546/3jveaktd5l5nmtmwvrxvl38vuql0/process-mission-principles-desktop.png","mobile":"https://cdn.ing/assets/i/r/290547/m0i2ea3tku5qiay99z8fze7tja36/process-mission-principles-mobile.png"},"componentPath":"blocks/process/process-mission-principles.tsx","code":"import { ProcessMissionPrinciples } from \"@opensite/ui/blocks/process/process-mission-principles\";\n\nexport default function Demo() {\n  return (\n    <ProcessMissionPrinciples\n      missionLabel=\"OUR MISSION\"\n      missionHeading=\"Empowering Teams to Build Better Products\"\n      missionDescription=\"We believe that exceptional software comes from exceptional teams. Our mission is to provide the tools, insights, and support that enable development teams to create products that users love, while maintaining velocity and quality at scale.\"\n      principlesLabel=\"OUR GUIDING PRINCIPLES\"\n      principles={[\n        {\n          number: \"01\",\n          title: \"User-Centric Design\",\n          description:\n            \"Every decision starts with the user. We prioritize intuitive interfaces, seamless experiences, and accessibility to ensure products serve their intended audience effectively.\",\n        },\n        {\n          number: \"02\",\n          title: \"Quality Over Speed\",\n          description:\n            \"While we value efficiency, we never compromise on quality. Rigorous testing, code reviews, and attention to detail ensure long-term reliability and maintainability.\",\n        },\n        {\n          number: \"03\",\n          title: \"Continuous Learning\",\n          description:\n            \"Technology evolves rapidly. We foster a culture of continuous learning, experimentation, and adaptation to stay at the forefront of innovation.\",\n        },\n        {\n          number: \"04\",\n          title: \"Transparent Communication\",\n          description:\n            \"Open, honest communication builds trust. We maintain transparency with stakeholders, document decisions clearly, and collaborate effectively across teams.\",\n        },\n        {\n          number: \"05\",\n          title: \"Data-Driven Decisions\",\n          description:\n            \"Intuition matters, but data validates. We measure what matters, analyze results objectively, and let insights guide our strategic choices.\",\n        },\n        {\n          number: \"06\",\n          title: \"Sustainable Practices\",\n          description:\n            \"Build for the long term. We create scalable architectures, write maintainable code, and establish processes that support sustainable growth without burnout.\",\n        },\n      ]}\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={0.08}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"missionLabel":{"type":"object","description":"Mission section label (e.g., \"OUR MISSION\")","typeLabel":"React.ReactNode","required":false,"maxLength":40},"missionHeading":{"type":"object","description":"Mission heading/title","typeLabel":"React.ReactNode","required":true,"maxLength":80},"missionDescription":{"type":"object","description":"Mission description text","typeLabel":"React.ReactNode","required":false,"maxLength":400},"principlesLabel":{"type":"object","description":"Principles section label (e.g., \"OUR PRINCIPLES\")","typeLabel":"React.ReactNode","required":false,"maxLength":40},"principles":{"type":"array","description":"Array of principle configurations","items":{"type":"object","description":"","fields":{"number":{"type":"object","description":"Principle number (e.g., \"01\", \"02\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Principle title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Principle description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the principle item","required":false}},"typeLabel":"ProcessMissionPrincipleItem"},"typeLabel":"ProcessMissionPrincipleItem[]","required":true,"minItems":3,"maxItems":6},"principlesSlot":{"type":"object","description":"Custom slot for rendering principles (overrides principles array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"missionClassName":{"type":"string","description":"Additional CSS classes for the mission section","required":false},"missionLabelClassName":{"type":"string","description":"Additional CSS classes for the mission label","required":false},"missionHeadingClassName":{"type":"string","description":"Additional CSS classes for the mission heading","required":false},"missionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the mission description","required":false},"principlesSectionClassName":{"type":"string","description":"Additional CSS classes for the principles section","required":false},"principlesLabelClassName":{"type":"string","description":"Additional CSS classes for the principles label","required":false},"principlesGridClassName":{"type":"string","description":"Additional CSS classes for the principles grid","required":false},"principleCardClassName":{"type":"string","description":"Additional CSS classes for each principle card","required":false},"principleBadgeClassName":{"type":"string","description":"Additional CSS classes for the principle number badge","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"principles[].number":{"type":"object","description":"","maxLength":4},"principles[].title":{"type":"object","description":"","required":true,"maxLength":50},"principles[].description":{"type":"object","description":"","maxLength":200}},"exampleProps":{"missionLabel":"OUR MISSION","missionHeading":"Empowering Teams to Build Better Products","missionDescription":"We provide tools and support that enable teams to create products users love while maintaining velocity and quality at scale.","principlesLabel":"OUR GUIDING PRINCIPLES","principles":[{"number":"01","title":"User-Centric Design","description":"Every decision starts with the user. We prioritise intuitive interfaces and accessibility."},{"number":"02","title":"Quality Over Speed","description":"We never compromise on quality. Rigorous testing ensures long-term reliability."},{"number":"03","title":"Continuous Learning","description":"We foster a culture of experimentation to stay at the forefront of innovation."},{"number":"04","title":"Transparent Communication","description":"Open communication builds trust and keeps stakeholders aligned."},{"number":"05","title":"Data-Driven Decisions","description":"We measure what matters and let insights guide our choices."},{"number":"06","title":"Sustainable Practices","description":"We create scalable architectures that support long-term growth."}],"background":"dark"},"dependencies":["@opensite/ui"],"tags":["process","mission","principles","values","beliefs","company","culture","numbered","grid"],"performance":{},"importantUsageNotes":"Combines a large mission statement (left-aligned, bold) with a numbered principles grid. missionLabel and principlesLabel are ALL-CAPS eyebrow labels. principle.number is a display string (e.g. '01'). No image props — purely text/number layout. Best with 3 or 6 principles (fills 2-column or 3-column grid cleanly).","usageRequirements":{"requiredProps":["missionHeading","principles"],"propConstraints":{"missionLabel":{"maxLength":40,"note":"Uppercase eyebrow label, e.g. 'OUR MISSION'."},"missionHeading":{"required":true,"maxLength":80},"missionDescription":{"maxLength":400},"principlesLabel":{"maxLength":40},"principles":{"required":true,"minItems":3,"maxItems":6},"principles[].number":{"maxLength":4,"note":"Display string like '01'. Auto-generated if omitted."},"principles[].title":{"required":true,"maxLength":50},"principles[].description":{"maxLength":200}},"mediaSlots":{}}},{"id":"process-steps-grid","name":"Process Steps Grid","title":"Process Steps Grid","category":"Process","categorySlug":"process","description":"A grid layout of process step cards with large background numbers and icons. Each card features an icon in a colored badge, title, description, and a decorative oversized step number in the background. Hover effects highlight the active card. Perfect for showcasing methodologies, service processes, or workflow steps.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290548/anj1zqohw7wt62ij5fngz2e06svf/process-steps-grid-desktop.png","mobile":"https://cdn.ing/assets/i/r/290549/f4cbe3uw695nx0qfamd0erk678pm/process-steps-grid-mobile.png"},"componentPath":"blocks/process/process-steps-grid.tsx","code":"import { ProcessStepsGrid } from \"@opensite/ui/blocks/process/process-steps-grid\";\n\nexport default function Demo() {\n  return (\n    <ProcessStepsGrid\n      heading=\"Getting Started is Simple\"\n      description=\"Follow our straightforward onboarding process to go from signup to success in minutes.\"\n      steps={[\n        {\n          icon: \"lucide/user-plus\",\n          title: \"Create Your Account\",\n          description: \"Sign up in seconds with email or social login. No credit card required to start your free trial.\",\n        },\n        {\n          icon: \"lucide/settings\",\n          title: \"Configure Your Workspace\",\n          description: \"Customize your environment with templates, integrations, and team settings tailored to your workflow.\",\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Invite Your Team\",\n          description: \"Collaborate effectively by inviting team members and assigning roles with granular permissions.\",\n        },\n        {\n          icon: \"lucide/upload\",\n          title: \"Import Your Data\",\n          description: \"Seamlessly migrate existing data from spreadsheets, databases, or other platforms with our import tools.\",\n        },\n        {\n          icon: \"lucide/palette\",\n          title: \"Customize & Brand\",\n          description: \"Apply your brand colors, logos, and styling to create a cohesive experience for your users.\",\n        },\n        {\n          icon: \"lucide/rocket\",\n          title: \"Launch & Grow\",\n          description: \"Go live with confidence and scale your operations using our robust infrastructure and support.\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"steps":{"type":"array","description":"Array of step configurations","items":{"type":"object","description":"","fields":{"icon":{"type":"string","description":"Icon name for the step (e.g., \"lucide/search\")","required":false},"iconSlot":{"type":"object","description":"Custom icon element (overrides icon name)","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Step title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Step description","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessStepsGridItem"},"typeLabel":"ProcessStepsGridItem[]","required":true,"minItems":3,"maxItems":9},"stepsSlot":{"type":"object","description":"Custom slot for rendering steps (overrides steps array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"stepsGridClassName":{"type":"string","description":"Additional CSS classes for the steps grid","required":false},"stepCardClassName":{"type":"string","description":"Additional CSS classes for each step card","required":false},"stepIconClassName":{"type":"string","description":"Additional CSS classes for the step icon 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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"steps[].icon":{"type":"object","description":""},"steps[].title":{"type":"object","description":"","required":true,"maxLength":60},"steps[].description":{"type":"object","description":"","maxLength":200}},"exampleProps":{"heading":"Getting Started is Simple","description":"Follow our straightforward onboarding process to go from signup to success in minutes.","steps":[{"icon":"lucide/user-plus","title":"Create Your Account","description":"Sign up in seconds. No credit card required."},{"icon":"lucide/settings","title":"Configure Your Workspace","description":"Customise with templates and integrations for your workflow."},{"icon":"lucide/users","title":"Invite Your Team","description":"Assign roles and collaborate with granular permissions."},{"icon":"lucide/upload","title":"Import Your Data","description":"Migrate existing data with our import tools."},{"icon":"lucide/palette","title":"Customise & Brand","description":"Apply your brand colours and styling."},{"icon":"lucide/rocket","title":"Launch & Grow","description":"Go live and scale with robust infrastructure."}],"spacing":"xl","background":"gray"},"dependencies":["@opensite/ui"],"tags":["process","grid","steps","cards","icons","numbered","methodology","services","workflow"],"performance":{},"importantUsageNotes":"Grid of numbered cards with optional Lucide icons. Auto-numbers each card with a large background numeral. icon is a Lucide icon string (e.g. 'lucide/rocket'). No image props. Works best with 3 or 6 steps (fills 3-column grid evenly). iconSlot overrides icon if you need a custom element.","usageRequirements":{"requiredProps":["steps"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"steps":{"required":true,"minItems":3,"maxItems":9},"steps[].icon":{"note":"Lucide icon string, e.g. 'lucide/rocket'. Optional but recommended."},"steps[].title":{"required":true,"maxLength":60},"steps[].description":{"maxLength":200}},"mediaSlots":{}}},{"id":"process-numbered-services","name":"Process Numbered Services","title":"Process Numbered Services","category":"Process","categorySlug":"process","description":"A services section with large numbered circles and capability lists. Each service displays a prominent number badge, title, description, CTA link, and a grid of capabilities with checkmark icons. The layout uses a 12-column grid for flexible content arrangement. Ideal for service offerings, capabilities, or solution pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290550/3mvrhubsaqlzfzdr6f1sbn2iehnn/process-numbered-services-desktop.png","mobile":"https://cdn.ing/assets/i/r/290551/rl3iotg1nyqwpm581eb43mug8wch/process-numbered-services-mobile.png"},"componentPath":"blocks/process/process-numbered-services.tsx","code":"import { ProcessNumberedServices } from \"@opensite/ui/blocks/process/process-numbered-services\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <ProcessNumberedServices\n      heading=\"Complete Service Offerings\"\n      description=\"End-to-end solutions designed to transform your digital presence and accelerate business growth.\"\n      services={[\n        {\n          number: \"01\",\n          title: \"Digital Strategy & Consulting\",\n          description:\n            \"Strategic guidance to align technology with business goals. We analyze your market position, identify opportunities, and create actionable roadmaps for digital transformation.\",\n          capabilities: [\n            \"Market Analysis\",\n            \"Technology Roadmap\",\n            \"Competitive Intelligence\",\n            \"ROI Modeling\",\n            \"Risk Assessment\",\n            \"Change Management\",\n          ],\n          action: {\n            label: \"Explore Strategy Services\",\n            href: \"#\",\n            variant: \"outline\",\n            asButton: true,\n          },\n        },\n        {\n          number: \"02\",\n          title: \"Product Design & UX\",\n          description:\n            \"User-centered design that drives engagement and conversion. From research to prototyping, we create experiences that users love and businesses profit from.\",\n          capabilities: [\n            \"User Research\",\n            \"Wireframing\",\n            \"UI/UX Design\",\n            \"Prototyping\",\n            \"Usability Testing\",\n            \"Design Systems\",\n          ],\n          action: {\n            label: \"View Design Portfolio\",\n            href: \"#\",\n            variant: \"outline\",\n            asButton: true,\n          },\n        },\n        {\n          number: \"03\",\n          title: \"Custom Software Development\",\n          description:\n            \"Scalable, secure applications built with modern technologies. Our engineering team delivers robust solutions that grow with your business.\",\n          capabilities: [\n            \"Web Applications\",\n            \"Mobile Apps\",\n            \"API Development\",\n            \"Cloud Architecture\",\n            \"DevOps & CI/CD\",\n            \"Performance Optimization\",\n          ],\n          action: {\n            label: \"See Development Work\",\n            href: \"#\",\n            variant: \"outline\",\n            asButton: true,\n          },\n        },\n        {\n          number: \"04\",\n          title: \"Quality Assurance & Testing\",\n          description:\n            \"Comprehensive testing strategies to ensure flawless performance. We catch issues before your users do, maintaining quality across all platforms.\",\n          capabilities: [\n            \"Automated Testing\",\n            \"Manual QA\",\n            \"Performance Testing\",\n            \"Security Audits\",\n            \"Accessibility Testing\",\n            \"Cross-Browser Testing\",\n          ],\n          action: {\n            label: \"Learn About QA Process\",\n            href: \"#\",\n            variant: \"outline\",\n            asButton: true,\n          },\n        },\n      ]}\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={1}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false,"maxLength":80},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false,"maxLength":200},"services":{"type":"array","description":"Array of service configurations","items":{"type":"object","description":"","fields":{"number":{"type":"object","description":"Service number (e.g., \"01\", \"02\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Service title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Service description","typeLabel":"React.ReactNode","required":false},"capabilities":{"type":"array","description":"List of capabilities or features","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"action":{"type":"object","description":"Action configuration for the service CTA","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 rendering the action (overrides action config)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the service item","required":false},"ctaText":{"type":"string","description":"","required":false},"ctaUrl":{"type":"string","description":"","required":false}},"typeLabel":"ProcessNumberedServiceItem"},"typeLabel":"ProcessNumberedServiceItem[]","required":true,"minItems":2,"maxItems":8},"servicesSlot":{"type":"object","description":"Custom slot for rendering services (overrides services array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","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},"servicesClassName":{"type":"string","description":"Additional CSS classes for the services list","required":false},"serviceItemClassName":{"type":"string","description":"Additional CSS classes for each service item","required":false},"serviceBadgeClassName":{"type":"string","description":"Additional CSS classes for the service number badge","required":false},"capabilitiesClassName":{"type":"string","description":"Additional CSS classes for the capabilities grid","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"services[].title":{"type":"object","description":"","required":true,"maxLength":70},"services[].description":{"type":"object","description":"","maxLength":300},"services[].capabilities":{"type":"object","description":"","maxItems":8},"services[].number":{"type":"object","description":"","maxLength":4},"services[].action.asButton":{"type":"object","description":"","pinnedValues":{"asButton":true}}},"exampleProps":{"heading":"Complete Service Offerings","description":"End-to-end solutions designed to transform your digital presence.","services":[{"number":"01","title":"Digital Strategy & Consulting","description":"Strategic guidance to align technology with business goals.","capabilities":["Market Analysis","Technology Roadmap","Competitive Intelligence","ROI Modeling"],"action":{"label":"Explore Strategy Services","href":"#","variant":"outline","asButton":true}},{"number":"02","title":"Product Design & UX","description":"User-centered design that drives engagement from research to prototyping.","capabilities":["User Research","Wireframing","UI/UX Design","Usability Testing"],"action":{"label":"View Design Portfolio","href":"#","variant":"outline","asButton":true}},{"number":"03","title":"Custom Software Development","description":"Scalable, secure applications built with modern technologies.","capabilities":["Web Applications","Mobile Apps","API Development","Cloud Architecture"],"action":{"label":"See Development Work","href":"#","variant":"outline","asButton":true}}],"background":"gray"},"dependencies":["@opensite/ui"],"tags":["process","services","numbered","capabilities","offerings","solutions","cta","checkmarks"],"performance":{},"importantUsageNotes":"Full-width service rows with a number badge, title/description column, and a capabilities chip grid. capabilities are short string labels shown as muted chips with check icons. Each service can have an optional action CTA. number is a display string (e.g. '01') — auto-generated if omitted. No image props.","usageRequirements":{"requiredProps":["services"],"propConstraints":{"heading":{"maxLength":80},"description":{"maxLength":200},"services":{"required":true,"minItems":2,"maxItems":8},"services[].title":{"required":true,"maxLength":70},"services[].description":{"maxLength":300},"services[].capabilities":{"maxItems":8,"note":"Short chip strings, max ~25 chars each."},"services[].number":{"maxLength":4,"note":"Display label like '01'. Auto-generated if omitted."},"services[].action.asButton":{"pinnedValues":{"asButton":true},"note":"Must be true for the Pressable to render as a button element."}},"mediaSlots":{}}}]},"timestamp":"2026-06-27T18:47:38.229Z"}