{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","steps","methodology","workflow","sticky","sidebar","numbered","how-it-works","timeline"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'steps' to match the sticky-steps layout shown in the demo. Each step requires a 'step' label (e.g., '01'), 'title', and 'description'. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"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 { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[15],\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: imagePlaceholders[51],\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: imagePlaceholders[78],\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: imagePlaceholders[95],\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: imagePlaceholders[36],\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","scroll","animation","image","carousel","interactive","visual","storytelling","steps"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the scroll-image layout shown in the demo. Each step requires a 'step' label (e.g., '01'), 'title', 'description', and a real 'image' URL from the media library — DO NOT USE this block if you do not have valid image URLs for every step. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."},{"id":"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[42],\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: imagePlaceholders[67],\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: imagePlaceholders[89],\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: imagePlaceholders[103],\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: imagePlaceholders[28],\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},"description":{"type":"object","description":"Description text below heading","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 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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","hover","interactive","cards","image","animation","services","steps"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the hover-card layout shown in the demo. Each step requires a 'step' label (e.g., '01'), 'title', 'description', and a real 'image' URL from the media library — DO NOT USE this block if you do not have valid image URLs for every step. Follow the example props closely for this block."},{"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/290540/66xs8ag76ntbs8jdiihfp25u4ymw/process-icon-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/290541/thew7w1cvf7ac02gox128kdnclpv/process-icon-timeline-mobile.png"},"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      steps={[\n        {\n          icon: \"lucide/lightbulb\",\n          title: \"Concept & Validation\",\n          description: \"Validate your idea through market research, competitive analysis, and user interviews. Define the value proposition and identify target markets.\",\n          highlights: [\"Market Research\", \"User Surveys\", \"Competitive Analysis\"],\n          badgeColor: \"bg-blue-500\",\n        },\n        {\n          icon: \"lucide/layout\",\n          title: \"Design & Wireframing\",\n          description: \"Create detailed wireframes and user flows. Develop a cohesive design system that scales across your product.\",\n          highlights: [\"Wireframes\", \"Design System\", \"User Flows\"],\n          badgeColor: \"bg-purple-500\",\n        },\n        {\n          icon: \"lucide/code\",\n          title: \"Development Sprint\",\n          description: \"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          badgeColor: \"bg-green-500\",\n        },\n        {\n          icon: \"lucide/users\",\n          title: \"Beta Testing\",\n          description: \"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          badgeColor: \"bg-orange-500\",\n        },\n        {\n          icon: \"lucide/rocket\",\n          title: \"Production Launch\",\n          description: \"Deploy to production with comprehensive monitoring. Execute go-to-market strategy and provide ongoing customer support.\",\n          highlights: [\"Production Deploy\", \"Marketing Launch\", \"Customer Support\"],\n          badgeColor: \"bg-red-500\",\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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},"badgeColor":{"type":"string","description":"Badge background color class (e.g., \"bg-blue-500\")","required":false},"className":{"type":"string","description":"Additional CSS classes for the step item","required":false}},"typeLabel":"ProcessIconTimelineItem"},"typeLabel":"ProcessIconTimelineItem[]","required":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","timeline","icons","badges","vertical","alternating","phases","methodology","highlights"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the icon timeline layout shown in the demo. Each step requires an 'icon', 'title', 'description', and 2–4 'highlights' tags. Assign a distinct 'badgeColor' class per step (e.g., 'bg-blue-500', 'bg-purple-500') to visually differentiate phases. Follow the example props closely for this block."},{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","timeline","expandable","accordion","interactive","clickable","detailed","faq-style"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 5 'steps' to match the canonical expandable timeline layout shown in the demo. Each step requires a 'title', 'description' (shown collapsed), and 'expandedContent' (shown on expand) — all three fields should be populated with meaningful, specific content. Do not pad with vague placeholder text. Follow the example props closely for this block."},{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","roadmap","timeline","milestones","status","product","project","planning","phases"],"performance":{},"importantUsageNotes":"Ensure to supply 4–5 'milestones' with realistic future dates or quarters (e.g., 'Q1 2026'). Each milestone requires a 'status' of either 'completed', 'in-progress', or 'upcoming' and a 'features' list of 3–5 deliverables. Only describe features or roadmap items that are real and planned — do not invent product capabilities. Follow the example props closely for this block."},{"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},"missionHeading":{"type":"object","description":"Mission heading/title","typeLabel":"React.ReactNode","required":false},"missionDescription":{"type":"object","description":"Mission description text","typeLabel":"React.ReactNode","required":false},"principlesLabel":{"type":"object","description":"Principles section label (e.g., \"OUR PRINCIPLES\")","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","mission","principles","values","beliefs","company","culture","numbered","grid"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3, 6, or 9 'principles' since the principles element is a 3 column layout. Follow the example props closely for this block."},{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","grid","steps","cards","icons","numbered","methodology","services","workflow"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'steps' since the steps element is a 3-column grid layout (2 rows of 3). Each step requires an 'icon', 'title', and 'description'. This is a purely descriptive process block — no stat values or image URLs are required. Follow the example props closely for this block."},{"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},"description":{"type":"object","description":"Description text below heading","typeLabel":"React.ReactNode","required":false},"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":false},"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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["process","services","numbered","capabilities","offerings","solutions","cta","checkmarks"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 'services' to match the numbered services layout shown in the demo. Each service requires a 'number' label (e.g., '01'), 'title', 'description', a 'capabilities' list of 4–6 items, and an 'action' CTA using variant 'outline'. Only use real service or capability names — do not fabricate offerings the brand does not provide. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:11:37.597Z"}