Homepage: Mobile/Desktop path chooser with SuperNative-first messaging

[simonhamp]

Why

For the Mobile v4 release, the homepage needs to demonstrate that NativePHP for Mobile doesn't rely on web views — the old "Under the hood" copy and diagram said the opposite ("shows your app in a native web view"), and the tools section led with ten JS frameworks. Conflating mobile and desktop in one narrative also kept forcing hedged copy, so the page now splits into two tracks.

What

Path chooser — the hero CTAs are now a role="tablist" toggle ("Mobile app" / "Desktop app"), backed by a persisted Alpine store ($store.platform, default mobile, registered on alpine:init because $persist only exists once Livewire installs Alpine's plugins). A docs link follows the selection, with a static Mobile-docs href as the no-JS fallback.

Blocks that adapt per track:

Block	Mobile	Desktop
Under the hood	PHP in-process, Blade → real SwiftUI/Jetpack Compose over shared memory, "We call this SuperNative", link to the SuperNative intro (version-pinned to /docs/mobile/4/… while v4 is prerelease)	Static PHP binary + Electron, authenticated HTTP, Chromium window (per the desktop v2 docs)
Diagram	Phone stack: native views highlighted, "Web view (optional)" chip	Window stack ending in a Chromium window
Fast/Tiny apps	"Tiny apps / Mobile apps under 50MB"	"One file / Ships as a single executable"
Bring your favorite tools	"(almost) any Composer package", PHP-only pills (Laravel, Pest, PHPUnit), SwiftUI + Jetpack Compose render targets, "No web view required"	Full ecosystem pill list, Chromium-window note
How do I get it?	composer require nativephp/mobile	composer require nativephp/desktop
Announcement cards (Plugins, Masterclass, Jump, Bifrost)	shown	hidden (they're all mobile-specific)

Bifrost card — Windows track removed; connector redrawn as a single two-arm fan whose endpoints land exactly on the two platform tile centres; "Your NativePHP app" label removed and the bubble is now truly centred via grid-cols-[1fr_auto_1fr].

Hero cleanup — "Try our Mobile app" links (Play Store/TestFlight/Source) removed.

Fixes along the way

• Tools pills render once, not per-track: Pest's SVG gradient uses a bare id="a", so duplicating the pill silently dropped its fill. One list now toggles only the web pills (skill-pill forwards attributes to allow x-show), and a DOMXPath test fails on any duplicated pill.
• Right column alignment: replaced xl:max-w-max (content-width, only filled the row by accident when there were 14 pills) with lg:grow xl:max-w-none.
• Build warning silenced: flux-pro's carousel stub declares the malformed class [snap="mandatory"_&]:snap-always, which Lightning CSS rejects on every build. Excluded just that stub dir via @source not — we don't use <flux:carousel>; verified only carousel selectors left the bundle. Drop when Flux fixes it upstream.

Testing

• tests/Feature/HomeExplainerNativeUiTest.php (new): both tracks' copy and diagrams, store bindings, pill scoping/uniqueness, SuperNative link target returns 200, Bifrost has no Windows track.
• HomeCourseCardTest: announcements-wrapper scoping asserted via DOMXPath (cards stay in the DOM; only visibility changes).
• Full suite: 1269 passing (php -d memory_limit=1G vendor/bin/phpunit — the default 128M limit fatals in an unrelated intervention/image test).
• Both tracks screenshotted in light + dark via headless Chrome, including toggle interaction; arm/centre alignment verified by DOM measurement.

Notes for review

• The web-frameworks pill cut on Mobile is a messaging choice — Livewire/Filament/React et al. still work there via the optional web-view component, and the diagram keeps that nuance.
• Announcements are hidden with CSS on the Desktop track, so their content remains in the HTML for crawlers.
• docs/mobile/4/edge-components/introduction.md:32 still says EDGE compiles to "a simple JSON configuration", which contradicts the new "No JSON bridge" homepage line (and renderer.md) — worth fixing before release, separate PR.

🤖 Generated with Claude Code