PNG mockups → 10-page Framer site in 48h (pitch build) by Andrii BobrovskyiPNG mockups → 10-page Framer site in 48h (pitch build) by Andrii Bobrovskyi

PNG mockups → 10-page Framer site in 48h (pitch build)

Andrii Bobrovskyi

Andrii Bobrovskyi

Pitch build — made from materials a prospect sent through an inquiry. The order was not placed.
What it is A site for a helicopter-logistics and ground-support business in the Canadian Rockies. The materials: two PNG mockups of a homepage, an image of a business card and one photograph. No Figma file, no style guide, no copy deck. I built the site from that in under 48 hours.
The homepage from the hero down to the five service cards.
The homepage from the hero down to the five service cards.
What I built
10 pages: Home, About, Contact, five service pages (helicopter logistics, lodge provisioning, guest and crew transport, boat access, storage and staging), Privacy, Terms
Every page at 1200, 810 and 390 px
Palette taken from the printed card: ink, copper and cream. Montserrat and Inter, both free Google Fonts, easy to swap
The prospect's own photo in every hero, and cropped differently in two content sections
The Services dropdown links to five service pages that share one template.
The Services dropdown links to five service pages that share one template.
Built for a non-designer to edit Buttons and cards are plain frames rather than components, so changing text means clicking the text, not hunting through a properties panel. The mockups showed five services on one shared layout, so they became five static pages; a CMS version is a later step if the list grows.
Four more of the ten pages: Helicopter Logistics, About, Storage & Staging and Guest & Crew Transport.
Four more of the ten pages: Helicopter Logistics, About, Storage & Staging and Guest & Crew Transport.
The hard part The header: a services dropdown, a mobile burger and a background that fills in on scroll. Canvas interactions inside a layout template, set through Framer's Server API, didn't fire on the published site. It was the third build where I had seen that, so the header is a React code component.
One fix on the way The mockup read "STORAGE & TRAGING". The card had it right, so the site says STAGING.
On mobile: a service page, the menu with services expanded, and the quote form.
On mobile: a service page, the menu with services expanded, and the quote form.
Stack Framer, React code components, Server API scripts. Privacy and Terms are bracketed templates for the owner to fill in.
Like this project

Posted Aug 30, 2026

Pitch build from what a prospect sent through an inquiry: two PNG homepage mockups, a business card and one photo. A 10-page Framer site in under 48 hours, with a code-component header and a layout a non-designer edits by clicking. The order was not placed.