Polish the landing page phone frame - #149
Merged
Merged
Conversation
Give the hero phone a titanium-style band, black bezel, Dynamic Island with a camera dot, an iOS status bar (time, signal, Wi-Fi, battery), physical action/volume/power buttons and a home indicator. The island is centred absolutely so it stays put at narrow widths, where it shrinks slightly to clear the status icons. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NXDEuHKjJRWb5b4U9DdEQK
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The hero phone on the landing page was a flat dark slab: the screen ran straight to the top edge and the two side buttons were 3px slivers that disappeared against the page background. This redraws the frame so it reads as a phone at a glance:
The island is positioned absolutely against the screen so it stays centred at every width. In the existing narrow-screen media block it shrinks slightly so it clears the status icons on the 310px phone layout.
Scope
Only
web/main.ts(hero markup),web/landing.cssand a CHANGELOG line. All new elements arearia-hidden; nothing about the terminal demo content or the copy changes. Thephone-proofscreenshot frames further down the page are untouched.Checks
node scripts/test-landing-seo.mjspassesnode scripts/test-mobile-controls.mjspasses🤖 Generated with Claude Code
https://claude.ai/code/session_01NXDEuHKjJRWb5b4U9DdEQK