{"success":true,"data":{"block":{"id":"feature-showcase","name":"Feature Showcase Carousel","title":"Feature Showcase","category":"Features","categorySlug":"features","description":"Display feature content with media in an interactive carousel format. Each slide shows feature content alongside images or videos with smooth navigation. Features mobile height equalization for consistent appearance.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/306333/yxl1qem73uiamm0uj4e21zeqmihh/feature-showcase-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/306334/4oh39vt4jc3u0u1oame8o3pbwkny/feature-showcase-mobile.jpg"},"componentPath":"blocks/features/feature-showcase.tsx","code":"import { imagePlaceholders, optixFlowApiKey } from \"@/lib/media\";\nimport { Pressable } from \"@opensite/ui\";\nimport { FeatureShowcase } from \"@opensite/ui/blocks/features/feature-showcase\";\nimport { Img } from \"@page-speed/img\";\n\nexport default function Demo() {\n  return (\n    <FeatureShowcase\n      items={[\n        {\n          content: (\n            <div className=\"flex flex-col gap-4 md:gap-8\">\n              <h3 className=\"text-3xl font-bold\">\n                Deploy to the Edge in Seconds\n              </h3>\n              <p className=\"text-sm\">\n                Real-time insights into performance, errors, and user behavior.\n                Custom dashboards and alerts help you stay on top of what\n                matters most.\n              </p>\n              <p className=\"text-lg\">\n                Push your code and watch it deploy to 200+ edge locations\n                worldwide. Automatic builds, tests, and zero-downtime\n                deployments make shipping to production effortless.\n              </p>\n              <div className=\"flex items-center gap-2\">\n                <Pressable asButton href=\"#\">\n                  Get Started\n                </Pressable>\n              </div>\n            </div>\n          ),\n          mediaComponent: (\n            <Img\n              src={imagePlaceholders[62]}\n              alt=\"Edge deployment\"\n              className=\"w-full rounded-lg object-cover\"\n              optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n            />\n          ),\n        },\n        {\n          content: (\n            <div className=\"flex flex-col gap-4 md:gap-8\">\n              <h3 className=\"mb-4 text-3xl font-bold\">\n                Built-in Analytics & Monitoring\n              </h3>\n              <p className=\"text-lg\">\n                Real-time insights into performance, errors, and user behavior.\n                Custom dashboards and alerts help you stay on top of what\n                matters most.\n              </p>\n            </div>\n          ),\n          mediaComponent: (\n            <Img\n              src={imagePlaceholders[84]}\n              alt=\"Analytics dashboard\"\n              className=\"w-full rounded-lg object-cover\"\n              optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n            />\n          ),\n        },\n        {\n          content: (\n            <div className=\"flex flex-col gap-4 md:gap-8\">\n              <h3 className=\"mb-4 text-3xl font-bold\">\n                Collaborate with Your Team\n              </h3>\n              <p className=\"text-lg\">\n                Preview environments for every pull request, integrated code\n                review, and team-wide visibility. Ship faster together.\n              </p>\n            </div>\n          ),\n          mediaComponent: (\n            <Img\n              src={imagePlaceholders[107]}\n              alt=\"Team collaboration\"\n              className=\"w-full rounded-lg object-cover\"\n              optixFlowConfig={{ apiKey: optixFlowApiKey as string }}\n            />\n          ),\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"items":{"type":"array","description":"Array of feature items to display in carousel","items":{"type":"object","description":"","fields":{"content":{"type":"object","description":"Content node to display (text, headings, etc.)","typeLabel":"ReactNode","required":true},"mediaComponent":{"type":"object","description":"Media node to display (image, video, etc.)","typeLabel":"ReactNode","required":true}},"typeLabel":"FeatureShowcaseItem"},"typeLabel":"FeatureShowcaseItem[]","required":true},"children":{"type":"object","description":"Optional children to render above the carousel (e.g., section title)","typeLabel":"ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the outer container","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel wrapper","required":false},"slideClassName":{"type":"string","description":"Additional CSS classes for each slide container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"mediaClassName":{"type":"string","description":"Additional CSS classes for the media area","required":false},"arrowClassName":{"type":"string","description":"Additional CSS classes for navigation arrows","required":false},"equalizeOnMobile":{"type":"boolean","description":"Whether to equalize slide heights on mobile","required":false},"stretchMediaOnMobile":{"type":"boolean","description":"Whether to stretch media to fill available height on mobile","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","carousel","showcase","slider","highlights","product-features","capabilities","interactive","media-gallery"],"performance":{},"importantUsageNotes":"Ensure to supply 3–5 items in the 'items' array for the showcase carousel. Each item uses a 'content' slot (React content for the text side) and a 'mediaComponent' slot (image or media element) — only use real images in 'mediaComponent'. Do not use this block if you don't have valid real images for every slide. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:40:40.793Z"}