{"success":true,"data":{"block":{"id":"service-hover-carousel","name":"Service Hover Carousel","title":"Service Hover Carousel","category":"Gallery","categorySlug":"gallery","description":"A carousel of service cards with hover image swap effect. Features portrait cards with primary/secondary image swap on hover, badges, and call-to-action buttons. Ideal for service showcases, team members, product cards, or any content that benefits from reveal-on-hover interactions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290111/hca7ib1lsvaqc48rglpny99tzs6z/service-hover-carousel-desktop.png","mobile":"https://cdn.ing/assets/i/r/290110/4ormmxu0wdbx28of340krikfxrod/service-hover-carousel-mobile.png"},"componentPath":"blocks/gallery/service-hover-carousel.tsx","code":"import { ServiceHoverCarousel } from \"@opensite/ui/blocks/gallery/service-hover-carousel\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ServiceHoverCarousel\n      heading=\"Our Services\"\n      items={[\n        {\n          id: \"1\",\n          title: \"Web Development\",\n          price: \"$5,000\",\n          image: imagePlaceholders[30],\n          imageAlt: \"Web development service\",\n          hoverImage: imagePlaceholders[11],\n          hoverImageAlt: \"Web development in action\",\n          tag: \"Popular\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"Mobile App Design\",\n          price: \"$7,500\",\n          image: imagePlaceholders[32],\n          imageAlt: \"Mobile app design service\",\n          hoverImage: imagePlaceholders[33],\n          hoverImageAlt: \"Mobile app design process\",\n          tag: \"Trending\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"Cloud Infrastructure\",\n          price: \"$10,000\",\n          image: imagePlaceholders[34],\n          imageAlt: \"Cloud infrastructure service\",\n          hoverImage: imagePlaceholders[35],\n          hoverImageAlt: \"Cloud infrastructure setup\",\n          tag: \"Enterprise\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"AI Integration\",\n          price: \"$15,000\",\n          image: imagePlaceholders[36],\n          imageAlt: \"AI integration service\",\n          hoverImage: imagePlaceholders[37],\n          hoverImageAlt: \"AI integration implementation\",\n          tag: \"New\",\n          href: \"#\",\n        },\n        {\n          id: \"5\",\n          title: \"Security Audit\",\n          price: \"$8,000\",\n          image: imagePlaceholders[38],\n          imageAlt: \"Security audit service\",\n          hoverImage: imagePlaceholders[39],\n          hoverImageAlt: \"Security audit process\",\n          tag: \"Essential\",\n          href: \"#\",\n        },\n      ]}\n      pricePrefix=\"Starting at\"\n      background=\"dark\"\n      spacing=\"py-6 md:py-40\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of service items to display","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the item","required":true},"title":{"type":"object","description":"Title of the service","typeLabel":"React.ReactNode","required":true},"price":{"type":"object","description":"Price display text","typeLabel":"React.ReactNode","required":true},"image":{"type":"string","description":"Primary image source URL","required":true},"imageAlt":{"type":"string","description":"Alt text for the primary image","required":false},"hoverImage":{"type":"string","description":"Hover image source URL","required":true},"hoverImageAlt":{"type":"string","description":"Alt text for the hover image","required":false},"tag":{"type":"object","description":"Tag/badge text","typeLabel":"React.ReactNode","required":true},"href":{"type":"string","description":"Link URL for the item","required":false},"className":{"type":"string","description":"Additional CSS classes for the item","required":false}},"typeLabel":"ServiceHoverCarouselItem"},"typeLabel":"ServiceHoverCarouselItem[]","required":false},"itemsSlot":{"type":"object","description":"Custom slot for rendering items (overrides items array)","typeLabel":"React.ReactNode","required":false},"headerSlot":{"type":"object","description":"Custom slot for rendering the header","typeLabel":"React.ReactNode","required":false},"pricePrefix":{"type":"object","description":"Text displayed before the price","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the controls container","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"carouselContentClassName":{"type":"string","description":"Additional CSS classes for the carousel content","required":false},"itemClassName":{"type":"string","description":"Additional CSS classes for each carousel item","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for each image","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for each badge","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"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":["gallery","carousel","services","hover","image-swap","cards","portrait","interactive"],"performance":{},"importantUsageNotes":"Lock the 'items' array to the exact number of real services the site offers; the demo uses 5. Each item requires two real images from the media library: a primary 'image' and a 'hoverImage'. DO NOT USE this block unless you have at least 3 real services with corresponding real images. Only use real service names, prices, and hrefs from the site's data; do not invent services or pricing. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:39:46.934Z"}