{"success":true,"data":{"block":{"id":"about-startup-team","name":"About Startup Team","title":"About Startup Team","category":"About","categorySlug":"about","description":"A SaaS startup-style about section with sticky sidebar navigation, main content area, and a team member grid with avatars and social links. Ideal for startup about pages that need organized navigation and team introductions.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289016/72d9p48bkwv0vufjcszal1a0ajdv/about-startup-team-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289015/skz6inupohb6p56zym3nuavh2s4g/about-startup-team-mobile.jpg"},"componentPath":"blocks/about/about-startup-team.tsx","code":"import { AboutStartupTeam } from \"@opensite/ui/blocks/about/about-startup-team\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutStartupTeam\n      title=\"Meet the People Behind the Product\"\n      description={`We're a diverse team of designers, engineers, and strategists united by a shared passion for creating exceptional digital experiences. Our backgrounds span startups, Fortune 500 companies, and everything in between. What brings us together is a belief that great products come from great teams—and great teams are built on trust, respect, and a relentless pursuit of excellence.`}\n      sidebarLinks={[\n        { label: \"Leadership\", value: \"leadership\" },\n        { label: \"Engineering\", value: \"engineering\" },\n        { label: \"Design\", value: \"design\" },\n        { label: \"Operations\", value: \"operations\" },\n      ]}\n      teamTitle=\"Team Member Directory\"\n      teamMembers={[\n        {\n          name: \"Sarah Chen\",\n          role: \"CEO & Co-Founder\",\n          avatar: {\n            src: imagePlaceholders[67],\n            alt: \"Sarah Chen\",\n          },\n          tab: \"leadership\",\n          socialLinks: [\n            {\n              icon: <DynamicIcon name=\"lucide/linkedin\" size={16} />,\n              url: \"https://linkedin.com\",\n              label: \"LinkedIn\",\n            },\n            {\n              icon: <DynamicIcon name=\"lucide/twitter\" size={16} />,\n              url: \"https://twitter.com\",\n              label: \"Twitter\",\n            },\n          ],\n        },\n        {\n          name: \"Marcus Johnson\",\n          role: \"CTO & Co-Founder\",\n          avatar: {\n            src: imagePlaceholders[102],\n            alt: \"Marcus Johnson\",\n          },\n          tab: \"leadership\",\n          socialLinks: [\n            {\n              icon: <DynamicIcon name=\"lucide/linkedin\" size={16} />,\n              url: \"https://linkedin.com\",\n              label: \"LinkedIn\",\n            },\n            {\n              icon: <DynamicIcon name=\"lucide/github\" size={16} />,\n              url: \"https://github.com\",\n              label: \"GitHub\",\n            },\n          ],\n        },\n        {\n          name: \"Emily Rodriguez\",\n          role: \"VP of Design\",\n          avatar: {\n            src: imagePlaceholders[88],\n            alt: \"Emily Rodriguez\",\n          },\n          tab: \"design\",\n          socialLinks: [\n            {\n              icon: <DynamicIcon name=\"lucide/linkedin\" size={16} />,\n              url: \"https://linkedin.com\",\n              label: \"LinkedIn\",\n            },\n            {\n              icon: <DynamicIcon name=\"lucide/dribbble\" size={16} />,\n              url: \"https://dribbble.com\",\n              label: \"Dribbble\",\n            },\n          ],\n        },\n        {\n          name: \"David Kim\",\n          role: \"VP of Engineering\",\n          avatar: {\n            src: imagePlaceholders[81],\n            alt: \"David Kim\",\n          },\n          tab: \"engineering\",\n          socialLinks: [\n            {\n              icon: <DynamicIcon name=\"lucide/linkedin\" size={16} />,\n              url: \"https://linkedin.com\",\n              label: \"LinkedIn\",\n            },\n            {\n              icon: <DynamicIcon name=\"lucide/github\" size={16} />,\n              url: \"https://github.com\",\n              label: \"GitHub\",\n            },\n          ],\n        },\n        {\n          name: \"Lisa Thompson\",\n          role: \"VP of Operations\",\n          avatar: {\n            src: imagePlaceholders[72],\n            alt: \"Lisa Thompson\",\n          },\n          tab: \"operations\",\n          socialLinks: [\n            {\n              icon: <DynamicIcon name=\"lucide/linkedin\" size={16} />,\n              url: \"https://linkedin.com\",\n              label: \"LinkedIn\",\n            },\n          ],\n        },\n        {\n          name: \"James Wilson\",\n          role: \"VP of Sales\",\n          avatar: {\n            src: imagePlaceholders[77],\n            alt: \"James Wilson\",\n          },\n          tab: \"operations\",\n          socialLinks: [\n            {\n              icon: <DynamicIcon name=\"lucide/linkedin\" size={16} />,\n              url: \"https://linkedin.com\",\n              label: \"LinkedIn\",\n            },\n          ],\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"title":{"type":"object","description":"Main title","typeLabel":"React.ReactNode","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"sidebarLinks":{"type":"array","description":"Array of sidebar navigation links","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"value":{"type":"string","description":"Value used for tab matching with TeamMemberItem.tab","required":true},"href":{"type":"string","description":"Optional href for navigation (currently not used in default rendering)","required":false}},"typeLabel":"SidebarLinkItem"},"typeLabel":"SidebarLinkItem[]","required":false},"sidebarSlot":{"type":"object","description":"Custom slot for rendering sidebar (overrides sidebarLinks array)","typeLabel":"React.ReactNode","required":false},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","required":false},"teamTitle":{"type":"object","description":"Team section title","typeLabel":"React.ReactNode","required":false},"teamTitleClassName":{"type":"string","description":"Additional CSS classes for the team title","required":false},"teamMembers":{"type":"array","description":"Array of team members","items":{"type":"object","description":"","fields":{"name":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"role":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"avatar":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"socialLinks":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"url":{"type":"string","description":"","required":true},"label":{"type":"string","description":"","required":true}},"typeLabel":"{ icon?: React.ReactNode; url: string; label: string; }"},"typeLabel":"{ icon?: React.ReactNode; url: string; label: string; }[]","required":false},"tab":{"type":"string","description":"Tab value this team member belongs to (matches SidebarLinkItem.value).\nIf not provided, team member will show in all tabs.","required":false}},"typeLabel":"TeamMemberItem"},"typeLabel":"TeamMemberItem[]","required":false},"teamMembersSlot":{"type":"object","description":"Custom slot for rendering team members (overrides teamMembers array)","typeLabel":"React.ReactNode","required":false},"teamMembersClassName":{"type":"string","description":"Additional CSS classes for the team members container","required":false},"optixFlowConfig":{"type":"object","description":"Optional Optix Flow configuration for image optimization","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":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"defaultActiveTab":{"type":"string","description":"Default active tab value","required":false},"onTabChange":{"type":"object","description":"Callback when tab changes","typeLabel":"(value: string) => void","required":false},"allTabLabel":{"type":"object","description":"Label for the \"All\" tab (defaults to \"All\")","typeLabel":"React.ReactNode","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","startup","team","sidebar","navigation","saas","members","avatars","social"],"performance":{},"importantUsageNotes":"Only populate each of the teamMember 'avatar' object if you have an image/avatar to use for that team member object - DO NOT USE PLACEHOLDERS OR SELECT RANDOM IMAGES. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:43:35.400Z"}