{"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\";\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=\"https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw\"\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=\"https://toastability-production.s3.amazonaws.com/ytbyjrcvrghc7wl6w1g7g8fwka22\"\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=\"https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr\"\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,"minItems":2,"maxItems":5,"mediaHints":{"path":"sections[].media","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Alternating section visual. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"className":{"type":"string","description":"Additional CSS classes","required":false},"sections[].content":{"type":"object","description":"","required":true},"sections[].media":{"type":"object","description":"","required":true}},"exampleProps":{"title":"How We Got Here","subtitle":"A practical timeline of the decisions that shaped our company.","sections":[{"content":"We started by replacing disconnected tools with one focused workflow.","media":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","mediaLeft":false},{"content":"Today our team helps operators launch better customer experiences faster.","media":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","mediaLeft":true}]},"dependencies":["@opensite/ui"],"tags":["about","story","history","timeline","features","benefits","alternating","two-column","content-media"],"performance":{},"importantUsageNotes":"Use for two or more narrative sections with alternating visual rhythm. The sections[].content and sections[].media props are ReactNode slots; authoring tools should render concrete text and image elements, not placeholder fragments. Keep each section focused on one milestone, value, or proof point.","usageRequirements":{"requiredProps":["sections"],"propConstraints":{"sections":{"required":true,"minItems":2,"maxItems":5},"sections[].content":{"required":true,"note":"ReactNode content slot. Use concise, source-backed story copy."},"sections[].media":{"required":true,"note":"ReactNode media slot. Provide an image element with an absolute src."}},"mediaSlots":{"sections[].media":{"path":"sections[].media","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Alternating section visual. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308391/0f1z0vr7or2j70bpog37l0nnuezy/about-mission-features-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308392/ddedxugvtjkujel2jknda8nui7fw/about-mission-features-mobile.jpg"},"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\";\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: \"https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g\",\n        alt: \"Team working together\",\n      }}\n      missionBackgroundImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb\",\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":true,"maxLength":70},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false,"maxLength":180},"missionLabel":{"type":"object","description":"Mission section label","typeLabel":"React.ReactNode","required":false,"maxLength":35},"missionText":{"type":"object","description":"Mission section text","typeLabel":"React.ReactNode","required":true,"maxLength":180},"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":true,"mediaHints":{"path":"mainImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary about image beside the mission card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"mediaHints":{"path":"missionBackgroundImage","roles":["background","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Background photo behind the mission statement. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"minItems":3,"maxItems":3},"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}},"exampleProps":{"title":"About OpenSite","description":"We help service teams turn daily operations into polished digital experiences.","missionLabel":"Our Mission","missionText":"Make professional site building faster, clearer, and easier to maintain.","mainImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team working together in a cafe"},"missionBackgroundImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Workspace background for mission statement"},"features":[{"icon":"lucide/files","title":"Reusable systems","description":"Blocks stay consistent across every page."},{"icon":"lucide/settings","title":"Operational clarity","description":"Teams can update content without redesigning layouts."},{"icon":"lucide/shield","title":"Reliable delivery","description":"Contracts protect AI-generated pages from unsafe content."}]},"dependencies":["@opensite/ui"],"tags":["about","mission","features","values","company","icons","cards","hero","image-grid"],"performance":{},"importantUsageNotes":"Use when a page needs a mission statement plus feature proof points. Supply both image objects when visual impact matters, and keep feature cards limited to short, concrete benefits. Do not use logos, favicons, or video URLs in image props.","usageRequirements":{"requiredProps":["title","missionText","features"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"maxLength":180},"missionLabel":{"maxLength":35},"missionText":{"required":true,"maxLength":180},"features":{"required":true,"minItems":3,"maxItems":3},"mainImage":{"required":true},"missionBackgroundImage":{"required":true}},"mediaSlots":{"mainImage":{"path":"mainImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary about image beside the mission card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"missionBackgroundImage":{"path":"missionBackgroundImage","roles":["background","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Background photo behind the mission statement. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308377/gtnsoic5lors0w6cxl11v6qbhkrk/about-stats-showcase-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308378/v95pf96xh0ybe4zpqsbdnxfayrsj/about-stats-showcase-mobile.jpg"},"componentPath":"blocks/about/about-stats-showcase.tsx","code":"import { 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: \"https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv\",\n          alt: \"Team collaboration\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm\",\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: \"https://cdn.ing/assets/i/r/288963/4kq4loxmhh5lwc7scw7hhusu87km/ui-placeholder-logo-white-1.png\",\n          alt: \"Partner logo\",\n          name: \"Acme\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288966/0ls9to9jqnrc4gcxty9rx2c4udjv/ui-placeholder-logo-white-2.png\",\n          alt: \"Partner logo\",\n          name: \"Initech\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288971/sow5o2s8dp1cr159rxexm0yhov5w/ui-placeholder-logo-white-3.png\",\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: \"https://cdn.ing/assets/i/r/289100/qx79hnpbzbm229nfaeceafv6b3a8/cooking-citrus-and-pistachio-bundt-cake-on-rusty-t-2024-10-18-04-31-33-utc.webp\",\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":true,"maxLength":70},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":false,"maxLength":180},"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,"minItems":2,"maxItems":4,"mediaHints":{"path":"images[]","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Hero showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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":true,"minItems":2,"maxItems":4},"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,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Trusted company logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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,"maxItems":3,"mediaHints":{"path":"benefits[].testimonial.logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Logo shown inside testimonial card. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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},"benefits[].testimonial":{"type":"object","description":""}},"exampleProps":{"title":"Our Background","description":"We help teams launch reliable digital experiences at scale.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team workspace"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Planning session"}],"stats":[{"value":"21M","label":"Audience reach"},{"value":"12+","label":"Years of expertise"}],"benefits":[{"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer operations team"},"stat":{"value":"98%","label":"Retention","description":"Measured across supported accounts"}}]},"dependencies":["@opensite/ui"],"tags":["about","stats","statistics","metrics","logos","testimonials","benefits","social-proof","achievements"],"performance":{},"importantUsageNotes":"Only use when metrics, social proof, and any testimonial-style content are sourced. Do not fabricate stats, company logos, testimonial quotes, authors, or roles. Image props must use absolute image URLs and must not receive video assets.","usageRequirements":{"requiredProps":["title","stats"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"maxLength":180},"images":{"minItems":2,"maxItems":4},"stats":{"required":true,"minItems":2,"maxItems":4,"note":"Metrics must be sourced from the site or client data."},"logos":{"maxItems":8,"note":"Only include real customer or partner logos."},"benefits":{"maxItems":3},"benefits[].testimonial":{"note":"Must be a real testimonial. Do not fabricate."}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Hero showcase images. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Trusted company logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"benefits[].image":{"path":"benefits[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Benefit card image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"benefits[].testimonial.logo":{"path":"benefits[].testimonial.logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Logo shown inside testimonial card. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics","reviews_or_testimonials","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308379/wzlvobtjrj4lzajcsf2s6dng1ggw/about-company-profile-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308380/8j4thyjqbpowgxjfs90zyhe4pemt/about-company-profile-mobile.jpg"},"componentPath":"blocks/about/about-company-profile.tsx","code":"import { AboutCompanyProfile } from \"@opensite/ui/blocks/about/about-company-profile\";\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: \"https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx\",\n        alt: \"Team collaboration in modern office\",\n      }}\n      secondaryImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030\",\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":true,"maxLength":80},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":true,"maxLength":220},"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":true,"mediaHints":{"path":"mainImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary company profile image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"secondaryImage","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Secondary supporting image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"breakout.logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Breakout card logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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,"maxItems":8,"mediaHints":{"path":"companies[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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,"minItems":2,"maxItems":4},"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}},"exampleProps":{"title":"A Team Built for Operational Clarity","description":"We combine product craft and service operations experience to help brands move faster.","mainImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team strategy session"},"secondaryImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Workspace detail"},"breakout":{"title":"Built for growing operators","description":"Reusable systems keep every location and campaign aligned.","action":{"label":"Discover more","href":"/about","variant":"default"}},"achievements":[{"label":"Customer sites launched","value":"300+"},{"label":"Average satisfaction","value":"99%"}]},"dependencies":["@opensite/ui"],"tags":["about","company","profile","achievements","metrics","logos","corporate","cta","credibility"],"performance":{},"importantUsageNotes":"Use for credibility-oriented company profiles with sourced metrics and optional brand logos. Breakout actions must use the ActionConfig shape with label and href, not buttonText or buttonUrl. Image props must be image assets only.","usageRequirements":{"requiredProps":["title","description","mainImage"],"propConstraints":{"title":{"required":true,"maxLength":80},"description":{"required":true,"maxLength":220},"mainImage":{"required":true},"achievements":{"minItems":2,"maxItems":4,"note":"Achievement metrics must be sourced."},"companies":{"maxItems":8,"note":"Only include real customer or partner logos."}},"mediaSlots":{"mainImage":{"path":"mainImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary company profile image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"secondaryImage":{"path":"secondaryImage","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Secondary supporting image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"breakout.logo":{"path":"breakout.logo","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Breakout card logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."},"companies[]":{"path":"companies[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308363/0qkb7lqqam418wemo331arwda83l/about-vision-gallery-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308364/cxontsu6fhcfjpqhh7yfh4b0ro1f/about-vision-gallery-mobile.jpg"},"componentPath":"blocks/about/about-vision-gallery.tsx","code":"import { AboutVisionGallery } from \"@opensite/ui/blocks/about/about-vision-gallery\";\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: \"https://toastability-production.s3.amazonaws.com/5jsc0b4e3gxnjs81iotw2c3e6da3\",\n          alt: \"Team collaboration\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/0g6t701zqr2r7najmdgftpeqnxmz\",\n          alt: \"Modern workspace\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/u3p1hlbm2c1vvkwlm8h668pe132z\",\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":true,"maxLength":80},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"subtitle":{"type":"object","description":"Subtitle text","typeLabel":"React.ReactNode","required":false,"maxLength":160},"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},"className":{"type":"string","description":"","required":false}},"typeLabel":"GalleryImageItem"},"typeLabel":"GalleryImageItem[]","required":true,"minItems":3,"maxItems":5,"mediaHints":{"path":"images[]","roles":["gallery","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Vision gallery image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"maxLength":260},"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,"maxLength":260},"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}},"exampleProps":{"title":"The Vision Behind Our Work","subtitle":"We believe great digital systems should feel simple to run.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Collaborative product session"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team reviewing site designs"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Customer experience planning"}],"primarySectionTitle":"Our Vision","primarySectionContent":"Give every operator the ability to publish excellent customer experiences without technical bottlenecks.","secondarySectionTitle":"How We Build","secondarySectionContent":"We turn reusable components, semantic contracts, and real content into maintainable sites.","ctaTitle":"Part of Our Global Team","ctaAction":{"label":"Get to know the team","href":"/team","variant":"default"}},"dependencies":["@opensite/ui"],"tags":["about","vision","gallery","images","story","team","cta","creators","two-column"],"performance":{},"importantUsageNotes":"Use when a brand has a clear vision story and enough supporting imagery for a gallery. Keep gallery images cohesive and source-backed. Do not use logo, favicon, or video assets in the gallery image props.","usageRequirements":{"requiredProps":["title","images"],"propConstraints":{"title":{"required":true,"maxLength":80},"subtitle":{"maxLength":160},"images":{"required":true,"minItems":3,"maxItems":5},"primarySectionContent":{"maxLength":260},"secondarySectionContent":{"maxLength":260}},"mediaSlots":{"images[]":{"path":"images[]","roles":["gallery","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Vision gallery image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308383/ont62j24mpo5999ndx7l60zqd65v/about-developer-story-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308384/ybokfbcy8kcxzktkdf1mjypuzcup/about-developer-story-mobile.jpg"},"componentPath":"blocks/about/about-developer-story.tsx","code":"import { 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: \"https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05\",\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: \"https://cdn.ing/assets/i/r/288964/4xdrg1wjc2knoy58ulqijicamar3/ui-placeholder-logo-dark-1.png\",\n          alt: \"Company 1\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288965/aw0n8ithqntxtfweqrlmseqlcak7/ui-placeholder-logo-black-2.png\",\n          alt: \"Company 2\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/288972/kppvdeo8kgeweawxisqy9h9ybz6h/ui-placeholder-logo-black-3.png\",\n          alt: \"Company 3\",\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":true,"maxLength":80},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":true,"maxLength":190},"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,"maxItems":2},"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,"maxItems":8,"mediaHints":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"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,"minItems":2,"maxItems":4},"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":true,"mediaHints":{"path":"storyImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story section image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"title":"Developer-Focused Solutions for Modern Teams","description":"We build tools that developers and operators can both trust.","actions":[{"label":"Get Started","href":"/contact","variant":"default"},{"label":"View Docs","href":"/docs","variant":"outline"}],"stats":[{"value":"200+","label":"Projects completed"},{"value":"50+","label":"Integrated workflows"}],"storyTitle":"Built from the work itself","storyContent":"Our platform grew from years of solving the same operational problems for real teams.","storyImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Developer workspace"}},"dependencies":["@opensite/ui"],"tags":["about","developer","story","tech","saas","logos","stats","cta","technical"],"performance":{},"importantUsageNotes":"Use for technical about pages with real metrics and a credible product story. Actions must use ActionConfig objects. Any stats or logos must come from sourced site data, and storyImage must be an image asset only.","usageRequirements":{"requiredProps":["title","description","storyImage"],"propConstraints":{"title":{"required":true,"maxLength":80},"description":{"required":true,"maxLength":190},"actions":{"maxItems":2},"stats":{"minItems":2,"maxItems":4,"note":"Stats must be sourced."},"logos":{"maxItems":8,"note":"Only include real customer or partner logos."},"storyImage":{"required":true}},"mediaSlots":{"storyImage":{"path":"storyImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story section image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"logos[]":{"path":"logos[]","roles":["logo"],"disallowedRoles":["favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Customer or partner logo. LOGO IMAGE ONLY. Do not use photos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308353/iiktk6da0u7p4atzzncjww48m2lt/about-story-gallery-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308354/vu10h06t7a5flz94lqy5uq51irdx/about-story-gallery-mobile.jpg"},"componentPath":"blocks/about/about-story-gallery.tsx","code":"import { AboutStoryGallery } from \"@opensite/ui/blocks/about/about-story-gallery\";\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: \"https://toastability-production.s3.amazonaws.com/ehgbcugs782765ke1l2dtbtzd918\",\n          alt: \"Team collaboration session\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo\",\n          alt: \"Office celebration\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/67fnapqepn7f8vwt0x4nqho70hbz\",\n          alt: \"Modern workspace\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/t4cidbsfz3z468bn45yqdrkbx7ou\",\n          alt: \"Team workshop\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu\",\n          alt: \"Conference presentation\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9ujya2tfhxja7y5s9wb7d2u8crhd\",\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":true,"maxLength":70},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":true,"maxLength":220},"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},"className":{"type":"string","description":"","required":false}},"typeLabel":"GalleryImageItem"},"typeLabel":"GalleryImageItem[]","required":true,"minItems":3,"maxItems":5,"mediaHints":{"path":"images[]","roles":["gallery","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story gallery image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"title":"Our Story","description":"We started with a simple idea: make high-quality site operations easier for every team.","images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Early team workspace"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team collaborating on product direction"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Operations planning board"}]},"dependencies":["@opensite/ui"],"tags":["about","story","gallery","images","minimal","journey","narrative","visual"],"performance":{},"importantUsageNotes":"Use for concise origin stories with a small image gallery. Provide real, relevant gallery images with descriptive alt text. Do not use logos, favicons, or video URLs in images[].","usageRequirements":{"requiredProps":["title","description","images"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"required":true,"maxLength":220},"images":{"required":true,"minItems":3,"maxItems":5}},"mediaSlots":{"images[]":{"path":"images[]","roles":["gallery","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story gallery image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308361/8e2d7suhf0s90dti3taki9yumfsb/about-streamline-team-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308362/d3gtkb46v43cdtxujebargc6cahj/about-streamline-team-mobile.jpg"},"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\";\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: \"https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu\",\n        alt: \"Team collaboration\",\n      }}\n      secondaryImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/97gctpna2hdozl1f8u5xq4ew8h0o\",\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":true,"maxLength":70},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":true,"maxLength":180},"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":true,"mediaHints":{"path":"primaryImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary overlapping team/workflow image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"secondaryImage","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Secondary overlapping team/workflow image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"maxItems":2},"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,"minItems":2,"maxItems":4},"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}},"exampleProps":{"title":"Streamline Your Workflow","description":"Our platform helps teams work smarter without losing creative control.","primaryImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team workflow planning"},"secondaryImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Detailed product planning session"},"teamTitle":"Join the team building simpler operations","teamDescription":"We look for pragmatic builders who care about durable systems.","actions":[{"label":"View Open Roles","href":"/careers","variant":"default"}],"features":[{"icon":"lucide/zap","title":"Faster launches","description":"Ship polished pages in less time."},{"icon":"lucide/shield","title":"Reliable systems","description":"Keep content aligned as sites grow."}]},"dependencies":["@opensite/ui"],"tags":["about","streamline","team","features","workflow","icons","cta","modern","overlapping"],"performance":{},"importantUsageNotes":"Use for workflow-focused about or recruiting sections with two supporting images and a concise team CTA. The team CTA should not imply open roles unless the site has that content. Image props must be image assets only.","usageRequirements":{"requiredProps":["title","description","primaryImage"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"required":true,"maxLength":180},"primaryImage":{"required":true},"features":{"minItems":2,"maxItems":4},"actions":{"maxItems":2}},"mediaSlots":{"primaryImage":{"path":"primaryImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Primary overlapping team/workflow image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"secondaryImage":{"path":"secondaryImage","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Secondary overlapping team/workflow image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308381/ohcti1mdxr636uch5c2zd77s6x33/about-developer-profile-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308382/vqplu2k60ka2bh4s5hdacqpk29wn/about-developer-profile-mobile.jpg"},"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\";\n\nexport default function Demo() {\n  return (\n    <AboutDeveloperProfile\n      avatar={{\n        src: \"https://cdn.ing/assets/i/r/289147/mc32ysna8zk8xtyt0oizs1cqwbqt/fine-dining-restaurant-table-gourmet-dishes-red-wine.webp\",\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":true,"maxLength":60},"role":{"type":"object","description":"Developer role/title","typeLabel":"React.ReactNode","required":true,"maxLength":80},"bio":{"type":"object","description":"Developer bio/description","typeLabel":"React.ReactNode","required":true,"maxLength":260},"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":true,"mediaHints":{"path":"avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"preferredAspect":"1:1","note":"Profile portrait for the person. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"skills":{"type":"array","description":"Array of skill tags","items":{"type":"string","description":""},"required":false,"minItems":3,"maxItems":8},"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,"maxItems":4},"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,"maxItems":2},"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}},"exampleProps":{"name":"Alex Johnson","role":"Full-Stack Developer","bio":"Alex builds maintainable product systems for growing service teams.","avatar":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Alex Johnson profile portrait"},"skills":["React","TypeScript","Rails","PostgreSQL"],"skillsTitle":"Core Skills","socialLinks":[{"href":"https://github.com/opensite-ai","label":"GitHub"}],"actions":[{"label":"Contact Alex","href":"/contact","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["about","developer","profile","portfolio","skills","social","bio","personal","founder"],"performance":{},"importantUsageNotes":"Use only when the site has a real person, founder, or team member profile. Do not invent a person's name, role, bio, skills, or social links. Avatar must be a profile image, not a logo, favicon, or video URL.","usageRequirements":{"requiredProps":["name","role","bio","avatar"],"propConstraints":{"name":{"required":true,"maxLength":60},"role":{"required":true,"maxLength":80},"bio":{"required":true,"maxLength":260},"avatar":{"required":true},"skills":{"minItems":3,"maxItems":8},"socialLinks":{"maxItems":4},"actions":{"maxItems":2}},"mediaSlots":{"avatar":{"path":"avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"preferredAspect":"1:1","note":"Profile portrait for the person. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["team_members","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt\",\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: \"https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa\",\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: \"https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606\",\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: \"https://toastability-production.s3.amazonaws.com/fokd3hxzvdtsomagbfhqooyvndyv\",\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: \"https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u\",\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: \"https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t\",\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":true,"maxLength":80},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"description":{"type":"object","description":"Main description","typeLabel":"React.ReactNode","required":false,"maxLength":220},"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,"minItems":1,"maxItems":6},"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":true,"minItems":2,"maxItems":12,"mediaHints":{"path":"teamMembers[].avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"preferredAspect":"1:1","note":"Team member portrait. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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},"teamMembers[].tab":{"type":"object","description":""}},"exampleProps":{"title":"Building the Future of Site Operations","description":"We are a team of product builders, operators, and customer experience specialists.","sidebarLinks":[{"label":"Leadership","value":"leadership"},{"label":"Product","value":"product"}],"teamTitle":"Meet the Team","teamMembers":[{"name":"Sarah Chen","role":"CEO and Co-Founder","avatar":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Sarah Chen portrait"},"tab":"leadership"},{"name":"Marcus Johnson","role":"Product Lead","avatar":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Marcus Johnson portrait"},"tab":"product"}]},"dependencies":["@opensite/ui"],"tags":["about","startup","team","sidebar","navigation","saas","members","avatars","social"],"performance":{},"importantUsageNotes":"Use only when real team member data is available. Do not fabricate names, roles, avatars, or social links. Sidebar link values must match teamMembers[].tab values. Avatars must be profile images only.","usageRequirements":{"requiredProps":["title","teamMembers"],"propConstraints":{"title":{"required":true,"maxLength":80},"description":{"maxLength":220},"sidebarLinks":{"minItems":1,"maxItems":6},"teamMembers":{"required":true,"minItems":2,"maxItems":12,"note":"Must come from real team member data."},"teamMembers[].tab":{"note":"When present, must match a sidebarLinks[].value."}},"mediaSlots":{"teamMembers[].avatar":{"path":"teamMembers[].avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":true,"preferredAspect":"1:1","note":"Team member portrait. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["team_members","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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\";\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: \"https://cdn.ing/assets/i/r/289165/py905nlu0any8riaohkf5ervr3m8/gourmet-asparagus-crostini-on-white-plate-marble-table.jpg\",\n        alt: \"Team collaboration\",\n      }}\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":true,"maxLength":80},"content":{"type":"object","description":"Story content/body text","typeLabel":"React.ReactNode","required":true,"maxLength":360},"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":true,"mediaHints":{"path":"author.avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author or founder profile image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"featuredImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Optional featured story image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"title":"Our Story","content":"Every durable product starts with a clear operational problem and a team willing to solve it carefully.","author":{"name":"Jordan Mitchell","role":"Founder and CEO","avatar":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Jordan Mitchell portrait"}},"featuredImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Founder working with the team"}},"dependencies":["@opensite/ui"],"tags":["about","minimal","story","author","founder","narrative","personal","origin"],"performance":{},"importantUsageNotes":"Use for sourced founder, author, or origin stories. Do not invent author identity or biographical details. Author avatars and featured images must use absolute image URLs and must not be logos, favicons, or video assets.","usageRequirements":{"requiredProps":["title","content","author"],"propConstraints":{"title":{"required":true,"maxLength":80},"content":{"required":true,"maxLength":360},"author":{"required":true,"note":"Author identity must be source-backed."}},"mediaSlots":{"author.avatar":{"path":"author.avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"preferredAspect":"1:1","note":"Author or founder profile image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"featuredImage":{"path":"featuredImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Optional featured story image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["team_members","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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\";\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: \"https://toastability-production.s3.amazonaws.com/xwh1zzxgyd887thfm1j9lu9qnd6c\",\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":true,"maxLength":80},"subtitle":{"type":"object","description":"Subtitle/tagline text","typeLabel":"React.ReactNode","required":false,"maxLength":120},"content":{"type":"object","description":"Main content/body text","typeLabel":"React.ReactNode","required":true,"maxLength":320},"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":true,"mediaHints":{"path":"heroImage","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Large story hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"title":"Our Story","subtitle":"Building the future, one practical system at a time","content":"We started with a bold idea: customer-facing sites should be easier to operate after launch.","heroImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team collaborating in a workspace"},"teamInfo":{"title":"50+ Team Members","description":"Working across product, support, and customer operations"}},"dependencies":["@opensite/ui"],"tags":["about","story","hero","image","narrative","team","visual","impact"],"performance":{},"importantUsageNotes":"Use for about-page hero storytelling with a real image and source-backed team information. Do not fabricate team size or geographic claims. heroImage must be an image asset only.","usageRequirements":{"requiredProps":["title","content","heroImage"],"propConstraints":{"title":{"required":true,"maxLength":80},"subtitle":{"maxLength":120},"content":{"required":true,"maxLength":320},"heroImage":{"required":true},"teamInfo":{"note":"Team facts must be source-backed if provided."}},"mediaSlots":{"heroImage":{"path":"heroImage","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Large story hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["team_members","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308359/544ge3aeqk84yy7uem3hoxnq07id/about-stats-sidebar-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308360/l3bwen6665y1y6ezcolbgvyke6cc/about-stats-sidebar-mobile.jpg"},"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":true,"maxLength":70},"description":{"type":"object","description":"Main description text","typeLabel":"React.ReactNode","required":false,"maxLength":180},"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":true,"minItems":2,"maxItems":6},"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,"minItems":2,"maxItems":4},"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}},"exampleProps":{"title":"Why Choose Us","description":"We have built a platform that scales with your operational needs.","stats":[{"icon":"lucide/users","value":"10M+","label":"Visitors supported"},{"icon":"lucide/globe","value":"150+","label":"Markets served"}],"features":[{"icon":"lucide/zap","title":"Fast launch cycles","description":"Teams publish updates without waiting on engineering."},{"icon":"lucide/lock","title":"Managed consistency","description":"Shared blocks keep every page aligned."}]},"dependencies":["@opensite/ui"],"tags":["about","stats","sidebar","metrics","features","icons","sticky","organized"],"performance":{},"importantUsageNotes":"Use only when stats are real and source-backed. Do not invent large numbers, geographic reach, or performance claims. Feature cards should explain the metrics rather than introduce unrelated benefits.","usageRequirements":{"requiredProps":["title","stats"],"propConstraints":{"title":{"required":true,"maxLength":70},"description":{"maxLength":180},"stats":{"required":true,"minItems":2,"maxItems":6,"note":"Stats must be sourced."},"features":{"minItems":2,"maxItems":4}},"mediaSlots":{},"requiresSiteCapabilities":["stats_or_metrics"],"notes":["Do not fabricate metrics or quantified claims."]}},{"id":"about-interactive-tabs","name":"About Interactive Tabs","title":"About Interactive Tabs","category":"About","categorySlug":"about","description":"An interactive about section with tabbed navigation, dynamic content switching, and optional images per tab. Ideal for showcasing multiple aspects of a company (work, process, values) in an engaging, space-efficient format.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/308385/egaoiss1gk8rae2ap2utvcwd7w0d/about-interactive-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308386/5c0h9bo4hihi32oi0qdampjla2j4/about-interactive-tabs-mobile.jpg"},"componentPath":"blocks/about/about-interactive-tabs.tsx","code":"import { AboutInteractiveTabs } from \"@opensite/ui/blocks/about/about-interactive-tabs\";\n\nexport default function Demo() {\n  return (\n    <AboutInteractiveTabs\n      title=\"How We Deliver Results\"\n      subtitle=\"Our proven methodology combines strategic thinking with hands-on execution to transform your vision into reality.\"\n      tabs={[\n        {\n          id: \"discover\",\n          label: \"Discover\",\n          content: {\n            title: \"Understanding Your Vision\",\n            description:\n              \"We begin by deeply understanding your business, goals, and challenges. Through stakeholder interviews, market research, and competitive analysis, we uncover insights that inform every decision.\",\n            image: {\n              src: \"https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc\",\n              alt: \"Discovery phase workshop\",\n            },\n          },\n        },\n        {\n          id: \"design\",\n          label: \"Design\",\n          content: {\n            title: \"Crafting the Solution\",\n            description:\n              \"Armed with insights, we craft solutions that balance aesthetics with functionality. Our iterative design process ensures every element serves a purpose and resonates with your audience.\",\n            image: {\n              src: \"https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75\",\n              alt: \"Design process\",\n            },\n          },\n        },\n        {\n          id: \"develop\",\n          label: \"Develop\",\n          content: {\n            title: \"Building with Excellence\",\n            description:\n              \"Our engineering team brings designs to life using modern technologies and best practices. We prioritize performance, accessibility, and maintainability in every line of code.\",\n            image: {\n              src: \"https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo\",\n              alt: \"Development phase\",\n            },\n          },\n        },\n        {\n          id: \"deliver\",\n          label: \"Deliver\",\n          content: {\n            title: \"Launching Your Success\",\n            description:\n              \"Launch is just the beginning. We ensure smooth deployment, provide comprehensive training, and offer ongoing support to maximize the impact of your investment.\",\n            image: {\n              src: \"https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55\",\n              alt: \"Project delivery\",\n            },\n          },\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.9}\n      background=\"gray\"\n    />\n  );\n}","propsSchema":{"title":{"type":"object","description":"Main heading/title","typeLabel":"React.ReactNode","required":true,"maxLength":70},"subtitle":{"type":"object","description":"Subtitle/description text","typeLabel":"React.ReactNode","required":false,"maxLength":150},"tabs":{"type":"array","description":"Array of tab configurations","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"","required":true},"title":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false},"links":{"type":"array","description":"","items":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":false},"url":{"type":"string","description":"","required":true},"icon":{"type":"object","description":"","fields":{},"typeLabel":"DynamicIconName","required":false}},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }"},"typeLabel":"{ title: string; description?: string; url: string; icon?: DynamicIconName; }[]","required":true},"featured":{"type":"object","description":"","fields":{"title":{"type":"string","description":"","required":true},"description":{"type":"string","description":"","required":true},"url":{"type":"string","description":"","required":true},"image":{"type":"string","description":"","required":true}},"typeLabel":"{ title: string; description: string; url: string; image: string; }","required":false}},"typeLabel":"TabItem"},"typeLabel":"TabItem[]","required":true,"minItems":2,"maxItems":5,"mediaHints":{"path":"tabs[].content.image","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Tab content image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"tabsSlot":{"type":"object","description":"Custom slot for rendering tabs (overrides tabs array)","typeLabel":"React.ReactNode","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"headerClassName":{"type":"string","description":"Additional CSS classes for the header wrapper","required":false},"titleClassName":{"type":"string","description":"Additional CSS classes for the title","required":false},"subtitleClassName":{"type":"string","description":"Additional CSS classes for the subtitle","required":false},"tabsContainerClassName":{"type":"string","description":"Additional CSS classes for the tabs container","required":false},"tabButtonClassName":{"type":"string","description":"Additional CSS classes for the tab buttons","required":false},"activeTabClassName":{"type":"string","description":"Additional CSS classes for the active tab button","required":false},"tabContentClassName":{"type":"string","description":"Additional CSS classes for the tab content","required":false},"tabContentTitleClassName":{"type":"string","description":"Additional CSS classes for the tab content title","required":false},"tabContentDescriptionClassName":{"type":"string","description":"Additional CSS classes for the tab content description","required":false},"tabContentImageClassName":{"type":"string","description":"Additional CSS classes for the tab content image","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Section background variant","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Section spacing variant","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Pattern background key or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern opacity (0-1)","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false},"tabs[].id":{"type":"object","description":"","required":true},"tabs[].content.title":{"type":"object","description":"","required":true,"maxLength":80},"tabs[].content.description":{"type":"object","description":"","required":true,"maxLength":220}},"exampleProps":{"title":"Discover Our Story","subtitle":"Learn more about how we work and what we value.","tabs":[{"id":"work","label":"Our Work","content":{"title":"Crafting Digital Experiences","description":"We create maintainable, high-performing customer experiences.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team reviewing digital experience work"}}},{"id":"process","label":"Our Process","content":{"title":"Built Around Real Operations","description":"Every workflow starts from the way teams already work.","image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team process planning session"}}}]},"dependencies":["@opensite/ui"],"tags":["about","interactive","tabs","navigation","dynamic","work","process","values"],"performance":{},"importantUsageNotes":"Use for two to five distinct company aspects such as work, process, values, or culture. Each tab id must be unique and stable. Tab images must be image assets only and should match the tab content.","usageRequirements":{"requiredProps":["title","tabs"],"propConstraints":{"title":{"required":true,"maxLength":70},"subtitle":{"maxLength":150},"tabs":{"required":true,"minItems":2,"maxItems":5},"tabs[].id":{"required":true,"note":"Must be unique within the tabs array."},"tabs[].content.title":{"required":true,"maxLength":80},"tabs[].content.description":{"required":true,"maxLength":220}},"mediaSlots":{"tabs[].content.image":{"path":"tabs[].content.image","roles":["feature","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Tab content image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308389/9oq326qg42j5zkulegwzmzwo96z5/about-mission-dual-image-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308390/iy45mua9rkuxdnvjlnb6b9togzh3/about-mission-dual-image-mobile.jpg"},"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\";\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: \"https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy\",\n        alt: \"Team collaboration\",\n      }}\n      secondaryImage={{\n        src: \"https://toastability-production.s3.amazonaws.com/4xjcgtlwseruezhoh3o1ga4umhj4\",\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":true,"maxLength":70},"missionContent":{"type":"object","description":"Mission section content","typeLabel":"React.ReactNode","required":true,"maxLength":240},"visionTitle":{"type":"object","description":"Vision section title","typeLabel":"React.ReactNode","required":true,"maxLength":70},"visionContent":{"type":"object","description":"Vision section content","typeLabel":"React.ReactNode","required":true,"maxLength":240},"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,"mediaHints":{"path":"primaryImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Primary mission/vision image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"mediaHints":{"path":"secondaryImage","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Secondary mission/vision image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"maxItems":2},"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}},"exampleProps":{"missionTitle":"Our Mission","missionContent":"To make professional digital operations easier for every growing team.","visionTitle":"Our Vision","visionContent":"A world where every business can keep its customer experience current.","primaryImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team mission planning"},"secondaryImage":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Product workshop"},"actions":[{"label":"Join Our Journey","href":"/careers","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["about","mission","vision","dual-image","cta","offset","two-column","visual"],"performance":{},"importantUsageNotes":"Use when both mission and vision copy are available. Avoid vague mission statements; keep each content block specific. primaryImage and secondaryImage must be image assets only.","usageRequirements":{"requiredProps":["missionTitle","missionContent","visionTitle","visionContent"],"propConstraints":{"missionTitle":{"required":true,"maxLength":70},"missionContent":{"required":true,"maxLength":240},"visionTitle":{"required":true,"maxLength":70},"visionContent":{"required":true,"maxLength":240},"actions":{"maxItems":2}},"mediaSlots":{"primaryImage":{"path":"primaryImage","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":false,"note":"Primary mission/vision image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"secondaryImage":{"path":"secondaryImage","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Secondary mission/vision image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308357/w56nctaun1ky9t7fsq13lig8zlao/about-story-expertise-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308358/lrtkx51j38uavp42pslzvl7k75e7/about-story-expertise-mobile.jpg"},"componentPath":"blocks/about/about-story-expertise.tsx","code":"import { AboutStoryExpertise } from \"@opensite/ui/blocks/about/about-story-expertise\";\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: \"https://cdn.ing/assets/i/r/289137/aud3lp0mpweq0wdoke6vnxy3a5l7/nightlife-bar-friends-holding-martinis-celebration.jpg\",\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,"maxLength":40},"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":true,"maxLength":90},"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":true,"minItems":2,"maxItems":3},"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,"maxItems":2},"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":true,"mediaHints":{"path":"image","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story and expertise image card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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,"minItems":2,"maxItems":4},"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}},"exampleProps":{"eyebrow":"About Our Practice","heading":"We turn operating complexity into clear digital systems.","storyParagraphs":["Our team works where brand, operations, and customer experience meet.","Every engagement starts with the source material that makes a business distinct."],"actions":[{"label":"Start a Project","href":"/contact","variant":"default"},{"label":"See Our Work","href":"/work","variant":"outline"}],"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team reviewing customer experience systems"},"highlight":{"label":"Trusted process","title":"Built around source-backed content","description":"Contracts keep generated pages accurate."},"expertiseAreas":[{"title":"Content systems","description":"Reusable structures for every page."},{"title":"AI workflows","description":"Guided generation with clear guardrails."}]},"dependencies":["@opensite/ui"],"tags":["about","story","expertise","narrative","cta","image","highlight","grid","trust","capabilities"],"performance":{},"importantUsageNotes":"Use for trust-building story sections that combine narrative, a single supporting image, and capability tiles. Do not fabricate capabilities the business does not offer. The image prop must be an image asset only.","usageRequirements":{"requiredProps":["heading","storyParagraphs","image"],"propConstraints":{"eyebrow":{"maxLength":40},"heading":{"required":true,"maxLength":90},"storyParagraphs":{"required":true,"minItems":2,"maxItems":3},"actions":{"maxItems":2},"image":{"required":true},"expertiseAreas":{"minItems":2,"maxItems":4}},"mediaSlots":{"image":{"path":"image","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Story and expertise image card. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308393/za4t9ltmdgzumlsxgv12a45hhdeh/about-network-spotlight-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308394/yqmm3hlsfkryjt0zkpnk5orx2w09/about-network-spotlight-mobile.jpg"},"componentPath":"blocks/about/about-network-spotlight.tsx","code":"import { AboutNetworkSpotlight } from \"@opensite/ui/blocks/about/about-network-spotlight\";\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: \"https://cdn.ing/assets/i/r/289168/75lrz1yf8iarvpr4jgmco0fi3j9t/fine-dining-restaurant-dinner-with-gourmet-dishes-on-wood-table.jpg\",\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,"maxLength":40},"heading":{"type":"object","description":"Main heading text","typeLabel":"React.ReactNode","required":true,"maxLength":90},"description":{"type":"object","description":"Supporting description text","typeLabel":"React.ReactNode","required":true,"maxLength":220},"highlights":{"type":"array","description":"Highlight bullet list","items":{"type":"object","description":"","typeLabel":"React.ReactNode"},"typeLabel":"React.ReactNode[]","required":false,"minItems":2,"maxItems":4},"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,"maxItems":2},"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":true,"mediaHints":{"path":"image","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Network spotlight image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"eyebrow":"Partner Network","heading":"A practical network for teams building better customer experiences.","description":"We work with operators, designers, and implementation partners who care about durable systems.","highlights":["Shared delivery standards across every project","Practical support for ongoing site operations","Source-backed content and measurable outcomes"],"actions":[{"label":"Become a Partner","href":"/partners","variant":"default"},{"label":"Explore the Network","href":"/network","variant":"outline"}],"image":{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Partner team workshop"},"spotlightCard":{"icon":"lucide/network","label":"Partner reach","title":"Built for collaboration","description":"A shared system keeps every project aligned."}},"dependencies":["@opensite/ui"],"tags":["about","network","partners","spotlight","dark","image","highlights","cta","alliances","community"],"performance":{},"importantUsageNotes":"Use for partner, alliance, or community program spotlights with clear source-backed claims. Avoid implying a partner network exists unless the business has one. The image prop must be an image asset only.","usageRequirements":{"requiredProps":["heading","description","image"],"propConstraints":{"eyebrow":{"maxLength":40},"heading":{"required":true,"maxLength":90},"description":{"required":true,"maxLength":220},"highlights":{"minItems":2,"maxItems":4},"actions":{"maxItems":2},"image":{"required":true}},"mediaSlots":{"image":{"path":"image","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Network spotlight image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308387/nqmp49jfi0vmsvz9vavwxtdcpxxn/about-location-info-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308388/h9mpi4tx7m3hrg1dw0ypw6b1z9m9/about-location-info-hero-mobile.jpg"},"componentPath":"blocks/about/about-location-info-hero.tsx","code":"import { AboutLocationInfoHero } from \"@opensite/ui/blocks/about/about-location-info-hero\";\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: \"https://cdn.ing/assets/i/r/289138/tlbtkr13i2nwu7kx80t5bnf9qwgg/manual-meat-slicer-on-wooden-counter-charcuterie-station.jpg\",\n          alt: \"Office exterior\",\n        },\n        {\n          src: \"https://cdn.ing/assets/i/r/289144/9thob27iku9i72elwvz5j03z6482/glamorous-nightlife-portrait-woman-burgundy-dress-upscale-bar.jpg\",\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":true,"maxLength":80},"headlineClassName":{"type":"string","description":"Additional CSS classes for the headline","required":false},"address":{"type":"object","description":"Address text","typeLabel":"React.ReactNode","required":true},"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":true},"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,"maxItems":2},"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":true,"minItems":1,"maxItems":4},"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":true,"minItems":1,"maxItems":2,"mediaHints":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Location showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"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}},"exampleProps":{"headline":"Visit Our Flagship Workspace","address":"123 Market Street, Phoenix, AZ","addressHref":"https://maps.google.com/?q=123+Market+Street+Phoenix+AZ","phone":"(555) 014-8821","phoneHref":"tel:+15550148821","actions":[{"label":"Get Directions","href":"/locations","variant":"default"}],"hoursSections":[{"label":"Weekdays","hours":[{"day":"Mon-Fri","time":"9:00 AM - 6:00 PM"}]},{"label":"Weekend","hours":[{"day":"Sat","time":"10:00 AM - 2:00 PM"}]}],"images":[{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Flagship workspace interior"},{"src":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","alt":"Team meeting area"}]},"dependencies":["@opensite/ui"],"tags":["about","location","contact","hours","hero","images","service-center","address","phone","cta"],"performance":{},"importantUsageNotes":"Use only when contact details, hours, and location facts are source-backed. Do not fabricate addresses, phone numbers, or business hours. images[] must contain image assets only, never logos, favicons, or videos.","usageRequirements":{"requiredProps":["headline","address","phone","hoursSections","images"],"propConstraints":{"headline":{"required":true,"maxLength":80},"address":{"required":true,"note":"Must be source-backed contact information."},"phone":{"required":true,"note":"Must be source-backed contact information."},"hoursSections":{"required":true,"minItems":1,"maxItems":4},"images":{"required":true,"minItems":1,"maxItems":2},"actions":{"maxItems":2}},"mediaSlots":{"images[]":{"path":"images[]","roles":["feature","hero"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Location showcase image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["locations","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Location and hours data must be sourced."]}},{"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/308371/19ro2prdvrjhcwr1kco04stp3te0/about-split-hero-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308372/5z40ed3k4y7j9bhm74q7jbnr5hqv/about-split-hero-mobile.jpg"},"componentPath":"blocks/about/about-split-hero.tsx","code":"import { AboutSplitHero } from \"@opensite/ui/blocks/about/about-split-hero\";\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={\"https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls\"}\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$1.ReactNode","required":false,"maxLength":30},"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$1.ReactNode","required":false,"maxLength":20},"brandHighlightClassName":{"type":"string","description":"Additional CSS classes for the brand highlight","required":false},"heading":{"type":"object","description":"Main heading text","typeLabel":"React$1.ReactNode","required":true,"maxLength":70},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"description":{"type":"object","description":"Supporting description text","typeLabel":"React$1.ReactNode","required":true,"maxLength":180},"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$1.ReactNode","required":false},"ctaClassName":{"type":"string","description":"Additional CSS classes for the CTA","required":false},"imageSrc":{"type":"string","description":"Image source URL","required":true,"mediaHints":{"path":"imageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Split hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"imageAlt":{"type":"string","description":"Image alt text","required":true,"maxLength":120},"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}},"exampleProps":{"brandText":"Business","brandHighlight":"PRO","heading":"Achieve More with Elite Access","description":"Give your team a polished about experience with clear positioning and a strong visual.","ctaAction":{"label":"Upgrade to premium","href":"/upgrade","variant":"default"},"imageSrc":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","imageAlt":"Premium team workspace"},"dependencies":["@opensite/ui"],"tags":["about","hero","split","dark-theme","premium","upgrade","cta","brand","landing"],"performance":{},"importantUsageNotes":"Use for premium, launch, or upgrade-oriented about hero sections. Use ctaAction, not ctaText or ctaUrl. imageSrc must be an absolute image URL and must not be a logo, favicon, or video asset.","usageRequirements":{"requiredProps":["heading","description","imageSrc"],"propConstraints":{"brandText":{"maxLength":30},"brandHighlight":{"maxLength":20},"heading":{"required":true,"maxLength":70},"description":{"required":true,"maxLength":180},"ctaAction":{"note":"Use ActionConfig with label and href."},"imageSrc":{"required":true},"imageAlt":{"required":true,"maxLength":120}},"mediaSlots":{"imageSrc":{"path":"imageSrc","roles":["hero","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Split hero image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed."]}},{"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/308370/bhqt1p036xodjq86tls2eub846y3/about-mission-principles-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308369/gxalcxyogbfomx2ejv8qm0c2xuq2/about-mission-principles-mobile.jpg"},"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$1.ReactNode","required":false,"maxLength":35},"badgeClassName":{"type":"string","description":"Additional CSS classes for the badge","required":false},"missionHeading":{"type":"object","description":"Main mission statement heading","typeLabel":"React$1.ReactNode","required":true,"maxLength":80},"missionHeadingClassName":{"type":"string","description":"Additional CSS classes for the mission heading","required":false},"missionDescription":{"type":"object","description":"Mission description text","typeLabel":"React$1.ReactNode","required":true,"maxLength":240},"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$1.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$1.ReactNode","required":false},"title":{"type":"object","description":"Principle title","typeLabel":"React$1.ReactNode","required":false},"description":{"type":"object","description":"Principle description","typeLabel":"React$1.ReactNode","required":false}},"typeLabel":"AboutMissionPrincipleItem"},"typeLabel":"AboutMissionPrincipleItem[]","required":true,"minItems":2,"maxItems":4},"principlesSlot":{"type":"object","description":"Custom slot for rendering principles (overrides principles array)","typeLabel":"React$1.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$1.ReactNode","required":false,"maxLength":80},"visionHeadingClassName":{"type":"string","description":"Additional CSS classes for the vision heading","required":false},"visionDescription":{"type":"object","description":"Vision section description","typeLabel":"React$1.ReactNode","required":false,"maxLength":220},"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$1.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}},"exampleProps":{"badgeText":"Our Mission","missionHeading":"To empower teams through practical technology","missionDescription":"We believe digital systems should make daily operations clearer, not more complicated.","missionAction":{"label":"Learn More","href":"/about","variant":"default"},"principles":[{"number":"01","title":"Customer-Centric","description":"Start from the real work customers need to complete."},{"number":"02","title":"Durable Systems","description":"Build patterns that stay maintainable as teams grow."}],"visionHeading":"Our Vision","visionDescription":"A world where every team can keep its digital presence current.","visionAction":{"label":"Join Us","href":"/careers","variant":"outline"}},"dependencies":["@opensite/ui"],"tags":["about","mission","principles","values","vision","company","culture","numbered","cards"],"performance":{},"importantUsageNotes":"Use for mission, values, and vision content that the business can support with real messaging. Do not invent principles that contradict the brand. Keep principle cards concise and numbered.","usageRequirements":{"requiredProps":["missionHeading","missionDescription","principles"],"propConstraints":{"badgeText":{"maxLength":35},"missionHeading":{"required":true,"maxLength":80},"missionDescription":{"required":true,"maxLength":240},"principles":{"required":true,"minItems":2,"maxItems":4},"visionHeading":{"maxLength":80},"visionDescription":{"maxLength":220}},"mediaSlots":{},"requiresSiteCapabilities":[],"notes":["Mission and principle copy should come from brand source material."]}},{"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/308367/hcsgg4fmzci5e4b9lkcy1p598n5f/about-expandable-values-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308368/inl3ocfpq5hqm29gf669kngfeals/about-expandable-values-mobile.jpg"},"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$1.ReactNode","required":false,"maxLength":35},"heading":{"type":"object","description":"Main heading text","typeLabel":"React$1.ReactNode","required":true,"maxLength":80},"description":{"type":"object","description":"Supporting description text","typeLabel":"React$1.ReactNode","required":false,"maxLength":200},"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$1.ReactNode","required":false},"title":{"type":"object","description":"Value title","typeLabel":"React$1.ReactNode","required":false},"shortDescription":{"type":"object","description":"Short description shown when collapsed","typeLabel":"React$1.ReactNode","required":false},"longDescription":{"type":"object","description":"Long description shown when expanded","typeLabel":"React$1.ReactNode","required":false},"examples":{"type":"array","description":"Examples of how the value is practiced","items":{"type":"object","description":"","typeLabel":"React$1.ReactNode"},"typeLabel":"React$1.ReactNode[]","required":false}},"typeLabel":"AboutExpandableValueItem"},"typeLabel":"AboutExpandableValueItem[]","required":true,"minItems":2,"maxItems":6},"valuesSlot":{"type":"object","description":"Custom slot for rendering values (overrides values array)","typeLabel":"React$1.ReactNode","required":false},"ctaHeading":{"type":"object","description":"Bottom CTA heading","typeLabel":"React$1.ReactNode","required":false},"ctaDescription":{"type":"object","description":"Bottom CTA description","typeLabel":"React$1.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,"maxItems":2},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React$1.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},"values[].id":{"type":"object","description":"","required":true},"values[].shortDescription":{"type":"object","description":"","maxLength":90},"values[].longDescription":{"type":"object","description":"","maxLength":260},"values[].examples":{"type":"object","description":"","maxItems":4}},"exampleProps":{"badgeText":"Our Core Values","heading":"The Principles That Guide Us","description":"These values shape how we build, support, and improve every customer experience.","values":[{"id":"integrity","icon":"lucide/shield","title":"Integrity","shortDescription":"Do the right work the right way.","longDescription":"We make decisions that stay clear when the site grows and the team changes.","examples":["Transparent tradeoffs","Source-backed claims"]},{"id":"momentum","icon":"lucide/zap","title":"Momentum","shortDescription":"Move quickly without losing quality.","longDescription":"We prefer reusable systems that make every future update easier.","examples":["Reusable blocks","Fast publishing workflows"]}],"ctaHeading":"Build With These Values","ctaDescription":"Turn brand principles into a maintainable digital experience.","actions":[{"label":"Start a Project","href":"/contact","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["about","values","expandable","interactive","cards","culture","brand","icons","accordion"],"performance":{},"importantUsageNotes":"Use for source-backed company values with enough detail for expandable cards. Do not invent values or examples. Each value id must be unique and stable.","usageRequirements":{"requiredProps":["heading","values"],"propConstraints":{"badgeText":{"maxLength":35},"heading":{"required":true,"maxLength":80},"description":{"maxLength":200},"values":{"required":true,"minItems":2,"maxItems":6},"values[].id":{"required":true,"note":"Must be unique within the values array."},"values[].shortDescription":{"maxLength":90},"values[].longDescription":{"maxLength":260},"values[].examples":{"maxItems":4},"actions":{"maxItems":2}},"mediaSlots":{},"requiresSiteCapabilities":[],"notes":["Values and examples should come from brand source material."]}},{"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/308373/pxv6e1cs5hbzn2gqd1v3dzrr7roj/community-initiatives-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308374/tds4xfyyacdt80xj5u2yyxaga00g/community-initiatives-mobile.jpg"},"componentPath":"blocks/about/community-initiatives.tsx","code":"import { CommunityInitiatives } from \"@opensite/ui/blocks/about/community-initiatives\";\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: \"https://toastability-production.s3.amazonaws.com/ri0dqx79spe6771np76mkmno5xfd\",\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: \"https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a\",\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: \"https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo\",\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: \"https://cdn.ing/assets/i/r/289134/pq7xx1m5piaai94v56e8kpt5rc7m/luxury-champagne-wall-with-ambient-sconce-lighting.jpg\",\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: \"https://cdn.ing/assets/i/r/289135/r0s7nf2ywu133hpy6hcbt74i8htg/espresso-martini-served-at-moody-bar-with-coffee-beans.jpg\",\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: \"https://cdn.ing/assets/i/r/289136/47lmzyqgma1ovg3oxw37x38oyx08/bartender-shaking-cocktail-in-lively-night-bar.jpg\",\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$1.ReactNode","required":false,"maxLength":35},"heading":{"type":"object","description":"Main heading text","typeLabel":"React$1.ReactNode","required":true,"maxLength":90},"description":{"type":"object","description":"Supporting description text","typeLabel":"React$1.ReactNode","required":false,"maxLength":220},"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":true,"minItems":1,"maxItems":5,"mediaHints":{"path":"categories[].initiatives[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Community initiative image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"categoriesSlot":{"type":"object","description":"Custom slot for rendering categories (overrides categories array)","typeLabel":"React$1.ReactNode","required":false},"ctaBadgeText":{"type":"object","description":"CTA badge text","typeLabel":"React$1.ReactNode","required":false},"ctaHeading":{"type":"object","description":"CTA heading","typeLabel":"React$1.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA description","typeLabel":"React$1.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,"maxItems":2},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React$1.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},"categories[].initiatives":{"type":"object","description":"","required":true,"minItems":1,"maxItems":6},"categories[].initiatives[].metrics":{"type":"object","description":""}},"exampleProps":{"badgeText":"Community Impact","heading":"Supporting the Communities We Serve","description":"Our programs connect practical service with measurable local outcomes.","categories":[{"id":"food-drive","title":"Food Drive","description":"Supporting local families through coordinated food donations.","initiatives":[{"id":"monthly-pantry","title":"Monthly Pantry Support","description":"A recurring program with neighborhood partners.","icon":"lucide/heart-handshake","metrics":[{"value":"2,400","label":"Meals donated"}],"image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}]}],"ctaHeading":"Partner With Us","ctaDescription":"Help expand practical community programs in your area.","actions":[{"label":"Get Involved","href":"/community","variant":"default"}]},"dependencies":["@opensite/ui"],"tags":["about","community","impact","initiatives","metrics","tabs","corporate","responsibility"],"performance":{},"importantUsageNotes":"Use only when community program details and impact metrics are sourced. Do not fabricate initiatives, donation totals, partner names, or impact claims. Initiative images must be image assets only.","usageRequirements":{"requiredProps":["heading","categories"],"propConstraints":{"badgeText":{"maxLength":35},"heading":{"required":true,"maxLength":90},"description":{"maxLength":220},"categories":{"required":true,"minItems":1,"maxItems":5},"categories[].initiatives":{"required":true,"minItems":1,"maxItems":6},"categories[].initiatives[].metrics":{"note":"Metrics must be sourced."},"actions":{"maxItems":2}},"mediaSlots":{"categories[].initiatives[].image":{"path":"categories[].initiatives[].image","roles":["feature","thumbnail"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"medium","required":false,"note":"Community initiative image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["stats_or_metrics","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Community impact claims must be sourced."]}},{"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/308365/87n8jilvgo0en0v60ccsr48knlpr/about-culture-tabs-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308366/5bfuudkc8aetixgylx4zghrsv83y/about-culture-tabs-mobile.jpg"},"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\";\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            \"https://cdn.ing/assets/i/r/289148/0p9g9lcxh9z50zhqww4athwg17bf/moody-orange-cocktail-in-coupe-glass-on-bar.jpg\",\n            \"https://cdn.ing/assets/i/r/289153/yyyv41a4zc9mqdgqak2uj1jdjtk0/floral-mint-highball-craft-cocktail-on-wood-table.jpg\",\n            \"https://cdn.ing/assets/i/r/289156/eiiflor2urddvyvqmhsbshoocown/dessert-buffet-with-cannoli-and-mini-cakes-at-event.jpg\",\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: \"https://cdn.ing/assets/i/r/289157/dnsv4fjvfyeb5hld0i4453dlyo3c/glamorous-nightlife-cocktail-bar-woman-in-red-dress.jpg\",\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            \"https://cdn.ing/assets/i/r/289158/25j3kgsuxqvsf8cyje4y8k77dab9/fine-dining-toast-champagne-espresso-martini-seafood.jpg\",\n            \"https://cdn.ing/assets/i/r/289161/7d2g6j0fhr1ax52x9swh2ecpu36p/medium-rare-filet-mignon-with-puree-and-red-wine.jpg\",\n            \"https://cdn.ing/assets/i/r/289151/19d77cto4oilyslwmdmuzvz36z4o/espresso-martini-pour-with-lemon-twist-on-dark-bar.jpg\",\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: \"https://cdn.ing/assets/i/r/289162/cyr8leumd42jk0nyr6r9x88et6eh/friends-dining-at-upscale-restaurant-toasting-with-wine.jpg\",\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            \"https://cdn.ing/assets/i/r/289163/kp4y1qm41q0exs2gxxkfhwxn148p/espresso-martini-toast-over-fine-dining-dinner.jpg\",\n            \"https://cdn.ing/assets/i/r/289164/idrizzwl1rlzsehg511r85x6nns1/fine-dining-restaurant-dinner-spread-with-cocktails.jpg\",\n            \"https://cdn.ing/assets/i/r/289165/py905nlu0any8riaohkf5ervr3m8/gourmet-asparagus-crostini-on-white-plate-marble-table.jpg\",\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: \"https://cdn.ing/assets/i/r/289166/88ie4k1t0zz68q81nsiyymgylylw/wedge-salad-iceberg-with-creamy-dressing-and-chives.jpg\",\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            \"https://cdn.ing/assets/i/r/289168/75lrz1yf8iarvpr4jgmco0fi3j9t/fine-dining-restaurant-dinner-with-gourmet-dishes-on-wood-table.jpg\",\n            \"https://cdn.ing/assets/i/r/289152/z4y87dyrnmglfxj4k4waw532u1mh/moody-whiskey-cocktail-with-cinnamon-dust-on-ice.jpg\",\n            \"https://cdn.ing/assets/i/r/289148/0p9g9lcxh9z50zhqww4athwg17bf/moody-orange-cocktail-in-coupe-glass-on-bar.jpg\",\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: \"https://cdn.ing/assets/i/r/289153/yyyv41a4zc9mqdgqak2uj1jdjtk0/floral-mint-highball-craft-cocktail-on-wood-table.jpg\",\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        \"https://cdn.ing/assets/i/r/289156/eiiflor2urddvyvqmhsbshoocown/dessert-buffet-with-cannoli-and-mini-cakes-at-event.jpg\",\n        \"https://cdn.ing/assets/i/r/289157/dnsv4fjvfyeb5hld0i4453dlyo3c/glamorous-nightlife-cocktail-bar-woman-in-red-dress.jpg\",\n        \"https://cdn.ing/assets/i/r/289158/25j3kgsuxqvsf8cyje4y8k77dab9/fine-dining-toast-champagne-espresso-martini-seafood.jpg\",\n        \"https://cdn.ing/assets/i/r/289161/7d2g6j0fhr1ax52x9swh2ecpu36p/medium-rare-filet-mignon-with-puree-and-red-wine.jpg\",\n        \"https://cdn.ing/assets/i/r/289163/kp4y1qm41q0exs2gxxkfhwxn148p/espresso-martini-toast-over-fine-dining-dinner.jpg\",\n        \"https://cdn.ing/assets/i/r/289164/idrizzwl1rlzsehg511r85x6nns1/fine-dining-restaurant-dinner-spread-with-cocktails.jpg\",\n      ]}\n      background=\"dark\"\n      pattern=\"dashedGridFadeTopRight\"\n      patternOpacity={0.15}\n    />\n  );\n}","propsSchema":{"badgeText":{"type":"object","description":"Badge/label text","typeLabel":"React$1.ReactNode","required":false,"maxLength":35},"heading":{"type":"object","description":"Main heading text","typeLabel":"React$1.ReactNode","required":true,"maxLength":90},"description":{"type":"object","description":"Supporting description text","typeLabel":"React$1.ReactNode","required":false,"maxLength":220},"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":true,"minItems":2,"maxItems":5,"mediaHints":{"path":"aspects[].testimonial.avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":true,"preferredAspect":"1:1","note":"Culture testimonial author avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"aspectsSlot":{"type":"object","description":"Custom slot for rendering aspects (overrides aspects array)","typeLabel":"React$1.ReactNode","required":false},"ctaHeading":{"type":"object","description":"CTA heading","typeLabel":"React$1.ReactNode","required":false},"ctaDescription":{"type":"object","description":"CTA description","typeLabel":"React$1.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,"maxItems":2},"actionsSlot":{"type":"object","description":"Custom slot for rendering actions (overrides actions array)","typeLabel":"React$1.ReactNode","required":false},"ctaImages":{"type":"array","description":"CTA section images","items":{"type":"string","description":""},"required":false,"minItems":3,"maxItems":6,"mediaHints":{"path":"ctaImages[]","roles":["thumbnail","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Careers CTA supporting image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"ctaImagesSlot":{"type":"object","description":"Custom slot for rendering CTA images (overrides ctaImages array)","typeLabel":"React$1.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},"aspects[].id":{"type":"object","description":"","required":true},"aspects[].images":{"type":"object","description":"","required":true,"minItems":2,"maxItems":4},"aspects[].testimonial":{"type":"object","description":"","required":true}},"exampleProps":{"badgeText":"Our Culture","heading":"What Makes Us Different","description":"We have built a workplace where practical innovation and clear communication matter.","aspects":[{"id":"innovation","title":"Innovation First","description":"Teams have room to test better ways to serve customers.","images":["https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"],"testimonial":{"quote":"The freedom to improve the work is matched by real support from the team.","author":"Sarah Chen","role":"Senior Product Designer","avatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}},{"id":"collaboration","title":"Collaborative Spirit","description":"Cross-functional teams share context early and often.","images":["https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"],"testimonial":{"quote":"People here are genuinely invested in helping each other succeed.","author":"Marcus Johnson","role":"Engineering Lead","avatar":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"}}],"ctaHeading":"Ready to Join Our Team?","ctaDescription":"We are looking for people who share these values.","actions":[{"label":"View Open Positions","href":"/careers","variant":"default"}],"ctaImages":["https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp","https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"]},"dependencies":["@opensite/ui"],"tags":["about","culture","tabs","testimonials","gallery","careers","team","values","workplace"],"performance":{},"importantUsageNotes":"Use only when real culture aspects, employee testimonials, and team imagery are available. Do not fabricate quotes, authors, roles, or workplace claims. aspects[].images, testimonial.avatar, and ctaImages must be image media only.","usageRequirements":{"requiredProps":["heading","aspects"],"propConstraints":{"badgeText":{"maxLength":35},"heading":{"required":true,"maxLength":90},"description":{"maxLength":220},"aspects":{"required":true,"minItems":2,"maxItems":5},"aspects[].id":{"required":true,"note":"Must be unique within the aspects array."},"aspects[].images":{"required":true,"minItems":2,"maxItems":4},"aspects[].testimonial":{"required":true,"note":"Must be a real sourced employee or team testimonial."},"ctaImages":{"minItems":3,"maxItems":6},"actions":{"maxItems":2}},"mediaSlots":{"aspects[].images[]":{"path":"aspects[].images[]","roles":["gallery","feature"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"large","required":true,"note":"Culture aspect gallery image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"aspects[].testimonial.avatar":{"path":"aspects[].testimonial.avatar","roles":["profile","avatar"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":true,"preferredAspect":"1:1","note":"Culture testimonial author avatar. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."},"ctaImages[]":{"path":"ctaImages[]","roles":["thumbnail","gallery"],"disallowedRoles":["logo","favicon","video-thumbnail"],"minPixelClass":"small","required":false,"note":"Careers CTA supporting image. IMAGE MEDIA ONLY. Do not use logos, favicons, or video assets."}},"requiresSiteCapabilities":["reviews_or_testimonials","team_members","media_library"],"notes":["All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed.","Culture testimonials and team claims must be sourced."]}}]},"timestamp":"2026-06-27T18:46:57.715Z"}