{"success":true,"data":{"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."}},"timestamp":"2026-05-13T10:37:55.906Z"}