{"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 { imagePlaceholders } from \"@/lib/media\";\nimport { 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: imagePlaceholders[46],\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: imagePlaceholders[70],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["features","bento","grid","utilities","mixed-sizes","images","modern"],"performance":{},"importantUsageNotes":"This is a bento layout — supply exactly 2 items in 'leftColumnCards' and exactly 2 items in 'rightColumnCards' to match the canonical 2×2 two-column bento grid. Only use real images for items that have an 'imageSrc'; if you don't have real images, omit 'imageSrc' from those items. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:50.870Z"}