Skip to content

feat(landing): new visual design with real demo windows - #245

Merged
gnacho merged 2 commits into
mainfrom
feat/243-shots
Oct 29, 2026
Merged

gnacho merged 2 commits into
mainfrom
feat/243-shots

Conversation

@gnacho

@gnacho gnacho commented Oct 29, 2026

Copy link
Copy Markdown
Owner

Ports the delivered visual design to the static landing (no React build) and
replaces the pixelated screenshots with twelve real captures of the app.

What changed

  • Visual design: serif hero with a three-lane sync animation, IBM Plex Sans
    and Serif self-hosted (plus JetBrains Mono on desktop only), inline icon
    sprite, sticky header with a mobile menu, blue install band, FAQ block.
  • Screenshots: main window, activity and settings, in Spanish and English,
    light and dark, captured from the app connected to a throwaway Nextcloud with
    two demo accounts. 60 WebP files (1440 plus 320/640/960/1080 variants).
    The slider switches window and theme independently and keeps the current
    window when the language or theme changes.

Defects of the delivered design fixed here

  • The "previous" arrow advanced instead of going back.
  • File cards flew over the lane labels.
  • Without JavaScript the page stayed blank (regression of landing: hero text only paints after JS runs (blank page without JavaScript) #239).
  • The mobile note about the desktop-only scope was missing.
  • Blue buttons on dark failed AA contrast (4.38:1).
  • Mono face was downloaded on phones; now it falls back to the system one.

Also fixed while auditing SEO and security

  • Canonical and og:url now follow the language (?hl=en), matching hreflang.
  • FAQ JSON-LD was in English on a Spanish page; translated and tagged inLanguage.
  • og:image:alt and twitter:image:alt, empty src on the lightbox image,
    missing space in the h1 and a stale lastmod in the sitemap.

Verification

  • Behaviour suite: 127/127 checks (header, mobile menu, slider, lightbox,
    copy button, keyboard, swipe, theme and language persistence, no-JS, reduced
    motion) against local and production.
  • Weight suite: 25/25 (198 KB decoded on a phone, no Google Fonts, no
    GoatCounter, mono not fetched on mobile).
  • axe-core: 0 violations at 390 and 1280 px in both themes.
  • Lighthouse mobile on production: 100 / 100 / 100 / 100, LCP 1.2 s, CLS 0.004.

Closes #244
Closes #243

Rebuild the page from the delivered design while keeping it static: serif
hero with a sync animation, IBM Plex self-hosted, inline icon sprite, header
with a mobile menu, and a slider with three windows times two themes.

Fix what the delivered design got wrong: the previous arrow moved forward,
file cards overlapped the lane labels, no JavaScript left a blank page, the
desktop-only install note was missing on phones, and blue buttons failed AA
contrast in the dark theme.

Also correct the canonical URL per language, translate the FAQ markup to
Spanish, add the missing og:image:alt and keep the h1 spacing.
@gnacho
gnacho merged commit b807302 into main Oct 29, 2026
2 checks passed
@gnacho
gnacho deleted the feat/243-shots branch October 29, 2026 18:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant