{"success":true,"data":{"block":{"id":"hero-centered-gradient-cta","name":"Centered Gradient CTA Hero","title":"Hero Centered Gradient CTA","category":"Hero","categorySlug":"hero","description":"A centered hero with gradient background and prominent CTA. Features highlight badges and feature callouts.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290341/u02dl41opywayzfwhamzx2le01ih/cleanshot-2026-02-18-at-08-58-12.png","mobile":"https://cdn.ing/assets/i/r/290342/vhtbpjog2avb5offh7a7msy034be/cleanshot-2026-02-18-at-08-58-23.png"},"componentPath":"blocks/hero/hero-centered-gradient-cta.tsx","code":"import { HeroCenteredGradientCta } from \"@opensite/ui/blocks/hero/hero-centered-gradient-cta\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <HeroCenteredGradientCta\n      badge=\"Limited Time Offer\"\n      heading=\"Transform your workflow today\"\n      description=\"Join thousands of teams who have revolutionized their productivity. Get started in minutes with our intuitive platform.\"\n      actions={[\n        {\n          label: \"Get Started Free\",\n          href: \"#\",\n          variant: \"secondary\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Schedule Demo\",\n          href: \"#\",\n          variant: \"outline\",\n          icon: <DynamicIcon name=\"lucide/video\" size={16} />,\n        },\n      ]}\n      background=\"gradient\"\n      features={[\n        {\n          title: \"Lightning Fast Performance\",\n          description:\n            \"Optimized for speed with sub-100ms response times globally. Edge computing and intelligent caching ensure your users get the best experience.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/bolt\" size={16} />,\n        },\n        {\n          title: \"Enterprise Security\",\n          description:\n            \"Bank-level encryption with SOC 2 Type II compliance. Automated security scanning and regular penetration testing keep your data safe.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/shield-check\" size={16} />,\n        },\n        {\n          title: \"Seamless Scalability\",\n          description:\n            \"From zero to millions of users without configuration. Auto-scaling infrastructure handles demand spikes automatically.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/server\" size={16} />,\n        },\n        {\n          title: \"Real-Time Collaboration\",\n          description:\n            \"Built-in tools for team communication, code review, and project management. Keep everyone aligned and productive.\",\n          href: \"#\",\n          icon: <DynamicIcon name=\"lucide/users\" size={16} />,\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/announcement content","typeLabel":"React.ReactNode","required":false},"badgeIcon":{"type":"object","description":"Badge icon","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"headingHighlight":{"type":"string","description":"Highlighted text within heading (gradient styled)","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},"features":{"type":"array","description":"Array of feature/benefit items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","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},"gradientClassName":{"type":"string","description":"Additional CSS classes for the gradient background","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","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},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["hero","centered","gradient","cta","features","highlights","modern","vibrant"],"performance":{},"importantUsageNotes":"Do not exceed 20 characters for the 'badge' prop. Do not exceed 40 characters for the 'heading' prop. Do not exceed 130 characters for the 'description' prop. 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."}},"timestamp":"2026-05-13T10:41:15.531Z"}