change gettings started structure

apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx

@@ -1,4 +1,8 @@
 import { Libraries } from "@/components/docs/Libraries";
+import Image from "next/image";
+import SetupChecklist from "./env-id.webp";
+import WidgetNotConnected from "./widget-not-connected.webp";
+import WidgetConnected from "./widget-connected.webp";
 
 export const metadata = {
   title: "Framework Overview",
@@ -12,6 +16,20 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
 
 <Libraries />
 
+## Prerequisites
+
+Before getting started, make sure you have:
+
+1. A web application in your desired framework set up and running.
+2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:
+
+<Image
+  src={SetupChecklist}
+  alt="Step 2 - Setup Checklist"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
 ## Formbricks x HTML
 
 <Row>
@@ -274,3 +292,23 @@ for something else, please [join our Discord!](https://formbricks.com/discord) a
 
   </Col>
 </Row>
+
+## Validate your setup
+
+Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:
+
+<Image
+  src={WidgetNotConnected}
+  alt="Widget isnt connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+
+To this:
+
+<Image
+  src={WidgetConnected}
+  alt="Widget is connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

apps/formbricks-com/components/docs/Navigation.tsx

@@ -186,13 +186,13 @@ export const navigation: Array<NavGroup> = [
       { title: "What is Formbricks?", href: "/docs/introduction/what-is-formbricks" },
       { title: "Why is it better?", href: "/docs/introduction/why-is-it-better" },
       { title: "How does it work?", href: "/docs/introduction/how-it-works" },
-      { title: "How to integrate Formbricks?", href: "/docs/introduction/framework-overview" },
     ],
   },
   {
     title: "Getting Started",
     links: [
       { title: "Quickstart: In app", href: "/docs/getting-started/quickstart-in-app-survey" },
+      { title: "Framework Guides", href: "/docs/getting-started/framework-guides" },
       { title: "Next.js App Dir", href: "/docs/getting-started/nextjs-app" },
       { title: "Next.js Pages Dir", href: "/docs/getting-started/nextjs-pages" },
       { title: "React.js", href: "/docs/getting-started/react" },