<svg viewBox="0 0 720 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="CSV to vCard converter">
  <defs>
    <linearGradient id="csvBg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f4f7fc"/>
      <stop offset="1" stop-color="#e7ecf4"/>
    </linearGradient>
  </defs>
  <rect width="720" height="360" fill="url(#csvBg)"/>

  <!-- Spreadsheet (CSV) -->
  <g transform="translate(56 96)">
    <rect x="0" y="0" width="224" height="168" rx="10" fill="#ffffff" stroke="#d3dae6" stroke-width="2"/>
    <!-- header row -->
    <rect x="0" y="0" width="224" height="36" rx="10" fill="#e9eef6"/>
    <rect x="0" y="20" width="224" height="16" fill="#e9eef6"/>
    <!-- column dividers -->
    <line x1="74" y1="0" x2="74" y2="168" stroke="#d3dae6" stroke-width="2"/>
    <line x1="150" y1="0" x2="150" y2="168" stroke="#d3dae6" stroke-width="2"/>
    <!-- row dividers -->
    <line x1="0" y1="36" x2="224" y2="36" stroke="#d3dae6" stroke-width="2"/>
    <line x1="0" y1="80" x2="224" y2="80" stroke="#d3dae6" stroke-width="2"/>
    <line x1="0" y1="124" x2="224" y2="124" stroke="#d3dae6" stroke-width="2"/>
    <!-- header cells -->
    <rect x="14" y="12" width="46" height="12" rx="3" fill="#2337ff"/>
    <rect x="90" y="12" width="46" height="12" rx="3" fill="#2337ff"/>
    <rect x="166" y="12" width="42" height="12" rx="3" fill="#2337ff"/>
    <!-- data cells -->
    <g fill="#8790a1">
      <rect x="14" y="52" width="46" height="10" rx="3"/>
      <rect x="90" y="52" width="46" height="10" rx="3"/>
      <rect x="166" y="52" width="40" height="10" rx="3"/>
      <rect x="14" y="96" width="46" height="10" rx="3"/>
      <rect x="90" y="96" width="46" height="10" rx="3"/>
      <rect x="166" y="96" width="40" height="10" rx="3"/>
      <rect x="14" y="140" width="46" height="10" rx="3"/>
      <rect x="90" y="140" width="46" height="10" rx="3"/>
      <rect x="166" y="140" width="40" height="10" rx="3"/>
    </g>
  </g>

  <!-- Arrow -->
  <g transform="translate(312 180)">
    <line x1="0" y1="0" x2="72" y2="0" stroke="#2337ff" stroke-width="10" stroke-linecap="round"/>
    <path d="M64 -16 L96 0 L64 16 Z" fill="#2337ff"/>
  </g>

  <!-- vCard -->
  <g transform="translate(440 96)">
    <rect x="0" y="0" width="224" height="168" rx="14" fill="#ffffff" stroke="#2337ff" stroke-width="2"/>
    <circle cx="52" cy="58" r="26" fill="#e9eef6"/>
    <circle cx="52" cy="50" r="12" fill="#5f6880"/>
    <path d="M30 78 a22 18 0 0 1 44 0 Z" fill="#5f6880"/>
    <rect x="96" y="40" width="104" height="14" rx="4" fill="#1a2338"/>
    <rect x="96" y="64" width="80" height="10" rx="4" fill="#8790a1"/>
    <line x1="24" y1="106" x2="200" y2="106" stroke="#d3dae6" stroke-width="2"/>
    <rect x="24" y="122" width="140" height="10" rx="4" fill="#8790a1"/>
    <rect x="24" y="142" width="110" height="10" rx="4" fill="#8790a1"/>
  </g>

  <!-- label -->
  <text x="360" y="326" text-anchor="middle" font-family="'Geist Mono', ui-monospace, monospace" font-size="20" letter-spacing="2" fill="#5f6880">CSV &#8594; vCard</text>
</svg>
