Site: bring the landing page up to the final Landing Page v10

[GLinnik21]

Before: #615 ported the landing page from an early export of the Landing Page v10 design. Design kept changing after that, and the site still showed the older version: a two-lane GPU/decoder diagram, a checklist of Plex features, a separate renew block, and Compatibility and Privacy in their own section.

After: the page matches the final v10, dark only as before.

• Hero: the kicker above the headline is gone. "View on GitHub" is a secondary pill button.
• Features:
  • The cards are a mixed-size layout: 6 columns on wide screens, 2 between 760 and 999px, 1 on phones. The 60 fps card is a full-height numeral, the offline chips have icons, and the optional player chips are outlined.
  • On phones the glass close-up crops the wide render, so Home / Movies / TV Shows / search all show. The posters close-up fades into its caption.
  • Screenshots: Home and Player run full width, and Library and Search sit side by side with Search set lower. Each one opens as it scrolls in. The credits line under them is removed; the footer still links the credits.
• Works with your Plex: a centred word cloud in large type, with 3 key items in bold.
• Approach: the section name is a small label. The story, the two benefit lines and an isometric stack (PlxNative → OpenGL → GPU buffer → Screen) form one block. Light streaks run down the stack; they stop under reduced motion and pause off screen.
• Community: the Ko-fi support is a lit card.
• Install:
  • The chip reads "A one-time setup". This supersedes Site: install chip reads "A one-time setup" (Landing Page v10 update) #624.
  • The renewal note moves into the Developer Mode card, since it does not apply to rooted TVs.
  • LG Content Store gets a label pill and lede-sized text.
  • Compatibility notes and Privacy close the section, without the Known issues link.
• FAQ: the music answer drops "Watchlist or Discover". The two new questions are added to the FAQPage JSON-LD so it matches the visible FAQ.

The images are unchanged and all come from the release pipeline: the close-ups and screenshots the stills job refreshes, and the film, posters and glows from the render job. Nothing was copied from the design bundle.

How: hand-ported into site/index.html, site/styles.css and site/site.js with the existing tokens. Rules for removed markup (kicker, checklist pills, flow diagram, renew block, notes section) are deleted. site.js points the existing scroll "open from smaller" effect at the screenshot frames. The docs that said only closeup-player was unused now also name the narrow glass cut.

Verification:

• python3 -m unittest ci/test_ci_workflows.py tests/test_site_video.py tests/test_site_stills.py tests/test_demo_library.py: 378 run, OK (24 skipped).
• tools/subset-site-fonts.py check: every character on the staged site is covered.
• Staged like pages.yml and rendered in Chromium at 1440×900 and at an iPhone size (393×852, DPR 3), at each scroll stage. Nothing scrolls sideways. The only console error is the Trendshift badge, which the sandbox network blocks.

Performance, the same scripted measurements on main and on this branch:

	LCP	CLS	Slow frames (>25ms) in a full-page scroll	Long tasks while scrolling
Desktop, main → branch	1532 → 1520 ms	0.001 → 0.001	4 → 1	0 → 0
iPhone size, 4× CPU, main → branch	1628 → 916 ms	0 → 0	3 → 1 (worst 83 → 33 ms)	0 → 0

Phones download about 45 KB more, because the glass panel uses the wide render.

Please check: the Plex cloud falls to about one item per line on phones, which is v10's own type size at that width.

🤖 Generated with Claude Code

https://claude.ai/code/session_01BJ2h83YxmxxQSEFgaMJM5a

---

Generated by Claude Code