feat: independent troubleshooting guide page

[ShubhamPalriwala]

What does this PR do?

We now have a standalone Troubleshooting Guide page where each topic is linkable hence sharable so that its easier to share across on Discord or GitHub.

We move the existing troubleshooting options from the in-app surveys quickstart here and also add a couple of topics as per our JS widget. These can be expanded in real time as and when we find in the community the common friction points.

Type of change

• This change is a documentation update

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)		Nov 7, 2023 10:33am
formbricks-com	⬜️ Ignored (Inspect)		Nov 7, 2023 10:33am

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/formbricks-com/app/docs/getting-started/quickstart-in-app-survey/page.mdx

Instead of importing each image individually, you can use dynamic imports to make your code cleaner and more maintainable. This will be particularly useful if the number of images increases in the future.
Create Issue

    const images = [];
    for (let i = 1; i <= 8; i++) {
      images.push(import(`./${i}-in-app-survey-or-popup-survey-setup.webp`));
    }

Instead of repeating the className attribute in each Image component, you can define a constant and use it for all the images. This will make your code DRY (Don't Repeat Yourself) and easier to maintain.
Create Issue

    const imageClassName = "max-w-full rounded-lg sm:max-w-3xl";

    <Image
      src={I1}
      alt="Choose in app survey template"
      quality="100"
      className={imageClassName}
    />

[mattinannt]

looks great, thank you :-)