{"success":true,"data":{"block":{"id":"about-vision-gallery","name":"About Vision Gallery","title":"About Vision Gallery","category":"About","categorySlug":"about","description":"A vision-focused about section with hero title, image gallery grid, two-column vision/creators content, and a team CTA banner. Perfect for companies wanting to share their story, vision, and invite visitors to join their team.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/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."]}}},"timestamp":"2026-06-27T20:11:04.346Z"}