<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#f3f4f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#e5e7eb;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="docGradient" x1="0%" y1="0%" x2="0%" 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="accentGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
    </linearGradient>
  </defs>

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

  <!-- Decorative elements -->
  <circle cx="100" cy="80" r="40" fill="#dbeafe" opacity="0.5"/>
  <circle cx="700" cy="520" r="60" fill="#dbeafe" opacity="0.5"/>
  <rect x="650" y="50" width="100" height="100" rx="10" fill="#e0e7ff" opacity="0.3" transform="rotate(15 700 100)"/>

  <!-- Main document illustration -->
  <g transform="translate(200, 100)">
    <!-- Document shadow -->
    <rect x="8" y="8" width="400" height="400" rx="8" fill="#000000" opacity="0.1"/>

    <!-- Document background -->
    <rect x="0" y="0" width="400" height="400" rx="8" fill="url(#docGradient)" stroke="#e5e7eb" stroke-width="2"/>

    <!-- Document header -->
    <rect x="0" y="0" width="400" height="60" rx="8" fill="url(#accentGradient)"/>
    <text x="20" y="38" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="#ffffff">Lorem Ipsum</text>

    <!-- Text lines - representing paragraphs -->
    <g transform="translate(30, 90)">
      <!-- First paragraph -->
      <rect x="0" y="0" width="300" height="8" rx="4" fill="#3b82f6" opacity="0.8"/>
      <rect x="0" y="18" width="340" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>
      <rect x="0" y="36" width="320" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>
      <rect x="0" y="54" width="280" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>

      <!-- Second paragraph -->
      <rect x="0" y="90" width="240" height="8" rx="4" fill="#3b82f6" opacity="0.8"/>
      <rect x="0" y="108" width="340" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>
      <rect x="0" y="126" width="310" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>

      <!-- Third paragraph -->
      <rect x="0" y="162" width="280" height="8" rx="4" fill="#3b82f6" opacity="0.8"/>
      <rect x="0" y="180" width="340" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>
      <rect x="0" y="198" width="300" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>
      <rect x="0" y="216" width="260" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>

      <!-- Fourth paragraph -->
      <rect x="0" y="252" width="220" height="8" rx="4" fill="#3b82f6" opacity="0.8"/>
      <rect x="0" y="270" width="340" height="8" rx="4" fill="#9ca3af" opacity="0.6"/>
    </g>
  </g>

  <!-- Floating text badges - different generators -->
  <g transform="translate(50, 200)">
    <rect x="0" y="0" width="120" height="40" rx="20" fill="#fef3c7" stroke="#fbbf24" stroke-width="2"/>
    <text x="60" y="26" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#92400e" text-anchor="middle">Hipster</text>
  </g>

  <g transform="translate(50, 280)">
    <rect x="0" y="0" width="120" height="40" rx="20" fill="#fee2e2" stroke="#ef4444" stroke-width="2"/>
    <text x="60" y="26" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#991b1b" text-anchor="middle">Bacon</text>
  </g>

  <g transform="translate(50, 360)">
    <rect x="0" y="0" width="120" height="40" rx="20" fill="#fce7f3" stroke="#ec4899" stroke-width="2"/>
    <text x="60" y="26" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#9f1239" text-anchor="middle">Cupcake</text>
  </g>

  <g transform="translate(630, 200)">
    <rect x="0" y="0" width="120" height="40" rx="20" fill="#e0e7ff" stroke="#6366f1" stroke-width="2"/>
    <text x="60" y="26" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#3730a3" text-anchor="middle">Corporate</text>
  </g>

  <!-- Cursor/pointer icon suggesting interaction -->
  <g transform="translate(550, 450)">
    <path d="M10 10 L10 40 L18 32 L25 45 L30 42 L23 29 L35 29 Z" fill="#3b82f6" stroke="#1e40af" stroke-width="1.5"/>
  </g>

  <!-- Decorative lines connecting badges to document -->
  <line x1="170" y1="220" x2="200" y2="220" stroke="#fbbf24" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"/>
  <line x1="170" y1="300" x2="200" y2="280" stroke="#ef4444" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"/>
  <line x1="170" y1="380" x2="200" y2="360" stroke="#ec4899" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"/>
  <line x1="630" y1="220" x2="600" y2="220" stroke="#6366f1" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"/>

  <!-- Generate button illustration -->
  <g transform="translate(320, 520)">
    <rect x="0" y="0" width="160" height="50" rx="25" fill="url(#accentGradient)" stroke="#1e40af" stroke-width="2"/>
    <text x="80" y="33" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#ffffff" text-anchor="middle">Generate</text>
  </g>
</svg>
