{"success":true,"data":{"block":{"id":"feature-bento-utilities","name":"Feature Bento Utilities","title":"Feature Bento Utilities","category":"Features","categorySlug":"features","description":"Bento-style grid layout with mixed card sizes showcasing various utilities. Two-column bento grid with varying card heights and image cards. Includes sparkle icons and coming soon badges.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293067/ld6eadb8c2umb8boqezxlykhmec8/cleanshot-2026-03-03-at-10-22-56.png","mobile":"https://cdn.ing/assets/i/r/293066/1mzf0bjbdg5vjkcy3phv0cf0l166/cleanshot-2026-03-03-at-10-23-14.png"},"componentPath":"blocks/features/feature-bento-utilities.tsx","code":"import { FeatureBentoUtilities } from \"@opensite/ui/blocks/features/feature-bento-utilities\";\n\nexport default function Demo() {\n  return (\n    <FeatureBentoUtilities\n      label=\"DEVELOPMENT UTILITIES\"\n      labelIconName=\"lucide/sparkles\"\n      title=\"Tools That Power Your Workflow\"\n      description=\"Comprehensive utilities designed to streamline every aspect of your development process.\"\n      leftColumnCards={[\n        {\n          title: \"Code Generator\",\n          description:\n            \"Generate components, routes, and API endpoints from templates with smart variable replacement.\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo\",\n          imageAlt: \"Code generator\",\n          showSparkle: true,\n          href: \"#\",\n        },\n        {\n          title: \"Schema Builder\",\n          description:\n            \"Visual database designer with automatic migration generation.\",\n          badge: \"Beta\",\n          isDashed: false,\n          href: \"#\",\n        },\n      ]}\n      rightColumnCards={[\n        {\n          title: \"Asset Optimizer\",\n          description:\n            \"Automatically compress and optimize images, fonts, and other assets during build.\",\n          showSparkle: false,\n          href: \"#\",\n        },\n        {\n          title: \"API Testing\",\n          description:\n            \"Interactive API explorer with live testing and code generation in multiple languages.\",\n          imageSrc: \"https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75\",\n          imageAlt: \"API testing\",\n          showSparkle: true,\n          href: \"#\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"label":{"type":"object","description":"Section label content","typeLabel":"React.ReactNode","required":false},"labelIconName":{"type":"string","description":"Icon name for the label","required":false},"labelIcon":{"type":"object","description":"Icon element for the label (overrides labelIconName)","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},"leftColumnCards":{"type":"array","description":"Array of cards for the left column","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Card title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL (for image cards)","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"showSparkle":{"type":"boolean","description":"Whether to show sparkle icon next to title","required":false},"badge":{"type":"object","description":"Badge text (e.g., \"Coming soon\")","typeLabel":"React.ReactNode","required":false},"isDashed":{"type":"boolean","description":"Whether this is a dashed/coming soon style card","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"href":{"type":"string","description":"Optional Link","required":false}},"typeLabel":"FeatureBentoUtilitiesCardItem"},"typeLabel":"FeatureBentoUtilitiesCardItem[]","required":false},"leftColumnSlot":{"type":"object","description":"Custom slot for left column (overrides leftColumnCards)","typeLabel":"React.ReactNode","required":false},"rightColumnCards":{"type":"array","description":"Array of cards for the right column","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Card title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Card description","typeLabel":"React.ReactNode","required":false},"imageSrc":{"type":"string","description":"Image source URL (for image cards)","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageSlot":{"type":"object","description":"Image element or ReactNode (overrides imageSrc)","typeLabel":"React.ReactNode","required":false},"showSparkle":{"type":"boolean","description":"Whether to show sparkle icon next to title","required":false},"badge":{"type":"object","description":"Badge text (e.g., \"Coming soon\")","typeLabel":"React.ReactNode","required":false},"isDashed":{"type":"boolean","description":"Whether this is a dashed/coming soon style card","required":false},"className":{"type":"string","description":"Additional CSS classes for the card","required":false},"href":{"type":"string","description":"Optional Link","required":false}},"typeLabel":"FeatureBentoUtilitiesCardItem"},"typeLabel":"FeatureBentoUtilitiesCardItem[]","required":false},"rightColumnSlot":{"type":"object","description":"Custom slot for right column (overrides rightColumnCards)","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 wrapper","required":false},"labelClassName":{"type":"string","description":"Additional CSS classes for the label","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},"gridClassName":{"type":"string","description":"Additional CSS classes for the grid wrapper","required":false},"columnClassName":{"type":"string","description":"Additional CSS classes for each column","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},"patternClassName":{"type":"string","description":"Additional CSS classes for the pattern overlay","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"cards":{"type":"object","description":"","minItems":3,"maxItems":8}},"exampleProps":{"label":"Platform","title":"One Platform, Infinite Possibilities","cards":[{"title":"AI Content Generation","description":"Generate high-quality content with a single prompt.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"AI content generation interface","showSparkle":true},{"title":"Visual Page Builder","description":"Drag-and-drop your way to beautiful pages.","imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Page builder interface"},{"title":"Analytics Dashboard","description":"Real-time insights into every aspect of your site.","badge":"Coming soon","isDashed":true}],"background":"default","spacing":"py-12 md:py-32"},"dependencies":["@opensite/ui"],"tags":["features","bento","grid","utilities","mixed-sizes","images","modern"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Cards can have 'imageSrc' (URL) for visual cards or just 'title'/'description' for text-only cards. Use 'isDashed: true' for coming-soon placeholder cards. Use 'showSparkle: true' to display a sparkle icon next to the title. Use 'badge' for status labels like 'Coming soon'.","usageRequirements":{"requiredProps":[],"mediaSlots":{},"requiresSiteCapabilities":["media_library"],"propConstraints":{"cards":{"minItems":3,"maxItems":8}}}}},"timestamp":"2026-06-27T20:13:37.678Z"}