added step by step guide

apps/formbricks-com/app/docs/contributing/gitpod/page.mdx

@@ -1,5 +1,9 @@
 import Image from "next/image";
 import GitpodPorts from "./gitpod-ports.webp";
+import GitpodAuth from "./gitpod-auth.webp";
+import GitpodNewWorkspace from "./gitpod-new-workspace.webp";
+import GitpodPreparing from "./gitpod-preparing.webp";
+import GitpodRunning from "./gitpod-running.webp";
 
 export const meta = {
   title: "Gitpod Setup",
@@ -25,6 +29,25 @@ export const meta = {
 
 After clicking the one-click setup button, Gitpod will open a new tab or window. Please ensure that your browser allows redirection to successfully access the services:
 
+**Authorizing in Gitpod**
+<Image src={GitpodAuth} alt="Gitpod Auth Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- This is the Gitpod Authentication Page. It appears when you click the "Open in GitPod" button and Gitpod needs to authenticate your access to the workspace. Click on 'Continue With Github' to authorize your GitPod session.
+
+**Creating a New Workspace**
+<Image src={GitpodNewWorkspace} alt="Gitpod New Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- After authentication, Gitpod asks to create a new workspace for you. This page displays the configurations of your workspace. 
+- You can use either choose either VS Code Browser or  VS Code Desktop editor with the 'Standard Class' for your workspace class.
+- If you opt for the VS Code Desktop, Gitpod will prompt you to grant access to the VSCode app. Once approved, install the GitPod extension from the VSCode Marketplace and follow the prompts to authorize the integration.
+
+
+**Gitpod preparing the created Workspace**
+<Image src={GitpodPreparing} alt="Gitpod Preparing Worskpace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- Gitpod is preparing your workspace with all the necessary dependencies and configurations. You will see this page while Gitpod sets up your development environment.
+
+**Gitpod running the Workspace**
+<Image src={GitpodRunning} alt="Gitpod Running Workspace Page" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+- Once the workspace is fully prepared, voila, it enters the running state. You can start working on your project in this environment.
+
 ### Ports and Services
 
 Here are the ports and corresponding URLs for the services within your Gitpod environment: