| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Isometric Stairs Chart Template |
| 6 | Usage: Progressive stages, growth paths, maturity models |
| 7 | Scenarios: Digital transformation phases, capability maturity, strategic milestones |
| 8 | Supports: 6 Steps (Recommended 4-7) |
| 9 | Design Principles: |
| 10 | - Each step = top parallelogram + front face + side face (3 shades from one Tailwind hue, see CHART_STYLE_GUIDE §1.2) |
| 11 | - Step palette walks the spectrum Sky -> Blue -> Indigo -> Violet -> Purple -> Rose |
| 12 | - Visual weight: thicker top-edge highlight (2.5px), darker side facets, larger numbers (font 34 weight 900), |
| 13 | each description anchored by a tinted background card so it does not float |
| 14 | - Ground line beneath bottom stair anchors the staircase to the page |
| 15 | --> |
| 16 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 17 | |
| 18 | <!-- ==================== Header ==================== --> |
| 19 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 20 | <text x="60" y="60" font-size="32" font-weight="800" fill="#0F172A"><tspan>Digital Transformation Roadmap</tspan></text> |
| 21 | <text x="60" y="88" font-size="14" font-weight="600" fill="#64748B" letter-spacing="1.5"><tspan>STRATEGIC MILESTONES · SIX-STAGE PROGRESSIVE PATH</tspan></text> |
| 22 | </g> |
| 23 | |
| 24 | <!-- Ground line: dashed faint line at the base where the bottom stair lands; anchors the climb visually --> |
| 25 | <g id="ground-line" data-pptx-bounds="0 590 1280 20"> |
| 26 | <line x1="60" y1="600" x2="1220" y2="600" stroke="#CBD5E1" stroke-width="1.5" stroke-dasharray="6,6"/> |
| 27 | </g> |
| 28 | |
| 29 | <!-- ==================== Stair 1 (Sky) ==================== --> |
| 30 | <g id="stair-01" data-pptx-bounds="46 430 328 172" transform="translate(80, 480)"> |
| 31 | <polygon points="0,0 130,-38 260,0 130,38" fill="#38BDF8"/> |
| 32 | <polygon points="0,0 0,72 130,110 130,38" fill="#0EA5E9"/> |
| 33 | <polygon points="130,38 130,110 260,72 260,0" fill="#0284C7"/> |
| 34 | <polyline points="0,0 130,-38 260,0" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.7"/> |
| 35 | <text x="130" y="16" text-anchor="middle" font-size="34" font-weight="900" fill="#FFFFFF"><tspan>01</tspan></text> |
| 36 | </g> |
| 37 | <g id="label-01" data-pptx-bounds="71 608 278 64"> |
| 38 | <rect x="100" y="615" width="220" height="50" rx="8" fill="#F0F9FF" stroke="#BAE6FD" stroke-width="1.5"/> |
| 39 | <text x="210" y="636" text-anchor="middle" font-size="15" font-weight="700" fill="#0F172A"><tspan>Foundational IT</tspan></text> |
| 40 | <text x="210" y="654" text-anchor="middle" font-weight="500" fill="#0369A1"><tspan>Infrastructure setup</tspan></text> |
| 41 | </g> |
| 42 | |
| 43 | <!-- ==================== Stair 2 (Blue) ==================== --> |
| 44 | <g id="stair-02" data-pptx-bounds="196 360 328 172" transform="translate(230, 410)"> |
| 45 | <polygon points="0,0 130,-38 260,0 130,38" fill="#60A5FA"/> |
| 46 | <polygon points="0,0 0,72 130,110 130,38" fill="#3B82F6"/> |
| 47 | <polygon points="130,38 130,110 260,72 260,0" fill="#2563EB"/> |
| 48 | <polyline points="0,0 130,-38 260,0" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.7"/> |
| 49 | <text x="130" y="16" text-anchor="middle" font-size="34" font-weight="900" fill="#FFFFFF"><tspan>02</tspan></text> |
| 50 | </g> |
| 51 | <g id="label-02" data-pptx-bounds="221 538 278 64"> |
| 52 | <rect x="250" y="545" width="220" height="50" rx="8" fill="#EFF6FF" stroke="#BFDBFE" stroke-width="1.5"/> |
| 53 | <text x="360" y="566" text-anchor="middle" font-size="15" font-weight="700" fill="#0F172A"><tspan>Process Digitization</tspan></text> |
| 54 | <text x="360" y="584" text-anchor="middle" font-weight="500" fill="#1D4ED8"><tspan>Core business online</tspan></text> |
| 55 | </g> |
| 56 | |
| 57 | <!-- ==================== Stair 3 (Indigo) ==================== --> |
| 58 | <g id="stair-03" data-pptx-bounds="346 290 328 172" transform="translate(380, 340)"> |
| 59 | <polygon points="0,0 130,-38 260,0 130,38" fill="#818CF8"/> |
| 60 | <polygon points="0,0 0,72 130,110 130,38" fill="#6366F1"/> |
| 61 | <polygon points="130,38 130,110 260,72 260,0" fill="#4F46E5"/> |
| 62 | <polyline points="0,0 130,-38 260,0" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.65"/> |
| 63 | <text x="130" y="16" text-anchor="middle" font-size="34" font-weight="900" fill="#FFFFFF"><tspan>03</tspan></text> |
| 64 | </g> |
| 65 | <g id="label-03" data-pptx-bounds="371 468 278 64"> |
| 66 | <rect x="400" y="475" width="220" height="50" rx="8" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1.5"/> |
| 67 | <text x="510" y="496" text-anchor="middle" font-size="15" font-weight="700" fill="#0F172A"><tspan>Data Driven</tspan></text> |
| 68 | <text x="510" y="514" text-anchor="middle" font-weight="500" fill="#4338CA"><tspan>Analytics & insights</tspan></text> |
| 69 | </g> |
| 70 | |
| 71 | <!-- ==================== Stair 4 (Violet) ==================== --> |
| 72 | <g id="stair-04" data-pptx-bounds="496 220 328 172" transform="translate(530, 270)"> |
| 73 | <polygon points="0,0 130,-38 260,0 130,38" fill="#A78BFA"/> |
| 74 | <polygon points="0,0 0,72 130,110 130,38" fill="#8B5CF6"/> |
| 75 | <polygon points="130,38 130,110 260,72 260,0" fill="#7C3AED"/> |
| 76 | <polyline points="0,0 130,-38 260,0" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.6"/> |
| 77 | <text x="130" y="16" text-anchor="middle" font-size="34" font-weight="900" fill="#FFFFFF"><tspan>04</tspan></text> |
| 78 | </g> |
| 79 | <g id="label-04" data-pptx-bounds="521 398 278 64"> |
| 80 | <rect x="550" y="405" width="220" height="50" rx="8" fill="#F5F3FF" stroke="#DDD6FE" stroke-width="1.5"/> |
| 81 | <text x="660" y="426" text-anchor="middle" font-size="15" font-weight="700" fill="#0F172A"><tspan>Intelligent Ops</tspan></text> |
| 82 | <text x="660" y="444" text-anchor="middle" font-weight="500" fill="#6D28D9"><tspan>AI-augmented work</tspan></text> |
| 83 | </g> |
| 84 | |
| 85 | <!-- ==================== Stair 5 (Purple) ==================== --> |
| 86 | <g id="stair-05" data-pptx-bounds="646 150 328 172" transform="translate(680, 200)"> |
| 87 | <polygon points="0,0 130,-38 260,0 130,38" fill="#C084FC"/> |
| 88 | <polygon points="0,0 0,72 130,110 130,38" fill="#A855F7"/> |
| 89 | <polygon points="130,38 130,110 260,72 260,0" fill="#9333EA"/> |
| 90 | <polyline points="0,0 130,-38 260,0" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.55"/> |
| 91 | <text x="130" y="16" text-anchor="middle" font-size="34" font-weight="900" fill="#FFFFFF"><tspan>05</tspan></text> |
| 92 | </g> |
| 93 | <g id="label-05" data-pptx-bounds="671 328 278 64"> |
| 94 | <rect x="700" y="335" width="220" height="50" rx="8" fill="#FAF5FF" stroke="#E9D5FF" stroke-width="1.5"/> |
| 95 | <text x="810" y="356" text-anchor="middle" font-size="15" font-weight="700" fill="#0F172A"><tspan>Ecosystem Integration</tspan></text> |
| 96 | <text x="810" y="374" text-anchor="middle" font-weight="500" fill="#7E22CE"><tspan>Platform collaboration</tspan></text> |
| 97 | </g> |
| 98 | |
| 99 | <!-- ==================== Stair 6 (Rose, peak) ==================== --> |
| 100 | <g id="stair-06" data-pptx-bounds="796 80 328 172" transform="translate(830, 130)"> |
| 101 | <polygon points="0,0 130,-38 260,0 130,38" fill="#FB7185"/> |
| 102 | <polygon points="0,0 0,72 130,110 130,38" fill="#F43F5E"/> |
| 103 | <polygon points="130,38 130,110 260,72 260,0" fill="#E11D48"/> |
| 104 | <polyline points="0,0 130,-38 260,0" fill="none" stroke="#FFFFFF" stroke-width="2.5" stroke-opacity="0.5"/> |
| 105 | <text x="130" y="16" text-anchor="middle" font-size="34" font-weight="900" fill="#FFFFFF"><tspan>06</tspan></text> |
| 106 | </g> |
| 107 | <g id="label-06" data-pptx-bounds="821 258 278 64"> |
| 108 | <rect x="850" y="265" width="220" height="50" rx="8" fill="#FFF1F2" stroke="#FECDD3" stroke-width="1.5"/> |
| 109 | <text x="960" y="286" text-anchor="middle" font-size="15" font-weight="700" fill="#0F172A"><tspan>Industry Leadership</tspan></text> |
| 110 | <text x="960" y="304" text-anchor="middle" font-weight="500" fill="#BE123C"><tspan>Standard setting</tspan></text> |
| 111 | </g> |
| 112 | </svg> |
| 113 |