{"success":true,"data":{"block":{"id":"community-initiatives","name":"Community Initiatives","title":"Community Initiatives","category":"About","categorySlug":"about","description":"A comprehensive community impact section with tabbed categories and detailed initiative cards with metrics. Features a tabbed interface with alternating content/image layout for initiatives, metrics display, and responsive dropdown for mobile. Best for community impact pages, corporate responsibility sections, and values showcases.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291144/ff43lflzmsdbkwnmj3orn0nczflz/cleanshot-2026-02-25-at-12-28-36-2x.png","mobile":"https://cdn.ing/assets/i/r/291143/9vibjbl6ynb9j1ou93dubtudj4dd/cleanshot-2026-02-25-at-12-29-05-2x.png"},"componentPath":"blocks/about/community-initiatives.tsx","code":"import { CommunityInitiatives } from \"@opensite/ui/blocks/about/community-initiatives\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CommunityInitiatives\n      badgeText=\"Diversity & Inclusion\"\n      heading=\"Building a More Equitable Future\"\n      description=\"We're committed to creating a workplace and community where everyone belongs, thrives, and can reach their full potential.\"\n      categories={[\n        {\n          id: \"workplace\",\n          title: \"Inclusive Workplace\",\n          description:\n            \"Creating an environment where every voice is heard and every person can be their authentic self.\",\n          initiatives: [\n            {\n              id: \"hiring\",\n              title: \"Equitable Hiring Practices\",\n              description:\n                \"We've redesigned our hiring process from the ground up to reduce bias and increase representation. Blind resume reviews, diverse interview panels, and structured interviews ensure every candidate gets a fair evaluation based on merit.\",\n              icon: \"lucide/users\",\n              metrics: [\n                { value: \"45%\", label: \"Diverse Leadership\" },\n                { value: \"60%\", label: \"Women in Tech\" },\n                { value: \"85%\", label: \"Retention Rate\" },\n              ],\n              image: imagePlaceholders[12],\n            },\n            {\n              id: \"growth\",\n              title: \"Career Development Programs\",\n              description:\n                \"Mentorship programs, leadership training, and sponsorship opportunities help underrepresented employees advance their careers. We track promotion rates and close equity gaps through targeted investment in professional development.\",\n              icon: \"lucide/trending-up\",\n              metrics: [\n                { value: \"$2M\", label: \"Annual Investment\" },\n                { value: \"300+\", label: \"Mentorship Pairs\" },\n                { value: \"92%\", label: \"Satisfaction\" },\n              ],\n              image: imagePlaceholders[16],\n            },\n          ],\n        },\n        {\n          id: \"community\",\n          title: \"Community Impact\",\n          description:\n            \"Extending our commitment beyond our walls to make a difference in the broader community.\",\n          initiatives: [\n            {\n              id: \"education\",\n              title: \"Tech Education Partnerships\",\n              description:\n                \"We partner with schools in underserved communities to provide coding bootcamps, STEM workshops, and mentorship programs. Over 5,000 students have participated in our programs, with many going on to successful tech careers.\",\n              icon: \"lucide/graduation-cap\",\n              metrics: [\n                { value: \"5000+\", label: \"Students Reached\" },\n                { value: \"25\", label: \"School Partners\" },\n                { value: \"78%\", label: \"Career Placement\" },\n              ],\n              image: imagePlaceholders[29],\n            },\n            {\n              id: \"nonprofit\",\n              title: \"Nonprofit Technology Support\",\n              description:\n                \"We provide free or discounted access to our platform for nonprofits working on social justice, education, and environmental causes. Our team volunteers technical expertise to help these organizations maximize their impact.\",\n              icon: \"lucide/heart-handshake\",\n              metrics: [\n                { value: \"500+\", label: \"Nonprofit Partners\" },\n                { value: \"$5M\", label: \"Value Donated\" },\n                { value: \"2000+\", label: \"Volunteer Hours\" },\n              ],\n              image: imagePlaceholders[30],\n            },\n          ],\n        },\n        {\n          id: \"culture\",\n          title: \"Inclusive Culture\",\n          description:\n            \"Fostering a culture where differences are celebrated and everyone feels they belong.\",\n          initiatives: [\n            {\n              id: \"groups\",\n              title: \"Employee Resource Groups\",\n              description:\n                \"Nine active ERGs representing diverse communities—from Women in Tech to LGBTQ+ Alliance to Black Excellence Network—provide support, networking, and advocacy. Each group receives budget and executive sponsorship.\",\n              icon: \"lucide/users-2\",\n              metrics: [\n                { value: \"9\", label: \"Active ERGs\" },\n                { value: \"65%\", label: \"Employee Participation\" },\n                { value: \"40+\", label: \"Events/Year\" },\n              ],\n              image: imagePlaceholders[52],\n            },\n            {\n              id: \"learning\",\n              title: \"Continuous Learning\",\n              description:\n                \"Regular workshops on unconscious bias, inclusive leadership, and cultural competency keep our entire team learning and growing. These aren't checkbox exercises—they're meaningful conversations that drive real change.\",\n              icon: \"lucide/book-open\",\n              metrics: [\n                { value: \"100%\", label: \"Completion Rate\" },\n                { value: \"24\", label: \"Workshops/Year\" },\n                { value: \"4.8/5\", label: \"Impact Rating\" },\n              ],\n            },\n          ],\n        },\n        {\n          id: \"accessibility\",\n          title: \"Accessibility\",\n          description:\n            \"Making our workplace and products accessible to everyone, regardless of ability.\",\n          initiatives: [\n            {\n              id: \"product\",\n              title: \"Accessible Product Design\",\n              description:\n                \"WCAG 2.1 AA compliance is our baseline, not our ceiling. We employ accessibility experts, conduct regular audits, and test with assistive technologies to ensure our product works for everyone.\",\n              icon: \"lucide/accessibility\",\n              metrics: [\n                { value: \"AA\", label: \"WCAG Level\" },\n                { value: \"100%\", label: \"Keyboard Nav\" },\n                { value: \"98%\", label: \"Screen Reader\" },\n              ],\n              image: imagePlaceholders[34],\n            },\n            {\n              id: \"workplace\",\n              title: \"Accessible Workplace\",\n              description:\n                \"From physical office design to assistive technology budgets to flexible work arrangements, we remove barriers so everyone can contribute their best work. Accommodations are handled with dignity and urgency.\",\n              icon: \"lucide/home\",\n              metrics: [\n                { value: \"$500K\", label: \"Accommodation Budget\" },\n                { value: \"48hr\", label: \"Response Time\" },\n                { value: \"100%\", label: \"Office Accessibility\" },\n              ],\n            },\n          ],\n        },\n      ]}\n      ctaBadgeText=\"We're Hiring\"\n      ctaHeading=\"Join Our Diverse Team\"\n      ctaDescription=\"We're always looking for talented people from all backgrounds who share our commitment to building an inclusive future.\"\n      actions={[\n        {\n          label: \"View Open Positions\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Read Our Impact Report\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      background=\"white\"\n      pattern=\"noise\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text","typeLabel":"React.ReactNode","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false},"categories":{"type":"array","description":"Array of DEI categories","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier","required":true},"title":{"type":"string","description":"Category title","required":true},"description":{"type":"string","description":"","required":true},"initiatives":{"type":"array","description":"Array of initiatives in this category","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier","required":true},"title":{"type":"string","description":"Initiative title","required":true},"description":{"type":"string","description":"Initiative description","required":true},"icon":{"type":"string","description":"Icon name in format: prefix/name","required":true},"metrics":{"type":"array","description":"Optional metrics to display","items":{"type":"object","description":"","fields":{"value":{"type":"string","description":"Metric value (e.g., \"45%\", \"$2M\")","required":true},"label":{"type":"string","description":"Metric label","required":true}},"typeLabel":"CommunityMetric"},"typeLabel":"CommunityMetric[]","required":false},"image":{"type":"string","description":"Optional image URL","required":false}},"typeLabel":"CommunityInitiative"},"typeLabel":"CommunityInitiative[]","required":true}},"typeLabel":"CommunityCategory"},"typeLabel":"CommunityCategory[]","required":false},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories array)","typeLabel":"React.ReactNode","required":false},"ctaBadgeText":{"type":"object","description":"CTA badge text","typeLabel":"React.ReactNode","required":false},"ctaHeading":{"type":"object","description":"CTA heading","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA description","typeLabel":"React.ReactNode","required":false},"actions":{"type":"array","description":"Array of action configurations for CTA buttons","items":{"type":"object","description":"","fields":{"variant":{"type":"string","description":"","typeLabel":"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"","required":false},"size":{"type":"string","description":"","typeLabel":"\"default\" | \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\" | \"icon-lg\"","required":false},"label":{"type":"object","description":"Button/link label text or ReactNode","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Icon to display (typically before label)","typeLabel":"ReactNode","required":false},"iconAfter":{"type":"object","description":"Icon to display after the label","typeLabel":"ReactNode","required":false},"href":{"type":"string","description":"URL for link behavior","required":false},"onClick":{"type":"object","description":"Click handler for button behavior","typeLabel":"MouseEventHandler","required":false},"className":{"type":"string","description":"Additional CSS classes for the action","required":false},"children":{"type":"object","description":"Custom children (overrides label + icon rendering)","typeLabel":"ReactNode","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"asButton":{"type":"boolean","description":"Render as a button element instead of an anchor/link","required":false}},"typeLabel":"ActionConfig"},"typeLabel":"ActionConfig[]","required":false},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions 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","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"tabsClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","required":false},"ctaHeadingClassName":{"type":"string","description":"Additional CSS classes for the CTA heading","required":false},"ctaDescriptionClassName":{"type":"string","description":"Additional CSS classes for the CTA description","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions 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":"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","community","impact","initiatives","metrics","tabs","corporate","responsibility"],"performance":{},"importantUsageNotes":"Only use if you generate 3-5 `categories` since any more/fewer will distort the layout. Only supply 'actions' if you supply a 'ctaHeading' prop and optionally a 'ctaDescription' prop - if you don't, the actions will be empty in a card and looks like something is wrong with the UI. If you supply multiple 'actions', ensure to use a variant of 'default' for the first action, and 'outline' for the second action to ensure proper visual distinction between the two CTAs. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:45:03.500Z"}