{"success":true,"data":{"block":{"id":"alternating-blocks","name":"Alternating Content Blocks","title":"Alternating Blocks","category":"About","categorySlug":"about","description":"Display content sections with alternating left/right media placement. Ideal for storytelling, feature showcases, or company history sections.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289006/ve7asunbik4wjsz2b9sdjf01l2wn/alternating-blocks-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289007/1xi5156id33mlrlq4ckv2e0mnsbk/alternating-blocks-mobile.jpg"},"componentPath":"blocks/about/alternating-blocks.tsx","code":"import { AlternatingBlocks } from \"@opensite/ui/blocks/about/alternating-blocks\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <AlternatingBlocks\n      title=\"Our Journey\"\n      subtitle=\"About Us\"\n      background=\"white\"\n      spacing=\"xl\"\n      sections={[\n        {\n          content: (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-2xl font-bold\">The Beginning</h3>\n              <p className=\"text-muted-foreground\">\n                Founded in 2015, we started in a small garage with a simple\n                mission: make business tools accessible to everyone. What began\n                as a weekend project has grown into a platform trusted by\n                thousands of companies worldwide.\n              </p>\n              <p className=\"text-muted-foreground\">\n                Our founders, frustrated by the complexity of existing\n                solutions, believed there had to be a better way. They spent\n                countless nights building the foundation of what would become\n                our flagship product.\n              </p>\n            </div>\n          ),\n          media: (\n            <img\n              src={imagePlaceholders[12]}\n              alt=\"Early team collaboration\"\n              className=\"h-full w-full object-cover\"\n            />\n          ),\n          mediaLeft: false,\n        },\n        {\n          content: (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-2xl font-bold\">The Growth Years</h3>\n              <p className=\"text-muted-foreground\">\n                By 2018, we'd reached our first 10,000 users and raised our\n                Series A. We expanded the team, opened new offices, and doubled\n                down on our commitment to customer success. Each milestone\n                taught us valuable lessons about scale, culture, and impact.\n              </p>\n              <p className=\"text-muted-foreground\">\n                We learned that growth isn't just about numbers—it's about\n                staying true to your values while adapting to change. We\n                invested heavily in our people, our product, and our processes.\n              </p>\n            </div>\n          ),\n          media: (\n            <img\n              src={imagePlaceholders[23]}\n              alt=\"Office expansion\"\n              className=\"h-full w-full object-cover\"\n            />\n          ),\n          mediaLeft: true,\n        },\n        {\n          content: (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-2xl font-bold\">Today and Tomorrow</h3>\n              <p className=\"text-muted-foreground\">\n                Today, we serve over 100,000 businesses across 50+ countries.\n                But we're just getting started. We're investing in AI, expanding\n                our integrations, and building features that will define the\n                future of work.\n              </p>\n              <p className=\"text-muted-foreground\">\n                Our vision remains unchanged: empower every team to do their\n                best work. We measure success not by our revenue, but by the\n                impact we have on our customers' success.\n              </p>\n            </div>\n          ),\n          media: (\n            <img\n              src={imagePlaceholders[45]}\n              alt=\"Modern workplace\"\n              className=\"h-full w-full object-cover\"\n            />\n          ),\n          mediaLeft: false,\n        },\n      ]}\n    />\n  );\n}","propsSchema":{"sections":{"type":"array","description":"Array of sections to display with alternating layout","items":{"type":"object","description":"","fields":{"content":{"type":"object","description":"Content node to display (text, headings, etc.)","typeLabel":"ReactNode","required":true},"media":{"type":"object","description":"Media node to display (image, video, icon, etc.)","typeLabel":"ReactNode","required":true},"mediaLeft":{"type":"boolean","description":"Whether to place media on the left side","required":false}},"typeLabel":"AlternatingBlockSection"},"typeLabel":"AlternatingBlockSection[]","required":true},"className":{"type":"string","description":"Additional CSS classes","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["about","story","history","timeline","features","benefits","alternating","two-column","content-media"],"performance":{},"importantUsageNotes":"Supply 2-5 'sections' for best visual balance — each section requires both a 'content' node and a 'media' node (typically an image). Alternate the 'mediaLeft' boolean across sections to create the intended alternating layout (e.g. false, true, false). Only use real images for each section's 'media' prop — DO NOT USE PLACEHOLDER IMAGES. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:40:41.542Z"}