<svg width="700" height="250" viewBox="0 0 700 250" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- Step 1: Select -->
  <circle cx="100" cy="125" r="60" fill="#EBF5FF" stroke="#2563EB" stroke-width="3"/>
  <rect x="75" y="110" width="50" height="32" rx="4" fill="#3B82F6"/>
  <circle cx="85" cy="120" r="3" fill="white"/>
  <line x1="95" y1="120" x2="115" y2="120" stroke="white" stroke-width="2"/>
  <line x1="95" y1="128" x2="110" y2="128" stroke="white" stroke-width="2"/>
  <text x="100" y="80" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold" fill="#2563EB">Step 1</text>
  <text x="100" y="190" text-anchor="middle" font-family="Arial" font-size="14" fill="#6B7280">Select Card</text>
  
  <!-- Arrow 1 -->
  <path d="M 165 125 L 210 125" stroke="#93C5FD" stroke-width="3" stroke-dasharray="5,5"/>
  <path d="M 210 125 L 205 120 L 205 130 Z" fill="#93C5FD"/>
  
  <!-- Step 2: Pay -->
  <circle cx="275" cy="125" r="60" fill="#FEF3C7" stroke="#F59E0B" stroke-width="3"/>
  <rect x="255" y="105" width="40" height="30" rx="5" fill="white" stroke="#F59E0B" stroke-width="2"/>
  <rect x="260" y="110" width="12" height="8" rx="2" fill="#FCD34D"/>
  <line x1="260" y1="125" x2="290" y2="125" stroke="#F59E0B" stroke-width="2"/>
  <text x="275" y="80" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold" fill="#F59E0B">Step 2</text>
  <text x="275" y="190" text-anchor="middle" font-family="Arial" font-size="14" fill="#6B7280">Pay Securely</text>
  
  <!-- Arrow 2 -->
  <path d="M 340 125 L 385 125" stroke="#93C5FD" stroke-width="3" stroke-dasharray="5,5"/>
  <path d="M 385 125 L 380 120 L 380 130 Z" fill="#93C5FD"/>
  
  <!-- Step 3: Receive -->
  <circle cx="450" cy="125" r="60" fill="#ECFDF5" stroke="#10B981" stroke-width="3"/>
  <rect x="425" y="105" width="50" height="35" rx="5" fill="white" stroke="#10B981" stroke-width="2"/>
  <path d="M 425 105 L 450 128 L 475 105" stroke="#10B981" stroke-width="2" fill="none"/>
  <path d="M 435 115 L 445 125 L 465 108" stroke="#10B981" stroke-width="2" fill="none"/>
  <text x="450" y="80" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold" fill="#10B981">Step 3</text>
  <text x="450" y="190" text-anchor="middle" font-family="Arial" font-size="14" fill="#6B7280">Get Code</text>
  
  <!-- Arrow 3 -->
  <path d="M 515 125 L 560 125" stroke="#93C5FD" stroke-width="3" stroke-dasharray="5,5"/>
  <path d="M 560 125 L 555 120 L 555 130 Z" fill="#93C5FD"/>
  
  <!-- Step 4: Use -->
  <circle cx="625" cy="125" r="60" fill="#F3E8FF" stroke="#A78BFA" stroke-width="3"/>
  <circle cx="625" cy="125" r="30" fill="white" stroke="#A78BFA" stroke-width="2"/>
  <path d="M 615 125 L 622 132 L 640 114" stroke="#10B981" stroke-width="3" stroke-linecap="round" fill="none"/>
  <text x="625" y="80" text-anchor="middle" font-family="Arial" font-size="16" font-weight="bold" fill="#A78BFA">Step 4</text>
  <text x="625" y="190" text-anchor="middle" font-family="Arial" font-size="14" fill="#6B7280">Redeem</text>
</svg>

