| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="topBar" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 4 | <stop offset="0%" stop-color="#1A3A5C"/> |
| 5 | <stop offset="100%" stop-color="#2D8A4E"/> |
| 6 | </linearGradient> |
| 7 | <linearGradient id="coreGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 8 | <stop offset="0%" stop-color="#1A3A5C"/> |
| 9 | <stop offset="100%" stop-color="#2D8A4E"/> |
| 10 | </linearGradient> |
| 11 | <filter id="coreShadow"> |
| 12 | <feGaussianBlur in="SourceAlpha" stdDeviation="8"/> |
| 13 | <feOffset dx="0" dy="4"/> |
| 14 | <feComponentTransfer><feFuncA type="linear" slope="0.15"/></feComponentTransfer> |
| 15 | <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge> |
| 16 | </filter> |
| 17 | <filter id="nodeShadow"> |
| 18 | <feGaussianBlur in="SourceAlpha" stdDeviation="4"/> |
| 19 | <feOffset dx="0" dy="2"/> |
| 20 | <feComponentTransfer><feFuncA type="linear" slope="0.1"/></feComponentTransfer> |
| 21 | <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge> |
| 22 | </filter> |
| 23 | </defs> |
| 24 | |
| 25 | <!-- Background --> |
| 26 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 27 | <rect x="0" y="0" width="1280" height="6" fill="url(#topBar)"/> |
| 28 | |
| 29 | <!-- Subtle radial decoration --> |
| 30 | <circle cx="640" cy="380" r="320" fill="#1A3A5C" fill-opacity="0.015"/> |
| 31 | <circle cx="640" cy="380" r="220" fill="#1A3A5C" fill-opacity="0.02"/> |
| 32 | |
| 33 | <!-- Page title --> |
| 34 | <text x="60" y="58" font-family="'Helvetica Neue', Arial, sans-serif" font-size="30" font-weight="bold" fill="#1A3A5C"> |
| 35 | A Four-Pillar Framework to Transform Customer Relationships |
| 36 | </text> |
| 37 | |
| 38 | <!-- Light subtitle --> |
| 39 | <text x="60" y="85" font-family="Georgia, 'Times New Roman', serif" font-size="16" fill="#5D6D7E" font-style="italic"> |
| 40 | From transactional sales to enduring loyalty — a strategic architecture for Kimsoong Europe |
| 41 | </text> |
| 42 | |
| 43 | <!-- ===== Connection lines (behind nodes) ===== --> |
| 44 | <!-- Core center: (640, 380). Pillars at cardinal positions --> |
| 45 | <line x1="640" y1="380" x2="260" y2="260" stroke="#1A3A5C" stroke-width="2" stroke-opacity="0.2" stroke-dasharray="6,4"/> |
| 46 | <line x1="640" y1="380" x2="1020" y2="260" stroke="#E8A838" stroke-width="2" stroke-opacity="0.2" stroke-dasharray="6,4"/> |
| 47 | <line x1="640" y1="380" x2="260" y2="520" stroke="#2D8A4E" stroke-width="2" stroke-opacity="0.2" stroke-dasharray="6,4"/> |
| 48 | <line x1="640" y1="380" x2="1020" y2="520" stroke="#1A3A5C" stroke-width="2" stroke-opacity="0.2" stroke-dasharray="6,4"/> |
| 49 | |
| 50 | <!-- ===== Central core ===== --> |
| 51 | <circle cx="640" cy="380" r="80" fill="url(#coreGrad)" filter="url(#coreShadow)"/> |
| 52 | <use data-icon="tabler-filled/heart" x="616" y="340" width="48" height="48" fill="#FFFFFF"/> |
| 53 | <text x="640" y="410" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" font-weight="bold" fill="#FFFFFF">Customer</text> |
| 54 | <text x="640" y="428" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" font-weight="bold" fill="#FFFFFF">Loyalty</text> |
| 55 | <text x="640" y="446" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="12" fill="#FFFFFF" fill-opacity="0.8">Programme</text> |
| 56 | |
| 57 | <!-- ===== Pillar 1 — Top-Left: Build relationships ===== --> |
| 58 | <circle cx="260" cy="260" r="55" fill="#FFFFFF" stroke="#1A3A5C" stroke-width="3" filter="url(#nodeShadow)"/> |
| 59 | <use data-icon="tabler-filled/coin" x="238" y="228" width="44" height="44" fill="#1A3A5C"/> |
| 60 | <text x="260" y="295" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" font-weight="bold" fill="#1A3A5C">RELATIONSHIPS</text> |
| 61 | <!-- Label below --> |
| 62 | <text x="260" y="335" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#1A3A5C">Build Long-term</text> |
| 63 | <text x="260" y="355" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#1A3A5C">Relationships</text> |
| 64 | <text x="260" y="375" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#5D6D7E">→ Increase profits</text> |
| 65 | |
| 66 | <!-- ===== Pillar 2 — Top-Right: Increase loyalty ===== --> |
| 67 | <circle cx="1020" cy="260" r="55" fill="#FFFFFF" stroke="#E8A838" stroke-width="3" filter="url(#nodeShadow)"/> |
| 68 | <use data-icon="tabler-filled/rosette" x="998" y="228" width="44" height="44" fill="#E8A838"/> |
| 69 | <text x="1020" y="295" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" font-weight="bold" fill="#E8A838">LOYALTY</text> |
| 70 | <!-- Label below --> |
| 71 | <text x="1020" y="335" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#E8A838">Increase Customer</text> |
| 72 | <text x="1020" y="355" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#E8A838">Loyalty</text> |
| 73 | <text x="1020" y="375" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#5D6D7E">15% → 30%+ repeat rate</text> |
| 74 | |
| 75 | <!-- ===== Pillar 3 — Bottom-Left: Data-driven ===== --> |
| 76 | <circle cx="260" cy="520" r="55" fill="#FFFFFF" stroke="#2D8A4E" stroke-width="3" filter="url(#nodeShadow)"/> |
| 77 | <use data-icon="tabler-filled/chart-pie" x="238" y="488" width="44" height="44" fill="#2D8A4E"/> |
| 78 | <text x="260" y="555" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" font-weight="bold" fill="#2D8A4E">PROFILING</text> |
| 79 | <!-- Label below --> |
| 80 | <text x="260" y="595" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#2D8A4E">Accurate Buyer</text> |
| 81 | <text x="260" y="615" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#2D8A4E">Profiling</text> |
| 82 | <text x="260" y="635" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#5D6D7E">→ Data-driven decisions</text> |
| 83 | |
| 84 | <!-- ===== Pillar 4 — Bottom-Right: Staff engagement ===== --> |
| 85 | <circle cx="1020" cy="520" r="55" fill="#FFFFFF" stroke="#1A3A5C" stroke-width="3" filter="url(#nodeShadow)"/> |
| 86 | <use data-icon="tabler-filled/user" x="998" y="488" width="44" height="44" fill="#1A3A5C"/> |
| 87 | <text x="1020" y="555" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" font-weight="bold" fill="#1A3A5C">ENGAGEMENT</text> |
| 88 | <!-- Label below --> |
| 89 | <text x="1020" y="595" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#1A3A5C">Staff</text> |
| 90 | <text x="1020" y="615" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="16" font-weight="bold" fill="#1A3A5C">Engagement</text> |
| 91 | <text x="1020" y="635" text-anchor="middle" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#5D6D7E">→ Service excellence</text> |
| 92 | |
| 93 | <!-- Cost model annotation --> |
| 94 | <rect x="480" y="550" width="320" height="36" rx="18" fill="#F4F6F8" stroke="#D5DDE5" stroke-width="1"/> |
| 95 | <use data-icon="tabler-filled/coin" x="495" y="557" width="20" height="20" fill="#E8A838"/> |
| 96 | <text x="525" y="573" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" fill="#2C3E50">Cost model: </text> |
| 97 | <text x="612" y="573" font-family="'Helvetica Neue', Arial, sans-serif" font-size="14" font-weight="bold" fill="#1A3A5C">50/50 shared with head office</text> |
| 98 | |
| 99 | <!-- Footer --> |
| 100 | <line x1="60" y1="690" x2="1220" y2="690" stroke="#D5DDE5" stroke-width="0.5"/> |
| 101 | <text x="60" y="710" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" fill="#95A5A6">Source: Kimsoong Customer Services Department — Strategic Framework</text> |
| 102 | <text x="1100" y="710" font-family="'Helvetica Neue', Arial, sans-serif" font-size="10" fill="#95A5A6">CONFIDENTIAL</text> |
| 103 | <text x="1220" y="710" text-anchor="end" font-family="'Helvetica Neue', Arial, sans-serif" font-size="11" fill="#95A5A6">7</text> |
| 104 | </svg> |
| 105 |