<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">Web Apps</title>
  <desc id="desc">Custom dashboards, portals, and internal systems</desc>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#F8F5F0"/>
      <stop offset="1" stop-color="#EDE8E0"/>
    </linearGradient>
    <linearGradient id="sidebar-g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1C1714"/>
      <stop offset="1" stop-color="#2D2926"/>
    </linearGradient>
    <linearGradient id="bar1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#CF6A3C"/>
      <stop offset="1" stop-color="#E8895A"/>
    </linearGradient>
    <linearGradient id="bar2" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7B6ABA"/>
      <stop offset="1" stop-color="#9B8CD8"/>
    </linearGradient>
    <filter id="panel-shadow">
      <feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#1C1714" flood-opacity="0.18"/>
    </filter>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#1C1714" flood-opacity="0.10"/>
    </filter>
  </defs>

  <rect width="1200" height="720" fill="url(#bg)"/>
  <rect x="60" y="28" width="1080" height="664" rx="14" fill="#FFFCF8" filter="url(#panel-shadow)"/>
  <rect x="60" y="28" width="1080" height="40" rx="14" fill="#F0EDE8"/>
  <rect x="60" y="50" width="1080" height="18" fill="#F0EDE8"/>
  <circle cx="84" cy="48" r="5" fill="#FF6058"/>
  <circle cx="100" cy="48" r="5" fill="#FFBD2E"/>
  <circle cx="116" cy="48" r="5" fill="#28CA42"/>
  <rect x="280" y="40" width="580" height="16" rx="4" fill="#E8E4DC"/>
  <text x="570" y="51" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">portal.businessname.co/dashboard</text>

  <!-- Sidebar -->
  <rect x="60" y="68" width="190" height="624" fill="url(#sidebar-g)"/>
  <rect x="76" y="84" width="28" height="28" rx="6" fill="#CF6A3C"/>
  <text x="112" y="103" fill="#F5F0E8" font-size="12" font-weight="700" font-family="system-ui">ClientPortal</text>
  <rect x="76" y="130" width="158" height="30" rx="6" fill="rgba(207,106,60,0.22)"/>
  <rect x="86" y="141" width="8" height="8" rx="2" fill="#CF6A3C"/>
  <text x="102" y="149" fill="#F5F0E8" font-size="10" font-family="system-ui">Dashboard</text>
  <rect x="86" y="172" width="8" height="8" rx="2" fill="#6B6560"/>
  <text x="102" y="180" fill="#9B9490" font-size="10" font-family="system-ui">Analytics</text>
  <rect x="86" y="196" width="8" height="8" rx="2" fill="#6B6560"/>
  <text x="102" y="204" fill="#9B9490" font-size="10" font-family="system-ui">Orders</text>
  <rect x="86" y="220" width="8" height="8" rx="2" fill="#6B6560"/>
  <text x="102" y="228" fill="#9B9490" font-size="10" font-family="system-ui">Customers</text>
  <rect x="86" y="244" width="8" height="8" rx="2" fill="#6B6560"/>
  <text x="102" y="252" fill="#9B9490" font-size="10" font-family="system-ui">Reports</text>
  <rect x="86" y="268" width="8" height="8" rx="2" fill="#6B6560"/>
  <text x="102" y="276" fill="#9B9490" font-size="10" font-family="system-ui">Settings</text>

  <!-- Main content -->
  <text x="272" y="100" fill="#1C1714" font-size="16" font-weight="700" font-family="system-ui">Overview</text>
  <text x="272" y="118" fill="#6B6560" font-size="10" font-family="system-ui">April 2026 · All time zones</text>
  <rect x="1040" y="82" width="88" height="28" rx="6" fill="#CF6A3C"/>
  <text x="1084" y="100" fill="#FFFCF8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">+ New Report</text>

  <!-- KPI cards -->
  <rect x="272" y="132" width="178" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="288" y="158" fill="#6B6560" font-size="9" font-family="system-ui">TOTAL REVENUE</text>
  <text x="288" y="186" fill="#1C1714" font-size="26" font-weight="800" font-family="system-ui">GHS 84k</text>
  <rect x="288" y="204" width="48" height="6" rx="3" fill="#28CA42" opacity="0.7"/>
  <text x="342" y="210" fill="#28CA42" font-size="9" font-family="system-ui">+23% MoM</text>

  <rect x="462" y="132" width="178" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="478" y="158" fill="#6B6560" font-size="9" font-family="system-ui">ACTIVE USERS</text>
  <text x="478" y="186" fill="#1C1714" font-size="26" font-weight="800" font-family="system-ui">1,284</text>
  <rect x="478" y="204" width="40" height="6" rx="3" fill="#CF6A3C"/>
  <text x="524" y="210" fill="#CF6A3C" font-size="9" font-family="system-ui">+8% WoW</text>

  <rect x="652" y="132" width="178" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="668" y="158" fill="#6B6560" font-size="9" font-family="system-ui">OPEN TASKS</text>
  <text x="668" y="186" fill="#1C1714" font-size="26" font-weight="800" font-family="system-ui">47</text>
  <rect x="668" y="204" width="28" height="6" rx="3" fill="#FFBD2E" opacity="0.7"/>
  <text x="702" y="210" fill="#6B6560" font-size="9" font-family="system-ui">12 high priority</text>

  <rect x="842" y="132" width="178" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="858" y="158" fill="#6B6560" font-size="9" font-family="system-ui">SATISFACTION</text>
  <text x="858" y="186" fill="#28CA42" font-size="26" font-weight="800" font-family="system-ui">4.8/5</text>
  <rect x="858" y="204" width="56" height="6" rx="3" fill="#28CA42" opacity="0.7"/>
  <text x="920" y="210" fill="#6B6560" font-size="9" font-family="system-ui">284 reviews</text>

  <!-- Revenue chart -->
  <rect x="272" y="236" width="460" height="210" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="288" y="260" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">Revenue · Last 6 months</text>
  <!-- Grid lines -->
  <line x1="296" y1="420" x2="716" y2="420" stroke="#E8E4DC" stroke-width="1"/>
  <line x1="296" y1="390" x2="716" y2="390" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="296" y1="360" x2="716" y2="360" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="296" y1="330" x2="716" y2="330" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="296" y1="300" x2="716" y2="300" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <!-- Bars -->
  <rect x="306" y="380" width="50" height="40" rx="4" fill="url(#bar1)" opacity="0.7"/>
  <rect x="370" y="355" width="50" height="65" rx="4" fill="url(#bar1)" opacity="0.8"/>
  <rect x="434" y="340" width="50" height="80" rx="4" fill="url(#bar1)" opacity="0.85"/>
  <rect x="498" y="315" width="50" height="105" rx="4" fill="url(#bar1)"/>
  <rect x="562" y="298" width="50" height="122" rx="4" fill="url(#bar1)"/>
  <rect x="626" y="278" width="50" height="142" rx="4" fill="url(#bar1)"/>
  <!-- Month labels -->
  <text x="331" y="435" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Nov</text>
  <text x="395" y="435" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Dec</text>
  <text x="459" y="435" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Jan</text>
  <text x="523" y="435" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Feb</text>
  <text x="587" y="435" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Mar</text>
  <text x="651" y="435" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Apr</text>
  <text x="288" y="300" fill="#9B9490" font-size="7" font-family="system-ui">GHS 80k</text>
  <text x="288" y="360" fill="#9B9490" font-size="7" font-family="system-ui">GHS 40k</text>
  <text x="288" y="420" fill="#9B9490" font-size="7" font-family="system-ui">GHS 0</text>

  <!-- User activity donut/ring -->
  <rect x="744" y="236" width="384" height="210" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="760" y="260" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">User Activity</text>
  <!-- Ring chart approximation -->
  <circle cx="870" cy="348" r="64" fill="none" stroke="#E8E4DC" stroke-width="20"/>
  <circle cx="870" cy="348" r="64" fill="none" stroke="#CF6A3C" stroke-width="20" stroke-dasharray="201 201" stroke-dashoffset="0" transform="rotate(-90 870 348)"/>
  <circle cx="870" cy="348" r="64" fill="none" stroke="#7B6ABA" stroke-width="20" stroke-dasharray="80 322" stroke-dashoffset="-201" transform="rotate(-90 870 348)"/>
  <circle cx="870" cy="348" r="64" fill="none" stroke="#2F80ED" stroke-width="20" stroke-dasharray="41 361" stroke-dashoffset="-281" transform="rotate(-90 870 348)"/>
  <text x="870" y="344" fill="#1C1714" font-size="18" font-weight="800" font-family="system-ui" text-anchor="middle">1,284</text>
  <text x="870" y="360" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">active users</text>
  <!-- Legend -->
  <rect x="970" y="310" width="10" height="10" rx="2" fill="#CF6A3C"/>
  <text x="986" y="319" fill="#6B6560" font-size="9" font-family="system-ui">Web (63%)</text>
  <rect x="970" y="330" width="10" height="10" rx="2" fill="#7B6ABA"/>
  <text x="986" y="339" fill="#6B6560" font-size="9" font-family="system-ui">Mobile (25%)</text>
  <rect x="970" y="350" width="10" height="10" rx="2" fill="#2F80ED"/>
  <text x="986" y="359" fill="#6B6560" font-size="9" font-family="system-ui">API (12%)</text>

  <!-- Recent activity table -->
  <rect x="272" y="460" width="856" height="220" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="288" y="486" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">Recent Orders</text>
  <text x="1108" y="486" fill="#CF6A3C" font-size="10" font-weight="600" font-family="system-ui" text-anchor="end">View all →</text>
  <rect x="272" y="494" width="856" height="22" fill="#F5F0E8"/>
  <text x="288" y="509" fill="#6B6560" font-size="9" font-weight="600" font-family="system-ui">ORDER ID</text>
  <text x="430" y="509" fill="#6B6560" font-size="9" font-weight="600" font-family="system-ui">CUSTOMER</text>
  <text x="610" y="509" fill="#6B6560" font-size="9" font-weight="600" font-family="system-ui">AMOUNT</text>
  <text x="730" y="509" fill="#6B6560" font-size="9" font-weight="600" font-family="system-ui">DATE</text>
  <text x="870" y="509" fill="#6B6560" font-size="9" font-weight="600" font-family="system-ui">STATUS</text>
  <text x="1000" y="509" fill="#6B6560" font-size="9" font-weight="600" font-family="system-ui">ACTION</text>
  <line x1="272" y1="516" x2="1128" y2="516" stroke="#E8E4DC" stroke-width="1"/>
  <!-- Row 1 -->
  <text x="288" y="533" fill="#1C1714" font-size="10" font-family="system-ui">#ORD-8841</text>
  <text x="430" y="533" fill="#1C1714" font-size="10" font-family="system-ui">Kwame Asante</text>
  <text x="610" y="533" fill="#1C1714" font-size="10" font-family="system-ui">GHS 1,250</text>
  <text x="730" y="533" fill="#6B6560" font-size="10" font-family="system-ui">Apr 28, 2026</text>
  <rect x="870" y="524" width="58" height="15" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="899" y="534" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Fulfilled</text>
  <text x="1000" y="533" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui">View</text>
  <line x1="272" y1="542" x2="1128" y2="542" stroke="#E8E4DC" stroke-width="1"/>
  <!-- Row 2 -->
  <text x="288" y="559" fill="#1C1714" font-size="10" font-family="system-ui">#ORD-8840</text>
  <text x="430" y="559" fill="#1C1714" font-size="10" font-family="system-ui">Ama Owusu</text>
  <text x="610" y="559" fill="#1C1714" font-size="10" font-family="system-ui">GHS 3,400</text>
  <text x="730" y="559" fill="#6B6560" font-size="10" font-family="system-ui">Apr 28, 2026</text>
  <rect x="870" y="550" width="64" height="15" rx="8" fill="rgba(255,189,46,0.15)"/>
  <text x="902" y="560" fill="#B88A00" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Processing</text>
  <text x="1000" y="559" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui">View</text>
  <line x1="272" y1="568" x2="1128" y2="568" stroke="#E8E4DC" stroke-width="1"/>
  <!-- Row 3 -->
  <text x="288" y="585" fill="#1C1714" font-size="10" font-family="system-ui">#ORD-8839</text>
  <text x="430" y="585" fill="#1C1714" font-size="10" font-family="system-ui">Kofi Mensah</text>
  <text x="610" y="585" fill="#1C1714" font-size="10" font-family="system-ui">GHS 780</text>
  <text x="730" y="585" fill="#6B6560" font-size="10" font-family="system-ui">Apr 27, 2026</text>
  <rect x="870" y="576" width="58" height="15" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="899" y="586" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Fulfilled</text>
  <text x="1000" y="585" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui">View</text>
  <line x1="272" y1="594" x2="1128" y2="594" stroke="#E8E4DC" stroke-width="1"/>
  <!-- Row 4 -->
  <text x="288" y="611" fill="#1C1714" font-size="10" font-family="system-ui">#ORD-8838</text>
  <text x="430" y="611" fill="#1C1714" font-size="10" font-family="system-ui">Akosua Boateng</text>
  <text x="610" y="611" fill="#1C1714" font-size="10" font-family="system-ui">GHS 5,100</text>
  <text x="730" y="611" fill="#6B6560" font-size="10" font-family="system-ui">Apr 27, 2026</text>
  <rect x="870" y="602" width="58" height="15" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="899" y="612" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Fulfilled</text>
  <text x="1000" y="611" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui">View</text>
  <line x1="272" y1="620" x2="1128" y2="620" stroke="#E8E4DC" stroke-width="1"/>
  <text x="288" y="657" fill="#9B9490" font-size="9" font-family="system-ui">Built with Next.js · Supabase · PostgreSQL · Stripe · Deployed on Vercel</text>
</svg>
