101 lines
5.6 KiB
XML
101 lines
5.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 750" width="1200" height="750">
|
|
<!-- Tempo SaaS — Refined Minimal, dark, Linear-style -->
|
|
<defs>
|
|
<style>
|
|
.surface { fill: #0A0A0A; }
|
|
.surface-1 { fill: #121212; }
|
|
.surface-2 { fill: #1A1A1A; }
|
|
.ink { fill: #F5F5F5; }
|
|
.ink-muted { fill: #A3A3A3; }
|
|
.ink-subtle { fill: #6B6B6B; }
|
|
.accent { fill: #7B85E6; }
|
|
.accent-strong { fill: #5E6AD2; }
|
|
.hairline { stroke: #1F1F1F; }
|
|
.hairline-strong { stroke: #2E2E2E; }
|
|
.good { fill: #4ADE80; }
|
|
.bad { fill: #F87171; }
|
|
.sans { font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif; }
|
|
.mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }
|
|
</style>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect class="surface" width="1200" height="750"/>
|
|
|
|
<!-- Subtle radial accent -->
|
|
<ellipse cx="600" cy="0" rx="700" ry="400" fill="#7B85E6" opacity="0.08"/>
|
|
|
|
<!-- Nav -->
|
|
<line x1="60" y1="68" x2="1140" y2="68" class="hairline" stroke-width="1"/>
|
|
<circle cx="80" cy="42" r="8" fill="none" stroke="#7B85E6" stroke-width="1.5"/>
|
|
<path d="M80 34 A8 8 0 0 1 80 50 Z" fill="#7B85E6"/>
|
|
<text x="100" y="48" class="sans" font-size="15" font-weight="600" letter-spacing="-0.3" fill="#F5F5F5">Tempo</text>
|
|
|
|
<text x="900" y="48" class="sans" font-size="13" fill="#A3A3A3">Product</text>
|
|
<text x="970" y="48" class="sans" font-size="13" fill="#A3A3A3">Customers</text>
|
|
<text x="1060" y="48" class="sans" font-size="13" fill="#A3A3A3">Pricing</text>
|
|
<rect x="1110" y="32" width="55" height="26" fill="none" stroke="#2E2E2E" stroke-width="1" rx="4"/>
|
|
<text x="1117" y="49" class="sans" font-size="12" fill="#F5F5F5">Start →</text>
|
|
|
|
<!-- Hero text -->
|
|
<circle cx="76" cy="135" r="4" class="accent"/>
|
|
<text x="88" y="138" class="mono" font-size="11" letter-spacing="2" fill="#A3A3A3">V2.4 — NOW WITH WEB VITALS ATTRIBUTION</text>
|
|
|
|
<text x="60" y="220" class="sans" font-size="64" font-weight="600" letter-spacing="-2" fill="#F5F5F5">See what your</text>
|
|
<text x="60" y="290" class="sans" font-size="64" font-weight="600" letter-spacing="-2" fill="#F5F5F5">users see.</text>
|
|
<text x="60" y="360" class="sans" font-size="64" font-weight="600" letter-spacing="-2" fill="#F5F5F5">Down to the <tspan fill="#7B85E6">millisecond.</tspan></text>
|
|
|
|
<!-- Right: dashboard panel -->
|
|
<rect x="700" y="135" width="460" height="320" fill="#121212" stroke="#2E2E2E" stroke-width="1" rx="8"/>
|
|
|
|
<!-- Panel chrome -->
|
|
<circle cx="720" cy="158" r="4" fill="#FF5F57"/>
|
|
<circle cx="734" cy="158" r="4" fill="#FEBC2E"/>
|
|
<circle cx="748" cy="158" r="4" fill="#28C840"/>
|
|
<text x="770" y="161" class="mono" font-size="10" fill="#6B6B6B">tempo.app / dashboard / acme-prod</text>
|
|
<line x1="700" y1="180" x2="1160" y2="180" class="hairline" stroke-width="1"/>
|
|
|
|
<!-- Panel content -->
|
|
<text x="720" y="210" class="mono" font-size="10" letter-spacing="1.5" fill="#A3A3A3">PRODUCTION · ACME-WEB</text>
|
|
<text x="720" y="232" class="sans" font-size="18" font-weight="600" fill="#F5F5F5">Core Web Vitals</text>
|
|
|
|
<!-- Time range segmented control -->
|
|
<rect x="1050" y="200" width="100" height="24" fill="#1A1A1A" stroke="#1F1F1F" stroke-width="1" rx="4"/>
|
|
<text x="1065" y="216" class="mono" font-size="10" fill="#6B6B6B">7d</text>
|
|
<text x="1095" y="216" class="mono" font-size="10" fill="#A3A3A3">30d</text>
|
|
<text x="1130" y="216" class="mono" font-size="10" fill="#6B6B6B">1h</text>
|
|
|
|
<!-- Vitals row -->
|
|
<line x1="720" y1="260" x2="1140" y2="260" class="hairline" stroke-width="1"/>
|
|
<text x="720" y="285" class="mono" font-size="10" letter-spacing="1.5" fill="#A3A3A3">LCP</text>
|
|
<text x="720" y="315" class="sans" font-size="28" font-weight="600" letter-spacing="-0.5" fill="#F5F5F5">1.2<tspan font-size="14" fill="#A3A3A3">s</tspan></text>
|
|
<text x="720" y="340" class="mono" font-size="10" letter-spacing="1.5" class="good" fill="#4ADE80">↓ 18%</text>
|
|
|
|
<text x="850" y="285" class="mono" font-size="10" letter-spacing="1.5" fill="#A3A3A3">INP</text>
|
|
<text x="850" y="315" class="sans" font-size="28" font-weight="600" letter-spacing="-0.5" fill="#F5F5F5">142<tspan font-size="14" fill="#A3A3A3">ms</tspan></text>
|
|
<text x="850" y="340" class="mono" font-size="10" letter-spacing="1.5" fill="#4ADE80">↓ 24%</text>
|
|
|
|
<text x="980" y="285" class="mono" font-size="10" letter-spacing="1.5" fill="#A3A3A3">CLS</text>
|
|
<text x="980" y="315" class="sans" font-size="28" font-weight="600" letter-spacing="-0.5" fill="#F5F5F5">0.04</text>
|
|
<text x="980" y="340" class="mono" font-size="10" letter-spacing="1.5" fill="#A3A3A3">→ 0%</text>
|
|
|
|
<!-- Chart bars -->
|
|
<g fill="#7B85E6">
|
|
<rect x="720" y="380" width="22" height="50" rx="2"/>
|
|
<rect x="752" y="375" width="22" height="55" rx="2"/>
|
|
<rect x="784" y="370" width="22" height="60" rx="2"/>
|
|
<rect x="816" y="378" width="22" height="52" rx="2"/>
|
|
<rect x="848" y="360" width="22" height="70" rx="2"/>
|
|
<rect x="880" y="355" width="22" height="75" rx="2"/>
|
|
<rect x="912" y="350" width="22" height="80" rx="2"/>
|
|
<rect x="944" y="345" width="22" height="85" rx="2"/>
|
|
<rect x="976" y="358" width="22" height="72" rx="2"/>
|
|
<rect x="1008" y="342" width="22" height="88" rx="2"/>
|
|
<rect x="1040" y="338" width="22" height="92" rx="2"/>
|
|
<rect x="1072" y="345" width="22" height="85" rx="2"/>
|
|
<rect x="1104" y="330" width="22" height="100" rx="2"/>
|
|
</g>
|
|
|
|
<!-- Tag in corner -->
|
|
<text x="1140" y="745" class="mono" font-size="9" letter-spacing="1.5" fill="#6B6B6B" text-anchor="end">— EX.02 — REFINED MINIMAL / DARK / LINEAR-STYLE</text>
|
|
</svg>
|