Tour Guide

1. Import the component:

import TourGuide from '@/components/TourGuide';
import { useState } from 'react';

2. Define your tour steps:

const steps = [
  {
    selector: '#element1',
    text: 'This is the first step description'
  },
  {
    selector: '#element2',
    text: 'This is the second step'
  },
];

3. Use in your component:

const [showTour, setShowTour] = useState(false);

{showTour && (
  <TourGuide
    steps={steps}
    onComplete={() => setShowTour(false)}
  />
)}