{"success":true,"data":{"block":{"id":"article-split-animated","name":"Article Split Animated","title":"Article Split Animated","category":"Article","categorySlug":"article","description":"A visually striking split-layout article preview with Framer Motion animations. Features a large image on one side with a gradient overlay and category badge, and article details on the other side including title, description, author info, and CTA button. Ideal for featured article sections, hero posts, and content that needs to make a strong visual impact.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293086/wxm4qvz857xl5ykeldtdvkr0j84i/cleanshot-2026-03-03-at-13-16-14.png","mobile":"https://cdn.ing/assets/i/r/293085/el52rouxd7894hfqv1czgnpv6k0s/cleanshot-2026-03-03-at-13-16-25.png"},"componentPath":"blocks/article/article-split-animated.tsx","code":"import { ArticleSplitAnimated } from \"@opensite/ui/blocks/article/article-split-animated\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <ArticleSplitAnimated\n      image={imagePlaceholders[31]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.15}\n      imageAlt=\"AI-powered development workflow\"\n      category=\"Artificial Intelligence\"\n      categoryHref=\"#\"\n      title=\"The Future of AI-Assisted Development\"\n      description=\"Discover how artificial intelligence is transforming the software development lifecycle, from code generation to automated testing and deployment.\"\n      authorName=\"Dr. Raj Patel\"\n      authorImage={imagePlaceholders[67]}\n      authorRole=\"AI Research Lead\"\n      authorHref=\"#\"\n      publishDate=\"January 25, 2026\"\n      readTime=\"15 min read\"\n      ctaActions={[\n        {\n          label: \"Read Full Article\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      enableAnimations={true}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"imageContainerClassName":{"type":"string","description":"Additional CSS classes for the image container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content container","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author info","required":false},"categoryClassName":{"type":"string","description":"Additional CSS classes for the category badge","required":false},"metaClassName":{"type":"string","description":"Additional CSS classes for the meta info (date, read time)","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"title":{"type":"object","description":"Article title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Article description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Hero image source URL","required":false},"imageAlt":{"type":"string","description":"Hero image alt text","required":false},"heroMediaSlot":{"type":"object","description":"Custom slot for hero media (overrides image)","typeLabel":"React.ReactNode","required":false},"authorName":{"type":"string","description":"Author name","required":false},"authorImage":{"type":"string","description":"Author image URL","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"React.ReactNode","required":false},"authorHref":{"type":"string","description":"Author profile href","required":false},"authorSlot":{"type":"object","description":"Custom slot for author info (overrides author props)","typeLabel":"React.ReactNode","required":false},"publishDate":{"type":"object","description":"Publish date string","typeLabel":"React.ReactNode","required":false},"readTime":{"type":"object","description":"Read time string","typeLabel":"React.ReactNode","required":false},"category":{"type":"object","description":"Category text","typeLabel":"React.ReactNode","required":false},"categoryHref":{"type":"string","description":"Category link href","required":false},"categorySlot":{"type":"object","description":"Custom slot for category badge (overrides category)","typeLabel":"React.ReactNode","required":false},"ctaActions":{"type":"array","description":"CTA actions","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},"ctaSlot":{"type":"object","description":"Custom slot for CTA section (overrides ctaActions)","typeLabel":"React.ReactNode","required":false},"enableAnimations":{"type":"boolean","description":"Enable entrance animations","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},"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":"Background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["article","blog-post","split-layout","animated","framer-motion","featured","hero","visual-impact","cta"],"performance":{},"importantUsageNotes":"ONLY use this block as an article hero/preview — it does not render a full article body. Ensure 'authorName', 'authorImage', and 'authorRole' are only populated with real, verified author data; do not fabricate author information. Only populate 'image' with a real image URL; DO NOT USE PLACEHOLDERS. If you supply 'ctaActions', use a variant of 'default' for the primary CTA and 'outline' for any secondary CTA. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:38:00.561Z"}