<svg xmlns="http://www.w3.org/2000/svg" width="1366" height="617" viewBox="0 0 1366 617" role="img" aria-labelledby="title desc">
  <title id="title">Preview website Markaz Quran Mulia</title>
  <desc id="desc">Website preview with green school header, hero photo area, welcome text, and overlapping school photo cards.</desc>
  <defs>
    <linearGradient id="photo" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#d1d5db"/>
      <stop offset="0.45" stop-color="#8b949e"/>
      <stop offset="1" stop-color="#374151"/>
    </linearGradient>
    <linearGradient id="wall" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#eef2f7"/>
      <stop offset="1" stop-color="#b8c0ca"/>
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="18" stdDeviation="12" flood-color="#000000" flood-opacity="0.28"/>
    </filter>
  </defs>

  <rect width="1366" height="617" fill="#111827"/>
  <g opacity="0.7">
    <rect y="69" width="1366" height="548" fill="url(#photo)"/>
    <rect x="0" y="70" width="1366" height="548" fill="#000" opacity="0.48"/>
    <rect x="120" y="90" width="1126" height="310" fill="url(#wall)" opacity="0.55"/>
    <rect x="190" y="90" width="18" height="330" fill="#2f5f5f" opacity="0.65"/>
    <rect x="520" y="90" width="18" height="330" fill="#2f5f5f" opacity="0.65"/>
    <rect x="858" y="90" width="18" height="330" fill="#2f5f5f" opacity="0.65"/>
    <rect x="275" y="140" width="132" height="148" rx="4" fill="#1f2937" opacity="0.75"/>
    <rect x="663" y="140" width="132" height="148" rx="4" fill="#1f2937" opacity="0.75"/>
    <rect x="965" y="140" width="132" height="148" rx="4" fill="#1f2937" opacity="0.75"/>
    <rect x="430" y="333" width="480" height="76" fill="#4b2b2a" opacity="0.78"/>
    <rect x="0" y="500" width="1366" height="117" fill="#182033" opacity="0.45"/>
    <g opacity="0.9">
      <circle cx="390" cy="548" r="23" fill="#f8fafc"/>
      <circle cx="445" cy="545" r="24" fill="#f8fafc"/>
      <circle cx="500" cy="550" r="22" fill="#f8fafc"/>
      <circle cx="555" cy="543" r="24" fill="#f8fafc"/>
      <circle cx="610" cy="548" r="21" fill="#f8fafc"/>
      <circle cx="665" cy="545" r="24" fill="#f8fafc"/>
      <circle cx="720" cy="549" r="22" fill="#f8fafc"/>
      <circle cx="775" cy="544" r="24" fill="#f8fafc"/>
      <circle cx="830" cy="549" r="22" fill="#f8fafc"/>
      <circle cx="885" cy="544" r="24" fill="#f8fafc"/>
      <circle cx="940" cy="549" r="22" fill="#f8fafc"/>
    </g>
  </g>

  <rect width="1366" height="69" fill="#16813b"/>
  <rect x="40" y="17" width="45" height="38" rx="2" fill="#fff"/>
  <circle cx="62.5" cy="36" r="13" fill="none" stroke="#16813b" stroke-width="2"/>
  <path d="M51 39c7-5 15-5 23 0" fill="none" stroke="#16813b" stroke-width="2"/>
  <text x="116" y="38" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="27" font-weight="800" letter-spacing="0.5">MARKAZ QURAN MULIA</text>
  <text x="116" y="58" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">MA'HAD TAHFIDZ DAN BAHASA ARAB</text>
  <text x="824" y="40" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">Berita</text>
  <text x="889" y="40" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">PPDB</text>
  <text x="963" y="40" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">Informasi</text>
  <text x="1069" y="40" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">Profil</text>
  <text x="1149" y="40" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">Galery</text>
  <text x="1238" y="40" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="700">Kontak Kami</text>

  <text x="263" y="267" fill="#e5e7eb" font-family="Inter, Arial, sans-serif" font-size="48" font-weight="800">
    <tspan x="263" dy="0">Selamat Datang di</tspan>
    <tspan x="263" dy="50">Website Sekolah</tspan>
    <tspan x="263" dy="50">Kami</tspan>
  </text>
  <text x="263" y="435" fill="#e5e7eb" font-family="Inter, Arial, sans-serif" font-size="17" font-weight="700">
    <tspan x="263" dy="0">Kami menawarkan program unggulan yang menantang dan</tspan>
    <tspan x="263" dy="26">menginspirasi siswa.</tspan>
  </text>
  <rect x="263" y="507" width="142" height="51" rx="8" fill="#16813b"/>
  <text x="282" y="537" fill="#fff" font-family="Inter, Arial, sans-serif" font-size="15" font-weight="800">Informasi PPDB</text>

  <g filter="url(#shadow)" transform="translate(758 224)">
    <rect x="28" y="20" width="332" height="332" rx="8" fill="#e5e7eb" stroke="#fff" transform="rotate(9 194 186)"/>
    <rect x="12" y="10" width="332" height="332" rx="8" fill="#cbd5e1" stroke="#fff" transform="rotate(-6 178 176)"/>
    <rect width="332" height="332" rx="8" fill="#f8fafc" stroke="#fff"/>
    <rect width="332" height="152" rx="8" fill="#dbe4ea"/>
    <rect y="142" width="332" height="68" fill="#6b3a38"/>
    <rect x="48" y="34" width="236" height="80" fill="#f3f4f6"/>
    <rect x="62" y="50" width="52" height="58" fill="#1f2937" opacity="0.72"/>
    <rect x="216" y="50" width="52" height="58" fill="#1f2937" opacity="0.72"/>
    <text x="74" y="182" fill="#f8fafc" font-family="Inter, Arial, sans-serif" font-size="14" font-weight="700">Welcome back to Markaz Quran Mulia</text>
    <rect y="210" width="332" height="122" fill="#e2e8f0"/>
    <g fill="#f8fafc">
      <circle cx="52" cy="252" r="18"/>
      <circle cx="92" cy="252" r="18"/>
      <circle cx="132" cy="252" r="18"/>
      <circle cx="172" cy="252" r="18"/>
      <circle cx="212" cy="252" r="18"/>
      <circle cx="252" cy="252" r="18"/>
      <circle cx="292" cy="252" r="18"/>
      <circle cx="72" cy="292" r="18"/>
      <circle cx="112" cy="292" r="18"/>
      <circle cx="152" cy="292" r="18"/>
      <circle cx="192" cy="292" r="18"/>
      <circle cx="232" cy="292" r="18"/>
      <circle cx="272" cy="292" r="18"/>
    </g>
  </g>
</svg>
