{"success":true,"data":{"block":{"id":"feature-carousel-progress","name":"Feature Carousel Progress","title":"Feature Carousel Progress","category":"Features","categorySlug":"features","description":"Carousel-based feature display with progress indicator. Each slide shows a feature with image, title, and description. Includes navigation arrows and progress bar for visual feedback.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290521/x31bb9r4ufra33peu6ujjz8dhwsu/feature-carousel-progress-desktop.png","mobile":"https://cdn.ing/assets/i/r/290520/8f856nuofnq4z17qtinacz1qcrq9/feature-carousel-progress-mobile.png"},"componentPath":"blocks/features/feature-carousel-progress.tsx","code":"import { FeatureCarouselProgress } from \"@opensite/ui/blocks/features/feature-carousel-progress\";\n\nexport default function Demo() {\n  return (\n    <FeatureCarouselProgress\n      badge=\"Platform Features\"\n      title=\"Everything You Need in One Place\"\n      description=\"Our platform offers a comprehensive suite of features designed to help you build, deploy, and scale modern applications with ease and confidence.\"\n      carouselLabel=\"Explore Our Features\"\n      slides={[\n        {\n          iconName: \"lucide/code\",\n          title: \"Modern Development\",\n          description:\n            \"Built with the latest frameworks and tools, updated regularly for features and security. TypeScript, React, and Tailwind CSS come preconfigured for optimal developer experience.\",\n        },\n        {\n          iconName: \"lucide/rocket\",\n          title: \"Instant Deployment\",\n          description:\n            \"Push to production in seconds with automatic builds, tests, and deployments. No configuration needed - it just works.\",\n        },\n        {\n          iconName: \"lucide/shield-check\",\n          title: \"Enterprise Security\",\n          description:\n            \"SOC 2 Type II certified with automatic SSL, DDoS protection, and regular security audits. Your data is always protected.\",\n        },\n        {\n          iconName: \"lucide/bar-chart-3\",\n          title: \"Advanced Analytics\",\n          description:\n            \"Real-time insights into performance, user behavior, and business metrics. Make data-driven decisions with confidence.\",\n        },\n        {\n          iconName: \"lucide/users\",\n          title: \"Team Collaboration\",\n          description:\n            \"Built-in tools for code review, project management, and team communication. Keep everyone aligned and productive.\",\n        },\n      ]}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"badge":{"type":"object","description":"Badge content displayed above the heading","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description content","typeLabel":"React.ReactNode","required":false},"carouselLabel":{"type":"object","description":"Label for the carousel section","typeLabel":"React.ReactNode","required":false},"slides":{"type":"array","description":"Array of feature slides","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element (overrides iconName)","typeLabel":"React.ReactNode","required":false},"iconName":{"type":"string","description":"Icon name in format: prefix/name (e.g., \"lucide/code\")","required":false},"title":{"type":"object","description":"Feature title content","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Feature description content","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"href":{"type":"string","description":"Optional href for the item","required":false}},"typeLabel":"FeatureCarouselProgressItem"},"typeLabel":"FeatureCarouselProgressItem[]","required":false,"minItems":3,"maxItems":8},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides 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},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"carouselClassName":{"type":"string","description":"Additional CSS classes for the carousel","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the carousel controls","required":false},"progressClassName":{"type":"string","description":"Additional CSS classes for the progress bar","required":false},"cardClassName":{"type":"string","description":"Additional CSS classes for each slide card","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"badge":"Features","title":"Everything You Need","description":"A complete platform with all the tools you need to build, launch, and grow.","carouselLabel":"Explore features","slides":[{"iconName":"lucide/code","title":"Modern Codebase","description":"Clean, well-documented code following best practices."},{"iconName":"lucide/layout","title":"Responsive Design","description":"Looks great on every device and screen size."},{"iconName":"lucide/rocket","title":"Fast Deployment","description":"Ship to production in minutes, not days."}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","carousel","slider","progress","interactive","showcase","product"],"performance":{},"importantUsageNotes":"Use 'iconName' in format 'prefix/name' on slides (e.g., 'lucide/code'). No images on slides. The progress bar tracks carousel position automatically. title","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":[],"propConstraints":{"slides":{"minItems":3,"maxItems":8}}}}},"timestamp":"2026-06-27T19:54:24.911Z"}