{"success":true,"data":{"block":{"id":"about-interactive-tabs","name":"About Interactive Tabs","title":"About Interactive Tabs","category":"About","categorySlug":"about","description":"An interactive about section with tabbed navigation, dynamic content switching, and optional images per tab. Ideal for showcasing multiple aspects of a company (work, process, values) in an engaging, space-efficient format.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293119/hieks1eg9b4ub0aawfu0znscbet8/cleanshot-2026-03-03-at-20-41-54.png","mobile":"https://cdn.ing/assets/i/r/293118/nk8nro4p2pailhnfov2v6cdro2ft/cleanshot-2026-03-03-at-20-42-13.png"},"componentPath":"blocks/about/about-interactive-tabs.tsx","code":"import { AboutInteractiveTabs } from \"@opensite/ui/blocks/about/about-interactive-tabs\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutInteractiveTabs\n      title=\"How We Deliver Results\"\n      subtitle=\"Our proven methodology combines strategic thinking with hands-on execution to transform your vision into reality.\"\n      tabs={[\n        {\n          id: \"discover\",\n          label: \"Discover\",\n          content: {\n            title: \"Understanding Your Vision\",\n            description:\n              \"We begin by deeply understanding your business, goals, and challenges. Through stakeholder interviews, market research, and competitive analysis, we uncover insights that inform every decision.\",\n            image: {\n              src: imagePlaceholders[16],\n              alt: \"Discovery phase workshop\",\n            },\n          },\n        },\n        {\n          id: \"design\",\n          label: \"Design\",\n          content: {\n            title: \"Crafting the Solution\",\n            description:\n              \"Armed with insights, we craft solutions that balance aesthetics with functionality. Our iterative design process ensures every element serves a purpose and resonates with your audience.\",\n            image: {\n              src: imagePlaceholders[27],\n              alt: \"Design process\",\n            },\n          },\n        },\n        {\n          id: \"develop\",\n          label: \"Develop\",\n          content: {\n            title: \"Building with Excellence\",\n            description:\n              \"Our engineering team brings designs to life using modern technologies and best practices. We prioritize performance, accessibility, and maintainability in every line of code.\",\n            image: {\n              src: imagePlaceholders[38],\n              alt: \"Development phase\",\n            },\n          },\n        },\n        {\n          id: \"deliver\",\n          label: \"Deliver\",\n          content: {\n            title: \"Launching Your Success\",\n            description:\n              \"Launch is just the beginning. We ensure smooth deployment, provide comprehensive training, and offer ongoing support to maximize the impact of your investment.\",\n            image: {\n              src: imagePlaceholders[49],\n              alt: \"Project delivery\",\n            },\n          },\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.9}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Subtitle/description text","typeLabel":"React.ReactNode","required":false},"tabs":{"type":"array","description":"Array of tab configurations","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":false},"tabsSlot":{"type":"object","description":"Custom slot for rendering tabs (overrides tabs 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 wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"tabsContainerClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabButtonClassName":{"type":"string","description":"Additional CSS classes for the tab buttons","required":false},"activeTabClassName":{"type":"string","description":"Additional CSS classes for the active tab button","required":false},"tabContentClassName":{"type":"string","description":"Additional CSS classes for the tab content","required":false},"tabContentTitleClassName":{"type":"string","description":"Additional CSS classes for the tab content title","required":false},"tabContentDescriptionClassName":{"type":"string","description":"Additional CSS classes for the tab content description","required":false},"tabContentImageClassName":{"type":"string","description":"Additional CSS classes for the tab content image","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":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","interactive","tabs","navigation","dynamic","work","process","values"],"performance":{},"importantUsageNotes":"Ensure to generate 3-6 'tabs' since the tabs layout will get distorted with a tabs count outside this range. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:03.080Z"}