Realistic phone frames, header Contact button, and logo mark on the landing page

[artemiia]

What changed

Landing page only; the docs, viewer, CLI, and Worker are untouched.

Phone captures look like a phone. The hero capture and the two under "Follow the work. See the result." now sit in a realistic device frame: metal rim, black bezel, status bar with time and signal/Wi-Fi/battery glyphs, Dynamic Island, and action/volume/power buttons. One renderPhoneFrame() template renders all three, and the chrome scales with the phone's width through a single --phone-scale custom property, stepping down at the existing 760/560/420px breakpoints so the island never meets the status icons. The "Working" / "Complete" captions move from inside the frame to below it, since a real device has no caption chin.

Header. The site's cloud terminal mark (the existing favicon) appears left of the wordmark. A Contact button sits beside Copy install and opens the visitor's mail app with [email protected] prefilled and "shell.online" as the subject. It shares the pill base with Copy install, collapses to an envelope icon under 560px, and keeps "Contact" as its accessible name. The header's GitHub link is now targeted by a class rather than :last-of-type, so adding a link after it no longer hides it on tablets; its visibility at every width matches the current site.

This is the smallest change that gives the landing page a believable device and a direct way to reach the team without adding a form, an endpoint, or any change to the page's CSP.

Preview of this branch: https://artemiia.github.io/shell.online/ (static pages only; sessions do not run there).

Verification

• Added or updated regression tests where behavior changed — no behavior with test coverage changed; the landing SEO script still passes against the new markup
• Ran npm run check and npm run build:web
• Ran go test -race ./... and go vet ./... — not applicable, no Go changes
• Considered bearer-link, terminal-input, secret, and privacy implications — the only new outbound link is a mailto:; no scripts, fetches, or form actions were added
• Did not include real share links, terminal contents, credentials, or Cloudflare configuration

Checked in Chrome at 320, 360, 375, 390, 421, 460, 500, 520, 560, 561, 600, 760, 761, 1040 and 1400px: no horizontal overflow, no header overflow, no island/icon collision on any of the three phones, no console errors. The docs pages, which share the bundle, still render.

Changelog

Added under Unreleased / Changed in CHANGELOG.md.

🤖 Generated with Claude Code

https://claude.ai/code/session_0156JJtiUu7SEQTkvPrYgYbd

[github-actions]

AI review

relevant — Adds realistic responsive phone frames, a landing-page Contact mailto link, and the existing favicon mark to the header. The implementation is scoped to the landing page and includes an appropriate Unreleased changelog entry.

The changes are directly related to the landing page, implement the described UI behavior, preserve the existing navigation and copy-install functionality, and do not introduce apparent security or product regressions.

Findings

• No concrete problems found in the submitted patch.

Suggested changelog

Add realistic responsive device frames around the landing page phone captures, add the cloud terminal mark to the wordmark, and add a Contact button that opens a prefilled email to the team.

_{Automated review of the submitted diff; it does not replace maintainer approval or CI.}