Pick the trade
Architecture, photography, development or events: the sample proposal swaps its content instantly.
WEBSITES / LANDING PAGE
Propostaria.
A landing page that shows the product working.
Landing page for Propostaria, a business-proposal app: visitors pick their trade, watch the sample proposal change, follow the timeline of an acceptance and try the signature right on the page.
Visit the websitepropostaria.com.br ↗
01 — THE PROJECT
Explain by showing.
Propostaria is an app for building, sending and tracking business proposals, where the client reads in the browser and accepts with a signature on the page itself. I built the landing page. The idea was to explain the product with the product: instead of screenshots, the page has a sample proposal that changes with the chosen trade, a timeline that follows a proposal from draft to acceptance, and a demo where the visitor signs and watches the status turn to "Accepted".
From design to code: HTML, CSS and JavaScript, with scroll animations (GSAP, ScrollTrigger and SplitText), smooth scrolling with Lenis, all switched off for people who prefer reduced motion, and deployed on Netlify.
02 — THE EXPERIENCE
The product explains itself in three moments.
Follow along
A timeline shows the proposal going out on WhatsApp, being opened by the client and closed with the acceptance.
Sign
Visitors type a name, accept the sample proposal and see the result, just as their own clients would.
03 — STYLE GUIDE
The identity, in code.
Typography
Instrument Sans
- Font
- Instrument Sans
- Weight
- 500
- Size
- 40 px
- Line height
- 110%
Proposals your client reads to the end and signs.
- Font
- Instrument Sans
- Weight
- 500
- Size
- 32 px
- Line height
- 115%
Proposals your client reads to the end and signs.
- Font
- Instrument Sans
- Weight
- 500
- Size
- 24 px
- Line height
- 120%
Proposals your client reads to the end and signs.
- Font
- Newsreader
- Weight
- 500
- Use
- Brand
Propostaria
- Font
- Mrs Saint Delafield
- Weight
- 400
- Use
- Signature
Helena Duarte
- Font
- Instrument Sans
- Weight
- 400
- Size
- 16 px
- Line height
- 155%
Build, send and track business proposals that look like important documents.
Colors
Paper
Ink
Pen
Support
Brand
PropostariaPropostariaPropostaria
Components
Create a free accountSee how it works
Create a free accountSee how it worksSign in
Create a free account
ArchitecturePhotographyEvents
30% deposit via Pix30% deposit via Pix
ArchitectureEvents
AcceptedDoneWarningNew
Apartment 802 renovationFor Helena Duarte · Proposal no. 0042
04 — FINAL DESIGN
Final design.
KEEP EXPLORING
Another website, another idea.
Kompres