When evaluating a SaaS, I often just skip the landing page and all of its marketing fancy words and go straight to Pricing page.

Usually, I will find what I need there: what features does the SaaS has, and how much do I have to pay to get what features.

For that reason, I added GIFs to every single feature of my SaaS pricing page:

Demo

CleanShot 2021-12-03 at 00.26.43.mp4

On mobile:

CleanShot 2021-12-03 at 00.28.32.mp4

That's 27 GIFs and took me a whole morning! You can see it here: https://blackmagic.so/membership/

I like my pricing page a lot. It even works on mobile! And people seem to like it too!

https://twitter.com/dsabar/status/1464112898901360640

If you have a SaaS, I encourage you to do the same.

How I built the tooltips

Here are the tools I used to do it:

The code

// These are the components inside the tooltip
import WebPortalTour from 'components/tour/WebPortalTour.js';
import MobileAppsTour from 'components/tour/MobileAppsTour.js';
import BrowserExtensionsTour from 'components/tour/BrowserExtensionsTour.js';
import ScheduleTweetsThreadsTour from 'components/tour/ScheduleTweetsThreadsTour.js';
//... more

// Define the list of your "tour" like this
const TOUR = {
  TweetRealTimeMetricTour,
  PastInteractionsTour,
  BrowserExtensionsTour,
  WebPortalTour,
  MobileAppsTour,
  ScheduleRetweetsTour,
  ScheduleTweetsThreadsTour,
  // ... more
}

// In your React 

The feature lines: