Mobile-friendly Extension page + Beta signup form#37
Merged
Conversation
The Extension product page and the Beta signup form were both built desktop-first; on a 375-wide viewport every section consumed a full screen of vertical space and the hero alone took two scrolls before the value prop appeared. This pass right-sizes spacing, type, and controls for mobile while keeping the desktop layout intact. Extension page: - Hero pt-32 pb-20 → pt-24 pb-12 sm:pt-32 sm:pb-20; tighter space-y, mb-6 instead of mb-8 on mobile. - Section py-20 → py-14 sm:py-20 across Features, Protocols, Sovereignty, Get Started. - Section H2 text-3xl → text-2xl sm:text-3xl. - Features grid is 2-col on mobile (was 1-col); cards drop to p-4 with smaller icon tile and text-xs body. - Protocols cards drop to p-4 / smaller logo / text-xs body so the description stops wrapping every 2 words. - Sovereignty card padding p-8 → p-6 sm:p-8 md:p-12; check icons align to top of multi-line items. - Get Started step grid is 2-col on mobile (was 1-col); circle shrinks 16→12 and number shrinks 2xl→lg. - Bottom CTA goes full-width on mobile. - Hero TiltCard caps at 300px on mobile (was 380px). Beta signup page: - Hero pt-32 → pt-24 sm:pt-32; h1 text-4xl → text-3xl sm:text-4xl lg:text-5xl with leading-[1.1] so the title stops wrapping into 4 lines. - Form moves to single-column on mobile (sm:grid-cols-2 instead of md:grid-cols-2) so name/email and telegram/nostr stack neatly on any phone. - Inputs go to py-3 (taller tap target) and text-base on mobile so iOS Safari doesn't auto-zoom on focus, dropping to text-sm at sm. - Submit row uses flex-col-reverse on mobile so the primary CTA sits above the privacy note; button goes w-full on mobile. - Success card is also full-width back-link on mobile and tighter padding/typography. No copy changes; pure layout/spacing/responsive-class adjustments. Verified at 375 (mobile), 760 (tablet) — page heights drop ~28% on mobile (Extension 6608→4808px, Beta 2141→1965px) without any desktop regression. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
website | 16cbec1 | Commit Preview URL Branch Preview URL |
May 10 2026, 09:38 PM |
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.
Summary
/products/extensionand/products/extension/betapages for mobile — sections, type, padding, and CTAs were all tuned for desktop, so on a 375 viewport each section consumed roughly a full screen and the hero took two scrolls before any value-prop content appeared.Highlights
py-20→py-14 sm:py-20across both pages; heropt-32→pt-24 sm:pt-32.sm:; inputs usetext-baseon mobile so iOS Safari doesn't auto-zoom on focus.6608 → 4808 px, Beta2141 → 1965 px.Test plan
🤖 Generated with Claude Code