SaaS Landing Page
Figma → WebflowSTRATA
- Year
- 2026
- Role
- UI/UX Design & Webflow Development
- Services
- UI/UX Design, Figma, Webflow Development, Motion Design
The Challenge
SaaS landing pages tend to look alike: a headline, three icons and a pricing table. STRATA needed to show a complicated product — forecasts built from billing, CRM and ad data — in a way a founder understands in a few seconds.
The Approach
The whole page was designed in Figma with colour and type set up as variables, then approved before any build. The hero shows the product itself — a live-looking dashboard with a forecast chart — instead of an abstract illustration.
The Solution
Eleven sections built in Webflow from the approved Figma file, using the same colour variables, with responsive layouts for tablet and phone, a word-by-word hero animation, bars that rise when the cursor moves over the chart, black cards that drop in from above, and an open-and-close FAQ.
Explore the Site
An auto-scrolling preview built from real screenshots of the live website.
Key Features
- Designed in Figma with colour and type variables, then built in Webflow
- Hero dashboard with forecast chart, KPI cards and floating notes
- Chart bars rise one by one when the cursor moves over them
- Black cards drop in from above with a bounce as you scroll
- A “Try colours” switcher with five presets that recolours the whole page in one click
- Bento features, dark results band, pricing and open-and-close FAQ
- A bento footer with newsletter, system status and links
Visual Story