<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 280" width="1200" height="280">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0200ce;stop-opacity:1"/>
      <stop offset="60%" style="stop-color:#1a18e0;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#0f0ea8;stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="card1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.12"/>
      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.04"/>
    </linearGradient>
    <linearGradient id="card2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.09"/>
      <stop offset="100%" style="stop-color:#ffffff;stop-opacity:0.02"/>
    </linearGradient>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="28"/>
    </filter>
    <filter id="blur2">
      <feGaussianBlur stdDeviation="18"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="280" fill="url(#bg)"/>

  <!-- Ambient glows -->
  <circle cx="900" cy="60" r="180" fill="#4340ff" opacity="0.25" filter="url(#blur1)"/>
  <circle cx="1100" cy="220" r="130" fill="#0200ce" opacity="0.3" filter="url(#blur1)"/>
  <circle cx="200" cy="200" r="100" fill="#3028ff" opacity="0.2" filter="url(#blur2)"/>

  <!-- Grid dots background pattern -->
  <g opacity="0.08">
    <rect x="0" y="0" width="1200" height="280" fill="none"/>
    <!-- dot grid via small circles -->
    <g fill="#fff">
      <circle cx="60" cy="40" r="1.5"/><circle cx="120" cy="40" r="1.5"/><circle cx="180" cy="40" r="1.5"/>
      <circle cx="240" cy="40" r="1.5"/><circle cx="300" cy="40" r="1.5"/><circle cx="360" cy="40" r="1.5"/>
      <circle cx="420" cy="40" r="1.5"/><circle cx="480" cy="40" r="1.5"/><circle cx="540" cy="40" r="1.5"/>
      <circle cx="600" cy="40" r="1.5"/><circle cx="660" cy="40" r="1.5"/><circle cx="720" cy="40" r="1.5"/>
      <circle cx="780" cy="40" r="1.5"/><circle cx="840" cy="40" r="1.5"/><circle cx="900" cy="40" r="1.5"/>
      <circle cx="960" cy="40" r="1.5"/><circle cx="1020" cy="40" r="1.5"/><circle cx="1080" cy="40" r="1.5"/>
      <circle cx="1140" cy="40" r="1.5"/>

      <circle cx="60" cy="100" r="1.5"/><circle cx="120" cy="100" r="1.5"/><circle cx="180" cy="100" r="1.5"/>
      <circle cx="240" cy="100" r="1.5"/><circle cx="300" cy="100" r="1.5"/><circle cx="360" cy="100" r="1.5"/>
      <circle cx="420" cy="100" r="1.5"/><circle cx="480" cy="100" r="1.5"/><circle cx="540" cy="100" r="1.5"/>
      <circle cx="600" cy="100" r="1.5"/><circle cx="660" cy="100" r="1.5"/><circle cx="720" cy="100" r="1.5"/>
      <circle cx="780" cy="100" r="1.5"/><circle cx="840" cy="100" r="1.5"/><circle cx="900" cy="100" r="1.5"/>
      <circle cx="960" cy="100" r="1.5"/><circle cx="1020" cy="100" r="1.5"/><circle cx="1080" cy="100" r="1.5"/>
      <circle cx="1140" cy="100" r="1.5"/>

      <circle cx="60" cy="160" r="1.5"/><circle cx="120" cy="160" r="1.5"/><circle cx="180" cy="160" r="1.5"/>
      <circle cx="240" cy="160" r="1.5"/><circle cx="300" cy="160" r="1.5"/><circle cx="360" cy="160" r="1.5"/>
      <circle cx="420" cy="160" r="1.5"/><circle cx="480" cy="160" r="1.5"/><circle cx="540" cy="160" r="1.5"/>
      <circle cx="600" cy="160" r="1.5"/><circle cx="660" cy="160" r="1.5"/><circle cx="720" cy="160" r="1.5"/>
      <circle cx="780" cy="160" r="1.5"/><circle cx="840" cy="160" r="1.5"/><circle cx="900" cy="160" r="1.5"/>
      <circle cx="960" cy="160" r="1.5"/><circle cx="1020" cy="160" r="1.5"/><circle cx="1080" cy="160" r="1.5"/>
      <circle cx="1140" cy="160" r="1.5"/>

      <circle cx="60" cy="220" r="1.5"/><circle cx="120" cy="220" r="1.5"/><circle cx="180" cy="220" r="1.5"/>
      <circle cx="240" cy="220" r="1.5"/><circle cx="300" cy="220" r="1.5"/><circle cx="360" cy="220" r="1.5"/>
      <circle cx="420" cy="220" r="1.5"/><circle cx="480" cy="220" r="1.5"/><circle cx="540" cy="220" r="1.5"/>
      <circle cx="600" cy="220" r="1.5"/><circle cx="660" cy="220" r="1.5"/><circle cx="720" cy="220" r="1.5"/>
      <circle cx="780" cy="220" r="1.5"/><circle cx="840" cy="220" r="1.5"/><circle cx="900" cy="220" r="1.5"/>
      <circle cx="960" cy="220" r="1.5"/><circle cx="1020" cy="220" r="1.5"/><circle cx="1080" cy="220" r="1.5"/>
      <circle cx="1140" cy="220" r="1.5"/>
    </g>
  </g>

  <!-- Right-side illustration: floating news cards -->
  <!-- Large card -->
  <rect x="680" y="28" width="200" height="130" rx="12" fill="url(#card1)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
  <!-- Card image placeholder -->
  <rect x="692" y="40" width="176" height="72" rx="8" fill="rgba(255,255,255,0.1)"/>
  <!-- Newspaper icon inside image -->
  <g transform="translate(763, 62)" opacity="0.5">
    <rect x="0" y="0" width="34" height="28" rx="4" fill="none" stroke="white" stroke-width="1.5"/>
    <line x1="5" y1="8" x2="29" y2="8" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
    <line x1="5" y1="14" x2="22" y2="14" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
    <line x1="5" y1="20" x2="18" y2="20" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
  </g>
  <!-- Card text lines -->
  <rect x="692" y="118" width="120" height="7" rx="3" fill="rgba(255,255,255,0.4)"/>
  <rect x="692" y="131" width="90" height="5" rx="3" fill="rgba(255,255,255,0.2)"/>
  <rect x="692" y="142" width="60" height="5" rx="3" fill="rgba(255,255,255,0.15)"/>

  <!-- Medium card (rotated slightly) -->
  <g transform="rotate(-4, 900, 130)">
    <rect x="900" y="50" width="170" height="110" rx="12" fill="url(#card2)" stroke="rgba(255,255,255,0.12)" stroke-width="1"/>
    <rect x="912" y="62" width="146" height="58" rx="6" fill="rgba(255,255,255,0.08)"/>
    <g transform="translate(975, 80)" opacity="0.4">
      <circle cx="0" cy="0" r="12" fill="none" stroke="white" stroke-width="1.5"/>
      <line x1="-6" y1="0" x2="6" y2="0" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
      <line x1="0" y1="-6" x2="0" y2="6" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
    </g>
    <rect x="912" y="126" width="100" height="6" rx="3" fill="rgba(255,255,255,0.3)"/>
    <rect x="912" y="138" width="70" height="5" rx="3" fill="rgba(255,255,255,0.15)"/>
  </g>

  <!-- Small card bottom right -->
  <g transform="rotate(3, 1060, 180)">
    <rect x="1010" y="130" width="150" height="100" rx="10" fill="url(#card2)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
    <rect x="1022" y="142" width="126" height="50" rx="6" fill="rgba(255,255,255,0.07)"/>
    <rect x="1022" y="198" width="90" height="6" rx="3" fill="rgba(255,255,255,0.25)"/>
    <rect x="1022" y="210" width="60" height="4" rx="3" fill="rgba(255,255,255,0.12)"/>
  </g>

  <!-- Decorative horizontal lines (speed/motion) -->
  <g opacity="0.12" stroke="white" stroke-width="1" stroke-linecap="round">
    <line x1="600" y1="220" x2="680" y2="220"/>
    <line x1="590" y1="240" x2="700" y2="240"/>
    <line x1="610" y1="200" x2="670" y2="200"/>
  </g>

  <!-- Floating tag badges -->
  <rect x="700" y="175" width="64" height="22" rx="11" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
  <text x="732" y="190" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="700" fill="rgba(255,255,255,0.9)" letter-spacing="0.5">NEWS</text>

  <rect x="778" y="185" width="72" height="22" rx="11" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
  <text x="814" y="200" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="700" fill="rgba(255,255,255,0.8)" letter-spacing="0.5">ARTICLE</text>

  <rect x="720" y="208" width="56" height="20" rx="10" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
  <text x="748" y="222" text-anchor="middle" font-family="Arial, sans-serif" font-size="9" font-weight="600" fill="rgba(255,255,255,0.6)" letter-spacing="0.5">UPDATE</text>

  <!-- Left side: Main text content -->
  <!-- Main headline -->
  <text x="56" y="126" font-family="Arial, sans-serif" font-size="46" font-weight="900" fill="#ffffff" letter-spacing="-0.5">News &amp; Article</text>

  <!-- Subtitle -->
  <text x="58" y="160" font-family="Arial, sans-serif" font-size="15" font-weight="400" fill="rgba(255,255,255,0.72)">Berita terbaru dan artikel pilihan seputar industri</text>
  <text x="58" y="180" font-family="Arial, sans-serif" font-size="15" font-weight="400" fill="rgba(255,255,255,0.72)">dan solusi teknik dari PT Trit Indonesia.</text>
</svg>
