Mobile-Aware Tour

'use client';
 
import { Tour } from 'nfsfu234-tour-guide';
 
const steps = [
  {
    target: '#hero',
    content: 'Welcome to our platform!',
    device: 'both',
  },
  {
    target: '#desktop-sidebar',
    content: 'Use the sidebar to navigate between sections.',
    device: 'desktop', // Desktop only
  },
  {
    target: '#mobile-menu',
    content: 'Tap the menu icon to navigate.',
    device: 'mobile', // Mobile only
  },
  {
    target: '#search',
    content: 'Search for anything here.',
    device: 'both',
  },
];
 
export default function MobileAwareTour() {
  return <Tour steps={steps} theme="dark" accentColor="#10b981" />;
}

const steps = [
  {
    target: '#pricing',
    content: 'Choose from our flexible pricing plans. We offer monthly and annual billing.',
    contentMobile: 'Pick your plan!',
    device: 'both',
  },
  {
    target: '#features',
    content: 'Our platform includes advanced analytics, team collaboration tools, and API access.',
    contentMobile: 'Key features here',
    device: 'both',
  },
];

'use client';
 
import { useState, useEffect } from 'react';
import { Tour } from 'nfsfu234-tour-guide';
 
function isMobileDevice() {
  return typeof window !== 'undefined' && window.innerWidth < 768;
}
 
export default function ResponsiveTour() {
  const [showTour, setShowTour] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
 
  useEffect(() => {
    setIsMobile(isMobileDevice());
    const hasSeenTour = localStorage.getItem('hasSeenTour');
    if (!hasSeenTour) {
      const timer = setTimeout(() => setShowTour(true), 100);
      return () => clearTimeout(timer);
    }
  }, []);
 
  const handleComplete = () => {
    localStorage.setItem('hasSeenTour', 'true');
    setShowTour(false);
  };
 
  const steps = [
    {
      target: '#hero',
      content: 'Welcome! Let me show you around the platform.',
      contentMobile: 'Welcome! Quick tour.',
      position: 'bottom',
      device: 'both',
    },
    {
      target: '#main-nav',
      content: 'Navigate between Dashboard, Projects, and Settings using this menu.',
      position: 'bottom',
      device: 'desktop',
    },
    {
      target: '#hamburger-menu',
      content: 'Tap here to open the navigation menu.',
      position: 'bottom',
      device: 'mobile',
    },
    {
      target: '#create-button',
      content: 'Click here to create a new project.',
      contentMobile: 'Create new projects here.',
      position: isMobile ? 'bottom' : 'left',
      device: 'both',
    },
  ];
 
  return (
    <Tour
      isActive={showTour}
      steps={steps}
      theme="dark"
      accentColor="#10b981"
      welcomeScreen={{
        enabled: true,
        title: isMobile ? 'Welcome! 👋' : 'Welcome to the Platform! 👋',
        message: isMobile
          ? 'Quick 30-second tour.'
          : 'Let me give you a quick tour. This will only take 60 seconds.',
        startButtonText: isMobile ? 'Start' : 'Start Tour',
      }}
      buttonLabels={{
        next: isMobile ? 'Next' : 'Next →',
        previous: isMobile ? 'Back' : '← Back',
        skip: 'Skip',
        finish: isMobile ? 'Done!' : 'Got it! 🎉',
      }}
      onComplete={handleComplete}
      onSkip={handleComplete}
    />
  );
}

{ device: 'desktop' } // Desktop only
{ device: 'mobile' }  // Mobile only
{ device: 'both' }    // All devices (default)

// ✅ Good
{ contentMobile: 'Use sidebar to navigate' }
 
// ❌ Too long for mobile
{ contentMobile: 'This is still a very long explanation that will be hard to read on a small screen...' }

const isMobile = window.innerWidth < 768;
 
{
  target: '#button',
  position: isMobile ? 'bottom' : 'right',
}

{
  target: '#advanced-settings',
  content: 'Configure advanced options here.',
  device: 'desktop', // Skip this step on mobile
}