{"success":true,"data":{"category":{"slug":"about","name":"About","description":"Collection of about components"},"blocks":[{"id":"alternating-blocks","name":"Alternating Content Blocks","title":"Alternating Blocks","category":"About","categorySlug":"about","description":"Display content sections with alternating left/right media placement. Ideal for storytelling, feature showcases, or company history sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289006/ve7asunbik4wjsz2b9sdjf01l2wn/alternating-blocks-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289007/1xi5156id33mlrlq4ckv2e0mnsbk/alternating-blocks-mobile.jpg"},"componentPath":"blocks/about/alternating-blocks.tsx","code":"import { AlternatingBlocks } from \"@opensite/ui/blocks/about/alternating-blocks\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AlternatingBlocks\n      title=\"Our Journey\"\n      subtitle=\"About Us\"\n      background=\"white\"\n      spacing=\"xl\"\n      sections={[\n        {\n          content: (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-2xl font-bold\">The Beginning</h3>\n              <p className=\"text-muted-foreground\">\n                Founded in 2015, we started in a small garage with a simple\n                mission: make business tools accessible to everyone. What began\n                as a weekend project has grown into a platform trusted by\n                thousands of companies worldwide.\n              </p>\n              <p className=\"text-muted-foreground\">\n                Our founders, frustrated by the complexity of existing\n                solutions, believed there had to be a better way. They spent\n                countless nights building the foundation of what would become\n                our flagship product.\n              </p>\n            </div>\n          ),\n          media: (\n            <img\n              src={imagePlaceholders[12]}\n              alt=\"Early team collaboration\"\n              className=\"h-full w-full object-cover\"\n            />\n          ),\n          mediaLeft: false,\n        },\n        {\n          content: (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-2xl font-bold\">The Growth Years</h3>\n              <p className=\"text-muted-foreground\">\n                By 2018, we'd reached our first 10,000 users and raised our\n                Series A. We expanded the team, opened new offices, and doubled\n                down on our commitment to customer success. Each milestone\n                taught us valuable lessons about scale, culture, and impact.\n              </p>\n              <p className=\"text-muted-foreground\">\n                We learned that growth isn't just about numbers—it's about\n                staying true to your values while adapting to change. We\n                invested heavily in our people, our product, and our processes.\n              </p>\n            </div>\n          ),\n          media: (\n            <img\n              src={imagePlaceholders[23]}\n              alt=\"Office expansion\"\n              className=\"h-full w-full object-cover\"\n            />\n          ),\n          mediaLeft: true,\n        },\n        {\n          content: (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-2xl font-bold\">Today and Tomorrow</h3>\n              <p className=\"text-muted-foreground\">\n                Today, we serve over 100,000 businesses across 50+ countries.\n                But we're just getting started. We're investing in AI, expanding\n                our integrations, and building features that will define the\n                future of work.\n              </p>\n              <p className=\"text-muted-foreground\">\n                Our vision remains unchanged: empower every team to do their\n                best work. We measure success not by our revenue, but by the\n                impact we have on our customers' success.\n              </p>\n            </div>\n          ),\n          media: (\n            <img\n              src={imagePlaceholders[45]}\n              alt=\"Modern workplace\"\n              className=\"h-full w-full object-cover\"\n            />\n          ),\n          mediaLeft: false,\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"sections":{"type":"array","description":"Array of sections to display with alternating layout","items":{"type":"object","description":"","fields":{"content":{"type":"object","description":"Content node to display (text, headings, etc.)","typeLabel":"ReactNode","required":true},"media":{"type":"object","description":"Media node to display (image, video, icon, etc.)","typeLabel":"ReactNode","required":true},"mediaLeft":{"type":"boolean","description":"Whether to place media on the left side","required":false}},"typeLabel":"AlternatingBlockSection"},"typeLabel":"AlternatingBlockSection[]","required":true},"className":{"type":"string","description":"Additional CSS classes","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","story","history","timeline","features","benefits","alternating","two-column","content-media"],"performance":{},"importantUsageNotes":"Supply 2-5 'sections' for best visual balance — each section requires both a 'content' node and a 'media' node (typically an image). Alternate the 'mediaLeft' boolean across sections to create the intended alternating layout (e.g. false, true, false). Only use real images for each section's 'media' prop — DO NOT USE PLACEHOLDER IMAGES. Follow the example props closely for this block."},{"id":"about-mission-features","name":"About Mission Features","title":"About Mission Features","category":"About","categorySlug":"about","description":"A mission-focused about section featuring a hero title, description, main image, mission statement with background image, and a grid of feature cards with icons. Ideal for company about pages that want to highlight their mission and core values.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291534/tsmsqzvjndaa64bh3h1f0unc9eiu/cleanshot-2026-02-25-at-19-06-07-2x.png","mobile":"https://cdn.ing/assets/i/r/291533/kqb8f5pjitk3ue35acnhvkrbjkx0/cleanshot-2026-02-25-at-19-06-34-2x.png"},"componentPath":"blocks/about/about-mission-features.tsx","code":"import { AboutMissionFeatures } from \"@opensite/ui/blocks/about/about-mission-features\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutMissionFeatures\n      title=\"Transforming Ideas Into Impact\"\n      description=\"We partner with forward-thinking organizations to build digital experiences that drive growth and create lasting value.\"\n      missionLabel=\"Our Mission\"\n      missionText=\"To empower businesses with technology that simplifies complexity, amplifies creativity, and accelerates success in an ever-evolving digital landscape.\"\n      mainImage={{\n        src: imagePlaceholders[12],\n        alt: \"Team working together\",\n      }}\n      missionBackgroundImage={{\n        src: imagePlaceholders[85],\n        alt: \"Abstract background\",\n      }}\n      featuresTitle=\"What Sets Us Apart\"\n      featuresDescription=\"Our unique approach combines deep expertise with genuine partnership to deliver exceptional results.\"\n      features={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/target\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Strategic Focus\",\n          description:\n            \"Every project begins with understanding your goals. We align our work with your business objectives to ensure measurable impact.\",\n          href: \"#\",\n        },\n        {\n          icon: (\n            <DynamicIcon name=\"lucide/zap\" size={24} className=\"text-primary\" />\n          ),\n          title: \"Rapid Execution\",\n          description:\n            \"Our agile methodology enables quick iterations and fast time-to-market without compromising on quality.\",\n          href: \"#\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/heart\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Human-Centered\",\n          description:\n            \"We design for people first. Every decision is informed by user research and validated through testing.\",\n          href: \"#\",\n        },\n      ]}\n      pattern=\"p6\"\n      patternOpacity={1}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false},"missionLabel":{"type":"object","description":"Mission section label","typeLabel":"React.ReactNode","required":false},"missionText":{"type":"object","description":"Mission section text","typeLabel":"React.ReactNode","required":false},"mainImage":{"type":"object","description":"Main image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"missionBackgroundImage":{"type":"object","description":"Mission background image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"featuresTitle":{"type":"object","description":"Features section title","typeLabel":"React.ReactNode","required":false},"featuresDescription":{"type":"object","description":"Features section description","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature configurations","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"missionLabelClassName":{"type":"string","description":"Additional CSS classes for the mission label","required":false},"missionTextClassName":{"type":"string","description":"Additional CSS classes for the mission text","required":false},"mainImageClassName":{"type":"string","description":"Additional CSS classes for the main image","required":false},"missionSectionClassName":{"type":"string","description":"Additional CSS classes for the mission section","required":false},"featuresTitleClassName":{"type":"string","description":"Additional CSS classes for the features title","required":false},"featuresDescriptionClassName":{"type":"string","description":"Additional CSS classes for the features description","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","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":"Optional background pattern","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","mission","features","values","company","icons","cards","hero","image-grid"],"performance":{},"importantUsageNotes":"Ensure to generate either 3 or 6 `features` since the features grid is a 3 column layout."},{"id":"about-stats-showcase","name":"About Stats Showcase","title":"About Stats Showcase","category":"About","categorySlug":"about","description":"A comprehensive about section featuring a hero with image grid, statistics display, trusted company logos, and benefit cards with testimonials. Perfect for showcasing company achievements, social proof, and key metrics in a visually engaging layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290850/aut1gp6v4g16yvszz8kf88ce0hym/cleanshot-2026-02-25-at-08-16-31.png","mobile":"https://cdn.ing/assets/i/r/290851/e9zsypyn21mlakr7nrtrwfkk64ax/cleanshot-2026-02-25-at-08-16-20.png"},"componentPath":"blocks/about/about-stats-showcase.tsx","code":"import { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\nimport { AboutStatsShowcase } from \"@opensite/ui/blocks/about/about-stats-showcase\";\n\nexport default function Demo() {\n  return (\n    <AboutStatsShowcase\n      title=\"Driving Results That Matter\"\n      description=\"We measure our success by the impact we create for our clients. Here's what the numbers say about our work.\"\n      images={[\n        {\n          src: imagePlaceholders[23],\n          alt: \"Team collaboration\",\n        },\n        {\n          src: imagePlaceholders[33],\n          alt: \"Modern office\",\n        },\n      ]}\n      statsTitle=\"Numbers That Speak for Themselves\"\n      stats={[\n        { value: \"500+\", label: \"Projects Delivered\" },\n        { value: \"98%\", label: \"Client Satisfaction\" },\n        { value: \"50M+\", label: \"Users Impacted\" },\n        { value: \"15+\", label: \"Years of Experience\" },\n        { value: \"200+\", label: \"Team Members\" },\n        { value: \"30+\", label: \"Countries Served\" },\n      ]}\n      logosTitle=\"Trusted by Leading Organizations\"\n      logos={[\n        {\n          src: brandLogoPlaceholders.white[0],\n          alt: \"Partner logo\",\n          name: \"Acme\",\n        },\n        {\n          src: brandLogoPlaceholders.white[2],\n          alt: \"Partner logo\",\n          name: \"Initech\",\n        },\n        {\n          src: brandLogoPlaceholders.white[3],\n          alt: \"Partner logo\",\n          name: \"Umbrella\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n      benefitsTitle=\"The Impact We Create\"\n      benefits={[\n        {\n          image: {\n            src: imagePlaceholders[44],\n            alt: \"Growth analytics\",\n          },\n        },\n        {\n          stat: {\n            value: \"312%\",\n            label: \"Average ROI\",\n            description:\n              \"Our clients see significant returns on their technology investments within the first year.\",\n          },\n        },\n        {\n          testimonial: {\n            company: \"TechCorp\",\n            quote:\n              \"Working with this team transformed our digital presence. The results exceeded our expectations.\",\n            author: \"Jennifer Lee\",\n            role: \"Chief Digital Officer\",\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},"images":{"type":"array","description":"Array of images","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"ShowcaseImageItem"},"typeLabel":"ShowcaseImageItem[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"statsTitle":{"type":"object","description":"Stats section title","typeLabel":"React.ReactNode","required":false},"statsTitleClassName":{"type":"string","description":"Additional CSS classes for the stats title","required":false},"stats":{"type":"array","description":"Array of stats","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"ShowcaseStatItem"},"typeLabel":"ShowcaseStatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"logosTitle":{"type":"object","description":"Logos section title","typeLabel":"React.ReactNode","required":false},"logosTitleClassName":{"type":"string","description":"Additional CSS classes for the logos title","required":false},"logos":{"type":"array","description":"Array of logos","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true},"name":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"ShowcaseLogoItem"},"typeLabel":"ShowcaseLogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for rendering logos (overrides logos array)","typeLabel":"React.ReactNode","required":false},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos container","required":false},"benefitsTitle":{"type":"object","description":"Benefits section title","typeLabel":"React.ReactNode","required":false},"benefitsTitleClassName":{"type":"string","description":"Additional CSS classes for the benefits title","required":false},"benefits":{"type":"array","description":"Array of benefits","items":{"type":"object","description":"","fields":{"image":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"stat":{"type":"object","description":"","fields":{"value":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"{ value?: React.ReactNode; label?: React.ReactNode; description?: React.ReactNode; }","required":false},"testimonial":{"type":"object","description":"","fields":{"logo":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"company":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"quote":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"author":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"role":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"{ logo?: { src: string; alt: string; }; company?: React.ReactNode; quote?: React.ReactNode; author?: React.ReactNode; role?: React.ReactNode; }","required":false}},"typeLabel":"ShowcaseBenefitItem"},"typeLabel":"ShowcaseBenefitItem[]","required":false},"benefitsSlot":{"type":"object","description":"Custom slot for rendering benefits (overrides benefits array)","typeLabel":"React.ReactNode","required":false},"benefitsClassName":{"type":"string","description":"Additional CSS classes for the benefits 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","stats","statistics","metrics","logos","testimonials","benefits","social-proof","achievements"],"performance":{},"importantUsageNotes":"Ensure to only generate 3 or 6 `stats` since the stats showcase is a 3 column layout. Follow the example props closely for this block."},{"id":"about-company-profile","name":"About Company Profile","title":"About Company Profile","category":"About","categorySlug":"about","description":"A company profile section with main image, breakout card with CTA, secondary image, trusted company logos, and an achievements section with key metrics. Ideal for corporate about pages that need to establish credibility and showcase accomplishments.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290807/d7wig6mo10uyjtjrie0a6tvujxxc/cleanshot-2026-02-25-at-01-42-47.png","mobile":"https://cdn.ing/assets/i/r/290806/22ovy90vki8u7hh3job0kosah676/cleanshot-2026-02-25-at-01-42-31.png"},"componentPath":"blocks/about/about-company-profile.tsx","code":"import { AboutCompanyProfile } from \"@opensite/ui/blocks/about/about-company-profile\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutCompanyProfile\n      title=\"Building the Future of Digital Experiences\"\n      description=\"We combine cutting-edge technology with human-centered design to create solutions that transform how businesses connect with their audiences. Our team of experts brings decades of combined experience across multiple industries.\"\n      mainImage={{\n        src: imagePlaceholders[12],\n        alt: \"Team collaboration in modern office\",\n      }}\n      secondaryImage={{\n        src: imagePlaceholders[45],\n        alt: \"Creative workspace\",\n      }}\n      breakout={{\n        title: \"15+ Years of Excellence\",\n        description: \"Delivering innovative solutions since 2009\",\n        action: {\n          label: \"Learn More\",\n          href: \"#\",\n        },\n      }}\n      achievementsTitle=\"Our Impact\"\n      achievementsDescription=\"Measurable results that speak to our commitment to excellence\"\n      achievements={[\n        {\n          value: \"500+\",\n          label: \"Projects Delivered\",\n        },\n        {\n          value: \"98%\",\n          label: \"Client Satisfaction\",\n        },\n        {\n          value: \"50M+\",\n          label: \"Users Reached\",\n        },\n        {\n          value: \"320+\",\n          label: \"Projects Launched\",\n        },\n      ]}\n      pattern=\"grid1\"\n      patternOpacity={1}\n      background=\"white\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false},"mainImage":{"type":"object","description":"Main image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"secondaryImage":{"type":"object","description":"Secondary image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"breakout":{"type":"object","description":"Breakout section configuration","fields":{"logo":{"type":"object","description":"Logo image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"title":{"type":"object","description":"Breakout title","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"Breakout description","typeLabel":"React.ReactNode","required":true},"action":{"type":"object","description":"Action configuration for the breakout button","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","required":false}},"typeLabel":"BreakoutConfig","required":false},"breakoutSlot":{"type":"object","description":"Custom slot for rendering breakout section (overrides breakout object)","typeLabel":"React.ReactNode","required":false},"companiesTitle":{"type":"object","description":"Companies section title","typeLabel":"React.ReactNode","required":false},"companies":{"type":"array","description":"Array of company logo configurations","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"companiesSlot":{"type":"object","description":"Custom slot for rendering companies (overrides companies array)","typeLabel":"React.ReactNode","required":false},"achievementsTitle":{"type":"object","description":"Achievements section title","typeLabel":"React.ReactNode","required":false},"achievementsDescription":{"type":"object","description":"Achievements section description","typeLabel":"React.ReactNode","required":false},"achievements":{"type":"array","description":"Array of achievement/stat configurations","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"achievementsSlot":{"type":"object","description":"Custom slot for rendering achievements (overrides achievements 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},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"mainImageClassName":{"type":"string","description":"Additional CSS classes for the main image","required":false},"secondaryImageClassName":{"type":"string","description":"Additional CSS classes for the secondary image","required":false},"breakoutClassName":{"type":"string","description":"Additional CSS classes for the breakout section","required":false},"companiesClassName":{"type":"string","description":"Additional CSS classes for the companies section","required":false},"achievementsClassName":{"type":"string","description":"Additional CSS classes for the achievements section","required":false},"achievementsTitleClassName":{"type":"string","description":"Additional CSS classes for the achievements title","required":false},"achievementsDescriptionClassName":{"type":"string","description":"Additional CSS classes for the achievements description","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","company","profile","achievements","metrics","logos","corporate","cta","credibility"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 4 `achievements` since the achievements showcase is a 4 column layout, only use numerical style strings for each achievement 'value' prop, e.g. '1000' or '10K', avoid using longer strings like 'Over 1000 developers' since that will distort the layout.. Follow the example props closely for this block."},{"id":"about-vision-gallery","name":"About Vision Gallery","title":"About Vision Gallery","category":"About","categorySlug":"about","description":"A vision-focused about section with hero title, image gallery grid, two-column vision/creators content, and a team CTA banner. Perfect for companies wanting to share their story, vision, and invite visitors to join their team.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290859/vv0qt9yjhhe2i73iu2gemwc835kq/cleanshot-2026-02-25-at-10-25-48-2x.png","mobile":"https://cdn.ing/assets/i/r/290858/ngfxkv8xggw9vdavqe7739sc6uv1/cleanshot-2026-02-25-at-10-26-09-2x.png"},"componentPath":"blocks/about/about-vision-gallery.tsx","code":"import { AboutVisionGallery } from \"@opensite/ui/blocks/about/about-vision-gallery\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutVisionGallery\n      title=\"Shaping the Future of Digital\"\n      subtitle=\"We combine creativity, technology, and strategy to build experiences that inspire and endure.\"\n      images={[\n        {\n          src: imagePlaceholders[12],\n          alt: \"Team collaboration\",\n        },\n        {\n          src: imagePlaceholders[45],\n          alt: \"Modern workspace\",\n        },\n        {\n          src: imagePlaceholders[27],\n          alt: \"Creative session\",\n        },\n      ]}\n      primarySectionTitle=\"Our Mission\"\n      primarySectionContent={`We exist to democratize access to world-class digital experiences. Every business, regardless of size, deserves technology that empowers growth and creates meaningful connections with their audience. Our approach combines deep technical expertise with genuine partnership. We don't just build products—we build relationships that last.`}\n      secondarySectionTitle=\"Our Story\"\n      secondarySectionContent=\"we've been on a mission to transform how businesses connect with their customers. What started as a small consultancy has grown into a global team of innovators, united by a shared belief in the power of great design and technology.\"\n      ctaTitle={`Ready to build something\\namazing together?`}\n      ctaAction={{\n        label: \"Start a Conversation\",\n        href: \"#\",\n        variant: \"default\",\n        size: \"lg\",\n      }}\n      pattern=\"crossPattern\"\n      patternOpacity={0.15}\n      background=\"gray\"\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},"subtitle":{"type":"object","description":"Subtitle text","typeLabel":"React.ReactNode","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"images":{"type":"array","description":"Array of gallery images","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"GalleryImageItem"},"typeLabel":"GalleryImageItem[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"primarySectionTitle":{"type":"object","description":"Primary content section title","typeLabel":"React.ReactNode","required":false},"primarySectionTitleClassName":{"type":"string","description":"Additional CSS classes for the primary section title","required":false},"primarySectionContent":{"type":"object","description":"Primary content section body","typeLabel":"React.ReactNode","required":false},"primarySectionContentClassName":{"type":"string","description":"Additional CSS classes for the primary section content","required":false},"secondarySectionTitle":{"type":"object","description":"Secondary content section title","typeLabel":"React.ReactNode","required":false},"secondarySectionTitleClassName":{"type":"string","description":"Additional CSS classes for the secondary section title","required":false},"secondarySectionContent":{"type":"object","description":"Secondary content section body","typeLabel":"React.ReactNode","required":false},"secondarySectionContentClassName":{"type":"string","description":"Additional CSS classes for the secondary section content","required":false},"ctaTitle":{"type":"object","description":"Call-to-action section title","typeLabel":"React.ReactNode","required":false},"ctaTitleClassName":{"type":"string","description":"Additional CSS classes for the CTA title","required":false},"ctaAction":{"type":"object","description":"CTA action configuration","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","required":false},"ctaSlot":{"type":"object","description":"Custom slot for rendering CTA (overrides ctaAction)","typeLabel":"React.ReactNode","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA section","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","vision","gallery","images","story","team","cta","creators","two-column"],"performance":{},"importantUsageNotes":"Follow the example props closely for this block, especially using exactly 3 images."},{"id":"about-developer-story","name":"About Developer Story","title":"About Developer Story","category":"About","categorySlug":"about","description":"A developer-focused about section with hero title, dual CTAs, logo showcase, statistics bar, and a story section with image. Ideal for developer tools, SaaS platforms, and tech companies targeting technical audiences.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290839/in5f3qpizkcnkpxwbpiic1vw8gqg/cleanshot-2026-02-25-at-04-59-13.png","mobile":"https://cdn.ing/assets/i/r/290838/zj14vxefyand4fs2ksymtk70oxhz/cleanshot-2026-02-25-at-04-58-56.png"},"componentPath":"blocks/about/about-developer-story.tsx","code":"import { imagePlaceholders, brandLogoPlaceholders } from \"@/lib/media\";\nimport { AboutDeveloperStory } from \"@opensite/ui/blocks/about/about-developer-story\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutDeveloperStory\n      title=\"From Curiosity to Craft\"\n      description=\"My journey into software development began with a simple question: 'How does this work?' That curiosity has driven me through 15 years of building, breaking, and rebuilding digital experiences that matter.\"\n      storyTitle=\"The Path Forward\"\n      storyContent=\"What started as tinkering with HTML in my teenage years evolved into a deep passion for creating meaningful technology. I've had the privilege of working with startups and Fortune 500 companies alike, learning that the best solutions come from understanding people first and technology second.\"\n      storyImage={{\n        src: imagePlaceholders[12],\n        alt: \"Developer workspace\",\n      }}\n      actions={[\n        {\n          label: \"Read My Blog\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"View Portfolio\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      logos={[\n        {\n          src: brandLogoPlaceholders.black[0],\n          alt: \"Company logo\",\n        },\n        {\n          src: brandLogoPlaceholders.black[1],\n          alt: \"Company logo\",\n        },\n        {\n          src: brandLogoPlaceholders.black[2],\n          alt: \"Company logo\",\n        },\n      ]}\n      stats={[\n        { value: \"200+\", label: \"Projects Shipped\" },\n        { value: \"15\", label: \"Years Experience\" },\n        { value: \"30+\", label: \"Technologies Mastered\" },\n      ]}\n      pattern=\"p6\"\n      patternOpacity={1}\n      background=\"gray\"\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},"actions":{"type":"array","description":"Array of action configurations","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"logos":{"type":"array","description":"Array of logo items","items":{"type":"object","description":"","fields":{"src":{"type":"object","description":"Image source URL or light/dark mode variants","typeLabel":"string | { light: string; dark?: string }","required":true},"alt":{"type":"string","description":"Alt text for accessibility","required":true},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes for the logo wrapper","required":false},"imgClassName":{"type":"string","description":"Additional CSS classes for the img element","required":false}},"typeLabel":"LogoItem"},"typeLabel":"LogoItem[]","required":false},"logosSlot":{"type":"object","description":"Custom slot for rendering logos (overrides logos array)","typeLabel":"React.ReactNode","required":false},"logosClassName":{"type":"string","description":"Additional CSS classes for the logos container","required":false},"stats":{"type":"array","description":"Array of stat items","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false}},"typeLabel":"StatItem"},"typeLabel":"StatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"storyTitle":{"type":"object","description":"Story section title","typeLabel":"React.ReactNode","required":false},"storyTitleClassName":{"type":"string","description":"Additional CSS classes for the story title","required":false},"storyContent":{"type":"object","description":"Story section content","typeLabel":"React.ReactNode","required":false},"storyContentClassName":{"type":"string","description":"Additional CSS classes for the story content","required":false},"storyImage":{"type":"object","description":"Story image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"storyImageClassName":{"type":"string","description":"Additional CSS classes for the story image","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","developer","story","tech","saas","logos","stats","cta","technical"],"performance":{},"importantUsageNotes":"Ensure to generate exactly 3 `stats` since the stats showcase is a 3 column layout. Follow the example props closely for this block. Only populate the 'logos' prop if you have actual logos to display, otherwise the layout will be distorted by empty logo placeholders. 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."},{"id":"about-story-gallery","name":"About Story Gallery","title":"About Story Gallery","category":"About","categorySlug":"about","description":"A minimal story section with centered title, descriptive content, and a multi-image gallery grid. Perfect for companies wanting to share their journey with visual storytelling in a clean, focused layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290855/1ravpoxozygb541j1m3da43huncy/cleanshot-2026-02-25-at-09-28-24.png","mobile":"https://cdn.ing/assets/i/r/290854/p01r5m82vvc91ef2ar8q0ppt1csh/cleanshot-2026-02-25-at-09-29-02.png"},"componentPath":"blocks/about/about-story-gallery.tsx","code":"import { AboutStoryGallery } from \"@opensite/ui/blocks/about/about-story-gallery\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutStoryGallery\n      title=\"Our Journey in Pictures\"\n      description={`From our humble beginnings to where we are today, every milestone tells a story of growth, learning, and unwavering commitment to excellence.`}\n      images={[\n        {\n          src: imagePlaceholders[12],\n          alt: \"Team collaboration session\",\n        },\n        {\n          src: imagePlaceholders[27],\n          alt: \"Office celebration\",\n        },\n        {\n          src: imagePlaceholders[45],\n          alt: \"Modern workspace\",\n        },\n        {\n          src: imagePlaceholders[16],\n          alt: \"Team workshop\",\n        },\n        {\n          src: imagePlaceholders[63],\n          alt: \"Conference presentation\",\n        },\n        {\n          src: imagePlaceholders[94],\n          alt: \"Team building event\",\n        },\n      ]}\n      pattern=\"squareAltGrid\"\n      patternOpacity={1}\n      background=\"white\"\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},"images":{"type":"array","description":"Array of gallery images","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"GalleryImageItem"},"typeLabel":"GalleryImageItem[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images 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","story","gallery","images","minimal","journey","narrative","visual"],"performance":{},"importantUsageNotes":"Ensure to use 3, 6, 9, etc `images` since the images showcase is a 3 column layout."},{"id":"about-streamline-team","name":"About Streamline Team","title":"About Streamline Team","category":"About","categorySlug":"about","description":"A streamlined about section with overlapping image layout, feature list with icons, and a team CTA banner. Ideal for showcasing workflow benefits and inviting visitors to join the team in a modern, visually appealing design.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291460/lzqlqt9eyr0htgx65ozqdb1t494i/cleanshot-2026-02-25-at-12-57-57-2x.png","mobile":"https://cdn.ing/assets/i/r/291459/okq409qdlp1eytyyce1qh6mujafo/cleanshot-2026-02-25-at-12-58-18-2x.png"},"componentPath":"blocks/about/about-streamline-team.tsx","code":"import { AboutStreamlineTeam } from \"@opensite/ui/blocks/about/about-streamline-team\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutStreamlineTeam\n      title=\"Streamlined for Success\"\n      description=\"We've built our processes and team structure to deliver maximum value with minimum friction. Every role, every workflow, every tool is optimized for efficiency and impact.\"\n      primaryImage={{\n        src: imagePlaceholders[12],\n        alt: \"Team collaboration\",\n      }}\n      secondaryImage={{\n        src: imagePlaceholders[27],\n        alt: \"Team meeting\",\n      }}\n      features={[\n        {\n          icon: (\n            <DynamicIcon name=\"lucide/zap\" size={20} className=\"text-primary\" />\n          ),\n          title: \"Agile Methodology\",\n          description:\n            \"Rapid iterations and continuous delivery keep projects moving forward.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/users\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Cross-Functional Teams\",\n          description:\n            \"Designers, developers, and strategists work together from day one.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/message-circle\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Transparent Communication\",\n          description:\n            \"Regular updates and open channels keep everyone aligned.\",\n        },\n      ]}\n      teamTitle=\"Join Our Growing Team\"\n      teamDescription=\"We're always looking for talented individuals who share our passion for creating exceptional digital experiences.\"\n      actions={[\n        {\n          label: \"View Open Positions\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      pattern=\"circles\"\n      patternOpacity={1}\n      background=\"white\"\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},"primaryImage":{"type":"object","description":"Primary image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"primaryImageClassName":{"type":"string","description":"Additional CSS classes for the primary image","required":false},"secondaryImage":{"type":"object","description":"Secondary image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"secondaryImageClassName":{"type":"string","description":"Additional CSS classes for the secondary image","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},"teamDescription":{"type":"object","description":"Team section description","typeLabel":"React.ReactNode","required":false},"teamDescriptionClassName":{"type":"string","description":"Additional CSS classes for the team description","required":false},"actions":{"type":"array","description":"Array of action configurations for team CTA","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"features":{"type":"array","description":"Array of feature items","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features array)","typeLabel":"React.ReactNode","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","required":false},"teamSectionClassName":{"type":"string","description":"Additional CSS classes for the team section","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","streamline","team","features","workflow","icons","cta","modern","overlapping"],"performance":{},"importantUsageNotes":"Only use 1 `action` prop and don't exceed 4 `features` or it will distort the layout"},{"id":"about-developer-profile","name":"About Developer Profile","title":"About Developer Profile","category":"About","categorySlug":"about","description":"A developer portfolio-style profile section with avatar, name, role, social links, bio, skills tags, and contact CTA. Perfect for personal portfolios, team member spotlights, or founder profiles on company about pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291538/plz2b91kiirxntgym10ig27uf830/cleanshot-2026-02-25-at-23-08-50-2x.png","mobile":"https://cdn.ing/assets/i/r/291537/xv22zlwik0hqs50p6nbu3rpbaf73/cleanshot-2026-02-25-at-23-09-20-2x.png"},"componentPath":"blocks/about/about-developer-profile.tsx","code":"import { AboutDeveloperProfile } from \"@opensite/ui/blocks/about/about-developer-profile\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutDeveloperProfile\n      avatar={{\n        src: imagePlaceholders[81],\n        alt: \"Alex Thompson\",\n      }}\n      name=\"Alex Thompson\"\n      role=\"Senior Full-Stack Developer\"\n      bio=\"Passionate about building scalable web applications and mentoring the next generation of developers. With over 10 years of experience in software development, I specialize in creating elegant solutions to complex problems.\"\n      skillsTitle=\"Technical Skills\"\n      skills={[\"React\", \"TypeScript\", \"Node.js\", \"PostgreSQL\", \"AWS\"]}\n      socialLinks={[\n        {\n          href: \"https://instagram.com\",\n        },\n        {\n          href: \"https://twitter.com\",\n        },\n        {\n          href: \"https://linkedin.com\",\n        },\n        {\n          href: \"https://youtube.com\",\n        },\n      ]}\n      actions={[\n        {\n          label: \"Contact Me\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n          icon: <DynamicIcon name=\"lucide/send\" size={16} />,\n        },\n        {\n          label: \"Download Resume\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n          icon: <DynamicIcon name=\"lucide/download\" size={16} />,\n        },\n      ]}\n      patternOpacity={0.33}\n      pattern=\"diagonalCrossFadeCenter\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"name":{"type":"object","description":"Developer name","typeLabel":"React.ReactNode","required":false},"role":{"type":"object","description":"Developer role/title","typeLabel":"React.ReactNode","required":false},"bio":{"type":"object","description":"Developer bio/description","typeLabel":"React.ReactNode","required":false},"avatar":{"type":"object","description":"Avatar image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"skills":{"type":"array","description":"Array of skill tags","items":{"type":"string","description":""},"required":false},"skillsSlot":{"type":"object","description":"Custom slot for rendering skills (overrides skills array)","typeLabel":"React.ReactNode","required":false},"skillsTitle":{"type":"object","description":"Skills section title","typeLabel":"React.ReactNode","required":false},"socialLinks":{"type":"array","description":"Array of social link configurations","items":{"type":"object","description":"","fields":{"platformName":{"type":"object","description":"Social platform name - determines which icon to display.\nIf not provided, the platform is auto-detected from the href URL.","typeLabel":"SocialPlatformName","required":false},"platform":{"type":"object","description":"","typeLabel":"SocialPlatformName","required":false},"href":{"type":"string","description":"Link URL (required). Platform is auto-detected from this URL if platformName is not set.","required":true},"label":{"type":"string","description":"Display label for the link (used for aria-label if not specified)","required":false},"icon":{"type":"object","description":"Platform icon (ReactNode) - overrides automatic icon selection","typeLabel":"ReactNode","required":false},"iconNameOverride":{"type":"string","description":"Icon name override for DynamicIcon (e.g., \"lucide/twitter\")","required":false},"iconSize":{"type":"number","description":"Icon size in pixels","required":false},"iconColor":{"type":"string","description":"Icon color - accepts any valid CSS color","required":false},"iconClassName":{"type":"string","description":"Additional CSS classes for the icon","required":false},"aria-label":{"type":"string","description":"ARIA label for accessibility","required":false},"className":{"type":"string","description":"Additional CSS classes for the link wrapper","required":false}},"typeLabel":"SocialLinkItem"},"typeLabel":"SocialLinkItem[]","required":false},"socialLinksSlot":{"type":"object","description":"Custom slot for rendering social links (overrides socialLinks array)","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"nameClassName":{"type":"string","description":"Additional CSS classes for the name heading","required":false},"roleClassName":{"type":"string","description":"Additional CSS classes for the role text","required":false},"bioClassName":{"type":"string","description":"Additional CSS classes for the bio text","required":false},"avatarClassName":{"type":"string","description":"Additional CSS classes for the avatar image","required":false},"skillsClassName":{"type":"string","description":"Additional CSS classes for the skills container","required":false},"skillTagClassName":{"type":"string","description":"Additional CSS classes for individual skill tags","required":false},"socialLinksClassName":{"type":"string","description":"Additional CSS classes for the social links container","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","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","developer","profile","portfolio","skills","social","bio","personal","founder"],"performance":{},"importantUsageNotes":"Only populate the 'avatar.src' prop if you have a real photo/avatar for the person — DO NOT USE PLACEHOLDER IMAGES. Only populate 'socialLinks' with real social profile URLs for the person; skip any platform you don't have a verified URL for. Only populate 'skills' with real, known skills for the person. 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."},{"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."},{"id":"about-minimal-story","name":"About Minimal Story","title":"About Minimal Story","category":"About","categorySlug":"about","description":"A minimal, author-focused story section with avatar, author info, title, narrative content, and optional featured image. Perfect for founder stories, company origin narratives, or personal brand about pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/288985/uohf2h5x28ks7oz7urmuiot4tow8/founder-letter-about-page-with-office-analytics-dashboard.jpg","mobile":"https://cdn.ing/assets/i/r/288986/v8t5jg43j1p6lwqbgakts6m96go6/founder-letter-about-page-mobile-clean-ui.jpg"},"componentPath":"blocks/about/about-minimal-story.tsx","code":"import { AboutMinimalStory } from \"@opensite/ui/blocks/about/about-minimal-story\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutMinimalStory\n      author={{\n        name: \"Jessica Martinez\",\n        role: \"Founder & CEO\",\n      }}\n      title=\"A Letter From Our Founder\"\n      content={`When I started this company in 2015, I had a simple belief: technology should empower people, not overwhelm them.\n\nAfter spending a decade in enterprise software, I saw firsthand how complex tools often created more problems than they solved. Teams struggled with bloated systems, users abandoned products out of frustration, and businesses lost sight of what mattered most—their customers.\n\nSo I set out to build something different. A company that puts simplicity at the center of everything we create. Where every feature earns its place by making someone's life easier, not just checking a box on a requirements document.\n\nToday, we serve thousands of businesses worldwide, but our mission remains unchanged. We're still that scrappy team asking \"does this actually help?\" before shipping anything.\n\nThank you for being part of our journey.`}\n      featuredImage={{\n        src: imagePlaceholders[12],\n        alt: \"Team collaboration\",\n      }}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Story content/body text","typeLabel":"React.ReactNode","required":false},"author":{"type":"object","description":"Author information","fields":{"name":{"type":"string","description":"","required":true},"role":{"type":"string","description":"","required":true},"avatar":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false}},"typeLabel":"{ name: string; role: string; avatar?: { src: string; alt: string; }; }","required":false},"authorSlot":{"type":"object","description":"Custom slot for rendering author (overrides author object)","typeLabel":"React.ReactNode","required":false},"featuredImage":{"type":"object","description":"Featured image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"bodyClassName":{"type":"string","description":"Additional CSS classes for the body content","required":false},"authorClassName":{"type":"string","description":"Additional CSS classes for the author section","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the featured 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","minimal","story","author","founder","narrative","personal","origin"],"performance":{},"importantUsageNotes":"Only include an avatar for the author if you have an actual photo/avatar for the author"},{"id":"about-story-hero","name":"About Story Hero","title":"About Story Hero","category":"About","categorySlug":"about","description":"A story section with hero image, subtitle, title, narrative content, and team info card. Ideal for company story pages that want to combine visual impact with detailed narrative and team highlights.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289001/jacnqg4889w53zpi3fuus6r8auyw/about-story-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289010/t2cumkis3cfumuseghi18kio32g2/about-story-hero-mobile.jpg"},"componentPath":"blocks/about/about-story-hero.tsx","code":"import { AboutStoryHero } from \"@opensite/ui/blocks/about/about-story-hero\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutStoryHero\n      subtitle=\"About Us\"\n      title=\"We Build Digital Experiences That Matter\"\n      content={`Founded in 2010, we've grown from a small team with big dreams into a global force for digital innovation. Our mission has always been simple: create technology that empowers people and transforms businesses.\n\nWe believe that great products come from understanding people first. That's why we invest deeply in research, collaborate closely with our clients, and never stop iterating until we get it right.`}\n      heroImage={{\n        src: imagePlaceholders[12],\n        alt: \"Team working together\",\n      }}\n      teamInfo={{\n        title: \"200+ Team Members\",\n        description:\n          \"Designers, engineers, and strategists working together across 12 global offices.\",\n      }}\n      background=\"gray\"\n      pattern=\"gridBasic\"\n      patternOpacity={0.9}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":false},"subtitle":{"type":"object","description":"Subtitle/tagline text","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Main content/body text","typeLabel":"React.ReactNode","required":false},"heroImage":{"type":"object","description":"Hero image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"teamInfo":{"type":"object","description":"Team information section","fields":{"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"{ title: React.ReactNode; description: React.ReactNode; }","required":false},"teamInfoSlot":{"type":"object","description":"Custom slot for rendering team info (overrides teamInfo object)","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content 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},"bodyClassName":{"type":"string","description":"Additional CSS classes for the body content","required":false},"teamInfoClassName":{"type":"string","description":"Additional CSS classes for the team info section","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the hero 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","story","hero","image","narrative","team","visual","impact"],"performance":{},"importantUsageNotes":"Only populate 'heroImage.src' if you have a real image to use — DO NOT USE PLACEHOLDER IMAGES. Only populate the 'teamInfo' object if you have real team/organization data to display; do not invent team sizes or office counts. Keep the 'content' prop to 2-3 paragraphs of narrative text since excessive content will distort the two-column layout. Follow the example props closely for this block."},{"id":"about-stats-sidebar","name":"About Stats Sidebar","title":"About Stats Sidebar","category":"About","categorySlug":"about","description":"A stats-focused about section with sticky sidebar title/description, stats grid with icons, and feature list. Perfect for showcasing company metrics and key differentiators in a scannable, organized layout.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291536/64j57yikw5ax35wci5ipb9pxung4/cleanshot-2026-02-25-at-22-02-37-2x.png","mobile":"https://cdn.ing/assets/i/r/291535/4z2pacrvobzg28ywxxgp9sjo402q/cleanshot-2026-02-25-at-22-03-07-2x.png"},"componentPath":"blocks/about/about-stats-sidebar.tsx","code":"import { AboutStatsSidebar } from \"@opensite/ui/blocks/about/about-stats-sidebar\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutStatsSidebar\n      title=\"Our Impact in Numbers\"\n      description=\"We let our results speak for themselves. Here's a snapshot of what we've achieved together with our clients.\"\n      stats={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/briefcase\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"500+\",\n          label: \"Projects Completed\",\n          description: \"Across diverse industries and scales\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/users\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"50M+\",\n          label: \"Users Reached\",\n          description: \"Through the products we've built\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/star\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"98%\",\n          label: \"Client Satisfaction\",\n          description: \"Based on post-project surveys\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/globe\"\n              size={24}\n              className=\"text-primary\"\n            />\n          ),\n          value: \"30+\",\n          label: \"Countries Served\",\n          description: \"Global reach, local understanding\",\n        },\n      ]}\n      features={[\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/clock\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Fast Turnaround\",\n          description:\n            \"Average project completion 40% faster than industry standard.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/shield-check\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Quality Guaranteed\",\n          description: \"Every project backed by our satisfaction guarantee.\",\n        },\n        {\n          icon: (\n            <DynamicIcon\n              name=\"lucide/headphones\"\n              size={20}\n              className=\"text-primary\"\n            />\n          ),\n          title: \"Dedicated Support\",\n          description: \"24/7 support available for all enterprise clients.\",\n        },\n      ]}\n      patternOpacity={0.15}\n      pattern=\"diagonalCrossFadeTop\"\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false},"stats":{"type":"array","description":"Array of stat configurations","items":{"type":"object","description":"","fields":{"value":{"type":"object","description":"Stat value (number or formatted string)","typeLabel":"ReactNode","required":true},"label":{"type":"object","description":"Stat label/description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Optional icon","typeLabel":"ReactNode | string","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"ExtendedStatItem"},"typeLabel":"ExtendedStatItem[]","required":false},"statsSlot":{"type":"object","description":"Custom slot for rendering stats (overrides stats array)","typeLabel":"React.ReactNode","required":false},"features":{"type":"array","description":"Array of feature configurations","items":{"type":"object","description":"","fields":{"title":{"type":"object","description":"Feature title","typeLabel":"ReactNode","required":false},"description":{"type":"object","description":"Feature description","typeLabel":"ReactNode","required":false},"icon":{"type":"object","description":"Feature icon","typeLabel":"ReactNode | string","required":false},"iconName":{"type":"string","description":"Icon name for dynamic icon loading","required":false},"href":{"type":"string","description":"Optional link URL","required":false},"className":{"type":"string","description":"Additional CSS classes","required":false},"iconBgClass":{"type":"string","description":"CSS class for icon background","required":false},"iconColorClass":{"type":"string","description":"CSS class for icon color","required":false}},"typeLabel":"FeatureItem"},"typeLabel":"FeatureItem[]","required":false},"featuresSlot":{"type":"object","description":"Custom slot for rendering features (overrides features 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},"sidebarClassName":{"type":"string","description":"Additional CSS classes for the sidebar","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},"statsClassName":{"type":"string","description":"Additional CSS classes for the stats container","required":false},"featuresClassName":{"type":"string","description":"Additional CSS classes for the features container","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","stats","sidebar","metrics","features","icons","sticky","organized"],"performance":{},"importantUsageNotes":"Ensure to only generate 2 or 4 `stats` since the stats element uses a 2 column layout. Only use numerical style strings for each stat 'value' prop, e.g. '1000' or '10K', avoid using longer strings like 'Over 1000 developers' since that will distort the layout. Follow the example props closely for this 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."},{"id":"about-mission-dual-image","name":"About Mission Dual Image","title":"About Mission Dual Image","category":"About","categorySlug":"about","description":"A mission/vision section with dual content blocks, CTA button, and a two-column image layout with offset positioning. Perfect for companies wanting to clearly communicate their mission and vision with strong visual support.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291458/qipavnwunako6subb907wjc9ebys/cleanshot-2026-02-25-at-12-55-55-2x.png","mobile":"https://cdn.ing/assets/i/r/291457/g568oidut1mfwckulncvrlpqkezy/cleanshot-2026-02-25-at-12-56-10-2x.png"},"componentPath":"blocks/about/about-mission-dual-image.tsx","code":"import { AboutMissionDualImage } from \"@opensite/ui/blocks/about/about-mission-dual-image\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutMissionDualImage\n      missionTitle=\"Our Mission\"\n      missionContent=\"To democratize access to powerful technology by creating intuitive tools that help businesses of all sizes compete and thrive in the digital economy.\"\n      visionTitle=\"Our Vision\"\n      visionContent=\"A world where every entrepreneur and organization has the digital capabilities they need to bring their ideas to life and make a meaningful impact.\"\n      primaryImage={{\n        src: imagePlaceholders[44],\n        alt: \"Team collaboration\",\n      }}\n      secondaryImage={{\n        src: imagePlaceholders[45],\n        alt: \"Modern workspace\",\n      }}\n      actions={[\n        {\n          label: \"Learn Our Story\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Meet the Team\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n          iconAfter: <DynamicIcon name=\"lucide/users\" size={16} />,\n        },\n      ]}\n      spacing=\"xl\"\n      background=\"dark\"\n      pattern=\"architect\"\n      patternOpacity={0.33}\n    />\n  );\n}","propsSchema":{"missionTitle":{"type":"object","description":"Mission section title","typeLabel":"React.ReactNode","required":false},"missionContent":{"type":"object","description":"Mission section content","typeLabel":"React.ReactNode","required":false},"visionTitle":{"type":"object","description":"Vision section title","typeLabel":"React.ReactNode","required":false},"visionContent":{"type":"object","description":"Vision section content","typeLabel":"React.ReactNode","required":false},"primaryImage":{"type":"object","description":"Primary image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"secondaryImage":{"type":"object","description":"Secondary image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","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},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"missionTitleClassName":{"type":"string","description":"Additional CSS classes for the mission title","required":false},"missionContentClassName":{"type":"string","description":"Additional CSS classes for the mission content","required":false},"visionTitleClassName":{"type":"string","description":"Additional CSS classes for the vision title","required":false},"visionContentClassName":{"type":"string","description":"Additional CSS classes for the vision content","required":false},"primaryImageClassName":{"type":"string","description":"Additional CSS classes for the primary image","required":false},"secondaryImageClassName":{"type":"string","description":"Additional CSS classes for the secondary image","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","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","mission","vision","dual-image","cta","offset","two-column","visual"],"performance":{},"importantUsageNotes":"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."},{"id":"about-story-expertise","name":"Story & Expertise Spotlight","title":"About Story Expertise","category":"About","categorySlug":"about","description":"A two-part about section that pairs a narrative story with CTA buttons alongside a highlighted image card, followed by a grid of expertise tiles. Ideal for trust-building pages that need both brand story and capability proof points.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293115/2ovc61etdk0vhyya9mflrjr6khm1/cleanshot-2026-03-03-at-20-33-09.png","mobile":"https://cdn.ing/assets/i/r/293114/67hpsafnchq1acqvmpex97uwpafl/cleanshot-2026-03-03-at-20-33-29.png"},"componentPath":"blocks/about/about-story-expertise.tsx","code":"import { AboutStoryExpertise } from \"@opensite/ui/blocks/about/about-story-expertise\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutStoryExpertise\n      eyebrow=\"Our Story\"\n      heading=\"From Garage Startup to Global Impact\"\n      storyParagraphs={[\n        \"What began as a two-person operation in 2010 has grown into a team of over 200 professionals serving clients across 30 countries.\",\n        \"Our journey hasn't always been smooth. We've faced challenges, made mistakes, and learned invaluable lessons along the way. But through it all, our commitment to our clients and our craft has never wavered.\",\n        \"Today, we're proud to be trusted partners to some of the world's most innovative organizations, helping them navigate digital transformation and achieve their most ambitious goals.\",\n      ]}\n      actions={[\n        {\n          label: \"Read Our Full Story\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n        {\n          label: \"Meet the Team\",\n          href: \"#\",\n          variant: \"outline\",\n          size: \"lg\",\n        },\n      ]}\n      image={{\n        src: imagePlaceholders[12],\n        alt: \"Team collaboration\",\n      }}\n      highlight={{\n        icon: \"lucide/award\",\n        label: \"Recognition\",\n        title: \"Top 100 Tech Companies\",\n        description:\n          \"Named among the fastest-growing technology companies for three consecutive years.\",\n      }}\n      expertiseHeading=\"Areas of Expertise\"\n      expertiseDescription=\"We've developed deep expertise across multiple domains, enabling us to tackle complex challenges with confidence.\"\n      expertiseAreas={[\n        {\n          icon: \"lucide/layout\",\n          title: \"Product Design\",\n          description:\n            \"User-centered design that balances aesthetics with functionality.\",\n        },\n        {\n          icon: \"lucide/code\",\n          title: \"Engineering\",\n          description:\n            \"Scalable, maintainable code built with modern best practices.\",\n        },\n        {\n          icon: \"lucide/bar-chart\",\n          title: \"Data & Analytics\",\n          description:\n            \"Insights-driven strategies powered by advanced analytics.\",\n        },\n        {\n          icon: \"lucide/cloud\",\n          title: \"Cloud Infrastructure\",\n          description: \"Reliable, secure, and cost-effective cloud solutions.\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label for the story section","typeLabel":"React.ReactNode","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow","required":false},"heading":{"type":"object","description":"Main heading for the story section","typeLabel":"React.ReactNode","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"storyParagraphs":{"type":"array","description":"Story paragraphs displayed in order","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"storySlot":{"type":"object","description":"Custom slot for rendering story content (overrides storyParagraphs)","typeLabel":"React.ReactNode","required":false},"storyClassName":{"type":"string","description":"Additional CSS classes for the story content","required":false},"actions":{"type":"array","description":"Array of action configurations for CTAs","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"image":{"type":"object","description":"Feature image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"highlight":{"type":"object","description":"Highlight badge content overlaid on the image","fields":{"icon":{"type":"object","description":"","typeLabel":"React.ReactNode | string","required":false},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":false}},"typeLabel":"{ icon?: React.ReactNode | string; label?: React.ReactNode; title?: React.ReactNode; description?: React.ReactNode; }","required":false},"highlightSlot":{"type":"object","description":"Custom slot for rendering highlight (overrides highlight object)","typeLabel":"React.ReactNode","required":false},"highlightClassName":{"type":"string","description":"Additional CSS classes for the highlight","required":false},"expertiseHeading":{"type":"object","description":"Expertise section heading","typeLabel":"React.ReactNode","required":false},"expertiseHeadingClassName":{"type":"string","description":"Additional CSS classes for the expertise heading","required":false},"expertiseDescription":{"type":"object","description":"Expertise section description","typeLabel":"React.ReactNode","required":false},"expertiseDescriptionClassName":{"type":"string","description":"Additional CSS classes for the expertise description","required":false},"expertiseAreas":{"type":"array","description":"Expertise area cards","items":{"type":"object","description":"","fields":{"icon":{"type":"object","description":"Icon element or icon name","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Expertise title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Supporting description","typeLabel":"React.ReactNode","required":false}},"typeLabel":"AboutStoryExpertiseArea"},"typeLabel":"AboutStoryExpertiseArea[]","required":false},"expertiseAreasSlot":{"type":"object","description":"Custom slot for rendering expertise areas (overrides expertiseAreas array)","typeLabel":"React.ReactNode","required":false},"expertiseAreasClassName":{"type":"string","description":"Additional CSS classes for the expertise areas container","required":false},"expertiseSectionClassName":{"type":"string","description":"Additional CSS classes for the expertise section","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","story","expertise","narrative","cta","image","highlight","grid","trust","capabilities"],"performance":{},"importantUsageNotes":"Ensure to only generate 2 or 4 `expertiseAreas` since the expertiseAreas element uses a 2 column layout. Keep the highlight prop's label, title, and description succinct since too long of content will distort the layout. 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."},{"id":"about-network-spotlight","name":"Partner Network Spotlight","title":"About Network Spotlight","category":"About","categorySlug":"about","description":"A high-contrast, two-column spotlight with a featured image overlay card, highlight list, and dual CTAs. Great for partner network invitations, alliance announcements, or community programs.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/293117/0leh9x3j241i0cw3j7evk39xkj1x/cleanshot-2026-03-03-at-20-38-59.png","mobile":"https://cdn.ing/assets/i/r/293116/m7advm5g6j368ym4ajeonobssfr6/cleanshot-2026-03-03-at-20-39-12.png"},"componentPath":"blocks/about/about-network-spotlight.tsx","code":"import { AboutNetworkSpotlight } from \"@opensite/ui/blocks/about/about-network-spotlight\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutNetworkSpotlight\n      eyebrow=\"Partner Program\"\n      heading=\"Join Our Growing Network\"\n      description=\"Connect with industry leaders, access exclusive resources, and grow your business through our partner ecosystem.\"\n      highlights={[\n        \"Access to co-marketing opportunities and joint campaigns\",\n        \"Priority support and dedicated partner success manager\",\n        \"Revenue sharing and referral commission programs\",\n        \"Early access to new features and beta programs\",\n      ]}\n      actions={[\n        {\n          label: \"Become a Partner\",\n          href: \"#\",\n          variant: \"default\",\n          asButton: true,\n        },\n        {\n          label: \"Learn More\",\n          href: \"#\",\n          variant: \"link\",\n          asButton: true,\n        },\n      ]}\n      image={{\n        src: imagePlaceholders[16],\n        alt: \"Partner collaboration meeting\",\n      }}\n      spotlightCard={{\n        icon: \"lucide/award\",\n        label: \"Featured Partner\",\n        title: \"Acme Corporation\",\n        description:\n          \"Achieved 300% growth in their first year as a certified partner.\",\n      }}\n      background=\"dark\"\n      pattern=\"spotlightLeft\"\n    />\n  );\n}","propsSchema":{"eyebrow":{"type":"object","description":"Eyebrow label above the heading","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},"highlights":{"type":"array","description":"Highlight bullet list","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false},"highlightsSlot":{"type":"object","description":"Custom slot for rendering highlights (overrides highlights array)","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},"image":{"type":"object","description":"Spotlight image configuration","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string; }","required":false},"spotlightCard":{"type":"object","description":"Spotlight card content overlaid on the image","fields":{"icon":{"type":"string","description":"","required":true},"label":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"title":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true},"description":{"type":"object","description":"","typeLabel":"React.ReactNode","required":true}},"typeLabel":"{ icon: string; label: React.ReactNode; title: React.ReactNode; description: React.ReactNode; }","required":false},"spotlightCardSlot":{"type":"object","description":"Custom slot for rendering spotlight card (overrides spotlightCard object)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content wrapper","required":false},"eyebrowClassName":{"type":"string","description":"Additional CSS classes for the eyebrow text","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},"highlightsClassName":{"type":"string","description":"Additional CSS classes for the highlights list","required":false},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"spotlightCardClassName":{"type":"string","description":"Additional CSS classes for the spotlight card","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},"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},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","network","partners","spotlight","dark","image","highlights","cta","alliances","community"],"performance":{},"importantUsageNotes":"Ensure to not generate more than 4-6 `highlights`. Keep the the `spotlightCard` prop's label, title, and description succinct since too long of content will distort the layout. 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."},{"id":"about-location-info-hero","name":"Location Info Hero","title":"About Location Info Hero","category":"About","categorySlug":"about","description":"A split hero section with headline, action links, contact details, hours breakdown, and a one- or two-image showcase. Ideal for service hubs, flagship offices, or location-driven about pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290228/rgpkqt5l5ssgjlsgxjcl9iw1yr7p/cleanshot-2026-02-18-at-02-55-25.png","mobile":"https://cdn.ing/assets/i/r/290227/affjjwcx6mdwsw2qz7c7q7s9a20h/cleanshot-2026-02-18-at-02-55-44.png"},"componentPath":"blocks/about/about-location-info-hero.tsx","code":"import { AboutLocationInfoHero } from \"@opensite/ui/blocks/about/about-location-info-hero\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutLocationInfoHero\n      headline=\"A Lively, ultramodern sports parlor and dining establishment.\"\n      address=\"123 Innovation Drive, Suite 400, San Francisco, CA 94102\"\n      addressHref=\"#\"\n      phone=\"(555) 123-4567\"\n      phoneHref=\"tel:+15551234567\"\n      actions={[\n        {\n          label: \"Get Directions\",\n          href: \"#\",\n        },\n        {\n          label: \"Schedule a Visit\",\n          href: \"#\",\n        },\n      ]}\n      hoursSections={[\n        {\n          label: \"Hours\",\n          hours: [\n            { day: \"Monday - Friday\", time: \"9:00 AM - 6:00 PM\" },\n            { day: \"Saturday\", time: \"10:00 AM - 2:00 PM\" },\n            { day: \"Sunday\", time: \"Closed\" },\n          ],\n        },\n        {\n          label: \"Happy Hour\",\n          hours: [\n            { day: \"Monday - Friday\", time: \"8:00 AM - 8:00 PM\" },\n            { day: \"Weekend\", time: \"10:00 AM - 4:00 PM\" },\n          ],\n        },\n      ]}\n      images={[\n        {\n          src: imagePlaceholders[134],\n          alt: \"Office exterior\",\n        },\n        {\n          src: imagePlaceholders[133],\n          alt: \"Office interior\",\n        },\n      ]}\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.1}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"headline":{"type":"object","description":"Main headline text","typeLabel":"React.ReactNode","required":false},"headlineClassName":{"type":"string","description":"Additional CSS classes for the headline","required":false},"address":{"type":"object","description":"Address text","typeLabel":"React.ReactNode","required":false},"addressHref":{"type":"string","description":"Optional address link","required":false},"addressClassName":{"type":"string","description":"Additional CSS classes for the address","required":false},"phone":{"type":"object","description":"Phone text","typeLabel":"React.ReactNode","required":false},"phoneHref":{"type":"string","description":"Optional phone link","required":false},"phoneClassName":{"type":"string","description":"Additional CSS classes for the phone","required":false},"actions":{"type":"array","description":"Action buttons shown below the headline","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},"actionsClassName":{"type":"string","description":"Additional CSS classes for the actions container","required":false},"hoursSections":{"type":"array","description":"Hours sections to display","items":{"type":"object","description":"","fields":{"label":{"type":"object","description":"Section label","typeLabel":"React.ReactNode","required":false},"hours":{"type":"array","description":"Hours list for the section","items":{"type":"object","description":"","fields":{"day":{"type":"object","description":"Day label","typeLabel":"React.ReactNode","required":false},"time":{"type":"object","description":"Hours text","typeLabel":"React.ReactNode","required":false}},"typeLabel":"AboutLocationInfoHeroHours"},"typeLabel":"AboutLocationInfoHeroHours[]","required":false}},"typeLabel":"AboutLocationInfoHeroHoursSection"},"typeLabel":"AboutLocationInfoHeroHoursSection[]","required":false},"hoursSectionsSlot":{"type":"object","description":"Custom slot for rendering hours sections (overrides hoursSections array)","typeLabel":"React.ReactNode","required":false},"hoursSectionsClassName":{"type":"string","description":"Additional CSS classes for the hours sections container","required":false},"images":{"type":"array","description":"Image list (one or two images recommended)","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"","required":true},"alt":{"type":"string","description":"","required":true}},"typeLabel":"{ src: string; alt: string }"},"typeLabel":"{ src: string; alt: string }[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"imagesClassName":{"type":"string","description":"Additional CSS classes for the images container","required":false},"contentPosition":{"type":"string","description":"Layout direction on desktop","typeLabel":"\"left\" | \"right\"","required":false},"mobileStackOrder":{"type":"string","description":"Mobile stack order","typeLabel":"\"content-first\" | \"images-first\"","required":false},"accentColor":{"type":"string","description":"Accent color for section labels","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},"className":{"type":"string","description":"Additional CSS classes for the section wrapper","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the 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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","location","contact","hours","hero","images","service-center","address","phone","cta"],"performance":{},"importantUsageNotes":"Ensure to not exceed a count of 4 'hours' for each of the 'hoursSections' props. Only populate the 'address', 'addressHref', 'phone', and 'phoneHref' props if you have valid values for them, DO NOT MAKE UP VALUES FOR THEM OR GUESS WHAT THEY ARE. 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."},{"id":"about-split-hero","name":"About Split Hero","title":"About Split Hero","category":"About","categorySlug":"about","description":"A split-screen hero section with dark theme styling, featuring text content on the left and a large image on the right. Includes brand text with gradient highlight, prominent heading, description, and CTA button. Best for premium/pro tier landing pages, product launches, and upgrade prompts.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291140/ebxa67i4f82yroor8ioqnb6adv1h/cleanshot-2026-02-25-at-12-24-27-2x.png","mobile":"https://cdn.ing/assets/i/r/291140/ebxa67i4f82yroor8ioqnb6adv1h/cleanshot-2026-02-25-at-12-24-27-2x.png"},"componentPath":"blocks/about/about-split-hero.tsx","code":"import { AboutSplitHero } from \"@opensite/ui/blocks/about/about-split-hero\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutSplitHero\n      brandText=\"Enterprise\"\n      brandHighlight=\"PRO\"\n      heading=\"Achieve More with Elite Access Pro\"\n      description=\"Enhance your business growth with increased visibility, advanced analytics, and priority support that scales with your success.\"\n      ctaAction={{\n        label: \"Upgrade to Premium\",\n        href: \"#\",\n        variant: \"default\",\n        size: \"lg\",\n      }}\n      imageSrc={imagePlaceholders[85]}\n      imageAlt=\"Enterprise team collaboration\"\n      background=\"dark\"\n      pattern=\"gridDotsBasic\"\n      patternOpacity={0.15}\n      directionConfig={{\n        desktop: \"mediaLeft\",\n        mobile: \"mediaBottom\",\n      }}\n    />\n  );\n}","propsSchema":{"brandText":{"type":"object","description":"Brand/logo text","typeLabel":"React.ReactNode","required":false},"brandTextClassName":{"type":"string","description":"Additional CSS classes for the brand text","required":false},"brandHighlight":{"type":"object","description":"Highlighted brand text (e.g., \"PRO\")","typeLabel":"React.ReactNode","required":false},"brandHighlightClassName":{"type":"string","description":"Additional CSS classes for the brand highlight","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":false},"descriptionClassName":{"type":"string","description":"Additional CSS classes for the description","required":false},"ctaAction":{"type":"object","description":"CTA action configuration","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","required":false},"ctaSlot":{"type":"object","description":"Custom slot for rendering CTA (overrides ctaAction)","typeLabel":"React.ReactNode","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":false},"imageAlt":{"type":"string","description":"Image alt text","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content area","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","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},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"directionConfig":{"type":"object","description":"Direction configuration for desktop and mobile layouts","fields":{"desktop":{"type":"string","description":"","typeLabel":"\"mediaRight\" | \"mediaLeft\"","required":true},"mobile":{"type":"string","description":"","typeLabel":"\"mediaTop\" | \"mediaBottom\"","required":true}},"typeLabel":"DirectionConfig","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","hero","split","dark-theme","premium","upgrade","cta","brand","landing"],"performance":{},"importantUsageNotes":"Ensure to use concise content for the text content props since too long of content will distort the layout."},{"id":"about-mission-principles","name":"About Mission Principles","title":"About Mission Principles","category":"About","categorySlug":"about","description":"A comprehensive mission statement section with numbered principle cards and a vision callout. Features a two-column grid with mission text on left, principle cards on right, followed by a full-width vision banner. Best for company about pages, mission statements, and values showcases.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/291142/wujohbv3x20d67t11sc04qxayqap/cleanshot-2026-02-25-at-12-26-06-2x.png","mobile":"https://cdn.ing/assets/i/r/291141/vgz38n0pswtr7e7udc7y6mstzime/cleanshot-2026-02-25-at-12-26-28-2x.png"},"componentPath":"blocks/about/about-mission-principles.tsx","code":"import { AboutMissionPrinciples } from \"@opensite/ui/blocks/about/about-mission-principles\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutMissionPrinciples\n      badgeText=\"Our Mission\"\n      missionHeading=\"Empowering People Through Technology\"\n      missionDescription=\"We believe technology should serve humanity—making life simpler, work more meaningful, and connections stronger. Our mission is to build tools that amplify human potential and create opportunities for everyone.\"\n      missionAction={{\n        label: \"Read Our Story\",\n        href: \"#\",\n        variant: \"default\",\n      }}\n      principles={[\n        {\n          number: \"01\",\n          title: \"Customer-Centric\",\n          description:\n            \"Every decision starts with understanding our customers' needs. We obsess over their experience and measure our success by their success.\",\n        },\n        {\n          number: \"02\",\n          title: \"Built to Last\",\n          description:\n            \"We prioritize long-term value over short-term gains. Quality, security, and reliability are non-negotiable.\",\n        },\n        {\n          number: \"03\",\n          title: \"Inclusive by Design\",\n          description:\n            \"We build for everyone. Accessibility, diversity, and inclusion are embedded in our product development and company culture.\",\n        },\n        {\n          number: \"04\",\n          title: \"Continuous Learning\",\n          description:\n            \"We stay curious and humble. Markets change, technology evolves, and we adapt by listening, learning, and improving every day.\",\n        },\n      ]}\n      visionHeading=\"Our Vision for 2030\"\n      visionDescription=\"By 2030, we aim to be the most trusted platform for teams worldwide—known for innovation, reliability, and positive impact on people's work and lives.\"\n      visionAction={{\n        label: \"View Our Roadmap\",\n        href: \"#\",\n        variant: \"outline\",\n        size: \"lg\",\n      }}\n      background=\"gray\"\n      pattern=\"noise\"\n      patternOpacity={1}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text","typeLabel":"React.ReactNode","required":false},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"missionHeading":{"type":"object","description":"Main mission statement heading","typeLabel":"React.ReactNode","required":false},"missionHeadingClassName":{"type":"string","description":"Additional CSS classes for the mission heading","required":false},"missionDescription":{"type":"object","description":"Mission description text","typeLabel":"React.ReactNode","required":false},"missionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the mission description","required":false},"missionAction":{"type":"object","description":"Mission CTA action configuration","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","required":false},"missionActionSlot":{"type":"object","description":"Custom slot for rendering mission CTA (overrides missionAction)","typeLabel":"React.ReactNode","required":false},"missionActionClassName":{"type":"string","description":"Additional CSS classes for the mission action","required":false},"principles":{"type":"array","description":"Array of principle items","items":{"type":"object","description":"","fields":{"number":{"type":"object","description":"Principle number (e.g., \"01\", \"02\")","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Principle title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Principle description","typeLabel":"React.ReactNode","required":false}},"typeLabel":"AboutMissionPrincipleItem"},"typeLabel":"AboutMissionPrincipleItem[]","required":false},"principlesSlot":{"type":"object","description":"Custom slot for rendering principles (overrides principles array)","typeLabel":"React.ReactNode","required":false},"principlesClassName":{"type":"string","description":"Additional CSS classes for the principles container","required":false},"visionHeading":{"type":"object","description":"Vision section heading","typeLabel":"React.ReactNode","required":false},"visionHeadingClassName":{"type":"string","description":"Additional CSS classes for the vision heading","required":false},"visionDescription":{"type":"object","description":"Vision section description","typeLabel":"React.ReactNode","required":false},"visionDescriptionClassName":{"type":"string","description":"Additional CSS classes for the vision description","required":false},"visionAction":{"type":"object","description":"Vision CTA action configuration","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","required":false},"visionActionSlot":{"type":"object","description":"Custom slot for rendering vision CTA (overrides visionAction)","typeLabel":"React.ReactNode","required":false},"visionClassName":{"type":"string","description":"Additional CSS classes for the vision section","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},"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","mission","principles","values","vision","company","culture","numbered","cards"],"performance":{},"importantUsageNotes":"Only use this block if you have 4 `principles` props, any different count than 4 will distort the layout. Follow the example props closely for this block."},{"id":"about-expandable-values","name":"About Expandable Values","title":"About Expandable Values","category":"About","categorySlug":"about","description":"An interactive values section with expandable cards that reveal detailed descriptions and examples when clicked. Features a responsive grid of value cards that expand to full width when active, with icon integration and example lists. Best for company values pages, culture showcases, and brand identity sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290833/arzkvvfgv74roz78jc2unsbikka5/cleanshot-2026-02-25-at-04-08-16.png","mobile":"https://cdn.ing/assets/i/r/290832/7ymisv2akhfqlqkmvt7e1c44v6cs/cleanshot-2026-02-25-at-04-08-36.png"},"componentPath":"blocks/about/about-expandable-values.tsx","code":"import { AboutExpandableValues } from \"@opensite/ui/blocks/about/about-expandable-values\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\n\nexport default function Demo() {\n  return (\n    <AboutExpandableValues\n      badgeText=\"Our Core Values\"\n      heading=\"The Principles That Guide Us\"\n      description=\"These aren't just words on a wall—they're the foundation of every decision we make and the compass that guides our journey.\"\n      values={[\n        {\n          id: \"integrity\",\n          icon: <DynamicIcon name=\"lucide/shield\" size={24} />,\n          title: \"Integrity\",\n          shortDescription: \"Doing what's right, even when no one is watching.\",\n          longDescription:\n            \"We believe honesty and transparency are the bedrock of trust. In every interaction—with customers, partners, and each other—we choose authenticity over convenience. We admit mistakes, keep our promises, and hold ourselves accountable to the highest ethical standards.\",\n          examples: [\n            \"Transparent pricing with no hidden fees\",\n            \"Honest communication about product limitations\",\n            \"Clear data privacy policies and practices\",\n            \"Speaking up when we see something wrong\",\n          ],\n        },\n        {\n          id: \"excellence\",\n          icon: <DynamicIcon name=\"lucide/award\" size={24} />,\n          title: \"Excellence\",\n          shortDescription: \"Striving for quality in everything we create.\",\n          longDescription:\n            \"Good enough is never good enough for us. We're obsessed with craftsmanship and continuous improvement. Whether it's a line of code, a customer email, or a product feature, we put our full energy into making it exceptional.\",\n          examples: [\n            \"Rigorous code reviews and testing standards\",\n            \"Detailed documentation for every feature\",\n            \"Regular training and skill development\",\n            \"Customer feedback drives our roadmap\",\n          ],\n        },\n        {\n          id: \"empathy\",\n          icon: <DynamicIcon name=\"lucide/heart\" size={24} />,\n          title: \"Empathy\",\n          shortDescription:\n            \"Understanding and caring about others' experiences.\",\n          longDescription:\n            \"We put ourselves in others' shoes—whether they're customers facing a problem, teammates navigating challenges, or communities affected by our work. Empathy shapes our products, our policies, and our culture.\",\n          examples: [\n            \"User research drives product decisions\",\n            \"Flexible work arrangements for all life situations\",\n            \"Active listening in every conversation\",\n            \"Accessible design is our standard, not an afterthought\",\n          ],\n        },\n        {\n          id: \"innovation\",\n          icon: <DynamicIcon name=\"lucide/lightbulb\" size={24} />,\n          title: \"Innovation\",\n          shortDescription: \"Embracing change and pushing boundaries.\",\n          longDescription:\n            \"The status quo is our starting point, not our destination. We encourage experimentation, celebrate creative thinking, and view failure as a stepping stone to breakthrough ideas. Innovation isn't just about technology—it's about finding better ways to solve problems.\",\n          examples: [\n            \"20% time for passion projects\",\n            \"Innovation challenges and hackathons\",\n            \"Safe space to test new ideas\",\n            \"Cross-functional collaboration on experiments\",\n          ],\n        },\n        {\n          id: \"community\",\n          icon: <DynamicIcon name=\"lucide/users\" size={24} />,\n          title: \"Community\",\n          shortDescription: \"Building connections and giving back.\",\n          longDescription:\n            \"We're stronger together. We invest in our internal community through mentorship and support, and we give back to the broader community through volunteering, open-source contributions, and partnerships with nonprofits.\",\n          examples: [\n            \"Volunteer time off for community service\",\n            \"Open-source contributions and sponsorships\",\n            \"Mentorship programs for underrepresented groups\",\n            \"Local charity partnerships and fundraisers\",\n          ],\n        },\n        {\n          id: \"sustainability\",\n          icon: <DynamicIcon name=\"lucide/leaf\" size={24} />,\n          title: \"Sustainability\",\n          shortDescription: \"Building for the long term, responsibly.\",\n          longDescription:\n            \"We consider the environmental and social impact of our decisions. From carbon-neutral operations to sustainable business practices, we're committed to leaving the world better than we found it.\",\n          examples: [\n            \"Carbon-neutral cloud infrastructure\",\n            \"Paperless operations and digital workflows\",\n            \"Sustainable office practices and partnerships\",\n            \"Long-term thinking over short-term gains\",\n          ],\n        },\n      ]}\n      ctaHeading=\"Want to Be Part of Our Values-Driven Team?\"\n      ctaDescription=\"We're looking for people who share these principles and want to build something meaningful together.\"\n      actions={[\n        {\n          label: \"Explore Careers\",\n          href: \"#\",\n          variant: \"default\",\n          size: \"lg\",\n        },\n      ]}\n      background=\"dark\"\n      pattern=\"gridFadeTop\"\n      patternOpacity={0.05}\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},"values":{"type":"array","description":"Array of value items","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the value","required":true},"icon":{"type":"object","description":"Icon element or icon name","typeLabel":"React.ReactNode","required":false},"title":{"type":"object","description":"Value title","typeLabel":"React.ReactNode","required":false},"shortDescription":{"type":"object","description":"Short description shown when collapsed","typeLabel":"React.ReactNode","required":false},"longDescription":{"type":"object","description":"Long description shown when expanded","typeLabel":"React.ReactNode","required":false},"examples":{"type":"array","description":"Examples of how the value is practiced","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false}},"typeLabel":"AboutExpandableValueItem"},"typeLabel":"AboutExpandableValueItem[]","required":false},"valuesSlot":{"type":"object","description":"Custom slot for rendering values (overrides values array)","typeLabel":"React.ReactNode","required":false},"ctaHeading":{"type":"object","description":"Bottom CTA heading","typeLabel":"React.ReactNode","required":false},"ctaDescription":{"type":"object","description":"Bottom 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},"valuesClassName":{"type":"string","description":"Additional CSS classes for the values grid","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},"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","values","expandable","interactive","cards","culture","brand","icons","accordion"],"performance":{},"importantUsageNotes":"Follow the example props closely for this 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."},{"id":"about-culture-tabs","name":"About Culture Tabs","title":"About Culture Tabs","category":"About","categorySlug":"about","description":"A tabbed company culture section with testimonials, image galleries, and a careers CTA. Features a tabbed interface with description, testimonial card, and image grid for each culture aspect. Best for company culture pages, careers sections, and about us pages.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/290459/sty27yddokekq943qh6p4zz4e1a6/cleanshot-2026-02-19-at-05-50-48-2x.png","mobile":"https://cdn.ing/assets/i/r/290458/s901l9ez0u6jncje3i48vuzdxref/cleanshot-2026-02-19-at-05-51-15-2x.png"},"componentPath":"blocks/about/about-culture-tabs.tsx","code":"import { AboutCultureTabs } from \"@opensite/ui/blocks/about/about-culture-tabs\";\nimport { DynamicIcon } from \"@opensite/ui/components/dynamic-icon\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AboutCultureTabs\n      badgeText=\"Our Culture\"\n      heading=\"What Makes Us Different\"\n      description=\"We've built a workplace where innovation thrives and every voice matters. Explore the core aspects that define our unique culture.\"\n      aspects={[\n        {\n          id: \"innovation\",\n          title: \"Innovation First\",\n          description:\n            \"We believe in challenging the status quo and pushing boundaries. Our teams have the freedom to experiment, fail fast, and iterate toward breakthrough solutions. Every idea is valued, and creativity is encouraged at every level.\",\n          images: [\n            imagePlaceholders[12],\n            imagePlaceholders[23],\n            imagePlaceholders[34],\n          ],\n          testimonial: {\n            quote:\n              \"The freedom to innovate here is unmatched. I've learned more in six months than in years elsewhere.\",\n            author: \"Sarah Chen\",\n            role: \"Senior Product Designer\",\n            avatar: imagePlaceholders[67],\n          },\n        },\n        {\n          id: \"collaboration\",\n          title: \"Collaborative Spirit\",\n          description:\n            \"We break down silos and build bridges. Our open-door policy and cross-functional teams ensure that the best ideas rise to the top, regardless of where they come from. Collaboration isn't just encouraged—it's how we work.\",\n          images: [\n            imagePlaceholders[78],\n            imagePlaceholders[89],\n            imagePlaceholders[91],\n          ],\n          testimonial: {\n            quote:\n              \"Working across teams is seamless. Everyone is genuinely invested in helping each other succeed.\",\n            author: \"Marcus Johnson\",\n            role: \"Engineering Lead\",\n            avatar: imagePlaceholders[102],\n          },\n        },\n        {\n          id: \"growth\",\n          title: \"Growth Mindset\",\n          description:\n            \"We invest in our people's development through mentorship programs, learning budgets, and regular skill-building workshops. Your growth is our growth, and we're committed to helping you reach your full potential.\",\n          images: [\n            imagePlaceholders[5],\n            imagePlaceholders[16],\n            imagePlaceholders[27],\n          ],\n          testimonial: {\n            quote:\n              \"The mentorship and learning opportunities have accelerated my career beyond what I imagined possible.\",\n            author: \"Priya Patel\",\n            role: \"Data Scientist\",\n            avatar: imagePlaceholders[38],\n          },\n        },\n        {\n          id: \"balance\",\n          title: \"Work-Life Balance\",\n          description:\n            \"We understand that your best work happens when you're at your best. Flexible schedules, remote options, and generous time-off policies ensure you can be present for what matters most in your life.\",\n          images: [\n            imagePlaceholders[49],\n            imagePlaceholders[58],\n            imagePlaceholders[69],\n          ],\n          testimonial: {\n            quote:\n              \"I can be a dedicated professional and a present parent. That balance has transformed my life.\",\n            author: \"Alex Rivera\",\n            role: \"Marketing Director\",\n            avatar: imagePlaceholders[77],\n          },\n        },\n      ]}\n      ctaHeading=\"Ready to Join Our Team?\"\n      ctaDescription=\"We're always looking for talented individuals who share our values and want to make an impact.\"\n      actions={[\n        {\n          label: \"View Open Positions\",\n          href: \"#\",\n          variant: \"default\",\n          iconAfter: <DynamicIcon name=\"lucide/arrow-right\" size={16} />,\n        },\n        {\n          label: \"Learn About Benefits\",\n          href: \"#\",\n          variant: \"outline\",\n        },\n      ]}\n      ctaImages={[\n        imagePlaceholders[12],\n        imagePlaceholders[23],\n        imagePlaceholders[34],\n        imagePlaceholders[45],\n        imagePlaceholders[56],\n        imagePlaceholders[67],\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopRight\"\n      patternOpacity={0.15}\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},"aspects":{"type":"array","description":"Array of culture aspects","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier","required":true},"title":{"type":"string","description":"Aspect title","required":true},"description":{"type":"string","description":"Aspect description","required":true},"images":{"type":"array","description":"Array of image URLs","items":{"type":"string","description":""},"required":true},"testimonial":{"type":"object","description":"Testimonial for this aspect","fields":{"quote":{"type":"string","description":"Testimonial quote","required":true},"author":{"type":"string","description":"Author name","required":true},"role":{"type":"string","description":"Author role/title","required":true},"avatar":{"type":"string","description":"Author avatar URL","required":true}},"typeLabel":"CultureTestimonial","required":true}},"typeLabel":"CultureAspect"},"typeLabel":"CultureAspect[]","required":false},"aspectsSlot":{"type":"object","description":"Custom slot for rendering aspects (overrides aspects array)","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},"ctaImages":{"type":"array","description":"CTA section images","items":{"type":"string","description":""},"required":false},"ctaImagesSlot":{"type":"object","description":"Custom slot for rendering CTA images (overrides ctaImages 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","culture","tabs","testimonials","gallery","careers","team","values","workplace"],"performance":{},"importantUsageNotes":"This block has a large number of strict requirements and should only be used for a website that has a large number of imges, reviews/testimonials, etc. Only use if you generate exactly 4 `aspects` since any more/fewer will distort the layout. Follow the example props very closely for this block, e.g. image counts in each section, 1 REAL (DO NOT GENERATE FAKE REVIEWS/TESTIMONIALS) testimonial per aspect, etc. 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:15:34.767Z"}