Onboarding Demo

This template uses Supademo on the home page to have an onboarding demo of the app. It changes based on the language that you choose and it the demo itself is responsive.

apps/web-app/src/components/hero.tsx

const Hero = () => {
  const locale = useLocale();

  let urlMobile = 'https://app.supademo.com/embed/clzfjih6c0zux9x77zxw0d8hw';
  let urlLaptop = 'https://app.supademo.com/embed/clzfj4kif0zu79x77zku9zki8';

  switch (locale) {
    case 'jp': {
      urlMobile = 'https://app.supademo.com/embed/clzfm930c00xpkpbx7jsh15u3';
      urlLaptop = 'https://app.supademo.com/embed/clzflyhno00ukkpbx35qhrgfk';
      break;
    }
    default: {
      urlMobile = 'https://app.supademo.com/embed/clzfjih6c0zux9x77zxw0d8hw';
      urlLaptop = 'https://app.supademo.com/embed/clzfj4kif0zu79x77zku9zki8';
    }
  }

Create an account here https://supademo.cello.so/0n8yDxaNsWe and create a demo. Replace the embed links above with your own by copying the link by clicking the button and replacing /demo/ with /embed/

This Supademo part is optional and you can replace it with your own component or something. This is just something that I want to try to play with.