InstallTutorial.tsx

export function InstallTutorial() {
  return (
    <div className='max-w-lg mx-auto p-6 pt-0 space-y-6 rounded-lg'>
      <div className='p-3 border border-blue-400 rounded text-xl font-bold text-center bg-gray-100 text-blue-700'>
        Get the best experience by installing the app on your device.
      </div>

      <div className='mb-6 pb-6 border-b border-gray-200'>
        <h3 className='text-lg font-semibold mb-3'>iOS</h3>
        <ol className='list-decimal list-inside space-y-2 text-sm'>
          <li>Open this website in Safari</li>
          <li>
            <span className='flex flex-row items-center'>Tap the "Share" button</span>
          </li>
          <li>
            <span className='flex flex-row items-center'>Scroll down and tap "Add to Home Screen"</span>
          </li>
          <li>Customize the name and tap "Add"</li>
        </ol>
      </div>

      <div className='mb-6 pb-6 border-b border-gray-200'>
        <h3 className='text-lg font-semibold mb-3'>Android</h3>
        <ol className='list-decimal list-inside space-y-2 text-sm'>
          <li>Open this website in Chrome or another modern browser</li>
          <li>Tap the menu button (three dots)</li>
          <li>Tap "Install app" or "Add to Home Screen"</li>
          <li>Confirm the installation</li>
        </ol>
      </div>

      <div>
        <h3 className='text-lg font-semibold mb-3'>Desktop/Laptop</h3>
        <ol className='list-decimal list-inside space-y-2 text-sm'>
          <li>Open this website in Chrome, Edge, or another Chromium-based browser</li>
          <li>Look for the install icon in the address bar (or use the menu)</li>
          <li>Click "Install app" when prompted</li>
          <li>Choose where to install and complete the setup</li>
        </ol>
      </div>
    </div>
  );
}