{"success":true,"data":{"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:41:29.208Z"}