feat(site): split hero with editor above the fold + site-wide improvement pass#3
Merged
Conversation
- Remove unused vinext-starter scaffolding (drizzle/db, examples, chatgpt-auth, template SVGs) and rewrite README for the RED site - Add canonical + metadataBase, theme-color, JSON-LD SoftwareApplication, robots.txt, sitemap.xml, and a branded 404 page (real 404 status) - Compress og.png 1.3MB -> 307KB (1200x630 palette PNG) - Split the page into a server component with InstallPicker/PreviewTabs client islands; add aria-live copy feedback and OS auto-detection for the install tab - Keep nav links visible on mobile instead of hiding them Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Rebuild the hero as a two-column grid: left-aligned copy with the InstallPicker island, right column a framed ghostty-code capture that bleeds off the right viewport edge (negative margin mirroring the .shell math, guarded by overflow-x: clip on the hero). Drops the ASCII wordmark, moves the priority preload from PreviewTabs to the hero image, and stacks to a centered column with a shorter cropped shot under 900px. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The bleeding panel now dissolves via a gradient mask aligned to the point where the nav rule ends, instead of cutting hard at the viewport edge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The dissolve now ends fully transparent where the nav rule ends, with a 200px fade run leading into it (140px/90px at smaller breakpoints), so no panel content spills past the page boundary at any viewport width. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Grid items default to min-width auto, so the long curl command widened the copy column and pushed the screenshot panel. Let the column shrink and pin the install button to the column width so commands ellipsize in place. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The split hero already leads with the Edit capture, so the tabbed preview below now defaults to Commands instead of repeating the same screenshot. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
1 participant
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 this does
Puts a real editor capture above the fold and ships a full improvement pass underneath it.
Hero (variant B of three explored)
ghostty-code.jpgcapture on the right, bleeding past the shell and dissolving via a gradient mask that completes exactly where the nav rule ends (200px fade run; 140/90px at smaller breakpoints)min-width: 0) and long commands ellipsize in placeImprovement base
Tests
5/5 passing (installer drift check, SSR assertions, SEO metadata, 404, assets) + lint clean. New assertions cover canonical/theme-color/JSON-LD, robots/sitemap, the 404 page, and an og.png size ceiling.
🤖 Generated with Claude Code