<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">Websites</title>
  <desc id="desc">Fast, conversion-focused websites built around your business</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="hero-grad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1C1714"/>
      <stop offset="1" stop-color="#2D2926"/>
    </linearGradient>
    <linearGradient id="accent" x1="0" y1="1" x2="0" y2="0">
      <stop offset="0" stop-color="#CF6A3C"/>
      <stop offset="1" stop-color="#E8895A"/>
    </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)"/>

  <!-- Main browser window -->
  <rect x="60" y="28" width="780" height="664" rx="14" fill="#FFFCF8" filter="url(#panel-shadow)"/>
  <!-- Chrome -->
  <rect x="60" y="28" width="780" height="40" rx="14" fill="#F0EDE8"/>
  <rect x="60" y="50" width="780" 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="220" y="40" width="400" height="16" rx="4" fill="#E8E4DC"/>
  <text x="420" y="51" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">ravexclient.co</text>
  <rect x="780" y="40" width="48" height="16" rx="4" fill="#E8E4DC"/>
  <text x="804" y="51" fill="#28CA42" font-size="7" font-family="system-ui" text-anchor="middle">● Secure</text>

  <!-- Site nav -->
  <rect x="60" y="68" width="780" height="44" fill="#1C1714"/>
  <text x="92" y="94" fill="#F5F0E8" font-size="13" font-weight="800" font-family="system-ui" letter-spacing="2">LOGO</text>
  <text x="240" y="94" fill="#9B9490" font-size="10" font-family="system-ui">Services</text>
  <text x="308" y="94" fill="#9B9490" font-size="10" font-family="system-ui">Portfolio</text>
  <text x="376" y="94" fill="#9B9490" font-size="10" font-family="system-ui">About</text>
  <text x="444" y="94" fill="#9B9490" font-size="10" font-family="system-ui">Contact</text>
  <rect x="748" y="80" width="80" height="24" rx="12" fill="#CF6A3C"/>
  <text x="788" y="95" fill="#FFFCF8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">Get Started</text>

  <!-- Hero section -->
  <rect x="60" y="112" width="780" height="240" fill="url(#hero-grad)"/>
  <circle cx="700" cy="200" r="180" fill="#CF6A3C" opacity="0.06"/>
  <circle cx="120" cy="290" r="100" fill="#7B6ABA" opacity="0.05"/>
  <text x="100" y="164" fill="#CF6A3C" font-size="9" font-weight="700" font-family="system-ui" letter-spacing="2">DIGITAL AGENCY · ACCRA</text>
  <text x="100" y="196" fill="#F5F0E8" font-size="26" font-weight="800" font-family="system-ui">We build websites</text>
  <text x="100" y="224" fill="#F5F0E8" font-size="26" font-weight="800" font-family="system-ui">that convert.</text>
  <text x="100" y="258" fill="#6B6560" font-size="11" font-family="system-ui">Strategy-led design for businesses ready to grow.</text>
  <rect x="100" y="276" width="120" height="36" rx="18" fill="#CF6A3C"/>
  <text x="160" y="298" fill="#FFFCF8" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">View our work →</text>
  <rect x="232" y="276" width="100" height="36" rx="18" fill="transparent" stroke="#3A3530" stroke-width="1"/>
  <text x="282" y="298" fill="#9B9490" font-size="11" font-family="system-ui" text-anchor="middle">Learn more</text>
  <!-- Hero visual -->
  <rect x="580" y="124" width="240" height="216" rx="8" fill="#252220"/>
  <rect x="592" y="136" width="216" height="140" rx="4" fill="#2D2926"/>
  <rect x="600" y="144" width="200" height="80" rx="3" fill="#3A3530"/>
  <rect x="608" y="152" width="120" height="8" rx="4" fill="#CF6A3C" opacity="0.6"/>
  <rect x="608" y="166" width="180" height="6" rx="3" fill="#4A4540" />
  <rect x="608" y="178" width="160" height="6" rx="3" fill="#4A4540"/>
  <rect x="608" y="194" width="80" height="22" rx="11" fill="#CF6A3C"/>
  <text x="648" y="208" fill="#FFFCF8" font-size="8" font-weight="600" font-family="system-ui" text-anchor="middle">See work →</text>
  <rect x="592" y="284" width="104" height="56" rx="4" fill="#2D2926"/>
  <rect x="600" y="294" width="88" height="6" rx="3" fill="#4A4540"/>
  <rect x="600" y="306" width="60" height="6" rx="3" fill="#4A4540"/>
  <rect x="600" y="318" width="40" height="14" rx="7" fill="#CF6A3C" opacity="0.5"/>
  <rect x="704" y="284" width="104" height="56" rx="4" fill="#2D2926"/>
  <rect x="712" y="294" width="88" height="6" rx="3" fill="#4A4540"/>
  <rect x="712" y="306" width="60" height="6" rx="3" fill="#4A4540"/>
  <rect x="712" y="318" width="40" height="14" rx="7" fill="#7B6ABA" opacity="0.5"/>

  <!-- Services section -->
  <rect x="60" y="352" width="780" height="200" fill="#F5F0E8"/>
  <text x="450" y="386" fill="#1C1714" font-size="14" font-weight="700" font-family="system-ui" text-anchor="middle">What We Build</text>
  <!-- Service cards -->
  <rect x="80" y="400" width="168" height="100" rx="8" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <rect x="80" y="400" width="168" height="4" rx="2" fill="#CF6A3C"/>
  <text x="164" y="428" fill="#1C1714" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Landing Pages</text>
  <text x="164" y="444" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">Built to convert</text>
  <text x="164" y="456" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">visitors into leads</text>
  <rect x="260" y="400" width="168" height="100" rx="8" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <rect x="260" y="400" width="168" height="4" rx="2" fill="#7B6ABA"/>
  <text x="344" y="428" fill="#1C1714" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">Brand Sites</text>
  <text x="344" y="444" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">Full multi-page</text>
  <text x="344" y="456" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">business presence</text>
  <rect x="440" y="400" width="168" height="100" rx="8" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <rect x="440" y="400" width="168" height="4" rx="2" fill="#2F80ED"/>
  <text x="524" y="428" fill="#1C1714" font-size="11" font-weight="700" font-family="system-ui" text-anchor="middle">E-Commerce</text>
  <text x="524" y="444" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">Product stores</text>
  <text x="524" y="456" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">with Stripe / Paystack</text>
  <rect x="620" y="400" width="200" height="100" rx="8" fill="#1C1714"/>
  <rect x="620" y="400" width="200" height="4" rx="2" fill="#CF6A3C"/>
  <text x="720" y="430" fill="#F5F0E8" font-size="12" font-weight="700" font-family="system-ui" text-anchor="middle">Ready to start?</text>
  <text x="720" y="448" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Most sites delivered in</text>
  <text x="720" y="460" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">3–6 weeks.</text>
  <rect x="660" y="468" width="120" height="22" rx="11" fill="#CF6A3C"/>
  <text x="720" y="482" fill="#FFFCF8" font-size="10" font-weight="600" font-family="system-ui" text-anchor="middle">Get in touch →</text>

  <!-- Footer strip -->
  <rect x="60" y="552" width="780" height="140" fill="#1C1714"/>
  <text x="100" y="584" fill="#F5F0E8" font-size="13" font-weight="800" font-family="system-ui" letter-spacing="2">LOGO</text>
  <text x="100" y="602" fill="#6B6560" font-size="9" font-family="system-ui">Strategy-led web for growing businesses.</text>
  <text x="560" y="584" fill="#9B9490" font-size="10" font-family="system-ui">Services</text>
  <text x="620" y="584" fill="#9B9490" font-size="10" font-family="system-ui">Work</text>
  <text x="668" y="584" fill="#9B9490" font-size="10" font-family="system-ui">About</text>
  <text x="716" y="584" fill="#9B9490" font-size="10" font-family="system-ui">Contact</text>
  <line x1="80" y1="616" x2="820" y2="616" stroke="#2D2926" stroke-width="1"/>
  <text x="100" y="634" fill="#6B6560" font-size="9" font-family="system-ui">© 2026 · Built with Next.js · Deployed on Vercel</text>
  <rect x="620" y="622" width="200" height="6" rx="3" fill="#28CA42" opacity="0.3"/>
  <text x="720" y="634" fill="#28CA42" font-size="8" font-family="system-ui" text-anchor="middle">98 Lighthouse score</text>
</svg>
