Zephyr Beacon

The anatomy zephyr was measured from, laid out to the reference's own proportions. The sky is a card set into the page, with the site's nav cut into its top edge as a tab. Under it, in the open middle the cloud banks leave, sit an eyebrow pill, a two-line claim ending on an italic word, two lines of support, a white pill button and a caption. A product frame rises out of the card's bottom edge, half in the sky and half on the page. Every position and size was measured off the reference as a share of its width and is set in container units, so the composition holds at any desktop width; on a phone the type keeps its floor and the layout flows.

The reference's round video button is kept, and made real: it pauses the sky and the butterfly, and plays them again. The butterfly flies over the whole section, copy included, so wherever your cursor stops, over the headline or the button, it lands there.

Honest by construction: the reference's app is full of an invented customer, invented sites and invented revenue, so this frame is a wireframe in the same layout, with no names and no numbers, where your own product shot goes. The nav's links are real ones.

Preview only. This section's code isn't offered to copy.