QR Download Split Banner Block for React

APP_URL at the top of the file. It points at an example address; use a page that sends iOS and Android visitors to the right store, so one code serves both, then keep the two inline links for people who prefer to search. The code is generated in the browser from that string, so there's no image to replace.

Scanners expect dark modules on a light background, and many fail on inverted codes. The tile keeps the catalog's black-on-white and adds a quiet zone (12 px of white around the pattern) so it scans in every theme. The shell around it is a muted tint that follows your theme.

The frame is an image named "QR code that opens the Hazelboard download page", and the caption is a figcaption in a figure, so the link text next to it is the real way in for people who can't scan. Both listing links are plain, named links.

Set [--qr-code-size:8rem] on the Qr Code to another size. 8 rem (128 px) scans comfortably from a phone held at arm's length and keeps the block under half a screen; below about 6 rem, scanning gets harder.

The code moves to the right edge and the text aligns to the start. The code itself is never mirrored.

The heading and the sentence come first, then the code at a fixed 8 rem under a rule, since a phone can't scan its own screen: its listing links are the quicker way, and they come first. At 320 pixels nothing scrolls sideways.