{"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\";\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: \"https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr\",\n          imageAlt: \"Web development service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v\",\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: \"https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85\",\n          imageAlt: \"Mobile app design service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7\",\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: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n          imageAlt: \"Cloud infrastructure service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj\",\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: \"https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8\",\n          imageAlt: \"AI integration service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/cyhcpla6me8vs936i3fw6wbhypi2\",\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: \"https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40\",\n          imageAlt: \"Security audit service\",\n          hoverImage: \"https://toastability-production.s3.amazonaws.com/y1aezpa78m2fhfvj8whcx337y9cb\",\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,"minItems":3,"maxItems":8,"mediaHints":{"path":"items[].image","roles":["gallery","feature"],"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}},"exampleProps":{"heading":"Our Services","pricePrefix":"Starting at","background":"dark","spacing":"lg","items":[{"id":"1","title":"Web Development","price":"$5,000","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Web development service","hoverImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","hoverImageAlt":"Web development in action","tag":"Popular","href":"#"},{"id":"2","title":"Mobile App Design","price":"$7,500","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Mobile app design service","hoverImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","hoverImageAlt":"Mobile app design process","tag":"Trending","href":"#"},{"id":"3","title":"Cloud Infrastructure","price":"$10,000","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Cloud infrastructure service","hoverImage":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","hoverImageAlt":"Cloud infrastructure setup","tag":"Enterprise","href":"#"}]},"dependencies":["@opensite/ui"],"tags":["gallery","carousel","services","hover","image-swap","cards","portrait","interactive"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each item requires both 'image' AND 'hoverImage' – both must be real absolute URLs. The hover image replaces the primary image on mouse-over via opacity transition. Images render at 'aspect-3/4' (portrait). Provide portrait-oriented images for the best result. The 'tag' prop is displayed as an outline badge in the top-left of the card. The 'price' prop renders as plain text; use 'pricePrefix' to add 'Starting at' or similar label. The 'href' prop is optional; omit it to suppress navigation on click. Provide 3–8 items; the progress-bar width is divided by 'items.length'.","usageRequirements":{"requiredProps":[],"requiresSiteCapabilities":["media_library"],"propConstraints":{"items":{"minItems":3,"maxItems":8}},"mediaSlots":{"items[].image":{"path":"items[].image","roles":["gallery","feature"],"required":false}}}}},"timestamp":"2026-06-27T19:57:48.050Z"}