| 1 | --- |
| 2 | const accent = "var(--alc-accent-deep)"; |
| 3 | --- |
| 4 | |
| 5 | <svg viewBox="0 0 280 130" width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid meet"> |
| 6 | <!-- Browser chrome --> |
| 7 | <g transform="translate(40 22)"> |
| 8 | <rect width="200" height="80" rx="8" fill="var(--alc-bg-elev-1)" stroke="var(--alc-hairline-2)" stroke-width="1" /> |
| 9 | <circle cx="10" cy="10" r="2.4" fill="var(--alc-danger)" /> |
| 10 | <circle cx="18" cy="10" r="2.4" fill="var(--alc-warn)" /> |
| 11 | <circle cx="26" cy="10" r="2.4" fill="var(--alc-accent-bright)" /> |
| 12 | <rect x="36" y="5" width="158" height="11" rx="5" fill="var(--alc-bg)" stroke="var(--alc-hairline-2)" stroke-width="0.8" /> |
| 13 | <text x="44" y="13" font-family="var(--alc-font-mono)" font-size="7" fill="var(--alc-fg-3)">https://app.workers.dev</text> |
| 14 | |
| 15 | <!-- mock page content with framework dots --> |
| 16 | <rect x="14" y="26" width="172" height="6" rx="2" fill={accent} opacity="0.85" /> |
| 17 | <rect x="14" y="38" width="120" height="4" rx="2" fill="var(--alc-fg-3)" opacity="0.5" /> |
| 18 | <rect x="14" y="48" width="146" height="4" rx="2" fill="var(--alc-fg-3)" opacity="0.45" /> |
| 19 | <rect x="14" y="58" width="100" height="4" rx="2" fill="var(--alc-fg-3)" opacity="0.4" /> |
| 20 | |
| 21 | <!-- framework brand dots --> |
| 22 | <circle cx="148" cy="64" r="3" fill="#FF6154" /> |
| 23 | <circle cx="158" cy="64" r="3" fill="#FF5D01" /> |
| 24 | <circle cx="168" cy="64" r="3" fill="#00DC82" /> |
| 25 | <circle cx="178" cy="64" r="3" fill="#61DAFB" /> |
| 26 | </g> |
| 27 | |
| 28 | <!-- caption --> |
| 29 | <text x="140" y="118" text-anchor="middle" font-family="var(--alc-font-hand)" font-size="13" fill={accent} font-style="italic"> |
| 30 | Vite · TanStack · Astro · React · Hugo |
| 31 | </text> |
| 32 | </svg> |