{"success":true,"data":{"category":{"slug":"blog","name":"Blog","description":"Collection of blog components"},"blocks":[{"id":"blog-grid-author-cards","name":"Blog Grid Author Cards","title":"Blog Grid Author Cards","category":"Blog","categorySlug":"blog","description":"A responsive grid layout displaying content items with author attribution, category badges, and metadata. Features a 3-column grid on large screens with hover effects on images. Ideal for content listing pages that emphasize author information and categorization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293166/xmo0ptefru2aed49rjxq0rpy9wd9/cleanshot-2026-03-04-at-13-28-50.png","mobile":"https://cdn.ing/assets/i/r/293165/g1fwojesz1y46m9uqsvb1z7flm6g/cleanshot-2026-03-04-at-13-29-22.png"},"componentPath":"blocks/blog/blog-grid-author-cards.tsx","code":"import { BlogGridAuthorCards } from \"@opensite/ui/blocks/blog/blog-grid-author-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogGridAuthorCards\n      heading=\"Stories from Our Team\"\n      description=\"Expert insights, practical guides, and thought leadership from our talented contributors.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Scaling Engineering Teams: Lessons from 10 Years\",\n          summary:\n            \"Key insights on building and scaling high-performing engineering organizations from startup to enterprise.\",\n          image: imagePlaceholders[31],\n          category: \"Leadership\",\n          author: \"Marcus Johnson\",\n          authorAvatar: imagePlaceholders[68],\n          published: \"April 15, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"The Psychology of User Interface Design\",\n          summary:\n            \"How cognitive principles and behavioral psychology inform better UI/UX decisions and user experiences.\",\n          image: imagePlaceholders[79],\n          category: \"Design\",\n          author: \"Rachel Park\",\n          authorAvatar: imagePlaceholders[101],\n          published: \"April 13, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"From Monolith to Microservices: A Migration Story\",\n          summary:\n            \"Our journey breaking down a legacy monolithic application into a modern microservices architecture.\",\n          image: imagePlaceholders[73],\n          category: \"Architecture\",\n          author: \"Alex Rivera\",\n          authorAvatar: imagePlaceholders[35],\n          published: \"April 10, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"Machine Learning in Production: Real-World Challenges\",\n          summary:\n            \"Practical lessons learned deploying ML models at scale in production environments.\",\n          image: imagePlaceholders[49],\n          category: \"AI/ML\",\n          author: \"Dr. Priya Sharma\",\n          authorAvatar: imagePlaceholders[84],\n          published: \"April 8, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"5\",\n          title: \"Building Resilient Distributed Systems\",\n          summary:\n            \"Design patterns and strategies for creating fault-tolerant systems that gracefully handle failures.\",\n          image: imagePlaceholders[92],\n          category: \"Systems\",\n          author: \"Thomas Wei\",\n          authorAvatar: imagePlaceholders[18],\n          published: \"April 5, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"6\",\n          title: \"The Future of Web Development: 2024 and Beyond\",\n          summary:\n            \"Emerging trends, technologies, and paradigms shaping the next generation of web applications.\",\n          image: imagePlaceholders[40],\n          category: \"Web Dev\",\n          author: \"Sophie Martinez\",\n          authorAvatar: imagePlaceholders[73],\n          published: \"April 2, 2024\",\n          href: \"#\",\n        },\n      ]}\n      viewAllAction={{\n        label: \"View All Posts\",\n        href: \"#\",\n        variant: \"outline\",\n      }}\n      background=\"gray\"\n      pattern=\"diagonalCrossFadeTopLeft\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"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},"posts":{"type":"array","description":"Array of content items to display","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"viewAllAction":{"type":"object","description":"Action configuration for the action button (mobile)","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},"viewAllSlot":{"type":"object","description":"Custom slot for rendering the action (overrides viewAllAction)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"postsClassName":{"type":"string","description":"Additional CSS classes for the items grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual cards","required":false},"viewAllClassName":{"type":"string","description":"Additional CSS classes for the action container","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","grid","author","avatar","category","badge","cards","listing"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'posts' since the layout is a 3-column × 2-row author-card grid. Only use real blog posts from the site's content; do not invent titles, summaries, categories, or dates. Only use real author names and real author avatar images from the media library for the 'author' and 'authorAvatar' fields. Follow the example props closely for this block."},{"id":"blog-cards-tagline-cta","name":"Blog Cards Tagline CTA","title":"Blog Cards Tagline CTA","category":"Blog","categorySlug":"blog","description":"A centered content section with tagline badge, heading, description, and CTA button above a 3-column card grid. Each card features an image, title, summary, and action link. Perfect for marketing-focused content sections that need a strong call-to-action alongside item previews.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289037/dliy8285arwy51vif3l2r41b3dlr/blog-cards-tagline-cta-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289038/0ctigvmiij64bdu3hi4e5cq71r84/blog-cards-tagline-cta-mobile.jpg"},"componentPath":"blocks/blog/blog-cards-tagline-cta.tsx","code":"import { BlogCardsTaglineCta } from \"@opensite/ui/blocks/blog/blog-cards-tagline-cta\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogCardsTaglineCta\n      badge=\"Knowledge Hub\"\n      heading=\"Empowering Your Digital Journey\"\n      description=\"Discover actionable insights, expert perspectives, and practical guides to help you navigate the ever-evolving world of technology and business.\"\n      ctaAction={{\n        label: \"Subscribe to Newsletter\",\n        href: \"/subscribe\",\n        variant: \"default\",\n      }}\n      posts={[\n        {\n          id: \"1\",\n          title: \"Digital Transformation: A Complete Roadmap\",\n          summary:\n            \"Navigate your organization's digital transformation journey with proven strategies and frameworks from industry leaders.\",\n          image: imagePlaceholders[23],\n          href: \"/blog/digital-transformation-roadmap\",\n        },\n        {\n          id: \"2\",\n          title: \"Sustainable Tech: Building Green Data Centers\",\n          summary:\n            \"Explore how leading companies are reducing carbon footprints while maintaining high-performance infrastructure.\",\n          image: imagePlaceholders[87],\n          href: \"/blog/sustainable-data-centers\",\n        },\n        {\n          id: \"3\",\n          title: \"Customer Experience in the AI Era\",\n          summary:\n            \"Learn how artificial intelligence is reshaping customer interactions and creating personalized experiences at scale.\",\n          image: imagePlaceholders[77],\n          href: \"/blog/cx-ai-era\",\n        },\n      ]}\n      readMoreText=\"Continue Reading\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/tagline content above heading","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},"ctaAction":{"type":"object","description":"Action configuration for the main 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},"ctaSlot":{"type":"object","description":"Custom slot for rendering the CTA action (overrides ctaAction)","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of blog post configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering posts (overrides posts array)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Text for \"Read more\" links on each post","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA action","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the posts grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post cards","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","cards","tagline","cta","marketing","grid","centered"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'posts' since the layout is a single-row 3-column grid. Only use real blog posts from the site's content; do not invent blog post titles or excerpts. The 'ctaAction' is a standalone CTA alongside the heading — use a variant of 'default' for it. Follow the example props closely for this block."},{"id":"blog-cards-read-time","name":"Blog Cards Read Time","title":"Blog Cards Read Time","category":"Blog","categorySlug":"blog","description":"A blog card grid featuring author avatars, read time badges, and separator lines. Each card displays an image, title, summary, author info, and estimated reading time. Includes a centered header with icon badge and 'View All Blogs' CTA button. Ideal for content-heavy blogs that want to show reading commitment upfront.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289039/fxiksjovvtc1ax99dz0pvtqbinkm/blog-cards-read-time-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289040/wzjl8rhzpbrqp4h2glbwb6j79e7k/blog-cards-read-time-mobile.jpg"},"componentPath":"blocks/blog/blog-cards-read-time.tsx","code":"import { BlogCardsReadTime } from \"@opensite/ui/blocks/blog/blog-cards-read-time\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogCardsReadTime\n      badge=\"Latest Articles\"\n      heading=\"Insights from Our Experts\"\n      description=\"Stay informed with the latest trends, best practices, and industry insights from our team of seasoned professionals.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Building Scalable Microservices with Kubernetes\",\n          summary:\n            \"Learn how to architect and deploy cloud-native microservices that scale effortlessly with modern container orchestration.\",\n          image: imagePlaceholders[34],\n          author: \"Sarah Chen\",\n          authorAvatar: imagePlaceholders[67],\n          readTime: \"12 min read\",\n          href: \"/blog/kubernetes-microservices\",\n        },\n        {\n          id: \"2\",\n          title: \"The Future of Artificial Intelligence in Healthcare\",\n          summary:\n            \"Exploring how AI and machine learning are revolutionizing patient care, diagnosis, and medical research.\",\n          image: imagePlaceholders[89],\n          author: \"Dr. Michael Torres\",\n          authorAvatar: imagePlaceholders[61],\n          readTime: \"8 min read\",\n          href: \"/blog/ai-healthcare\",\n        },\n        {\n          id: \"3\",\n          title: \"Design Systems: Creating Consistency at Scale\",\n          summary:\n            \"A comprehensive guide to building and maintaining design systems that empower teams and delight users.\",\n          image: imagePlaceholders[56],\n          author: \"Emma Williams\",\n          authorAvatar: imagePlaceholders[24],\n          readTime: \"10 min read\",\n          href: \"/blog/design-systems\",\n        },\n        {\n          id: \"4\",\n          title: \"Zero-Trust Security Architecture Explained\",\n          summary:\n            \"Understanding the principles and implementation strategies for modern zero-trust security frameworks.\",\n          image: imagePlaceholders[78],\n          author: \"James Rodriguez\",\n          authorAvatar: imagePlaceholders[5],\n          readTime: \"15 min read\",\n          href: \"/blog/zero-trust-security\",\n        },\n        {\n          id: \"5\",\n          title: \"Optimizing React Performance for Large Applications\",\n          summary:\n            \"Practical techniques and tools for keeping your React applications fast and responsive as they grow.\",\n          image: imagePlaceholders[12],\n          author: \"Lisa Anderson\",\n          authorAvatar: imagePlaceholders[38],\n          readTime: \"11 min read\",\n          href: \"/blog/react-performance\",\n        },\n        {\n          id: \"6\",\n          title: \"The Rise of Edge Computing and IoT\",\n          summary:\n            \"How edge computing is transforming IoT deployments and enabling real-time data processing at scale.\",\n          image: imagePlaceholders[45],\n          author: \"David Kim\",\n          authorAvatar: imagePlaceholders[72],\n          readTime: \"9 min read\",\n          href: \"/blog/edge-computing-iot\",\n        },\n      ]}\n      viewAllAction={{\n        label: \"View All Articles\",\n        href: \"/blog\",\n        variant: \"outline\",\n      }}\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/tagline content above heading","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},"posts":{"type":"array","description":"Array of blog post configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering posts (overrides posts array)","typeLabel":"React.ReactNode","required":false},"viewAllAction":{"type":"object","description":"Action configuration for the \"View All\" 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},"viewAllSlot":{"type":"object","description":"Custom slot for rendering the view all action (overrides viewAllAction)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header content wrapper","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},"postsClassName":{"type":"string","description":"Additional CSS classes for the posts grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post cards","required":false},"viewAllClassName":{"type":"string","description":"Additional CSS classes for the view all action container","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","cards","read-time","author","avatar","badge","grid"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'posts' since the layout is a 3-column grid with 2 rows (3×2). Only use real blog posts from the site's content; do not invent blog post titles, authors, dates, or excerpts. Only use real author names and real author avatar images from the media library for the 'author' and 'authorAvatar' fields on each post. Follow the example props closely for this block."},{"id":"blog-category-overlay","name":"Blog Category Overlay","title":"Blog Category Overlay","category":"Blog","categorySlug":"blog","description":"A content grid with category badges overlaid on images using a glassmorphism effect. Features a centered header section with badge, heading, description, and optional action link. Each card shows the item image, category overlay, title, date with icon, and optional action link. Great for visually categorized content with modern styling.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289041/sit5hcfahlcas6x4gteh9s4ku8si/blog-category-overlay-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289042/v33nsz7ia6qtmuczwt4ekg3yp1p4/blog-category-overlay-mobile.jpg"},"componentPath":"blocks/blog/blog-category-overlay.tsx","code":"import { BlogCategoryOverlay } from \"@opensite/ui/blocks/blog/blog-category-overlay\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogCategoryOverlay\n      badge=\"Explore Topics\"\n      heading=\"Curated Content for Every Interest\"\n      description=\"Browse through our carefully organized collection of articles, tutorials, and insights across various technology domains.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Machine Learning Model Optimization Techniques\",\n          image: imagePlaceholders[38],\n          category: \"AI & ML\",\n          date: \"April 12, 2024\",\n          href: \"/blog/ml-optimization\",\n        },\n        {\n          id: \"2\",\n          title: \"Progressive Web Apps: The Complete Guide\",\n          image: imagePlaceholders[76],\n          category: \"Web Development\",\n          date: \"April 8, 2024\",\n          href: \"/blog/pwa-complete-guide\",\n        },\n        {\n          id: \"3\",\n          title: \"Cybersecurity Best Practices for Remote Teams\",\n          image: imagePlaceholders[14],\n          category: \"Security\",\n          date: \"April 5, 2024\",\n          href: \"/blog/remote-cybersecurity\",\n        },\n        {\n          id: \"4\",\n          title: \"Data Visualization with D3.js and React\",\n          image: imagePlaceholders[52],\n          category: \"Data Science\",\n          date: \"March 29, 2024\",\n          href: \"/blog/data-viz-d3-react\",\n        },\n        {\n          id: \"5\",\n          title: \"Building Accessible Web Applications\",\n          image: imagePlaceholders[98],\n          category: \"Accessibility\",\n          date: \"March 25, 2024\",\n          href: \"/blog/accessible-web-apps\",\n        },\n        {\n          id: \"6\",\n          title: \"DevOps Culture: Bridging Development and Operations\",\n          image: imagePlaceholders[31],\n          category: \"DevOps\",\n          date: \"March 20, 2024\",\n          href: \"/blog/devops-culture\",\n        },\n      ]}\n      viewAllAction={{\n        label: \"Browse All Categories\",\n        href: \"/categories\",\n        asButton: true,\n      }}\n      readMoreText=\"Read Article\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/tagline content above heading","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},"posts":{"type":"array","description":"Array of content item configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering content items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"viewAllAction":{"type":"object","description":"Action configuration for the primary action link","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},"viewAllSlot":{"type":"object","description":"Custom slot for rendering the primary action (overrides viewAllAction)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Action link text for individual items","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header content wrapper","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},"viewAllClassName":{"type":"string","description":"Additional CSS classes for the view all action","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual content cards","required":false},"categoryBadgeClassName":{"type":"string","description":"Additional CSS classes for the category badge 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},"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","cards","category","overlay","glassmorphism","grid","modern"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 6 'posts' since the layout is a 3-column × 2-row overlay-image grid. Only use real blog posts from the site's content; do not invent titles, categories, or dates. Follow the example props closely for this block."},{"id":"blog-featured-popular","name":"Blog Featured Popular","title":"Blog Featured Popular","category":"Blog","categorySlug":"blog","description":"A two-tier content layout with a large featured item at the top and an additional content grid below. The featured item displays side-by-side image and content on desktop. Additional items show in a 3-column grid with images, category badges, titles, and descriptions. Renders only provided content without any defaults. Perfect for highlighting primary content alongside secondary content collections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289043/j82rplpq97adxj2rz70mi15nz5pu/blog-featured-popular-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289044/mtjoojrd0sa8qlp0tk8rei5hn1kv/blog-featured-popular-mobile.jpg"},"componentPath":"blocks/blog/blog-featured-popular.tsx","code":"import { BlogFeaturedPopular } from \"@opensite/ui/blocks/blog/blog-featured-popular\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogFeaturedPopular\n      heading=\"Top Reads This Month\"\n      description=\"Discover the most engaging and insightful articles from our community of experts and thought leaders.\"\n      popularHeading=\"Popular Articles\"\n      posts={[\n        {\n          id: \"featured\",\n          title: \"The Complete Guide to Microservices Architecture\",\n          description:\n            \"An comprehensive exploration of microservices patterns, best practices, and real-world implementation strategies for building scalable distributed systems.\",\n          image: imagePlaceholders[42],\n          category: \"Architecture\",\n          href: \"/blog/microservices-guide\",\n        },\n        {\n          id: \"1\",\n          title: \"GraphQL vs REST: Making the Right Choice\",\n          description:\n            \"A detailed comparison of GraphQL and REST APIs, helping you choose the best approach for your project.\",\n          image: imagePlaceholders[83],\n          category: \"API Design\",\n          href: \"/blog/graphql-vs-rest\",\n        },\n        {\n          id: \"2\",\n          title: \"Advanced TypeScript Patterns and Techniques\",\n          description:\n            \"Master advanced TypeScript features to write more maintainable and type-safe code.\",\n          image: imagePlaceholders[19],\n          category: \"Programming\",\n          href: \"/blog/advanced-typescript\",\n        },\n        {\n          id: \"3\",\n          title: \"Serverless Computing: When and Why\",\n          description:\n            \"Understanding serverless architectures and identifying the right use cases for your applications.\",\n          image: imagePlaceholders[64],\n          category: \"Cloud\",\n          href: \"/blog/serverless-computing\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"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},"popularHeading":{"type":"object","description":"Popular posts section title","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of blog post configurations (first post is featured)","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"featuredSlot":{"type":"object","description":"Custom slot for rendering the featured post (overrides first post)","typeLabel":"React.ReactNode","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering popular posts (overrides posts array)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"featuredClassName":{"type":"string","description":"Additional CSS classes for the featured post wrapper","required":false},"featuredImageClassName":{"type":"string","description":"Additional CSS classes for the featured post image","required":false},"featuredContentClassName":{"type":"string","description":"Additional CSS classes for the featured post content","required":false},"popularHeadingClassName":{"type":"string","description":"Additional CSS classes for the popular posts heading","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the popular posts grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post cards","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","featured","popular","trending","editorial","grid","two-tier","content","layout","collection"],"performance":{},"importantUsageNotes":"This block has a fixed featured + popular layout: the first post in the 'posts' array is the large featured card, and the remaining posts populate the popular sidebar. Lock to exactly 4 total posts (1 featured + 3 popular) matching the demo. Only use real blog posts from the site's content; do not invent titles, descriptions, categories, or hrefs. Follow the example props closely for this block."},{"id":"blog-related-articles","name":"Blog Related Articles","title":"Blog Related Articles","category":"Blog","categorySlug":"blog","description":"A compact related articles section with a 4-column grid layout. Each article displays category, title, description, and date in a text-only format without images. Features a header with title and 'See all' button. Ideal for sidebar widgets or end-of-article related content suggestions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289045/302tw35wkqc33u0n0mtxxo0kqie6/blog-related-articles-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289046/j4qywhvjzr01shl917ff2vrt3up6/blog-related-articles-mobile.jpg"},"componentPath":"blocks/blog/blog-related-articles.tsx","code":"import { BlogRelatedArticles } from \"@opensite/ui/blocks/blog/blog-related-articles\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogRelatedArticles\n      heading=\"Related Articles\"\n      seeAllAction={{\n        label: \"See All\",\n        href: \"/blog\",\n        variant: \"ghost\",\n      }}\n      articles={[\n        {\n          id: \"1\",\n          title: \"Authentication Best Practices for Modern Apps\",\n          description: \"Implementing secure authentication with OAuth 2.0, JWT tokens, and multi-factor authentication strategies.\",\n          category: \"Security\",\n          date: \"April 18, 2024\",\n          href: \"/blog/authentication-best-practices\",\n        },\n        {\n          id: \"2\",\n          title: \"Optimizing Database Queries for Performance\",\n          description: \"Techniques for writing efficient SQL, understanding query plans, and leveraging indexes effectively.\",\n          category: \"Databases\",\n          date: \"April 15, 2024\",\n          href: \"/blog/database-query-optimization\",\n        },\n        {\n          id: \"3\",\n          title: \"Introduction to Service Mesh with Istio\",\n          description: \"Understanding service mesh architecture and implementing Istio for microservices communication.\",\n          category: \"Infrastructure\",\n          date: \"April 12, 2024\",\n          href: \"/blog/istio-service-mesh\",\n        },\n        {\n          id: \"4\",\n          title: \"Building Responsive Images with Srcset\",\n          description: \"Delivering optimized images for different screen sizes and pixel densities using modern HTML features.\",\n          category: \"Web Development\",\n          date: \"April 9, 2024\",\n          href: \"/blog/responsive-images-srcset\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"seeAllAction":{"type":"object","description":"Action configuration for the \"See All\" 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},"seeAllSlot":{"type":"object","description":"Custom slot for rendering the see all action (overrides seeAllAction)","typeLabel":"React.ReactNode","required":false},"articles":{"type":"array","description":"Array of article/post configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"articlesSlot":{"type":"object","description":"Custom slot for rendering articles (overrides articles array)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"seeAllClassName":{"type":"string","description":"Additional CSS classes for the see all action","required":false},"articlesClassName":{"type":"string","description":"Additional CSS classes for the articles grid","required":false},"articleCardClassName":{"type":"string","description":"Additional CSS classes for individual article cards","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","related","sidebar","widget","text-only","grid","compact"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 items in the 'articles' array since the layout is a 4-column related-articles row. Only use real blog posts from the site's content that are genuinely related to the current page context; do not invent titles, descriptions, categories, dates, or hrefs. Follow the example props closely for this block."},{"id":"blog-tech-insights","name":"Blog Tech Insights","title":"Blog Tech Insights","category":"Blog","categorySlug":"blog","description":"A dark-themed content section with a featured item and secondary items list. The featured item displays a large image with title and author info. Secondary items appear in a bordered list with thumbnails and content snippets. Includes a header with title, description, and primary CTA button. Perfect for content-focused layouts with a modern, professional aesthetic.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289113/pctzj2fqzonzgjla0jigkf5jjh1t/blocks-blog-tech-insights-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289112/m5w7spzo74nbjccxzu1z73bvmb5u/blocks-blog-tech-insights-mobile.jpg"},"componentPath":"blocks/blog/blog-tech-insights.tsx","code":"import { BlogTechInsights } from \"@opensite/ui/blocks/blog/blog-tech-insights\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogTechInsights\n      heading=\"Tech Insights\"\n      description=\"Latest developments in technology. Exploring the intersection of blockchain technology and supply chain management for transparency and traceability.\"\n      readMoreAction={{\n        label: \"View All\",\n        href: \"#\",\n        variant: \"default\",\n        asButton: true,\n        size: \"lg\",\n      }}\n      featuredPost={{\n        id: \"featured\",\n        title: \"The Rise of Edge Computing in Modern Applications\",\n        image: imagePlaceholders[50],\n        author: \"Dr. Emily Chang\",\n        authorAvatar: imagePlaceholders[85],\n        authorRole: \"Principal Architect\",\n        href: \"/blog/edge-computing-rise\",\n      }}\n      secondaryPosts={[\n        {\n          id: \"1\",\n          title: \"WebAssembly: Transforming Web Performance\",\n          description:\n            \"How WebAssembly is transforming browser-based applications and enabling near-native performance for web apps.\",\n          image: imagePlaceholders[4],\n          href: \"/blog/webassembly-transformation\",\n        },\n        {\n          id: \"2\",\n          title: \"Blockchain in Supply Chain Management\",\n          description:\n            \"Exploring the intersection of blockchain technology and supply chain management for transparency and traceability.\",\n          image: imagePlaceholders[17],\n          href: \"/blog/blockchain-supply-chain\",\n        },\n        {\n          id: \"3\",\n          title: \"Quantum-Resistant Cryptography: Preparing for the Future\",\n          description:\n            \"Deep dive into quantum-resistant cryptography and preparing systems for the post-quantum computing era.\",\n          image: imagePlaceholders[37],\n          href: \"/blog/quantum-resistant-crypto\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"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},"readMoreAction":{"type":"object","description":"Action configuration for the primary call-to-action","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},"readMoreSlot":{"type":"object","description":"Custom slot for rendering the primary action (overrides readMoreAction)","typeLabel":"React.ReactNode","required":false},"featuredPost":{"type":"object","description":"Featured item configuration","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem","required":false},"featuredSlot":{"type":"object","description":"Custom slot for rendering the featured item (overrides featuredPost)","typeLabel":"React.ReactNode","required":false},"secondaryPosts":{"type":"array","description":"Array of secondary item configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"secondaryPostsSlot":{"type":"object","description":"Custom slot for rendering secondary items (overrides secondaryPosts array)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"readMoreClassName":{"type":"string","description":"Additional CSS classes for the primary action","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"featuredClassName":{"type":"string","description":"Additional CSS classes for the featured item wrapper","required":false},"featuredImageClassName":{"type":"string","description":"Additional CSS classes for the featured item image","required":false},"secondaryPostsClassName":{"type":"string","description":"Additional CSS classes for the secondary items container","required":false},"secondaryPostItemClassName":{"type":"string","description":"Additional CSS classes for individual secondary item entries","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","content","dark-theme","featured","list","professional","modern"],"performance":{},"importantUsageNotes":"This block has a fixed featured + secondary layout: supply exactly 1 'featuredPost' (large hero with author/avatar/role) and exactly 3 items in 'secondaryPosts'. Only use real blog posts from the site's content; do not invent titles, descriptions, authors, author avatars, author roles, or hrefs. Only use real author data for the featured post's 'author', 'authorAvatar', and 'authorRole' fields. Follow the example props closely for this block."},{"id":"blog-horizontal-cards","name":"Blog Horizontal Cards","title":"Blog Horizontal Cards","category":"Blog","categorySlug":"blog","description":"A content layout with horizontal card orientation featuring side-by-side image and content. Each card displays a thumbnail, category badge, author, date, title, summary, and 'Read more' link. Includes a centered header with optional badge, heading, and description, plus a bottom CTA button. Ideal for content-rich layouts that need more space for item summaries.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289047/4anidn99fztkdrgbdr00bhdvodhe/blog-horizontal-cards-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289048/h3f88g2g1hddrul4usnh38nkqmbo/blog-horizontal-cards-mobile.jpg"},"componentPath":"blocks/blog/blog-horizontal-cards.tsx","code":"import { BlogHorizontalCards } from \"@opensite/ui/blocks/blog/blog-horizontal-cards\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogHorizontalCards\n      badge=\"Featured Content\"\n      heading=\"Deep Dives and Tutorials\"\n      description=\"Comprehensive guides and detailed analyses to help you master complex topics and advance your skills.\"\n      ctaAction={{\n        label: \"Explore All Tutorials\",\n        href: \"/tutorials\",\n        variant: \"default\",\n      }}\n      posts={[\n        {\n          id: \"1\",\n          title: \"Building a Design System from Scratch\",\n          summary:\n            \"A step-by-step guide to creating a scalable design system that grows with your product and team. Learn about component libraries, design tokens, documentation, and governance.\",\n          image: imagePlaceholders[36],\n          category: \"Design Systems\",\n          author: \"Maya Chen\",\n          date: \"April 20, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"Advanced React Patterns: Compound Components\",\n          summary:\n            \"Master the compound component pattern to create flexible and reusable React components with implicit state sharing and elegant APIs.\",\n          image: imagePlaceholders[82],\n          category: \"React\",\n          author: \"Jake Morrison\",\n          date: \"April 17, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"PostgreSQL Performance Tuning Guide\",\n          summary:\n            \"Deep dive into PostgreSQL optimization techniques including indexing strategies, query optimization, connection pooling, and configuration tuning for production workloads.\",\n          image: imagePlaceholders[25],\n          category: \"Databases\",\n          author: \"Dmitri Volkov\",\n          date: \"April 14, 2024\",\n          href: \"#\",\n        },\n      ]}\n      readMoreText=\"Read Full Article\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge/tagline content above heading","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},"ctaAction":{"type":"object","description":"Action configuration for the main 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},"ctaSlot":{"type":"object","description":"Custom slot for rendering the CTA action (overrides ctaAction)","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of content item configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering posts (overrides posts array)","typeLabel":"React.ReactNode","required":false},"readMoreText":{"type":"object","description":"Text for \"Read more\" links on each post","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"postsClassName":{"type":"string","description":"Additional CSS classes for the posts container","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual post cards","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA container","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","horizontal","cards","side-by-side","content-rich","summary"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 'posts' since the layout is a vertical stack of 3 horizontal cards. Only use real blog posts from the site's content; do not invent titles, summaries, categories, authors, or dates. Use a variant of 'default' for the 'ctaAction'. Follow the example props closely for this block."},{"id":"blog-filtered-results","name":"Filtered Content Results","title":"Blog Filtered Results","category":"Blog","categorySlug":"blog","description":"A comprehensive content listing page with breadcrumb navigation, featured primary item, category filtering, and paginated results. Features a muted background header section with title, description, and primary item card. The main section includes checkbox-based category filters and a pagination button. Perfect for full content listing pages with advanced filtering capabilities.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295072/cyd3oyy1bbwns5zl2f7fsd1mu7so/blog-filtered-results-desktop.png","mobile":"https://cdn.ing/assets/i/r/295071/pn1zihkdeoxht8lnpsz83ounlacr/blog-filtered-results-mobile.png"},"componentPath":"blocks/blog/blog-filtered-results.tsx","code":"import { BlogFilteredResults } from \"@opensite/ui/blocks/blog/blog-filtered-results\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogFilteredResults\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      heading=\"Tech Insights & Tutorials\"\n      description=\"Filter and discover content tailored to your interests. Stay ahead with the latest in technology, design, and business innovation.\"\n      allContentHeading=\"All Articles\"\n      breadcrumb={[\n        { label: \"Home\", link: \"/\" },\n        { label: \"Blog\", link: \"/blog\" },\n        { label: \"All Articles\", link: \"/blog/all\" },\n      ]}\n      primaryPost={{\n        id: \"featured\",\n        title: \"Implementing CI/CD Pipelines at Scale\",\n        summary:\n          \"Learn how to build robust continuous integration and deployment pipelines that can handle enterprise-level complexity.\",\n        category: \"DevOps\",\n        thumbnail: imagePlaceholders[28],\n        cta: \"Read Full Article\",\n        href: \"/blog/cicd-at-scale\",\n      }}\n      posts={[\n        {\n          id: \"1\",\n          title: \"Container Security: Protecting Your Docker Deployments\",\n          summary:\n            \"Essential security practices for containerized applications and infrastructure.\",\n          category: \"security\",\n          thumbnail: imagePlaceholders[71],\n          cta: \"Learn More\",\n          href: \"/blog/container-security\",\n        },\n        {\n          id: \"2\",\n          title: \"React Server Components Deep Dive\",\n          summary:\n            \"Understanding the architecture and benefits of React Server Components for modern web apps.\",\n          category: \"development\",\n          thumbnail: imagePlaceholders[15],\n          cta: \"Explore\",\n          href: \"/blog/react-server-components\",\n        },\n        {\n          id: \"3\",\n          title: \"Building Real-Time Analytics Dashboards\",\n          summary:\n            \"Techniques for creating responsive, real-time data visualization platforms.\",\n          category: \"data\",\n          thumbnail: imagePlaceholders[39],\n          cta: \"Read More\",\n          href: \"/blog/realtime-analytics\",\n        },\n        {\n          id: \"4\",\n          title: \"Mobile App Performance Optimization\",\n          summary:\n            \"Proven strategies to make your mobile applications faster and more responsive.\",\n          category: \"mobile\",\n          thumbnail: imagePlaceholders[54],\n          cta: \"Discover\",\n          href: \"/blog/mobile-performance\",\n        },\n        {\n          id: \"5\",\n          title: \"The Art of Technical Writing\",\n          summary:\n            \"How to create clear, effective documentation that developers actually want to read.\",\n          category: \"writing\",\n          thumbnail: imagePlaceholders[88],\n          cta: \"Read Now\",\n          href: \"/blog/technical-writing\",\n        },\n        {\n          id: \"6\",\n          title: \"Distributed Systems Observability\",\n          summary:\n            \"Monitoring, logging, and tracing strategies for complex distributed architectures.\",\n          category: \"infrastructure\",\n          thumbnail: imagePlaceholders[22],\n          cta: \"View Article\",\n          href: \"/blog/distributed-observability\",\n        },\n      ]}\n      categories={[\n        { label: \"All\", value: \"all\" },\n        { label: \"Development\", value: \"development\" },\n        { label: \"Security\", value: \"security\" },\n        { label: \"Data\", value: \"data\" },\n        { label: \"Mobile\", value: \"mobile\" },\n        { label: \"Infrastructure\", value: \"infrastructure\" },\n        { label: \"Writing\", value: \"writing\" },\n      ]}\n      postsPerPage={6}\n      loadMoreAction={{\n        label: \"Load More Articles\",\n        variant: \"outline\",\n      }}\n    />\n  );\n}","propsSchema":{"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},"allContentHeading":{"type":"object","description":"Title for the secondary content section","typeLabel":"React.ReactNode","required":false},"breadcrumb":{"type":"array","description":"Breadcrumb navigation items","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"link":{"type":"string","description":"","required":true}},"typeLabel":"BreadcrumbItemType"},"typeLabel":"BreadcrumbItemType[]","required":false},"breadcrumbSlot":{"type":"object","description":"Custom slot for rendering breadcrumb (overrides breadcrumb array)","typeLabel":"React.ReactNode","required":false},"primaryPost":{"type":"object","description":"Primary/featured item configuration","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem","required":false},"primaryPostSlot":{"type":"object","description":"Custom slot for rendering primary item (overrides primaryPost)","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of content item configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering content items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"categories":{"type":"array","description":"Category filter options","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"value":{"type":"string","description":"","required":true}},"typeLabel":"CategoryFilter"},"typeLabel":"CategoryFilter[]","required":false},"categoriesSlot":{"type":"object","description":"Custom slot for rendering category filters (overrides categories)","typeLabel":"React.ReactNode","required":false},"postsPerPage":{"type":"number","description":"Number of items to show per page","required":false},"loadMoreAction":{"type":"object","description":"Action configuration for the pagination 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},"loadMoreSlot":{"type":"object","description":"Custom slot for rendering the pagination action (overrides loadMoreAction)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"heroClassName":{"type":"string","description":"Additional CSS classes for the hero container","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},"primaryPostClassName":{"type":"string","description":"Additional CSS classes for the primary item container","required":false},"allContentClassName":{"type":"string","description":"Additional CSS classes for the secondary content section","required":false},"allContentHeadingClassName":{"type":"string","description":"Additional CSS classes for the secondary content heading","required":false},"categoriesClassName":{"type":"string","description":"Additional CSS classes for the categories filter","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual item cards","required":false},"loadMoreClassName":{"type":"string","description":"Additional CSS classes for the pagination container","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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","filter","category","pagination","breadcrumb","featured","listing","content"],"performance":{},"importantUsageNotes":"Provide exactly 1 'primaryPost' (featured hero) plus 6 'posts' in the secondary grid (3-column, matching 'postsPerPage' of 6) to match the demo layout. Also supply a 'categories' array with real category values that match the actual post categories in the system; do not invent categories. Only use real blog posts from the site's content; do not invent titles, summaries, or hrefs. The 'loadMoreAction' should use a variant of 'outline'. Follow the example props closely for this block."},{"id":"blog-masonry-featured","name":"Blog Masonry Featured","title":"Blog Masonry Featured","category":"Blog","categorySlug":"blog","description":"A masonry-style grid with a large featured item spanning two columns and rows, surrounded by smaller item cards. The featured item includes a full description while secondary items show only title and metadata. Features a centered heading and hover effects on media. Ideal for visually dynamic layouts that highlight a primary content piece.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293073/wbghpzq115at5dmxt5xu5lcy0b4s/cleanshot-2026-03-03-at-11-09-26.png","mobile":"https://cdn.ing/assets/i/r/293072/x0gex0m50ezt2iup87wch0vg6viu/cleanshot-2026-03-03-at-11-09-46.png"},"componentPath":"blocks/blog/blog-masonry-featured.tsx","code":"import { BlogMasonryFeatured } from \"@opensite/ui/blocks/blog/blog-masonry-featured\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogMasonryFeatured\n      heading=\"Curated Reads\"\n      description=\"Handpicked articles and insights from our team and community to keep you informed and inspired.\"\n      background=\"secondary\"\n      pattern=\"gridFadeTopLeft\"\n      patternOpacity={0.15}\n      posts={[\n        {\n          id: \"featured\",\n          title: \"The Art and Science of API Design\",\n          description:\n            \"A comprehensive exploration of API design principles, RESTful best practices, GraphQL considerations, and how to create developer-friendly interfaces that stand the test of time.\",\n          image: imagePlaceholders[40],\n          author: \"Victoria Chang\",\n          date: \"April 22, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"1\",\n          title: \"Serverless Cost Optimization\",\n          description:\n            \"Strategies to reduce serverless computing costs while maintaining performance.\",\n          image: imagePlaceholders[77],\n          author: \"Ahmed Hassan\",\n          date: \"April 19, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"Building Accessible Forms\",\n          description:\n            \"Creating inclusive form experiences that work for everyone.\",\n          image: imagePlaceholders[11],\n          author: \"Laura Anderson\",\n          date: \"April 16, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"State Management in React\",\n          description:\n            \"Comparing Redux, Zustand, Jotai, and Context API for different use cases.\",\n          image: imagePlaceholders[55],\n          author: \"Chris Taylor\",\n          date: \"April 13, 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"WebSocket Security Guide\",\n          description:\n            \"Best practices for securing real-time WebSocket connections.\",\n          image: imagePlaceholders[90],\n          author: \"Yuki Tanaka\",\n          date: \"April 10, 2024\",\n          href: \"#\",\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of content items (first item is featured)","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"featuredSlot":{"type":"object","description":"Custom slot for rendering the featured item (overrides first item)","typeLabel":"React.ReactNode","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering additional items (overrides items array)","typeLabel":"React.ReactNode","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the items grid","required":false},"featuredClassName":{"type":"string","description":"Additional CSS classes for the featured item wrapper","required":false},"featuredImageClassName":{"type":"string","description":"Additional CSS classes for the featured item media","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual item cards","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","masonry","featured","grid","dynamic","visual","highlight"],"performance":{},"importantUsageNotes":"This block has a fixed masonry layout: exactly 1 featured post (id 'featured') plus 4 secondary posts, totalling 5 'posts'. Only use real blog posts from the site's content; do not invent titles, descriptions, authors, or dates. Follow the example props closely for this block."},{"id":"blog-horizontal-timeline","name":"Blog Horizontal Timeline","title":"Blog Horizontal Timeline","category":"Blog","categorySlug":"blog","description":"A timeline-style layout with large images alongside content cards in a horizontal arrangement. Each item features a rounded image, title, uppercase date, description, and animated action button with arrow icon. Items are separated by borders creating a timeline effect. Perfect for chronological content presentation or editorial storytelling.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295069/2u1a01s51c2780hza7q7ood0830b/blog-horizontal-timeline-desktop.png","mobile":"https://cdn.ing/assets/i/r/295070/9qmrhlz26uzfxq1cn4uqsal1mco8/blog-horizontal-timeline-mobile.png"},"componentPath":"blocks/blog/blog-horizontal-timeline.tsx","code":"import { BlogHorizontalTimeline } from \"@opensite/ui/blocks/blog/blog-horizontal-timeline\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogHorizontalTimeline\n      heading=\"Product Evolution\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Platform Launch: V1.0\",\n          description:\n            \"We officially launched our platform with core features including user authentication, dashboard analytics, and API integrations. The initial release focused on delivering a solid foundation for future growth.\",\n          image: imagePlaceholders[47],\n          date: \"JANUARY 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"2\",\n          title: \"AI Integration: Smart Insights\",\n          description:\n            \"Introduced machine learning-powered insights and recommendations. Our AI engine now analyzes user behavior patterns and provides personalized suggestions to improve productivity and outcomes.\",\n          image: imagePlaceholders[93],\n          date: \"FEBRUARY 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"3\",\n          title: \"Team Collaboration: Real-Time\",\n          description:\n            \"Released real-time collaboration features enabling teams to work together seamlessly. Includes shared workspaces, live cursors, comments, and instant notifications across all connected devices.\",\n          image: imagePlaceholders[16],\n          date: \"MARCH 2024\",\n          href: \"#\",\n        },\n        {\n          id: \"4\",\n          title: \"Enterprise Edition: Security & Scale\",\n          description:\n            \"Launched Enterprise tier with advanced security features, SSO integration, audit logs, custom SLAs, and dedicated support. Now serving organizations with thousands of users across multiple regions.\",\n          image: imagePlaceholders[61],\n          date: \"APRIL 2024\",\n          href: \"#\",\n        },\n      ]}\n      readText=\"Read More\"\n      pattern=\"diagonalCrossFadeTop\"\n      patternOpacity={1}\n      background=\"gray\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"posts":{"type":"array","description":"Array of content item configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering content items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"readText":{"type":"object","description":"Text for action links on each content item","typeLabel":"React.ReactNode","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},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"postsClassName":{"type":"string","description":"Additional CSS classes for the content items container","required":false},"postItemClassName":{"type":"string","description":"Additional CSS classes for individual content items","required":false},"postImageClassName":{"type":"string","description":"Additional CSS classes for content item images","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for content item cards","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","timeline","horizontal","chronological","editorial","storytelling"],"performance":{},"importantUsageNotes":"Provide exactly 4 items in the 'posts' array since the layout is a horizontal 4-step timeline. Only use real blog posts or content milestones from the site; do not invent titles, descriptions, dates, or hrefs. Follow the example props closely for this block."},{"id":"blog-grid-nine-posts","name":"Blog Grid Nine Posts","title":"Blog Grid Nine Posts","category":"Blog","categorySlug":"blog","description":"A comprehensive content grid layout displaying multiple items with author avatars, category badges, and publication dates. Features a 3-column grid on large screens with hover effects on images. Includes a mobile-only CTA button at the bottom. Ideal for content archive pages that need to display many items at once with full author attribution and content categorization.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289053/685jc9awca7gzkfnf0pyt1ck2otg/blog-grid-nine-posts-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289054/f29qybwcou2r5epplxqz6h9vceep/blog-grid-nine-posts-mobile.jpg"},"componentPath":"blocks/blog/blog-grid-nine-posts.tsx","code":"import { BlogGridNinePosts } from \"@opensite/ui/blocks/blog/blog-grid-nine-posts\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogGridNinePosts\n      heading=\"Latest Insights\"\n      description=\"Stay informed with our collection of in-depth articles, tutorials, and industry analysis.\"\n      posts={[\n        {\n          id: \"1\",\n          title: \"Kubernetes Best Practices for Production Workloads\",\n          summary:\n            \"Essential configurations, security measures, and optimization techniques for running Kubernetes in production.\",\n          image: imagePlaceholders[25],\n          category: \"Cloud Native\",\n          author: \"Kevin Zhang\",\n          authorAvatar: imagePlaceholders[62],\n          published: \"April 18, 2024\",\n          href: \"/blog/kubernetes-best-practices\",\n        },\n        {\n          id: \"2\",\n          title: \"Understanding WebAssembly and Its Use Cases\",\n          summary:\n            \"Explore how WebAssembly is enabling high-performance applications in browsers and beyond.\",\n          image: imagePlaceholders[81],\n          category: \"Web Tech\",\n          author: \"Nina Patel\",\n          authorAvatar: imagePlaceholders[7],\n          published: \"April 16, 2024\",\n          href: \"/blog/webassembly-guide\",\n        },\n        {\n          id: \"3\",\n          title: \"Event-Driven Architecture Patterns\",\n          summary:\n            \"Learn how to design scalable systems using event-driven principles and messaging patterns.\",\n          image: imagePlaceholders[27],\n          category: \"Architecture\",\n          author: \"Carlos Mendez\",\n          authorAvatar: imagePlaceholders[44],\n          published: \"April 14, 2024\",\n          href: \"/blog/event-driven-patterns\",\n        },\n        {\n          id: \"4\",\n          title: \"Accessibility in Modern Web Applications\",\n          summary:\n            \"Implementing WCAG guidelines and creating inclusive experiences for all users.\",\n          image: imagePlaceholders[43],\n          category: \"Accessibility\",\n          author: \"Jordan Lee\",\n          authorAvatar: imagePlaceholders[75],\n          published: \"April 12, 2024\",\n          href: \"/blog/web-accessibility\",\n        },\n        {\n          id: \"5\",\n          title: \"Database Sharding Strategies for Scale\",\n          summary:\n            \"When and how to implement database sharding to handle massive data growth.\",\n          image: imagePlaceholders[96],\n          category: \"Databases\",\n          author: \"Aisha Williams\",\n          authorAvatar: imagePlaceholders[15],\n          published: \"April 9, 2024\",\n          href: \"/blog/database-sharding\",\n        },\n        {\n          id: \"6\",\n          title: \"Testing Strategies for Microservices\",\n          summary:\n            \"Comprehensive approaches to testing distributed systems and ensuring service reliability.\",\n          image: imagePlaceholders[13],\n          category: \"Testing\",\n          author: \"Miguel Santos\",\n          authorAvatar: imagePlaceholders[58],\n          published: \"April 7, 2024\",\n          href: \"/blog/testing-microservices\",\n        },\n        {\n          id: \"7\",\n          title: \"CSS Grid and Flexbox: A Complete Comparison\",\n          summary:\n            \"Master modern CSS layout techniques and know when to use Grid vs Flexbox.\",\n          image: imagePlaceholders[69],\n          category: \"CSS\",\n          author: \"Elena Kowalski\",\n          authorAvatar: imagePlaceholders[99],\n          published: \"April 4, 2024\",\n          href: \"/blog/css-grid-flexbox\",\n        },\n        {\n          id: \"8\",\n          title: \"Introduction to Domain-Driven Design\",\n          summary:\n            \"Understanding DDD principles and applying them to create maintainable software systems.\",\n          image: imagePlaceholders[18],\n          category: \"Software Design\",\n          author: \"Robert Kim\",\n          authorAvatar: imagePlaceholders[26],\n          published: \"April 1, 2024\",\n          href: \"/blog/domain-driven-design\",\n        },\n        {\n          id: \"9\",\n          title: \"Real-Time Collaboration: Building Apps Like Figma\",\n          summary:\n            \"Technical deep dive into building collaborative features using CRDTs and WebSockets.\",\n          image: imagePlaceholders[11],\n          category: \"Real-Time\",\n          author: \"Sarah Thompson\",\n          authorAvatar: imagePlaceholders[8],\n          published: \"March 29, 2024\",\n          href: \"/blog/realtime-collaboration\",\n        },\n      ]}\n      ctaAction={{\n        label: \"Load More\",\n        variant: \"outline\",\n      }}\n    />\n  );\n}","propsSchema":{"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},"posts":{"type":"array","description":"Array of content item configurations","items":{"type":"object","description":"","fields":{"id":{"type":"object","description":"Unique identifier for the post","typeLabel":"string | number","required":false},"title":{"type":"object","description":"Post title","typeLabel":"ReactNode","required":true},"summary":{"type":"object","description":"Post summary/excerpt","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Post description (alternative to summary)","typeLabel":"ReactNode","required":false},"category":{"type":"object","description":"Post category or label","typeLabel":"ReactNode","required":false},"label":{"type":"object","description":"Post label (alternative to category)","typeLabel":"ReactNode","required":false},"author":{"type":"object","description":"Post author name","typeLabel":"ReactNode","required":false},"authorRole":{"type":"object","description":"Author role/title","typeLabel":"ReactNode","required":false},"authorAvatar":{"type":"string","description":"Author avatar image URL","required":false},"authorInitials":{"type":"string","description":"Author initials for avatar fallback","required":false},"date":{"type":"object","description":"Publication date","typeLabel":"ReactNode","required":false},"published":{"type":"object","description":"Published date (alternative to date)","typeLabel":"ReactNode","required":false},"readTime":{"type":"object","description":"Read time estimate","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"Post URL/link","required":false},"url":{"type":"string","description":"Post URL (alternative to href)","required":false},"link":{"type":"string","description":"Post URL (alternative to href)","required":false},"image":{"type":"string","description":"Featured image URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"thumbnail":{"type":"string","description":"Thumbnail image URL (alternative to image)","required":false},"cta":{"type":"object","description":"CTA button text","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the post card","required":false}},"typeLabel":"BlogPostItem"},"typeLabel":"BlogPostItem[]","required":false},"postsSlot":{"type":"object","description":"Custom slot for rendering content items (overrides posts array)","typeLabel":"React.ReactNode","required":false},"ctaAction":{"type":"object","description":"Action configuration for the CTA button (mobile)","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},"ctaSlot":{"type":"object","description":"Custom slot for rendering the CTA action (overrides ctaAction)","typeLabel":"React.ReactNode","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","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},"postsClassName":{"type":"string","description":"Additional CSS classes for the content items grid","required":false},"postCardClassName":{"type":"string","description":"Additional CSS classes for individual content cards","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA container","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":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","posts","articles","grid","archive","author","avatar","category","nine-posts"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 9 'posts' since the layout is a 3-column grid with 3 rows (the block name encodes this). Only use real blog posts from the site's content; do not invent titles, summaries, categories, authors, author avatars, or dates. Follow the example props closely for this block."},{"id":"blog-carousel-apple","name":"Blog Carousel Apple","title":"Blog Carousel Apple","category":"Blog","categorySlug":"blog","description":"An eye-catching horizontal carousel featuring Apple-style cards with gradient overlays and smooth animations. Each card displays a featured image, category tag, and title with configurable action types (link, dialog, lightbox). Features optional layout animations and supports custom click handlers. Perfect for showcasing featured content items, latest updates, or curated content collections with a premium, polished aesthetic.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289049/59tcotkcdz7lgaf1lma9w0tf2i3s/blog-carousel-apple-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289050/239jbb4c2yn5m2gqdj0i9s0g8xzt/blog-carousel-apple-mobile.jpg"},"componentPath":"blocks/blog/blog-carousel-apple.tsx","code":"import { BlogCarouselApple } from \"@opensite/ui/blocks/blog/blog-carousel-apple\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <BlogCarouselApple\n      title=\"Featured Stories\"\n      subtitle=\"Trending Now\"\n      posts={[\n        {\n          image: imagePlaceholders[45],\n          title: \"The Evolution of Cloud-Native Development\",\n          category: \"Cloud Computing\",\n          url: \"/blog/cloud-native-evolution\",\n          excerpt:\n            \"Explore how cloud-native architectures are transforming software development and deployment strategies across industries.\",\n        },\n        {\n          image: imagePlaceholders[1],\n          title: \"Blockchain Beyond Cryptocurrency\",\n          category: \"Innovation\",\n          url: \"/blog/blockchain-applications\",\n          excerpt:\n            \"Discover practical blockchain applications in supply chain, healthcare, and enterprise solutions beyond digital currencies.\",\n        },\n        {\n          image: imagePlaceholders[28],\n          title: \"UX Design Principles for Mobile-First\",\n          category: \"Design\",\n          url: \"/blog/mobile-first-ux\",\n          excerpt:\n            \"Master the essential principles of creating intuitive mobile experiences that users love and businesses benefit from.\",\n        },\n        {\n          image: imagePlaceholders[67],\n          title: \"Quantum Computing: Current State and Future\",\n          category: \"Technology\",\n          url: \"/blog/quantum-computing-future\",\n          excerpt:\n            \"An in-depth look at quantum computing's progress, challenges, and potential impact on various industries.\",\n        },\n        {\n          image: imagePlaceholders[42],\n          title: \"API-First Development Strategy\",\n          category: \"Development\",\n          url: \"/blog/api-first-strategy\",\n          excerpt:\n            \"Learn why API-first approaches are becoming the standard for modern software development teams.\",\n        },\n      ]}\n      actionType=\"link\"\n      enableLayoutAnimations={true}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopLeft\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"title":{"type":"string","description":"Section title","required":false},"subtitle":{"type":"string","description":"Section subtitle/eyebrow text","required":false},"posts":{"type":"array","description":"Array of content items to display in the carousel","items":{"type":"object","description":"","fields":{"image":{"type":"string","description":"Content item image URL","required":false},"title":{"type":"string","description":"Content item title","required":false},"category":{"type":"string","description":"Content item category/tag","required":false},"url":{"type":"string","description":"Content item URL (internal or external)","required":false},"excerpt":{"type":"object","description":"Optional content item excerpt/description (for dialog/lightbox views)","typeLabel":"React.ReactNode","required":false}},"typeLabel":"BlogCarouselApplePost"},"typeLabel":"BlogCarouselApplePost[]","required":false},"actionType":{"type":"string","description":"Card action type - determines behavior when cards are clicked","typeLabel":"\"link\" | \"dialog\" | \"lightbox\" | \"none\"","required":false},"onCardClick":{"type":"object","description":"Custom action handler for card clicks","typeLabel":"(post: BlogCarouselApplePost, index: number) => void","required":false},"enableLayoutAnimations":{"type":"boolean","description":"Enable layout animations for cards","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow configuration for optimized image loading","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":"Optional background pattern name or URL","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},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the carousel container","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for individual cards","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["blog","carousel","apple-style","horizontal-scroll","cards","gradient-overlay","animated","featured","premium"],"performance":{},"importantUsageNotes":"Provide 4-8 items in the 'posts' array for this Apple-style carousel; the demo uses 5. Only use real blog posts from the site's content; do not invent titles, categories, excerpts, or URLs. Follow the example props closely for this block."}]},"timestamp":"2026-05-13T10:12:12.710Z"}