[YvesCesar]

Summary

The hero photo and the "See LibreSign in action" section looked low resolution on the home page. This PR replaces the three images, switches them to WebP and makes the hero image responsive.

Image	Before	After
Hero (hero/hero-image)	1920×1067 PNG, 945 KB for every screen	960 / 1440 / 1920 / 2880 px WebP via srcset, 14 to 79 KB
Demo background (conection_wallpaper_mobile)	1376×768 PNG, 2 MB	2752×1536 WebP, 351 KB
Phone mockup (libresign_mobile_acess_oficial)	445×915 PNG, 155 KB	890×1830 WebP, 95 KB

Details

• Hero photo: the previous art was a 1247px cutout stretched to 1920px, with jagged edges and a heavy color filter. It was replaced by a real photo of a professional using a tablet: Business Woman, by Direct Media on StockSnap, released under CC0 1.0. The origin and license are recorded in REUSE.toml and the license text was added to LICENSES/CC0-1.0.txt (reuse lint: no bad, missing or unused licenses).
• Responsive hero: hero-section accepts two optional parameters, used only by the home page:
  • imageSrcset and imageSizes. Because the image uses object-fit: cover with a 2.4:1 photo, it is drawn wider than the viewport below 1728px (for example 1250 CSS px on a 375px phone). The home declares sizes from each breakpoint's hero height cap times 2.4, so no screen gets a file smaller than the drawn width: a 375px phone at 2x downloads the 2880px file (79 KB), still far below the previous 945 KB.
  • imagePositionMobile, exposed as --ud-hero-image-position-mobile and applied to the <img> up to 991px. The home uses 75% top to keep the person in frame on phones and tablets. Other pages are unchanged.
• Phone mockup: it had been downscaled from 735px to 445px when the keyboard was added, while it is displayed at up to 500px. The login screen was rebuilt from the sharp screenshot in d538867, aligned onto the current mockup, and the frame and keyboard were upscaled to 2x. Lossy WebP was kept on purpose: on the screen text it measures 40.7 dB PSNR against the lossless render (no visible difference at 2x zoom), while lossless would weigh 869 KB.
• Demo background: upscaled 2x, since it is stretched to the full viewport width.

How to test

1. Build the local site and open the home page.
2. Check the hero at 375, 768, 1366 and 1920px: the person stays in frame and the text keeps its contrast.
3. In the network tab, confirm the requested hero file is at least as wide as the drawn image (for example hero-image-1440.webp at 375px and 1x).
4. Scroll to "See LibreSign in action" and check that the phone screen text is sharp.

[github-actions]

PR Preview Action v1.8.1-4-g2a6da11
🚀 View preview at https://libresign.github.io/site-preview/pr-preview/pr-516/
Built to branch main at 2026-10-16 16:26 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[github-actions]

🚀 Starting production deploy of site header and footer fragments...