{"success":true,"data":{"block":{"id":"hero-premium-split-avatars","name":"Premium Split Avatars Hero","title":"Hero Premium Split Avatars","category":"Hero","categorySlug":"hero","description":"A premium split-layout hero featuring user avatars and social proof. Shows real users to build credibility and trust.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290236/wj93ewjoo5k83mudgor66hhww5ev/cleanshot-2026-02-18-at-03-22-31.png","mobile":"https://cdn.ing/assets/i/r/290235/5k37o0tswkq1e7rxvju3w920zqlt/cleanshot-2026-02-18-at-03-22-45.png"},"componentPath":"blocks/hero/hero-premium-split-avatars.tsx","code":"import { imagePlaceholders } from \"@/lib/media\";\nimport { HeroPremiumSplitAvatars } from \"@opensite/ui/blocks/hero/hero-premium-split-avatars\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroPremiumSplitAvatars\n      brandName=\"Premium\"\n      brandSuffix=\"Community\"\n      heading=\"Join an exclusive community\"\n      description=\"Connect with like-minded professionals and gain access to premium resources, events, and networking opportunities.\"\n      image={{ src: imagePlaceholders[125], alt: \"Community gathering\" }}\n      action={{\n        label: \"Join Now\",\n        href: \"#\",\n        variant: \"default\",\n        iconAfter: <DynamicIcon name=\"lucide/arrow-right\" />,\n      }}\n      avatars={[\n        { src: imagePlaceholders[6], fallback: \"M1\" },\n        { src: imagePlaceholders[7], fallback: \"M2\" },\n        { src: imagePlaceholders[9], fallback: \"M3\" },\n      ]}\n      socialProofText=\"5,000+ active members\"\n      background=\"muted\"\n      pattern=\"architect\"\n      patternOpacity={0.1}\n    />\n  );\n}","propsSchema":{"brandName":{"type":"object","description":"Brand name text","typeLabel":"React.ReactNode","required":false},"brandSuffix":{"type":"object","description":"Highlighted brand suffix (e.g., \"PRO\")","typeLabel":"React.ReactNode","required":false},"brandSlot":{"type":"object","description":"Custom slot for brand (overrides brand props)","typeLabel":"React.ReactNode","required":false},"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},"action":{"type":"object","description":"Action configuration for CTA button","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 action (overrides action prop)","typeLabel":"React.ReactNode","required":false},"avatars":{"type":"array","description":"Array of avatar items for social proof","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Avatar image source URL","required":true},"alt":{"type":"string","description":"Alt text for the avatar","required":true},"className":{"type":"string","description":"Additional CSS classes for the avatar","required":false}},"typeLabel":"AvatarItem"},"typeLabel":"AvatarItem[]","required":false},"avatarsSlot":{"type":"object","description":"Custom slot for avatars (overrides avatars array)","typeLabel":"React.ReactNode","required":false},"socialProofText":{"type":"object","description":"Social proof text","typeLabel":"React.ReactNode","required":false},"image":{"type":"object","description":"Feature image on the right side","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ImageItem","required":false},"imageSlot":{"type":"object","description":"Custom slot for image (overrides image prop)","typeLabel":"React.ReactNode","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","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content column","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},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","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},"mediaAspectRatios":{"type":"object","description":"Media aspect ratios for desktop and mobile breakpoints","fields":{"desktop":{"type":"object","description":"","fields":{},"typeLabel":"MediaAspectRatioVariant","required":false},"mobile":{"type":"object","description":"","fields":{},"typeLabel":"MediaAspectRatioVariant","required":false}},"typeLabel":"ResponsiveMediaAspectRatioProps","required":false},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","premium","split","avatars","social-proof","users","credibility","trust"],"performance":{},"importantUsageNotes":"Only use this block if there you have actual avatar images to showcase and socialProofText - this block should only be used if a site has the type of social proof that can be showcased with actual avatar images of people and a compelling social proof text to go along with it. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:38.446Z"}