Addressed review comments

Author: pinkeshmars

docs/intro/ff-ui/builder.md

@@ -2,26 +2,27 @@
 slug: builder
 title: App Builder
 tags: []
+description: Explore the App Builder in FlutterFlow, featuring a comprehensive interface with four main sections. Navigation Menu, Toolbar, Canvas, and Properties Panel.
 ---
 
 # App Builder
 
-On opening the project, you'll see the App Builder, which consists of four main sections: Navigation Menu, Toolbar, Canvas, and Properties panel.
+On opening the project, you'll see the App Builder, which consists of four main sections: [Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties panel](#properties-panel).
 
 ![AppBuilder.avif](imgs/AppBuilder.avif)
 
-## 1. Navigation Menu
+## 1. Navigation Menu {#navigation-menu}
 
 The [Navigation Menu](navigation-menu) provides access to the project's widget palette, widget tree, storyboard, and features like Firestore, API calls, asset uploads, app values, integrations, custom functions, theme settings, and more.
 
-## 2. Tool Bar
+## 2. Tool Bar {#toolbar}
 
 From [Tool Bar](toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app.
 
-## 3. Canvas Area
+## 3. Canvas Area {#canvas-area}
 
 In the [Canvas Area](canvas), you can see a preview of your mobile device's screen and build your app page.
 
-## 4. Properties Panel
+## 4. Properties Panel {#properties-panel}
 
-The Properties Panel lets you modify both the visual appearance and interactive behavior of UI elements on the canvas. It allows you to add Actions, set up a Backend Query, add Animations and more.
+The Properties Panel lets you modify both the visual appearance and interactive behavior of UI elements on the canvas. It allows you to add [Actions](#), set up a [Backend Query](#), add [Animations](#) and more.

docs/intro/ff-ui/canvas.md

@@ -2,6 +2,7 @@
 slug: canvas
 title: Canvas
 tags: []
+description: Dive into the versatile Canvas in FlutterFlow, where you can effortlessly design and preview your app’s interface.
 ---
 
 # Canvas 
@@ -48,7 +49,7 @@ This becomes really helpful in testing your app design with translated text with
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/ViB374dOSglo4Z1afa0o?embed&show_copy_link=true"
+        src="https://demo.arcade.software/E6otMpbcKewMYCfkjl9d?embed&show_copy_link=true"
         title="Sharing a Project with a User"
         style={{
             position: 'absolute',

docs/intro/ff-ui/imgs/restore-version.png

@@ -2,6 +2,7 @@
 slug: navigation-menu
 title: Navigation Menu
 tags: []
+description: Explore the Navigation Menu in FlutterFlow, your central hub for accessing a wealth of development features and tools.
 ---
 
 # Navigation Menu

docs/intro/ff-ui/navigation-menu.md

@@ -2,6 +2,7 @@
 slug: resource-hierarchy
 title: Resource Hierarchy Overview
 tags: []
+description: Explore the Resource Hierarchy Overview to understand the correlation between traditional Flutter app components and their equivalents in FlutterFlow.
 ---
 
 # Resource hierarchy overview
@@ -14,7 +15,7 @@ This diagram serves as a useful guide for developers transitioning from a tradit
 
 ## 1. MyApp to Project
 
-In Flutter, `MyApp` typically represents the root of your application, where you set up routes and other global configurations. In FlutterFlow, the equivalent is the "Project," which encompasses the entire application you are building, including its configurations and settings. Learn more about creating a project [here](#).
+In Flutter, `MyApp` typically represents the root of your application, where you set up routes and other global configurations. In FlutterFlow, the equivalent is the "Project," which encompasses the entire application you are building, including its configurations and settings. Learn more about creating a project [here](../../resources/Projects/how-to-create-find-organize-projects#how-to-create-a-project).
 
 ## 2. MyPage to Page
 

docs/intro/ff-ui/resource-hierarchy.md

@@ -2,6 +2,7 @@
 slug: storyboard
 title: Storyboard
 tags: []
+description: Master the Storyboard view in FlutterFlow to visualize your app’s design and user navigation. The Storyboard allows you to see screens and interactions, ensuring a seamless user experience.
 ---
 
 # Storyboard
@@ -30,7 +31,7 @@ We use the following elements inside the storyboard:
 
 ## Highlight routes on a page
 
-With so many pages displayed on a Storyboard, it may be difficult to identify what routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, just click on a page, and the routes will be highlighted in blue color.
+With so many pages displayed on a storyboard, it may be difficult to identify which routes are coming and where they go from a specific page, especially when lines overlap each other. To highlight the incoming and outgoing routes on a specific page, simply click on the page, and the routes will be highlighted in blue.
 
 ![highlight-routes.avif](imgs/highlight-routes.avif)
 

docs/intro/ff-ui/storyboard.md

@@ -2,6 +2,7 @@
 slug: toolbar
 title: Toolbar
 tags: []
+description: Navigate the Toolbar in FlutterFlow for efficient access to essential tools and features. This includes project management, version control, interactive help resources, and direct actions like running your app, reporting issues, and customizing your workspace.
 ---
 
 # Toolbar
@@ -95,23 +96,14 @@ We allow you to visualize and design your app for various mobile, tablet, and de
         allow="clipboard-write">
     </iframe>
 </div>
+
 ## 6. Project history
 
-Versions
+### Versions
 
 Versions enable you to save specific named states of your project. This function is particularly useful for recovery purposes. If you accidentally delete a page or component or change settings, you can easily revert to a saved version.
 
-Snapshots
-
-Snapshots are automatically saved as you build.
-
-:::info
-
-Users on the *Free* and *Standard* plans can access only one day of snapshots.
-
-:::
-
-### 6.1 Saving a version
+#### 6.1 Saving a version
 
 Saving the latest changes will store the current state of your app in the version control. In the future, if anything goes wrong, you can restore your app to the currently saved state.
 
@@ -142,11 +134,22 @@ Ideally, you should save the version whenever you accomplish something important
         allow="clipboard-write">
     </iframe>
 </div>
-### 6.2 Restoring a version
 
-Restoring the previous version will preserve the current version, then load the changes from the version you're restoring. Before restoration, you may want to view the changes in the previous version. To do this, select the Peek option, which opens the previous version in a new tab.
+#### 6.2 Restoring a version
+
+Restoring the previous version will preserve the current version, then load the changes from the version you're restoring. Before restoration, you may want to view the changes in the previous version. To do this, select the **Peek** option, which opens the previous version in a new tab.
+
+![restore-version.png](imgs/restore-version.png)
+
+### Snapshots
+
+Snapshots are automatically saved as you build.
+
+:::info
 
-![Screenshot 2024-05-06 at 10.57.51 AM.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/09694bda-16f5-490f-aaac-3601b64ca6a2/62cabaee-ff75-496b-be7e-6df40a3cd8f2/Screenshot_2024-05-06_at_10.57.51_AM.png)
+Users on the *Free* and *Standard* plans can access only one day of snapshots.
+
+:::
 
 ## 7. Project comments
 
@@ -162,9 +165,9 @@ To tag users, select the @ symbol and choose the project team member(s).
 
 We scan and suggest enhancements to elevate your app's design and speed. Imagine having a personal consultant for design and performance dedicated to improving the user experience of your app.
 
-Optimizations: We spotlight elements that may slow down your app. For example, a query on a column, unused and duplicate backend query, a widget with unbounded size, etc.
+**Optimizations**: We spotlight elements that may slow down your app. For example, a query on a column, unused and duplicate backend query, a widget with unbounded size, etc.
 
-UI Enhancements: We offer tips for a more visually appealing and user-friendly design, like resizing a small tap target of any widget.
+**UI Enhancements**: We offer tips for a more visually appealing and user-friendly design, like resizing a small tap target of any widget.
 
 :::info
 
@@ -178,6 +181,10 @@ You can control what kind of suggestions you would like to receive by clicking o
 
 If there are any issues or warnings present in your current project that might result in a build failure or app crash, they will be displayed in this section. You can click this option to view a short description of each issue and navigate to the place where you can fix the issue by clicking on the respective issue.
 
+Errors prevent your app from compiling and running. These must be resolved in order to run the app. They can be due to missing actions, errors in custom code, incorrect data types, and so on.
+
+Warnings, while not preventing compilation, indicate potential issues such as incorrect rules setup or performance problems. Although it's possible to ignore warnings, addressing them can enhance the quality of your app and prevent future issues.
+
 ![Warning-and-errors.avif](imgs/Warning-and-errors.avif)
 
 ## 10. Branching
@@ -188,24 +195,32 @@ If there are any issues or warnings present in your current project that might r
 
 From here, you can view the code for your project, connect to GitHub, and also download the source code for your project.
 
-## 11.1 View Code
+### 11.1 View Code
 
 This option lets you display the *Dart* code for all the pages of your FlutterFlow project. You can also take a look at the dependencies being used by the app here.
 
-## 11.2 Connect GitHub Repo (Paid Feature)
+### 11.2 Connect GitHub Repo (Paid Feature)
 
 You can use this option to connect your project with your [GitHub](https://github.com/) account and upload it to a GitHub repository. When you click this option, you will be navigated to the Settings and Integrations > Integrations > Github section.
 
 From there, you can configure your project to add GitHub integration to it. You can get a detailed [step-by-step guide](#) for connecting to GitHub.
 
-### 11.3 Download Code (Paid Feature)
+### 11.3 Download Code
 
 You can download the entire codebase of the app generated by FlutterFlow using this option. It will download a `.zip` file. You can open the contents using any code editor to make modifications.
 
-### 11.4 Download APK (Paid Feature)
+:::note
+This feature requires a paid plan.
+:::
+
+### 11.4 Download APK
 
 Use this to generate a release build of your app. It will automatically download the `.apk` file after the building process is complete.
 
+:::note
+This feature requires a paid plan.
+:::
+
 ### 11.5 FlutterFlow CLI
 
 You can also download the code using *[FlutterFlow CLI](https://pub.dev/packages/flutterflow_cli)*. See instructions [here](#).
@@ -223,12 +238,12 @@ You can make a project public so that others can view and clone your project. Be
 
 ## 13. Preview
 
-You can use the Preview mode to quickly try out your app on a virtual device without waiting for it to build. This helps you to have a good overview of the navigation and animations you have added to your app. You can also preview your app in the Dark/Light mode and visualize it on various mobile, tablet, and desktop devices.
+You can use the [Preview mode](../../resources/Projects/how-to-run-test-projects#preview-mode) to quickly try out your app on a virtual device without waiting for it to build. This helps you to have a good overview of the navigation and animations you have added to your app. You can also preview your app in the Dark/Light mode and visualize it on various mobile, tablet, and desktop devices.
 
-This mode has a few limitations; you can't use Firebase or perform API calls in the *Preview* mode. However, the onDoubleTap, onLongPress, and onSubmit works in this mode.
+This mode has a few limitations; you can't use Firebase or perform API calls in the Preview mode. However, the onDoubleTap, onLongPress, and onSubmit works in this mode.
 
-A list of unsupported features is displayed in the Known Issues menu in *Preview mode*.
+A list of unsupported features is displayed in the Known Issues menu in Preview mode.
 
 ## 14. Testing
 
-This menu allows you to run your app in [Test](#) or [Run](#) mode.
+This menu allows you to run your app in [Test](../../resources/Projects/how-to-run-test-projects#test-mode) or [Run](../../resources/Projects/how-to-run-test-projects#run-mode) mode.

docs/intro/ff-ui/toolbar.md

@@ -2,6 +2,7 @@
 slug: widget-palette
 title: Widget Palette
 tags: []
+description: Explore the Widget Palette in FlutterFlow to access a wide range of UI elements. This feature offers an intuitive interface for dragging and dropping Flutter widgets onto your canvas.
 ---
 # Widget Palette
 

docs/intro/ff-ui/widget-palette.md

@@ -2,6 +2,7 @@
 slug: quickstart
 title: Quick Start Guide
 tags: []
+description: Jumpstart your FlutterFlow journey with our Quick Start Guide. Learn to build a dynamic app and explore essential FlutterFlow features like UI building, state management, and app execution.
 ---
 
 # **Quick Start Guide**
@@ -12,7 +13,8 @@ This quickstart is designed to be straightforward and accessible, introducing yo
 <!-- TO DO: add links to resource section later on -->
 
 Below is a preview of what your app will look like once completed:
-<img src="../../static/img/flutterflow-quick-start-app-demo.avif" alt="flutterflow-quick-start-app-demo.avif"  />
+
+![Quick start demo app](../../static/img/flutterflow-quick-start-app-demo.avif)
 
 ## **What you'll learn**
 - Creating layouts (add widgets)

docs/intro/quickstart.md

@@ -9,13 +9,30 @@ const sidebars: SidebarsConfig = {
             type: 'category',
             label: 'Getting Started',
             collapsed: false,
-            items: ['index', {
-                type: 'category', label: "Before You Begin", items: [
-                    'intro/before-you-begin/setting-up-flutterflow', 'intro/before-you-begin/app-architecture', 'intro/quickstart'
-                ]
-            },{type: 'category', label: "FlutterFlow UI", items: [
-                'intro/ff-ui/builder', 'intro/ff-ui/navigation-menu','intro/ff-ui/widget-palette','intro/ff-ui/storyboard','intro/ff-ui/toolbar','intro/ff-ui/canvas','intro/ff-ui/resource-hierarchy'
-            ]}],
+            items: ['index'],
+        },
+        ,'intro/quickstart',
+        {
+            type: 'category',
+            label: 'Before You Begin',
+            collapsed: false,
+            items: [
+                {
+                    type: 'autogenerated',
+                    dirName: 'intro/before-you-begin'
+                }
+            ],
+        },
+        {
+            type: 'category',
+            label: 'Understanding the FlutterFlow UI',
+            collapsed: false,
+            items: [
+                {
+                    type: 'autogenerated',
+                    dirName: 'intro/ff-ui'
+                }
+            ],
         },
         {
             type: 'category',