<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">E-Commerce Brand Website</title>
  <desc id="desc">High-converting e-commerce storefront with product grid, mobile checkout, and performance scores</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="#3A2E28"/>
    </linearGradient>
    <linearGradient id="bar-conv" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#CF6A3C"/>
      <stop offset="1" stop-color="#E8895A"/>
    </linearGradient>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#1C1714" flood-opacity="0.10"/>
    </filter>
    <filter id="panel-shadow">
      <feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#1C1714" flood-opacity="0.18"/>
    </filter>
  </defs>

  <rect width="1200" height="720" fill="url(#bg)"/>

  <!-- Browser chrome -->
  <rect x="36" y="28" width="1128" height="664" rx="14" fill="#FFFCF8" filter="url(#panel-shadow)"/>
  <rect x="36" y="28" width="1128" height="44" rx="14" fill="#F0EDE8"/>
  <rect x="36" y="54" width="1128" height="18" fill="#F0EDE8"/>
  <circle cx="62" cy="50" r="6" fill="#FF6058"/>
  <circle cx="82" cy="50" r="6" fill="#FFBD2E"/>
  <circle cx="102" cy="50" r="6" fill="#28CA42"/>
  <rect x="360" y="40" width="480" height="20" rx="4" fill="#E8E4DC"/>
  <text x="600" y="54" fill="#6B6560" font-size="10" font-family="system-ui" text-anchor="middle">brandstore.co/shop</text>

  <!-- Site nav bar -->
  <rect x="36" y="72" width="1128" height="48" fill="#1C1714"/>
  <text x="80" y="101" fill="#F5F0E8" font-size="14" font-weight="800" font-family="system-ui" letter-spacing="3">BRAND</text>
  <text x="340" y="101" fill="#9B9490" font-size="11" font-family="system-ui">New Arrivals</text>
  <text x="440" y="101" fill="#9B9490" font-size="11" font-family="system-ui">Collections</text>
  <text x="540" y="101" fill="#9B9490" font-size="11" font-family="system-ui">Sale</text>
  <text x="620" y="101" fill="#9B9490" font-size="11" font-family="system-ui">About</text>
  <rect x="1020" y="86" width="80" height="24" rx="12" fill="#CF6A3C"/>
  <text x="1060" y="101" fill="#FFFCF8" font-size="11" font-weight="600" font-family="system-ui" text-anchor="middle">Shop Now</text>
  <text x="970" y="101" fill="#F5F0E8" font-size="11" font-family="system-ui">Cart (2)</text>

  <!-- Hero section -->
  <rect x="36" y="120" width="540" height="250" fill="url(#hero-grad)"/>
  <text x="60" y="168" fill="#CF6A3C" font-size="10" font-weight="600" font-family="system-ui" letter-spacing="2">NEW COLLECTION · SS26</text>
  <text x="60" y="196" fill="#F5F0E8" font-size="24" font-weight="800" font-family="system-ui">Minimal.</text>
  <text x="60" y="224" fill="#F5F0E8" font-size="24" font-weight="800" font-family="system-ui">Intentional.</text>
  <text x="60" y="260" fill="#9B9490" font-size="11" font-family="system-ui" xml:space="preserve">Essentials designed for everyday life.</text>
  <rect x="60" y="278" width="120" height="34" rx="17" fill="#CF6A3C"/>
  <text x="120" y="299" fill="#FFFCF8" font-size="11" font-weight="600" font-family="system-ui" text-anchor="middle">Explore →</text>
  <rect x="196" y="278" width="100" height="34" rx="17" fill="transparent" stroke="#6B6560" stroke-width="1"/>
  <text x="246" y="299" fill="#9B9490" font-size="11" font-family="system-ui" text-anchor="middle">View Lookbook</text>
  <!-- Hero image placeholder -->
  <rect x="386" y="120" width="190" height="250" fill="#2D2926"/>
  <rect x="420" y="160" width="120" height="170" rx="6" fill="#3A2E28"/>
  <rect x="430" y="170" width="100" height="100" rx="4" fill="#4A3E38" opacity="0.8"/>
  <text x="480" y="226" fill="#6B6560" font-size="9" font-family="system-ui" text-anchor="middle">product</text>
  <text x="430" y="286" fill="#CF6A3C" font-size="11" font-weight="700" font-family="system-ui">GHS 180</text>

  <!-- Product grid -->
  <text x="600" y="148" fill="#1C1714" font-size="14" font-weight="700" font-family="system-ui">Featured Products</text>
  <!-- Product card 1 -->
  <rect x="600" y="158" width="164" height="210" rx="8" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <rect x="600" y="158" width="164" height="130" rx="8" fill="#E8E4DC"/>
  <rect x="624" y="178" width="116" height="90" rx="4" fill="#DDD8D0"/>
  <rect x="648" y="198" width="68" height="50" rx="2" fill="#CFCBC5" opacity="0.8"/>
  <text x="608" y="308" fill="#6B6560" font-size="9" font-family="system-ui">Organic Linen Tee</text>
  <text x="608" y="323" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">GHS 145</text>
  <rect x="608" y="333" width="60" height="22" rx="11" fill="#CF6A3C"/>
  <text x="638" y="347" fill="#FFFCF8" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Add to cart</text>

  <!-- Product card 2 -->
  <rect x="776" y="158" width="164" height="210" rx="8" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <rect x="776" y="158" width="164" height="130" rx="8" fill="#E8E4DC"/>
  <rect x="800" y="178" width="116" height="90" rx="4" fill="#DDD8D0"/>
  <rect x="824" y="198" width="68" height="50" rx="2" fill="#CFCBC5" opacity="0.8"/>
  <text x="784" y="308" fill="#6B6560" font-size="9" font-family="system-ui">Canvas Tote Bag</text>
  <text x="784" y="323" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">GHS 89</text>
  <rect x="784" y="333" width="60" height="22" rx="11" fill="#CF6A3C"/>
  <text x="814" y="347" fill="#FFFCF8" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Add to cart</text>

  <!-- Product card 3 -->
  <rect x="952" y="158" width="164" height="210" rx="8" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <rect x="952" y="158" width="164" height="130" rx="8" fill="#E8E4DC"/>
  <rect x="976" y="178" width="116" height="90" rx="4" fill="#DDD8D0"/>
  <rect x="1000" y="198" width="68" height="50" rx="2" fill="#CFCBC5" opacity="0.8"/>
  <text x="960" y="308" fill="#6B6560" font-size="9" font-family="system-ui">Merino Wool Scarf</text>
  <text x="960" y="323" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">GHS 220</text>
  <rect x="960" y="333" width="60" height="22" rx="11" fill="#CF6A3C"/>
  <text x="990" y="347" fill="#FFFCF8" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Add to cart</text>

  <!-- Mobile checkout panel -->
  <rect x="36" y="380" width="260" height="310" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="52" y="406" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">Mobile Checkout</text>
  <rect x="52" y="416" width="74" height="16" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="89" y="427" fill="#28CA42" font-size="8" font-weight="600" font-family="system-ui" text-anchor="middle">Optimised</text>
  <!-- Phone mock -->
  <rect x="82" y="438" width="130" height="220" rx="16" fill="#1C1714" stroke="#2D2926" stroke-width="2"/>
  <rect x="118" y="440" width="58" height="8" rx="4" fill="#2D2926"/>
  <rect x="90" y="454" width="114" height="196" rx="8" fill="#F8F5F0"/>
  <!-- Checkout steps on phone -->
  <rect x="96" y="460" width="102" height="18" rx="4" fill="#F0EDE8"/>
  <text x="147" y="472" fill="#1C1714" font-size="7" font-weight="600" font-family="system-ui" text-anchor="middle">Checkout · Step 2 of 3</text>
  <text x="96" y="492" fill="#6B6560" font-size="7" font-family="system-ui">Delivery address</text>
  <rect x="96" y="496" width="102" height="14" rx="3" fill="#E8E4DC"/>
  <text x="96" y="518" fill="#6B6560" font-size="7" font-family="system-ui">Card details</text>
  <rect x="96" y="522" width="102" height="14" rx="3" fill="#E8E4DC"/>
  <rect x="96" y="542" width="70" height="14" rx="3" fill="#E8E4DC"/>
  <rect x="96" y="564" width="102" height="22" rx="11" fill="#CF6A3C"/>
  <text x="147" y="578" fill="#FFFCF8" font-size="8" font-weight="700" font-family="system-ui" text-anchor="middle">Place Order →</text>
  <rect x="96" y="592" width="102" height="4" rx="2" fill="#E8E4DC"/>
  <rect x="96" y="592" width="62" height="4" rx="2" fill="#28CA42"/>
  <text x="147" y="616" fill="#9B9490" font-size="6" font-family="system-ui" text-anchor="middle">60% complete</text>
  <text x="52" y="662" fill="#CF6A3C" font-size="10" font-weight="700" font-family="system-ui">+340%</text>
  <text x="52" y="676" fill="#6B6560" font-size="9" font-family="system-ui">mobile conversion</text>

  <!-- Performance metrics panel -->
  <rect x="312" y="380" width="290" height="148" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="328" y="406" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">Performance Scores</text>
  <!-- Lighthouse badge -->
  <rect x="548" y="392" width="42" height="22" rx="11" fill="rgba(40,202,66,0.15)"/>
  <text x="569" y="406" fill="#28CA42" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">98</text>
  <text x="328" y="428" fill="#6B6560" font-size="10" font-family="system-ui">Performance</text>
  <rect x="420" y="418" width="162" height="10" rx="5" fill="#E8E4DC"/>
  <rect x="420" y="418" width="158" height="10" rx="5" fill="#28CA42" opacity="0.7"/>
  <text x="588" y="428" fill="#28CA42" font-size="9" font-weight="700" font-family="system-ui" text-anchor="end">98</text>
  <text x="328" y="450" fill="#6B6560" font-size="10" font-family="system-ui">Accessibility</text>
  <rect x="420" y="440" width="162" height="10" rx="5" fill="#E8E4DC"/>
  <rect x="420" y="440" width="154" height="10" rx="5" fill="#28CA42" opacity="0.7"/>
  <text x="588" y="450" fill="#28CA42" font-size="9" font-weight="700" font-family="system-ui" text-anchor="end">95</text>
  <text x="328" y="472" fill="#6B6560" font-size="10" font-family="system-ui">Best Practices</text>
  <rect x="420" y="462" width="162" height="10" rx="5" fill="#E8E4DC"/>
  <rect x="420" y="462" width="162" height="10" rx="5" fill="#28CA42" opacity="0.7"/>
  <text x="588" y="472" fill="#28CA42" font-size="9" font-weight="700" font-family="system-ui" text-anchor="end">100</text>
  <text x="328" y="494" fill="#6B6560" font-size="10" font-family="system-ui">SEO</text>
  <rect x="420" y="484" width="162" height="10" rx="5" fill="#E8E4DC"/>
  <rect x="420" y="484" width="162" height="10" rx="5" fill="#28CA42" opacity="0.7"/>
  <text x="588" y="494" fill="#28CA42" font-size="9" font-weight="700" font-family="system-ui" text-anchor="end">100</text>
  <text x="328" y="516" fill="#9B9490" font-size="9" font-family="system-ui">LCP: 1.4s · FID: 18ms · CLS: 0.01</text>

  <!-- Revenue metrics -->
  <rect x="312" y="540" width="290" height="148" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="328" y="566" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">Conversion Impact</text>
  <text x="328" y="590" fill="#6B6560" font-size="10" font-family="system-ui">Mobile conversion rate</text>
  <rect x="328" y="600" width="256" height="12" rx="6" fill="#E8E4DC"/>
  <rect x="328" y="600" width="230" height="12" rx="6" fill="url(#bar-conv)"/>
  <text x="595" y="611" fill="#CF6A3C" font-size="9" font-weight="700" font-family="system-ui" text-anchor="end">3.4%</text>
  <text x="328" y="630" fill="#9B9490" font-size="8" font-family="system-ui">was 0.8% before rebuild</text>
  <text x="328" y="650" fill="#6B6560" font-size="10" font-family="system-ui">Cart abandonment</text>
  <rect x="328" y="660" width="256" height="12" rx="6" fill="#E8E4DC"/>
  <rect x="328" y="660" width="78" height="12" rx="6" fill="#7B6ABA" opacity="0.7"/>
  <text x="595" y="671" fill="#7B6ABA" font-size="9" font-weight="700" font-family="system-ui" text-anchor="end">30%</text>
  <text x="328" y="683" fill="#9B9490" font-size="8" font-family="system-ui">was 70% before rebuild</text>

  <!-- Conversion chart area -->
  <rect x="618" y="380" width="546" height="310" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="634" y="406" fill="#1C1714" font-size="12" font-weight="700" font-family="system-ui">Revenue Trend — Post-Launch</text>
  <rect x="1074" y="392" width="72" height="22" rx="11" fill="rgba(207,106,60,0.12)"/>
  <text x="1110" y="406" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">+340% MoM</text>
  <!-- Chart -->
  <line x1="634" y1="640" x2="1148" y2="640" stroke="#E8E4DC" stroke-width="1"/>
  <line x1="634" y1="580" x2="1148" y2="580" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="4,4"/>
  <line x1="634" y1="520" x2="1148" y2="520" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="4,4"/>
  <line x1="634" y1="460" x2="1148" y2="460" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="4,4"/>
  <!-- Revenue line -->
  <polyline points="670,620 730,615 790,610 850,590 910,560 970,520 1030,480 1090,440" fill="none" stroke="#CF6A3C" stroke-width="2.5" stroke-linejoin="round"/>
  <!-- Fill under the line -->
  <polygon points="670,620 730,615 790,610 850,590 910,560 970,520 1030,480 1090,440 1090,640 670,640" fill="#CF6A3C" opacity="0.08"/>
  <!-- Data points -->
  <circle cx="670" cy="620" r="4" fill="#CF6A3C"/>
  <circle cx="730" cy="615" r="4" fill="#CF6A3C"/>
  <circle cx="790" cy="610" r="4" fill="#CF6A3C"/>
  <circle cx="850" cy="590" r="4" fill="#CF6A3C"/>
  <circle cx="910" cy="560" r="4" fill="#CF6A3C"/>
  <circle cx="970" cy="520" r="5" fill="#CF6A3C"/>
  <circle cx="1030" cy="480" r="4" fill="#CF6A3C"/>
  <circle cx="1090" cy="440" r="5" fill="#CF6A3C"/>
  <!-- Launch marker -->
  <line x1="850" y1="416" x2="850" y2="640" stroke="#7B6ABA" stroke-width="1" stroke-dasharray="4,3"/>
  <rect x="818" y="416" width="64" height="18" rx="9" fill="#7B6ABA" opacity="0.15"/>
  <text x="850" y="428" fill="#7B6ABA" font-size="8" font-weight="600" font-family="system-ui" text-anchor="middle">Site launch</text>
  <!-- Month labels -->
  <text x="670" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Aug</text>
  <text x="730" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Sep</text>
  <text x="790" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Oct</text>
  <text x="850" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Nov</text>
  <text x="910" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Dec</text>
  <text x="970" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Jan</text>
  <text x="1030" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Feb</text>
  <text x="1090" y="656" fill="#9B9490" font-size="8" font-family="system-ui" text-anchor="middle">Mar</text>
  <!-- Tech stack footer -->
  <rect x="634" y="666" width="494" height="14" rx="0" fill="transparent"/>
  <text x="634" y="678" fill="#9B9490" font-size="9" font-family="system-ui">Built with Next.js · Sanity CMS · Stripe · Vercel · 1.4s LCP</text>
</svg>
