{"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/308385/egaoiss1gk8rae2ap2utvcwd7w0d/about-interactive-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308386/5c0h9bo4hihi32oi0qdampjla2j4/about-interactive-tabs-mobile.jpg"},"componentPath":"blocks/about/about-interactive-tabs.tsx","code":"import { AboutInteractiveTabs } from \"@opensite/ui/blocks/about/about-interactive-tabs\";\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: \"https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc\",\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: \"https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75\",\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: \"https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo\",\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: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\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":true,"maxLength":70},"subtitle":{"type":"object","description":"Subtitle/description text","typeLabel":"React.ReactNode","required":false,"maxLength":150},"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":true,"minItems":2,"maxItems":5,"mediaHints":{"path":"tabs[].content.image","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Tab content image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"tabs[].id":{"type":"object","description":"","required":true},"tabs[].content.title":{"type":"object","description":"","required":true,"maxLength":80},"tabs[].content.description":{"type":"object","description":"","required":true,"maxLength":220}},"exampleProps":{"title":"Discover Our Story","subtitle":"Learn more about how we work and what we value.","tabs":[{"id":"work","label":"Our Work","content":{"title":"Crafting Digital Experiences","description":"We create maintainable, high-performing customer experiences.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team reviewing digital experience work"}}},{"id":"process","label":"Our Process","content":{"title":"Built Around Real Operations","description":"Every workflow starts from the way teams already work.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team process planning session"}}}]},"dependencies":["@opensite/ui"],"tags":["about","interactive","tabs","navigation","dynamic","work","process","values"],"performance":{},"importantUsageNotes":"Use for two to five distinct company aspects such as work, process, values, or culture. Each tab id must be unique and stable. Tab images must be image assets only and should match the tab content.","usageRequirements":{"requiredProps":["title","tabs"],"propConstraints":{"title":{"required":true,"maxLength":70},"subtitle":{"maxLength":150},"tabs":{"required":true,"minItems":2,"maxItems":5},"tabs[].id":{"required":true,"note":"Must be unique within the tabs array."},"tabs[].content.title":{"required":true,"maxLength":80},"tabs[].content.description":{"required":true,"maxLength":220}},"mediaSlots":{"tabs[].content.image":{"path":"tabs[].content.image","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Tab content image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}}},"timestamp":"2026-06-27T19:59:38.968Z"}