Skip to main content
Copied!
How to use

Click. Paste. Ship.

  1. Click any hero section above. The complete HTML + CSS lands on your clipboard.
  2. Paste anywhere: your stylesheet, a Tailwind @layer, a Framer code component, a React/Vue/Svelte template.
  3. Rename the class: they're scoped .hp1 to .hp60 so they won't collide with your stylesheet.
  4. Swap the copy and colours: every hero is fully standalone, no CSS variable dependencies.

Writing hero copy that converts

A hero answers three questions in three seconds: what is this, who is it for, what do I do next. Headline = the result, not the feature. Subhead = who it's for + the outcome in plain language. CTA = an action verb starting with the user (Get my quotes, Start free trial). Avoid "synergy", "transform", "revolutionise", they read as filler. The shorter, the stronger.

Built by the team at FindDevs. Need an Australian developer to wire one of these into your real app? Get 3 free quotes →

Joshua from Logan City just received three quotes for Mobile App development. Get your 3 quotes now
7 minutes ago