<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 560" role="img" aria-label="تحول رقمي في خدمات الحج">
  <defs>
    <linearGradient id="g" x1="0" x2="1"><stop offset="0" stop-color="#eaf7f3"/><stop offset="1" stop-color="#f7fbfa"/></linearGradient>
    <linearGradient id="card" x1="0" x2="1"><stop offset="0" stop-color="#0B6B5C"/><stop offset="1" stop-color="#0f8c7a"/></linearGradient>
  </defs>
  <rect width="900" height="560" rx="38" fill="url(#g)"/>
  <circle cx="735" cy="96" r="120" fill="#d8eee8"/>
  <circle cx="145" cy="470" r="180" fill="#f0d89c" opacity=".35"/>
  <g transform="translate(105 120)">
    <rect x="0" y="95" width="250" height="250" rx="14" fill="#111827"/>
    <rect x="22" y="105" width="206" height="58" rx="8" fill="#c99b3a"/>
    <rect x="22" y="180" width="206" height="40" rx="6" fill="#c99b3a" opacity=".9"/>
    <rect x="22" y="240" width="206" height="40" rx="6" fill="#c99b3a" opacity=".75"/>
    <rect x="70" y="45" width="110" height="90" rx="55" fill="#111827"/>
  </g>
  <g transform="translate(480 78)">
    <rect width="260" height="410" rx="32" fill="#0b3f37"/>
    <rect x="20" y="30" width="220" height="350" rx="20" fill="#fff"/>
    <rect x="50" y="58" width="80" height="12" rx="6" fill="#0B6B5C"/>
    <circle cx="198" cy="64" r="16" fill="#e6f4ef"/>
    <rect x="45" y="105" width="170" height="54" rx="15" fill="#eaf7f3"/>
    <rect x="45" y="181" width="170" height="54" rx="15" fill="#f9f2dc"/>
    <rect x="45" y="257" width="170" height="54" rx="15" fill="#eaf7f3"/>
    <circle cx="92" cy="346" r="18" fill="#0B6B5C"/>
    <circle cx="130" cy="346" r="18" fill="#0B6B5C" opacity=".75"/>
    <circle cx="168" cy="346" r="18" fill="#0B6B5C" opacity=".55"/>
  </g>
  <g fill="none" stroke="#0B6B5C" stroke-width="4" stroke-dasharray="8 12" opacity=".55">
    <path d="M354 244 C430 110, 520 116, 606 178"/>
    <path d="M354 304 C426 440, 520 420, 608 356"/>
  </g>
  <g font-family="Arial" fill="#0B6B5C" font-weight="700">
    <circle cx="402" cy="165" r="34" fill="#fff" stroke="#0B6B5C" stroke-width="4"/><text x="385" y="175" font-size="30">QR</text>
    <circle cx="410" cy="386" r="34" fill="#fff" stroke="#0B6B5C" stroke-width="4"/><text x="394" y="397" font-size="30">AI</text>
    <circle cx="770" cy="290" r="44" fill="#fff" stroke="#0B6B5C" stroke-width="4"/><text x="745" y="303" font-size="34">IoT</text>
  </g>
</svg>
