feat: landing page redesign

- New hero headline "Turn any video into a watch party" with animated
  gradient highlight, sharper subtitle and quiet trust line under the CTAs
- Changelog badge redesigned as the koala's speech bubble (version and
  release date baked in at build time, no version.json fetch anymore)
- Light/dark theme toggle in the header (dark default, pre-paint via
  lang-init, full light theme across sections)
- Use cases and "Why KoalaSync" merged into one section with the three
  strongest feature tiles; question-mark koala moved to the FAQ
- FAQ and self-hosting setup collapsed by default via shared
  section-collapse component (hash deep links auto-open them)
- Compat/juggler section more compact
- og:image switched to the 1280x640 repository OpenGraph card (landing
  and join page), generated during build
- "watch party" keyword added to meta title/description in all 15 locales
- All em-dashes removed from user-facing copy

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
KoalaDev
2026-07-05 21:50:33 +02:00
parent 793248053c
commit 37df4b267c
24 changed files with 853 additions and 398 deletions
+2 -2
View File
@@ -16,13 +16,13 @@
<meta property="og:url" content="https://sync.koalastuff.net/join">
<meta property="og:title" content="Join Room | KoalaSync">
<meta property="og:description" content="You've been invited to watch videos together in perfect sync with your friends on KoalaSync.">
<meta property="og:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
<meta property="og:image" content="https://sync.koalastuff.net/assets/og-image.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Join Room | KoalaSync">
<meta name="twitter:description" content="You've been invited to watch videos together in perfect sync with your friends on KoalaSync.">
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/PlatformJuggler_New.webp">
<meta name="twitter:image" content="https://sync.koalastuff.net/assets/og-image.png">
<!-- Mobile Browser Theme Styling -->
<meta name="theme-color" content="#0f172a">