<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#EFF6FF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#DBEAFE;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="cardGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#F9FAFB;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="codeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1E3A8A;stop-opacity:0.05" />
      <stop offset="100%" style="stop-color:#1E3A8A;stop-opacity:0.02" />
    </linearGradient>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="800" height="600" fill="url(#bgGrad)"/>

  <!-- Decorative circles -->
  <circle cx="100" cy="100" r="60" fill="#3B82F6" opacity="0.05"/>
  <circle cx="700" cy="500" r="80" fill="#8B5CF6" opacity="0.05"/>
  <circle cx="650" cy="120" r="40" fill="#10B981" opacity="0.05"/>

  <!-- Main card container -->
  <rect x="100" y="80" width="600" height="440" rx="16" fill="url(#cardGrad)" filter="url(#shadow)"/>
  <rect x="100" y="80" width="600" height="440" rx="16" stroke="#E5E7EB" stroke-width="2" fill="none"/>

  <!-- Left panel - Input JSON -->
  <rect x="120" y="100" width="260" height="380" rx="8" fill="url(#codeGrad)" stroke="#E5E7EB" stroke-width="1"/>

  <!-- Input panel header -->
  <text x="140" y="130" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#374151">Input JSON</text>

  <!-- Sample JSON code (unformatted) -->
  <text x="140" y="160" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">{"user":{</text>
  <text x="140" y="180" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"name"</text>
  <text x="185" y="180" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">:</text>
  <text x="195" y="180" font-family="Monaco, Consolas, monospace" font-size="11" fill="#22863A">"John"</text>
  <text x="235" y="180" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">,</text>

  <text x="140" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"age"</text>
  <text x="175" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">:</text>
  <text x="185" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#005CC5">30</text>
  <text x="200" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">,</text>

  <text x="140" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"active"</text>
  <text x="190" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">:</text>
  <text x="200" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#D73A49">true</text>

  <text x="140" y="240" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">}}</text>

  <!-- Format button visualization -->
  <rect x="140" y="270" width="220" height="32" rx="6" fill="#3B82F6"/>
  <text x="205" y="292" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600" fill="white" text-anchor="middle">Format JSON</text>

  <!-- Validate badge -->
  <rect x="140" y="320" width="80" height="24" rx="4" fill="#10B981" opacity="0.1"/>
  <circle cx="150" cy="332" r="3" fill="#10B981"/>
  <text x="158" y="336" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="500" fill="#10B981">Valid JSON</text>

  <!-- Center arrow -->
  <g transform="translate(390, 280)">
    <path d="M 0 0 L 20 10 L 0 20 L 0 14 L -15 14 L -15 6 L 0 6 Z" fill="#3B82F6" opacity="0.6"/>
  </g>

  <!-- Right panel - Formatted output -->
  <rect x="420" y="100" width="260" height="380" rx="8" fill="url(#codeGrad)" stroke="#E5E7EB" stroke-width="1"/>

  <!-- Output panel header -->
  <text x="440" y="130" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#374151">Formatted Output</text>

  <!-- Formatted JSON code with proper indentation -->
  <text x="440" y="160" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">{</text>
  <text x="450" y="180" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"user"</text>
  <text x="490" y="180" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">: {</text>

  <text x="465" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"name"</text>
  <text x="510" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">:</text>
  <text x="520" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#22863A">"John"</text>
  <text x="560" y="200" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">,</text>

  <text x="465" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"age"</text>
  <text x="500" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">:</text>
  <text x="510" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#005CC5">30</text>
  <text x="530" y="220" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">,</text>

  <text x="465" y="240" font-family="Monaco, Consolas, monospace" font-size="11" fill="#0066CC">"active"</text>
  <text x="520" y="240" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">:</text>
  <text x="530" y="240" font-family="Monaco, Consolas, monospace" font-size="11" fill="#D73A49">true</text>

  <text x="450" y="260" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">}</text>
  <text x="440" y="280" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">}</text>

  <!-- Action buttons -->
  <rect x="440" y="310" width="60" height="28" rx="4" fill="#10B981"/>
  <text x="470" y="330" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Copy</text>

  <rect x="510" y="310" width="80" height="28" rx="4" fill="#6366F1"/>
  <text x="550" y="330" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Download</text>

  <rect x="600" y="310" width="60" height="28" rx="4" fill="#8B5CF6"/>
  <text x="630" y="330" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="white" text-anchor="middle">Minify</text>

  <!-- Stats bar at bottom -->
  <rect x="440" y="355" width="220" height="110" rx="6" fill="#F3F4F6"/>

  <!-- Stats title -->
  <text x="455" y="375" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#6B7280">Analysis</text>

  <!-- Stats items -->
  <text x="455" y="395" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#9CA3AF">Keys:</text>
  <text x="565" y="395" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#3B82F6" text-anchor="end">3</text>

  <text x="455" y="412" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#9CA3AF">Depth:</text>
  <text x="565" y="412" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#8B5CF6" text-anchor="end">2</text>

  <text x="455" y="429" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#9CA3AF">Original:</text>
  <text x="565" y="429" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#10B981" text-anchor="end">156 B</text>

  <text x="455" y="446" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#9CA3AF">Minified:</text>
  <text x="565" y="446" font-family="system-ui, -apple-system, sans-serif" font-size="10" font-weight="600" fill="#F59E0B" text-anchor="end">98 B</text>

  <!-- Feature icons at top -->
  <g transform="translate(140, 430)">
    <rect width="50" height="40" rx="6" fill="#DBEAFE"/>
    <path d="M 15 15 L 20 15 L 20 20 L 15 20 Z M 22 18 L 27 18 L 27 23 L 22 23 Z M 29 12 L 34 12 L 34 17 L 29 17 Z" fill="#3B82F6"/>
    <text x="25" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6B7280" text-anchor="middle">Tree</text>
  </g>

  <g transform="translate(205, 430)">
    <rect width="50" height="40" rx="6" fill="#D1FAE5"/>
    <circle cx="25" cy="20" r="7" stroke="#10B981" stroke-width="2" fill="none"/>
    <path d="M 22 20 L 24 22 L 29 17" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round"/>
    <text x="25" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6B7280" text-anchor="middle">Validate</text>
  </g>

  <g transform="translate(270, 430)">
    <rect width="50" height="40" rx="6" fill="#FEF3C7"/>
    <rect x="16" y="14" width="18" height="2" rx="1" fill="#F59E0B"/>
    <rect x="16" y="19" width="18" height="2" rx="1" fill="#F59E0B"/>
    <rect x="16" y="24" width="14" height="2" rx="1" fill="#F59E0B"/>
    <text x="25" y="50" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6B7280" text-anchor="middle">Syntax</text>
  </g>
</svg>
