Add links to widget tree section (#193)

* add links to widget tree section

* Updated page properties panel image

* update page properties image with bullet arrows

---------

Co-authored-by: Pinkesh <[email protected]>

Author: PoojaB26

docs/resources/ui/components/intro-components.md

@@ -9,6 +9,8 @@ slug: /resources/ui/components
 Components in FlutterFlow are reusable widgets. You design the widget once and can use it throughout your app
 to save time, ensure consistency, and make it easier to maintain.
 
+When you add a component to a [**Page**](../pages/intro-pages.md), it becomes part of that page's **[Widget Tree](../widgets/intro-widgets.md#widget-tree)**. This allows the component to interact with other widgets, inherit properties, and respond to state changes as part of the page's structure.
+
 Components help in the following ways:
 
 - **Consistency:** Components provide a consistent look and behavior, reducing the likelihood of
@@ -20,7 +22,7 @@ Components help in the following ways:
   app automatically reflect those changes. This significantly reduces the effort required to
   maintain and update the app.
 
-  :::tip[CLasses vs Instances]
+  :::info[CLasses vs Instances]
   Learn more about **[Classes and their Instances](../overview.md)** and what they mean in
   FlutterFlow.
   :::

docs/resources/ui/imgs/page-properties-panel.png

@@ -10,6 +10,10 @@ In FlutterFlow, a **Page** represents a single screen in your app. Under-the-hoo
 
 Pages are composed of various UI elements, or widgets. Widgets are added to a page when they are added to the page's **Widget Tree**. 
 
+:::note[Widget Tree]
+The **Widget Tree** is a structural representation of how widgets are organized within a Page. To learn more, check out the [**Widget Overview**](../widgets/intro-widgets.md#widget-tree) documentation.
+:::
+
 In FlutterFlow, pages are automatically configured to handle [routing](https://docs.flutterflow.io/resources/ui/pages/properties#route-settings). Additionally, pages can have [input parameters](https://docs.flutterflow.io/resources/ui/pages/properties#page-parameters) and [state variables](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#page-state). 
 
 :::info

docs/resources/ui/pages/intro-pages.md

@@ -6,14 +6,12 @@ sidebar_position: 1
 
 # Properties Panel
 
+In FlutterFlow, the properties panel on the right helps you set up and manage your pages. It opens when you click on the root element in the [Widget Tree](../widgets/intro-widgets.md#widget-tree) (on the left).
 
-In FlutterFlow, the properties panel located on the right side of the interface
-plays a crucial role in configuring and managing the various aspects of your
-pages. This panel is divided into several sections, each dedicated to different
-settings and adjustments you can make to customize your pages.
+The panel is organized into sections, each focusing on different settings to customize your pages.
 
 Here’s a detailed look at what you can typically find and modify in this panel:
-![props-panel.png](../imgs/props-panel.png)
+![page-properties-panel.png](../imgs/page-properties-panel.png)
 
 ### Page Parameters
 

docs/resources/ui/pages/pages-properties.md

@@ -6,16 +6,9 @@ sidebar_position: 2
 
 # Properties Panel
 
-In FlutterFlow, the Properties Panel located on the right side of the interface plays a crucial role
-in configuring and managing the various aspects of your widgets. This panel is divided into several
-sections, each dedicated to different settings and adjustments you can make to customize your
-widgets.
+In FlutterFlow, the Properties Panel on the right helps you configure and manage your widgets. It opens when you click on a widget or [component](../components/intro-components.md) in the [**Widget Tree**](../widgets/intro-widgets.md#widget-tree).
 
-## Widget Properties
-
-When you click on a widget from the Widget Tree, the **Widget Properties Panel** opens up on the
-right side. There you can customize the properties for the selected widget, which may vary
-based on the type of widget and also add other advanced configurations to the widget.
+The panel is divided into sections, each focusing on settings specific to the selected widget. The available options may vary depending on the widget type, with additional advanced configurations available for further customization.
 
 ![advanced-configs-widgets.png](../imgs/advanced-configs-widgets.png)