Stacked Architecture Visualization

stacked-architecture.svg

<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <!-- Single Platform -->
    <g transform="translate(0,0)">
        <rect x="10" y="320" width="140" height="60" fill="#e6f3ff" stroke="#333"/>
        <text x="80" y="350" text-anchor="middle" font-size="14">🏪 Single Platform</text>
    </g>

    <!-- Platform + Integration -->
    <g transform="translate(160,0)">
        <rect x="10" y="260" width="140" height="60" fill="#ccebff" stroke="#333"/>
        <rect x="10" y="320" width="140" height="60" fill="#ccebff" stroke="#333"/>
        <text x="80" y="290" text-anchor="middle" font-size="14">🔌 ERP</text>
        <text x="80" y="350" text-anchor="middle" font-size="14">Commerce Platform</text>
    </g>

    <!-- Headless -->
    <g transform="translate(320,0)">
        <rect x="10" y="200" width="140" height="60" fill="#b3e0ff" stroke="#333"/>
        <rect x="10" y="260" width="140" height="60" fill="#b3e0ff" stroke="#333"/>
        <rect x="10" y="320" width="140" height="60" fill="#b3e0ff" stroke="#333"/>
        <text x="80" y="230" text-anchor="middle" font-size="14">🎪 Custom Frontend</text>
        <text x="80" y="290" text-anchor="middle" font-size="14">APIs</text>
        <text x="80" y="350" text-anchor="middle" font-size="14">Commerce Platform</text>
    </g>

    <!-- Multi-vendor -->
    <g transform="translate(480,0)">
        <rect x="10" y="140" width="140" height="60" fill="#99d6ff" stroke="#333"/>
        <rect x="10" y="200" width="140" height="60" fill="#99d6ff" stroke="#333"/>
        <rect x="10" y="260" width="140" height="60" fill="#99d6ff" stroke="#333"/>
        <rect x="10" y="320" width="140" height="60" fill="#99d6ff" stroke="#333"/>
        <text x="80" y="170" text-anchor="middle" font-size="14">🏭 OMS</text>
        <text x="80" y="230" text-anchor="middle" font-size="14">ERP</text>
        <text x="80" y="290" text-anchor="middle" font-size="14">APIs</text>
        <text x="80" y="350" text-anchor="middle" font-size="14">Commerce Platform</text>
    </g>

    <!-- Fully Composable -->
    <g transform="translate(640,0)">
        <rect x="10" y="80" width="140" height="60" fill="#80ccff" stroke="#333"/>
        <rect x="10" y="140" width="140" height="60" fill="#80ccff" stroke="#333"/>
        <rect x="10" y="200" width="140" height="60" fill="#80ccff" stroke="#333"/>
        <rect x="10" y="260" width="140" height="60" fill="#80ccff" stroke="#333"/>
        <rect x="10" y="320" width="140" height="60" fill="#80ccff" stroke="#333"/>
        <text x="80" y="110" text-anchor="middle" font-size="14">🎭 Custom Solutions</text>
        <text x="80" y="170" text-anchor="middle" font-size="14">Microservices</text>
        <text x="80" y="230" text-anchor="middle" font-size="14">Best-of-Breed</text>
        <text x="80" y="290" text-anchor="middle" font-size="14">APIs</text>
        <text x="80" y="350" text-anchor="middle" font-size="14">Commerce Platform</text>
    </g>

    <!-- Complexity Scale -->
    <line x1="10" y1="20" x2="790" y2="20" stroke="#333" stroke-width="2"/>
    <text x="10" y="15" text-anchor="start" font-size="14">Simple</text>
    <text x="790" y="15" text-anchor="end" font-size="14">Complex</text>
</svg>